:root {
    --tada-orange: #ee7f00 !important;
    --bs-navbar-padding-x: 1rem !important;
}

/***> GLOBALS ***/
body {
    background-color: lightgray;
}

a {
    color: #055278;
}

.ml-auto {
    margin-left: auto !important;
}

.mh-500 {
    min-height: 500px;
}

.border-radius {
    border-radius: 0.375rem;
}

.btn-block {
    width: 100%;
}

.text-right {
    text-align: right;
}

.lastUpdate {
    font-size: small;
}

#pickupday-fields-list .form-check {
    padding-left: 0;
}

#pickupday-fields-list .col-form-label {
    display: none;
}

#appVersion {
    position: absolute;
    left: 80px;
    top: 48px;
    font-size: xx-small;
}

#flashmessage .btn {
    margin-top: -5px;
    padding: 0;
}
/***< GLOBALS ***/

/**> FORM **/
label.required:before {
    content: "*";
    color: red;
}

.form-group > .select2-container {
    width: 100% !important;
}

.form-error-message {
    color: #ed3f2e;
}
/**< FORM **/

/***> BOOTSTRAP ***/
table {
    --bs-table-bg: unset !important;
}

.bg-secondary {
    background-color: var(--tada-orange) !important;
}

.bg-success {
    background-color: #47c47d !important;
}

.btn-success {
    color: #212529;
    background-color: #47c47d;
    border-color: #47c47d;
}

.btn-secondary {
    color: #ffffff;
    background-color: var(--tada-orange);
    border-color: var(--tada-orange);
}

.form-group legend, .label {
    color: rgba(var(--bs-body-color-rgb),.65);
}

.form-floating textarea {
    height: 200px !important;
}

.form-floating textarea.remarks-sm {
    height: 100px !important;
    resize: vertical;
}

.navbar {
    padding: 0.5rem 1rem;
}

.card-columns .card {
    display: inline-block;
}

ul.nav-tabs a.nav-link {
    color: #888888;
    text-decoration: none;
    background-color: #ccc;
    border: 1px solid #ddd;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--bs-gray-600);
}

/***< BOOTSTRAP ***/

/***> TOMSELECT ***/
.ts-control .item {
    padding-top: 1.2rem !important;
}

.ts-control input {
    padding-top: 1.2rem !important;
}

#globalsearchfield-ts-control {
    height: 16px !important;
}
/***< TOMSELECT ***/

/***> DATATABLES ***/
.dt-length, .dt-search {
    display: flex;
}

.dt-search {
    float: right;
}

.dt-length select{
    width: 62px;
    margin-bottom: 0.5rem;
}

.dt-length label {
    padding-left: 5px;
    padding-top: 3px;
}

.dt-search input {
    width: 172px;
    margin-bottom: 0.5rem;
}

.dt-paging {
    float: right;
}

.dt-info {
    font-size: 70%;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff !important;
    background-color: var(--tada-orange) !important;
    border-color: var(--tada-orange) !important;
}

.page-link {
    color: var(--tada-orange) !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
}

.table a {
    text-decoration: none;
}

.table > :not(caption) > * > * {
    background-color: unset;
}

.blurElement {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric {
    text-align: left !important;
}

.dtrg-level-0 {
    background-color: #e0e0e0 !important;
}
.dtrg-level-1 {
    background-color: #f0f0f0 !important;
}

.tableKW {
    font-weight: normal;
    font-size: 90%;
    background-color: #f0f0f0 ;
    display: flex;
    justify-content: space-between;
    padding-left: 3rem;
}

.tableSC {
    font-weight: bold;
}

.tableHeader25 {
    width: 25% !important;
}

.tableHeader75 {
    width: 75% !important;
}

table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric {
    text-align: right !important;
}
/***< DATATABLES ***/

/***> LOGIN FORM ***/
#cover {
    background: #222 url("../static/images/bg-login-070af6a73ab0b9c8b7324a5a712d31a2.jpg") center center no-repeat;
    background-size: cover;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    position: relative;
}

#cover-caption {
    width: 100%;
    position: relative;
    z-index: 1;
}

#login-form {
    background-color: rgba(0,0,0,0.6);
}
/***< LOGIN FORM ***/

/***> SERVING ***/
#serving h5 {
    font-size: 100%;
}
#serving span {
    font-size: 130%;
}

#serving .serving-name {
    font-size: 250%;
}

.serving-counter {
    font-size: 250%;
}

.specialactionToggle {
    height: 40px;
    max-width: 100px !important;
    width: 100% !important;
}

#serving .form-switch .form-check-input {
    margin-left: 0;
}

.specialactionToggle:checked {
    background-color: #2b8718;
}

#serving .form-switch {
    padding-left: 0;
}
 #serving .okBtn {
     font-size: 50px;
 }

 #serving #notificationValidUntilNew {
     font-size: 26px;
     height: 100%;
 }

 #serving .card,
 #serving .card-header:first-child,
 #serving .card-footer:last-child {
     border-radius: 0;
 }
/***< SERVING ***/
@media (min-width: 576px) {
    .contactPerson.card-columns {
        column-count: 2;
    }
}
@media (min-width: 768px) {
    .contactPerson.card-columns {
        column-count: 3;
    }
}

@media (min-width: 992px){
    .dropdown-menu .dropdown-toggle:after{
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }

    .dropdown-menu .dropdown-menu{
        margin-left:0; margin-right: 0;
    }

    .dropdown-menu li{
        position: relative;
    }
    .nav-item .submenu{
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .nav-item .submenu-left{
        right:100%; left:auto;
    }

    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
    .dropdown-menu > li:hover > .submenu{
        display: block;
    }
    .dropdown-item.subnav {
        font-size: 90%;
    }
}

#reminders li {
    min-height: 56px;
}
#reminders li .btn {
    display: none;
}
#reminders li:last-child .btn {
    display: block;
}