@import url('bootstrap.min.css');
@import url('bootstrap-theme.min.css');
@import url('font-awesome.min.css');
@import url('jquery.mCustomScrollbar.css');
@font-face {
    font-family: 'RubrikRegular';
    src: url('../fonts/rubrik_regular-webfont.eot');
    src: url('../fonts/rubrik_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/rubrik_regular-webfont.woff') format('woff'), url('../fonts/rubrik_regular-webfont.ttf') format('truetype'), url('../fonts/rubrik_regular-webfont.svg#rubrikregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RubrikSemiBold';
    src: url('../fonts/rubrik_semibold-webfont.eot');
    src: url('../fonts/rubrik_semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/rubrik_semibold-webfont.woff') format('woff'), url('../fonts/rubrik_semibold-webfont.ttf') format('truetype'), url('../fonts/rubrik_semibold-webfont.svg#rubriksemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Comman
   ========================================================================== */
	body{ border-top:3px solid #f4f2f3; color:#565656;}
	*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	.navbar-toggle{ padding:3px 0px;}
	.navbar-header{ margin-left:10px;}
	.navbar-header.homeLogo img{ height:auto;}
/*.navbar-header img{ height:35px;}*/
	.modal-header{ padding:0 15px 15px;}
	.modal-body .row{ margin:0;}
	a {color: #48454c; }
	a .fa{color: #0188cc; }
    .modal-body a{color: #0188cc; }
     .modal-body img{max-width: 95%; }
	a:hover{ color:#0188cc;}
	a .fa:hover{color:#01699e; }
   a:focus{outline: none;}
	.fa{ font-size:17px; font-weight:normal!important;}
	.display-block{ display:block;}
	.action{ margin-top:20px;}
	.width100{ width:80%;}
	.modal-body{ max-height:560px; overflow:auto;}
	.customRow{ padding: 15px 10px;}
	.margin-bottom{margin-bottom: 20px!important;}
	.margin-bottom40{margin-bottom: 40px!important;}
	.margin-top30{ margin-top:30px;}
	.roundBderBox{ border:1px solid #ccc;  padding:20px 30px 20px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:relative;}
	.roundBderBox .legend{padding:5px; color:#0188cc; font-size:22px; font-weight:normal; background:#fff; position:absolute; top:-20px; z-index:100;left:10px;}
	.roundBderBox ul{ list-style:none; margin:0; padding:0;}
	.roundBderBox ul li{ display:inline-block; padding:0 15px; font-size:16px; font-weight:normal;}
	.roundBderBox .roundBderBox{ -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; margin:20px 0;}
	.btn-default:active, .btn-primary:active, .btn-success:active, .btn-info:active, .btn-warning:active, .btn-danger:active, 	.btn-default.active, .btn-primary.active, .btn-success.active, .btn-info.active, .btn-warning.active, .btn-danger.active{ box-shadow:0 0 0 #000;}
	.modal-content{ border-radius:0; padding:15px;}
	.modal li{ margin-bottom:5px;}
	.modal-footer{ padding:0 15px 0 0; border-top:0;}
	.heightLight{ color:#0188cc; border-bottom:1px solid #0188cc;}
	.btn-lg, .btn-group-lg > .btn{ font-size:16px;}
	.pdgTop0{ padding-top:0!important;}
	.pdgTopBtm0{ padding-top:0!important; padding-bottom:0!important;}
	.pdgLeftRight0{ padding-left:0!important; padding-right:0!important;}
	.form-control.error{ border:1px solid #a94442;}
	.errorMsg{ padding:5px 10px; text-align:left; position:absolute; width:100%; left:0px; top:30px; z-index:101;
	background: #c60000!important; border-color:#c60000!important; color:#fff;}
    .form-control{ line-height:normal; 
                   }
.maxW100 { max-width:100%;
}
.margin-top10{ margin-top:10px;}
.modal-open .modal {
    padding-right: 0!important;
}
	.errorPtr{ position:absolute; top:-9px; right:20px;}
	.posRel{ position:relative;}
	.alert{ padding:5px 10px;}
	.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{ vertical-align:middle;}
	.border-right{ border-right:1px solid #e6e6e6;}
    .border-left{ border-left:1px solid #e6e6e6;}
	.margin-bottom0{ margin-bottom:0!important;}
	.padding10{ padding:10px 0;}
	.modalSet{ background:#f3f3f3; padding:10px; margin-bottom:10px;}
	.modalSet p{ font-weight:bold; color:#0188cc;}
    .UpdateProgressShield { background:#fff;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
    opacity: 0.5;
   position:fixed; width:100%; height:100%; top:0; left:0;
   z-index:10000;
}
select.form-control { line-height:27px;}
.hqid{ text-align:center!important;}
.hqid img { max-width:-moz-fit-content;max-width: 95%;max-width: -moz-fit-content;}
.UpdateProgressDiv { position:absolute; left:50%; top:50%; z-index:10000;
}
.afterLogOut { margin-top:150px;
}
.afterLogOut img{width:100%;
    }

.footerLinks {
    list-style-type: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: #333333;
    margin: 15px 0;
    width: 100%;
}

    .footerLinks li a {
        font-size: 12px;
        margin: 0 10px;
        border-bottom: none;
        white-space: nowrap;
        color: #1A191A;
        font-family: 'RubrikSemiBold';
    }

    .footerLinks li {
        display: inline-block;
    }

.disclaimer {
    margin: 15px 0;
    color: #A8A8A8;
    font-family: 'RubrikRegular';
    font-size: 12px;
    text-align: center;
}

    .disclaimer p {
        margin-bottom: 0;
    }
.footerGray {
    background: #EFEFEF;
    text-align: center;
    padding: 10px 20px 10px 20px;
    margin-top: 21vh;
}
.afterLogOut .content { margin-top:48px;
}
.displayNone{ display:none; }
.checkboxSet{ position:absolute; 
              -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity:0.0;
	-khtml-opacity: 0.0;
	opacity: 0.0;
}

.border0 { border:0!important;
}

.errorMsgContainer{ padding:10px; text-align:left;  width:100%; background: #c60000!important; border-color:#c60000!important; color:#fff;}
.loginBox .errorMsgContainer { margin-right:15px; 
                               width: 97%;
    width: -webkit-calc(100% - 15px);
    width: -moz-calc(100% - 15px); width:calc(100% - 15px); 
}
/* ==========================================================================
   NeedHelp
   ========================================================================== */
	.needHelp .row{ margin:0 -15px;}
	.enterMpn.row{ margin:0 -10px;}
.needHelp .panel-title > a.collapsed, .needHelp .panel-title > a { background:none;
}
.needHelp .panel-title > a{ padding:0;}
	.enterMpn.row .col-sm-8, .enterMpn.row .col-sm-4{ padding:0 10px;}
	.needHelp .panel-group{ margin-bottom:0;}
	.needHelp img{ max-width:100%;}
	.needHelp .panel-default > .panel-heading{ background:none; padding:5px 0 15px; }
	.needHelp .panel-default > .panel-heading a{font-size:12px; color:#0188cc; text-decoration:none;}
	.needHelp .panel-group .panel{ border:0; border-radius:0;}
	.needHelp .panel-default > .panel-heading + .panel-collapse > .panel-body{ border:0; background:#eee;}
/* ==========================================================================
   buttons
   ========================================================================== */
	label.btn{min-width:0;}
	.btn{ min-width: 100px; text-align: center; margin-right:10px;}
	.btn:first-child{ margin-left:0;}
	.btn:last-child{ margin-right:0;}
	.pull-right.btn, .pull-right .btn { margin-right:0; margin-left:10px;}
	.btn-default{ background:#7f7f7f; color:#fff; font-weight:normal; border-color:#7f7f7f; text-shadow: 0 0 0;}
	.btn-default:hover{ background:#5f5f5f; color:#fff; border-color:#5f5f5f;}
	.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default
	{ background:#5f5f5f; color:#fff; border-color:#5f5f5f; outline:none;}
	.btn-default:disabled, .btn-default[disabled]{background:#7f7f7f;}
	.btn-primary{ background:#0188cc; color:#fff; font-weight:normal; border-color:#0188cc;}
	.btn-primary:hover{ background:#01669a; color:#fff; border-color:#01669a;}
	.btn-primary:disabled, .btn-primary[disabled]{background:#0188cc;}
	.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary
	{ background:#01669a; color:#fff; border-color:#01669a; outline:none;}

/* ==========================================================================
 Help Accordian
   ========================================================================== */
.panel-group .panel{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border:0;}
.panel-default > .panel-heading{ background:#e6e6e6; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; padding:0;}
.panel-title > a{ display:block; padding:15px; background:url(../images/topArrow.png) no-repeat 98% 50%; color:#333;  text-decoration:none;}
.panel-title > a:hover{ color:#333; text-decoration:none;}
.panel-title > a.collapsed{ background:url(../images/btmArrow.png) no-repeat 98% 50%; color:#888;}
.panel-body a{color:#0188cc;}
.panel-group .panel + .panel{ margin-top:1px;}
.helptxt{ margin-top:5px;}

/* ==========================================================================
	CustomIcon
   ========================================================================== */

.customIcon{ background:url(../images/bigicon_sprite.png) no-repeat; margin:0 auto; display:block; width:80px; height:80px;}	
.customIcon.icon-quality{background-position:0 0;}
.customIcon.icon-sim{ background-position:-124px 0; }
.customIcon.icon-dataWiped{background-position:-251px 0px;}
.customIcon.icon-lock{background-position:-367px 0px;}
.customIcon.icon-power{background-position:-475px 0px;}
.customIcon.icon-sdcard{background-position:-593px 0px;}
.customIcon.icon-disk{background-position:-741px 0px;}
.customIcon.icon-fmmLok{background-position:-886px 0px; width:136px;}

/* ==========================================================================
   Header
   ========================================================================== */
.imgWid {
    width: 130px;
}
	header .navbar{ background:#f4f2f3; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;} 
	header .navbar-brand{ height:auto; padding:11px 15px 15px}
	header .nav{ padding-top:2px; margin-right:1px;}
	.storeID{ display:block; padding:15px;}
	header .navbar-nav>li>a, header .navbar-nav > li.active > a{padding-bottom:24px;}
	header .navbar-nav>li>a:hover{  border-bottom:3px solid #0188cc; background:none; padding-bottom:21px;}
	.navbar-toggle{ margin-top:20px;}
	.icon-bar{ background:#0188cc;}
	.nav > li > a:hover, .nav > li > a:focus{ background:none; outline:none;}
    header .navbar-nav > li .badge {
        background: #0188cc;
        margin-right: 4px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
        float:left; margin-right:6px;
    }

    header .navbar-nav > li span.clearfix{ display:block;}

/* ==========================================================================
   Login Screen
   ========================================================================== */
	.loginBox{ border:3px solid #f2f2f2; margin:50px 0px; padding:35px 0;}
	.loginBox ul{ list-style:none; padding:0; margin:0;}
	.loginBox ul li{ padding-bottom:15px;}
	.loginBox .instructions, .loginBox .loginForm{ padding:25px 80px;}
	.loginBox .loginForm{ width:90%;}
	.loginBox .border-left{ border-left:1px solid #e6e6e6;}
	
	.loginBox a{ color:#afafaf;}
	.loginBox .btn{ min-width:152px;}
	#ageingDtl .modal-body{ font-size:16px;}

/* ==========================================================================
   Home Screen
   ========================================================================== */
   .homeScreen{ padding-top:18px;}
   .homeScreen h3{ padding-bottom:30px;}
   .homeScreen ul{ list-style:none; margin:30px 0 15px; padding:0;}
   .homeScreen ul li{ padding-bottom:10px;}
   .homeScreen .btn{ min-width:185px;}
	.borderBox{ border:1px solid #ccc;  padding:35px; margin:30px 0 0;}
	
	.mainMenu{ background:url(../images/apple-icon-gray.png) no-repeat 50% 0; padding-top:60px; margin-top:70px;}
	.mainMenu h3{ color:#616161; margin:0 0 20px;}
	.mainMenu p{ margin-bottom:0;}
	.mainMenu p img{ vertical-align:middle;}
	.mainMenu .btn{ padding:15px; width:240px; font-size: 14px; font-weight: normal; text-shadow: 0 0 0 #000; margin:0 5px 15px;}
    	/* ==========================================================================
   nonIOS Help
   ========================================================================== */
.nonIOSHelp{ margin:0;}
.nonIOSHelp img{ max-width:90%;}
.nonIOSHelp .col-xs-1, .nonIOSHelp .col-sm-1, .nonIOSHelp .col-md-1, .nonIOSHelp .col-lg-1, .nonIOSHelp .col-xs-2, .nonIOSHelp .col-sm-2, .nonIOSHelp .col-md-2, .nonIOSHelp .col-lg-2, .nonIOSHelp .col-xs-3, .nonIOSHelp .col-sm-3, .nonIOSHelp .col-md-3, .nonIOSHelp .col-lg-3, .nonIOSHelp .col-xs-4, .nonIOSHelp .col-sm-4, .nonIOSHelp .col-md-4, .nonIOSHelp .col-lg-4, .nonIOSHelp .col-xs-5, .nonIOSHelp .col-sm-5, .nonIOSHelp .col-md-5, .nonIOSHelp .col-lg-5, .nonIOSHelp .col-xs-6, .nonIOSHelp .col-sm-6, .nonIOSHelp .col-md-6, .nonIOSHelp .col-lg-6, .nonIOSHelp .col-xs-7, .nonIOSHelp .col-sm-7, .nonIOSHelp .col-md-7, .nonIOSHelp .col-lg-7, .nonIOSHelp .col-xs-8, .nonIOSHelp .col-sm-8, .nonIOSHelp .col-md-8, .nonIOSHelp .col-lg-8, .nonIOSHelp .col-xs-9, .nonIOSHelp .col-sm-9, .nonIOSHelp .col-md-9, .nonIOSHelp .col-lg-9, .nonIOSHelp .col-xs-10, .nonIOSHelp .col-sm-10, .nonIOSHelp .col-md-10, .nonIOSHelp .col-lg-10, .nonIOSHelp .col-xs-11, .nonIOSHelp .col-sm-11, .nonIOSHelp .col-md-11, .nonIOSHelp .col-lg-11, .nonIOSHelp .col-xs-12, .nonIOSHelp .col-sm-12, .nonIOSHelp .col-md-12, .nonIOSHelp .col-lg-12{ padding:0;}
.nonIOSHelp .sectionBox img { max-width:90%;}
.nonIOSHelp label{ padding-left:10px;}
.nonIOSHelp h5{ padding-right:10px;}
/* ==========================================================================
   Search Screen
   ========================================================================== */
	.deviceModal{border: 5px solid #c9c7c8; padding: 20px 0; margin-top:35px;}
	.deviceModal .capacity{ border-top:1px solid #ddd; width:70%; margin:0 auto; padding-top:5px;}
	.deviceModal:hover{border: 5px solid #9b9b9b;}
	.deviceModal.active{border: 5px solid #0088cc;}
    .deviceModal label{display:block;}
	.confirmInfo{ padding:30px;}
	.confirmInfo h3{ margin-top:0;}
	.confirmInfo ul{ margin-bottom:0;}
	.roundBderBox.pcProduct{ padding:30px;}
	.roundBderBox.pcProduct.hiddenCnt{ padding:0 30px; border:1px solid #fff;}
	.roundBderBox .prodList .btn{ width:100%; margin-right:15px;}
	.roundBderBox .prodList .btn:last-child{ margin-right:0;}
	.roundBderBox .prodList{ display:none;}
	.roundBderBox .roundBderBox .legend{ background:none; padding:3px 0;}
	.roundBderBox .legend a.btn{ position:relative; border-radius:5px 0 0 5px;}
	.roundBderBox .legend a.btn:after, .roundBderBox .legend a.btn:before {left: 101%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
	.roundBderBox .legend a.btn:after { border-left-color: #0088cc; border-width: 15px; margin-top: -15px;}
	.roundBderBox .legend a.btn:hover:after, .roundBderBox .legend a.btn:focus:after, .roundBderBox .legend a.btn:active:after{ border-left-color: #01669a;}
	
	.pcProdInfo{ margin-top:12px;}
	.pcProdInfo .fa{ color:#0188cc; font-size:18px; vertical-align:middle;}

      .row.eligibleData{ margin:0;}
	.eligiBalProd{ background:#ececec; line-height:27px;text-align:left; margin:10px 0;}
	.eligibleHdg{ background:url(../images/headingBar.png) no-repeat 100% 0; display:inline-block; padding:0 15px 0 10px; color:#fff;}
	.eligiBalProd .col-sm-3{ padding-left:0;}
	.eligiBalProd ul li{ font-size:14px;}


/* ==========================================================================
   Inspection Screen
   ========================================================================== */
.backunblock {
    position: relative; z-index: 150;
}
   .border{ border:1px solid #c6c6c6;}
   .border-bottom{ border-bottom:1px solid #c6c6c6;}
   .sectionBox h4{ padding: 15px 20px; /*background: #818181; color: #fff;*/ margin-top: 0; margin-bottom:0; position:relative; border-bottom: 1px solid #c6c6c6;}
   .inspection h4{background: #818181; color: #fff;}
   .sectionBox h4 .requiredMsg{ color:#d03719; position:absolute; bottom:-20px; right:10px; font-size:12px;}
   .sectionBox h4 a{ color:#fff;}
   .sectionBox h4 a:hover, .sectionBox h4 a:active, .sectionBox h4 a:focus{ color:#ddd; text-decoration:none;}
      .deviceVisual{ padding: 1px 1px 20px; margin-bottom: 20px;}
   .deviceVisual h4{ background: #e7e6e6; margin: 0 0 30px; padding: 13px 30px 13px 13px; position:relative; border-bottom:0;}
   .deviceVisual h4 img{ position:absolute;right: -33px;    top: -31px;}
   
   .customRow h5{ margin: 0; font-size: 20px;}
   .combineBox .radio, .customRow .checkbox{ margin-bottom: 0; margin-top: 0;}
   .carrierLock{ margin: 5px 0 0;}
   .sectionBox .customRow{ border: 1px solid #c6c6c6; margin: 4px 0;}
   .radioView{ background:url(../images/radiobg.png) no-repeat; display:block; width:25px; height:25px; position:absolute; left:-12px; top:-2px;}
   
   .customRow .btn-group .btn{ padding:0; line-height:auto; font-weight:bold;}
   .customRow .btn-group .btn input[type="radio"]{ display:none;}
   .customRow .btn-group .btn.active, .customRow .btn-group .btn:active{ background:none; box-shadow:0 0 0; border-radius:0;}
   .customRow .btn-group .btn.active .radioView{ background-position:0 -45px;}
	.combineBox .customRow{ border:0; border-bottom:1px solid #c6c6c6; margin:0;}
	.combineBox .customRow:last-child{ border-bottom:0;}
	.sectionBox .customRow .btn-group{ margin-top:10px;}
	.combineBox .customRow .btn-group{ margin-top:0px;}
   
   .spec{ padding-top:10px;}
   
   .spec h6{ background:#e7e5e6; color:#817f80; font-size:14px; padding:10px 25px; margin-bottom:1px;}
   .spec .specMsg{ padding:8px 25px; color:#fff; background:#ed1b24; font-size:12px; position:relative;}
	.specMsg .caret{ position:absolute; right:15px; bottom:-7px; color:#ed1b24; border-top: 7px solid; border-right: 7px solid transparent;
  border-left: 7px solid transparent;}
  .spec ul{ list-style:none; padding:0; margin:0; padding:10px 15px 5px; line-height:none; font-size:13px; float:left; width:100%;}

  .spec li{ float:left; vertical-align:top; font-weight:bold; padding:0!important; margin:0 10px 0 0!important;}
    .spec li label{ padding:0;}
    .spec li:first-child { margin-right:0!important;
    }

.spec ul.deviceColor{ padding-top:15px;}

.spec ul label { width:auto; height:auto; padding:0!important; margin:0!important;
}
  .spec ul.deviceColor li{  -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; overflow:hidden; border:1px solid #ccc; padding:1px;  margin-bottom: 3px;}
  .spec li:last-child{ padding-right:0!important; }

.spec.gsx ul.deviceColor li { border:1px solid #fff;
}

  .spec ul.deviceColor li a{display:block;width:16px; height:16px;  -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
.spec ul.deviceColor li.active{ border:1px solid #0188cc; }
.spec ul.deviceColor li:first-child { float:left; padding-bottom:5px;
}
   .spec ul.deviceColor li:first-child:hover{ border-color:#fff;}
  .spec li:first-child{ text-align:right; padding-right:10px!important; width:100px;  border:0!important;}
  .spec ul.capacity li{ padding:0 5px;}
  .spec ul.capacity li a{ text-align:center; display:block;}
   .spec ul.capacity li a label{display:block; /*padding:0 3px !important;*/}
  .spec ul.capacity li a:hover, .spec ul.capacity li a:focus, .spec ul.capacity li a:active, .spec ul.capacity li a.active{ text-decoration:none; border-bottom:2px solid #48454c; color:#48454c;}
  
   .white{ background:#ebebeb;}
  .gray{background:#6f6f6f;}
  .grey{background:#6f6f6f;}
  .golden{background:#e6c49e;}
  .gold{background:#e6c49e;}
  .silver{background:#C0C0C0;}
  .black {background:#000}
  
  .spec.gsx li{ font-weight:normal;}
  .spec.gsx ul.deviceColor li{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}
  .spec.gsx ul.deviceColor li:hover{ border:1px solid #fff; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}
  
  .macbook{ padding:10px 25px;}
	.macbook ul li:first-child{ width:100%; text-align:left;}
	.macbook ul{ padding-left:0;}
	.macbook ul li{ width:100%; margin-left:0; padding-left:0;}
  

    #PopUp_Carrier .modal-body p { font-weight:normal; color:#565656;}

   /* ==========================================================================
   Valuation Screen
   ========================================================================== */
   .valuationPrice{ padding: 20px; border: 5px solid #0088cc; font-size: 50px; font-weight: bold; text-align:center;  width:90%; margin:0 auto; position:relative;}
   .deviceSummary{ line-height: 25px; color:#878882;}
   .deviceSummary strong{ display: inline-block; width: 210px;}
   .sectionBox h5{ margin-bottom:15px;}
   .zeroValue{ border-color:#00b91a; }
	.zeroValue img{ position:absolute; top: -26px; right: -31px;}
	.valuation .customRow{ padding:25px;}
	.valuation .customRow.action{ padding:15px 25px;}
 /* ==========================================================================
   Customer Info
   ========================================================================== */
   .customerInfo{ padding:30px 60px;}
   .customerInfo .action{ padding:0 15px; margin:10px 0 0;}
   .customerInfo .row{ margin:0;}
   .customerInfo label{ font-weight:normal;}
   .customerInfo h5{ font-size:18px; color:#0188cc;}
   .customerInfo .form-control{ margin-bottom:15px;}
.sepration{ border-top:1px solid #ddd; padding-top:10px;}
.required{ color:#d03719;}

/* ==========================================================================
   Confirmation
   ========================================================================== */   
	.confScreen.row{ margin:0; padding:30px 20px 15px;}
	.confScreen h3{ font-size:20px; margin-top:0; color:#3099d3;}
	.confScreen h5{ font-size:18px; font-weight:bold; margin-top:0;}
	.priceDtl img{padding:15px; border:2px solid #3099d3; height:200px;}
    .priceDtl span{padding:10px 25px; border:2px solid #3099d3; font-size:22px; color:#3099d3; font-weight:bold; display:inline-block;}

.confScreen.threeClm{ text-align:center; font-size:12px;}
.confScreen.threeClm h6{ font-size:15px; font-weight:bold; padding:10px 0; border-bottom:1px solid #e5e5e5; }

.tradinPrint h5{ margin:50px 0 35px;}
.tradinPrint .action{ margin-top:30px;}
.tradinPrint .btn{ margin-right:15px;}
.modal .instructionImg img{ width:95%;}

.checkbox input{ display:none;}
.checkboxView{background:url(../images/checkbox.png) no-repeat; display:inline-block; width:26px; height:26px;}
.checkbox .btn.active, .checkbox .btn:active{ box-shadow:0 0 0 #fff;}
.checkbox .btn.active .checkboxView{ background-position:0 -34px; }
.boxCnt{ min-height:120px;}
/* ==========================================================================
   PrintPage
   ========================================================================== */

.PagBreakBfr {
    page-break-before: always;
}
.printPortion.grid tr { background:none;
}
.printPortion.grid td, .printPortion.grid th {
    background: none;
    color: #333;
    text-align: left;
    border: 1px solid #ccc;
}
.printPage h2{ font-size:18px; border-bottom:1px solid #ccc; padding:0 0 10px; margin:50px 0 10px;}
.printPage h3 { margin:0 0 5px; font-size:16px; font-weight:bold;
}
.tandc { margin-top:20px; 
}
.customGrid table { width:100%;
}
.customGrid table tr { background:none;
}
    .customGrid table td { font-size:14px;
    }
.customGrid table td, .customGrid table th{ border:1px solid #ccc; padding:10px; line-height:25px;
}

    .customGrid table td strong { min-width:190px; display:inline-block;
    }

    .deviceSummeryDtl div{ width:49%; display:inline-block;  padding:10px; vertical-align:top;}
        .deviceSummeryDtl div:first-child { border-right:1px solid #c6c6c6;
        }
.deviceSummeryDtl div span span{ display:block;
}

/*.deviceSummeryDtl span span{ width:50%; display:inline-block; border-right:1px solid #ccc; padding:5px 10px 0;
}
.deviceSummeryDtl span span:last-child{padding-bottom:10px;}*/
.padding0 { padding:0!important;
}

@media print {
    .printPage .action {display:none;
    }
    .tandc { font-size:12px;
    }
}
/* ==========================================================================
   BOH
   ========================================================================== */
.boh .nav > li > a{ padding:15px 10px 24px;}
.boh .storeID { padding:15px 10px;}
.boxForm ul{ list-style:none; padding:0; margin:0;}
.boxForm ul li{ margin:0 15px 15px 0; display:inline-block;width:18%; width:calc(20% - 17px);}
.boxForm ul li:nth-child(5n+5){ margin-right:0;}
.boh .alert.alert-info{ border-radius:0; border:3px solid #fb8926; background:none; color:#fb8926; padding:20px 30px; font-size:18px;}

.printConfirm .btn{ min-width:150px;}
.printConfirm h3{ margin-bottom:25px; }
.printConfirm .badge{ background:#0188cc; color:#fff; width:30px; height:30px; text-align:center; padding:0; line-height:30px;
-webkit-border-radius:50%;-moz-border-radius:50%; border-radius:50%; font-size:18px;}
.printConfirm .col-sm-4{ padding:30px 0;}
.disable{
	
    position:relative;
	}
.disableblock{
    background:#fff;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:11;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;	
}

	
.boh .tab-content{ border:5px solid #404040;}
.boh .nav-tabs > li > a{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border:0;  font-weight:bold; background:#e1e1e1; color:#818181; padding-top:24px}
.boh .nav-tabs > li.active > a, .boh .nav-tabs > li.active > a:hover, .boh .nav-tabs > li.active > a:focus{ background:#404040; border:0; color:#fff;}

.prevClose.row{ margin:0; padding:25px;}
.prevClose .grid, .prevClose .grid tr{ background:#fff;}
.prevClose .grid th{ background:#fff; color:#404040;}
.prevClose .grid td, .prevClose .grid th{ border:1px solid #e6e6e6;}
.prevClose .customPagination:hover{ background:none;}
.prevClose .customPagination table td{border:0; padding:0; }
.prevClose .customPagination table td a, .prevClose .customPagination table td span{position: relative;

padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;}
    .prevClose .customPagination table td span { background:#0188cc; color:#fff;
    }
    .prevClose .customPagination table td a:hover { background:#eee;
    }


    .caret-right {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #0188cc;
right: -4px;
position: absolute;
top: 4px;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.grid table{border-collapse:collapse; margin-bottom:0px}
.grid th{ background:#404040; border:1px solid #fff; color:#fff; text-align:left;  padding:15px 10px!important;}
.grid td{ border:1px solid #fff; padding:10px!important; color:#8e8e8e; font-size:14px;}
.deviceAwait .grid td:last-child, .deviceAwait .grid th:last-child{ text-align:center;}
.grid td a{ font-weight:bold; color:#000;}
.grid .btn.primary{ color:#fff; width:auto; padding:0 10px!important; font-size:14px;}
.grid .btn.primary i{ font-size:20px;}
.grid .icon-cancel-circled{ font-size:20px; vertical-align:middle;}
.grid td a:hover{ color:#d04526;}
.grid tr{ background:#f4f4f4;}
/*.grid tr td:nth-child(4), .grid tr td:nth-child(5), .grid tr td:nth-child(6), .grid tr td:nth-child(8){ text-align:center;}*/
.grid tr.agingOverdated{ background:#fff1f1;}
.grid tr.agingOverdated:hover{ background:#ffdfdf;}
.grid tr.agingOverdated td{ color:#dd4743!important;}
.grid tr.agingComplete{ background:#fff2e2;}
.grid tr.agingComplete:hover{ background:#fee3ca;}
.grid tr.agingComplete td{ color:#fe8109!important;}
.grid tr:hover{ background:#eee;}

.printPortion table .hqid{padding:0 0 3px 0!important;}

/*.customScroller, .table-responsive{ max-height:300px; max-width:100%; overflow-y:auto;}*/

/* ==========================================================================
   laptop
   ========================================================================== */

.valuationInfo{ padding:15px 0; width:90%; margin: 0 auto;}
.valuationInfo a:hover{ text-decoration:none;}

/* ==========================================================================
   Mac
   ========================================================================== */
.deviceModal img, .deviceVisual img{ max-width:90%;}
.deviceModal p{ padding:0 10px;}
.deviceModal p:last-child{ margin-bottom:0; padding-top:5px;}

/* ==========================================================================
   FallBack for Mac
   ========================================================================== */
   #MACProceedBox ul{ list-style:none;}
   #MACProceedBox ul li{ position:relative;margin-bottom:12px;}
   #MACProceedBox ul li span{ position: absolute; width:25px; height:25px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:#0188cc; line-height:25px; text-align:center; color:#fff; left:-30px; top:5px;}
   #MACProceedBox ul li label{margin-top:7px;color:#444343;font-weight:500;} 
   #MACProceedBox p {margin-bottom:15px;border-bottom:1px solid #CACACA;padding-bottom:3px;}
   

/* ==========================================================================
   Help screens 
   ========================================================================== */
    
    .model_identifier ul, .model_identifier p{font-size:16px;color:#7b7b7b;}
	.model_identifier p a{color:#0189cd;}
	.model_identifier p{margin-top:5px;}
	.model_identifier ul li{margin-left:25px;}
	.model_identifier ul li img{width:auto}
	.model_identifier h3{font-size:24px;padding-bottom:5px;}
	.model_identifier h4{color:#2a2a2a;padding-bottom:5px;}
	.model_identifier img{width:100%;height:auto;}
	.model_identifier img.margin-top30{width:auto;}
	.eligiBalProd .col-sm-4{ padding-left:0;}

/* ==========================================================================
   PrintPage
   ========================================================================== */

.PagBreakBfr {
    page-break-before: always;
}
.printPortion.grid tr { background:none;
}
.printPortion.grid td, .printPortion.grid th {
    background: none;
    color: #333;
    text-align: left;
    border: 1px solid #ccc;
}
.printPage h2{ font-size:18px; border-bottom:1px solid #ccc; padding:0 0 10px; margin:0 0 10px;}
.printPage h3 { margin:0; font-size:16px; font-weight:bold;
}
.tandc { margin-top:20px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
	.footerBar{ border-top:1px solid #ccc; font-size:13px; margin-top:50px; padding-top:1px;}
        .footerBar .footerBG {
            padding: 20px 0;
            background: #EFEFEF;
        }

        .footerBar p:first-child {
            margin-bottom: 15px
        }

        .footerBar p {
            margin: 0;
            color: #A8A8A8;
            font-size: 12px !important;
            font-family: 'RubrikRegular';
        }
	.footerBar p a{ margin:0 10px; border-bottom:1px solid #cdcfce; white-space:nowrap;}
	.footerBar p a:hover{border-bottom:1px solid #0188cc; text-decoration:none;}


    /* ==========================================================================
	 Redesign Header FOH TFSID-9651
	 ========================================================================== */
	.storeID{color:#000;display:block; padding:20px 15px 15px 15px;}
	.logo_section .col-xs-6{padding-left: 0px;}
	header .navbar-brand{ height:auto; padding:18px 0px 18px;}
	header .navbar-nav > li > a:hover{padding-bottom: 11px;}
	header .navbar-nav > li > a{padding-bottom:0px;padding-top: 12px;color:#000; }
	header .navbar{border-top:1px solid #c5c5c5;border-bottom:1px solid #c5c5c5;margin-bottom: 0px;}
    header .login .navbar-brand{padding:11px 15px 15px;}
    header .login.navbar{border-bottom:0px;border-top:0px;}    
    /* ==========================================================================
	 Redesign Header BOH TFSID-9651
	 ========================================================================== */
	 .logo_section .col-xs-6 {padding-left: 0;}
	 header .navbar-brand{ height:auto; padding:18px 0;}
	 .boh .storeID { color: #000;display: block;padding: 50px 15px 15px;}
	 .boh .nav > li > a{padding:13px 15px;}
	 .boh .navbar{min-height:auto;border-top: 1px solid #c5c5c5;border-bottom: 1px solid #c5c5c5;margin-bottom: 0px;}
	 .boh header .navbar-nav > li > a:hover{padding-bottom: 10px;}
	 .storeID-left {float: left;}
	 header .navbar-nav > li .badge {background: #0188cc none repeat scroll 0 0;border-radius: 5px;float: left;margin-right:10px;position: relative;}
	 .badge {color: #fff;font-size: 12px;font-weight: 700;line-height: 1;text-align: center;white-space: nowrap;}
	 .badge {background-color: #777;border-radius: 10px;color: #fff;display: inline-block;font-size: 12px;font-weight: 700;line-height: 1;min-width: 10px;padding: 3px 7px;
    text-align: center;vertical-align: baseline;white-space: nowrap;}
.caret-right {border-bottom: 5px solid transparent;border-left: 5px solid #0188cc;border-top: 5px solid transparent;position: absolute;right: -4px;
top: 4px;}
   

/* ==========================================================================
   Media queries
   ========================================================================== */
@media screen and (max-width:1169px){
/* ==========================================================================
   Login Screen
   ========================================================================== */
	.loginBox .instructions, .loginBox .loginForm{ padding:25px;}
	
	.mobileImg img{ width:100%;}
	.mainMenu .btn{ width:220px;}
	.mainMenu{ margin-top:50px;}
	
	.pcProdInfo{ margin-top:2px}
	
}

@media screen and (max-width:1023px){
/* ==========================================================================
   Login Screen
   ========================================================================== */
	.loginBox, .loginBox .row{ margin:50px 0;}
	.loginBox{padding:0px;}
	
/* ==========================================================================
   Home Screen
   ========================================================================== */

   
	.homeScreen .homeBanner, .homeScreen .homeNav{ text-align:center;}
	.homeScreen ul li{ display:inline-block;}

	
/* ==========================================================================
   Inspection Screen
   ========================================================================== */
	.spec ul.capacity li{ padding:0 4px;}
	.spec ul{ padding:10px 0px 10px 10px;}
	
	
	.mobileImg img{ width:auto;}
	.mainMenu{ margin-top:40px;}
	.sectionBox .customRow .btn-group .col-md-7, .sectionBox .customRow .btn-group .col-md-6{ margin-bottom: 15px;}
	.tradinPrint .btn{margin-bottom:15px;}
	.tradinPrint  .action{ text-align:center;} 

/* ==========================================================================
   Footer
   ========================================================================== */		
	.footerBar{ position:relative!important; width:100%!important;}
	.footerBar .footerBG p{ padding:0 10px;}
	.footerBar br{ display:none;}
	
/* ==========================================================================
   Customer Info
   ========================================================================== */	
 .customerInfo{ padding:30px 30px;}
 
/* ==========================================================================
		boh
   ========================================================================== */	
.boh .nav > li > a{ padding:15px 7px 24px;}
.boh .storeID { padding:15px 7px;}
.boxForm ul li{ margin:0 10px 10px 0; width:calc(20% - 12px);}


	
}

@media screen and (max-width:767px) {

    /* ==========================================================================
   Login Screen
   ========================================================================== */
    .loginBox, .loginBox .row {
        margin: 0;
    }

        .loginBox .border-left {
            border-left: 0;
            border-top: 1px solid #e6e6e6;
        }

        .loginBox .instructions, .loginBox .loginForm {
            padding: 25px 0;
        }

    select.form-control {
        width: 86%;
        margin-left: 22px;
    }

    .field span {
        margin-left: 23px;
    }

    .tradinPrint .priceDtl span {
        display: block;
        text-align: center;
    }


    .mobileImg img {
        width: 100%;
    }

    .borderBox {
        padding: 20px 10px;
    }

    footer br {
        display: none;
    }

    #navbar {
        text-align: center;
    }

    header .navbar-nav > li > a, header .navbar-nav > li > a:hover {
        padding-bottom: 10px;
    }

        header .navbar-nav > li > a:hover, header .navbar-nav > li.active > a {
            border-bottom: 0;
            background: #0188cc;
            color: #fff;
        }

    header .nav {
        margin-top: 0;
        padding-top: 0;
        margin-left: 0;
    }

    .carrierLock {
        width: 60%;
    }

    .roundBderBox ul li {
        padding: 0 10px;
    }

    .col-xs-12 {
        margin-top: 10px;
    }

    .roundBderBox {
        padding: 20px 10px 10px;
    }

    .borderBox {
        padding: 10px;
        margin-top: 20px;
    }

    .searchbtn {
        width: 100%;
    }
    /*.margin-bottom40{margin-bottom: 25px!important;}*/
    .roundBderBox.pcProduct {
        padding: 15px 10px 10px;
    }

    h3, .h3 {
        font-size: 18px;
    }

    .borderBox.confirmInfo > ul {
        padding-left: 25px;
    }

    .confirmInfo ul li {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .roundBderBox .legend {
        font-size: 20px;
    }

    /* ==========================================================================
   BOH
   ========================================================================== */
    /* **********commented by designer (INDERJEET) for Redesign Header BOH TFSID-9651 ********/
    /*.boh .nav > li {
        text-align: left;
    }*/
    .boh .nav > li > a {
        padding: 15px 7px;
    }

        .boh .nav > li > a:hover {
            padding-bottom: 15px;
        }

    .boxForm ul li {
        margin: 0 10px 10px 0;
        width: calc(50% - 10px);
    }

        .boxForm ul li:nth-child(5n+5) {
            margin-right: 10px;
        }

        .boxForm ul li:nth-child(even) {
            margin-right: 0;
        }

    .printConfirm .border-right {
        border-bottom: 1px solid #e6e6e6;
    }

    .boh .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
    }

    .nonIOSHelp .sectionBox h5 {
        font-size: 14px;
    }

    .nonIOSHelp .sectionBox label {
        font-size: 12px;
    }

    .boxCnt {
        min-height: 10px;
    }

    .boh .nav > li > a {
        margin-bottom: 0;
    }

    .eligiBalProd ul li {
        line-height: 5px;
    }

    .eligiBalProd .col-sm-3 {
        padding-right: 0;
    }

    .eligibleHdg {
        width: 100%;
        background: #969696;
    }

    ::-webkit-scrollbar {
        -webkit-appearance: none;
    }

        ::-webkit-scrollbar:vertical {
            width: 12px;
        }

        ::-webkit-scrollbar:horizontal {
            height: 12px;
        }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .5);
        border-radius: 10px;
        border: 2px solid #ffffff;
    }

    ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #ffffff;
    }

    .modal-body ul {
        padding-left: 5px;
    }

    .modal-body {
        max-height: 100%;
    }

    /* **********commented by designer (INDERJEET) for Redesign Header BOH TFSID-9651 ********/
    /*   header .navbar-nav > li .badge { float:none; margin-left:6px;
    }
    header .navbar-nav > li .badge .caret-right {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #0188cc;
    border-left: 0;
    left: -4px;
    right:inherit;
    position: absolute;
    top: 4px;
}*/
    /* ==========================================================================
		 Redesign Header FOH TFSID-9651
		 ========================================================================== */
    header ul.nav {
        position: relative;
    }

    .mobile_only .storeID {
        position: absolute;
        top: 1px;
        z-index: 9;
    }

    .navbar-toggle {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .storeID {
        padding: 15px 7px;
    }

    .navbar-collapse {
        text-align: center;
    }

    header .login {
        margin-bottom: 20px;
    }

    .pull-right {
        margin-right: 35%;
    }
    /* ==========================================================================
		 Redesign Header BOH TFSID-9651
		 ========================================================================== */
    .boh header .navbar-nav > li > a:hover {
        padding-bottom: 15px;
    }

    header .navbar-nav > li .pull-right {
        float: none !important;
    }

    .afterlogout {
        margin-top: 50px;
    }

    @media screen and (max-width:630px) {
        /* ==========================================================================
	Home Screen
========================================================================== */
        .homeScreen ul li {
            display: block;
        }

        .homeScreen .homeBanner img {
            width: 100%;
        }

        select.form-control {
            width: 86%;
            margin-left: 22px;
        }

        .field span {
            margin-left: 23px;
        }

        select.form-control {
            width: 86%;
            margin-left: 22px;
        }

        .field span {
            margin-left: 23px;
        }

        .sectionBox br {
            display: none;
        }
    }

    @media screen and (max-width:479px) {
        .roundBderBox ul li {
            padding: 10px 0px;
            display: block;
        }

        .sectionBox .col-xs-4 .col-xs-6 {
            width: 100%;
        }

        .combineBox .radio, .customRow .checkbox {
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .carrierLock {
            width: 100%;
        }

        .customerInfo {
            padding: 10px;
        }

        .sectionBox .action {
            text-align: center
        }

            .sectionBox .action .pull-right {
                float: none !important;
                margin-bottom: 10px;
            }

                .sectionBox .action .pull-right .btn:first-child {
                    margin-left: 0;
                }

        .tradinPrint .btn {
            width: 100% !important;
        }

        .prodInfo {
            text-align: center;
        }

            .prodInfo .col-xs-2, .prodInfo .col-xs-10 {
                width: 100%;
            }

        .zeroValue {
            width: 85%;
        }

        .customRow h5 {
            font-size: 19px;
        }

        .sectionBox .action .pull-right.btn, .sectionBox .action .btn {
            margin-bottom: 10px;
        }

        .sectionBox .action .pull-right {
            margin-bottom: 0;
        }

        .deviceSummary strong {
            width: 175px;
        }

        .action .pull-right {
            float: none !important;
        }

        .action .btn {
            width: 100%;
            margin: 0 0 10px;
        }
    }



    /*Help Content CSS*/
    .model_identifier ul, .model_identifier p {
        font-size: 16px;
        color: #7b7b7b;
    }

        .model_identifier p a {
            color: #0189cd;
        }

    .model_identifier p {
        margin-top: 5px;
    }

    .model_identifier ul li {
        margin-left: 25px;
    }

        .model_identifier ul li img {
            width: auto
        }

    .model_identifier h3 {
        font-size: 24px;
        padding-bottom: 5px;
    }

    .model_identifier h4 {
        color: #2a2a2a;
        padding-bottom: 5px;
    }

    .model_identifier img {
        width: 100%;
        height: auto;
    }
    /*Help Content CSS End */


    /*fmip_wrapper Content CSS*/
    .fmip_wrapper {
    }

        .fmip_wrapper .glyphicon-remove-circle {
            position: absolute;
            z-index: 1;
            top: 30px;
            font-size: 48px;
            left: 4%;
            color: red;
        }

        .fmip_wrapper .modal-content {
            padding: 15px 15px 15px 90px;
        }

        .fmip_wrapper .modal-header {
            padding: 0 0px 10px 0px;
        }

        .fmip_wrapper .modal-body {
            padding: 10px 0px 15px 0px;
        }
    /*fmip_wrapper Content CSS End */




    .footerLinks {
        list-style-type: none;
        margin: auto;
        padding: 0;
        overflow: hidden;
        color: #333333;
        margin: 15px 0;
        width: 100%;
    }

        .footerLinks li a {
            font-size: 12px;
            margin: 0 10px;
            border-bottom: none;
            white-space: nowrap;
            color: #1A191A;
            font-family: 'RubrikSemiBold';
        }

        .footerLinks li {
            display: inline-block;
        }

    .disclaimer {
        margin: 15px 0;
        color: #A8A8A8;
        font-family: 'RubrikRegular';
        font-size: 12px;
        text-align: center;
    }

        .disclaimer p {
            margin-bottom: 0;
        }


    .footerGray {
        background: #EFEFEF;
        text-align: center;
        padding: 10px 20px 10px 20px;
        margin-top: 21vh;
    }
	
}

html, body {
    height: 100%;
    margin: 0;
}
#main{
    min-height: 57vh;
}
.panelmain{
    min-height: 33vh;
}

.container.main-footer {
    width: 100%;
    padding: 0;
}

    .container.main-footer .footerBar {
        width: 100% !important;
        position: fixed !important;
        z-index: 999;
    }

form[name="aspnetForm"] {
    padding-bottom: 200px;
}

/*// TFS ID 34434 Changes*/
.device-category {
    margin: 0;
    padding: 0;
}

    .device-category li {
        display: inline-block;
        background: #F7F7F7;
        font-size: 12px;
        border: 1px solid transparent;
        border-radius: 10px;
        text-align: center;
        padding: 1.2em 2.8em;
        margin: 0 5px;
    }

        .device-category li:hover,
        .device-category li.current {
            border-color: #0088CC;
        }

        .device-category li:before {
            background-position: center !important;
            background-size: 100% !important;
            margin-bottom: 5px !important;
        }

#IPhone {
    position: relative;
}

    #IPhone:before {
        content: '';
        background: url('../../../images/icons/icon-iphone.svg') no-repeat;
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
    }

.device-category li:hover #IPhone:before,
.device-category li.current #IPhone:before {
    background: url('../../../images/icons/icon-iphone_hr.svg') no-repeat;
}

.device-category li.current {
    box-shadow: 0 1px 11px -3px rgba(0, 0, 0, 0.5);
    color: #0088CC;
    background: #fff;
}

#Ipad {
    position: relative;
}

    #Ipad:before {
        content: '';
        background: url('../../../images/icons/icon-tablet.svg') no-repeat;
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
    }

.device-category li:hover #Ipad:before,
.device-category li.current #Ipad:before {
    background: url('../../../images/icons/icon-tablet_hr.svg') no-repeat;
}

#Mac {
    position: relative;
}

    #Mac:before {
        content: '';
        background: url('../../../images/icons/icon-imac.svg') no-repeat;
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
    }

.device-category li:hover #Mac:before,
.device-category li.current #Mac:before {
    background: url('../../../images/icons/icon-imac_hr.svg') no-repeat;
}

#Watch {
    position: relative;
}

    #Watch:before {
        content: '';
        background: url('../../../images/icons/icon-iwatch.svg') no-repeat;
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
    }

.device-category li:hover #Watch:before,
.device-category li.current #Watch:before {
    background: url('../../../images/icons/icon-iwatch_hr.svg') no-repeat;
}

@media (max-width: 767px) {
    .device-category li {
        margin: 10px 0;
        width: 100%;
        display: block;
    }

    .device-category {
        margin: 0 !important;
        padding: 0 !important;
    }
}
/*// TFS ID 34434 Changes*/