@media (max-width:800px){

  .closeMod7 {
    font-size: 15px !important;
  }

}



.filterActive{
    font-weight: 700;
    color: black;
    margin-left: 2vw;
    cursor: pointer;
}

.filterUnactive{
    font-weight: 700;
    color: rgba(0, 0, 0, 0.438);
    margin-left: 2vw;
    cursor: default;
}

.glossarioItem{
    margin-top: 1vh;
}

.glossarioItem1{
    margin-top: 1vh;
}

.glossarioItem2{
    margin-top: 1vh;
}

.glossarioItem3{
    margin-top: 1vh;
}

:root {
    --modal-duration: 1s;
    --modal-color: #428bca;
  }

  .modal {
    display: none;
    position: absolute;
    justify-content: center;
    align-items: center;
    z-index: 40;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-image:url(../img/BG-instrucoes.jpg) ;
    background-repeat: no-repeat;
    background-size:cover;
    
  }

  .modal1 {
    display: none;
    position: absolute;
    justify-content: center;
    align-items: center;
    z-index: 50;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(255,255,255, 0.3);  
  }
  
  .modal-content {
    background-color: #f1cd3c;
    width: 80vw;
    height: 80vh;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    padding: 5vh;
    border-radius: 10px;
  }
  .modal-content1 {
    background-color: #f1cd3c;
    width: 40vw;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    padding: 5vh;
    border-radius: 10px;
  }

  .modal-acerto{
    background-color: #6abb9b;
    width: 80vw;
    height: 65vh;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    padding: 5vh;
    border-radius: 10px;
    color: white;
  }

  .modal-branco{
    background-color: white;
    width: 80vw;
    height: 80vh;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    padding: 5vh;
    border-color: #e25f07;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
  }

  .img-zoom {
    width: 80vw;
    height: 90vh;
    background-color: #fffdfd;
    border-radius: 10px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.39), 0 7px 20px 0 rgba(0, 0, 0, 0.363);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    padding: 1vh;
  }
  
  .modalCheck-content {
    background-color: #ca5044;
    width: 80vw;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    padding: 5vh;
    border-radius: 10px;
    color: white;
    font-size: 3vh;
  }

  .draggedEtica{
    user-select: none;
    pointer-events: none;
    cursor: default;
  }

  .draggedQualidade{
    user-select: none;
    pointer-events: none;
    cursor: default;
  }

  .modal-body {
    padding-top: 5vh;
    font-size: 3vh;
  }
  
  .close {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close:hover,
  .close:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .closeCheck {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .closeCheck:hover,
  .closeCheck:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close1 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close1:hover,
  .close1:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close2 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close2:hover,
  .close2:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close2 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close2:hover,
  .close2:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close3 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close3:hover,
  .close3:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }
  
  .close4 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close4:hover,
  .close4:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close5 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close5:hover,
  .close5:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close6 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close6:hover,
  .close6:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close7 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close7:hover,
  .close7:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close8 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close8:hover,
  .close8:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close9 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close9:hover,
  .close9:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close10 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close10:hover,
  .close10:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close11 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close11:hover,
  .close11:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close12 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close12:hover,
  .close12:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close14 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close14:hover,
  .close14:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close15 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close15:hover,
  .close15:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close16 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close16:hover,
  .close16:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close17 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close17:hover,
  .close17:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .close18 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .close18:hover,
  .close18:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .closeSelect {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .closeSelect:hover,
  .closeSelect:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }

  .closeDrag2 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .closeDrag2:hover,
  .closeDrag2:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }
  .closeMod7 {
    color: black;
    float: right;
    font-size: 30px;
  }
  
  .closeMod7:hover,
  .closeMod7:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
  }


  .modal.mostrando{
    position: absolute;
    display: block;
  }


  #imgLupa{
    cursor: pointer;
  }

  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .containerModal{
    width: 70vw;
  }
  