@import url('fonts.css');
*{margin:0;padding:0;font-family: 'PT Sans Narrow Regular',Sans-Serif;}
body{padding:5px 5px;}

/*Utility Classes*/
.pull-left {float:left;}
.pull-right {float:right;}
.clear-float:after {content:"";display:block;clear:both;}
.button{cursor:pointer;background-color: #F2F2F2;text-align: center;min-width: 69px;min-height: 32px;color: #222;border: 1px solid #E2E2E2;display: inline-block;padding: 5px 10px;box-sizing: border-box;font-size: 15px;font-family: 'OpenSansRegular',Sans-Serif;font-weight: bold;}
.button-selected {background-color:#DE0000;color:#FFF;border-color:#D90000;}
.button-sales {margin-top:20px;}
select{border:1px solid #CCC;margin-right:15px;font-size:20px;padding:2px;}

#progress-bar-background{position:fixed;left:0; top:0; width:100%;height:100%;background:#666; filter:alpha(opacity='50');opacity:0.5;z-index:10000}
#progress-bar{width:120px;height:120px;position:absolute;z-index:10000}
#progress-bar img{width:120px;height:120px;}
#wrapper{width:100%;min-width:1000px;min-height:110px;overflow:hidden;margin:0 auto;position:relative;}

#wrapper #header{width:inherit;padding-bottom:5px;border-bottom:1px solid #CCC;overflow:hidden;}
#wrapper #header #contentArea{float:right;height:inherit;width:400px;}
#wrapper #header #contentArea .title{color:#444;display:block;width:inherit;font-family:'PT Sans Narrow Bold';float:right;font-size:27px;text-align:right;}
#wrapper #header #contentArea .links{overflow:hidden;list-style:none;float:right;height:30px;margin-top:5px;}
#wrapper #header #contentArea .links li{font-family: 'OpenSansBold',Sans-Serif;float:left;margin-left:5px;color:#BD2728;font-size:18px; line-height:22px;}
#wrapper #header #contentArea .links li a{font-family: 'OpenSansBold',Sans-Serif;display:block;text-decoration:none;color:#CF0000;}

#wrapper #container{width:inherit;overflow:hidden;position:relative;border-bottom:1px solid #CCC;}
#wrapper #container #graphsContainer{border-right:1px solid #BBB;margin-right:280px;color:#CCC;overflow:hidden;min-height:700px;}
#wrapper #container #graphsContainer #titleAndDateRange,
#wrapper #container #graphsContainer #intervalSelectionArea, 
#wrapper #container #graphsContainer #compareValuesArea{padding:10px 5px;font-family:'OpenSansRegular', Sans-Serif;width:100%;font-size:18px;overflow:hidden;}

#titleAndDateRange{border-bottom:1px solid #CCC;}

#compareValuesArea{display:none;padding:0 5px !important;margin-bottom:5px;}

#wrapper #container #graphsContainer #intervalSelectionArea {height:35px;border:0;}

#compareValuesArea .compare-date-panel{color:#444;padding:2px 10px;border:1px solid #E9D753;background:#FDF8D9;float:left; display:none;}
.apply-radius{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;behavior:url(PIE.htc);}

#compareValuesArea .compare-date-panel .icon{display:block;float:left;width:11px; height:11px; margin-right:10px;margin-top:6px;}
#compareValuesArea .compare-date-panel .label{float:left; margin-right:10px;}
#compareValuesArea .compare-date-panel .i1{background:#389BEB;}
#compareValuesArea .compare-date-panel .i2{background:#F68B3F; margin-left:10px;}

#titleAndDateRange .title{color:#444;font-family: 'OpenSansRegular',Sans-Serif;font-size:27px;display:block;float:left;line-height:42px;}
#titleAndDateRange .back-btn{cursor:pointer;display:none;float:left;width:35px;height:35px;margin-right:10px; margin-top:-2px;}
#titleAndDateRange #datePickerArea{border:1px solid #CCC;float:right;width: 336px;overflow:hidden;padding:2px;margin-right:15px;}
#titleAndDateRange #datePickerArea .icon{ font-family: 'OpenSansRegular',Sans-Serif;float:right; width:15px;height:100%;cursor:default; line-height:30px;font-size:8px;text-align:center;font-weight:bold;border:1px solid #666;background:#EEEEEE;}

#intervalSelectionArea .interval-panel{list-style:none;overflow:hidden;float:left;}
#intervalSelectionArea .interval-panel li{float:left;height:31px;cursor:pointer;}
#intervalSelectionArea .interval-panel li img{height:32px;width:69px;}
#intervalSelectionArea .interval-panel li[disabled='disabled']{cursor:default;}

/*.apply-gradient{behavior:url(ie-css3.htc);color:#FFF;background: -webkit-gradient(linear, left bottom, left top, from(#C41F25), to(#E01E26), color-stop(0.7, #E01E26));
background: -moz-linear-gradient(bottom, #C41F25, #E01E26 70%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E01E26, endColorstr=#C41F25);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E01E26, endColorstr=#C41F25)";
background-image: linear-gradient(to bottom, #E01E26 0%, #C41F25 100%);}*/
#intervalSelectionArea .dropDown{border:1px solid #CCC;float:right;width:230px;margin-right:15px;font-size:20px;padding:2px;}
#graphsContainer #graphArea{padding:0 5px 5px 5px;overflow:hidden;}

#graphArea .graph-area, #graphArea .bar-graph-area{float:left;width:100%;overflow:visible;clear:both;position:relative;margin-top:30px;}
#graphArea .bar-graph-area{display:none;}
#graphArea .graph-area:first-child{margin-top:0px;}
#graphArea .graph-area .title{position:relative;color:#444;display:block;height:50px;font-family: 'OpenSansRegular',Sans-Serif;font-size:24px;line-height:30px;width:50%;float:left;}
#graphArea .graph-area .title.inline {width:auto;margin-right:20px;}
#graphArea .graph-area .detail-btn{display:block; text-decoration:none;cursor:pointer;font-size:15px;float:right;margin-right:0.5%;}
#graphArea .graph-area .graph-panel{position:relative;margin:20px 5px 15px 0;height:200px;clear:both; width:98.5%;}
.graph-panel .note-icon{display:block;width:11px;height:9px;position:absolute;background:url(../images/note-icon-black.png) center no-repeat;bottom:24px;cursor:pointer;}
.graph-panel .note-icon.blue{background:url(../images/note-icon-blue.png) center no-repeat;}
.graph-panel .note-icon.orange{background:url(../images/note-icon-orange.png) center no-repeat;}

#graphArea .graph-area .note-container{width:99%;border:1px solid #CCC;margin:0x 5px 0px 22px; float:left;position:relative;overflow:visible;background-color:#F6F6F7;display:none;}
#graphArea .graph-area .arrow{width:99%;border-top:2px solid #CCC;height:12px;position:absolute;bottom:-12px;cursor:pointer;}
#graphArea .graph-area .arrow.down{background:url(../images/note-arrow-down.png) 50% 0 no-repeat;}
#graphArea .graph-area .arrow.up{background:url(../images/note-arrow-up.png) 50% 0  no-repeat;}
#graphArea .graph-area .note-container .note-area{position:relative;min-height:100px;border:1px solid #CCC; border-left:0; border-right:0;padding:10px 6px;overflow:hidden;}
#graphArea .graph-area .note-container .note-area .words-count{position:absolute;top:25%;right:8px;font-size:16px;color:#999;}
#graphArea .graph-area .note-area .data-time-panel{ overflow:hidden;}
#graphArea .graph-area .note-area .data-time-panel .date-picker, #graphArea .graph-area .note-area .data-time-panel .time-picker{width:160px;padding:3px 28px 2px 12px; border:1px solid #CCC;font-size:22px;color:#666;float:left;height:28px; background-image: url(../images/calendar.png);background-position: 170px 3px;background-repeat: no-repeat;background-color:#FFF}
#graphArea .graph-area .note-area .data-time-panel .time-picker{background-color:#FFF;background-image: url(../images/clock.png);background-position: 170px 3px; background-repeat: no-repeat; margin-left:10px;}
#graphArea .graph-area .note-container .note-area .textarea-container{position:relative;overflow:hidden;border:1px solid #CCC;clear:both;background-color:#FFF; margin-top:10px;}
#graphArea .graph-area .note-container .note-area .textarea-container .textarea-panel{overflow:hidden;margin:0px 90px -4px 0px;}

.note-area .textarea-container .textarea-panel textarea{overflow-y:hidden;resize:none;height:53px;border:0px;font-size:23px;color:#666;outline:none;width:100%;padding:5px;}
.note-area .textarea-container .save-btn{display:block;text-decoration:none;position:absolute;margin-right:0 !important; right:10px;top:16px;loat:right;}

#graphArea .graph-area .note-container .note-list{width:100%;}
#graphArea .graph-area .note-container .note-list .note-detail-panel{padding:10px 10px 15px 10px;border-bottom:1px solid #CCC;overflow:hidden;}

.note-list .note-detail-panel .header-panel{font-size:25px;width:100%; padding-left:10px;clear:both;}
.note-list .note-detail-panel .header-panel .name{float:left;color:#999;font-size:22px;}
.note-list .note-detail-panel .header-panel .date{float:left;color:#666;font-size:22px;padding-left:5px;}
.note-list .note-detail-panel .content-panel{width:100%;float:left;overflow:hidden;}
.note-list .note-detail-panel .content-panel .text-area{padding-left:10px;float:left;width:78%;font-size:22px;color:#666;}
.note-list .note-detail-panel .content-panel .link-panel{padding-left:10px;float:right;width:18%;font-size:21px;padding-top:5px;}
.note-list .note-detail-panel .content-panel .link-panel a{float:right;display:block;padding:0 10px;border-right:2px solid #666;color:#1E80C1;text-decoration:none;line-height:18px;}
.note-list .note-detail-panel .content-panel .link-panel a:first-child{border:0;}

#graphArea .graph-area .title.t1{width:57%;}
#graphArea .graph-area .title.t2{width:42%;}
#graphArea .graph-area .conversion-graph{position:relative;margin:5px 5px 0 0;height:200px;width:55%;float:left !important;margin-right:6px;}
#graphArea .graph-area .pie-graph{position:relative;margin:5px 5px 0 0;height:200px;width:42%;float:left !important; padding-left:10px;}
#graphArea .graph-area .pie-graph .donut-graph{width:32%;float:left;margin-left:3px;height:85%;}
#wrapper #container #statusContainer{width:275px;position:absolute;top:0;right:0;padding:10px 0 10px 5px;}
#wrapper #container #statusContainer .refresh-area{overflow:hidden;margin-bottom:5px;}

#statusContainer .refresh-area .content{float:left;width:200px;min-height:20px;padding-left:5px;}
#statusContainer .refresh-area .content .title{font-family: 'OpenSansRegular',Sans-Serif;font-size:25px;}
#statusContainer .refresh-area .content .time{font-family: 'OpenSansRegular',Sans-Serif;font-size:17px;color:#CC5453;}
#statusContainer .refresh-area .refresh-btn{float:right;width:60px;height:64px;background:url(../images/refresh-button.png) 0 0 no-repeat;}

#wrapper #container #statusContainer .critical-status-panel{overflow:hidden; border:1px solid #CCC; background-color:#F2F2F2;margin-top:5px;padding:10px 5px 15px 5px;}
#wrapper #container #statusContainer .critical-status-panel.inactive{background-color:#EA1D25;}
#wrapper #container #statusContainer .critical-status-panel .title, #wrapper #container #statusContainer .orders-status .title{font-family: 'OpenSansRegular',Sans-Serif;padding:0 10px 15px 5px; font-size:19px;}
#wrapper #container #statusContainer .critical-status-panel .value{font-family: 'OpenSansLight',Sans-Serif;display:block;padding:5px 10px; font-size:60px; line-height:40px;padding-left:45px;margin-bottom:5px; float:left;}

.critical-status-panel.inactive .title, .critical-status-panel.inactive .value,.critical-status-panel.inactive .prev-status-panel, .critical-status-panel.inactive .value sup{color:#FFF !important;}
.critical-status-panel.inactive .value.inactive{background:url(../images/nav-inactive-status.png) 8px 30px no-repeat;}
.critical-status-panel .value sup{font-size:30px;font-family: 'OpenSansLight',Sans-Serif;font-size:22px;margin-top:5px;line-height:0px;display:block;float:right;}
.critical-status-panel .value.active{background:url(../images/pos-status.png) 8px 32px no-repeat;}
.critical-status-panel .value.inactive{background:url(../images/nav-status.png) 8px 32px no-repeat;}
.critical-status-panel .prev-status-panel{clear:both;font-family: 'OpenSansRegular',Sans-Serif;font-size:17px;color:#999;display:block;padding-top:1px; padding-left:10px;}
.critical-status-panel .mobile-desktop-status, .critical-status-panel .mobile-desktop-conversion{width:98%; overflow:hidden;margin:15px 0 0 10px;}
.critical-status-panel .mobile-desktop-status .label-panel, .critical-status-panel .mobile-desktop-conversion .label-panel{width:100%; overflow:hidden; margin-bottom:5px;height:16px;}

.mobile-desktop-status .label-panel .i1, 
.mobile-desktop-status .label-panel .i2, 
.mobile-desktop-status .label-panel .i3{display:block; height:12px; width:10px; float:left; margin-right:5px;}

.mobile-desktop-conversion .label-panel .i1, 
.mobile-desktop-conversion .label-panel .i2, 
.mobile-desktop-conversion .label-panel .i3{display:block; height:12px; width:10px; float:left; margin-right:2px;}

.mobile-desktop-status .label-panel .i1 {background:#2B67B1;}
.mobile-desktop-status .label-panel .i2 {background:#F7981D;}
.mobile-desktop-status .label-panel .i3{background:#d70000;}
.mobile-desktop-status .label-panel .l1,.mobile-desktop-status .label-panel .l2, .mobile-desktop-status .label-panel .l3{font-family: 'OpenSansRegular',Sans-Serif;display:block; font-size:10px; color:#333; float:left;line-height:12px; margin-right:5px;}

.mobile-desktop-conversion .label-panel .i1 {background:#2B67B1;}
.mobile-desktop-conversion .label-panel .i2 {background:#F7981D;}
.mobile-desktop-conversion .label-panel .i3{background:#d70000;}
.mobile-desktop-conversion .label-panel .l1,.mobile-desktop-conversion .label-panel .l2, .mobile-desktop-conversion .label-panel .l3{font-family: 'OpenSansRegular',Sans-Serif;display:block; font-size:10px; color:#333; float:left;line-height:12px; margin-right:5px;}

.critical-status-panel .mobile-desktop-status .bars-panel{width:94%; overflow:hidden; margin-bottom:5px;height:14px;background:#E2E2E2;}
.critical-status-panel .mobile-desktop-status .bars-panel p{float:left; height:inherit;}
.critical-status-panel .mobile-desktop-status .bars-panel .p1{background:#2B67B1;}
.critical-status-panel .mobile-desktop-status .bars-panel .p2{background:#F7981D;}
.critical-status-panel .mobile-desktop-status .bars-panel .p3{background:#d70000;}

.critical-status-panel .mobile-desktop-conversion .bars-panel{width:94%; overflow:hidden; margin-bottom:5px;height:14px;background:#E2E2E2;}
.critical-status-panel .mobile-desktop-conversion .bars-panel p{float:left; height:inherit;}
.critical-status-panel .mobile-desktop-conversion .bars-panel .p1{background:#2B67B1;}
.critical-status-panel .mobile-desktop-conversion .bars-panel .p2{background:#F7981D;}
.critical-status-panel .mobile-desktop-conversion .bars-panel .p3{background:#d70000;}

#wrapper #container #statusContainer .orders-status{overflow:hidden;margin-top:5px;padding:10px 0 15px 0; min-height:200px;}

#statusContainer .orders-status .title{padding-bottom:8px !important; padding-left:10px !important;}
#statusContainer .orders-status .item-panel{width:100%;overflow:hidden;height:45px;border-top:1px solid #CCC;font-size:17px; line-height:45px;}
#statusContainer .orders-status .item-panel.header{width:273px;overflow:hidden;height:20px;background:#EBEBEB;border:1px solid #CCC;font-size:14px; line-height:20px;}
#statusContainer .orders-status .item-panel .panel{font-family: 'OpenSansRegular',Sans-Serif;width:45%; float:left; padding-left:10px;}
#statusContainer .orders-status .item-panel .panel.active{color:#1E80C1;}
#statusContainer .orders-status .item-panel .panel a{font-family: 'OpenSansRegular',Sans-Serif;text-decoration:none;color: #000;cursor:text;font-size:15px;}
#statusContainer .orders-status .item-panel .panel a:hover{text-decoration:none;color: #000;cursor:text;}
#statusContainer .orders-status .item-panel .panel.active a{text-decoration:none;color: #1E80C1;cursor:pointer;}
#statusContainer .orders-status .item-panel .panel.active a:hover{text-decoration:none;color: #1E80C1;cursor:pointer;}

#bar-graph .yAxis.y1Axis .tickLabel, #bar-graph .xAxis.x1Axis .tickLabel{font-size:18px;}
#bar-graph .yAxis.y1Axis .tickLabel{min-width:50px; padding-right:2px;}

#tooltip{font-size: 22px;position: absolute;min-width: 340px;border: 1px solid #CCC;background-color: #FFF;padding: 12px 7px;border-radius: 3px;box-sizing: border-box;}
#tooltip:after {content: "";border: 8px solid transparent;border-top-color: #CCC;position: absolute;bottom: -16px;left: 26px;display: block;}
#tooltip .top{width:295px; height:9px; background:url(../images/popup_top.png?v1) 0 0 no-repeat; margin-left:-1px; }
#tooltip .body-area{width:100%;}
#tooltip .bottom{width:305px;height:25px;background:url(../images/popup_bottom.png?v1) 0 0 no-repeat;margin-left:-1px;}
#tooltip .title{display: block;padding: 0 0 5px 10px;border-bottom: 1px solid #CCC;color: #000;font-size: 18px;font-family: 'PT Sans Narrow Bold', Sans-Serif;}
#tooltip .detail-panel{padding:5px 2px 5px 2px;font-size:14px; overflow:hidden; border-bottom:1px solid #CCC;}
#tooltip .detail-panel .icon{width:10px; height:10px; display:block; float:left;margin:6px 5px 0 0;}
#tooltip .detail-panel .name{display:block;float:left;color:#444;}
#tooltip .detail-panel .value{display:block;float:right;color:#444;}
#tooltip .detail-panel table{ font-family:'PT Sans Narrow Bold', Sans-Serif;width:100%; margin-left:-2px; border-bottom:1px solid #CCC; border-right:1px solid #CCC; margin-top:5px; }
#tooltip .detail-panel table td, #tooltip .detail-panel table th{ font-family:'PT Sans Narrow Bold', Sans-Serif !important;border:1px solid #CCC; border-right:0; border-bottom:0; padding:0; text-align:center;}
#tooltip .detail-panel table  tr th{font-weight:normal; background-color:#F6F6F6;}
#tooltip .difference-panel{padding:2px 10px 0 10px;width:265px; padding-bottom:12px; display:block;}
#tooltip .difference-panel .t1{float:left;display:block;color:#444;font-size:15px;}
#tooltip .difference-panel .value{float:right;display:block;margin-right:1px;font-size:15px; padding-left:15px;}
#tooltip .difference-panel .value.nav{background:url(../images/nav-status-small.png) 0 8px no-repeat;color:#EA1D25;}
#tooltip .difference-panel .value.pos{background:url(../images/pos-status-small.png) 0 8px no-repeat;color:#80B540;}
#tooltip .detail-panel .title{margin-top:5px;display:block;}
#tooltip .availability-area {overflow:hidden;width:100%;padding:0; margin-top:10px; clear:both; display:block;}
#tooltip .availability-area .detail-panel{border:0px solid #FFF;}
#availablityGraph .legend{display:none}

.donut-graph .tooltip{position:absolute; top:40%;left:0; font-size:1.1em; text-align:center; width:100%}
.compare-bar-graph-content{padding:0; display:none;width:98.5%; font-family:'OpenSansRegular',Sans-Serif;margin:0 1% 5px 5px;overflow:hidden;float:left;font-size:28px;border:1px solid #E9D753;background:#FDF8D9;}
.compare-bar-graph-content .c1{padding:10px 0; border-top:1px solid #E9D753;overflow:hidden;min-height:22px; margin-left:10px;}
.compare-bar-graph-content .c1:first-child{border:0;}
.compare-bar-graph-content .c1 .icon{display:block;float:left;width:11px;height:11px;margin-right:10px;margin-top:13px;}
.compare-bar-graph-content .c1 .label{float:left; margin-right:10px; font-size:18px;color:#333; width:300px;line-height:34px;}
.compare-bar-graph-content .c1 .i1{background:#389BEB;}
.compare-bar-graph-content .c1 .i2{background:#F68B3F;}
.compare-bar-graph-content .c1 .visitor-info-value{ float:left;height:inherit;line-height:20px;color:#333;padding-left:30px;line-height:31px;}
.compare-bar-graph-content .c1 .visitor-info-value.nav{background:url(../images/bar-nav-status.png) 0 10px no-repeat;}
.compare-bar-graph-content .c1 .visitor-info-value.pos{background:url(../images/bar-pos-status.png) 0 10px no-repeat;}
.compare-bar-graph-content .c1 .visitor-info-title{ float:left;height:inherit;line-height:34px;color:#333; font-size:17px; margin-left:8px;font-family: 'OpenSansRegular',Sans-Serif;}
.compare-bar-graph-content .c1 .visitor-info-notes {float: right;height: inherit;line-height: 25px;color: #E30000;font-size: 11px;margin-right: 10px;font-family: 'OpenSansRegular',Sans-Serif;}
.compare-bar-graph-content .c1 .value{font-size:20px; color:#AAA;float:left; line-height:25px;font-family: 'OpenSansRegular',Sans-Serif;margin-right:5px;line-height:31px;}
.compare-bar-graph-content .c1 .value.nav{color:#EA1D25;}
.compare-bar-graph-content .c1 .value.pos{color:#80B540;}

#graphArea #bar-graph{position:relative;clear:both; border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:800px; width:99.5%;margin-top:5px;overflow:hidden;overflow-y:scroll;display:none;}
#graphArea .scroller{-webkit-overflow-scrolling: touch;}
#graphArea #bar-graph .graph-panel{position:relative;clear:both;width:100%;}
#graphArea #bar-graph .graph-panel label{position:absolute;display:inline-block;font-size:17px;}
.yAxis.y1Axis .tickLabel{min-width:30px;padding:0;}
.yAxis.y1Axis .tickLabel:first-child{min-width:25px;}
.yAxis.y1Axis, .xAxis.x1Axis {font-size:14px}
 .graph-panel .xAxis.x1Axis .tickLabel{line-height:30px;}
/* LOGIN PAGE */
.loginFields{font-size:20px;}
.loginFields .txtBox{padding:6px;font-size:20px;width: 310px;} 
.loginFields .txtPinCode{padding:6px;font-size:20px;width:143px;}
.loginFields .lblPinCode{padding:6px;font-size:20px;background-color:#FFFFBF;letter-spacing: 5;}
.topHeadingLogin{height:50px;margin-top: 25px;padding-left: 30px;}
.topHeadingLogin h1{font-family: 'OpenSansLight',Sans-Serif;font-size: 36px;text-transform:none;color: #333;font-weight: normal;}
.topLogoLogin{text-align: center;margin: 40px 0px 0px 0px;height:118px;}
.divBottomLogin{border-top: solid 1px #C1C1C1;padding: 10px 5px 10px 5px;}
.divValidator{padding: 13px 10px 10px 50px;margin: 10px 0px 10px 0px;background: #FEFEFE url(../Images/icnAlert.png) no-repeat 10px 10px;border: solid 1px #CCC;vertical-align: top;text-align: left;}
.divValidator ul{margin-top: 6px;margin-left: 20px;}
.divValidator ul li{list-style-type: disc;color: #333;margin-bottom: 0px !important;text-transform: capitalize;}
.bs{box-shadow: 3px 3px 5px #aaaaaa;-webkit-box-shadow: 3px 3px 5px #aaaaaa;-moz-box-shadow: 3px 3px 5px #aaaaaa;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#aaaaaa');-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#aaaaaa')";}
a.crossmid {background: url("../Images/lcross.jpg") no-repeat scroll 0px 0px transparent;display: block;float: right;height: 20px;right: 5px;width: 20px; }

/* GENERIC STYLES */
 .txtValidator{background-color: #FFDDDD !important;border:solid 1px #DE514D !important;}
 .hasPlaceholder {color: #777 !important;}
 .validatorTxt{background-color:#FFDDDD;border: solid 1px #DE514D !important;}
 
 /* CALENDAR STYLE */
.divDateControls{font-family: 'OpenSansRegular';font-size:17px;}
.divDateControls input[type=text]{padding:4px;font-size:17px;width:150px;} 
.divDateControls select{padding:4px;font-size:17px;width:182px;#font-family:Arial;}        
#divMainDatepicker h1{font-family: 'OpenSansRegular',Sans-Serif;font-size: 27px;text-transform:none;color: #444;font-weight: normal;}
.firstRangeBoxFocused{border:solid 2px #3D9EFF;}
.secondRangeBoxFocused{border:solid 2px #FF8C3D;}
.txtboxInError{border: solid 2px #FF0000;}
.tdIcon{font-family: 'OpenSansRegular',Sans-Serif;width: 16px;cursor:default;color:#333;line-height: 30px;font-size: 8px;text-align: center;font-weight: bold;border: 1px solid #666;background: #EEEEEE;}

/* AVAILABILITY DIV */
#divAvailability{padding:0px 10px 10px 10px;}
#divAvailability .top{text-align:left;}   
#divAvailability .top img{margin-top:5px;}       
#divAvailability .top h1{font-family: 'OpenSansRegular',Sans-Serif;font-size: 27px;text-transform:none;color: #444;font-weight: normal;}
#divAvailability .top .ddlAvailability{padding:1.5px;font-size:17px;width:140px;#font-family:Arial;margin-top:2px;float:right;border:1px solid #CCC;}   
#divAvailability .top .DateRangeArea{float:right;overflow:hidden;font-size: 18px;margin-top:7px;}   
#divAvailability .top .DateRangeArea .textbox-datepicker{line-height:30px;background:url(../Images/icn_calSmall.png) 117px 3px no-repeat !important;width: 110px;padding: 1px 30px 1px 5px; height:27px;font-size: 17px;border: 1px solid #CCC;color: #333;float: left;}    
#divAvailability .storeList{text-align:left;font-size:18px;}
#divAvailability #tblStoreList{width:100%;}
#divAvailability #tblStoreList .trHeader th{border-top:solid 1px #D3D3D3;border-bottom:solid 1px #D3D3D3;background-color: #F3F3F3;color:#888;font-size: 16px;}        
#divAvailability #tblStoreList .trHeader th:first-child{border-left:solid 1px #D3D3D3;padding-left:10px;}
#divAvailability #tblStoreList .trHeader th:last-child{border-right:solid 1px #D3D3D3;}
#divAvailability #tblStoreList .trHeader th a{color:#888;text-decoration:none;font-size: 14px;font-weight: normal;}
#divAvailability #tblStoreList .trItems td{padding:10px 2px 10px 2px;}

#divAvailability #tblStoreList .trHeader th{text-align:left;}
#divAvailability #tblStoreList .trHeader .name{width:300px;}
#divAvailability #tblStoreList .trHeader .status{width:110px;}
#divAvailability #tblStoreList .trHeader .storestatus{width:100px;}
#divAvailability #tblStoreList .trHeader .delivery{width:70px;}
#divAvailability #tblStoreList .trHeader .pickup{width:70px;}
#divAvailability #tblStoreList .trHeader .date{width:180px;}
#divAvailability #tblStoreList .trHeader .reason{height:0px;}

#divAvailability #tblStoreList .trItems td{border-bottom:solid 1px #EAEAEA;}
#divAvailability #tblStoreList .trItems .name{width:300px;color:#000;}
#divAvailability #tblStoreList .trItems .status{width:110px;font-weight:bold;}
#divAvailability #tblStoreList .trItems .storestatus{width:100px;}
#divAvailability #tblStoreList .trItems .delivery{width:70px;}
#divAvailability #tblStoreList .trItems .pickup{width:70px;}
#divAvailability #tblStoreList .trItems .date{width:180px;}
/*Order Management DIV*/
#divOrderManagement{padding:0px 10px 10px 10px;}
#divOrderManagement .top{text-align:left;}   
#divOrderManagement .top img{margin-top:5px;}       
#divOrderManagement .top h1{font-family: 'OpenSansRegular',Sans-Serif;font-size: 27px;text-transform:none;color: #444;font-weight: normal;}
#divOrderManagement .top .ddlStoreStatus{padding:1.5px;font-size:17px;width:140px;#font-family:Arial;float:right;border:1px solid #CCC;}   
#divOrderManagement .top .DateRangeArea{float:right;overflow:hidden;font-size: 18px;margin-top:7px;}   
#divOrderManagement .top .DateRangeArea #txtDateOrderManagement {line-height:30px;background:url(../Images/calendar.png); background-position: 117px 2px; background-repeat:no-repeat; background-size: 24px 24px; width: 110px;padding: 1px 30px 1px 5px; height:27px;font-size: 17px;border: 1px solid #CCC;color: #333;float: right; cursor:default;}    
#divOrderManagement .storeList{text-align:left;font-size:18px;}
#divOrderManagement #tblStoreList{width:100%;}
#divOrderManagement #tblStoreList .trHeader th{border-top:solid 1px #D3D3D3;border-bottom:solid 1px #D3D3D3;background-color: #F3F3F3;color:#888;font-size: 16px;}        
#divOrderManagement #tblStoreList .trHeader th:first-child{border-left:solid 1px #D3D3D3;padding-left:10px;}
#divOrderManagement #tblStoreList .trHeader th:last-child{border-right:solid 1px #D3D3D3;}
#divOrderManagement #tblStoreList .trHeader th a{color:#888;text-decoration:none;font-size: 14px;font-weight: normal;}
#divOrderManagement #tblStoreList .trItems td{padding:10px 2px 10px 2px;}

#divOrderManagement #tblStoreList .trHeader th{text-align:left;}
#divOrderManagement #tblStoreList .trHeader .name{width:300px;}
#divOrderManagement #tblStoreList .trHeader .status{width:110px;}
#divOrderManagement #tblStoreList .trHeader .storestatus{width:75px; padding:0 15px; text-align:center;}
#divOrderManagement #tblStoreList .trHeader .shipment{width:125px; padding:0 15px; text-align:center;}
#divOrderManagement #tblStoreList .trHeader .delivery{width:125px; padding:0 15px; text-align:center;}
#divOrderManagement #tblStoreList .trHeader .pickup{width:125px; padding:0 15px; text-align:center;}
#divOrderManagement #tblStoreList .trHeader .date{width:180px;}
#divOrderManagement #tblStoreList .trHeader .reason{height:0px;}

#divOrderManagement #tblStoreList .trItems td{border-bottom:solid 1px #EAEAEA;}
#divOrderManagement #tblStoreList .trItems .name{width:300px;color:#000;}
#divOrderManagement #tblStoreList .trItems .status{width:110px;font-weight:bold;}
#divOrderManagement #tblStoreList .trItems .storestatus{width:100px;}
#divOrderManagement #tblStoreList .trItems .delivery{width:70px;}
#divOrderManagement #tblStoreList .trItems .pickup{width:70px;}
#divOrderManagement #tblStoreList .trItems .date{width:180px;}
/*#divOrderManagement #txtDateOrderManagement {background-image: url(../images/calendar.png); background-position: right; background-repeat:no-repeat; background-size: 18px 18px; cursor:default;}*/
#divOrderManagement .btnGo {border: 0px; cursor: pointer; border-radius: 5px; }
#divOrderManagement .atCapacity { background-color: #f4c8ce; }
#divOrderManagement .filterHeader { width: inherit; padding-bottom: 5px; border-bottom: 1px solid #CCC; overflow: hidden; }

/* Authentication DIV */
 #divAuthentication{position:absolute;top:200px;width:100%;left:0px; z-index: 11;}
    #divPin{position:relative; width: 400px;min-width: 400px;border: solid 4px #cc0000;margin-left: auto;margin-right: auto;z-index: 106;background-color: #FFFFFF; padding:20px}
    .btnSubmit{font-family: 'OpenSansRegular',sans-serif ;padding: 7px 23px 7px 23px;text-align: center;font-size: 18px;color: #ffffff;background: #cc0000;border: none;display: inline-block; cursor:pointer; text-decoration:none}
    #divPin .title{font-family:'OpenSansRegular',sans-serif; padding:0 10px 15px 5px; font-size:19px}
    #divPin .alert{background-color:#ebc8c4; border: solid 1px red; margin-bottom:15px; padding:5px 20px; color:red; position:relative;}
    .alert a{position:absolute; top:0px; right:4px; text-decoration:none; cursor:pointer; color:grey; font-size:20px}

/*Two Factor Authentication*/
.TwoFactorAuthentication{width:650px;box-shadow: 2px 2px 5px 1px lightgrey;-webkit-box-shadow: 2px 2px 5px 1px lightgrey;-moz-box-shadow: 2px 2px 5px 1px lightgrey;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#aaaaaa');-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#aaaaaa')";width: 380px;border-radius: 10px;margin: 0px auto;border: 2px solid #00c1f3;min-height: 200px;padding: 20px 30px;}
.TwoFactorAuthentication p{text-align: center;line-height: 25px;word-spacing: 1px;font-size: 17px;}
.TwoFactorAuthentication button{font-size: 16px;padding: 5px 17px;display: block;margin: auto;background: #00c2f3;border: 1px solid #25add0;color: #fff;border-radius: 3px;}
.TwoFactorAuthentication input{padding: 5px;display: block;margin: 10px;width: 125px;} 
.TwoFactorAuthentication h3{text-align: center;margin-bottom: 20px;} 
.TwoFactorAuthentication .qr-code{width: 150px;height: 150px;display: block;margin: auto;margin-top: 10px;}    	
.TwoFactorAuthentication .app-icons{margin: 20px;}
.TwoFactorAuthentication .app-icons .app{display: inline-block;width:48%;}
.TwoFactorAuthentication .app-icons .app img{display: block;margin: 0px auto;}
.TwoFactorAuthentication .app-icons .app span{width:90%;display:block;margin: 5px auto;font-weight: bold;font-size: 15px;}