:root,
[data-bs-theme=light] {
    --telgo-primary-bg-subtle: #cfe2ff;
    --telgo-primary-border-subtle: #9ec5fe; /*this is also used for the btn background in the record upsert page*/
    --telgo-primary-border-subtle-hover: #7e9fcc;
    --telgo-primary: #0a58ca; /*primary-text bs class*/
    --telgo-warning: #AC6400;
    --telgo-warning-dark: #854E00;
    --telgo-danger: #C81C64;
    --telgo-danger-dark: #8C0D42;
    --telgo-info: #0dcaf0;
    --telgo-warning_contrast: #FFC700;
    --telgo-danger_contrast: #F1416C;
    --telgo-info_contrast: #0dcaf0;
    --telgo-dark-grey: #181C32;
    --lightblue-ish-header: #b6d8e3;
}

[data-bs-theme=dark] {
    --telgo-primary-bg-subtle: #031633;
    --telgo-primary-border-subtle: #084298; /*this is also used for the btn background in the record upsert page*/
    --telgo-primary-border-subtle-hover: #052c66;
    --telgo-primary: #6ea8fe; /*primary-text bs class*/
    --telgo-warning: #854E00;
    --telgo-warning-dark: #FFC700;
    --telgo-danger: #8C0D42;
    --telgo-danger-dark: #F1416C;
    --telgo-info: #0dcaf0; /*same as light mode! */
    --telgo-warning_contrast: #AC6400;
    --telgo-danger_contrast: #C81C64;
    --telgo-info_contrast: #0dcaf0;
    --telgo-dark-grey: #181C32;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

.btn,
.card,
.card.card-flush,
.fixed-btns-container .btn {
    box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.30) !important;
}

.btn:active {
    box-shadow: 200px 200px 200px 13px rgba(0,0,0,0.10) inset !important;
}

.btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.reset-btn-styles {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.back-to-main-btn {
    border-radius: 50% !important;
    width: 60px;
    height: 60px;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.back-to-main-btn:active {
    box-shadow: 2px 2px 5px 3px rgba(255,255,255,0.8) inset, -2px -2px 5px 3px rgba(0,0,0,0.4) inset !important;
}

.vertical-separator {
    width: 2px;
    background-color: var(--telgo-dark-grey);
    height: 60px;
}

.add-record-display-grid {
    display: grid;
    gap: 1rem;
    /*    grid-template-areas: old layout
        "area0 area0"
        "area1 area2"
        "area3 area4";*/
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
}

.area-0 {
    /*grid-area: area0; -> default area */
    grid-area: 1 / 1 / 2 / 3;
}

.img-container {
    margin-block: 10px;
    margin-inline: auto;
    text-align: center;
    width: 80%;
}

    .img-container img {
        max-width: 100%;
    }

.telgo-border-primary {
    border-color: var(--telgo-primary) !important;
}

.telgo-bg-primary-subtle {
    background-color: var(--telgo-primary-border-subtle-hover) !important;
}

.telgo-btn-primary {
    background-color: var(--telgo-primary-border-subtle) !important;
}

.telgo-btn-primary:hover {
    background-color: var(--telgo-primary-border-subtle-hover) !important;
}

.telgo-text-warning {
    --bs-text-opacity: 1;
    color: var(--telgo-warning) !important;
}

.telgo-text-danger {
    --bs-text-opacity: 1;
    color: var(--telgo-danger) !important;
    font-weight: bold;
}

.telgo-text-info {
    color: var(--telgo-info) !important;
}

.telgo-modal-dialog-xxl {
    max-width: 80% !important;
}

.telgo-accordion-button {
    padding-inline: 2.25rem !important;
    font-weight: 500 !important;
    font-size: 1.275rem !important;
}


.dimensional-img {
    max-width: 1200px;
    border-radius: 0.5rem;
}

.dimensional-img {
}

.dimensional-img-swal-container {
    width: auto !important;
    max-width: 1200px !important;
    height: auto !important;
}

.dimensional-img-swal-body {
    margin: 0px !important;
    max-height: none !important;
}

/* Image styling */
.dimensional-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

@layer utilities {
    .h-100 {
        height: 100vh;
    }

    .forbidden {
        cursor: not-allowed;
    }

    .hidden {
        display: none !important;
    }

    .disabled-cursor {
        cursor: not-allowed;
    }

    .py-30 {
        padding-top: 7.5rem !important;
        padding-bottom: 7.5rem !important;
    }

    .pt-30 {
        padding-top: 7.5rem !important;
    }

    .pb-30 {
        padding-bottom: 7.5rem !important;
    }

    .center-absolute {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@layer overides {
    /*select2 checked overide*/
    .form-check-input:checked {
        background-color: var(--telgo-primary) !important;
    }

    .form-check-input:not(:checked) {
        background-color: var(--telgo-primary-border-subtle) !important;
    }
    /*navs override*/
    .nav-tabs .nav-link.active {
        background-color: var(--telgo-primary-bg-subtle) !important;
        border-color: var(--telgo-primary) !important;
        /*color: var(--telgo-primary) !important;*/
    }
    /*    .nav-tabs .nav-link:hover.active {
        color: var(--telgo-primary) !important;
    }*/
    .nav-tabs .nav-link {
        border-color: var(--telgo-primary) !important;
        color: var(--telgo-primary) !important;
    }

    .nav-tabs .nav-link:hover {
        background-color: var(--telgo-primary-border-subtle) !important;
    }

    .nav-tabs {
        /*changing default color used by element*/
        --bs-nav-tabs-border-color: var(--telgo-primary) !important;
    }
}