﻿@charset "utf-8";
header {
    width: 100%;
    top: 0;
    background: url(images/top-round.png) center top no-repeat #000;
    position: relative;
    background-size: 26%;
    overflow: inherit;
    height: 88px;
    border-bottom: #510504 1px solid
}
header .leftborder {
    border-left: #fefefe 1px solid
}
#content #login h2 {
    color: #fff;
    font-size: 1.45em;
    margin-bottom: 10px;
    font-weight: 400
}
#content #login .loginfrm input {
    font-size: .9em;
    padding: 2px 10px;
    width: 100%;   
    border-radius: 5px;
    margin-bottom: 11px;
    color: #333;
    height:31px
}
#unifyLogin_txtUserName,#unifyLogin_txtPassword {
    border:1px solid #acacac;
 background:#fff!important
     }
#content #login .loginfrm input.btn {
    height: 31px;
    background: #b91213;    
    border: none;
    padding: 0;
    color: #fff;
    font-size: 1.05em;
    border:1px solid #6b0606;
    width:100%!important
}
.topTxtBar2 {
    width: 73.1%;
    font-family: FaricyNewLight, Arial, sans-serif;
    color: #FFF
}
.failureNotification {
    border: 1px solid #EAAD0D;
    background: #FCE6A3;
    background: -webkit-linear-gradient(top, #FEF8F5, #FCE6A3);
    background: -moz-linear-gradient(top, #FEF8F5, #FCE6A3);
    background: -ms-linear-gradient(top, #FEF8F5, FCE6A3);
    background: -o-linear-gradient(top, #FEF8F5, #FCE6A3);
    border-radius: 4px;
    color: #C41617;
    padding: 10px 20px;
    display: none;
    font-family: FaricyNewLight, Arial, sans-serif;
    text-align: center;
    word-wrap:break-word
}
.close {
    background-image: url(images/sprite_icons.png);
    background-position: -125px -560px;
    position: absolute;
    width: 33px;
    height: 33px;
    top: 5px;
    right: 3px;
    z-index: 1000
}
.grayarr {
    position: absolute;
    left: -14px;
    top: 165px;
    cursor: pointer
}
.overlayClass {
    background: url(images/black_90_bg.png)!important;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}
.whiteScreen {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    height: 100%;
    opacity: .5;
    z-index: 999
}
.LandingWarning {
    width: 35%;
    height: 40px;
    padding: 1%;
    font-family: FaricyNew, Arial, sans-serif;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #FF9B2F;
    position: absolute;
    background: url(../i/overlay_gradient.png) repeat-x #1F0503;
    background: -webkit-linear-gradient(top, #000, #1F0503);
    background: -moz-linear-gradient(top, #000, #1F0503);
    background: -ms-linear-gradient(top, #000, #1F0503);
    background: -o-linear-gradient(top, #000, #1F0503);
    display: none;
    top: -999px
}
.LandingWarning h2 {
    color: #FF9B2F;
    font-size: 1.2em;
    font-weight: 700
}
.LandingWarning p {
    color: #f7f7f7;
    font-weight: 400;
    font-size: .8em
}
.LandingWarning:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent;
    border-left-color: #FF9B2F;
    top: 40%;
    left: 100%
}
#crumbContainer {
    position: relative
}
#crumbContainer #breadcrumb {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}
#crumbContainer #breadcrumb,
#main-panel #breadcrumb {
    background: #f5f5f5;
    border-bottom: #ddd 1px solid;
    padding-left: 1%
}
#crumbContainer #breadcrumb ul li,
#main-panel #breadcrumb ul li {
    display: inline;
    list-style: none;
    margin-left: 1%;
    color: #999
}
#crumbContainer #breadcrumb ul li:first-child,
#main-panel #breadcrumb ul li:first-child {
    margin-left: 0
}
#crumbContainer #breadcrumb ul.shiftLink li a,
#main-panel #breadcrumb ul.shiftLink li a {
    color: #008a94
}
#crumbContainer #breadcrumb ul li a:hover,
#crumbContainer #breadcrumb ul li.on a,
#main-panel #breadcrumb ul li a:hover,
#main-panel #breadcrumb ul li.on a {
    color: #c41617!important
}
#main-panel.noTopradius {
    position: relative;
    border-radius: 0 0 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px
}
#crumbContainer #breadcrumb ul.navCustomer li {
    margin-left: 0;
    color: #000;
    height: 85px
}
#crumbContainer #breadcrumb ul.navCustomer li.navSelected {
    color: #fff
}
#main-panel .left-panel {
    margin-top: 1%;
    position: relative;
    z-index: 1
}
#main-panel .middle-panel,
#main-panel .right-panel {
    z-index: 1
}
.open-shift {
    width: 100%
}
.open-shift #main-panel .left-panel {
    width: 30%;
    float: left;
    margin-top: 1%;
    position: relative
}
.open-shift #main-panel .middle-panel {
    width: 30%;
    float: left;
    margin: 1% 1.83% 0;
    position: relative
}
.open-shift #main-panel .right-panel {
    width: 32.5%;
    float: right;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
    margin-top: 1%;
    padding: 0 1.5%;
    position: relative
}
.scroll-area {
    width: 100%;
    height: auto;
    font-family: FaricyNew, Arial, sans-serif;
    font-size: 1em;
    margin: 0 0 5px
}
.scroll-area>li {
    height: auto;
    border-bottom: 1px #e7e7e7 solid;
    position: relative;
    margin: 0!important
}
.scroll-area>li .txt {
    padding: 10px 0 10px 40px;
    float: left
}
.scroll-area>li .del {
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 15px;
    width: 14px;
    height: 14px;
    background: url(images/del.png) no-repeat!important;
    border: none!important
}
.scroll-area>li .camera {
    position: absolute;
    cursor: pointer;
    right: 55px;
    top: 12px;
    width: 12%
}
#addScroll {
    position: relative;
    z-index: 1;
    padding-top: 0;
    margin-top: 20px
}
.ajax__validatorcallout_close_button_cell,
.ajax__validatorcallout_error_message_cell,
.ajax__validatorcallout_icon_cell,
.ajax__validatorcallout_innerdiv,
.ajax__validatorcallout_innerdiv div {
    background-color: #edf3f8!important
}
.ajax__validatorcallout_popup_table {
    width: 260px!important;
    border-radius: 4px!important
}
.message_login {
    background: -moz-linear-gradient(center top, #FEF8F5, #FCE6A3);
    border: 1px solid #EAAD0D;
    border-radius: 4px;
    color: #C41617;
    display: block;
    margin: 0 0 20px;
    padding: 10px 20px
}
#main-panel section ul>li span {
    font-size: 1em;
    font-family: FaricyNew, Arial, sans-serif;
    display: inline-block
}
#main-panel .gray-bg ul li {
    list-style: none;
    float: none;
    color: #333;
    display: block;
    font-family: FaricyNew, Arial, sans-serif
}
.jobCards-section {
    width: 52%;
    margin-right: 2%;
    border-radius: 10px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-top: 25px;
    position: relative;
    min-height: 195px;
    padding: 0 1%
}
.customer-name {
    width: 49%;
    float: left;
    border-radius: 10px;
    border: 1px solid #bdbdbd;
    min-height: 161px;
    position: relative
}
.customer-name.newWH {
    width: 38.6%
}
.jobCardSchedule {
    width: 95%
}
.scheduleSelectsHold {
    margin: -1px
}
.jobCardSchedule .scheduleSelects li {
    display: inline-block;
    width: 24%!important;
    margin: 0 5px;
    float: none!important;
    text-align: left
}
.jobCardSchedule .gryBtn,
.jobCardSchedule .redBtn {
    width: 160px!important;
    margin-right: 10px;
    font-size: 1.2em!important;
    height: 40px!important;
    background-size: 100% 40px!important
}
.scheduleTbl {
    margin: 0 20px 10px;
    position: relative
}
.scheduleTbl .timeTbl {
    overflow: auto
}
#timeGridHold {
    position: relative;
    min-height: 50px;
    left: 0
}
input.errClass,
textarea.errClass {
    background: url(images/dropBgerror.png) left top no-repeat #ffeded!important;
    background: -moz-linear-gradient(center top, #faa, #ffEDED) #ffeded!important;
    background: -webkit-linear-gradient(top, #faa, #ffEDED) #ffeded!important
}
#main-panel section ul>li input.succClass,
input.succClass,
textarea.succClass {
    box-shadow: 0 0 0 1px green inset!important
}
li.errClass .customCombo {
    border: 1px solid red!important;
    background-image: url(images/dropBgerror.png)!important
}
#pullUp .pullUpIcon {
    background: url(images/upArr.png) no-repeat;
    width: 24px;
    height: 24px;
    padding: 5px 0 0 30px;
    vertical-align: middle
}
form {
    margin: 0;
    padding: 0
}
#content {
    height: auto;
    margin: 0 auto;
    position: relative;
    width: 95%
}
* {
    margin: 0
}
.wrapper {
    min-height: 100%;
    height: auto!important;
    height: 100%;
    margin: 0 auto
}
html {
    font-size: 100%
}
a:hover {
    color: #952c85
}
a:focus {
    color: #952c85;
    outline: 0
}
p a,
p a:visited {
    line-height: inherit
}
.row_container {
    background: #fff;
    padding: 0 18px;
    margin: 0 auto;
    max-width: 914px
}
.row_container_header {
    margin: 0 18px 10px;
    padding: 15px 0;
    max-width: 914px;
    background: #e9e9e9
}
.row .row_container_header .three.columns {
    width: 21.68%;
    border: 0 solid red;
    margin-left: 0
}
.row_container_header .columns {
    background: url(../images/line_vert.png) -1px 0 repeat-y;
    padding-left: 1.6%;
    padding-right: 1.6%
}
.row_container_header .columns:first-child {
    background: 0 0
}
.row_container .menu li.current-menu-item a {
    color: #952c85
}
.clear {
    clear: both
}
.orbit_banner {
    padding: 0 18px;
    margin-bottom: 20px
}
.row.txtover .columns {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
#content #login {
    font-family: FaricyNew, Arial, sans-serif;
    padding: 0;
    float: none;
    text-align: left;
    width: 100%!important;
    position: relative;
    top: auto
}
.loginfrm {
    float: none;
    left: auto;
    position: relative;
    width: auto!important
}
.FAQ {
    float: none;
    position: relative;
    right: auto;
    top: auto;
    width: auto!important
}
.infoBox {
    width: 100%
}
#main-panel .left-panel {
    float: none;
    width: auto
}
#main-panel .middle-panel {
    margin: 1% 0 0;
    position: relative;
    float: none;
    width: auto
}
#main-panel .right-panel {
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    margin-top: 1%;
    padding: 0 1.5%;
    position: relative;
    float: none;
    width: auto
}
#main-panel section ul>li input[type=number],
#main-panel section ul>li input[type=text] {
    font-size: 1em;
    height: auto
}
#main-panel section ul>li input[type=text] {
    background: -moz-linear-gradient(center top, #EDEDED, #FEFEFE);
    border: 1px solid #bdbebd;
    border-radius: 5px;
    color: #000;
    font-family: FaricyNew, Arial, sans-serif
}
#main-panel section ul>li input[type=text].PlaceOrderRequired {
    font-size: .875em;
    padding-bottom: 7px;
    padding-top: 8px
}
#main-panel section ul>li input[type=text].placeholder {
    font-size: .875em;
    color: #aaa;
    padding-bottom: 7px;
    padding-top: 8px
}
.mtile.tileLetterSpace {
    letter-spacing: -.001em
}
.topRightBar {
    position: absolute;
    right: 3%;
    bottom: 4px;
    color: #fff;
    border: 2px solid #9e7736;
    border-radius: 5px;
    padding: .5em
}
.topRightBar span {
    color: #ff9b2f;
    font-weight: 700
}
.osnRed {
    color: #c41617
}
.osnGreen {
    color: #007900
}
.handCursor {
    cursor: pointer
}
#main-panel section ul>li span.fi-magnifying-glass.size-30 {
    font-size: 30px
}
.searchInputWrapper input[type=number],
.searchInputWrapper input[type=tel],
.searchInputWrapper input[type=text] {
    width: 88%
}
#dvSearch .searchInputWrapper.search,
#dvSearch .searchInputWrapper.search input[type=text] {
    min-height: 41px;
    height: 41px!important;
    line-height: 41px!important
}
#dvSearch .searchInputWrapper input[type=number],
#dvSearch .searchInputWrapper input[type=tel],
#dvSearch .searchInputWrapper input[type=text] {
    width: 91%
}
#dvSearch .searchInputWrapper input[type=text]#txtSearchAddress {
    width: 100%;
    box-shadow: 0 0 0 0 #ddd inset!important;
    background: 0 0
}
#dvSearch .searchInputWrapper button#btnShowLocation {
    padding: 0;
    background: 0 0;
    color: #c41617;
    width: 35px;
    position: absolute;
    right: 5px;
    top: 4px
}
.radioGroup label {
    margin: 0;
    padding: 0
}
.osnNotification .bincodeColor span {
    color: red;
    font-weight: 700
}
.mainTitle {
    height: 3em;
    padding-top: .5em;
    padding-left: 2em
}
.mainTitle .topTxtBar img {
    width: 31px
}
.RecentSrch h2,
.dealerPanel h2 {
    font-size: 1.2em;
    padding-bottom: 5px;
    color: #333
}
.SearchBaseColumns {
    padding: 1.5em 3%;
    position: relative
}
header aside.logindetails a:hover span.icon {
    color: #fff
}
#showSearchResult {
    width: 88%;
    position: absolute;
    background: #fff;
    min-height: 2em;
    opacity: .9;
    filter: alpha(opacity=90);
    top: 6px;
    left: 38px;
    height: 100%;
    z-index: 101;
    box-shadow: 0 0 10px #C9C9C9
}
.closeSearchResult {
    padding-top: 10px;
    cursor: pointer;
    background: url(images/sprite_icons.png) -125px -557px no-repeat;
    height: 32px;
    width: 32px
}
#showSearchResult .row.bottomline {
    border-bottom: #e7e7e7 1px solid;
    padding: 10px 0
}
.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    -webkit-transition-property: -webkit-transform, left, top;
    -webkit-transition-duration: 0s;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transition-timing-function: ease;
    -moz-transition-property: -moz-transform, left, top;
    -moz-transition-duration: 0s;
    -moz-transform: translate3d(0, 0, 0);
    -moz-transition-timing-function: ease;
    -o-transition-property: -o-transform, left, top;
    -o-transition-duration: 0s;
    -o-transition-timing-function: ease;
    -o-transform: translate(0, 0);
    -ms-transition-property: -ms-transform, left, top;
    -ms-transition-duration: 0s;
    -ms-transform: translate3d(0, 0, 0);
    -ms-transition-timing-function: ease;
    transition-property: transform, left, top;
    transition-duration: 0s;
    transform: translate3d(0, 0, 0);
    transition-timing-function: ease
}
.swiper-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}
.swiper-slide {
    position:absolute;
    left:50%;
    top:245px;
    max-width:320px;
    height:400px;
    margin-left:-160px;
    margin-top:0px;
    width:97%;
   
}
.swiper-slide #LoginPanel{
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGM4YzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffffff 0%, #c8c8c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#c8c8c7));
background: -webkit-linear-gradient(top,  #ffffff 0%,#c8c8c7 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#c8c8c7 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#c8c8c7 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#c8c8c7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c8c8c7',GradientType=0 );
padding:40px 20px;
border-radius:4px
}
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y
}
.swiper-wp8-vertical {
    -ms-touch-action: pan-x
}
.uplogo {
    color:#fff;
    margin-bottom:10px
}
    .uplogo img {
        display:inline-block;
        margin-left:0px
    }
.botmlogo {
    margin-top:10px;
    font-size:12px;
    color:#fff
}
    .botmlogo span {
        color:#ed2939
    }
.swiper-container,
.swiper-slide,
.swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}
.swiper-container {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px
}
.swiper-wrapper {
    -ms-perspective: 1200px
}
.swiper-slide {
   
    
    
}
.swiper-slide-active {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    z-index: 120
}
.pagination {
    position: absolute;
    display: none
}
#content .swiper-container #login h2 {
    color: #333
}
#content .swiper-container #login .loginfrm input[type=password],
#content .swiper-container #login .loginfrm input[type=text] {
    box-shadow: 2px 2px 5px #ddd inset!important;
    border-radius: 0!important;
    background: #fff;
    border: 1px solid #ccc!important
}
#content .swiper-container #login .loginfrm input.btn,
.listpopHold button.redBtn,
.listpopHold input.redBtn[type=submit] {
box-shadow: 0 0 0 0 !important;background:#a11011;background:-moz-radial-gradient(center,ellipse cover,rgba(161,16,17,1) 0,rgba(122,12,13,1) 100%);background:-webkit-gradient(radial,center center,0,center center,100%,color-stop(0,rgba(161,16,17,1)),color-stop(100%,rgba(122,12,13,1)));background:-webkit-radial-gradient(center,ellipse cover,rgba(161,16,17,1) 0,rgba(122,12,13,1) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(161,16,17,1) 0,rgba(122,12,13,1) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(161,16,17,1) 0,rgba(122,12,13,1) 100%);background:radial-gradient(ellipse at center,rgba(161,16,17,1) 0,rgba(122,12,13,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a11011', endColorstr='#7a0c0d', GradientType=1);
}
.listpopHold button.redBtn {
    padding: .5rem 1.75rem;
    font-size: 1rem;
    color: #fff
}
#content .swiper-container #login .FAQ h2 {
    color: #333!important;
    font-size: 1.2em;
    border-bottom: #ccc 1px solid
}
#content .swiper-container #login .FAQ li {
    border-radius: 0;
    color: #333;
    padding: 2px 2px 2px 15px;
    margin-bottom: 2px;
    background: url(images/bullet_icon.png) 0 12px no-repeat
}
#content .swiper-container .infoTile h2 {
    color: #333!important;
    font-size: 1.2em;
    font-weight: 700;
    border-bottom: #ccc 1px solid
}
#content .swiper-container .infoTile li {
    color: #333;
    padding-bottom: 0;
    padding-left: 15px;
    background: url(images/bullet_icon.png) 0 6px no-repeat
}
#content .swiper-container .infoTile p {
    color: #c41617
}
#content .swiper-container .infoTile label {
    color: #b6b6b6
}
.LoginCotainer {
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
    position: relative !important;
    overflow: visible
}
.LoginCotainer .infoPanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 450px!important
}
.LoginCotainer .infoPanel.infoPl {
    left: 0;
    top: 60px;
    height: 360px;
    z-index: 1
}
.LoginCotainer .infoPanel.infoPa {
    left: 50%;
    width: 450px;
    margin-left: -225px;
    height: 480px!important;
    max-height: 480px!important;
    z-index: 5;
    padding-top: 20px
}
.LoginCotainer .infoPanel.infoPlb {
    left: 100px;
    top: 30px;
    z-index: 2;
    height: 420px
}
.LoginCotainer .infoPanel.infoPla {
    left: inherit;
    right: 100px;
    top: 30px;
    z-index: 3;
    height: 420px
}
.LoginCotainer .infoPanel.infoPr {
    left: inherit;
    right: 0;
    top: 60px;
    z-index: 1;
    height: 360px
}
.fldHold li input[type=text],
input,
input:not([type=submit]):not([type=file]),
select {
    border-radius: 0!important
}
#main-panel .panel-container .jobCards-section {
    width: 100%;
    margin-right: 0;
    border-radius: 0
}
#main-panel .panel-container .customer-name.newWH,
#main-panel .panel-container .jobCardSchedule {
    width: 100%;
    border-radius: 0!important
}
#main-panel .panel-container .jobCardSchedule .bdrRad {
    border-radius: 0!important
}
.custom-select1,
.custom-select2,
.custom-select3 {
    border-radius: 0;
    border: 0
}
h3.LineBehind {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: left;
    font-size: 1.05em;
    color: #c41617
}
h3.LineBehind:after,
h3.LineBehind:before {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 100%;
    height: 1px;
    content: '\a0';
    background-color: #ccc
}
h3.LineBehind:before {
    margin-left: -100%;
    text-align: right
}
.msgTablet {
    text-align: left!important;
    margin-left: 0!important
}
.alertBox {
    background: #fff08b;
    padding: 10px;
    width: auto;
    border-radius: 2px;
    margin: 4px 0 0;
    display: block;
    -webkit-box-shadow: 0 8px 6px -6px #6b6a6a;
    -moz-box-shadow: 0 8px 6px -6px #6b6a6a;
    box-shadow: 0 8px 6px -6px #6b6a6a;
    font-size: .9em
}
.greenBg {
    background: #43ac6a;
    color: #fff;
    border: 1px solid #3a945b
}
.yellowBg {
    background: #f08a24;
    color: #fff;
    border: 1px solid #de770f
}
.Mediumtext {
    font-size: .95em
}
.Smalltext {
    font-size: .85em
}
.tools.text-right {
    color: #959595;
    padding-bottom: 5px;
    border-bottom: #ccc 1px solid
}
.tools.text-right a {
    color: #c41617
}
.tools.text-right i {
    color: #8c6464
}
.yellowNote {
    padding: 8px!important;
    box-shadow: 0 0 2px 2px #ccc;
    display: block!important;
    background: #fff08b;
    color: #c41617;
    margin: 8px 0
}
#CaptureImgPopup {
    width: 75%;
    margin: 0 auto
}
.medCombobox {
    width: 80%;
    margin: 0 auto
}
#CaptureImgPopup a.redBtn {
    border-radius: 0!important;
    background: #a11011;
    background: -moz-radial-gradient(center, ellipse cover, rgba(161, 16, 17, 1) 0, rgba(122, 12, 13, 1) 100%);
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, rgba(161, 16, 17, 1)), color-stop(100%, rgba(122, 12, 13, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(161, 16, 17, 1) 0, rgba(122, 12, 13, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(161, 16, 17, 1) 0, rgba(122, 12, 13, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(161, 16, 17, 1) 0, rgba(122, 12, 13, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(161, 16, 17, 1) 0, rgba(122, 12, 13, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a11011', endColorstr='#7a0c0d', GradientType=1);
    padding: 5px 8px;
    color: #fff;
    margin: 10px 0;
    display: inline-block
}
#CaptureImgPopup a.redBtn .icon {
    color: #fff
}
.signature-area .edit-icon {
    width: 20px
}
.cursorHand {
    cursor: pointer
}
#Cinecontent input[type=checkbox]+label,
#Cinecontent input[type=radio]+label {
    display: block!important
}
.inverseTileInfo {
    padding: 1.5em
}
.inverseTileInfo h2 {
    font-size: 2em;
    border-bottom: #ccc 1px solid;
    margin-bottom: .5em;
    color: #c41617
}
.inverseTileInfo .infoTile,
.inverseTileInfo .infoTile h2,
.inverseTileInfo .infoTile li {
    color: #333
}
.inverseTileInfo .infoTile label,
.inverseTileInfo .infoTile p {
    color: #c41617
}
#content .inverseTileInfo .infoTile li {
    color: #333;
    padding-bottom: 0;
    padding-left: 15px;
    background: url(images/bullet_icon.png) 0 6px no-repeat
}
#dvSearchOverlay {
    z-index: 1300;
    background: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 40%;
    opacity: .5;
    text-align: center
}
#btnShowLocation {
    text-align: right;
    padding-left: 5px;
    margin-top: 3px;
    display: block
}
#dvAuthCode,
.nowrap {
    white-space: nowrap
}
select::-ms-expand {
    display: none
}
.corCutBox2.minH508 {
    min-height: 508px!important
}
.copyinstall .inscopytxt {
    font-size: .9em
}
.copyinstall input[type=checkbox] {
    width: 20px;
    box-shadow: 0 0!important
}
.copyinstall .autoBtn input {
    padding-left: 10px!important;
    padding-right: 10px!important
}
#main-panel .panel-container.noTopPad {
    padding-top: 0!important
}
.osnNotification#osnSiteNotification {
    max-width: 600px
}
.osnNotification {
    background: url(images/sprite_icons.png) -117px -695px no-repeat #fff08b;
    padding: 5px;
    width: auto;
    border-radius: 2px;
    margin: 4px 0px 0px;
    display: inline-block;
    position: absolute;
    right: 3em;
    z-index: 111;
    box-shadow: 0px 8px 6px -6px #000;
}
.osnNotification img {
    position: absolute;
    top: 5px;
    left: 5px
}
.osnNotification .text {
    padding-left: 30px;
    float: left;
    font-family: FaricyNew, Arial, sans-serif;
    font-size: 0.7em;
    color: #333;
}
.notificTilePad {
    padding-left: .99em
}
#pnlsuccessfull {
    position: relative
}
#pnlsuccessfull.order-successfull img {
    position: absolute;
    left: 5%
}
#pnlsuccessfull.order-successfull h2 {
    position: relative;
    z-index: 1
}
.fullwidth {
    width: 100%
}
.topmargin10 {
    margin-top: 10px
}
#main-panel #breadcrumb ul li a {
    color: #999
}
#main-panel #breadcrumb ul.navCustomer li span {
    font-size: .7em;
    color: #000
}
#main-panel #breadcrumb ul.navCustomer li {
    color: #000;
    height: 85px;
    margin-left: 0
}
#main-panel #breadcrumb ul.navCustomer li.navSelected span {
    color: #fff
}
#custInfo .boxStripe-orange .headRow li .vip {
    top: 26px;
    left: -45px;
    right: inherit
}
#custInfo .headRow h4 {
    position: relative
}
#custInfo .addrEdit {
    position: absolute;
    top: 0;
    right: 0
}
.scorenav {
    margin: 0;
    padding: 0 10px 0 0;
    list-style-type: none;
    position: absolute;
    height: 2.3em;
    background: #f5f5f5;
    bottom: 0;
    left: 18%;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px
}
.scorenav li {
    margin: 0;
    padding: 0;
    display: block;
    font-size: .8em;
    color: #c41617;
    float: left
}
.scorenav li.score-img {
    width: 44px
}
.scorenav li.score-txt {
    padding-top: 8px;
    margin-left: -15px
}
.scorenav li a {
    color: #c41617;
    font-size: .9em;
    text-decoration: underline
}
.scorenav li img {
    margin-left: -22px;
    margin-top: -3px
}
.offer-price {
    font-size: 1.2em;
    font-weight: 700;
    color: #6d6d6d
}
.offer-price span.small-txt {
    font-size: .6em;
    font-weight: 700
}
.vlineShade {
    width: 20px;
    height: 50px;
    position: absolute;
    top: -15px;
    left: -15px;
    box-shadow: 7px 2px 10px -6px rgba(0, 0, 0, .69)
}
img.d-arrow {
    position: absolute;
    bottom: -6px;
    left: 10%
}
.check-offer-btn {
    background: url(images/offer_triangle.png) no-repeat;
    width: 86px;
    height: 85px;
    padding-top: 10px;
    color: #fff;
    font-size: .9em;
    text-align: center;
    position: absolute;
    right: 30px;
    top: -6px;
    z-index: 120;
    cursor: pointer
}
.popHead .check-offer-btn {
    right: 35px;
    padding-top: 15px
}
.dropshadow {
    -webkit-box-shadow: 0 2px 27px 7px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 2px 27px 7px rgba(0, 0, 0, .75);
    box-shadow: 0 2px 27px 7px rgba(0, 0, 0, .75)
}
.price-tile {
    background: #c41617;
    padding: 5px;
    color: #fff
}
#main-panel section ul>li .price-tile span.price {
    font-size: 1.5em
}
#main-panel section ul>li .price-tile span.price.txt-l {
    font-size: 1.9em
}
.price-tile .price {
    white-space: nowrap;
    font-size: .85em;
    font-weight: 700
}
#main-panel section ul>li .price-tile span {
    padding: 0
}
#main-panel section ul>li .price-tile hr {
    margin: 0;
    padding: 0;
    border: 0;
    height: 1px;
    background: #e33637
}
.hasPlaceholder {
    color: #777!important;
    font-size: .9em
}
.fldHold li input[type=text] {
    height: 35px;
    font-size: 1em
}
.toppad7 {
    padding-top: 7px!important
}
.toppad20px {
    padding-top: 20px
}
.toppad25px {
    padding-top: 25px
}
.group-title {
    margin-bottom: -10px
}
#main-panel section ul.OfferHistory>li {
    margin-bottom: 0
}
#main-panel section ul>li.group-row {
    background: #fffded;
    border-bottom: #ddd 1px solid;
    padding: 0 1em;
    margin: 0;
    font-size: .9em
}
.corCutBox2.srchIcon .srch-btn,
.status-bg input.srch-icon-bttn {
    box-shadow: 0 0 0!important
}
.accountbal-bg {
    background: #fff;
    background: -moz-linear-gradient(top, #fff 0, #eee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #eee));
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background: -o-linear-gradient(top, #fff 0, #eee 100%);
    background: -ms-linear-gradient(top, #fff 0, #eee 100%);
    background: linear-gradient(to bottom, #fff 0, #eee 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 0 0 3px 3px;
    margin: 0;
    box-sizing: border-box;
    position: absolute;
    top: -3px;
    left: 3%;
    font-size: 85%;
    color: #b5091b
}
.accountbal-bg .offer-price {
    color: #b5091b
}
.TeamCombo {
    margin-top: .6rem
}
. .minlineheight .navCustomer span {
    line-height: 1.2em!important
}
#content_auto {
    width: 95%;
    margin: 0 auto
}
.padding-bottom15 {
    padding-bottom: 15px
}
.subnav {
    margin-left: -1%;
    width: 101%;
    text-align: center;
    position: relative;
    z-index: 1
}
.subnav .show-submenu {
    width: 35px;
    height: 20px;
    background-image: url(images/sprite_icons.png);
    background-position: -124px -1419px;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 2;
    cursor: pointer
}
.subnav .show-submenu.MenuCloseDwn {
    width: 35px;
    height: 20px;
    background-image: url(images/sprite_icons.png);
    background-position: -131px -1446px;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 2;
    cursor: pointer
}
.subnav ul {
    background: #470302
}
.subnav li.navSelected {
    position: relative
}
.subnav li.navSelected em {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c61410;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px
}
.subnav a {
    color: #fff;
    padding: 4px 7px
}
.subnav li.navSelected a {
    background: #c9041d
}
.showthis {
    display: block!important
}
.hidethis {
    display: none!important
}
.newxls-icon,
.status-bg .newxls-icon {
    width: 33px!important;
    height: 33px;
    display: block;
    background: url(images/sprite_icons.png) -112px -1482px!important;
    font-size: 0;
    text-indent: 1200px;
    border: 0;
    box-shadow: 0 0!important
}
.button_topcurve {
    background: #fff;
    background: -moz-linear-gradient(top, #fff 0, #ebebeb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #ebebeb));
    background: -webkit-linear-gradient(top, #fff 0, #ebebeb 100%);
    background: -o-linear-gradient(top, #fff 0, #ebebeb 100%);
    background: -ms-linear-gradient(top, #fff 0, #ebebeb 100%);
    background: linear-gradient(to bottom, #fff 0, #ebebeb 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=0);
    padding: .5em;
    border-radius: 3px;
    font-size: .8em;
    cursor: pointer;
    border: 1px solid #ccc
}
#hintsPanel {
    display: none
}
.hintscontrol {
    padding: .6em;
    background: #fff;
    box-shadow: #333 0 0 15px;
    border-radius: 3px;
    position: absolute;
    right: 0;
    top: 3em;
    width: 250px;
    z-index: 3;
    font-size: .7em
}
.hintscontrol em {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    position: absolute;
    top: -10px;
    left: 70%;
    margin-left: -10px
}
.marbt10 {
    margin-bottom: 10px!important
}
#main-panel section ul>li input[type=text].redborder,
#main-panel section ul>li select.redborder {
    border: 1px solid red!important
}
.layered-paper {
    background: #eee;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, .15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, .15);
    padding: 30px
}
.Hstyle h2 {
    border-bottom: #ccc 1px solid
}
.nonStockSpace {
    margin: 0 0 5px!important;
    padding: 0!important
}
.topposition {
    top: 0!important
}
#POPmain-panel .dp-choose-date {
    display: none
}
.stock-status {
    margin: 0
}
form .stock-status .row {
    margin-bottom: .5em
}
.osnBlack,
.osnBlack:hover {
    color: #333
}
.text-wrap {
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -hp-pre-wrap;
    word-wrap: break-word
}
.text-gray {
    color: #9b9b9b
}
.text-dark {
    color: #666
}
.text-medium {
    font-size: 90%
}
.text-small {
    font-size: 80%
}
.popupPanelShow#divPopUpError {
    width: 330px;
    margin-left: -165px;
    margin-top: -147px;
    position: fixed!important;
    left: 50%!important;
    top: 50%!important
}
#main-panel .nongrid-uc .row {
    margin-top: .8em
}
#main-panel .radiolist {
    margin-top: .5em
}
#main-panel .radiolist label {
    display: inline-block;
    width: auto;
    margin-left: 1rem;
    margin-right: .5rem
}
img.cusCheck,
img.verifyEmail {
    border: 1px solid #b1b1b1
}
.graybox {
    background: #f3f3f3;
    border: 1px solid #d1d1d1;
    font-size: .9em;
    padding: 1em;
    color: #404040
}
.graybox b {
    color: #333
}
.graybox .row {
    margin-bottom: .7em!important
}
.graybox h5 {
    font-size: 1.4em;
    border-bottom: #ccc 1px solid
}
.graybox hr {
    margin: .5em 0
}
.graybox .balance-txt b {
    color: #333
}
.graybox .balance-txt {
    font-size: 1.3em;
    color: #c61410
}
#canvas-holder {
    width: 100%
}
.chartDescParent .chart-legend {
    margin: 0;
    padding: 0;
    list-style-type: none
}
.chartDescParent .chart-legend li {
    font-size: .9em
}
.absmore-right {
    background: #c61410;
    color: #fff;
    border-radius: 1em;
    padding: .1em .5em;
    position: absolute;
    right: 0;
    top: 10px;
    font-size: .9em
}
.absmore-right:hover {
    background: #c61410;
    color: #fff
}
#main-panel .panel-container fieldset legend {
    font-size: 1.3em;
    font-weight: 400;
    background: #fff;
    padding: .2em 1em;
    border-radius: 5px
}
.row.txtover .columns small.error {
    white-space: pre-wrap;
    margin-bottom: 0
}
.grid-group h3 {
    font-size: 1.2em;
    margin: 0;
    padding: .2em .5em
}
.grid-group h3:after {
    content: "▼";
    color: #333;
    font-size: .8em;
    padding-left: .5em
}
.reuse-status-bg {
    margin: 0 0 1em;
    padding: 0;
    border: 0;
    background: 0 0
}
.reuse-status-bg .corCutBox2 {
    min-height: 65px!important;
    padding: 1em 0 .5em 2.9em;
    font-size: .9em
}
.no-extra-space {
    margin: 0!important;
    padding: 0!important
}
#POPcontent {
    margin-top: 100px
}
/*.popContent {
    max-height: 500px;
    overflow-y: auto
}*/
.popupFrm #dp-popup,
.popupFrm .clockpicker-popover {
    margin-top: -100px
}
h2 {
    font-size: 1.6875rem!important
}
.commonsprite {
    background-image: url(images/sprite_icons.png);
    background-repeat: no-repeat
}
.loginsprite {
    background-image: url(images/sprite_login.jpg);
    background-repeat: no-repeat
}
#lnkBack {
    background-position: -64px -153px;
    width: 38px;
    height: 40px;
    display: inline-block;
    vertical-align: middle
}
.logo {
    background-position: 0 -1540px;
    width: 145px;
    height: 70px;
    display: inline-block;
    vertical-align: middle
}
header .logo {
    width: 96%
}
.osnplushd {
    background-position: -382px 0;
    width: 425px;
    height: 174px
}
.osnshowboxes {
    background-position: -795px 0;
    width: 425px;
    height: 174px
}
.osnhdbox {
    background-position: 32px 0;
    width: 425px;
    height: 174px
}
.phimg {
    background-position: -6px -161px;
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle
}
.storage1tb {
    background-position: -1220px 0;
    width: 108px;
    height: 55px
}
.storage500gb {
    background-position: -1220px -77px;
    width: 108px;
    height: 55px
}
.compareboxes {
    background-position: -1450px 0;
    width: 527px;
    height: 418px
}
.topTxtBar {
    width: 95%;
    font-family: FaricyNewLight, Arial, sans-serif;
    font-size: 0.9em;
    color: #FFF;
}
.text-small {
    font-size: 0.74em;
}
.text-medium {
    font-size: 0.92em;
}
.panel-autopad {
    padding: 0.7em 0.7em 1.3em;
}
a.redBtn {
    background-color: #A11011;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#A11011), to(#7A0C0D));
    background: -webkit-radial-gradient(circle, #A11011, #7A0C0D);
    background: -moz-radial-gradient(circle, #A11011, #7A0C0D);
    background: -ms-radial-gradient(circle, #A11011, #7A0C0D);
    color: #fff;
    font-size: 0.9em;
    padding: 0.4em;
}
input[type="text"]:disabled {
    opacity: 0.6;
    filter: alpha(opacity=30);
    background: #e8e8e8  !important;
}
#PageNavAll {
    display: block;
    clear: both;
    width: 100%;
}
#PageNavAll #NavContainer {
    position: relative;
    z-index: 1
}
#PageNavAll #NavContainer {
    white-space: nowrap;
}
.verifyEmail,
.cusCheck {
    width: 22px;
    height: 22px;
    max-width: inherit;
    display: block
}
#main-panel section #NavContainer ul>li {
    margin-top: 5px;
}
.simplePagerNav {
    border: 0px;
}
#PageNavAll {
    border-top: #ccc 1px solid;
}
.no-listing, .no-listing li {
    list-style-type:none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .subnav a {
        color: #fff;
        padding: 3px 7px
    }
}
@media handheld,
only screen and (max-device-width: 1280px) {
    #hintsPanel {
        display: block
    }
}
.OnScroll {
    overflow-y: auto;
    height: 100%
}
@media handheld,
only screen and (device-width: 1280px) {
    header {
        height: 75px
    }
    .mainTitle {
        height: 3em
    }
    .topTxtBar {
        font-size: 1.3em
    }
    .mainTitle .topTxtBar img {
        width: 25px
    }
    input[type=email] {
        height: 39px
    }
    .osnNotification {
        right: 2em
    }
    .CustomerCapture #main-panel section ul.contact-info>li {
        margin-bottom: 0!important
    }
    #main-panel section ul>li span,
    .instal-addr {
        font-size: .85em
    }
    #main-panel section ul ol.shiftCash li span {
        font-size: 1.1em!important
    }
}
@media handheld,
only screen and (min-width: 640px) and (max-width: 1024px) {
    .grid-cover {
        overflow-y: hidden
    }
    #main-panel section ul.simplePagerNav,
    #PageNavAll,
    .gridUl {
        min-width: 80em!important
    }
}
@media only screen and (min-width: 64em) {
    .price-tile .text-right {
        text-align: left
    }
}
@media handheld,
only screen and (min-width: 980px) and (max-width: 1280px) {
    .CustomerCapture #main-panel section ul.contact-info>li {
        margin-bottom: 0!important
    }
    .CustomerCapture #main-panel section ul>li span,
    .CustomerCapture .instal-addr {
        font-size: .85em
    }
    #main-panel section ul ol.shiftCash li span {
        font-size: 1.1em!important
    }
}
@media handheld,
only screen and (max-width: 1600px) {
    .topTxtBar {
        font-size: 1.5em
    }
    #main-panel .right-panel h2 {
        font-size: 1.5em;
        margin: 9px 0
    }
    .adjFnt {
        font-size: .98em
    }
    .type8-text {
        width: 75.4%
    }
}
@media handheld,
only screen and (max-width: 1200px) {
    .gridspace {
        margin-top: 35px
    }
}
@media handheld,
only screen and (min-width: 768px) and (max-width: 960px) {
    #main-panel>.row>.nine.columns {
        width: 100%;
        clear: both
    }
    .CustomerCapture1 .type1-text {
        width: 100%
    }
    .CustomerCapture1 .type4-text {
        width: 49.2%
    }
    span.contCode,
    span.nocontCode {
        width: 72%
    }
    #main-panel.CustomerCapture1 section ul>li.liAdj>label {
        display: none
    }
    #main-panel.CustomerCapture1 section ul>li.webAdj>label {
        display: inline-block
    }
    #main-panel span.nocontCode .type2-text {
        width: 100%;
        height: 33px
    }
    #main-panel span.nocontCode .type3-text {
        height: 33px
    }
    #main-panel.CustomerCapture1 .textarea {
        height: 117px
    }
    #content #login {
        width: 100%;
        clear: both
    }
    #main-panel .type2-text {
        width: 60%;
        height: 44px
    }
    #main-panel .type3-text {
        height: 44px;
        width: 25.9%
    }
    .customddlCWidth div.customCombo {
        width: 47.3%
    }
    .topTxtBar {
        font-size: 1.5em
    }
    .textarea {
        font-size: 1em;
        padding: 5px 8px
    }
    .copyAdd {
        top: 25px
    }
    .row.calendar-panel .selectWrapper {
        height: 44px
    }
    .open-shift #main-panel .left-panel,
    .open-shift #main-panel .right2-panel {
        float: none;
        width: 100%
    }
    .open-shift #main-panel section ul>li {
        padding: 0 0 5px
    }
    header .logo {
        width: 45%;
        top: 18px
    }
    .dealer-cash .basic-info .row .seven.columns {
        width: 23.68%
    }
    .dealer-cash .basic-info .row .five.columns {
        width: 72.92%
    }
    header .logo {
        background-position: -15px -1620px
    }
}
@media handheld,
only screen and (min-width: 640px) and (max-width: 767px) {
    body {
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0
    }
    header .logo {
        width: 45%;
        top: 18px
    }
    #content #login h2 {
        color: #FFF;
        font-size: 1.45em;
        font-weight: 400;
        margin-bottom: 10px
    }
    .loginfrm {
        width: 100%
    }
    #content #login {
        font-family: FaricyNew, Arial, sans-serif;
        text-align: center
    }
    #content #login .loginfrm input {
        border: none!important;
        text-indent: 10px;
        width: 100%;
        border-radius: 5px;
        color: #333;
        font-size: .9em;
        margin-bottom: 5px;
        padding: 5px;
        box-sizing: border-box
    }
    #content #login .loginfrm input.btn {
        width: 36%;
        font-size: 1.25em;
        height: 35px;
        background:#b91213;
        background-clip: border-box;
        background-origin: padding-box;
        border: none;
        color: #FFF;
        padding: 0;
        margin-bottom:0;
        width:100%!important;
        border:1px solid #6b0606
    }
    .navCustomer {
        height: 204px!important;
        border: 1px solid #ccc;
        -moz-border-radius: 5px;
        border-radius: 5px
    }
    .navCustomer.shiftNav {
        height: auto!important
    }
    .navCustomer li {
        width: 14.1%!important
    }
    .navCustomer a {
        width: 45px!important;
        height: 45px!important
    }
    .navCustomer.shiftNav li {
        width: 15.1%!important
    }
    .row.history .status-bg a {
        width: 16%;
        margin-right: 3px
    }
    .row.history .status-bg .date-pick {
        width: 77%!important
    }
    .row.history .six.columns input.srch-icon-bttn {
        width: 40px;
        height: 40px
    }
    #content .row.calendar-panel .status-bg a {
        width: 16%;
        margin-right: 3px
    }
    #content .row.calendar-panel .status-bg .date-pick {
        width: 77%!important
    }
    #content .row.calendar-panel .one.columns input.srch-icon-bttn {
        width: 44px;
        height: 44px
    }
    #content .row.calendar-panel .selectWrapper {
        height: 44px
    }
    .dealer-cash .row .column,
    .dealer-cash .row .columns {
        float: left
    }
    .dealer-cash .columns {
        margin-bottom: 5px
    }
    .row.custom-columns .four.columns,
    .row.custom-columns .one.columns,
    .row.custom-columns .three.columns {
        width: 100%
    }
    .popupPanelShow {
        width: 45%
    }
    .open-shift #main-panel .left-panel,
    .open-shift #main-panel .right2-panel {
        float: none;
        width: 100%
    }
    .open-shift #main-panel section ul>li {
        padding: 0 0 5px
    }
    .titleBox {
        width: 62%;
        left: 50%;
        margin-left: -31%
    }
    .dealer-cash .basic-info .row .seven.columns {
        width: 23.68%
    }
    .dealer-cash .basic-info .row .five.columns {
        width: 75.92%
    }
    #content .swiper-container #login .FAQ li {
        text-align: left
    }
}
@media handheld,
only screen and (max-width: 1200px) {
    #main-panel .right-panel h2 {
        font-size: 1.2em;
        margin: 9px 0
    }
}
@media handheld,
only screen and (min-width: 1280px) {
    #dp-popup {
        box-shadow: 0 3px 2px #333;
        -webkit-box-shadow: 0 3px 2px #333
    }
    table.jCalendar td {
        padding: .5em .8em!important
    }
    div.dp-popup h2 {
        padding: 5px!important;
        font-size:16px!important
    }
    div.dp-popup div.dp-nav-next,
    div.dp-popup div.dp-nav-prev {
        top: .6em!important
    }
    #dp-popup:before {
        content: "";
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #c41617;
        position: absolute;
        top: -10px;
        left: 5px
    }
}
@media handheld,
only screen and (min-width: 320px) and (max-width: 640px) {
    footer div.first {
        float: none!important;
        width: 100%!important
    }
    footer div.mid {
        float: none!important;
        width: 100%!important;
        padding-left: 1%
    }
    footer div.last {
        float: none;
        text-align: left;
        padding-left: 1%
    }
    #content .infoBox,
    .slideNav {
        display: none
    }
    header {
        height: 65px;
        background: 0 0
    }
    #content #login {
        width: 100%;
        clear: both
    }
    #content .loginfrm {
        float: none;
        text-align: left;
        width: 100%!important;
        padding-top: 0
    }
    .FAQ {
        width: 100%!important;
        float: none
    }
    .login-info li.username {
        font-size: .8em;
        display: none
    }
    .loginpage .columns {
        width: 100%!important;
        margin: 0
    }
    header .logo {
        width: 50%;
        top: 7px
    }
    header aside {
        width: 60%;
        padding: 5px 0 0
    }
    .type1-text {
        width: 98%
    }
    .type3-text {
        width: 30%
    }
    footer div.first {
        position: relative;
        text-align: center
    }
    footer div.mid {
        text-align: center!important
    }
    #main-panel .type2-text,
    #main-panel .type3-text {
        height: auto!important
    }
    #main-panel .CustomerCapture1 .type4-text {
        width: 49.6%
    }
    .CustomerCapture1 span.contCode,
    .CustomerCapture1 span.nocontCode {
        width: 74%
    }
    .right-panel #demographyHold .demographySection {
        width: 100%
    }
    .selectWrapper,
    .selectWrapper select {
        height: 46px
    }
    .CustomerCapture1 .column,
    .CustomerCapture1 .columns {
        margin-left: 0
    }
    .passw-expire {
        display: none!important
    }
    .ddlListBox {
        height: 210px
    }
    .ddlwrapper {
        height: 210px!important
    }
    .titleBox {
        height: auto;
        padding-bottom: 8px;
        margin-top: -125px
    }
    .titleBox label {
        padding: 14px
    }
    #wrapperMetro {
        position: relative;
        width: 100%!important
    }
    #wrapperMetro #sliderMetro {
        width: 100%!important;
        height: 2000px
    }
    #wrapperMetro .TilePane {
        float: none;
        width: 100%;
        padding: 0 1em
    }
    .mtile {
        float: none;
        width: 100%;
        height: auto;
        padding-bottom: 15px
    }
    .mtile span:first-child {
        width: 35%
    }
    .mtile span.mid {
        width: 40%
    }
    .mtile>img {
        margin-top: 15px
    }
    .charmCloser {
        bottom: auto;
        top: 10px;
        left: 0
    }
    .charmBase {
        width: 100%
    }
    .dealerPanel h2,
    .searchPanel h2 {
        font-size: 1.2em
    }
    .LandingWarning {
        display: none!important
    }
    .ddlscroller li {
        height: 35px;
        line-height: 35px;
        background-position: 13px 10px
    }
    #custInfo .boxStripe-red {
        margin-bottom: 10px
    }
    #custInfo .boxStripe-green {
        background: 0 0
    }
    .gridspace {
        margin-top: 25px
    }
    .gridspace .fluidGrid.sHeight4 {
        height: auto
    }
    #ulList .boxPadlt2per {
        padding-left: 0!important
    }
    #ulList .listItemLabel {
        display: block
    }
    #ulList .columns {
        width: 100%!important;
        margin: 0!important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding-left: 0!important
    }
    .grid-cover>.gridUl,
    .gridspace>.blkVigBg.topbdrRad {
        display: none
    }
    .navCustomer {
        height: auto!important;
        display: none;
        border: 1px solid #ccc;
        -moz-border-radius: 5px;
        border-radius: 5px
    }
    .navCustomer li {
        width: 50%!important
    }
    .navCustomer a {
        vertical-align: middle
    }
    .recNavCustomer {
        display: block;
        position: relative
    }
    .recNavCustomer.gryBg1 {
        background: #cc031c;
        background: -moz-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(204, 3, 28, 1)), color-stop(52%, rgba(190, 8, 27, 1)), color-stop(53%, rgba(170, 14, 25, 1)), color-stop(100%, rgba(170, 14, 25, 1)));
        background: -webkit-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: -o-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: -ms-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: linear-gradient(to bottom, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#cc031c', endColorstr='#aa0e19', GradientType=0);
        color: #fff
    }
    .recNavCustomer.MenuArrow img,
    .recNavCustomer.arrowDwn img {
        position: absolute;
        top: 4px;
        right: 0;
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -webkit-transform: rotate(270deg)
    }
    .recNavCustomer.MenuArrowDwn img {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    .griddata>li {
        padding: 5px 0
    }
    .icoText {
        margin: 0
    }
    .shiftSearch .columns,
    .status-bg .columns {
        float: left
    }
    #content .row.status-bg .three.columns {
        width: 22.45%
    }
    .history .three.columns {
        width: 42.45%
    }
    .history .six.columns {
        width: 11%
    }
    .history .dp-choose-date {
        width: 19%
    }
    .history .date-pick {
        width: 78%!important
    }
    .history input.srch-icon-bttn {
        width: 100%;
        height: 41px
    }
    .historyList {
        height: auto!important
    }
    .corCutBox2 {
        padding: 20px 10px 0 70px
    }
    .popContent .columns {
        width: auto!important
    }
    .titleBox {
        width: 90%;
        left: 5%;
        margin-left: 0
    }
    #content .row.history.status-bg a {
        width: 18%;
        margin-right: 3px
    }
    #content .row.history.status-bg .date-pick {
        width: 77%!important
    }
    #content .row.history .six.columns input.srch-icon-bttn {
        width: 40px;
        height: 40px
    }
    #content .row.calendar-panel .status-bg a {
        width: 18%;
        margin-right: 3px
    }
    #content .row.calendar-panel .status-bg .date-pick {
        width: 77%!important
    }
    #content .row.calendar-panel .one.columns input.srch-icon-bttn {
        width: 40px;
        height: 40px
    }
    #content .row.calendar-panel .selectWrapper {
        height: 44px
    }
    .device #POPcontent #POPmain-panel .listpopHold {
        top: 0!important
    }
    #main-panel section ul>li input[type=number],
    #main-panel section ul>li input[type=text] {
        padding: 5px 5px 5px 20px
    }
    .dealer-cash .corCutBox2 {
        padding-left: 80px
    }
    .dealer-cash .blkVigBg.topbdrRad {
        display: none
    }
    .navCustomer.shiftNav li {
        width: 18.1%!important
    }
    .statusIcon {
        position: absolute;
        top: 2px;
        left: -15px;
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        width: 85px;
        height: 50px;
        vertical-align: middle;
        font-family: arial;
        font-weight: 700;
        text-transform: capitalize;
        color: #fff
    }
    .column-space {
        margin-top: 55px!important
    }
    .column-space .row.txtover span {
        padding: 0 10px
    }
    .popupPanelShow {
        width: 50%
    }
    .customCombo {
        margin-bottom: 5px!important
    }
    .calendar-panel .customCombo {
        margin-bottom: 0
    }
    .open-shift #main-panel .left-panel,
    .open-shift #main-panel .right2-panel {
        float: none;
        width: 100%
    }
    .open-shift #main-panel .right2-panel .fllt,
    .open-shift #main-panel .right2-panel .flrt {
        float: none!important;
        width: 100%
    }
    .w40,
    .w60 {
        width: 100%!important
    }
    .currShiftBox span {
        padding: 0!important
    }
    .DealerCashlist #ulList .row.txtover {
        text-indent: 10px
    }
    #content .swiper-container #login .FAQ li {
        text-align: left
    }
}
@media handheld,
only screen and (min-width: 120px) and (max-width: 480px) {
    header .logo {
        width: 50%;
        top: 5px
    }
    footer div.last {
        display: none
    }
    footer div.first {
        text-align: center;
        float: none;
        bottom: 0
    }
    footer div.mid {
        text-align: center!important;
        display: none
    }
    #content .infoBox,
    .slideNav {
        display: none
    }
    .search-icon {
        display: block;
        cursor: pointer;
        z-index: 2
    }
    .searchBlock,
    .searchPanel .search,
    .searchPanel h2 {
        display: none
    }
    .searchPanel .search {
        top: 30px
    }
    .searchPanel .RecentSrch {
        display: none!important
    }
    .dealerPanel {
        padding-top: 14px
    }
    .open-shift #main-panel .right2-panel .fllt,
    .open-shift #main-panel .right2-panel .flrt {
        float: none!important;
        width: 100%
    }
    .titleBox {
        width: 96%;
        left: 50%;
        margin-left: -48%;
        position: relative
    }
    .titleBox .ddlCloseBt {
        position: absolute;
        right: 2px;
        top: 2px
    }
    .osnNotification {
        display: none
    }
}
@media handheld,
only screen and (min-width: 70em) {
    .listpopHold .row {
        min-width: initial
    }
}
@media handheld,
only screen and (max-height: 615px) {
    .searchPanel {
        padding-bottom: 0
    }
}
@media screen and (orientation: portrait),
only screen and (min-width: 480px) and (max-width: 767px) {
    .customddlCWidth div.customCombo {
        width: 49%
    }
    #main-panel .right-panel {
        width: 100%;
        float: left
    }
    #main-panel .type2-text {
        width: 67.7%;
        font-size: 1.1em
    }
    #main-panel .type3-text {
        width: 25%;
        font-size: 1.1em
    }
    #main-panel .type4-text {
        width: 49%;
        margin: 0!important;
        height: 44px;
        font-size: 1.1em!important
    }
    #main-panel .type8-text {
        width: 88%;
        font-size: 1.1em
    }
    #main-panel section ul>li input[type=text] {
        padding: 11px 5px 11px 20px
    }
    #main-panel section ul .contCode input[type=tel],
    #main-panel section ul .contCode input[type=text] {
        width: 87.5%;
        padding-bottom: 11px
    }
    .nocontCode input.type2-text {
        width: 100%!important
    }
    #main-panel section ul span.contCode input[type=text] {
        width: 87%
    }
    .contCode span,
    span.contCode span {
        height: 44px;
        line-height: 45px
    }
    span.contCode,
    span.nocontCode {
        width: 72%
    }
    .CustomerCapture input.type3-text {
        width: 24%
    }
    #main-panel section ul.status-bg li .dp-choose-date {
        height: 45px!important;
        width: 42px!important
    }
    #main-panel section ul.status-bg li input.srch-icon-bttn {
        height: 50px!important;
        width: 50px!important
    }
    #main-panel section ul.status-bg li .custom-select1 select {
        height: 43px!important
    }
    #main-panel .blackBtn,
    #main-panel .gryBtn,
    #main-panel .redBtn {
        height: 46px!important;
        background-size: 100% 46px!important;
        font-size: 1.2em!important;
        border-radius: 7px
    }
    .currShiftBox input {
        width: 48.7%!important
    }
    #main-panel section ul.status-bg li select {
        height: 23px!important
    }
    #main-panel section ul.status-bg li .custom-select1 {
        width: 90%
    }
    #main-panel section ul.status-bg li:last-child {
        width: .33%!important;
        margin: -2px 0 0 8px
    }
    #main-panel section ul.status-bg li .type5-text {
        width: 60%!important
    }
    #main-panel section ul.shiftSearch li .type4-text {
        width: 45%!important;
        height: auto!important
    }
    #main-panel section ul.shiftSearch li {
        width: 16.5%!important
    }
    .scroll-area>li .camera {
        width: 8%!important
    }
    .scheduleInfo .colorNote,
    .scheduleInfo .colorNote span {
        margin: 0!important
    }
    #content #login .loginfrm input.btn {
        background-size: 100% 44px;
        height: 44px
    }
    .Column2Box>li .headRow {
        height: 78px!important
    }
    .Column2Box>li .headRow li {
        margin: 6px 0!important
    }
    .Column2Box>li .headRow li p {
        float: left!important
    }
    .Column2Box>li .headRow li .vip {
        top: 0!important
    }
    .Column2Box>li .headRow li h2 {
        width: 95%!important;
        white-space: nowrap
    }
    .topTxtBar {
        font-size: 1.3em
    }
    .icon-section {
        width: 100%
    }
    .icon-section .iconul li {
        margin-right: 10px
    }
    #main-panel .problem-section .type2-text {
        height: auto!important
    }
    #custInfo .row .six.columns {
        width: 100%;
        margin-bottom: 5px;
        margin-left: 0
    }
    #custInfo .detailRow .row .column,
    #custInfo .detailRow .row .columns {
        float: left
    }
    #custInfo .columns {
        margin-left: 0
    }
    .grid-cover .row .six.columns {
        width: 100%;
        margin-bottom: 5px;
        margin-left: 0
    }
    .grid-cover .row .column,
    .grid-cover .row .columns {
        float: left
    }
    .grid-cover .columns {
        margin-left: 0
    }
    .navCustomer {
        height: auto!important;
        display: none
    }
    .navCustomer li {
        width: 50%!important
    }
    .navCustomer a {
        vertical-align: middle
    }
    .recNavCustomer {
        display: block;
        position: relative
    }
    .recNavCustomer.gryBg1 {
        background: #cc031c;
        background: -moz-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(204, 3, 28, 1)), color-stop(52%, rgba(190, 8, 27, 1)), color-stop(53%, rgba(170, 14, 25, 1)), color-stop(100%, rgba(170, 14, 25, 1)));
        background: -webkit-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: -o-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: -ms-linear-gradient(top, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        background: linear-gradient(to bottom, rgba(204, 3, 28, 1) 0, rgba(190, 8, 27, 1) 52%, rgba(170, 14, 25, 1) 53%, rgba(170, 14, 25, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#cc031c', endColorstr='#aa0e19', GradientType=0);
        color: #fff
    }
    .recNavCustomer.MenuArrow img,
    .recNavCustomer.arrowDwn img {
        position: absolute;
        top: 4px;
        right: 0;
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -webkit-transform: rotate(270deg)
    }
    .recNavCustomer.MenuArrowDwn img {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
}
html[dir=rtl] .column,
html[dir=rtl] .columns {
    float: right;
    margin: 0 3.4% 0 0
}
html[dir=rtl] .shiftSearch .columns,
html[dir=rtl] .status-bg .columns {
    margin: 0 1% 0 0
}
html[dir=rtl] .colmarLT17 .columns {
    margin-right: 1.7%
}
html[dir=rtl] .column:first-child,
html[dir=rtl] .columns:first-child {
    margin-right: 0
}