/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    /* padding-top: 100px; */

    /*** Define Tamanho Para Centralizar Sem Quebrar ***/
    /* Full height */
    height: 100%;
    min-height: 100vh;

    /* Full width */
    width: 100%;

    /* Location of the box */
    left: 0;
    top: 0;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    box-shadow: rgb(0, 0, 0) 0px 0px 15px;
}

/* Modal Content */
.modal-content {
    /*** Define Tamanho Para Centralizar Sem Quebrar ***/
    height: fit-content;
    width: fit-content;

    position: relative;
    
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        /* top: -0; */
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        /* top: -0; */
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.modal-header {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    justify-items: center;

    height: fit-content !important;
    padding: 0;
    padding-left: 2vw;
    background-color: #5cb85c;
    color: white;
}

.modal-header h2 {
    color: white;
    font-size: 3.5vw;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

.modal-header .close {
    color: white;
    float: right;
    font-size: 3.7vw;
    font-weight: 700;

    height: fit-content;
    border-radius: 50%;
    padding: 0.5vw;
    margin: 0.4vw;
    transition: all ease 0.6s;
}

.modal-header .close:hover {
    color: red;
    text-decoration: none;
    cursor: pointer;
    background-color: #D5F5E3;
}

@media screen and (orientation:portrait) {
    .modal-header h2 {
        font-size: 6vw;
    }

    .modal-header .close {
        font-size: 6.2vw;
    }
}


/* .modal-body {
    /* padding: 2px 16px; 
    padding: 0;
} */

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Reestilização acordes */
.acorde-container .acorde {
    padding: 0 !important;
}

.acorde-container .acorde .item figure {
    background-color: white;
}

.acorde-container .acorde .item figure img {
    width: 89vh !important;
    height: auto !important;
}

.acorde-container .acorde {
    padding: 0;
    margin-top: 0;
}

#acr-nao-cad {
    color: black;
    /* display: none !important; */
    padding-left: 2vw;
    padding-right: 2vw;
    background-color: white;
}


/****************************/
/*** Botão Fixo a Direita ***/
/****************************/

/*** Links ******************/
/* .myModal .modal-content .modal-header {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
  
    height: fit-content !important;
    padding: 2vw;
    background-color: #D5F5E3;
  } */



.links-modal {
    display: flex;
    flex-direction: column;
    align-content: center;
    /* align-items: center; */

    background-color: #d9d9ff;
    background-color: white;
    padding: .5VW;
    padding-left: 1.5vw;
    padding-right: 1.5vw;

    width: fit-content;
}

.links-modal .opcao {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 !important;
    margin: 0 !important;

    width: 100%;
}

.links-modal .opcao a {
    padding: 0;
    margin: 0;
    padding: 0.5vw;
    transition: all ease 0.6s;
}

.links-modal .opcao a:hover {
    text-shadow: 0.3vw 0.3vw 0.5vw #4f4f4f;
}

/*** Botão para Exibir Menu Modal ***/
#link-modal {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;

    position: fixed;
    top: 46vh;
    /* right: 1.4vw; */
    right: 0;
    
    background: rgba(0, 0, 0, 0.25);
    font-weight: 600;
    text-decoration: none;
    margin: 0;
    padding: 0.8vw;
    padding-left: 1vw;
    border-radius: 50%;
    border-radius: 45% 0 0 45%;
    border: 0.2vw solid black;
    border-right: 0;
    text-align: center;
    /* transition: all 4s; */
    box-shadow: 0 0.25vw 0.5vw 0.25vw rgba(49, 49, 49, 0.365), 0 0.25vw 0.5vw 0.25vw rgba(49, 49, 49, 0.365);
}

#link-modal i {
    /* padding-top: 0.6vh; */
    /* margin: 0.5vw; */
    padding: 1vw;
    margin-right: 1vw;

    border-radius: 50%;
    background-color: rgb(255, 255, 255);

    font-size: 6vw;
    color: black;
}