@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

:root {
    --bs-c1: #9c8321;
    --bs-c1d10: #72621d;
    --bs-c1l50: #ffffba;
    --bs-c2: #02254b;
    --bs-c2a: #011B39;
    --bs-c2d10: #000C32;
    --bs-c2d20: #010913;
    --bs-c3: #bbbdbd;
    --bs-c4: #ebeae6;
    --bs-c5: #f4f4f3;
    --bs-c6: #8d8d8d;
    --bs-c7: #fff;
    --bs-c8: #000;
    --bs-font-family: 'Cairo', sans-serif;
    --bs-rtl: rtl;
    --bs-ltr: ltr;
    --line-height: 1.2em;
    --bs-font-size: 1rem;
    --bs-font-light: 300;
    --bs-font-regular: 400;
    --bs-font-medium: 500;
    --bs-font-bold: 700;
    --header-height: 4rem;
    --nav-width: 68px;
    --z-fixed: 100;
}

*,
::before,
::after {
    box-sizing: border-box;
}

.navigation-guide {
    margin-left: auto;
    /*margin-right: 1rem;*/
}

.container-guide {
    align-items: center;
    height:30px;
}

.guide-arrow {
    font: var(--bs-font-bold) 0.8rem/1.5rem var(--bs-font-family);
}

.guide-title {
    font: var(--bs-font-bold) 1rem/1.5rem var(--bs-font-family);
    color: var(--bs-c2);
    padding-left: .5rem;
    margin-left: .5rem;
    border-left: 1px solid var(--bs-c2);
    line-height: 30px !important;
}

.guide-text {
    font: var(--bs-font-medium) 0.8rem/1.5rem var(--bs-font-family);
    color: var(--bs-c2);
    padding: .5rem .5rem;
}

.navigation-title {
    font: var(--bs-font-bold) 1rem/1.5rem var(--bs-font-family);
    color: var(--bs-c2);
    padding-left: .5rem;
    margin-left: .5rem;
    border-left: 1px solid var(--bs-c2);
    line-height: 30px !important;
}

.navigation-text {
    font: var(--bs-font-medium) 0.9rem/1.5rem var(--bs-font-family);
    color: var(--bs-c2);
    padding: .5rem .5rem;
    font-weight: bold;
}

    .navigation-text:hover,
    .navigation-text:focus{
        color: var(--bs-c1);
    }

    .card {
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .05) !important;
    }

.first-card{
    margin-bottom: 1.5rem;
}

.next-card{
    margin: 1.5rem 0;
}

.content-card {
    margin: 1rem 0;
}

/*input[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
}*/

.datepicker tbody tr > td.day.today:before {
    background-color: unset !important;
}

.datepicker tbody tr > td span.year.focused,
.datepicker tbody tr > td span.year.focused:hover,
.datepicker tbody tr > td span.year.active:hover,
.datepicker tbody tr > td span.year.active.focused:hover,
.datepicker tbody tr > td span.year.active,
.datepicker tbody tr > td span.hour.focused,
.datepicker tbody tr > td span.hour.focused:hover,
.datepicker tbody tr > td span.hour.active:hover,
.datepicker tbody tr > td span.hour.active.focused:hover,
.datepicker tbody tr > td span.hour.active,
.datepicker tbody tr > td span.minute.focused,
.datepicker tbody tr > td span.minute.focused:hover,
.datepicker tbody tr > td span.minute.active:hover,
.datepicker tbody tr > td span.minute.active.focused:hover,
.datepicker tbody tr > td span.minute.active,
.datepicker tbody tr > td span.month.focused,
.datepicker tbody tr > td span.month.focused:hover,
.datepicker tbody tr > td span.month.active:hover,
.datepicker tbody tr > td span.month.active.focused:hover,
.datepicker tbody tr > td span.month.active,
.datepicker tbody tr > td.day.selected,
.datepicker tbody tr > td.day.selected:hover,
.datepicker tbody tr > td.day.active,
.datepicker tbody tr > td.day.active:hover {
    background: var(--bs-c2) !important;
}

.datepicker tbody tr > td.day.today {
    background: var(--bs-c1) !important;
}

.list-unstyled{
    padding-right: 0 !important;
    padding-left: 0 !important;
}

    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{
        left:auto !important;
        right: 8px !important;
    }

    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before{
        left:auto !important;
        right: 8px !important;
    }

.bootstrap-datetimepicker-widget.dropdown-menu{
    left:auto !important;
}

.read-mode {
    color: var(--bs-c1);
}

.asterisk{
    color: red;
}

.highlight {
    background-color: yellow;
    color: var(--bs-c2);
}

.place-text{
    color: var(--bs-c1);
}

p{
    line-height: revert;
    margin: 0;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn i {
        display: inline-flex;
        margin: 0 5px;
    }

.background-svg{
    height: 70vh;
}
/* For mobile screens (less than 576px) */
@media (max-width: 575px) {
    .background-svg {
        width: 75%;
    }
}

/* Custom styles for large screens and tablets in landscape mode */
@media (min-width: 768px){
    .background-svg {
        width: 60%;
    }
}

/* For tablets, and small desktops */
@media (max-width: 991px) {
}

/* For very large desktops (min-width: 1200px) */
@media (min-width: 1200px) {
}

.rounded-circle {
    border: 1px solid var(--bs-c1);
}