/* DEFAULTS
----------------------------------------------------------*/
body
{
     font-family: segoe ui,Arial,sans-serif;
    background-color:#f2f2f2;
}
a
{
    color:#0079C2;
}
a visited
{
    color:#0079C2;
}
td.center-cell-import {text-align:center;}
.ui-autocomplete-loading {
            background: white url('../images/throbber.gif') right center no-repeat;
        }
       .ui-autocomplete li a {width:100% !important;display:inline-block !important;}
       ui-autocomplete li a:hover {width:200px !important;display:inline-block !important;}
       .ui-autocomplete li img {float:left !important;display:inline-block !important;}
       .ui-menu-item a {width:220px !important;display:inline-block !important; }
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   display:block;
}

div.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}
div#menuDiv.tab-container div ul.dropdown li ul.sub_menu li {z-index:100;}
.import-count {font-weight:bold;font-size: 12px;}
.aspNetDisabled {opacity:0.5;}
table.icoGrid tbody tr.warning-row td a {color:Black;}
/*table.icoGrid tbody tr.error-row td a {color:White;}*/

table.icoGrid tbody tr.error-row td a, table.icoGrid tbody tr.error-row td {color:#cd0a0a;}
table.icoGrid tbody tr.error-row:hover {color:White;}
table.icoGrid tbody tr.error-row td {background-color:#fef1ec;}
table.icoGrid tbody tr.error-row td.error-cell {background-color:Red;color:White;}

table.greenTable {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

    table.greenTable td, table.greenTable th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    table.greenTable tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    table.greenTable tr:hover {
        background-color: #ddd;
    }

    table.greenTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #04AA6D;
        color: white;
    }

   #logItems li
    {
      /*  height:18px; */
    }
#logItems li span, #logSummaryItems li span
{
    
    font-size:12px;
    font-family:Terminal;
}

span.logoLabel {display:inline-block;}
span.logoCode {display:inline-block;width:50px;font-size:18px; font-weight:bold;}

.progErr
{
    margin-top:20px;
    background-color:Red;
    width:100%;
    color:White;
}

.progWarning
{
    background-color:Yellow;
    color:#666666;
    width:100%;
}
.loadComplete
{
    margin-top:20px;
    background-color:Green;
    width:100%;
    color:White;
}
.colfam-chkbox {display:inline-block;float:left;margin:15px;}
  span.cfCheckBox input {display:inline-block;float:left;margin:15px 20px 0px 10px;}
    .cf-nevershow {display:none !important;}
span.szgrp-name {font-size:8px;margin:0px 3px;}
div.cf-zero-selected {opacity:0.5;}
div.cf-hidden {display:none;}
input[type="submit"] { cursor:pointer;}
span.error-header, span.warning-header {font-weight:bold;display:inline-block;float:left;clear:both;font-size:16px;}
span.error-line, span.warning-line {display:inline-block;float:left;clear:both;font-size:12px;}
span.error-header, span.error-line {color:#cd0a0a;;}
span.warning-header, span.warning-line {color:#e6b800;}
.icoGrid
{
    
}
.icoGrid .icoGridHeader
{
   border:1px solid #d4ccb0;
}
.icoGrid .icoGridRow
{
   clear:both;
}

div.row-selected {background-color:#dfeffc;border:1px solid #a6c9e2;}
.icoGridAltRow
{
   /* background-color:White;
*/
}

.icoGridRow td, .icoGridAltRow td
{
    font-size: small;
    padding-left:5px;
    overflow:hidden;
    table-layout:fixed;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:200px;
    border:1px solid #d4ccb0;
}

table.icoGrid tbody tr.ui-widget.ui-widget-content.ui-widget-header th {border:1px solid #d4ccb0;}

.icoGridAltRow:hover, .icoGridRow:hover
{
   background:#dfeffc none repeat scroll 0 0;
 /*   color:White  !important;
*/
}

.icoGridRow.error-row:hover
{
    background:#dfeffc none repeat scroll 0 0;
}
/*
.icoGridRow a { color:#0079C2;}
.icoGridAltRow a { color:#0079C2;}
*/
.icoGridAltRow a:hover, .icoGridRow a:hover
{    
    color:#666666;
}

div.content-wrap {
    width: 100%; 
    /*max-width:1024px;*/
    max-width: 1280px;
    margin: 0 auto 0 auto;
}
div.pagecontent-header {color:#005cb9; width:99%; height:24px;margin-top:5px;   margin-bottom:10px; float:left; clear:both; font-weight:bold;}
   .swatchDiv {width:56px; height:120px; margin:10px 10px 10px 10px;float:left; text-align:center;box-shadow: 2px 2px 3px #CCC;}
    .swatchDiv a {font-size:x-small; color:Red;}
    .swatchDiv span {font-size:x-small;}
    .swatchLink {width:100%;clear:both;text-align:center;color:Red;}
    .brandColorHeader {float:left;width:100%; height:20px; margin:15px 0px 10px 0px; clear:both;background: none repeat scroll 0 0 #72c267; color:#FFFFFF;font-size:12px; font-weight:bold;}
    .swatchDivIntContainer {height:100px !important;}
     .swatchDisabled {opacity:0.5; box-shadow:none !important;}

.productImageSmall {
    /* background-color: #72C267; */
    background-position: center center;
    background-repeat: no-repeat;
    border-color: #416188;
    border-style: solid;
    border-width: 1px;
    height: 75px;
    width: 75px;
}

.disabledItemDiv {opacity:.5;background-color:#EEEEEE;}
.RecentlyAdded
{
    
    
}

#divTrash
{
    margin:2px 3px 0px 0px;   
}
#divTrash:hover
{
     border-style:solid;
     border-width:2px;
     border-color:Green;
}
#divTrash:mouseup
{
    border-color:Red;   
}

.noclose .ui-dialog-titlebar-close
{
    display:none;
}

.ico-headerfont-s
{
    font-weight:600;   
}

.ico-content-panel
{
   padding:10px 10px 10px 10px;
    width:94%;
    clear:both;
}

/* A class used by the jQuery UI CSS framework for their dialogs. */
.ui-front {
    z-index:1000000 !important; /* The default is 100. !important overrides the default. */
}

.ico-kv-lineitem
{
    width:100%; float:left; padding-left:5px;margin-bottom:3px;
}
.ico-kv-lineitem-k
{
    float:left; clear:none;
}
.ico-kv-lineitem-v
{
    width:100px; float:right;padding-right:10px;text-align:right;font-weight:600;
}

.fg-button:hover
{
    cursor:pointer;
}


/* Progress bar stuff */
.statusbar
{
	position: fixed;
	bottom: 0px;
	left: 10px;
	right: 10px;
	height: 16px;	
	padding: 8px 2px 8px 10px;	
	font-weight: bold;
	background: black;
	color: white;	
	opacity: .85;	
	filter: alpha(opacity="85");
	z-index: 200;
	overflow: hidden;	
	border-radius: 8px 8px 0 0;            
    	box-shadow: -1px -1px 6px 2px #535353;
}
.statusbarhighlight
{
	font-weight: bold;
	color: yellow;	
}
.statusbarclose
{
	position: absolute;
	right: 20px; 
	top: 2px;
	color:red;
	font-size: 8pt;
	font-weight: bold;
	cursor: pointer;
}

/* Form Fields */

.fieldContainer {
    clear: both;
    float: left;
    height: 30px;
    margin: 5px 0 0 10px;
    width: 450px;
}
.fieldContainer label {
    clear: left;
    display: inline;
    float: left;
    font-weight: bold;
    margin: 6px 0 0 3px;
    width: 140px;
}
.fieldContainer input, select {
    background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE 1px, #FFFFFF 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #DDDDDD;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 2px #DDDDDD;
    margin-top: 1px;
    padding: 5px;
    width: 250px;
}
.fieldContainer input[type="checkbox"] {
    border-style: none;
    margin: 0 !important;
    padding: 0;
    height:30px;
}

.focusInitialField {
    background: none repeat scroll 0 0 #FFFF99 !important;
}
.fieldContainer select {
    width: 260px !important;
}
.fieldContainer input:hover {
    border: 1px solid #CCCCCC;
}
.fieldContainer input:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 0 2px #21468C;
}


.headerGreenShadow {
   -moz-box-shadow:    inset 0 0 10px #72C267 !important;
   -webkit-box-shadow: inset 0 0 10px #72C267 !important;
   box-shadow:         inset 0 0 10px #72C267 !important;
   transition: box-shadow 1s;
}
.brandDialogHeader
{
}

    .checkButton{
    background-image: url("/scripts/jstree/themes/classic/d.png");
    background-position: 0 -56px;
    background-repeat: no-repeat;
    float: right;
    height: 18px;
    left: 95%;
    margin-right: 6px;
    margin-top: 5px;
    position: relative;
    width: 24px;
    }
    
    #editColorfamilyButtons
    {
        width:100px;
        float:right;
        height:30px;
    }

.accordionButton {
  /*  border-bottom: 1px solid #ffffff;
  */
    cursor: pointer;
    float: left;
    width: 100%;
    height:60px;
    padding:3px 3px;
 /*   border-style:solid;
    border-width:1px;
    border-color:#EEEEEE;
*/
border: 1px solid #c5dbec;
    z-index:1000;
    clear:both;
}
.accordionContent {
   float: left;
    width: 100%;
}
.on {
    background: none repeat scroll 0 0 #990000;
}
.over {
    background: none repeat scroll 0 0 #ffffff;
}
.colorFamilyDiv img {display:block;float:left;clear:none;height:50px; width:50px;}
.colorFamilyDivTitle {float:left;width:200px;height:30px;margin:5px 0px 0px 10px;font-size:x-large;}
.colorFamilyDivDetails {width:400px;float:left;margin-top:15px;z-index:1001;}
.colorFamilyDivDetails .selectedCount {width:100px;font-size:small;margin-top:7px;}
.colorFamilyDivDetails .availableCount {width:100px;font-size:small;margin-top:10px; color:Gray;}
.colorFamilyDivDetails .selectedCount span {color:Red; font-size:large;}     
.colorFamilyColorDiv {margin: 5px 5px 5px 15px;width:100%;height:30px;float:left; clear:both;cursor:pointer;background-color:White; }
.colorFamilyBrandDiv {margin: 5px 5px 5px 15px;width:100%;height:20px;float:left; clear:both;cursor:pointer; }
.colorFamilyColorDiv:hover { background-color:#dfeffc;}
.colorFamilyBrandDiv:hover { background-color:White;}
.colorFamilyColorDiv img {display:inline-block; float:left; margin:0px 10px 0px 25px;}
.colorFamilyColorDiv a span {margin:0px 25px 10px 25px !important;font-size:small; text-decoration:none !important;}
.colorFamilyColorDiv a {width:800px ;height:25px; text-decoration:none !important;}
.colorFamilyColorHeader {font-size:small;width:250px !important;display:block; float: left;}
.colorFamilyActiveCount {width:150px; float: left;}
.colorFamilyColorIdHeader {
    width: 100px;
    font-weight: bold;
    padding-left: 10px;
    float: left;
}
.colorFamilyTotalCount {
    width: 150px;
    float: left;
}
.colorFamilyColorBrandHeader {font-weight:bold;width:90%;clear:both;margin:15px 0px 10px 20px; }

.pagerDiv {width:400px; clear:both; cursor:pointer; margin:10px auto 10px auto !important;}


   /* Menu */
        ul									{ list-style: none; padding-left:1px; }
        ul.dropdown                         { position: relative; z-index:100; }
        ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #5bb65d;z-index:100;  }
        ul.dropdown a:hover		            { color: white;}
        ul.dropdown a:active                { color: #ffa500; }
        ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #0079C2;
	 								          color: white; text-decoration: none;font-family: segoe ui, Arial, sans-serif; }
        ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
        ul.dropdown li.hover,
        ul.dropdown li:hover                { background: #0079C2; color: black; position: relative; }
        ul.dropdown li.hover a              { color: white; }


        /* 
	        LEVEL TWO
        */
        ul.dropdown ul 						{ width: 240px; visibility: hidden; position: absolute; top: 100%; left: 0; }
        ul.dropdown ul li 					{ font-weight: normal; background: #5bb65d; color: #000; 
									          border-bottom: 1px solid #ccc; float: none; }
									  
                                            /* IE 6 & 7 Needs Inline Block */
        ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block;  } 

        /* 
	        LEVEL THREE
        */
        ul.dropdown ul ul 					{ left: 100%; top: 0; }
        ul.dropdown li:hover > ul 			{ visibility: visible; }
       
       ul.dropdownBehind {z-index:99 !important;margin-top:0px;}
      ul.dropdown.dropdownBehind li a {padding:0px 4px;}
       div#optionDivCat ul.dropdown.dropdownBehind ul {width:260px !important;}
       div#optionDivCat ul.dropdown.dropdownBehind ul li {width:260px !important;}
       
        .ProductSelectContainer {height:140px;overflow:hidden;width:82px;float:left; 
                               display:inline-block;
                               padding:2px 2px;
                               border-style:none;
                               font-size:xx-small;
                               cursor:pointer;
                               border:1px solid #D4CCB0;
                               margin-left:3px;
                               margin-bottom:5px;
								text-align:center;
								}
      .ProductImageContainer {height:76px; 
                              width:76px; 
                              background-color:#72C267; 
                              background-position:center center;
                              border:1px solid #D4CCB0;
                              float:left; 
                            margin:0px 2px 5px 2px; 
                            padding:0px 0px;}
                            
    .ProductSelectContainer span {display:inline-block;clear:both; }
    .ProductSelectContainer div {clear:both;}
    .ProductSelectSKU {font-weight:bold; font-size:12px;clear:both;width:100%;display:inline-block;}
    .ProductSelectBrand { height:12px; overflow:hidden;}
    .ProductSelectName{ text-align:left;color:#666666;text-align:left;margin-top:3px; height:50px;font-size:xx-small; clear:both;display:block;float:left;overflow:hidden;}  
    .ProductSelectCheckboxContainer {width:100%;clear:both;}
    .ProductSelectCheckboxContainer span {max-height:22px;}
    
    
.ProductSelectContainer-inline {cursor:pointer;float:left;height:22px;clear:both;margin-bottom:2px;border:1px solid transparent;padding:1px 0px 1px 5px;}
ProductSelectContainer-inline span {}
.ProductImageContainer-inline {}
.ProductSelectSKU-inline { display:inline-block;font-weight:bold;width:160px;overflow:hidden;}
.ProductSelectName-inline {display:inline-block;width:400px; overflow:hidden;color:#666666;}
.ProductSelectBrand-inline {display:inline-block;width:200px; overflow:hidden;color:#666666;}
.ProductSelectPrice-inline {display:none;width:100px; overflow:hidden;color:#666666;}
.ProductSelectClassName-inline {display:inline-block;width:100px; overflow:hidden;color:#666666;}
.ProductCategoryRowHeader-inline 
{
    display:none;
    background: #5bb65d none repeat scroll 0 0;
    border: 1px solid #327e04;
    clear: both;
    color: #ffffff;
    float: left;
    font-size: 20px;
    margin: 15px 10px 0 0;
    width: 99%;    
    
}

.ProductSelectBrandHeader-inline
{
    background-color: #ffffff;
 /*   border: 1px solid #dfd9c3;
*/
    clear: both;
    color: #666666;
    float: left;
    font-size: 16px;
    margin: 15px 10px 5px 0;
    padding-right: 5px;
    padding-top: 2px;
    width: 97%;
}

.ProductSelectBrandHeader-inline input
{
    display:block;
    float:right;   
}

.ProductSelectBrandCheckboxContainer-inline
{
 display:inline;   
}

.Included-inline {border-color:#005cb9 !important;}

.Dim-inline {opacity:0.3;}


.commonTbl {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background-color: white;
}

    .commonTbl td span, .commonTbl td label {
        word-break: break-word;
    }

    .commonTbl td, .commonTbl th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .commonTbl tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .commonTbl tr:hover {
        background-color: #ddd;
    }

    .commonTbl th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: center;
        background-color: #04AA6D;
        color: white;
    }

    .commonTbl td {
        font-size: 12px;
        font-weight: normal;
        font-family: serif;
    }

.lnkEdit, .lnkSave {
    border: 1px solid #c5dbec;
    border-radius: 4px;
    background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #005cb9 !important;
    padding: 4px;
    margin-right: 5px;
    text-decoration: none;
}

    .lnkEdit:hover, .lnkSave:hover {
        color: white !important;
        background-color: #005cb9 !important;
    }

.lnkDel, .lnkCancel {
    border: 1px solid #c5dbec;
    border-radius: 4px;
    background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #ff0000 !important;
    padding: 4px;
    margin-right: 5px;
    text-decoration: none;
}

    .lnkDel:hover, .lnkCancel:hover {
        color: white !important;
        background-color: #ff0000 !important;
    }


.lnkUPArr, .lnkDNArr {
    font-weight: bold;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    border: solid 1px green;
    display: block;
    text-align: center;
    vertical-align: middle;
    border-radius: 18px;
    float: left;
}

    .lnkUPArr:before {
        content: url(/images/grid-arrow-up.png);
        vertical-align: middle;
    }

    .lnkDNArr:before {
        content: url(/images/grid-arrow-down.png);
        vertical-align: middle;
    }

    .lnkUPArr:hover {
        background-color: orangered;
    }

    .lnkDNArr:hover {
        background-color: orangered;
    }

tr :nth-of-type(2) > td a.lnkUPArr {
    display: none;
}

tr :last-of-type > td a.lnkDNArr {
    display: none;
}


.sortBtn {
    padding: 7px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    text-decoration: none;
}
.commonBtn {
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}
.greenBtn {
    background-color: green;
    color: white!important;
}
    .greenBtn:hover {
        background-color: #568907;
        color: whitesmoke !important;
    }

.greenReddBtn {
    color: white;
    background-color: orangered !important;
}

    .greenReddBtn:hover {
        background-color: red;
        color: whitesmoke !important;
    }



.rewardPointgridContainer {
    margin: 20px;
    border: solid 1px lightgrey;
    border-radius: 4px;
    padding: 10px;
    background-color: aliceblue;
}

.tblGrid {
    border-collapse: collapse;
    width: 100%;
    font-family: monospace;
}

    .tblGrid td, .tblGrid th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .tblGrid tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .tblGrid tr:hover {
        background-color: #ddd;
    }

    .tblGrid th, .tblGrid .Header td {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #04AA6D;
        color: white;
    }


.websiteStyleContainer {
    width: 800px;
    margin: 0 auto;
    background: white;
    border: solid 2px grey;
    border-radius: 6px;
    padding: 20px;
    font-size: 18px;
}
    .websiteStyleContainer table {
        width: 100%;
    }
    .websiteStyleContainer .commonTbl td {
        font-size: 16px;
    }
.websiteStyleContainer input {
    width: 99%;
}
    .hint {
    background-color: cornflowerblue;
    color: white;
    font-weight:bold;
    font-family:'Comic Sans MS';
    border: solid 1px black;
    border-radius:4px;
    padding: 0px 6px;
    cursor: help;
    margin-left: 15px;
}
.div_save_btn_full {
    width: 100%;
    padding: 10px;
    margin-bottom: 40px;
}
.error-label {
    color: red;
    font-weight: normal;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 16px;
}

.errors {
    display: none;
    color: red;
    line-height: 14px;
    font-weight: normal;
    background-color: aliceblue;
    padding: 7px;
    border-radius: 7px;
    width: 90%;
    margin-left: 4%;
    margin-top: 20px;
}

.error {
    background-color: lightpink;
    border: solid 1px green;
}

.notification {
    position: fixed;
    top: 20%;
    right: 1%;
    width: 30%;
    min-height: 80px;
    max-height: 150px;
    border-radius: 7px;
    border: solid 2px green;
    background-color: lightcyan;
    color: black;
    padding-left: 15px;
    z-index: 999999;
}

.missingTokensDiv {
    color: blue;
    border: solid 1px deeppink;
    width: 90%;
    margin-left: 8%;
    margin-top: 5px;
    float: left;
    padding: 10px;
}

.missingToken {
    color: red;
    font-size: 12px;
    font-style: italic;
    padding: 4px;
}

.invalidMaster {
    color: red;
    font-size: 12px;
    font-style: italic;
    padding: 4px;
}

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin: 5px;
    vertical-align: middle;
    cursor: pointer;
}

    .arrow:hover {
        border: solid deeppink;
        border-width: 0 3px 3px 0;
    }

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: 11px;  
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);  
}

.arrowDiv {
    float: right; 
    position: absolute;
    right: 10px;
}

.div-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* or other values */
    gap: 3px;
    border: 1px solid lightgrey;
}

    .div-table .div-cell {
        padding: 4px;
        border: 1px solid gray;
        border-radius: 7px;
        background-color: ghostwhite;
        font-weight: bold;
    }

.div-table input, .div-table label, .div-table img {
    width: auto;
    vertical-align: middle;
    margin: 5px;
}
    .div-table img {
        border: solid 1px black;
    }