#modal_pop_up_comment {
   max-width: 90% !important;
   background-color: transparent;
   border-radius: 10px !important;
   box-shadow: 0px 7px 13px 2px #000000 !important;
}
#modal_pop_up_comment .container {
   position: relative;
   width: 500px;
   max-width: 100%;
   height: 100%;
   padding: 30px;
   background-color: #0B0B0B;
   border: 2px solid #191919;
   border-radius: 10px;
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: column;
   overflow: hidden;
}
/* BOTÃO PARA FECHAR O MODAL DO CONTEÚDO */
#modal_pop_up_comment .container .close-modal {
   position: relative;
   padding: 10px;
   top: -20px;
   right: -20px;
   border-radius: 100%;
   color: var(--color_main);
   display: flex;
   align-items: center;
   justify-content: center;
   align-self: flex-end;
   cursor: pointer;
}
#modal_pop_up_comment .container .close-modal::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #ffffff25;
   border-radius: 100%;
   opacity: 0;
   transform: scale(0.3);
   transition: all 0.15s ease;
}
#modal_pop_up_comment .container .close-modal:hover::before {
   opacity: 1;
   transform: scale(1.06);
}


/* IMAGEM DO CONTEÚDO */
#modal_pop_up_comment .container img {
   position: relative;
   height: 200px;
   padding: 0px;
   margin: -5px auto 30px;
}


/* TITULO DO CONTEÚDO */
#modal_pop_up_comment .container h2 {
   width: 100%;
   padding: 0px;
   margin-bottom: 20px;
   color: #D6D6D6;
   font-weight: 700;
   font-size: 24px;
   line-height: 1.2;
}


/* SUBTITULO DO CONTEÚDO */
#modal_pop_up_comment .container p {
   margin-bottom: 60px;
   color: #7A7A7A;
   font-weight: 500;
   font-size: 17px;
}


/* INPUT DO CONTEÚDO */
#modal_pop_up_comment .container form {
   position: relative;
   width: max-content;
   max-width: 100%;
   height: max-content;
}
#modal_pop_up_comment .container form .content-input {
   position: relative;
   width: 100%;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 20px 10px;
   overflow: hidden;
}
#modal_pop_up_comment .container form .content-input input {
   position: relative;
   width: 240px;
   max-width: 100%;
   padding: 10px 15px;
   background-color: #0B0B0B;
   border: 2px solid #363636;
   border-radius: 10px;
   box-shadow: 0px 0px 10px 1px #000000b3;
   color: #4c4c4c;
   font-weight: 500;
   font-size: 16px;
   font-family: inherit;
   transition: all 0.3s ease;
}
#modal_pop_up_comment .container form .content-input input:hover,
#modal_pop_up_comment .container form .content-input input:focus {
   border-color: #7a7a7a;
   color: #999999;
}
#modal_pop_up_comment .container form .content-input input.valid,
#modal_pop_up_comment .container form .content-input input.valid:hover,
#modal_pop_up_comment .container form .content-input input.valid:focus {
   border-color: var(--color_main);
   color: var(--color_main);
}
#modal_pop_up_comment .container form .content-input input.invalid,
#modal_pop_up_comment .container form .content-input input.invalid:hover,
#modal_pop_up_comment .container form .content-input input.invalid:focus {
   border-color: #dd3341;
   color: #dd3341;
}

#modal_pop_up_comment .container form .content-input input::placeholder {
   color: inherit;
}

/* BOTÃO DE CONFIRMAR */
#modal_pop_up_comment .container form .content-input button {
   position: relative;
   width: max-content;
   max-width: 235px;
   padding: 10px 24px;
   background-color: var(--color_main);
   border: 2px solid var(--color_main);
   border-radius: 10px;
   font-weight: 500;
   font-size: 16px;
   font-family: inherit;
   text-shadow: -0.05em 0em currentColor;
   flex: 1 0 max-content;
   cursor: pointer;
   transition: all 0.3s ease;
}
#modal_pop_up_comment .container form .content-input button:hover {
   background-color: var(--color_main_dark);
   border-color: var(--color_main_dark);
}

#modal_pop_up_comment .container form .content-input button:disabled,
#modal_pop_up_comment .container form .content-input button:disabled:hover {
   background-color: #363636;
   border: 2px solid #363636;
   color: #0b0b0b;
   cursor: default;
}


@media (max-width: 540px) {
   #modal_pop_up_comment .container h2 {
      font-size: 23px !important;
   }

   #modal_pop_up_comment .container p {
      font-size: 16px;
   }
}

@media (max-width: 390px) {
   #modal_pop_up_comment .container p {
      font-size: 15px;
   }
}

@media (max-width: 340px) {
   #modal_pop_up_comment .container h2 {
      font-size: 22px !important;
   }

   #modal_pop_up_comment .container p {
      font-size: 14px;
   }

   #modal_pop_up_comment .container form .content-input input {
      font-size: 15px;
   }
   
   #modal_pop_up_comment .container form .content-input button {
      padding: 10px 24px 8px;
      font-size: 15px;
   }
}

@media (max-width: 320px) {
   #modal_pop_up_comment .container {
      padding: 30px 20px;
   }
   #modal_pop_up_comment .container .close-modal {
      right: -15px;
   }

   #modal_pop_up_comment .container form .content-input {
      padding: 0px 10px;
   }
}

@media (max-width: 290px) {
   #modal_pop_up_comment .container h2 {
      font-size: 20px !important;
   }

   #modal_pop_up_comment .container p {
      font-size: 13.5px;
   }
}