/* Styling the login page. */
:root {
    --text: #050315;
    --bg: #fbfbfe;
    --primary: #002366;
    --secondary: #dedcff;
    --accent: #004fce;
    --textcontrast: #64d97b;
    --bgcontrast: #64d97b;
    --primarycontrast: #ffdd00;
    --secondarycontrast: #64d97b;
    --accentcontrast: #ffdd00;
    --text5: hsl(247, 75%, 5%, 5%);
    --text10: hsl(247, 75%, 5%, 10%);
    --text15: hsl(247, 75%, 5%, 15%);
    --text20: hsl(247, 75%, 5%, 20%);
    --text25: hsl(247, 75%, 5%, 25%);
    --text30: hsl(247, 75%, 5%, 30%);
    --text35: hsl(247, 75%, 5%, 35%);
    --text40: hsl(247, 75%, 5%, 40%);
    --text45: hsl(247, 75%, 5%, 45%);
    --text50: hsl(247, 75%, 5%, 50%);
    --text55: hsl(247, 75%, 5%, 55%);
    --text60: hsl(247, 75%, 5%, 60%);
    --text65: hsl(247, 75%, 5%, 65%);
    --text70: hsl(247, 75%, 5%, 70%);
    --text75: hsl(247, 75%, 5%, 75%);
    --text80: hsl(247, 75%, 5%, 80%);
    --text85: hsl(247, 75%, 5%, 85%);
    --text90: hsl(247, 75%, 5%, 90%);
    --text95: hsl(247, 75%, 5%, 95%);
    --primary5: hsl(219, 100%, 20%, 5%);
    --primary10: hsl(219, 100%, 20%, 10%);
    --primary15: hsl(219, 100%, 20%, 15%);
    --primary20: hsl(219, 100%, 20%, 20%);
    --primary25: hsl(219, 100%, 20%, 25%);
    --primary30: hsl(219, 100%, 20%, 30%);
    --primary35: hsl(219, 100%, 20%, 35%);
    --primary40: hsl(219, 100%, 20%, 40%);
    --primary45: hsl(219, 100%, 20%, 45%);
    --primary50: hsl(219, 100%, 20%, 50%);
    --primary55: hsl(219, 100%, 20%, 55%);
    --primary60: hsl(219, 100%, 20%, 60%);
    --primary65: hsl(219, 100%, 20%, 65%);
    --primary70: hsl(219, 100%, 20%, 70%);
    --primary75: hsl(219, 100%, 20%, 75%);
    --primary80: hsl(219, 100%, 20%, 80%);
    --primary85: hsl(219, 100%, 20%, 85%);
    --primary90: hsl(219, 100%, 20%, 90%);
    --primary95: hsl(219, 100%, 20%, 95%);
    --secondary5: hsl(243, 100%, 93%, 5%);
    --secondary10: hsl(243, 100%, 93%, 10%);
    --secondary15: hsl(243, 100%, 93%, 15%);
    --secondary20: hsl(243, 100%, 93%, 20%);
    --secondary25: hsl(243, 100%, 93%, 25%);
    --secondary30: hsl(243, 100%, 93%, 30%);
    --secondary35: hsl(243, 100%, 93%, 35%);
    --secondary40: hsl(243, 100%, 93%, 40%);
    --secondary45: hsl(243, 100%, 93%, 45%);
    --secondary50: hsl(243, 100%, 93%, 50%);
    --secondary55: hsl(243, 100%, 93%, 55%);
    --secondary60: hsl(243, 100%, 93%, 60%);
    --secondary65: hsl(243, 100%, 93%, 65%);
    --secondary70: hsl(243, 100%, 93%, 70%);
    --secondary75: hsl(243, 100%, 93%, 75%);
    --secondary80: hsl(243, 100%, 93%, 80%);
    --secondary85: hsl(243, 100%, 93%, 85%);
    --secondary90: hsl(243, 100%, 93%, 90%);
    --secondary95: hsl(243, 100%, 93%, 95%);
    --accent5: hsl(217, 100%, 40%, 5%);
    --accent10: hsl(217, 100%, 40%, 10%);
    --accent15: hsl(217, 100%, 40%, 15%);
    --accent20: hsl(217, 100%, 40%, 20%);
    --accent25: hsl(217, 100%, 40%, 25%);
    --accent30: hsl(217, 100%, 40%, 30%);
    --accent35: hsl(217, 100%, 40%, 35%);
    --accent40: hsl(217, 100%, 40%, 40%);
    --accent45: hsl(217, 100%, 40%, 45%);
    --accent50: hsl(217, 100%, 40%, 50%);
    --accent55: hsl(217, 100%, 40%, 55%);
    --accent60: hsl(217, 100%, 40%, 60%);
    --accent65: hsl(217, 100%, 40%, 65%);
    --accent70: hsl(217, 100%, 40%, 70%);
    --accent75: hsl(217, 100%, 40%, 75%);
    --accent80: hsl(217, 100%, 40%, 80%);
    --accent85: hsl(217, 100%, 40%, 85%);
    --accent90: hsl(217, 100%, 40%, 90%);
    --accent95: hsl(217, 100%, 40%, 95%);
}
.guest-body {
    background-color: var(--primary35);
}
.guest-body a {
    color: var(--accent);
}
.guest-body .btn-primary {
    background-color: var(--primary);
}
.guest-text-ufl::first-letter {
    text-transform: uppercase;
    color: currentColor;
    text-rendering: optimizeSpeed;
}
.guest-logo {
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
}
.guest-logo .svg-load {
    fill: #133B5C;
    stroke: #133B5C;
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: none;
}
.guest-card {
    background-color: var(--bg);
    border: 1px solid;
    width: clamp(200px, 50%, 400px);
    height: auto;
    border-color: transparent;
    border-radius: 1rem;
    overflow: hidden;
}
.guest-card .card-header {
    background-color: transparent;
    border: none;
}
.guest-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.guest-card .card-body > div::first-letter {
    text-transform: capitalize;
}
.guest-card .card-body > :last-child {
    margin-top: auto;
}
.guest-card .card-body form > div:last-child:has(button) {
    display: flex;
    justify-content: space-between;
}
.guest-card .form-control:focus {
    box-shadow: none;
}
.guest-card .text-wrap {
    font-size: clamp(0.75rem, 80%, 1rem);
}
.guest-card button::first-letter {
    text-transform: capitalize;
}

/* Styling the layout sections. */
.layout-content {
    position: relative;
    min-height: 44.6vh;
}
.layout-footer {
    position: relative;
    bottom: auto;
    top: auto;
}
@media screen and (width > 1920px){
    .layout-footer {
        position: relative;
        bottom: auto;
        top: 100%;
    }
}

/* Styling the logo. */
.brand-link {
    display: inline-block;
    width: auto;
    max-width: max(5vw, 225px);
    margin-right: 1rem;
}
.brand-link .brand-logo {
    width: auto;
    height: auto;
    max-height: 50px;
    display: inline-block;
}
.brand-logo :is(img, svg) {
    width: 100%;
    height: 100%;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: inherit !important;
}
.front-hidden-btn {
    display: none;
}

/* html, */
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
.brd-yellow {
    border: 1px solid yellow;
}
.brd-white {
    border: 1px solid white;
}
.image-align-left {
    float: left;
}
.image-align-center {
    float: none;
    text-align: center;
}
.image-align-right {
    float: right;
}
/* Styling the navbar. */
nav :is(.navbar-collapse, ul) { background-color:var(--header-bg) }
.submenu {
    position: absolute;
    z-index: 800;
    padding-left: 0px;
    min-width: 190px;
    margin-top: 0;
    list-style: none;
    display: none;
    max-width: 275px;
    width: 100%;
    top: 100%;
    border-color: var(--header-hover);
}
@media screen and (min-width:992px) {
    nav .menu :is(.nav-item, .nav-link):hover > .submenu {
        display: block;
    }
    .header .nav-item .plus {
        position: relative;
        display: none;
        content: '+';
        font-weight: 600;
        font-size: 25px;
        z-index: 10;
    }
}

nav .navbar-toggler {
    color: var(--header-text);
}
nav .navbar-toggler:focus {
    box-shadow: none;
    border: 0;
}
.footer p {
    margin-bottom: 0;
}
span[data-widget="selector"] {
    display: none;
    visibility: hidden;
    user-select: none;
}
.form-modal .modal-content {
    border-radius: 0px;
    border: 1px solid white;
}

/* Styling the button that takes you to the top of the page. */
#to-top-btn {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    color: #2B2B2B;
    cursor: pointer;
    padding: 1px 10px;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.322);
    width: 100px;
}
#to-top-btn .icon {
    margin-left: 15px;
}
#to-top-btn:hover {
    color: currentColor ;
    background-color: white;
    border: 1px solid #9F9F9F;
}
#to-top-btn:hover .icon {
    opacity: 1;
}
@media screen and (max-width:768px) {
    .header .navbar-nav::-webkit-scrollbar {
        display: none;
      }

    #to-top-btn {
        bottom: 110px;
        right: 0;
    }
}

.gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.gallery-item {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
}
.gallery-item .number {
    position: absolute;
    color: lightsteelblue;
    top: 0;
    left: 0;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center -30px;
}
.gallery-item:first-child {
    display: block;
}
.gallery-panel {
    height: auto;
    width: 100%;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: auto;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.gallery-panel .trigger {
    width: 70px;
    height: 70px;
    aspect-ratio: 1/1;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin: 0 10px;
}
.gallery-panel .trigger img {
    width: 100%;
    height: 100%;
    transform: scale(.8);
    object-fit: contain;
    object-position: center;
    cursor: pointer;
}
.gallery-panel .trigger:hover {
    box-shadow: 0px -2px 6px 0px lightsteelblue;
}
.gallery-panel .trigger.active {
    border: 1px solid steelblue;
}

.magnifying-glass {
    --bg: '';
    width: 100px; /* Set the size of the magnifying glass */
    height: 100px; /* Set the size of the magnifying glass */
    position: absolute;
    border: 2px solid #000;
    border-radius: 50%; /* Make it circular */
    cursor: none; /* Hide the cursor */
    display: none; /* Initially hide the magnifying glass */
    background: var(--bg) no-repeat; /* Set the background image */
    background-size: 300% 300%; /* Set the background size to be larger than the container */
    z-index: 10;
}

.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 100px;
    height: 100px;
}

.form-select:disabled {
    background-color: transparent;
}
input:read-only:focus {
    outline: none;
    box-shadow: none;
}

input[type="checkbox"][readonly]:read-only {
    opacity: 1;
    pointer-events: none;
    filter: none;
}
input[name="add-account"]:checked {
    opacity: 1;
    cursor: pointer;;
}
.input-group:has(input[name*="account"]) .input-group-text {
    min-width: 99px;
    text-align: end;
}
.input-group:has(input[name="add-account"]:checked) > .front-hidden-btn {
    display: block;
}

.alert-something-wrong {
    position: relative;
    padding-top: 13rem;
}
.alert-something-wrong::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 220px;
    height: 220px;
    background: #ffe3e2;
    z-index: 0;
    border-radius: 50%;
    translate: -50% -10px;
}
.alert-something-wrong h5 {
    font-size: clamp(1.8rem, 2vw + 1.8rem, 2.5rem);
    text-align: center;
    position: relative;
}
.alert-something-wrong h5::before {
    position: absolute;
    content: "";
    width: 200px;
    height: 200px;
    top: -13rem;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('./templates/something-wrong.svg');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    animation: shake-inline 0.70s cubic-bezier(.36,.07,.19,.97) both 2;
    filter: drop-shadow(6px 0px 1px #0000004f);

}
.alert-something-wrong h5::after {
    position: absolute;
    content: "x";
    width: 40px;
    height: 40px;
    background-color: red;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    top: -40px;
    left: 58%;
    box-shadow: 5px 0px 3px -1px #0000004f;
    display: flex;
    justify-content: center;
    align-items: center;
}
.alert-something-wrong p {
    text-align: justify;
    margin-bottom: 10px;
}


@keyframes shake-inline {
    0% {transform: translateX(-51%);}
    25% {transform: translateX(-49%);}
    50% {transform: translateX(-51%);}
    75% {transform: translateX(-49%);}
    100% {transform: translateX(-50%);}
}

img.image-style-align-left {
    float: inline-start;
    margin: 10px 10px 10px 0;
}

img.image-style-align-right {
    float: inline-end;
    margin: 10px 0 10px 10px;
}

.image_resized {
    max-width: 100%;
    height: auto;
}

figure.image {
    text-align: center;
    margin: 1rem 0;
}
figure.image.image-style-block-align-left {
    text-align: start;
}
figure.image.image-style-block-align-right {
    text-align: end;
}

a.marker {
    color: blue;
    text-decoration: underline;
}

.text-tiny {
    font-size: clamp(8px, 6px + 0.25vw, 12px);
    line-height: normal;
}
.text-small {
    font-size: clamp(10px, 8px + 0.25vw, 14px);
    line-height: normal;

}
.text-big {
    font-size: clamp(16px, 14px + 0.25vw, 22px);
    line-height: normal;

}
.text-huge {
    font-size: clamp(20px, 16px + 0.25vw, 28px);
    line-height: normal;
}