:root {
    --primary-color: #5576D9;
    --primary-color-light: #8BBBD9;
    --secondary-color: #F2C6C2;
    --alert-color: #D95F8C;
    --accent-color: #FFC300;
    --white-color: #fff;
    --dark-color: #333;
    --border-light-color: #b1b8fd;
    --border-stroke: .03125em;
}



@font-face {
    font-family: 'Custom Font';
    src: url("/assets/fonts/admin-regular.ttf");
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Custom Font', 'Times New Roman', Times, serif;
}

    *:focus-visible {
        outline: none;
    }


html, body {
    inline-size: 100%;
    overflow-x: hidden;
    font-weight: 500;
    transition: .4s ease-in-out;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, menu, ol {
    list-style: none;
}

button {
    appearance: none;
    background: initial;
    border: none;
}

a, button {
    display: block;
    cursor: pointer;
}


label {
    display: block;
    margin-block-end: .2rem;
}

.form-group {
    padding-block: 1rem;
}

.form-control {
    block-size: 3rem;
}

.form-control, .dt-input, .form-select {
    padding: .5rem 1rem;
    font-size: 1.125em;
    background-color: var(--white-color);
    border: var(--border-stroke) solid var(--border-light-color);
    border-radius: 0;
}

.btn {
    min-inline-size: 7rem;
    block-size: 3rem;
    padding-inline: 2rem;
}

.btn-primary, .btn-secondary {
    font-size: 1.2em;
    color: var(--white-color);
}

.btn-primary {
    background: var(--primary-color);
}

.btn-secondary {
    background: var(--accent-color);
}

.text-md {
    font-size: 1.2em;
    font-weight: 600;
}

.text-danger {
    color: var(--alert-color);
}

.text-info-link {
    font-size: .8em;
    color: var(--alert-color);
    text-decoration: underline;
}

.footer {
    display: flex;
    justify-content: center;
    padding-block-end: .5rem;
    text-align: center;
}

    .footer small a {
        display: inline;
    }

.action-modal {
    min-inline-size: 18rem;
    padding: 2rem;
    overflow-y: auto;
    font-size: 1.2em;
    font-weight: 500;
    color: #fff;
    background: var(--alert-color);
    box-shadow: .05rem 0 .375rem 0 currentcolor;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .3s, transform .8s;
}

.modal-dismiss {
    position: absolute;
    top: .125rem;
    right: .5rem;
    inline-size: fit-content;
    font-size: 1.25em;
    color: #fff;
}

.action-modal.active {
    opacity: 1;
    transform: translateY(0);
}

@media(width <= 768px) {
    :root {
        --border-stroke: .0625em;
    }
}