.d1 {
    background: pink;
}

.d2 {
    background: lightcyan;
}

.d3 {
    background: lightgray;
}

.d4 {
    background: lightgreen;
}

.d5 {
    background: lightskyblue;
}

body {
    margin: 0;
    background-color:#ffffff;
    border-top: solid 8px #0148AD;
    padding-top: 30px;
}


ul.alert>.validation-message {
    padding-left:40px;
}

.validation-summary {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: inherit;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);


    border-radius: 10px;
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);

    padding-left:40px;
}

/*.validation-errors {
    list-style-type: none;
    padding: 10px;
    margin: 10px 0;
    background-color: #f8d7da;*/ /* Light red background */
    /*border: 1px solid #f5c6cb;*/ /* Red border */
    /*border-radius: 4px;*/ /* Optional: Rounds the edges */
    /*color: #721c24;*/ /* Dark red text for better contrast */
    /*font-size: 14px;
}

.validation-message {
    margin-bottom: 5px;
    padding-left: 20px;
    position: relative;
}

    .validation-message::before {
        content: "⚠";*/ /* Adds a warning icon or symbol before each message */
        /*color: #721c24;*/ /* Matches the text color */
        /*font-size: 16px;
        position: absolute;
        left: 0;
        top: 0;
    }*/



/* --------------------- HEADER ----------------------------------------------------------*/
.header {
    max-width: 1400px;
    margin: 0 auto;
}

/* ------------ HEADER LEFT --------------*/


.login-box {
    
    border-radius: 15px;
    border-color:#f8f8f8 !important;
    background-color:#ffffff;
    width:22rem !important;
    margin-top: -15em;
}

.login-box .form-control {
  
    }

    .logo img {
        width: 230px;
    }

/* ------------ HEADER RIGHT ------------*/

.company-information {
    float: right;
    text-align: right;
    border-right: solid 2px #E1E1E1;
    padding-right: 24px;
    margin-right: 24px;
}

.time-block {
    border-right: solid 2px #E1E1E1;
    padding-right: 24px;
    margin-right: 24px;
}

.right-border {
    border-right: solid 2px #E1E1E1;
    padding-right: 24px;
    margin-right: 24px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.company-information .company-name {
    font-size: 19px;
    font-weight: bold;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .company-information .company-name {
    }
}


.company-information .profile {
    color: #8B8B8B;
    margin-top: -7px;
}

.contact {
    float: right;
    border-right: solid 2px #E1E1E1;
    padding-right: 21px;
}

    .contact a, a:link {
        color: #000000;
    }

        .contact a:hover {
            text-decoration: none;
            color: #0148AD;
        }

    .contact h4 {
        margin: 0;
    }

.log-out {
    float: right;
    width: 57px;
    height: 57px;
    margin-left: 20px;
}

.nav-wrapper {
    background: #0148AD;
    border-radius: 8px;
    color: #fff;
    width: 100%;
    margin-top: 17px;
}

.contact-header-text {
    font-weight: normal;
    font-size: 16px;
}

.whatsapp-number {
    padding: 8px 0 2px 32px;
    font-size: 18px;
    background: url("/assets/images/whatsapp-icon.svg") no-repeat 0 11px;
    background-size: 24px;
    font-weight: bold;
    text-align: left;
}

.contact-clock {
    color: #424952;
}

.log-out img {
    width: 57px;
}
/* ------------ NAVIGATION ------------*/
.nav-item {
    padding: 20px;
    display: block;
    color: #fff;
    text-decoration: none;
}

.logout-fa {
    font-size:2.2em;
}
/* --------------------- GENERAL CONTENT  -------------------------------------------------------*/
.detail-box {
    background-color: #f8f9fa; /* Light gray background */
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

.detail-box .row {
    margin-bottom: 4px;
}
.celltitle {
    font-weight:600;
    color: #495057; }

.label-accent {
    color: #0148AD;
}

/* --------------------- TEXT & TITLES -------------------- */
h1 {
    color: #0148AD;
    font-weight: bold;
    font-size: 27px;
}

h2 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    color: #424952;
    margin-bottom: 15px;
}

h3 {
    font-size: 22px;
    color: #424952;
}

.mt-align-title {
    margin-top: 0;
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .mt-align-title {
        margin-top: -56px;
    }
}

/* --------------------- BUTTON STYLES -------------------- */

.box-alert .large-btn {
    background-color: #0148AD !important;
    color: #fff;
    font-size: 20px;
    font-size: 20px;
    font-weight: normal;
    border: none;
    padding: 10px;
    border-radius: 5px;
}

.aligncenter {
    text-align: center !important;
}

.align-margin-0 {
    margin:0 auto  !important;
}
a.btn-primary:hover {
    text-decoration: none;
}

a.btn-primary,
.btn-primary {
    color: #fff;
    /*background-color: #0148AD;*/
    border-color: #0148AD;
    padding: 4px 22px;
}

.btn-secondary {
    color: #fff;
    background-color: #0D7BBC;
    border-color: #0D7BBC;
    padding: 4px 22px;
}

    .btn-secondary:hover {
        background-color: #1A89CA;
        border-color: #1A89CA;
    }

    .btn-secondary:active,
    .btn-secondary:focus {
        background-color: #0D7BBC !important;
        border-color: #0D7BBC !important;
    }

.btn-outline-primary {
    border-color: #0148AD;
    color: #0148AD;
    padding: 4px 22px;
}

    .btn-outline-primary:hover {
        border-color: #0148AD;
        background: #0148AD;
        color: #fff;
        /*padding: 4px 22px;*/
    }


.btn-fix-width {
    width: 234px;
    margin-left: 20px;
    padding: 6px 22px;
}

    .btn-fix-width.lg-270 {
        width: 270px;
    }

    .btn-fix-width:hover {
        text-decoration: none;
    }

label {
    font-size: 15px;
}

@media (min-width: 1200px) {
    .pr-lg-50 {
        padding-right: 50px;
    }

    .pl-lg-50 {
        padding-left: 50px;
    }
}

.fixed-heigth {
    height: 38px;
}

.ml-3 {
    margin-left: 15px !important;
}

.calendar-picker {
    background: #0148AD url("../img/calendar-icon.svg") no-repeat 8px 7px;
    width: 40px;
    height: 37px;
    margin-left: 20px;
    border-radius: 4px;
    border: none;
}

.question-sign {
    background: #0148AD url("../img/question-sign.svg") no-repeat 10px 9px;
    width: 33px;
    margin-left: 20px;
    border-radius: 50px;
    border: none;
    background-size: 10px;
    height: 30px;
    margin: 4px 0 0 13px;
}



/* --------------------- TABLE STYLES -------------------- */

.table.slim > :not(caption) > * > * {
    border: none;
    padding: 0.02rem 0;
}


.md-first-colum tr td:first-child {
    width: 40%;
}

table thead {
    background: #7085A3 !important;
    color: #fff !important;
}

    table thead td {
        padding: 0.7rem 0.5rem !important;
    }

.table > :not(caption) > * > * {
    border: none;
}

.see-more {
    text-decoration: none;
    color: #0148AD;
    padding: 3px 0 5px 32px;
}

.table a, a {
    text-decoration: none;
    color: #0148AD;
}

    .table a:hover, a:hover {
        text-decoration: underline;
        ;
    }


.width-215 {
    width: 215px;
}

tfoot td {
    padding: 0 .5rem !important;
}

.table-responsive .table {
    min-width: 1000px;
}

.empty-box {
    padding: 50px;
    background: #FBFBFB;
    margin-bottom: 30px;
    border: dashed 1px #DCDCDC;
    border-radius: 6px;
    color: #999;
}

.screen-actions {
    padding-top: 20px;
    border-top: solid 2px #eee;
    margin-top: 30px;
}

/* ---------------- SIMPLE FILTER LINKS ------------------- */
.simple-filter-links {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-top: 15px;
}

    .simple-filter-links li {
        display: inline-block;
    }

        .simple-filter-links li a {
            text-decoration: none;
            color: #0148AD;
            padding: 1px 20px;
            border-right: solid 1px #B5B5B5;
        }

        .simple-filter-links li:last-child a {
            border-right: none;
        }
/* --------------------- FOOTER -----------------------------------------------------------------*/


footer {
    background: #F5F5F5;
    padding: 40px;
    margin-top: 30px;
}

/* --------------------- RESPOSIVE STYLES -------------------------------------------------------*/


.company-information {
    display: none;
}

.logo {
    text-align: center;
}

.hide-on-mobile {
    display: none;
}

@media (min-width: 992px) {
    .company-information {
        display: block;
    }

    .logo {
        text-align: left;
    }

    .hide-on-mobile {
        display: block;
    }
}


/* 
@media (min-width: 992px) { ... }

*/


#notification-header {
    text-align: center;
    font-size: 1.1em;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 2px;
    margin-top: -30px;
    margin-bottom: 15px;
    color: #842029;
    color: #cc0000;
    background-color: #f8d7da;
    background-color: #fffacd;
    border-color: #f5c2c7;
    border: 2px dashed #dfd990;
}

    #notification-header a {
        color: #cc0000;
        font-weight: bold;
    }



.page-title {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

.grid-action-link,
.grid-action-link.link  {
    font-weight: bold;
    text-decoration: underline !important;
}


.request-thumbnail-container {
    display: flex;
    justify-content: start;
    align-items: start;
    margin-bottom: 10px;
}

.delete-img  {
    margin-right: 10px;
    margin-left: -4px;
}

.request-thumbnail {
    display: inline;
    height: 120px;
    border-radius: 4px;
    border: 2px solid #8f8f8f;
    margin-right: 10px;
    cursor: pointer;
}

.white-bg {
    background-color: #ffffff !important;
}

.page-footer {
    margin-bottom:80px;
}



.k-toolbar-button a:link {
    color:#000000 !important;
}

.no-link {
    text-decoration: none !important;
    color:#000000 !important;
}

.toolbar-save-actions {
    margin-top:3em;
    margin-bottom:1em;
    border-bottom-color: #ffffff !important;
}

.go-back {
    margin-top:4em !important;
    margin-bottom:1em;
}


.k-grid-header .k-sort-icon, .k-grid-header .k-sort-order {
    color: #ffffff;
}

.login-page-wrapper {
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}