/* legend:
.m- means will be present in both desktop and mobile but will only activate when ensted inside .mobile-view
-tiny  40%
-small 40%
-wide  60%
-full  100%

size adjustment
-sm- < 650 < -md- < 992
*/

input {box-sizing: border-box; }
.none {background-color: white;}

/* Menu Related */
body { width: 100%; height: 100%; }
.slideout-menu { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; width: 256px; overflow-y: auto; overflow: -moz-scrollbars-none; -webkit-overflow-scrolling: touch; display: none; }
.slideout-panel { position:relative; z-index: 1; }
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel { overflow: hidden; }
.slideout-open .slideout-menu { display: block; }

/* Login */
#frmLogin .loginrememberme .forgot{ display: inline-block; float: right; }
/*.fixedwidth { min-width: 700px !important; }*/
footer .logo{ bottom: 15px; }

#user-menu { display: none; position: absolute; left: auto !important;  background-image: linear-gradient(145deg, #1D1F20, #404348)!important; border-bottom: 5px solid #c4272a; color: white; height: 100%; }
#user-menu p { padding: 15px; }
#user-menu .username{ display: block; margin-top: 10px; margin-bottom: 15px; font-size: 18px; }
.btn-logout { display: block; padding: 7px 15px; font-weight: bold; background-color: #c4272a; color: #FFFFFF; text-decoration: none; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.btn-desktopmode { display: block; padding: 7px 15px; background-color: #c6c6c6; color: #4f4f4f; font-weight: bold; text-decoration: none; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}


div.desktopnav { display: block; }
button.show-mobile-nav { background-image: url("../img/icon-menu2.png");background-repeat: no-repeat; background-position: center; background-size: 23px 19px;float: left; height: 25px; width: 30px;padding: 0px; margin-top: 12px;font: bold 20px Sans-Serif; background-color: transparent; color: black;}
.mobile-view .show-mobile-nav { display: inline-block; margin-top:20px; }
.desktop-view .show-mobile-nav { display: none; }

/*.desktop-view #content { min-width: 700px;} */
#menu {margin: auto;}
#width-detector { display: none; width: 0px; height: 0px;}

/*button.show-mobile-nav { display: none; font: bold 20px Sans-Serif;}*/
.panel {  min-height: 100%;  background-color: #fff;}
#mobile-menu {background-image: linear-gradient(145deg, #1D1F20, #404348)!important; border-bottom: 5px solid #c4272a; color: white; height: 100%; display: none;}
#mobile-menu::-webkit-scrollbar { display: none; }
#mobile-menu a:hover {color: black !important;}
#mobile-menu #client { margin-top: 18px; margin-bottom: 19px; margin-left: 60px;}
#mobile-menu .headerbar {background-color: #c4272a; width: 100%;}
#mobile-menu .departments .favmenutarget img { width: 15px; height: 15px; margin-left: -5px; margin-right: 12px;}
#mobile-menu .departments { padding: 0px; position: relative; height: 100%;}
#mobile-menu .departments li{-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;display: block;border: 0px;margin: 0px;}
#mobile-menu .departments li a, #mobile-menu .no-data {display: block; padding: 12px 12px 12px 20px;border: 0px; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(0,0,0,0.06);}
#mobile-menu .departments li a.on {padding: 12px 12px 12px 20px; display: block;border-left: 0px solid #c4272a;background-color: rgba(255,255,255,0.9); color: black !important; }
#mobile-menu .departments img{height: 20px;width: 20px;display: inline-block;float: left;margin-right: 20px;}
#mobile-menu .depitem {background-color: #444444;}
#mobile-menu .depitem h3 a{background-color: #2b2d30;}
#mobile-menu li { vertical-align: middle; }
#mobile-menu li, #mobile-menu a {color: #fff; font-size: 12px;}
#mobile-menu li a span { padding: 3px 5px; line-height: 1.3em; display: inline-block; position: static; float: right;}
#mobile-menu .moduleMenu{ height: 100%; display: none; border-left: 2px solid white; -webkit-font-smoothing: antialiased;background-color: #2b2d30;box-sizing: border-box;color: rgb(0, 0, 0);font-family: Roboto, sans-serif;font-size: 16px;height: 100%;left: 60px;list-style-image: none;list-style-position: outside;list-style-type: none;position: absolute;text-align: left;top:0px;width: 196px;z-index: 20;overflow: auto;}
#mobile-menu .result-selected { color: #ccc !important; }
#mobile-menu img.mgmtlogo { display: inline-block; width: 40px; height: 40px; float: left; margin-left: 10px; margin-top: 13px;}
.favmenutarget {color: white;}
.menufillclose{ height: 100%; width: 100%; background-color: transparent;}
/*#content { margin-left: 0px !important; border-left: 0px !important;  }*/
.modules a { overflow:hidden; word-wrap: break-word; }
#mobile-menu .input li {color: black;}

.mobile-view { touch-action: manipulation; }
.mobile-view h3 { font-size: 18px; padding-bottom: 10px; border-bottom: 2px solid #c4272a; margin-bottom: 0px;}
.mobile-view .col h3 {margin-bottom: 10px;}
.mobile-view .ltr label > em, .mobile-view .ltr .label > em { float: left; word-wrap: break-word; text-align: right; width: 33%; box-sizing: border-box; line-height: 18px; padding: 4px 15px 4px 0px;}
.mobile-view .menu-header {border-top: 1px solid rgba(255,255,255,0.05);height: 66px;}
.mobile-view label > em > button {margin: 0px !important;}
.mobile-view #main-panel { position: relative; }
.mobile-view .chosen-container, #mobile-menu .chosen-container { width: 100% !important; }
.mobile-view textarea {padding: 7px; box-sizing: border-box;}

.mobile-view input {box-sizing: border-box; }
.mobile-view .tabs { width: 100%; display: block; white-space: nowrap; font-size: 12px; overflow: auto;}
.mobile-view .tabs > li {display: inline-block;padding: 10px;}
.mobile-view .tabs li.nav-links ul { top: 40px; right: -60px; }
.mobile-view input[type=text].numeric {box-sizing: border-box;}
.mobile-view .lock-offset { padding-right: 40px;}
.mobile-view .results td { line-height: 3em;}
.mobile-view #content { margin: 10px 20px; padding: 0px; border: 0px;}
.mobile-view form.search { margin: 0px; margin-top: 0px; padding: 15px 0px 0px 0px; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); border-bottom: 1px dashed rgb(198, 198, 198); }
.mobile-view .stackedinput { margin-bottom: 7px;}
.mobile-view .ltr .label span.col .aside.btw {padding: 5px 10px; font-size:1.5em; box-sizing: border-box; width: 17%; text-align: center;}
.mobile-view button.btn-all{  margin: 0px; margin-top:15px; margin-left: auto; padding:9px; }
.mobile-view button.search{ float: right;  background-color: #c4272a; width: 100%;  margin: 0px; padding:9px; }
.mobile-view fieldset.col { display: block; min-width: 250px;}
.mobile-view .tabs { display: block; height: auto; }
.mobile-view .input input[type=text], .mobile-view .input input[type=email],.mobile-view .input input[type=password], .mobile-view .input .chosen-choices { padding: 7px; }
.mobile-view .chosen-choices { padding-right: 30px;}
.mobile-view aside {top: 7px; }
.mobile-view aside.inside button {height: 25px;  width: 25px; padding-top: 0px;}
.mobile-view select {-webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';}

.mobile-view span.input {padding: 0px;}
.mobile-view header { height:66px; min-width: 200px; overflow: visible; text-align: center; margin: 0px 0px 10px 0px; padding: 0px 15px 0px 15px; border-bottom: 0px;}
.mobile-view header h1 {margin-top: 20px; width: 100% !important;}
.mobile-view span > select { padding: 7px; height: 34px;}
.mobile-view label aside .lock, .mobile-view label aside .lock:hover, .mobile-view .label aside .lock, .mobile-view .label aside .lock:hover { width: 30px; height: 30px;}
.mobile-view header {text-align: center;}
.mobile-view .show-user-menu { float: right; margin: 20px 0 0 0; padding: 0px;height: 25px;width: 40px;background-color: transparent;text-align: center;vertical-align: middle;}
.mobile-view .col.year {width: 34% !important;padding: 0px !important;}
.mobile-view .loginbox input[type=email], .mobile-view .loginbox input[type=password]{padding: 7px;box-sizing: border-box;font-size: 16px;}
label.mcols2 span.col, .ltr .label.mcols2 span.col {width: 30%;padding: 0 3% 0 0;}
label.mcols2 span.col:last-child, .ltr .label.mcols2 span.col:last-child {padding: 0 !important;}
.mobile-view button { padding: 10px 20px;}
.mobile-view .buttons { padding: 10px 10px; border-bottom: 0px !important; text-align: center;}
.mobile-view .msg-nothing{ padding: 20px;font-size: 1.2em;text-align: center; }
.mobile-view h2{ text-align: center; padding: 17px 17px; border-bottom: 1px dashed rgb(198, 198, 198); line-height: 40px;  height: 40px;}

/* Mobile Accordian */
.mobile-view .filterToggle { text-align: center; font-size: 20px;padding-top: 10px;padding-bottom: 10px;background-color: rgba(0,0,0, 0.05);border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;-webkit-border-radius: 0px 0px 5px 5px;}
.mobile-view h2 {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.mobile-view h2, .mobile-view .filterToggle{background-color: rgba(0,0,0, 0.05);}
.mobile-view .show-user-menu span.glyphicon { font-size: 16px; color: #969696; margin: auto; display: block;}
.filterToggle span.glyphicon { display: block;}
.glyphicon{ position: absolute; z-index: -1;}/* fix glyph icon rendering above everything */
#mobile-menu .filterToggle .glyphicon { display: block;}
.collapsible {display: none;max-height:0px;}
.accordion_css3_support {display: block;max-height: 0;overflow: hidden;-webkit-transform: translate3d(0,0,0);-webkit-transition: all 0.7s ease-in-out;transform: translate3d(0,0,0);transition: all 0.7s ease-in-out;-webkit-backface-visibility:hidden;-webkit-perspective: 1000;}
.collapsible.animated {max-height: 10000px;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

.mobile-view #menu { margin-top: 20px; }
.mobile-view .loginbox { width: 80% !important; max-width: 300px;  min-width: 150px;}
.mobile-view .bckdrop {background-color: rgb(246, 246, 246);border-bottom: 1px dashed rgb(198, 198, 198);}
.mobile-view .bckdrop .lock-offset {padding-top: 15px;}
.ui-datepicker-year, .ui-datepicker-month{display: inline-block;line-height: normal;width: 35%;height: auto;}


.fullcol em {font-style:normal;display: block;padding-top: 3px;padding-bottom: 3px;}
.fullcol{float: left;width: 95%;padding-left: 5%;display: block;}
button.btn-6{width: 48%;margin: 0px 1% !important;display: inline-block;text-align: center;height: 100%;}
button.btn-4{width: 30%;margin: 5px !important; /*should be %*/display: inline-block;text-align: center;}


form.mobileProductSearch span.input {padding: 7px;}
form.mobileProductSearch td {vertical-align: middle;}
form.mobileProductSearch {padding: 0px;   margin: 0px 10px;}
form.mobileProductSearch h3 {margin: 16px 0px 16px 0px;   }
form.mobileProductSearch .buttons.mobile button{ padding: 9px !important; }
#frmProductSearch label{ padding: 0px !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.popup.scroll form.mobileProductSearch .buttons { padding: 10px; padding-bottom:0px; box-sizing: border-box;}
.popup.scroll form .buttons {width: 100%; box-sizing: border-box;}
.mobile-view .buttons button, .mobile-view .buttons a {padding: 10px 20px;}
.mobile-view td { word-wrap: break-word; /*white-space:nowrap;*/ }
.mobile-view .spreadsheet td { white-space:nowrap; }


.mobile-view td input { box-sizing: border-box; }
.mobile-view input[type=number] { padding: 7px; box-sizing: border-box; }
.mobile-view header h1 { background-size: contain; background-position: 50% 50%; }
.mobile-view .col .m-full{ width: 100% !important;}
.mobile-view span.col.m-small {width: 40% !important;}
.mobile-view h3 { margin-bottom: 15px;}
.mobile-view .cols3 fieldset.col { width: 45%; padding-right: 5%;}
.mobile-view .cols2 fieldset.col { width: 45%; padding-right: 5%;}
.mobile-view span.input.small { box-sizing: border-box;  width: 60%; box-sizing: border-box;}
.mobile-view span.input.file-button { padding: 7px !important; }

.mobile-view .m-full { width: 100% !important;}
.mobile-view .m-full.images li {width: 100%; height: 100%;}
.mobile-view .m-wide { width: 60% !important;}
.mobile-view .m-small { width: 40% !important;}
.mobile-view .m-tiny { width: 30% !important;}
.mobile-view .m-left { text-align: left !important; }
.mobile-view .m-center { text-align: center !important; }
.mobile-view button.m-center { margin: auto; }


.mobile-view .col.small { width: 50%;}
.col.small, .mobile-view .col.m-small { width: 40%; }/*!important*/
em.wide, .mobile-view em.m-wide { width: 60% !important; }
.mobile-view .h3-links { margin-bottom: 1em; display: block;}

.mobile-view .spreadsheet {margin-bottom: 15px;}
.mobile-view .spreadsheet input[type=number] { padding: 0px;}

/*remove selection color on mobile*/
.mobile-view *::selection, .mobile-view *::-moz-selection {background-color:transparent;}
.mobile-view h1, .mobile-view h2, .mobile-view h3, .mobile-view li { webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

#dashboard_regions_chart .ltr {margin: auto;}
.mobile-view .worksheet-fixed-scroll, .mobile-view .worksheet-scroll{ overflow:inherit; max-height: 10000px;}
.mobile-view .worksheet-scroll { overflow: inherit; }
.menu-container{ text-align: center; width: auto;}
#menu { text-align: left; }

.mobile-view .tabs .nav-arrows {
    text-align: center;
    box-sizing: border-box;
    width: 15%;
    margin: 0px;
}
.mobile-view .tabs .nav-arrows:first-child {
    margin-left: 2%;
}
.mobile-view .tabs .nav-arrows:last-child {
    margin-right: 2%;
}
.mobile-view .tabs .nav-links {
    text-align: center;
    margin: 0px;
    width: 66%;
    box-sizing: border-box;
}
.mobile-view .cols3 fieldset.col { width: 100%; }
.mobile-view .cols2 fieldset.col { width: 100%; }


@media (max-width:992px){
    #width-detector { width:992px; }
    .mobile-view #content, .mobile-view header{min-width: 240px;}
    button.show-mobile-nav { display: inline-block; }
    footer p { font-size: 0.5em; vertical-align: text-top; }
    footer { overflow: hidden; margin: 0px;  }
    .loginbtn { width: 100%; padding:7px; margin-top: 5px; }
    .loginbox { width: 80% !important; }
    /*#menu { text-align: center; }*/
    #menu li { width: 145px; display:inline-block; *display:inline; /*IE7*/ *zoom:1; /*IE7*/ float: none !important; background-size: 97px 33px;}
    #menu li figure { width: 140px; }
    #menu li figure figcaption{ width: 140px; background-size: 100% auto; }
    header p {line-height:28px; top:15px;}
    header h1 a {width:100%;}
    .mobile-view .price { min-width: 0 !important; }

    .mobile-view .col .m-full{ width: 100% !important;}
    .mobile-view span.input.small input { box-sizing: border-box; }
    .cols2 > .col > .cols2 > .col {float:left;padding:0;width:100%;}
}

@media (max-width:650px){
    #width-detector { width:650px; }
    footer p { font-size: 0.4em; right: 220px; }
    .mobile-view td { min-width: 25px; }
    .mobile-view .cols3 fieldset.col { width: 100%; }
    .mobile-view .cols2 fieldset.col { width: 100%; }
    .mobile-view .m-sm-full { width: 100% !important;}
    .mobile-view .m-sm-wide { width: 60% !important;}
    .mobile-view .m-sm-small { width: 40% !important;}
    .mobile-view .m-sm-hide { display: none;}

}


@media (max-width:500px){
    #width-detector { width:500px; }
    .mobile-view header h1 {width: 60%;}
    #menu li{ margin:0 25px 25px 25px; }
    header { height: 63px; }
    header p { top: 36px; left: 0px; right: auto; margin-left: 45px;}
    footer p { font-size: 0.4em; right: 160px; }
    footer .logo{ height: 15px;   width: 60px; bottom: 15px; background-size: contain; }
    footer .factor{ right: 80px; top: 20px;}
}

@media (max-width:450px){
    .mobile-view header h1 {width: 50%;}
    #width-detector { width:350px; }
    #menu li{ margin:0 12px 12px 12px;  width: 140px; background-size: 87px 29px; }
    #menu figure{ width: 130px !important; }
    #menu figcaption{ width: 130px !important; }
    footer p { font-size: 0.3em; vertical-align: text-top; }
    footer .logo{ height: 15px;   width: 60px; bottom: 15px; background-size: contain; }
}

@media (max-width:390px){
    #width-detector { width:390px; }
    #menu li{ margin:0 12px 12px 12px; width: 120px; height: 170px; background-position: center; background-size: 60px 20px; }
    #menu figure{ width: 120px !important; height: 110px !important; text-align:center;}
    #menu figure span{ background-size: 45px 45px;  height: 80px !important; width: 60px !important; margin: auto;}
    #menu figure figcaption{ top: 105px;}
    #menu figcaption{ width: 120px !important; }
    .mobile-view span.input.small input{ font-size: 9px; font-weight: bold;}
}

@media (max-width:350px){
    #width-detector{ width:350px; }
    #menu li{ margin:0 12px 12px 12px; width: 90px; height: 140px; background-position: center; background-size: 60px 20px; }
    #menu figure{ width: 90px !important; height: 90px !important; text-align:center;}
    #menu figure span{ background-size: 40px 40px;  height: 60px !important; width: 60px !important; margin: auto;}
    #menu figure figcaption{ top: 80px;}
    #menu figcaption{ width: 90px !important; }
    footer p { font-size: 0.3em; vertical-align: text-top; }
}