.light-theme {
    --color-modal-layer:                                rgba(0, 0, 0, 0.5);
    --color-modal-header:                               #175796;
    --color-modal-header-title:                         #F9F9F9;
    --color-modal-header-close:                         #F9F9F9;
    --color-modal-box:                                  #F9F9F9;
    --color-modal-box-shadow:                           rgba(14, 14, 14, 0.5);
    --color-modal-box-button:                           #175796;
    --color-modal-box-button-hover:                     #164C83;

    --color-modal-box-button-copy:                      #E6E6E6;
    --color-modal-box-button-copy-hover:                #D9D7D7;

    --color-modal-box-button-forward:                      #E6E6E6;
    --color-modal-box-button-forward-hover:                #D9D7D7;


    --color-modal-box-default:                          #F9F9F9;
    --color-modal-box-success:                          #29E429;
    --color-modal-box-warning:                          #FFA500;
    --color-modal-box-error:                            #FF2F2F;
}

.dark-theme {
    --color-modal-layer:                                rgba(43, 43, 43, 0.5);
    --color-modal-header:                               #19487D;
    --color-modal-header-title:                         #F9F9F9;
    --color-modal-header-close:                         #F9F9F9;
    --color-modal-box:                                  #333333;
    --color-modal-box-shadow:                           rgba(14, 14, 14, 0.5);
    --color-modal-box-button:                           #F9F9F9;
    --color-modal-box-button-hover:                     #dfdfdf;

    --color-modal-box-button-copy:                      #19487D;
    --color-modal-box-button-copy-hover:                #123d6e;

    --color-modal-box-button-forward:                      #19487D;
    --color-modal-box-button-forward-hover:                #123d6e;


    --color-modal-box-default:                          #333333;
    --color-modal-box-success:                          #7EFF7E;
    --color-modal-box-warning:                          #FFC251;
    --color-modal-box-error:                            #F95353;
}


.modal-layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-modal-layer);
    z-index: 9998;
}

.modal-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;


    max-width: 1500px;
}

.modal-header--small {
    width: 375px;
}

.modal-header--medium {
    width: 545px;
}

.modal-header--large {
    width: 745px;
}

.modal-header--max {
    width: 1500px;
}

.modal-header-signal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    min-width: 30px;
    height: 45px;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 16px;
    font-weight: bold;

    /* color: var(--color-modal-header-title); */
    background-color: var(--color-modal-header);
}



.modal-header-signal--radius {
    border-radius: 10px 0px 0px 0px;
}

.modal-header-signal--default {
    color: var(--color-modal-header)
}
    
.modal-header-signal--success {
    color: var(--color-modal-box-success);
}
.modal-header-signal--warning {
    color: var(--color-modal-box-warning);
}
.modal-header-signal--error {
    color: var(--color-modal-box-error);
}

.modal-header-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* min-width: 285px; */
    height: 45px;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 16px;
    font-weight: bold;

    color: var(--color-modal-header-title);
    background-color: var(--color-modal-header);
}

/* .modal-header-title--radius {
    border-radius: 0px 10px 0px 0px;
} */

.modal-header-close {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    min-width: 30px;
    height: 45px;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;

    color: var(--color-modal-header-close);
    background-color: var(--color-modal-header);
}

/* .modal-header-close--small {
    width: 10%;
} */

.modal-header-close--radius {
    border-radius: 0px 10px 0px 0px;
}

.modal-header-void {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    min-width: 30px;
    height: 45px;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;

    /* color: var(--color-modal-header-close); */
    background-color: var(--color-modal-header);
}

/* .modal-header-void--small {
    width: 10%;
} */

.modal-header-void--radius {
    border-radius: 0px 10px 0px 0px;
}


.modal-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    max-width: 1500px;
    min-height: 100px;

    gap: 10px;

    background-color: var(--color-modal-box);
    box-shadow: 1px 12px 20px var(--color-modal-box-shadow);
}

.modal-box--small {
    width: 375px;
}

.modal-box--medium {
    width: 545px;
}

.modal-box--large {
    width: 745px;
}

.modal-box--max {
    width: 1500px;
}

.modal-box--radius {
    border-radius: 0px 0px 10px 10px;
}

.modal-box--default {
    border-top: 7.5px solid var(--color-modal-box-default);
}

.modal-box--success {
    border-top: 7.5px solid var(--color-modal-box-success);
}
.modal-box--warning {
    border-top: 7.5px solid var(--color-modal-box-warning);
}
.modal-box--error {
    border-top: 7.5px solid var(--color-modal-box-error);
}

.modal-box-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    gap: 20px;

    min-width: 325px;
    min-height: 75px;

    padding: 25px 10px;

    /* background-color: green; */
}

.modal-box-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* width: 97.5%; */
    height: 70px;

    gap: 40px;

    /* background-color: red; */
}

.modal-button {
    width: 20%;
    min-width: 150px;
    max-width: 200px;
    height: 50px;

    border: none;
    border-radius: 50px;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    color: var(--color-modal-box);
    background-color: var(--color-modal-box-button);
    
    transition: all 0.2s ease-in-out;
}

.modal-button:hover {
    scale: 1.05;

    background-color: var(--color-modal-box-button-hover);
}

.modal-button--copy {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px;

    border-radius: 0px;

    cursor: pointer;

    color: var(--color-modal-box);
    background-color: var(--color-modal-box-button-copy);
}

.modal-button--copy:hover {
    scale: 1;
    background-color: var(--color-modal-box-button-copy-hover);
}

.modal-button--forward {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px;

    border-radius: 0px;

    cursor: pointer;

    color: var(--color-modal-box);
    background-color: var(--color-modal-box-button-forward);
}

.modal-button--forward:hover {
    scale: 1;
    background-color: var(--color-modal-box-button-forward-hover);
}


.modal-qr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* margin-bottom: 20px; */
}

.modal-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: 100%;
    height: 34.8px;

    font-size: 8.5px;
}