:root {
    --ins-primary-color: #34335E; 
    --ins-primary-light-bg: linear-gradient(90deg, #FFFFFF 0%, #F9FAFB 100%); 
    --ins-secondary-color: #F9FAFB; 
    --ins-disabled-bg: #eef0f4;
    --ins-disabled-text: #a0a0c0;
    --ins-text-dark: #333;
    --ins-text-light: #777;
    --ins-font-main: 'Roboto', sans-serif; 
}

body {
    background-color: #fff !important;
}
.navbar-custom .topbar-menu .nav-link{
    color: #4c4c4c !important;
}
.topnav-navbar-dark .topbar-menu li .show.nav-link {
    color: #4c4c4c!important;
}
.topnav-navbar-dark{
    background-color: #fff;
}
.topnav-navbar-dark .nav-user{
    background-color: #fafbfd;
    border: 1px solid #f1f3fa;
}
.navbar-light .navbar-nav .nav-link{
    color: #fff;
    opacity: 0.7;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    opacity: 1;
    color: #fff;
}
body[data-layout=topnav] .content-page{
    padding: 0 !important;
}
.nav-user{
    background-color: #fff;
    border: none;
}
tbody, td, tfoot, th, thead, tr {
    border-color: #edeff1;
}
/* td {
    font-size: 14px;
} */
th, h4 {
    color: #2f385d !important;
}
.nav-tabs .nav-link.active{
    font-weight: 500;
}
.btn-light{
    background-color: #2f385d !important;
    color: #fff !important;
    border-color: #2f385d;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
    color: #2f385d !important;
}
.breadcrumb-item a{
    color: #adb5bd;
}
.breadcrumb-item.active {
    color: #2f385d;
}
/* .table>:not(caption)>*>*:first-child {
    padding: 5px 0px 5px 0 !important;
} */
.table>:not(caption)>*>* {
    padding: 5px 5px 5px 5px !important;
}
.table tr{
    font-size: 9px !important;
}
.topnav .navbar-nav .nav-link {
    font-size: 14px;
}
.footer{
    background: #fff;
}
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before{
    top: 4px;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after{
    top: 10px;
}
.mt-30{
    margin-top: 30px;
}
.table.dataTable thead>tr>th.sorting{
    padding-left: 10px;
}
.mdi-close-thick{
    color: #fa6767;

}
.mdi-square-edit-outline{
    color: #fac631;
}

.back_links{
    color: #2f385d !important;
}
.input-group-text{
    position: absolute;
    right: 0;
}
.form-control.is-invalid{
    border-radius: 0px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fa6767'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fa6767' stroke='none'/%3e%3c/svg%3e") !important;

}
.profile-down{
    position: absolute;
    right: 0;
    top: 15px;
    font-size: 16px;
}
.router-link-active{
    opacity: 1 !important;
    color: #fff !important;
}
.router-link-exact-active{
    opacity: 1 !important;
    color: #fff !important;
}
.form-check {
    min-height: unset !important;
}
.blue{
    color: #2f385d !important;
}
td a {
    text-decoration: underline;
}
.form-check .form-check-input {
    float: unset !important;
}
.hide{
    display: none !important;
}
.btn-primary, .btn-primary.focus, .btn-primary:focus,.btn-primary:hover,.btn-primary:active {
    color: #fff;
    background-color: #2f385d !important;
    border-color: #2f385d !important;
}
.page-link{
    color: #212529 !important;
}
.page-item.active .page-link{
    color: #fff !important;
    background-color: #2f385d !important;
    border-color: #2f385d !important;
}
.modal-colored-header{
    background-color: #2f385d !important;
}
.search_bar{
    border-radius: 50px !important;
}
.navbar-dark .navbar-nav .nav-link{
    color: #fff !important;
}
.topnav {
    background: -webkit-gradient(linear,left top,left bottom,from(#2f385d),to(#2f385d));
    background: linear-gradient(to bottom,#2f385d,#2f385d);
}
.popclint{
    position: absolute;
    right: 20px;
    font-size: 32px;
    top: 10px;
}
@media (min-width: 992px) {
    .topnav .navbar-nav .nav-item:first-of-type .nav-link{
        padding-left : 0 !important
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 1rem 1.3rem !important;
      }
}
.contact_remove
{
    top: 36px;
}
.contact_select .select2-container--default .select2-selection--single .select2-selection__rendered, .client_select .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 39px !important;
}
.contact_select .select2-container--default .select2-selection--single,.client_select .select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
}
.contact_select .select2-container .select2-selection--single , .client_select .select2-container .select2-selection--single  {
    height: 39px !important;
}
.order_close.close span {
    font-weight: bold;
    font-size: 24px;
}
.order_close.close {
    margin-left: 10px;
}
.add_n_cnt button{
    padding: 2px 8px;
}
.col-1.add_c
{
    margin-top: 35px;
}
.table_scroll{
    min-height: 300px !important;
}
.dropdown-item:hover, .dropdown-item:focus{
    background-color:transparent !important
}
.card_scroll_body
{
    height:450px;
}
.card_scroll_body_row1
{
    height:1625px;
}
.card_scroll_body_load
{
    height:675px;
}
.card .__rail-is-vertical {
    top: 12px !important;
    bottom: 12px !important;
}
.tooltip {
    display: block !important;
    z-index: 10000;
  }
.tooltip .tooltip-inner {
    background: black;
    color: white;
    border-radius: 1px;
    padding: 5px 10px 4px;
    max-width: 350px !important;
  }
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 17px;
    border-color: black;
  }
.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
  }
.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }

  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
  }

  .tooltip[x-placement^="bottom"] .tooltip-arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }

  .tooltip[x-placement^="right"] {
    margin-left: 5px;
  }

  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }

  .tooltip[x-placement^="left"] {
    margin-right: 1px;
  }

  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    right: -5px;
    top: calc(50% - 12px);
    margin-left: 0;
    margin-right: 0;
  }

  .tooltip[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  .tooltip[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
  .order_task >span {
    width: 100%;
    display: block;
    padding: 6px;
}

.resources .alignicons {
    width: 120px;
    float: left;
    position: relative;
}

.resources .alignicons a.action-icon {
    float: left;
}
.nav-user .account-user-name{
    text-transform: capitalize;
}
.modal-body{
    padding: 37px 75px 20px 75px !important;
}

.mdi-attachment::before {
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sorting{
    cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button{
    cursor: pointer;
}
.resources .v-popover .trigger{
    display: block !important;
}

/* .mdi-link::before {
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
} */
.disable_click{
    pointer-events: none;
}
.action_icons{
    cursor: pointer;
}
.order_icons{
    display: flex;
    /* justify-content: space-evenly; */
    justify-content: flex-end;
    color: #6c757d;
    /* padding: 5px; */
    margin-top: 10px;
    align-items: center;
}
.order_icons .action-icon{
    cursor: pointer;
    color: #6c757d;
    padding: 2px;
}
.order_icons.dropdown-menu li {
    margin-bottom: 10px;
}
.order_icons ul.dropdown-menu.show {
    padding: 7px;
    width: 200px !important;
}
.order_icons ul li {
    padding-top: 5px;
    padding-bottom: 5px;
}
.invalid-error{
    width: 100%;
    margin-top: .25rem;
    font-size: .75rem;
    color: #ff5b5b;
}
.fm-navbar .text-right{
    display: none !important;
}
.fm-navbar .btn-secondary{
    background-color:#2f385d;
    border-color:#2f385d;
}
.edit_delete i,.edit_delete em{
    cursor: pointer;
}
.filemanager .btn-group:first-child {
    display: none;
}
.filemanager .btn-group:nth-child(2) .btn:first-child {
    display: none;
}
.filemanager .btn-group:last-child {
    display: none;
}

/* Download icon as SVG background (used in tab4-forms.vue) */
.download-svg-bg {
     display: inline-block;
     width: 18px;
     height: 18px;
     vertical-align: middle;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 18px 18px;
     cursor: pointer;
     /* Inline SVG data URI (percent-encoded '#' as %23) */
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M12 3V15' stroke='%232f385d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M19 10L12 17L5 10' stroke='%232f385d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M21 21H3' stroke='%232f385d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.updated_by{
    text-transform: capitalize;
}
.hideuploadfm:nth-child(2),.hideuploadfm:nth-child(3){
    display: none;
}
#cdatepicker
{
    border: 1px solid rgba(60,60,60,.26);
    padding: 5px 10px;
    border-radius: 4px;
}
.daterangepicker .calendars {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}
.order_status .vs__dropdown-toggle{
    background-color: #2f385d;
    cursor: pointer;
    padding: 2px 0 7px !important;
}
.order_status .vs__selected{
    color: #fff;
    cursor: pointer;
}
.order_status .vs__open-indicator{
    fill: rgb(255 255 255 / 77%);
    cursor: pointer;
}
.order_status .vs__search{
    cursor: pointer;
    color: #fff;
}
.btn-outline-secondary:hover{
    background-color: #2f385d !important;
}
.vs--disabled .vs__dropdown-toggle,.vs--disabled .vs__search{
    background-color: #2f385d !important;
    opacity: 0.5 !important;
}
.vs--disabled .vs__open-indicator{
    display: none !important;
}
.order_status_grid{
    position: absolute;
    right: 12px;
}
.list-group .row.row-cols-2.mb-2.mt-2 {
    cursor: move;
}
.list-group .hide_cursor
{
    cursor:none !important;
}
.btnnextarea {
    pointer-events: none;
    /* cursor: default; */
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
}
.table_cover{
      min-height: 600px;
      min-width:100%;
}
input#cdatepicker {
    height: 33px;
}
@keyframes dt_spinner {
    to {transform: rotate(360deg);}
  }

  .dt_spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #2f385d;
    border-top-color: #fff;
    animation: dt_spinner .6s linear infinite;
  }
  .toggle-vis {
    cursor: pointer;
    width: 30px;
    height: 19px;
    vertical-align: middle;
}

#addkolommen label {
    font-size: 21px;
}

div#addKolommen .form-group label {
    font-size: 17px;
    margin-bottom: 0px !important;
    vertical-align: middle;
}
#order_overview table.dataTable.no-footer {
    border-bottom: 1px solid #afb4b8;
}

.simplebar-scrollbar::before {
    background-color: rgb(193, 193, 193);
    width: 3px;
    cursor: pointer;
  }
  .btn.btn-primary
  {
      cursor:pointer;
  }
  #order_overview::-webkit-scrollbar {
    background:none;
    width: 5px;
    height: 5px;
}
.dataTables_wrapper.no-footer {
     border-bottom: none  !important;
}
table.dataTable.no-footer {
    border-bottom: none  !important;
}
.dataTables_wrapper td, .dataTables_wrapper th {
    border-top: none !important;
}
.dataTables_wrapper tr.order_mainhead th:last-child {
    border: none;
}
#order_overview::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


#order_overview::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #c1c1c1;
}
#order_overview::-webkit-scrollbar-thumb:window-inactive {
    background: #c1c1c1;
}
.dataTables_wrapper tr.order_mainhead th {
    border-right: 1px solid #ccc;
}
#filter_search {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 6px;
}
div#order_overview_wrapper {
    margin-top: 13px;
}
div#order_overview_wrapper thead {
    border-top: 1px solid #ccc;
}
#order_overview
{
    overflow-x: scroll;
    display: block;
    width: 100%;
    overflow-y: scroll;
    height: 1300px;
    cursor: pointer;
}
.nextarea
{
    display:inline-block !important;
}
table.dataTable td.dataTables_empty {
    text-align: left !important;
}
td.dt-body-left.check_cls {
    padding-left: 17px;
}
.col-md-5.nextarea .btn {
    width: 132px;
    float: left;
    margin-right: 3px;
}
.filemanager div#file-previews {
    display: none;
}
i.fas.fa-level-up-alt, em.fas.fa-level-up-alt {
    width: 100%;
    padding: .5rem;
}
.mx-datepicker{
    width: 100% !important;
}
.showloader
{
    display:none;
}
textarea[name="opmerkingen"],textarea[name="load_opmerkingenveld"] {
    resize: none;
}
.form-group.order_task {
    margin-top: 15px;
}
.product_scroll_body{
    min-height: 70px;
    max-height: 70px;
    overflow-y: auto;
    margin-right: 0;
    background: #e9ecef;
    border-radius: 5px;
    margin-left: 0;
    padding: 10px;
}
.product_scroll_body dt{
    font-weight: 400;
}
.product_scroll_body dt,dd{
    line-height: 14px;
}
.card_scroll_task
{
    height: 975px;
}
#order_overview thead tr,#order_overview thead tr th {
    height: 37px!important;
    }
.tblhide
{
    display: none !important;
}
.tblshow
{
    display: block !important;
}
.order_stat_cover {
    display: inline-block;
    width: 230px;
}
.order_stat_cover div#vs1__combobox {
    border: none;
    width: 230px;
    height: 38px;
}
textarea[name="product_textarea"]{
    height: 55px;
}
a {
    cursor: pointer !important;
}
.edit_click_row tr{
    cursor:pointer !important;
}
.mx-time-column .mx-time-list::after {
    height: 10px !important;
}
.multiselect-tag {
    background: #f0f0f0 !important;
    color: #858484 !important;
    border: 1px solid #c1c1c1 !important;
}
.multiselect.is-active {
    box-shadow: none !important;
}
.multiselect-option.is-selected.is-pointed {
    background: none !important;
    color: #858484 !important;
}
.multiselect-option.is-selected {
    background: none !important;
    color: #858484 !important;
}
.multiselect {
    border: 1px solid #e6e9ec !important;
    min-height: 37px !important;
}
.form-check-input {
    cursor: pointer;
}
.serach_txt_group label{
    width: 100%;
}
.from-blue-400 {
    color: #fff;
    --tw-gradient-from: #2f385d !important;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to, rgba(96, 165, 250, 0));
}
.to-indigo-400 {
    --tw-gradient-to: #2f385d !important;
}
.pr-2.text-gray-400.font-medium {
    display: none;
}

.w-14.rounded-md.border.border-indigo-400.px-1.py-1 {
    display: none;
}

.flex.items-center.pl-4.font-medium.cursor-pointer {
    display: none;
}
section.flex.justify-between.bg-white.rounded-lg.border.border-gray-200.px-10.py-3.text-gray-700.font-montserrat {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border: none !important;
    float:right !important;
}
.transform {
    transform: none !important;
}
.bg-gradient-to-r.from-blue-400.to-indigo-400.flex.hover\:bg-gray-200.rounded-md.transform.rotate-45.h-6.w-6.items-center.justify-center {
    width: 39px;
    height: 35px;
    border-radius: 0px;
}
.client_table_cls thead th i, .client_table_cls thead th em {
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}
.soortklantinvalid, .activeinvalid
{
    display: block !important;
}
i.mdi.mdi-asterisk ,em.mdi.mdi-asterisk{
    color: #f95000;
    font-size: 8px;
    vertical-align: top;
    margin-left: 3px;
}
/* .multiselect-caret
{
    margin: 0px !important;
} */
th{
    font-size: 11px;
    padding: 5px 10px 5px 0 !important;
}
td ,td a{
    font-size: 12px;
    color: #000 !important;
    font-weight: 600 !important;
}
form{
    font-size: 11px  !important;
}
.multiselect-option{
    font-size: 11px !important;
    /* min-height: 33px !important; */
 }
.nowrap{
    white-space: nowrap;
}
.table .action-icon {
    font-size: 11px !important;
}
.multiselect-option,.multiselect-option.is-selected,.multiselect-single-label,.multiselect-placeholder{
    font-size: 11px !important;
    line-height: 10px !important;
}
.multiselect-single-label
{
    width: 82%;
}
span.multiselect-clear {
    padding-right: 5px;
}
input[type=search]{
  font-size: 11px !important;
    line-height: 22px !important;
}
.page-title-box .page-title {
    line-height: 50px !important;
    font-size: 18px;
    color: #2f385d;
}
.add_label
{
    color:#333;
}
.planning{
    width:18%;
}
.planning_klant{
    width:30%;
}
.planningSearch{
    width:18%;
}
.topnav-logo img {
    height: 50px !important;
    vertical-align: unset !important;
    margin-top: 10px !important;
    float: left;
}
.mb-60
{
    margin-bottom:60px;
}
table tr:nth-child(even) {
    background-color: #f1f3fa;
}
.setwidthcheck
{
width:2%;
padding-left: 5px !important;
}

.popper {
    margin: 0px 0 -11px 0 !important;
    padding: 0px 8px 3px 8px !important;
    font-size: 13px !important;
    border-radius: 2px !important;
}
.berror{
    border-color: red !important;
}
i.mdi.mdi-sort, em.mdi.mdi-sort {
    cursor: pointer;
}
/* .mcls .multiselect{
   font-size: .875rem !important;
   min-height: 33px !important;
} */
.footer .col-md-6 {
    color: #2f385d;
    font-weight: 500;
}

.dp__input_icon_pad {
    padding-left: 30px  !important;
    padding-right: 30px !important;
    font-size: 11px !important;
    color: #000 !important;                    /* old color- #838c96; */
}
.dp__input_icons {
    padding: 6px 6px !important;
}
.dp__calendar_wrapper{
    font-size: 12px !important;
}
.form-select{
    font-size: 11px !important;
}
::placeholder{
    font-size: 11px !important;
}
.booking_link{
    text-decoration: none;
    color: #fff !important;
    padding-left: 5px;
}
label.form-check-label {
    margin-left: 6px;
    display: inline;
}
.dp__calendar_header_item {
    text-transform: capitalize;
}
.dp__overlay_col {
    text-transform: capitalize;
}
.dp__month_year_select {
    text-transform: capitalize;
}
a.vehicle_link {
    color: #000 !important;
    font-weight: bold;
    font-size: 10px;
}
.colr_text {
    font-weight: bold;
    font-size: 10px;
    vertical-align: middle;
}

.planning-table table th{
    vertical-align: middle;
    border: 1px solid #f1f3fa;
    /* text-align: center; */
}
.planning-table table th:last-child{
    font-size: 18px;
    padding: 0px !important;
    background-color:#f1f3fa !important;
}
.planning-table th.left-arrow{
    font-size: 18px;
    padding: 0px !important;
    background-color:#f1f3fa !important;
}
.planning-table td, .planning-table td:first-child{
    padding-left: 5px !important;
}
.planning-table .table>:not(caption)>*>* {
    padding: 8px 6px 5px 6px !important;
    vertical-align: middle;
    font-size: 14px !important;
    font-weight: 700 !important;
}
.planning-table thead tr:nth-child(1) th{
    background: #fff;
    position: sticky;
    top: 0;
    border: #fff !important;
}
.planning_td{
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff !important;
}
.fst-italic {
    font-style: italic!important;
    color: #fff !important;
}
.vehicle_head{
    font-weight: bold !important;
    margin-bottom: 10px;
}
.inline-block{
    border: none !important;
    margin: 0px !important;
}
.simple-typeahead-input {
    display: block;
    width: 100%;
    padding: .45rem .9rem;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;                    /*#838c96;* -- change request to change color to black */
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}
.form-control[type=file] {
    font-size: 11px;
    width:97%;
}
span.multiselect-caret {
    font-size: 11px;
}

span.multiselect-clear-icon {
    width: 10px;
    height: 12px;
}

.product_table_cls .form-control
{
    font-size: 11px;
}
.pdficon {
    padding: 2px 5px 3px 3px;
    border: 1px solid #2f385d;
    border-radius: 2px;
    text-decoration: none;
}
.pdferroricon {
    padding: 2px 5px 3px 3px;
    border: 1px solid #ea1414;
    border-radius: 2px;
    text-decoration: none;
    color: #ea1414 !important;
}
.pdficon i, .pdficon em{
    color: #fa6767;
}
.file_err {
    display: block;
    width: 100%;
    float: left;
}
.dropdown-menu .router-link-exact-active {
    opacity: 1 !important;
    color: #2f385d !important;
}
.file_inp
{
    padding-top:10px;
}
.down_btn
{
    font-size:13px;
}
.form-check-input[type="radio"]:disabled~.form-check-label,
.form-check-input[type="radio"][disabled]~.form-check-label {
    opacity: 1;
}
.file-upload{
    display:block;
    text-align:center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    float:left;
    width: 100%;

}
.col-3.attachment_cvr {
    padding-left: 0px !important;
}
 .file-upload .file-select{
    display:block;
    border: 2px solid #dce4ec;
    color: #34495e;
    cursor:pointer;
    height:35px;
    line-height:35px;
    text-align:left;
    background:#FFFFFF;
    overflow:hidden;
    position:relative;
    border-radius:3px;
}
 .file-upload .file-select .file-select-button{
    background:#dce4ec;
    padding:0 10px;
    display:inline-block;
    height:35px;
    line-height:35px;
}
 .file-upload .file-select .file-select-name{
    line-height:35px;
    display:inline-block;
    padding:0 10px;
}
 .file-upload .file-select:hover{
    border-color:#2f385d;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
}
 .file-upload .file-select:hover .file-select-button{
    background:#2f385d;
    color:#FFFFFF;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
}
 .file-upload.active .file-select{
    border-color:#2f385d;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
}
 .file-upload.active .file-select .file-select-button{
    background:#2f385d;
    color:#FFFFFF;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
}
 .file-upload .file-select input[type=file]{
    z-index:100;
    cursor:pointer;
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    opacity:0;
    filter:alpha(opacity=0);
}
 .file-upload .file-select.file-select-disabled{
    opacity:0.65;
}
 .file-upload .file-select.file-select-disabled:hover{
    display:block;
    border: 2px solid #dce4ec;
    color: #2f385d;
    cursor:pointer;
    height:35px;
    line-height:35px;
    margin-top:5px;
    text-align:left;
    background:#FFFFFF;
    overflow:hidden;
    position:relative;
}
 .file-upload .file-select.file-select-disabled:hover .file-select-button{
    background:#dce4ec;
    color:#666666;
    padding:0 10px;
    display:inline-block;
    height:35px;
    line-height:35px;
}
 .file-upload .file-select.file-select-disabled:hover .file-select-name{
    line-height:35px;
    display:inline-block;
    padding:0 10px;
}
.csv_download a{
    display: block;
    color: #30395e !important;
    font-weight: bold !important;
    padding: 5px 5px 5px 0px;
}
.csv_download h5 {
    margin-bottom: 15px;
}

.download_agreement{
    cursor: pointer;
    color: #6c757d !important;
    font-weight: 500;
}
.creditinvoice{
    color :red !important;
  }
  .prdct_item
  {
      height:40px !important;
  }
  @media (min-width: 992px)
{
	body[data-layout=topnav] .container-fluid{
		max-width: 96% !important;
	}
}
@media (min-width: 1400px)
{
	body[data-layout=topnav] .container-fluid{
		max-width: 96% !important;
	}
}
.numbers-align-right{
    text-align: right;
}
.border-right{
    border-right: 1px solid Transparent!important;
}
.right-border tr th:nth-child(8),th:nth-child(9),th:nth-child(10) {
     border-right: 1px solid Transparent!important;
}
.bluetxt {color: #6635b8 !important;}
td.greybg {background: #f5f5f5 !important;}
.multiselect.form-control.is-invalid {
    border-color: #fa6767 !important;
    padding-right: 12px !important;
}
.loader {
    position: fixed;
    background-color: #000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0.5;
    padding-top: 20%;
    padding-left: 50%;
    color:#2f385d !important;
}
.spinner-border.kaiper-spinner{
    width: 4rem;
    height: 4rem;
    color:#2f385d !important;
}
div[role="progressbar"] {
    --size: 12rem;
    --fg: #369;
    --bg: #def;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
      conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--fg);
    position: relative;
    top: 8px;
    float: right;
}
div#scroll-horizontal-preview {
    height: 600px;
}

#scroll-horizontal-preview th, .afloop_cvr th {
    position: sticky;
    top: -1px;
    z-index: 99;
    background: #fff !important;
}
.afloop_cvr
{
    height: 60vh;
    overflow: auto;
}
.clearcls {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #2f385d;
}

/* change request-maake placeholder black */
/*  placeholder change request fixes  */
input[readonly] {
    color:#000;
}
input::placeholder {
   color: #000;
 }
 .form-control::-webkit-input-placeholder {
   color: #000;
}
 .form-control::-moz-placeholder {
   color: #000;
}
 .form-control:-ms-input-placeholder {
   color: #000;
}
 .form-control::-ms-input-placeholder {
   color: #000;
}
 .form-control::placeholder {
   color: #000;
}
.form-control{
    color: #000;
}
.form-control:focus{
    color: #000;
}
.multiselect-placeholder{
    color: #000 !important;
}
.label-black{
    color: #000 !important;
}
.form-select{
    color: #000;
}



.eye-icon-div {
    z-index: 3;
}
.fs-file-selector.dropzone_area .fs-btn-select{
  width: -webkit-fill-available;
}

:root {
	--popper-theme-background-color: #333333;
	--popper-theme-background-color-hover: #333333;
	--popper-theme-text-color: #ffffff;
	--popper-theme-border-width: 0px;
	--popper-theme-border-style: solid;
	--popper-theme-border-radius: 6px;
	--popper-theme-padding: 32px;
	--popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}

.carousel-control-prev{
    left : 30px
}
.carousel-control-next{
    right : 50px
}

.vehicle-check a#topbar-userdrop {
	min-height: 34px
}
.vehicle-check .notification-list .topbar-dropdown-menu .notify-item {
    padding: 14px 20px;
}
.invalid-notify .invalid-feedback{
    display: block !important;
}

/* Vueform multiselect */
.multiselect-dropdown .multiselect-options .multiselect-option span {
    line-height: 16px;
}

.multiselect.form-control .multiselect-single-label {
    line-height: 12px !important;
}

/* Vue 3 Date Time Picker */
input.dp__input.dp__input_icon_pad:disabled {
    background-color: #eef2f7;
    opacity: 1;
}
.w-10{
    width:10%;
}
.w-7{
    width:7%;
}

/* Custom class for formulier/booking history titles */
.heading-title {
    font-weight: 700;
    color: #2f385d !important;
}

/* PhotoPopover component styles */
.photo-popover .modal-body {
    padding: 1rem 4rem !important;
}
.photo-popover .header-actionarea {
    border-bottom: 2px solid #2f385d;
    padding-bottom: 1rem ;
}
.photo-popover h5 {
    font-weight: 700;
    color: #2f385d;
}
.photo-popover .viewer-container{
    display:flex;
    flex-direction: column;
    gap:16px;
}
.photo-popover .viewer-area { 
    display:flex; 
    align-items:center; 
    gap:8px; 
}
.photo-popover .viewer { 
    flex: 1 1 auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%;
    height: 320px;
    background: #fafafa; 
    border-radius: 6px; 
    position: relative; 
    overflow: hidden;
}
.photo-popover .photo-main { 
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain; 
    display: block;
}
.photo-popover .nav { 
    background:transparent; 
    border:none; 
    font-size:40px; 
    cursor:pointer; 
    color:#2f385d !important
}

.photo-popover .nav:disabled { 
    opacity:0.3; 
    cursor:not-allowed; 
}

.photo-popover .photo-container {
    /* Use a CSS variable set by the component to control columns (max 7). If not provided, default to 7 */
    --photo-cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--photo-cols, 4), 1fr);
    justify-items: center;
    gap: 1rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.5rem;
}
.photo-popover .photo_placeholder { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 5rem; 
    height: 5rem; 
    border: 2px solid #98a6ad; 
    border-radius: 12px; 
    font-size: 46px; 
}
.photo-popover .photo_tile {
    /* Use a column flex layout so the image area (photo_inner) keeps an aspect ratio
       and captions sit reliably below it regardless of image intrinsic size. */
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 8px;
    overflow: visible;
    cursor: pointer;
    border: 2px solid #e6e9ec; /* subtle border around each thumbnail */
    transition: border-color .18s ease, box-shadow .18s ease;
    position: relative;
}

.photo-popover .photo_tile {
    max-width: 320px;
    margin: 0 auto; 
}
.photo-popover .photo_tile:hover { 
    border-color:#3490dc; 
    box-shadow: 0 6px 18px rgba(47,56,93,0.08);
}
.photo-popover .tile-img {
    width:100%;
    height:225px;
    display:block;
    object-fit:cover;
}
.photo-popover .text-sm-left { 
    display:flex; 
    gap:8px; 
}
.photo-popover .photo-empty { 
    padding:40px; 
    color:#666; 
}
.photo-popover .caption { 
    font-size:14px; 
    color:#333; 
    margin-top:8px; 
}
.photo-popover .viewer-top-caption { 
    font-size:16px; 
    font-weight:600; 
    color:#222; 
    margin-bottom:8px; 
}
.photo-popover .photo-select-overlay { 
    position: absolute; 
    top: 4px; 
    right: 4px; 
    z-index: 10; 
}
.photo-popover .viewer-delete { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    z-index: 30; 
    border-radius: 4px; 
    padding: 6px 8px; 
}



.condition_status {
    padding: 0.5rem;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0.5rem;
}
.condition_status.Orange {
    background-color: #FF851A;
}
.condition_status.Red {
    background-color: #F93C3C;
}
.condition_status.Green {
    background-color: #21BA4F;
}.condition_status.Grey {
    background-color: #ffffff;
    border: 1px solid #CCCCCC;
}
/* td:nth-child(3) { 
    text-align: center !important; 
} */

/* .afloop-wrapper .card-body {
    flex: 1 1 auto;
    padding: 1.5rem 0.75rem !important;
} */


.legend-container{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 600 !important;
    color: #2f385d !important;
}

.legend-item{
    display: flex;
    align-items: center;
    margin-left: 15px;
}

/* Make thumbnail caption area taller, white and center-aligned without changing component logic */
.photo-popover .photo-container .photo_tile .tile-caption {
  background: #fff; 
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.photo-popover .photo-container .photo_tile .tile-caption em {
  /* keep the icon visually consistent and centered */
  line-height: 1;
  font-size: 16px;
}

.photo-popover .photo-container .photo_tile .tile-caption .tile-caption-text {
  /* clamp caption to two lines while remaining centered */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  word-break: break-word;
  line-height: 1.1em;
  text-align: left;
}

/* Slightly reduce caption height on very small screens */
@media (max-width: 480px) {
  .photo-popover .photo-container .photo_tile .tile-caption {
    min-height: 54px;
    padding: 6px 8px;
  }
}
/* inner image container fills available space so caption sits below */
.photo-popover .photo_inner { 
    flex: 1 1 auto; 
    position: relative; 
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* border-top-left-radius: 7px;
    border-top-right-radius: 7px;*/
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; 
    border-bottom: 1px solid #eef0f4;
    border-top:none;
    border-left:none;
    border-right:none;
}

/* Ensure viewer edit button is on top of overlays */
.photo-popover .viewer-edit-button { z-index: 10; }

.disable-icons {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Booking file card specific styles (used by bookings.vue) */
.booking-file-card {
    width: 120px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.booking-file-name {
    max-width: 100%;
}
.booking-file-close {
    position: absolute;
    top: -8px;
    right: -5px;
}
.booking-file-clickable {
    cursor: pointer;
}

.eclipse-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-checkbox {
  flex: 0 0 auto;
  align-self: left;
  width: 18px;
  height: 18px;
  margin: 0;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}