body {background-color: #f9f5f1;}
body, html{font-family: Verdana, Arial, Helvetica, sans-serif;}
.clickable:hover {cursor: pointer;}
i.clickable:hover {color: #F44336;}
label.required:before {content: "*";color: #f95338;margin-right: 3px;}

/* Orange : #f95338 / Saumon : #fcf2e8*/
/* COMMON TOOLS */
@media (min-width: 1000px) {  
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 99%;}
}
.homelogo {width: 150px;height: 80px;background: url("/statics/logo-envoi.png") center / contain no-repeat;position: absolute;margin: auto;bottom: 5px;right: 30px;}
.cust-container{ padding-top: 40px;}
.cust-container-listing{padding: 20px 30px 30px;background: white;border-top: 2px #f95338 solid;}
.cust-container-header{margin-bottom: 30px;}
.cust-container-header h1{font-weight: bold;font-size: 2.2rem;}
.cust-container-header p{font-style: italic}
.cust-container-header hr{width: 10%;color: #999999;opacity: 1; margin-top: 30px;}
.cust-container-filters{display: flex;flex-direction: row;justify-content: flex-end;margin: 0 0 18px;    align-items: center;}
h1 i{color: #f95338;}
.cust-container-filters select, .cust-container-filters div{width: auto; margin-left: 20px;}
.cust-container-filters button{margin-right: auto}
.accordion-body { padding-top: 0;}
.accordion-body .cust-container { padding-top: 0;}
.stats_request .badge {margin-right: 10px; margin-bottom: 10px; font-size: 1.0rem;}

/* DASHBOARD */
.sustainability-icons{font-size: 70px;margin-bottom: 10px}
.dashboard-card{box-shadow: 0 .0313rem .0875rem rgba(0, 0, 0, .017), 0 .0813rem .25rem rgba(0, 0, 0, .025), 0 .1875rem .6rem rgba(0, 0, 0, .033), 0 .625rem 2rem rgba(0, 0, 0, .05);border-radius: 20px;overflow: hidden;background: #f9f5f1}
.dashboard-card-border-right{border-left:1px solid #f9533857}
.dashboard-card img{object-fit: cover; width: 100%; height: 460px; border-radius: 30px}
.dashboard-card .nav-link {color: #F44336;}
.dashboard-card h3 {margin: 20px 0 40px; font-size: 2.5rem !important;}
.dashboard-card hr {margin: 50px auto 30px;width: 60%;}
.dashboard-card span { font-size: 25px; font-weight: bold}
.dashboard-card i { margin: 0; color: #b6c805; }
.dashboard-card .cust-graph-bar{height:80px; }
.dashboard-card .cust-graph-bar-green{background: #6FB07F; padding: 0; color:#6FB07F  }
.dashboard-card .cust-graph-bar-green-light{background: #bbe9c6; padding: 0;color:#bbe9c6  }
.dashboard-card .graph-legend-green{color:#6FB07F  }
.dashboard-card .graph-legend-green-light{color:#bbe9c6  }

/* COMMON MODALS & FORMS */
.modal{top: 4%;}
.modal .modal-body{padding: 15px 30px;}
.modal-header{border-bottom: 2px solid #f95338;padding: 1.6rem 1.6rem;}
.modal i{ font-size: 22px;width: 100%;}
.modal h5 i{color: #f95338;}
.modal h5.modal-title{font-size: 1.8rem; font-weight: bold;}
.form-control:focus, .form-select:focus, .modal .btn-close {border-color: #f95338; box-shadow: none;}
.modal .cust-modal-form label{font-weight: 600;}
.modal .cust-modal-form .form-check-label {font-weight: normal;}
.modal .cust-modal-form textarea{min-height: 140px}
.modal .row {--bs-gutter-x: 0;}
.modal legend {font-weight: bold;}

input[type="checkbox"]{width: 22px;height: 22px;transform: translateY(0.25em);accent-color: #f95338;}
.modal .form-check-input:checked{background-color: #f95338 !important;border-color: #f95338 !important;}
.form-check-input:checked {background-color: #f95338;border-color: #f95338}
.form-check-input:checked[type=checkbox] {background-color: #f95338 !important;border-color: #f95338 !important; border-radius:0}
.hidden{display: none;}
.form-check .form-check-input {float: none; margin-top:unset; vertical-align:unset; appearance:auto;-webkit-appearance:auto; background-image: unset}
.form-check .form-check-input:focus {border: none; box-shadow: none}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {background-color: #f95338;}

/* iNVENTAIRE */
#mainAccordion h3{font-weight: bold}
#mainAccordion .accordion-button:not(.collapsed) {color: black;background-color: unset;box-shadow: none;}
#mainAccordion .cust-container-header{display: none}
#mainAccordion .cust-container-listing{padding: 0}
#mainAccordion #add-Hardware{ margin-top: 19px;}

/* Custom Button */
.btn-primary, .btn-primary:focus, .btn-primary:active{background-color: #f95338 !important; border-color: #f95338 !important;transition: 0.2s;}
.btn-primary:hover{color: #f95338; border-color: #f95338; background-color: white !important; }
.btn-disabled{background-color: #d5d5d5 !important;border-color: #a19c9b !important;color: #939393; opacity:.5 }
.btn-disabled:hover,.btn-disabled:active{background-color: #d5d5d5 !important;border-color: #a19c9b !important;color: #939393 !important; cursor: unset }

/* NAV BAR */
.cust-navbar{z-index: 10;background: #fcf2e8; height: 90px;box-shadow: 0 -6px 10px 5px rgba(0, 0, 0, 0.5);padding-top: 15px;}
.cust-navbar .navbar-brand{background: url(/statics/logo-gsmie.png) center / contain no-repeat;width: 210px;height: 80px;}
.cust-navbar ul.navbar-nav {margin-left: 30px; width: 100%;padding-top: 0;}
.cust-navbar ul.navbar-nav li.nav-item a.nav-link{transition: 0.2s;display: inline;font-size: 1.1rem; padding: 10px 25px 10px !important; font-weight: normal}
.cust-navbar ul.navbar-nav li.nav-item a.nav-link.active{font-weight: bold}
.cust-navbar ul.navbar-nav li.nav-item a.nav-link:hover, .cust-navbar ul.navbar-nav li.nav-item a.nav-link.active{color:#f95338;border-bottom: 2px solid #f95338;}
.cust-navbar .dropdown-menu {padding: 0;border-radius: 0;}
.cust-navbar .dropdown-item {padding: 10px 20px;transition: 0.2s;}
.cust-navbar .dropdown-item:hover {background-color: #f95338;padding: 10px 20px;color: white;}
.dropdown:hover > .dropdown-menu {display: block;}
.dropdown > .dropdown-toggle:active {pointer-events: none;}
.cust-navbar ul li.last{ margin-left: auto;}
.cust-navbar ul li.last img{ vertical-align: top;}
.cust-navbar ul li.last a{ font-size: 1.5rem; color: #585451; margin-left: 10px}
.cust-navbar ul li.last a:hover{ font-size: 1.5rem; color: #f95338;}
.cust-navbar .dropdown-submenu {position: relative;}
.cust-navbar .dropdown-submenu a::after {transform: rotate(-90deg);position: absolute;right: 6px;top: 50%;}
.cust-navbar .dropdown-submenu .dropdown-menu {top: 0;left: 100%;margin-left: .1rem;margin-right: .1rem;}

/* LOGIN PAGE */
.login-container{vertical-align: middle;display: table-cell;}
.login-container .cust-content{max-width: 50%;margin: auto;background: #fcf2e8e8;padding: 30px;border-radius: 10px; margin-top: -150px; z-index: 10;position: relative;}
.login-container form .cust-login-title{text-align: center;font-size: 2rem;font-weight: bold;}
.login-container form .cust-login-baseline{font-size: 1.2rem;}
.login-container form .form-label{font-weight: bold}
.cust-login{width: 100%;height: 100%;min-width: 100%;min-height: 100%;position: absolute; top: 0;left: 0;bottom: 0;right: 0; display: table;}
.login-container::before {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;background-image: url(/statics/bg-login.jpg);filter: blur(6px);}
a.cust-reset-action{ color: black !important; text-decoration: none; display: block}
a.cust-reset-action:hover{ text-decoration: underline}


/* TABULATOR */
.tabulator {font-size: 14px !important;background-color: white;border: 1px solid #ccc;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
.tabulator .tabulator-footer {background-color: #f9f5f1 !important;}
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {border-right: 1px solid #dee2e6 !important;}
.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left, .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {border-right: 1px solid #dee2e6 !important;}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {text-align: left;}
.tabulator-row .tabulator-cell {text-align: left;}
.tabulator-row .tabulator-cell i:not(.ireset){    font-size: 22px;width: 100%;display: block;text-align: center;}
.tabulator-row .tabulator-cell i.clickable:hover {color: #F44336;}
.tabulator-row .tabulator-cell i.custom-disabled {color: #d1d1d1;}
.tabulator-row .tabulator-cell.firsteditcol {padding: 0 !important;}

.tabulator-row .tabulator-cell .leftIcon{display: inline-flex}
.tabulator-row .tabulator-cell .leftIcon i{ margin-right: 10px}

.tabulator-row.tabulator-row-even {background-color: #fff !important;}
.tabulator-row.tabulator-row-odd {background-color: #f9f5f1 !important;}
.tabulator .tabulator-footer .tabulator-page.active {border-color: #f95338 !important;background-color: #f95338 !important;}
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {color: #f95338 !important;}
.tabulator-row .tabulator-cell {padding: 0 15px !important;line-height: 50px!important;}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {background-color: #f9f5f159 !important;}

.cursor-drag{cursor: grabbing !important;cursor: -moz-grabbing !important;cursor: -webkit-grabbing !important;}
.tabulator-row.tabulator-row-odd.tabulator-selected, .tabulator-row.tabulator-row-even.tabulator-selected {font-weight: bold;}
.tabulator-col-group-cols { border-left: 1px dashed #dee2e6 !important; border-right: 1px dashed #dee2e6 !important; }

button.export-csv::before { /* csv icon */content: "\F743";font-family: bootstrap-icons;font-size: 1.0rem;color: limegreen;}
button.export-csv span { vertical-align: text-bottom; padding-left: 0.2em;}
button.export-csv {border-radius: 4px;}

/* RATING STARS RADIOS */
.rating {margin-top: 5px;margin-bottom: 5px;border: none;float: left;}
.rating > label {color: #90A0A3;float: right;}
.rating > label:before {margin: 5px;font-size: 2em;font-family: bootstrap-icons !important;content: "\F586";display: inline-block;}
.rating > input {display: none;}
.rating > input:checked ~ label,
.rating:not(:checked):not(.disabled) > label:hover,
.rating:not(:checked):not(.disabled) > label:hover ~ label { color: #F79426;}
.rating:not(.disabled) > input:checked + label:hover,
.rating:not(.disabled) > input:checked ~ label:hover,
.rating:not(.disabled) > label:hover ~ input:checked ~ label,
.rating:not(.disabled) > input:checked ~ label:hover ~ label {color: #FECE31;}

/* AUDIT MODAL */
#audit_item_list{display: flex;flex-direction: row;flex-wrap: wrap; gap: 10px}
#audit_item_list .mb-3{ min-width: 24%}
#audit_item_list .mb-3:has(input#edit_hardware_audit_form_audit_observation){ min-width: 100%}