/* New Modal Style */
:root {
    /* colors */
    --primary-brand-color: #21619b;
    --secondary-brand-color: #3770a6;
    --bg-modal-color: rgba(0, 0, 0, 0.3);
    --bg-modal-box-color: white;
    --hover-btn-color: #104743;
    --error-primary-color: #ffccd7;
    --error-secondary-color: #990000;
    --font-label-color: var(--bg-modal-box-color);

    /* Header Gradient */
    --blue-gradient: rgb(35,96,154);
    --blue-gradient-moz: -moz-linear-gradient(0deg, var(--primary-brand-color) 33%, var(--secondary-brand-color) 67%);
    --blue-gradient-webkit: -webkit-linear-gradient(0deg, var(--primary-brand-color) 33%, var(--secondary-brand-color) 67%);
    --blue-gradient-linear: linear-gradient(0deg, var(--primary-brand-color) 33%, var(--secondary-brand-color) 67%);

    /* Shadow */
    --container-shadow: 5px -1px rgb(0 0 0 / .8);

    /* Spacing */
    --header-space: 7px;

    /* Font Settings */
    --p-font-size: 14px;
    --x-btn-font-size: calc(var(--p-font-size) + 7px);
    --x-btn-size: calc(var(--p-font-size) + 4px);
    --content-font-size: calc(var(--p-font-size) - 1px);

    --box-radius: 10px;

    /* Modal size */
    --min-width-box: 300px;
    --max-width-box: 500px;

    /* Animations */
    --fade-anim-timing: .05s;
}
/* The styles for the new Modal Dialog*/
/* background */
.modal-box__background {
    background-color: var(--bg-modal-color, rgba(0, 0, 0, 0.3));
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 5;
    justify-content: center;
    align-items: center;
    display:flex;
    visibility: hidden;
    opacity: 0;
    /* Animation settings */
    animation-duration: var(--fade-anim-timing, .2s);
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.modal-box__background.modal__fade-in {
    animation-name: slidein;
    animation-direction: normal;
}
.modal-box__background.modal__fade-out {
    animation-duration: calc(var(--fade-anim-timing, .2s) * 2);
    animation-name: slideout;
    animation-direction: normal;
}
@keyframes slidein {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}
@keyframes slideout {
    0% {
        visibility: visible;
        opacity: 1;
    }
    100% {
        visibility: hidden;
        opacity: 0;
    }
}

/* Modal container */
.modal-box__background .modal-box__main {
    background-color: var(--bg-modal-box-color, white);;
    min-width: var(--min-width-box, 300px);
    max-width: var(--max-width-box, 500px);
    border-radius: var(--box-radius, 10px);
    box-shadow: 0px 0px var(--container-shadow, 5px -1px rgb(0 0 0 / .8));
    width: 70%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    opacity: .5;
    transform: translateY(35px) scale(.8);
}
/* Animation transitions for the main box */
.modal-box__background.modal__fade-in .modal-box__main {
    transition: calc(var(--fade-anim-timing, .2s) * 4);
    transform: translateY(0px) scale(1);
    opacity: 1;
    transition-timing-function: easeout;
}
.modal-box__background.modal__fade-out .modal-box__main {
    transition: calc(var(--fade-anim-timing, .2s) * 1);
    transform: translateY(35px) scale(.8);
    opacity: .5;
    transition-timing-function: easeout;
}
/* Modal header */
.modal-box__background .modal-box__main .modal-box__header {
    /* setting the gradient background color and support for all browsers */
    background: var(--primary-brand-color, #21419b);
    background: var(--blue-gradient);
    background: var(--blue-gradient-moz);
    background: var(--blue-gradient-webkit);
    background: var(--blue-gradient-linear);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#21619b",endColorstr="#3770a6",GradientType=1);

    padding: var(--header-space, 7px) calc(var(--header-space, 7px) * 2);
    box-shadow: 0px 1px var(--container-shadow, 5px -1px rgb(0 0 0 / .8));
    border-top-left-radius: var(--box-radius, 10px);
    border-top-right-radius: var(--box-radius, 10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* header modal */
.modal-box__background .modal-box__main .modal-box__header h2 {
    font-size: var(--p-font-size, 14px);
    color: var(--font-label-color, white);
    margin: 0;
    max-width: 90%;
}
/* Close X button */
.modal-box__background .modal-box__main .modal-box__header .mm-modal__close {
    color: var(--hover-btn-color, #104743);
    font-size: var(--x-btn-font-size, 21px);
    background-color: var(--bg-modal-box-color, white);
    height: var(--x-btn-size, 11px);
    width: var(--x-btn-size, 11px);
    box-shadow: 0px 1px var(--container-shadow, 5px -1px rgb(0 0 0 / .8));
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 51%;
    cursor: pointer;
}
.modal-box__background .modal-box__main .modal-box__header .mm-modal__close:hover {
    background-color: var(--hover-btn-color, #104743);
    color: var(--bg-modal-box-color, white);
}

/* Error message */
.modal-box__background .modal-box__main .error {
    background-color: var(--error-primary-color, #ffccd7);
    border: 2px solid var(--error-secondary-color, #990000);
    width: 90%;
    margin: auto;
    font-weight: bold;
    font-size: 14px;
}
.modal-box__background .modal-box__main .error:empty {
    display: none;
}

/* Modal Content */ 
.modal-box__background .modal-box__main .modal-box__content {
    width: 90%;
    margin: auto;
    display: flex;
    gap: 5px;
    flex-direction: column;
}
.modal-box__background .modal-box__main .modal-box__content p {
    font-size: var(--content-font-size, 13px);
    margin: 0;
    padding: 0;
}

/* Modal Details */
.modal-box__background .modal-box__main .modal-box__content .modal-box__details {
    width: 97%;
    margin:auto;
    max-height: 60vh;
    overflow-y: auto;
}
.modal-box__background .modal-box__main .modal-box__content .modal-box__details h3 {
    margin-bottom: 5px;
}
.modal-box__background .modal-box__main .modal-box__content .modal-box__details ul {
    margin: 5px 0px 5px 5%;
}
.modal-box__background .modal-box__main .modal-box__content label {
    font-weight: bold;
}
.modal-box__details strong.accent_color {
    color: #21619b;
}

/* Close Button */
.modal-box__background .modal-box__main .modal-box__footer {
    padding: 0px calc(var(--header-space, 7px) * 3);
    display: flex;
    flex-direction: column;
    align-items: end
}
.modal-box__background .modal-box__main .modal-box__footer button,
.modal-box__background .modal-box__main .modal-box__footer input {
    border-radius: calc(var(--box-radius) / 2, 5px);
    box-shadow: 1px 1px var(--container-shadow, 5px -1px rgb(0 0 0 / .8));
    color: var(--primary-brand-color, #21619b);
    background-color: var(--bg-modal-box-color, white);
    border: 2px solid var(--primary-brand-color, #21619b);
    font-size: var(--p-font-size, 14px);
    min-width: calc(var(--p-font-size, 14px) * 5.5);
    min-height: calc(var(--p-font-size, 14px) * 2);
    margin-block-end: calc(var(--p-font-size, 14px) * 1.4);
    font-weight: bold;
    cursor: pointer;
}
.modal-box__background .modal-box__main .modal-box__footer button:hover,
.modal-box__background .modal-box__main .modal-box__footer input:hover {
    background-color: var(--primary-brand-color, #21619b);
    color: var(--font-label-color, white);
}

#input_number_container {
    display: flex;
    gap: 10px;
}
#input_number_container input[type=number] {
    width: 55px;
}