/*******************************************/
/**** Menu Modal ***************************/
/*******************************************/
.container {
   position: relative;
}

#mn-fade,
#mn-modal {
   transition: 0.5s;
   opacity: 1;
   pointer-events: all;
}

#mn-fade {
   /* Modal */
   position: fixed;
   top: 0;
   left: 0;
   z-index: 4;

   width: 100%;
   height: 100%;
   /* rgba para que opacidade funcione para o que está atrás e na frente */
   background-color: rgba(0, 0, 0, 0.3);
}

#mn-modal {
   display: flex;
   flex-direction: column;
   align-content: center;

   border-radius: 0.4vw;
   background-color: #fff;
   box-shadow: 0 0 1.4vw 0 #00000093;

   padding: 0 1vw 0 1vw;

   /* Modal */
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   /* modal fica na frente de fade */
   z-index: 5;
}

#mn-fade.mn-hide,
#mn-modal.mn-hide {
   /* Para que o modal comece oculto */
   opacity: 0;
   pointer-events: none;
}

#mn-modal.mn-hide {
   top: 0;
}

.mn-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.4vw 0.6vw;
   border-bottom: 0.15vw solid #ccc;
   /* background-color: aquamarine; */
}

.mn-header h1 {
   font-size: 2.5vw;
   font-weight: 700;
   color: #DA1C1C;
   width: 100%;
   text-align: center;
}

.mn-header p {
   width: 3.5vw;
}

.mn-bt-close {
   color: #DA1C1C;
   border: none;
   background-color: transparent;
   margin-right: -0.6vw;
}

.mn-bt-close i {
   font-weight: 900;
   border: 0.25vw solid transparent;
   padding: 0.2vw;

   border-radius: 50%;
}

.mn-bt-close i:hover {
   color: #fff;
   border: 0.25vw solid #fff;

   background-color: #DA1C1C;
   box-shadow: 0.4vw 0.4vw 0.4vw rgba(0, 0, 0, 0.501);

   transition: all ease 0.7s;
}

.mn-body {
   padding: 1vw 1.6vw 1.2vw 1.4vw;

   /* background-color: rgb(95, 124, 191); */
}

.mn-body * {
   vertical-align: middle;
}

.mn-body p {
   width: fit-content;
   font-size: 2.4vw;
   line-height: 1.8;
}

.mn-body p:hover {
   color: #DA1C1C;
   cursor: pointer;
}

.mn-body i {
   font-size: 3.1vw;
   padding-bottom: 0.3vw;
   font-weight: 700;
   color: black;
}


/*******************************************/
/**** Help Modal ***************************/
/*******************************************/

#mn2-fade,
#mn2-modal {
   transition: 0.5s;
   opacity: 1;
   pointer-events: all;
}

#mn2-fade {
   /* Modal */
   position: fixed;
   top: 0;
   left: 0;
   z-index: 6;

   width: 100%;
   height: 100%;
   /* rgba para que opacidade funcione para o que está atrás e na frente */
   background-color: rgba(0, 0, 0, 0.3);
}

#mn2-modal {
   display: flex;
   flex-direction: column;
   align-content: center;
   /* flex-wrap: wrap; */

   width: 80vw;
   height: fit-content;
   max-height: 90vh;

   overflow-x: scroll;
   overflow: scroll;
   white-space: nowrap;

   border-radius: 0.4vw;
   background-color: #eafaf1;
   box-shadow: 0 0 1.4vw 0 #00000093;

   padding: 0 2vw 0.7vw 2vw;

   /* Modal */
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   /* modal fica na frente de fade */
   z-index: 7;
}

#mn2-modal.mn2-hide,
#mn2-fade.mn2-hide {
   /* Para que o modal comece oculto */
   opacity: 0;
   pointer-events: none;
}

#mn2-modal.mn2-hide {
   top: 0;
}

#mn2-modal h1 {
   font-size: 2.1vw;
   font-weight: 600;
   line-height: 1.6;
   margin-top: 1vw;
   color: #DA1C1C;

   position: relative;
}

.mn2-bt-close {
   position: fixed;
   width: fit-content;
   margin-top: 0.2vw;
   margin-right: 0.6vw;
   padding: 0.2vw;
   background-color: transparent;
   border: 0.25vw solid transparent;

   top: 0;
   right: 0;
   /* margin-left: 70vw; */
}

.mn2-bt-close i {
   font-size: 3.8vw;
   font-weight: 700;
   color: red;
   border-radius: 0.7vw;
   transition: all ease 0.5s;
   border: 0.25vw solid transparent;

   vertical-align: middle;
}

.mn2-bt-close i:hover {
   background-color: #DA1C1C;
   color: #fff;
   border: 0.25vw solid #fff;

   box-shadow: 0.4vw 0.4vw 0.4vw rgba(0, 0, 0, 0.501);
}

.mn2-body .explica {
   font-size: 1.8vw;
   color: mediumblue;
   line-height: 1;

   padding: 0.4vw 0;

   word-break: keep-all;
   white-space: normal;
   text-align: justify;
}


/*  */


.mn2-func-bt {
   padding-bottom: 1vw;
}

.mn2-func-bt .bt {
   display: flex;
   align-items: center;
   align-content: center;

   font-size: 1.2vw;
   font-weight: 600;
   width: fit-content;
   padding: 0 0.8vw;
   padding: 0.4vw 0.8vw;
   background-color: #a3a3a3;
   color: #fff;
   border: none;
   border-radius: 0.3vw;
   letter-spacing: 0.06vw;
   transition: 0.4s;
}

.mn2-func-bt .bt i {
   font-size: 2vw;
   vertical-align: middle;
}

.mn2-func-bt .bt-treinar {
   background-color: #3498db;
}

.mn2-func-bt .bt-pular {
   background-color: #2ecc71;
}

.mn2-func-bt .bt-cancelar {
   background-color: #85929e;
}

/*  */

.mn2-margem-menor {
   margin-bottom: -1vw;
}

.mn2-func-bt .mn-restart {
   font-size: 1.5vw;
   font-weight: 600;
   color: black;
}

.mn2-func-bt .mn-restart i {
   font-size: 2vw;
   font-weight: 900;
   vertical-align: middle;
   margin-bottom: 0.4vw;
}