/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300;1,700&display=swap');
body, html {font-family:'Lato', sans-serif;}
body {display:flex;flex-direction:column;height:100%;}
h1,h2,h3,h4,h5,h6 {font-family:'Lato', sans-serif;text-transform:uppercase;font-weight:700;}
h3 {font-size: calc(.6rem + .8vw);}
h5 {font-size: calc(.6rem + .6vw);}
h1.main-login-text {font-size: calc(2.2rem + 2.2vw);}

/* TYPOGRAPHY & COLORS */
a {color:#666666;}
a:hover {color:#000;}
h4 > small {font-family: 'Lato', sans-serif;font-size: 15px;color: #222222;line-height: 1.5;text-transform: uppercase;}
p {color:#888888;}

/* HEADER */
.topbar {height:40px;background-color:#f7f6f5;position:fixed;width:100%;}
.search-product {border: none;background-color: rgba(255,255,255,0);}
.header {}
.header i {color:#009fde;}
#pagecontent{margin: 40px 0 0 40px;}
.parallax0 {/*margin-top:-40px;*/}
#pagecontent > script,#pagecontent > script::after,#pagecontent > script::before {box-sizing:content-box !important;display:none;}
@media only screen and (min-width: 768px) {#updateuser,#header1,#header2{/*margin-top:-40px !important*/}}

/* PAGE MARKETING */
#pageMarketing i {color:#009fde;}

/* FEATURED CATEGORIES */
.btn-cat {font-family: Lato;border-color: rgb(255, 255, 255);background-color:rgba(94, 74, 55,0.25)}
.btn-cat:hover {background-color:rgba(255,255,255,0.9);}

/* PRODUCT RIBBONS */
.ribbon{width:200px;} 
.ribbon.ribbon1{background:rgba(218,83,88,0.9);}
.ribbon.ribbon1::after{border-top-color: rgba(218,83,88,1);}
.ribbon.ribbon2{background:rgba(243,158,72,0.9);}
.ribbon.ribbon2::after{border-top-color: rgba(243,158,72,1);}
.ribbon.ribbon3{background:rgba(173,206,94,0.9);}
.ribbon.ribbon3::after{border-top-color: rgba(173,206,94,1);}
.ribbon.ribbon4{background:rgba(88,89,91,0.9);}
.ribbon.ribbon4::after{border-top-color: rgba(88,89,91,1);}

/* PRODUCT DETAILS LABELS */
.speciallabel {background-color:rgba(218,83,88,0.9);color:#fff;}
.displaylabel {background-color:rgba(243,158,72,0.9);color:#fff;}

/* Button Colors */
.btn-primary{background:rgba(0,159,222,0.9);border:1px solid rgba(0,159,222,0.9);color:#fff;}
.btn-primary:hover{background:rgba(0,159,222,1);border:1px solid rgba(0,159,222,1);color:#fff;}
.btn-danger{background:rgba(218,83,88,0.9);border:1px solid rgba(218,83,88,0.9);color:#fff;}
.btn-danger:hover{background:rgba(218,83,88,1);border:1px solid rgba(218,83,88,1);color:#fff;}
.btn-warning{background:rgba(243,158,72,0.9);border:1px solid rgba(243,158,72,0.9);color:#fff;}
.btn-warning:hover{background:rgba(243,158,72,1);border:1px solid rgba(243,158,72,1);color:#fff;}
.btn-success{background:rgba(173,206,94,0.9);border:1px solid rgba(243,158,72,1);color:#fff;}
.btn-success:hover{background:rgba(173,206,94,1);border:1px solid rgba(173,206,94,1);color:#fff;}
.btn-info{background:rgba(88,89,91,0.9);border:1px solid rgba(88,89,91,0.9);color:#fff;}
.btn-info:hover{background:rgba(88,89,91,1);border:1px solid rgba(88,89,91,1);color:#fff;}
a.btn.btn-primary.sbutton2 {color:#fff;}
#updateuser > div > button {padding-bottom:3.64px!important;padding-top:3.64px!important;}

/* LOCATION */
.list-employee {max-width:250px;}

/*Footer*/
#footer {margin-top:auto;padding:10px 0;}

/* OFFCANVAS PRODUCT MENU */
@media screen and (max-width: 767px) {
.row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; }
.row-offcanvas-right { right: 0; }
.row-offcanvas-left { left: 0; }
.row-offcanvas-right .sidebar-offcanvas { right: -60%; /* 6 columns */ }
.row-offcanvas-left .sidebar-offcanvas { left: -60%; /* 6 columns */ }
.row-offcanvas-right.active { right: 60%; /* 6 columns */ }
.row-offcanvas-left.active { left: 60%; /* 6 columns */ }
.sidebar-offcanvas { position: absolute; top: 0; width: 60%; /* 6 columns */ }
}

.switch-field input:checked + label {
 background-color: #009fde;
}
.arrows { cursor:pointer; color:#009fde; }

/* PIM HAMBURGER */
.hamburger-row {background-color:rgba(0,159,222,0.1)}
#sidebarMenu {height: 100%;position: fixed;left: 0;width: 40px;transition: transform 1250ms ease-in-out;background:rgba(0,0,0,1);z-index:9999999999999999999999999999999999999}
.icon-container {width:40px;padding:5px 0;display:flex;justify-content:center;align-content:center;}
.sidebarMenuInner li{list-style: none;color: #fff;text-transform: uppercase;font-weight: bold;/*padding: 5px 10px;*/cursor: pointer;border-bottom: 1px solid rgba(255, 255, 255, 0.10);/*height:100%;*/}
.openSidebarMenu {align-self: center;}
.sidebarMenuInner li a{color: #fff;text-transform: uppercase;font-weight: bold;cursor: pointer;text-decoration: none;}
.sidebarMenuInner li a:hover {color: #00a0df;}
input[type="checkbox"]:checked ~ #sidebarMenu {transform: translateX(0);width:200px;transition: transform 1250ms ease-in-out;height:100%;}
#openSidebarMenu {transition: all 1s;box-sizing: border-box;display: none;}
.sidebarIconToggle {transition: all 0.3s;box-sizing: border-box;cursor: pointer;position: relative;z-index: 99;width: 100%;height: 22px;width: 22px;margin-top:13px;margin-bottom:0px;}
.spinner {transition: all 0.3s;box-sizing: border-box;position: absolute;height: 3px;width: 100%;background-color: #00a0df;}
.horizontal {transition: all 0.3s;box-sizing: border-box;position: relative;float: left;margin-top: 3px;}
.diagonal.part-1 {position: relative;transition: all 0.3s;box-sizing: border-box;float: left;}
.diagonal.part-2 {transition: all 0.3s;box-sizing: border-box;position: relative;float: left;margin-top: 3px;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {transition: all 0.3s;box-sizing: border-box;opacity: 0;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {transition: all 0.3s;box-sizing: border-box;transform: rotate(135deg);margin-top: 8px;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {transition: all 0.3s;box-sizing: border-box;transform: rotate(-135deg);margin-top: -9px;}
.flyout-text {display:none;}
input[type="checkbox"]:checked ~ #sidebarMenu > ul > li > a > p.flyout-text {display:flex;transition: transform 1250ms ease-in-out;margin: auto 0;}
#sidebarMenu > ul > li > a > p.flyout-text {color:#FFF;}
#sidebarMenu > ul > li > a > p.flyout-text:hover {color:#888;}

/* icons */
.header i {color:#009fde;}
.header i:hover {color:#fff;}
.header i:active {color:#fff;}
.header i.icon-grayed {color:#e4e4e4;}
.icon-invisible {visibility: hidden;}

/* multiselect */
.multiselect {height: calc(1.5em + .75rem + 2px);padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

/* SWITCHES */
.switch-field label:first-of-type {border-radius: 4px 0 0 4px;}
.switch-field label {display: inline-block;width: 50px;background-color: #e4e4e4;color: rgba(0, 0, 0, 0.6);font-size: 14px;font-weight: normal;text-align: center;text-shadow: none;padding: 6px 14px;border: 1px solid rgba(0, 0, 0, 0.2);-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
.switch-field label {float: left;}

.rightButton{
 width:175px;
 text-align:left;
}
.rightTopButton{
 width:175px;
 text-align:left;
 margin-right:32px;
}