@import "app-theme.css";


:root {
    --app-min-width: 360px;
}


* {
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100vh;
    min-width: var(--app-min-width);
}


img.app-logo {
    height: 30px;
}


.shadow-top {
    box-shadow: 0 -0.7rem 1rem -0.3rem rgba(0, 0, 0, .15) !important;
}


.form-control.no-validate:valid {
    padding: .375rem .75rem !important;
    background: none !important;
    background-color: var(--bs-body-bg) !important;
    background-clip: padding-box !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.form-check-input.no-validate:valid {
    border-color: var(--bs-border-color);
}
.form-check-label.no-validate {
    color: currentColor !important;
}


.app-flash-message {
    width: 50vw !important;
}
.app-flash-message .progress {
    height: 2px !important;
}


a[data-bs-toggle="collapse"][aria-expanded]::after {
    --app-collapse-link-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --app-collapse-link-icon-width: 1.25rem;
    --app-collapse-link-icon-transform: rotate(-180deg);
    --app-collapse-link-icon-transition: transform 0.2s ease-in-out;
    --app-collapse-link-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

    display: inline;
    width: var(--app-collapse-link-icon-width);
    height: var(--app-collapse-link-icon-width);
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: var(--app-collapse-link-width);
    transition: var(--app-collapse-link-icon-transition) !important;
}
a[data-bs-toggle="collapse"][aria-expanded="false"]::after {
    background-image: var(--app-collapse-link-icon);
}
a[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    background-image: var(--app-collapse-link-active-icon) !important;
    transform: var(--app-collapse-link-icon-transform) !important;
}

a.disabled[aria-disabled="true"] {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    pointer-events: none;
}


.icon-link-hover {
    --bs-icon-link-transform: translate3d(0, -.2rem, 0) !important;
}


.max-vh-100 {
    max-height: 100vh !important;
}


.w-10 {
    width: 10%;
}
.w-20 {
    width: 20%;
}
.w-30 {
    width: 30%;
}
.w-40 {
    width: 40%;
}
.w-80 {
    width: 80%;
}


.bg-opacity-90 {
    --bs-bg-opacity: 0.9;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .w-lg-50 {
        width: 50% !important;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .w-xxl-25 {
        width: 25% !important;
    }

    .app-flash-message {
        width: 40vw !important;
    }
}


/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .app-flash-message {
        width: 90vw !important;
    }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .overflow-md-y-auto {
        overflow-y: auto !important;
    }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
    
}


/* Apply styles starting from small devices and up to medium devices */
@media (min-width: 576px) and (max-width: 767.98px) {
    .app-flash-message {
        width: 70vw !important;
    }
}

/* Apply styles starting from medium devices and up to extra large devices */
@media (min-width: 768px) and (max-width: 1199.98px) {
    
}

/* Apply styles starting from extra large devices and up to xx-large devices */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    
}