.modal-container {
    /* Render above other divs */
    z-index: 2;
    position: absolute;

    width: 100%;
    align-items: center;
    text-align: center;

    margin-top: 60px;
}

.modal {
    background-color: white;

    /* Place the modal*/
    width: 40%;
    margin: auto; /* Center it */

    /* center the elements in the modal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    /* Style it! */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-color: #343434;
    border-style: solid;
    border-width: 2px;
    border-radius: 7px;
}

.modal-header-text-div {
    text-align: center;

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

    width: 100%;
    margin-top: 25px;

}

.modal-message {
    color: rgba(52, 52, 52, 0.56);
    font-size: 14px;
    width: 80%;
    margin-top: 15px;

    text-align: center;
}

.modal-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    /* center the button text on the same horizontal axis */
    align-items: baseline;
    font-size: 15px;

    margin-top: 15px;
    margin-bottom: 15px;
}

/* 
    the below css modifier is not called from the 
    default modal, but are instead applied on the buttons
    fragment passed into the modal
*/
.modal-close-button {
    color: #0081DE;
    border: none;
}

/* 
    the below css modifier is not called from the 
    default modal, but are instead applied on the buttons
    fragment passed into the modal
*/
/* underline the close button when hovered over */
.modal-close-button:hover {
    text-decoration: underline;
}

/* 
    the below css modifier is not called from the 
    default modal, but are instead applied on the buttons
    fragment passed into the modal
*/
.modal-action-button {
    background-color: #0081DE;
    color: #FFFFFF;

    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-left: 2vw;
    padding-right: 2vw;

    border-radius: 3px;
}

/* 
    the below css modifier is not called from the 
    default modal, but are instead applied on the buttons
    fragment passed into the modal

    this class should be applied when there are two buttons
    in the modal. It should be applied to the left button
    to space it from the right button. 
*/
.modal-dual-button-left {
    margin-right: 2vw;
}

/* 
    the below css modifier is not called from the 
    default modal, but are instead applied on the buttons
    fragment passed into the modal

    this class should be applied when there are two buttons
    in the modal. It should be applied to the right button to
    space it from the left button. 
*/
.modal-dual-button-right {
    margin-left: 2vw;
}

.modal-input {
    width: 100%;
    height: 30px;
    background-color: #ebebeb;
    font-size: 12px;
    color: #343434;

    border-color: #d5c8c8;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;

    box-sizing: border-box;
    padding-left: 5px;
}