/* Base styles */

@import url('/fonts/Akkurat/AkkuratFont.css');

body {
    font-family: 'Akkurat-Regular';
}

.small, small {
    font-size: .75rem;
}

.form-label {
    margin-bottom: .1rem;
}

.disabled {
    background-color: #e9ecef;
    opacity: 1;
}


.btn-togglePassword, .btn-togglePassword:hover, .btn-togglePassword:active {
    border-color: var(--bs-border-color) !important;
    border: 1px solid var(--bs-border-color);
    border-left: 0px;
    border-radius: var(--bs-border-radius);
    background: none !important;
}

.input-group:has(.btn-togglePassword) input {
    border-right: 0px;
}

.loading {
    background-color: #e6e6e6;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a9" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%23257EFF"></stop><stop offset=".3" stop-color="%23257EFF" stop-opacity=".9"></stop><stop offset=".6" stop-color="%23257EFF" stop-opacity=".6"></stop><stop offset=".8" stop-color="%23257EFF" stop-opacity=".3"></stop><stop offset="1" stop-color="%23257EFF" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a9)" stroke-width="27" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%23257EFF" stroke-width="27" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>');
    background-size: 20px 20px;
    background-position: right 10px center;
    background-repeat: no-repeat;
}


a:hover {
    text-decoration: none;
}

.btn-group-separated .btn {
    margin-left: 5px !important;
    border-radius: 4px !important;
}

.separateBtn {
    margin-left: 8px !important;
    border-radius: 4px !important;
}

.sidebar-dropdown .sidebar-link {
    background: transparent;
    border-left: 0;
    color: #adb5bd;
    font-size: 95%;
    font-weight: 400;
    padding: .625rem 1.5rem .625rem 2.5rem;
}

    .sidebar-dropdown .sidebar-link:before {
        content: none;
    }

.sidebar-dropdown .sidebar-item.active .sidebar-link {
    color: #e9ecef;
}

.topbar-dropdown .topbar-link {
    background: transparent;
    border-left: 0;
    color: #adb5bd;
    font-size: 95%;
    font-weight: 400;
    padding: .625rem 1.5rem .625rem 2.5rem;
}

    .topbar-dropdown .topbar-link:before {
        content: none;
    }

.topbar-dropdown .topbar-item.active .topbar-link {
    color: #e9ecef;
}

/* Validation Errors */

.form-control.input-validation-error {
    border-color: var(--bs-form-invalid-border-color);
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' height='800px' width='800px' viewBox='0 0 27.963 27.963'%3E%3Cpath d='M13.983 0C6.261 0 0.001 6.259 0.001 13.979c0 7.724 6.26 13.984 13.982 13.984s13.98-6.261 13.98-13.984C27.963 6.259 21.705 0 13.983 0zM13.983 26.531c-6.933 0-12.55-5.62-12.55-12.553 0-6.93 5.617-12.548 12.55-12.548 6.931 0 12.549 5.618 12.549 12.548C26.531 20.911 20.913 26.531 13.983 26.531z'/%3E%3Cpolygon points='15.579 17.158 16.191 4.579 11.804 4.579 12.414 17.158'/%3E%3Cpath d='M13.998 18.546c-1.471 0-2.5 1.029-2.5 2.526 0 1.443 0.999 2.528 2.444 2.528h0.056c1.499 0 2.469-1.085 2.469-2.528C16.441 19.575 15.468 18.546 13.998 18.546z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

    .form-control.input-validation-error:focus {
        border-color: var(--bs-form-invalid-border-color);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .25);
    }

    .form-control.input-validation-error + .select2-container .select2-selection {
        border-color: var(--bs-form-invalid-border-color);
        border-color: #dc3545;
        padding-right: calc(1.5em + .75rem);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' height='800px' width='800px' viewBox='0 0 27.963 27.963'%3E%3Cpath d='M13.983 0C6.261 0 0.001 6.259 0.001 13.979c0 7.724 6.26 13.984 13.982 13.984s13.98-6.261 13.98-13.984C27.963 6.259 21.705 0 13.983 0zM13.983 26.531c-6.933 0-12.55-5.62-12.55-12.553 0-6.93 5.617-12.548 12.55-12.548 6.931 0 12.549 5.618 12.549 12.548C26.531 20.911 20.913 26.531 13.983 26.531z'/%3E%3Cpolygon points='15.579 17.158 16.191 4.579 11.804 4.579 12.414 17.158'/%3E%3Cpath d='M13.998 18.546c-1.471 0-2.5 1.029-2.5 2.526 0 1.443 0.999 2.528 2.444 2.528h0.056c1.499 0 2.469-1.085 2.469-2.528C16.441 19.575 15.468 18.546 13.998 18.546z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }

.field-validation-error {
    display: block;
    color: var(--bs-form-invalid-color);
    font-size: 85%;
    padding-left: 0.2rem;
    margin-top: .25rem;
    width: 100%;
}

.tab-pane:has(.field-validation-error) {

}

.tab-error {
    color: #dc3545 !important;
}

/* Notification Styles */

.swal2-icon {
    font-size: 0.8em;
}

.swal2-actions {
    margin-top: 0;
}

    .swal2-actions button {
        font-size: 0.8em;
    }

.swal2-title {
    color: #545454;
    font-size: 1.2em;
    font-weight: 800;
    line-height: normal;
    z-index: 1;
    word-wrap: break-word;
}

.swal2-html-container {
    color: #545454 !important;
    font-size: 1em !important;
    font-weight: 300 !important;
    line-height: normal !important;
    z-index: 1;
    word-wrap: break-word !important;
}

.swal2-default-btn {
    background-color: transparent;
    border: 1px solid #545454;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    margin: 15px 5px 0;
    padding: 5px 30px;
    color: #545454;
}

    .swal2-default-btn:hover {
        background-color: #545454;
        color: #ffffff;
    }

.swal2-success-btn {
    background-color: transparent;
    border: 1px solid #23aa1d;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    margin: 15px 5px 0;
    padding: 5px 30px;
    color: #545454;
}

    .swal2-success-btn:hover {
        background-color: #23aa1d;
        color: #ffffff;
    }

.swal2-cancel-btn {
    background-color: transparent;
    border: 1px solid #ff0101;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    margin: 15px 5px 0;
    padding: 5px 30px;
    color: #545454;
}

    .swal2-cancel-btn:hover {
        background-color: #ff0101;
        color: #ffffff;
    }

.colored-toast.swal2-icon-success {
    background-color: #23aa1d !important;
}

.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: #ffffff !important;
}

.colored-toast .swal2-close {
    color: #ffffff !important;
}

.colored-toast .swal2-html-container {
    color: #ffffff !important;
}

.swal-wide {
    width: 90% !important;
}

/* Effects */
.animated-image {
    transition: opacity 0.5s ease-in-out; /* Smooth fade effect */
    opacity: 1;
}

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}

/* Form Switch */
.form-check-input {
    clear: left;
}

.form-switch.form-switch-sm {
    margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

    .form-switch.form-switch-sm .form-check-input {
        height: 1rem;
        width: calc(1rem + 0.75rem);
        border-radius: 2rem;
    }

.form-switch.form-switch-md {
    margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

    .form-switch.form-switch-md .form-check-input {
        height: 1.5rem;
        width: calc(2rem + 0.75rem);
        border-radius: 3rem;
    }

.form-switch.form-switch-lg {
    margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

    .form-switch.form-switch-lg .form-check-input {
        height: 2rem;
        width: calc(3rem + 0.75rem);
        border-radius: 4rem;
    }

.form-switch.form-switch-xl {
    margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

    .form-switch.form-switch-xl .form-check-input {
        height: 2.5rem;
        width: calc(4rem + 0.75rem);
        border-radius: 5rem;
    }

/* Buttons */
.btn-xl {
    font-size: 1.0rem;
}