/* OVERRIDE CSS */
.footer{bottom:15px;}
.login-container .validation-error{color: #f00 !important;}
.login-container .page-container{padding-top:0px;}
.help-block {
    color:#f00 ;
    font-size: 12px;
    margin-top: 7px;
    margin-bottom: 7px;
  }
.page-title{padding: 10px 36px 32px 0;}
.page-header-content{padding:0px;}
.custom-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff; /* Customize the background color */
    color: #fff; /* Customize the text color */
    border: none;
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline from the link */
}

.form-group label{font-weight:bold;}
label.validation-error-label{font-weight: normal;}
.form-group.has-feedback-image input[type=text]{padding-left:70px;}
.form-group.has-feedback-image .form-control-feedback{width:65px;}
.req{color:#ff0000;}

body.sidebar-xs a.navbar-brand > span{display: none !important;}
.sidebar {
    background-color: rgb(55,108,56)!important;
    color: rgb(255, 255, 255);
}
.modal-backdrop{z-index:1000;}
.modal{z-index:1001;}
.modal-body-create{position:relative;}
.modal-body-create .modal-loading{position:absolute;
    width: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    text-align:center;
}

.panel.has-bg-image{background-image:url(../images/backgrounds/panel_bg.png)}
.element-hover{cursor:pointer;}

/* HELPER */
.p0{padding:0px;}
.m0{margin:0px;}
.mb0{margin-bottom:0px;}
.mt0{margin-top:0px;}
.ml10{margin-left:10px;}
.bt0{border-top: 0px !important;}
.b0{border:0px !important;}
.font13{font-size:13px;}
.font18{font-size: 18px;}
.font10{font-size: 10px;}

/* DATATABLE */
.dataTables_processing{
    left:45%;
    margin:0px;
    width: auto;
    background: none;
    background-color: rgba(0,0,0,0.8);
    color: #FFF;
    padding: 20px;
    border-radius:5px;
    height: auto;
}
.datatable-header{border-bottom:0px;float:right;}
.toolbar-item-datatable{padding:20px;display:inline-block;}

.calendar{margin-left:-15px !important;}
.daterangepicker.dropdown-menu{margin-top:-5px;}
.noty_body {
    font-size: 16px;
}
.table-responsive {
    padding-left: 20px;
    padding-right: 20px;
}
.image-container-product{border-radius:8px;background-color:#f7f7f7;width:366px;height:204px;position:relative;overflow:hidden;}
.image-container-product a{width:100%;text-align:center;padding:5px 0;background-color:#376C38;color:#FFF;display:inline-block;}
.image-container-product.image-exist a{width:49%;}
.image-container-product .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    z-index:100;
}
.image-container-product:hover .overlay, .image-container-product img:hover .overlay{height:30px;}
.image-container-product img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.image-container-products{border-radius:8px;background-color:#f7f7f7;width:366px;height:204px;position:relative;overflow:hidden;}
.image-container-products a{width:100%;text-align:center;padding:5px 0;background-color:#376C38;color:#FFF;display:inline-block;}
.image-container-products.image-exist a{width:49%;}
.image-container-products .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    z-index:100;
}
.image-container-products:hover .overlay, .image-container-products img:hover .overlay{height:30px;}
.image-container-products img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.image-container-productss{border-radius:8px;background-color:#f7f7f7;width:366px;height:204px;position:relative;overflow:hidden;}
.image-container-productss a{width:100%;text-align:center;padding:5px 0;background-color:#376C38;color:#FFF;display:inline-block;}
.image-container-productss.image-exist a{width:49%;}
.image-container-productss .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    z-index:100;
}
.image-container-productss:hover .overlay, .image-container-productss img:hover .overlay{height:30px;}
.image-container-productss img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.select2-container .select2-selection__choice[aria-disabled=true] {
    color: #888888; /* You can adjust the color */
}
/* NEW  LAYOUTS */
.nav.navbar-nav li a.btn{padding-bottom:11px;}
.nav.navbar-nav.main-navbar li a{border-bottom:3px solid #f8f8f8;padding-bottom:10px;}
.nav.navbar-nav.main-navbar li.active a{border-bottom-color:#b86800;font-weight: bold;color:#525252;}
table.table thead tr.bg-slate-800{background-color:#bbd0c1;color:#323232;text-transform: uppercase;}
.navigation>li.active>a, .navigation>li.active>a:focus, .navigation>li.active>a:hover {
    background-color:rgb(179,140,50);
    color: #fff;
}
/* LAYER */
.page-layer .page-layer-overlay{opacity:0;visibility: hidden;background-color:rgba(0,0,0,0.6);position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;transition: all .5s ease .1s;}
.page-layer .page-layer-1{position:fixed;bottom:0px;background:#FFF;top:0px;z-index:101;transition: all .5s ease .1s;}
.page-layer .page-layer-1.layer-xs{right:-650px;width:650px;}
.page-layer .page-layer-1.layer-def{right:-896px;width:896px;}
.page-layer .page-layer-1.layer-lg{right:-1224px;width:1224px;}
.page-layer.active .page-layer-overlay{visibility: visible;opacity:1;}
.page-layer.active .page-layer-1{right:0;transition: all .5s ease .1s;}
.page-layer.active .page-layer-1.layer-xs{width:650px;}
.page-layer.active .page-layer-1.layer-def{width:896px;}
.page-layer.active .page-layer-1.layer-lg{width:1224px;}
.page-layer-1 .page-layer-bottom{position:absolute;bottom:0px;padding:20px;background:#f3f3f3;width:100%;}
.page-layer-1 .page-layer-content{position:absolute;top:0;left:0;bottom:76px;right:0;overflow-y:auto;}
.page-layer-1 .page-layer-content .page-layer-wrapper{padding:20px;}
.page-layer-1 .page-layer-content .page-layer-wrapper h4{border-bottom:1px solid #dadada;padding-bottom:10px;}
.page-layer .nav-tabs.nav-tabs-solid>.active>a, .nav-tabs.nav-tabs-solid>.active>a:focus, .nav-tabs.nav-tabs-solid>.active>a:hover{color:#323232;}
.page-layer .nav-tabs.nav-tabs-bottom>li.active>a, .nav-tabs.nav-tabs-bottom>li.active>a:focus, .nav-tabs.nav-tabs-bottom>li.active>a:hover{background-color:#eaeaea;font-weight: bold;}
.page-layer-1 .page-layer-bottom button{margin-left:5px;}
.page-layer-1 .page-layer-content fieldset legend{font-weight:bold;color:#ff8100;}

/* TABLE INPUT */
table.table-input{border: none;}
table.table-input thead tr th{border:none;padding:0 0 5px 0;}
table.table-input tbody tr:first-child > td{border-top: 1px solid #ddd;}
table.table-input tbody tr td{padding:0px;}
table.table-input tbody tr td input[type=text], table.table-input tbody tr td select{border-radius:0px;border:none;}
table.table-input tbody tr td .select2-selection.select2-selection--single{border:none;}
table.table-input tbody tr td .form-group.has-feedback{margin:0;}
table.table-input tbody tr td .has-feedback .form-control{padding-right:90px;}
table.table-input tbody tr td .form-control-feedback{right:10px !important;width: auto !important;color:#ddd;}
.dispute-row {
    background-color: rgba(255, 0, 0, 0.1)!important; /* Semi-red background color */
}
.blinking-row {
    background-color: rgba(255, 0, 0, 0.1); /* Replace with your desired color */
    animation: blinkBackground 1s ease infinite alternate;
}
.blinking-row2 {
    background-color: rgba(0, 255, 8, 0.1); /* Replace with your desired color */
    animation: blinkBackground2 1s ease infinite alternate;
}

/* Define the animation for blinking */
@keyframes blinkBackground {
    0% {
        background-color: rgba(255, 0, 0, 0.1); /* Start with the semi-transparent background color */
    }
    30% {
        background-color: rgba(255, 0, 0, 0.1); /* Stay red for 30% of the animation */
    }
    100% {
        background-color: transparent; /* Blink to a transparent background */
    }
}
@keyframes blinkBackground2 {
    0% {
        background-color: rgba(0, 255, 8, 0.1); /* Replace with your desired color */
    }
    30% {
        background-color: rgba(0, 255, 8, 0.1); /* Replace with your desired color */
    }
    100% {
        background-color: transparent; /* Blink to a transparent background */
    }
}
/* .bootbox.modal.bootbox-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
} */
/* TABLE NO PADDING */
.label-warning {
    background-color: #eab220;
    border-color: #fafafa;
}
table.table-no-padding tbody tr td{padding:0px;}
table.table-no-padding tbody tr td span{padding:10px 15px;display:block;}
table.table-no-padding tbody tr td.muted{background:#ddd;}
table.table-no-padding tbody tr td input[type=text], table.table-no-padding tbody tr td select{border:0px;}

/* TABLE CLEAN */
table.table-clean tbody tr td{padding:0px;}
table.table-clean tbody tr td span{display:block;padding:8px 20px;}
table.table-clean tbody tr td span.switchery{padding:0px;}
table.table-clean tbody tr td div.checkbox.checkbox-switchery.switchery-xs{margin-bottom:0px;}
table.table-clean tbody tr td input[type=text], table.table-clean tbody tr td select{border:none;}
.dt-header .btn.btn-default.active{background:#26a69a;border-color:#26a69a;color:#FFF;}
tr.bg-teal.selected{color:#313131;}
td.dataTables_empty{text-align:center !important;}

.form-group.form-extend{margin-bottom:5px;}
.switchery:checked{background: red !important;}
/** DATETIMEPICKER OVERIDE **/
.datepicker.datepicker-dropdown.dropdown-menu{width:290px !important;}

/* DATERANGEPICKER */
.daterangepicker .ranges{border: 0px;box-shadow: none;-webkit-box-shadow: none;}
.drp-selected{display: none !important;}

/* PANEL */
.panel-featured1{line-height:18px;}
.panel-featured1 h6{text-transform: uppercase;margin:0;padding:0;font-weight: bold;color:#797979;font-size: 14px;}
.panel-featured1 span{font-size: 20px;}
.panel-footer{padding: 15px 20px;}

/** BOOTBOX **/
.bootbox.modal .modal-header h4.modal-title{color:#f44336 !important;font-weight:bold;}
.bootbox.modal .modal-header .close{top:35%;}

/* MODAL DATATABLE */
.modal-dt{padding: 0px;}
.modal-dt .datatable-header{float:left !important;}
.modal-dt .datatable-header .dataTables_filter input{border: 0px !important;}
.toolbar-item-dt{float: right; padding: 20px;}
.toolbar-item-dt{min-width: 200px;}
.modal-footer{padding-top:20px;background: #dadada;}
.modal-dt .datatable-footer{padding:0px;}
.toolbar-item-dt select{width: 200px;margin-left:10px;float:left;}

.radio-feature{padding:8px;border:1px solid #ddd;}
.radio-feature label{width:100%;padding-left:35px;}
.radio-feature label .choice{margin-left:10px;}

.image-container-productsss{border-radius:8px;background-color:#f7f7f7;width:366px;height:204px;position:relative;overflow:hidden;}
.image-container-productsss a{width:100%;text-align:center;padding:5px 0;background-color:#376C38;color:#FFF;display:inline-block;}
.image-container-productsss.image-exist a{width:49%;}
.image-container-productsss .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    z-index:100;
}
.image-container-productsss:hover .overlay, .image-container-productsss img:hover .overlay{height:30px;}
.image-container-productsss img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
@media screen and (max-width:768px) {
    .toolbar-item-datatable{width:100%;}
    .datatable-header{float:none;}
    .nav-tabs:before{content:''}
    .page-layer .page-layer-1.layer-xs,.page-layer .page-layer-1.layer-lg, .page-layer .page-layer-1.layer-def{width:100% !important;right:-100%;}
    .page-layer.active .page-layer-1.layer-xs,.page-layer.active .page-layer-1.layer-lg,.page-layer.active .page-layer-1.layer-def{right:0;}
    .page-header-content>.visible-elements{border: 0px;}
}

@media screen and (min-width: 769px) {
    .nav-tabs.nav-tabs-bottom>li.active>a:after{background-color: #0bab9e;}
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 95%; }
}