root { 
    display: block;
}
html {
    scroll-behavior: smooth;
}
body {
    padding: 0;
    margin: 0;
    background: #FFF;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    transition: 0.5s all;
}
body button,
.btn,
body a {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    text-decoration: none;
}

.btn:hover,
body button:hover {
    opacity: .8;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

body a:hover {
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

@media only screen and (max-width: 1920px) {
    div.content-wrap{
        width: 95%;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1200px) {
    div.content-wrap{
        width: 100%;
     }
}
@media only screen and (max-width: 600px) {
    div.content-wrap{
        width: 100%;
    }
}

/*################### GENERAL #################*/
.page-header{margin-bottom: 10px; margin-top: 10px;}
h1,h2,h3,h4,h5,h1.page-header{color:#003366;}
h2.page-header{text-align: center;}

.clearFix{clear:both;}
div.content-pads{padding: 10px;}
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}
.centered{text-align: center;}
.full-width{width:100%;}
.left-aligned{text-align: left;}
.right-aligned, .text-right{text-align: right !important;}
p.button-wrap{margin-top: 15px;}
table caption{font-weight: bold;font-size: 1.4rem; caption-side: top; margin-left: 10px;}
table caption span{float: right;}
div.list-group a span{float: right;}
table.borderless tr td{border: none;}
.rowBgOne{background: #dfdfdf;}
.rowBgTwo{background: #eee;}
.whiteBg{background: #fff;}
.boldTxt{font-weight: bold;}
table tr#rowActive{background:#DFF0D8;}
table tr.last{border-bottom: 1px solid #ddd;}
table thead tr{background:#aaa;}
table.hover-bg tbody tr:hover{background: #fff;}
table td.prop, table td.label-wrap{width: 30%; font-weight: bold;}
table td.propValue, table td.data-wrap{width: 70%;}
div.dataBorder{border: 1px solid #ddd; padding:3px; background: #F5F5F5;}
div.dataBg,div.messageBg{padding:2px; background: #fff;}
div.messageBg{background: #F2DEDE;padding-left: 10px; padding-right: 10px;color: #A94442;}
div.messageBg h3{margin-top: 5px; text-align: center;color: #A94442; text-transform: uppercase;}
div.messageBg div{padding-bottom: 5px;}
div.messageBg p.validity{text-align: right; font-weight: bold; font-size: 12px;}
p.buttons-wrap{text-align: center;}
p.buttons-wrap span{margin-left: 15px;}
form input.error,form select.error,form textarea.error,form checkbox.error{border: 1px solid #f00;}
fieldset{padding:10px;}
div.alert{margin-top: 15px; margin-bottom: 15px; text-align: center; font-weight: bold;}
.half-width{width: 50%; margin: 10px auto;}
.width-70{width: 70%; margin: 10px auto;}
table.width-60{width:60%;}
table.width-70{margin: 10px auto;}
.responsive{max-width: 100%;height: auto;}
.hide{display:none;}
label{font-weight: bold; margin-bottom: 5px; margin-top: 5px;}
label small{font-weight: normal;}
.checkbox-wrap label{display: inline-block; width: 100%; border-bottom: 1px solid #eee}
.checkbox-wrap input{
    float:left;
    display: inline-block;
    width: 20%;
    height: calc(1.5em + .75rem + 2px);
/*    height: 10px;*/
/*    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 
}
.checkbox-wrap span{float: left; width: 75%;}
.btn.dropdown-actions{padding: 0;}

@media only screen and (max-width: 768px) {
    .half-width{width: 100%; margin: 10px 0;}
    .width-70{width: 100%; margin: 10px 0;}
    table.width-60{width: 100%;}
    h1{font-size: 1.6rem;}
    h2{font-size: 1.5rem;}
    h3{font-size: 1.5rem;}
    h1.page-header{margin-left: 10px;}
    label.work-begin{margin-top: 10px !important;}
    #toggleContent{padding: 2px 10px;}
    table td.prop{width: 60%; font-weight: bold;}
    table td.propValue{width: 40%;}
}
.message{
    -webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
   -moz-border-radius: 3px; /* FF1-3.6 */
    border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    background: #D9EDF7;
    text-align: center;
    border: #09f;
    padding: 15px;
    width: 90%;
    margin: 15px auto;
}
.button,a.logout-button
{
   -webkit-border-radius: 1px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
   -moz-border-radius: 1px; /* FF1-3.6 */
   border-radius: 1px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */
  -webkit-background-clip: padding-box; 
   background-clip: padding-box;
   border: 1px solid #fff;
/*   border: 1px solid #069;*/
/*   -webkit-box-shadow: 0px 0px 4px 0px #000;  Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ 
   -moz-box-shadow: 0px 0px 4px 0px #000;  FF3.5 - 3.6 
   box-shadow: 0px 0px 4px 0px #000;  Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
/*   background-color:#39c;
    background-image: -webkit-linear-gradient(top, #09f, #39c);  */
   background-color:#003366;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#003366)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #003366, #003366); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image: -moz-linear-gradient(top, #003366, #003366); /* FF3.6 */
   background-image: -ms-linear-gradient(top, #003366,#003366); /* IE10 */
   background-image: -o-linear-gradient(top, #003366, #003366); /* Opera 11.10+ */
   background-image: linear-gradient(to bottom, #003366, #003366);       
   color:#fff;
   padding: 5px 15px;
   cursor:pointer;
   font-weight: normal;
   transition: all 0.5s;
}
.button:hover,a.logout-button:hover{
    -webkit-border-radius: 1px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
   -moz-border-radius: 1px; /* FF1-3.6 */
   border-radius: 1px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
   border: 1px solid #fff;
   color: #eee;
   background-color:#003e64;
}
a.button{text-decoration: none;}
label em,label span{font-style: normal; font-weight: normal;}

.vertical-form .form-group label{display: block; margin-bottom: 10px; font-weight: bold;}

/*DatePicker*/
.datepicker td, .datepicker th {
    width: 1.5em;
    height: 1.5em;
}

.page-menu{margin-bottom: 10px;}

#comp-menu-active a{font-weight: bold;}
/*######## LOGIN ################*/
.login-layout h2,.login-layout h1 {
    color: #003366;
    font-size: 2rem;
    letter-spacing: 2px;
    padding-bottom: 15px;
    text-align: center;
}
.login-layout h1{ text-transform: uppercase;padding-bottom: 10px;}

.login-layout {
    width: 50%;
    margin:5em auto;
    background:#eee;    
/*    background:rgba(171, 119, 157, 0.27);    */
    padding: 10px;
    transition: all 0.5s;
}
.login-wrap{
    background-color: #fff;
    padding: 42px 35px;
}
/*--//header--*/
/*--login--*/
input.ggg{
    width: 100%;
    padding: 15px 0px 15px 15px;
    border: 1px solid #aaa;
    outline: none;
    font-size: 16px !important;
    color: #555;
    margin: 14px 0px;
    background: none;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.login-layout span {
    font-size: 16px;
    color: #fff;
    float: left;
    width: 32%;
    margin-top: 8px;
}
.login-layout h6 {
    font-size: 16px;
    float: right;
    width: 37%;
    color: #fff;
    letter-spacing: 1px;
    margin-top: 8px;
    text-decoration:underline;
}
.login-layout a {
    color: #fff;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -o-transition:0.5s all;
    -moz-transition:0.5s all;
    -ms-transition:0.5s all;
}
.login-layout a:hover{
    color:#f0bcb4;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -o-transition:0.5s all;
    -moz-transition:0.5s all;
    -ms-transition:0.5s all;
}
.login-layout input[type="submit"] {
    padding: 12px 38px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    /*background: #f0bcb4;*/
    background-color: #003366;
    color: white;
    border: none;
    outline: none;
    display: table;
    cursor: pointer;
    margin: 45px auto 31px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
.login-layout input[type="submit"]:hover {
	background:#FC3158;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-o-transition:0.5s all;
	-moz-transition:0.5s all;
	-ms-transition:0.5s all;
}
.login-layout p a {
    color: #003366;
    padding: 10px;
}
.login-layout p a:hover {
    color: #fff;
}
.login-layout p {
    font-size: 17px;
    color: #fff;
    text-align: center;
}
/*--//login--*/
h4 input[type="checkbox"] {
    margin-right: 10px;
}
.login-layout h4{
    margin-right: 10px;
    color:#fff;
    font-weight:400;
    font-size:14px;
}
 /*--placeholder-color--*/
div.login-layout ::-webkit-input-placeholder {
	color:#555 !important;
}
div.login-layout :-moz-placeholder { /* Firefox 18- */
	color:#555 !important; 
}
div.login-layout ::-moz-placeholder {  /* Firefox 19+ */
	color:#555 !important;
}
div.login-layout :-ms-input-placeholder {  
	color:#555 !important;
}

@media (max-width: 768px) {
    p.half-width{width:90%; margin: 0 auto;}
    .login-layout {
        width: 100%; 
        margin: 0;
    }
    .login-layout h1{padding-bottom: 0px;}
}

/*################ HEADER ##########################*/
header
{
    margin:0 0 4px 0; 
    font-size:1.0rem; 
   /* background:#BDCB9A ; */
    background-color: #003366;
    padding:5px;    
    /*border-bottom: 2px double #eee;*/
    transition: all 0.5s;
}
header.header-bg{margin-bottom: 15px; padding-bottom: 10px;}

header div.header-right-gen{float:right; padding: 5px; margin-top: 10px;}
header div.header-left{float:left; width:15%;}
header div.header-right{float:right; width: 20%;}
header div.header-center{float:left;text-align: center; width: 65%;}
header div.header-center h1{color:#fff; margin-top: 10px;}
.header-right-wrap{padding: 10px 10px 5px 10px; color: #fff}

@media only screen and (max-width: 1200px) {
    header div.header-left{width:20%;}
    header div.header-right{ width: 30%;}
    header div.header-center{width: 50%;}
}
@media only screen and (max-width: 500px) {
    .header-right-wrap{background: none;padding: 5px}
    header div.header-left{width:30%;}
    header div.header-center{display: none;}
    header div.header-right{float:right; width: 70%;}
}
header div.header-left h1{margin:0;}
header div.header-left p{margin:0;}
header div.header-right a#dropdown-user{color:#fff;}

header div.header-right div.admin-info{float:left;}
header div.header-right div.admin-info p{margin: 5px 0; font-size:0.9rem;}
header div.header-right div.admin-info p.admin-name{margin: 0; font-size:1.0rem; font-weight: bold;}
header div.header-right p.logout-button-wrap{float:right; margin-left: 10px; margin-top: 8px;}
header a.logout-button{padding: 10px 15px; text-decoration: none; font-size:1.2rem; font-weight: bold; color: #fff;}
@media only screen and (max-width: 500px) {
    header div.header-left p{margin:8px 0 0 0;}
    header div.header-right div.admin-info{float:none;}
    header div.header-right div.admin-info p.admin-name{text-align: right;}
    header div.header-right p.logout-button-wrap{float:none; text-align: right; margin-bottom: 1px;}
    header a.logout-button{padding: 5px 5px; text-decoration: none; font-size:1.0rem; font-weight: bold;}
}

/*################ NAVI ################################*/
ul.languages li a span{margin-right: 10px;} 
.nav-link{font-size: 1.2rem;}
.navbar-nav .nav-link.active{text-decoration: underline;}
/*################ CONTENT ################################*/
div.pager-links{}
div.pagination{   
    float: right;
    padding-right: 10px;
    margin-top: 0;
}
div.pagination > span:first-child,div.pagination > a:first-child{border-left:1px solid #eee;}
div.pagination a,div.pagination span.active{border-top:1px solid #eee;border-right:1px solid #eee;border-bottom: 1px solid #eee; padding: 8px 10px;}
div.pagination a:hover{background: #eee;}
div.pagination span.active{background: #eee;}

ul.pagination .task-completed .page-link{
    background-color: #0f0;
    text-align: center;
    color: #000;
}
ul.pagination .task-open .page-link{
    background-color: #f00;
    text-align: center;
    color: #000;
}
ul.pagination .task-pending .page-link{
    background-color: #ffff00;
    text-align: center;
    color: #000;
}

#toggleButton{text-align: left;}
#toggleButton span{float:right;}
.status-wrap{padding-left: 15px;}

.company-sidebar{background-color: #eee; overflow-x: auto;}
.company-sidebar div.flex-shrink-0{padding: 1rem;}
.company-content-wrap{width: 100%; overflow-x: auto;}
/*.company-sidebar li a{display: inline-block;}*/
/*.company-sidebar i.fa{display: block;}*/

div.dashboard{margin-top: 25px; margin-bottom: 25px; text-align: center; padding: 0 10px;}
/*div.dashboard div{position: relative;}*/
/*div.dashboard div i{
    position: absolute;
    top: 5px;
    right: 25px;
    z-index: 100;
}*/
div.dashboard a.thumbnail{
    padding-top: 25px; 
    padding-bottom: 25px; 
    /*background: #003366;*/ 
    background: #eee; 
    -webkit-border-radius: 1px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
   -moz-border-radius: 1px; /* FF1-3.6 */
   border-radius: 1px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
   display: block;
   text-decoration: none;
/*   border: 1px solid #fff;*/    
}
div.dashboard a.thumbnail:hover{text-decoration: none; background: #fff;}
div.dashboard a.thumbnail em,div.dashboard a.thumbnail span{font-size: 2.0rem; font-style: normal; display: block; color:#003366;}
div.dashboard a.thumbnail span{font-size: 5.0rem; margin-bottom: 20px;}

div.dashboard a.deactivated{
    opacity: 0.4; 
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
div.dashboard a.deactivated em,div.dashboard a.deactivated span{color:#FF7F84;}
div.dashboard a.deactivated span{font-size: 5.0rem; margin-bottom: 20px;}

div.dashboard div.row .col-md-4{
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    div.dashboard .col-md-4{
        margin-bottom: 10px;        
    }
    div.dashboard a.thumbnail em{font-size: 1.2rem;}
    .company-sidebar div.flex-shrink-0{padding: 0;}
}
.stats{
    margin-top: 5px;
    background-color: #eee;
    padding: 10px;
}
.stats-item{
    padding: 1.6rem;
    background-color: #fff;
    border: 1px solid #f5f5f5;
}
.stats-item table{width: 100%;}
.stats-item table thead tr{background-color: #fff; border-bottom: 1px solid #eee;}
.stats-item table thead tr th{padding-bottom: 5px;}
.stats-item table tr td{padding: 5px 0;}
/*.stats-item table tr td:last-child{padding-bottom: 0;}*/

.stats-item h3{text-align: left;}
.stats-item p.item-total{text-align: right; font-size:2.0rem;}
.stats-item .fa{font-size: 4.0rem; margin-top: 8px;}

@media only screen and (max-width: 1200px) {
    .stats-item{padding: 0.5rem 0.9rem; margin-bottom: 8px;}
    .stats-item.t-content{padding: 0.5rem 0.5rem;}
    .home-menu-border .col-6, .stats .col-6,.stats-item .col-6{padding-left: 5px; padding-right: 5px;}
    .stats-item .fa{font-size: 2.5rem; margin-top: 0;}
    .stats-item p.item-total{font-size:1.2rem; text-align: center;}
    .stats-item p.icon{text-align: center; margin-bottom: 5px;}
    .stats-item h3{margin: 10px 0 5px 0; text-align: center;}    
    .stats-item h3.t-head{font-size:1.1rem; text-align: center;}
    .stats-item table tr td{padding: 5px 8px; white-space: nowrap;}
    .stats-item .col-12.col-md-8{padding-left: 5px; padding-right: 5px; }
/*    div.dashboard a.thumbnail em{font-size: 1.2rem;}*/
}

@media only screen and (max-width: 992px) {
    .stats-item{padding: 0.5rem 0.9rem; margin-bottom: 8px;}
    .stats-item.t-content{padding: 0.5rem 0.5rem;}
    .home-menu-border .col-6, .stats .col-6,.stats-item .col-6{padding-left: 5px; padding-right: 5px;}
    .stats-item .fa{font-size: 2.5rem; margin-top: 0;}
    .stats-item p.item-total{font-size:1.2rem; text-align: center;}
    .stats-item p.icon{text-align: center; margin-bottom: 5px;}
    .stats-item h3{margin: 10px 0 5px 0; text-align: center;}    
    .stats-item h3.t-head{font-size:1.1rem; text-align: center;}
    .stats-item table tr td{padding: 5px 8px; white-space: nowrap;}
    .stats-item .col-12.col-md-8{padding-left: 5px; padding-right: 5px; }
    div.dashboard a.thumbnail em{font-size: 1.2rem;}
}
@media (max-width: 768px){
    .stats-item{padding: 0.5rem 0.9rem; margin-bottom: 8px;}
    .stats-item.t-content{padding: 0.5rem 0.5rem;}
    .home-menu-border .col-6, .stats .col-6,.stats-item .col-6{padding-left: 5px; padding-right: 5px;}
    .stats-item .fa{font-size: 2.5rem; margin-top: 0;}
    .stats-item p.item-total{font-size:1.0rem; text-align: center;}
    .stats-item p.icon{text-align: center; margin-bottom: 5px;}
    .stats-item h3{margin: 10px 0 5px 0; text-align: center;}    
    .stats-item h3.t-head{font-size:1.1rem; text-align: center;}
    .stats-item table tr td{padding: 5px 8px; white-space: nowrap;}
    .home-menu-border .dashboard-item{margin-bottom: 8px;}
    
/*    .stats-item p.item-total.total-orders{font-size:1.6rem;}*/
}
/*PRODUCTS*/

form.edit-image-form div{margin-left: 10px;}
.sort-search-wrap{margin: 15px 0;}
#search-form .form-group{float: left; width: 70%;}
#search-form .form-group input{width: 100%;}
#search-form .search-button-wrap{
    width: 25%; 
    float: left;
    padding-left: 5px;
}

@media (max-width: 768px) {
    #search-form{margin-top: 15px;}
    .sort-search-wrap{padding: 0 10px;}
    #search-form .form-group{float: left; width: 80%;}
    #search-form .search-button-wrap{ width: 15%;}
}
.product-item a{
    display: block;
    padding: 10px;
    background-color: #fff;
}
.product-item a:hover{background-color: #ccc;}
.product-item a#product-item-active{
    background-color: #ccc;
}

.loadingmodal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loadingmodal {
    display: block;
}

footer{border-top: 1px solid #ddd; clear: both; margin-top: 15px; background-color: #003366; padding: 5px 1px; color: #fff;}
footer.dark-bg{background: #43474D; border-top: none;}
footer p{text-align: right; padding:8px 5px 5px 5px; color:#fff;}
footer.dark-bg p{color:#fff;}
footer.fixed{
    position: fixed;
    min-height: 50px;
    bottom: 0;
    width: 100%;
}

@media only screen and (max-width: 768px) {
   h1{font-size: 1.6rem;} 
   h2{font-size: 1.4rem;} 
   h3{font-size: 1.3rem;} 
   h4,h5{font-size: 1.3rem;} 
}