/*******************/
/** BUTTON STYLES **/
/*******************/
.btn-ex,
.btn-ex:link,
.btn-ex:visited,
.btn-action,
.btn-action:link,
.btn-action:visited {
    background: #A0DEFF;
    color: white;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-ex:hover,
.btn-ex:active,
.btn-action:hover,
.btn-action:active {
    background: #4DABF7;
    border: 1px solid #4DABF7;
}

.btn-red,
.btn-red:link,
.btn-red:visited {
    background: #BB2D3B;
    color: white;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-red:hover,
.btn-red:active {
    background: #B02A37;
    border: 1px solid #B02A37;
}

.btn-green,
.btn-green:link,
.btn-green:visited {
    background: #177a4c;
    color: white;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-green:hover,
.btn-green:active {
    background: #146841;
    border: 1px solid #146841;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-red:focus, .btn-red:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #B02A37;
}

.btn-green:focus, .btn-green:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #146841;
}

/******************/
/** INPUT STYLES **/
/******************/
.inp-container {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr);
}

.inp-banner {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
}

.inp-self {
    padding: 0 5px;
    border: 2px solid #aae1ff; /* tint of #A0DEFF */
    border-radius: 4px;
    background-color: #f1faff; /* tint of #A0DEFF */
    font-size: 1.3rem;
    box-sizing: border-box;
    max-width: 100%;
}

/*********************/
/** DROPDOWN STYLES **/
/*********************/
.dd-container {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
}

.dd-banner {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
}

.dd-self {
    width: 100%;
    padding: 5px;
    border: 2px solid #aae1ff;
    border-radius: 4px;
    background-color: #f1faff;
    font-size: 1.3rem;
}

/*********************/
/** TEXTAREA STYLES **/
/*********************/
.txt-area {
    width: 100%;
    resize: none;
    padding: 5px;
    border: 2px solid #aae1ff;
    border-radius: 4px;
    background-color: #f1faff;
    font-size: 1.4rem;
}

/*******************/
/** NOTIFICATIONS **/
/*******************/
.alert-notice {
    width: 100%;
    padding: 5px;
    border: 2px solid #bb2d3b;
    border-radius: 4px;
    background-color: #e4abb1;
    font-size: 1.2rem;
    font-weight: bold;
    color: black;
}

[v-cloak] {
    display: none;
}

.section-border {
    padding: 10px 8px;
    border-radius: 0.9rem;
    border: 2px solid #f2f2f2;
    box-shadow: 14px -3px 22px -12px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

/* Highlight selected element */
.element-highlight {
    animation: validation-pulse 0.8s ease-in-out 2;
}

@keyframes validation-pulse {
    0%, 100% {
        border-color: #dc3545;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }

    50% {
        border-color: #dc3545;
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15);
    }
}
/* Highlight selected element */