.principal {
    border-radius: 20px;
    display: block;
}
#componentsArea,
#confirmacoesBody,
.apenas-lista.with-before #listaBefore,
#privateComponent,
#confirmacaoMobile{
    width: 100%;
    border-radius: 10px 10px;
    background-color: rgba(var(--theme-background-box-color), var(--theme-background-opacity));
    border: 1px solid var(--theme-background-menu);   
}
#componentsArea{
    z-index: 0;
}


#listaPresente #confirmacoesBody,
#listaPresente #listaBefore{
    margin-bottom: 2rem;
}
.addContent{
    width: 100%;
    border: 2px dotted var(--cor-principal);
    min-height: 50px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background-color: var(--cor-principal);
    color: white;
    font-size:20px;
    font-weight: bold;
    border-radius: 10px;
    margin-top: 5px;
}
.addContent span { 
    vertical-align:-25%;
    cursor:pointer;
  }

  .addContent {  
    pointer-events: none;
}

.addContent span {
    pointer-events: auto;
}
.addContent:hover { 
    color: var( --cor-terciaria);
    border: 2px dotted var(--cor-terciaria);
}


#componentsArea > *.component,
#muralBody > *,
#confirmacoesBody > *,
#listaBefore > *{
    display: block;
}

#listaBefore{
    max-width: 100vw;
}

#componentsArea > *:not(:first-child) {
    margin-top: 20px;
}

.chooseComponent{
    width: 100%;
    min-height: 50px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    border-radius: 10px;
    background-color: var(--cor-principal);
    display: none;
    
}

.chooseComponent a{
    display: inline-block;
    color:#FFF !important;
    font-size: 12px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    cursor:pointer;
    
}
.chooseComponent a i{
    display: block;
    font-size: 35px;
}
.chooseComponent a:hover{
    text-decoration: none;
    color: var(--cor-terciaria) !important; 
}

div.button_confirm{
    display: table-cell;
    vertical-align: middle;
}
div.group_button{
    display: table;
    width: 100%;
}

div.button_confirm button{
    margin-top:15px;
}

.gerar-convite{
    background-color: rgba(255, 255, 255, 0.75);
    border: 2px solid var(--cor-principal);
}
#convite-body-mobile{
    margin-top: 500px;
}
div.bt_concluir{
    margin-top: 20px;
    border-bottom: 2px dotted var(--cor-principal);
    padding-bottom: 20px;
}

.eventsComponent{
    font-size: 30px;
    color: var(--cor-principal);
    cursor: pointer;
    margin-top:20px;
    margin-bottom: 20px;
}
.eventsComponent > *{
    margin-right: 5px;
    margin-top:20px;
}



.ico_edit_var{
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    padding: 5px;
    background: white;
    border: 2px solid var(--cor-principal);
    font-size: 17px;
    color: var(--cor-principal);
    cursor:pointer;
}

#recados_titulo{
    border: 1px solid var(--theme-background-menu);
    border-radius: 10px;
    background-color: var(--theme-background-menu);
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

#recados_titulo h2{
    color: var(--theme-menu);
}

.mural-col-add-row{
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
    cursor: pointer;
    text-align: center;
}
.mural-col-add-row > *{
    display: block;
}
.mural-col-add-row i{
   font-size: 30px;
}

.mural-item{
    border: 2px dotted var(--cor-principal);
    display: block;
    text-align: center;
    font-size: 20px;
    cursor:pointer;
}
.mural-item i{
    font-size: 50px;
}

.mural-item *{
    display: block;
}
.mural-item-size-1{
    width: 250px;
    height: 250px;
}
.mural-item-size-1 i{
    margin-top: 80px;
}
.mural-item-size-2{
    width: 192px;
    height: 192px;
}
.mural-item-size-2 i{
    margin-top: 40px;
}

#myphoto{
    position: absolute;
    top: -100px;
}

.mural-line{
    margin-bottom:20px;
}

.mural-legend-size-1{
    width: 250px;
}

.mural-legend-size-2{
    width: 192px;
}

.modal{
    z-index: 5000;
}

.div-remover-img-slider{
    font-size: 1em;
    color:var(--cor-principal);
    cursor:pointer;
}
.div-remover-img-slider:hover{
    color:var(--cor-secundaria);
}

.header-editor,
.weeks-editor{
    text-align:center;
    font-size:2em;
    color:var(--cor-principal);
    border-top: 2px dotted var(--cor-principal);
    
}

.add-img{
    border: 2px dotted var(--cor-principal);
    display: block;
    text-align: center;
    font-size: 20px;
    cursor:pointer;
    width: 420px;
    height: 180px;
}

.add-img *{
    display: block;
}

.add-img i{
    margin-top: 60px;
    font-size: 30px;
}


.component-text{
    padding-left: 1rem;
    padding-right: 1rem;
}

.recado-box{
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, .3);
    border-radius: 10px;
    padding: 1rem;
    background: #FFF;
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.recado-box .texto{
    padding: 0.5rem;
    padding-top: 2rem;
    font-size: 0.9rem;
}

.recado-box  .img-quote{
    position: absolute;
    top:-50px;
    width: 100px;
    left:20px;
  }

.recado-box .div-quote{
    position: relative;
}
.recado-box .remetente{
    color: var(--cor-principal);
    font-size: 1.5rem;
} 


legend.scheduler-border{
    font-size:18px;
}

#musicas-body{
    margin-top: 15px;
    display: none;
}


.colorGreen{
    color:green;
}

@media (min-width: 992px) {
    #modalTheme .modal-content {
        width: 1000px;
    }
}

#modalTheme .modal-body .row{
    margin-bottom: 15px;
}


.conteudo-editor{
    padding-top:100px;
}

.edit-pages{
    background-color: rgba(255, 255, 255, 0.75);
    border: 2px solid var(--cor-principal);
    padding:10px 0px 0px 0px;
}
.btns-page{
    display:inline-block;
}

.btns-page > *{
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.tbl-pages tbody i{
    color:var(--cor-principal);
}

@media (max-width: 799px) {
    #ver_visitante {
        display: none;
    }
    .principal{
        margin-bottom: 100px;
    }
}

.menu-mobile{
    background-color: var(--cor-principal);
    color: #FFF;
    opacity: 0.95;
    font-size: 1.1rem;
    border: 1px solid var(--cor-secundaria);
    width: 100%;
}

.menu-mobile-opc{
    border-right: 1px solid var(--cor-secundaria);
    cursor: pointer;
}

.menu-mobile-visitante{
    cursor: pointer;
}

.menu-mobile-btn{
    padding: 1px;
    min-height: 50px;
}

.centered-element {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }

  #modalMenuMobile ul{
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  #modalMenuMobile ul li{
    padding: 2vh;
    border: 1px solid var(--cor-principal);
  }
  
  #modalMenuMobile ul li a{
    color: var(--cor-principal);
    font-size: 0.8rem;
  }

  #modalMenuMobile ul li i {
    font-size: 1.4rem;
  }


  #modalMenuMobile ul li:hover{
    background: var(--cor-principal);
    color: #FFF;
  }


  .modal {
    overflow-y:auto;
  }


  .select-evento,
  .sitelista-confirmacoes-content{
    background-color: rgba(255, 255, 255, 0.75);
    border: 2px solid var(--cor-principal);
    padding:10px 0px 0px 0px;
}



.text-principal{
    color: var(--cor-principal);
    font-size: 1.2rem;
}
.select-evento h3,
.sitelista-confirmacoes-content h3{
    color: var(--cor-principal);
}
.evento-form{
    margin-left: 30px;
    margin-bottom: 20px;
}

#formPreferences{
    margin-top: 20px;
}

.fieldTipoCha legend i{
    display: none;
}

.colorRed{
    color: red;
}
#fecharTipoEvento{
    margin-left: 20px;
}

.convite-list{
    margin-left: 10px;
}

.convite-title{
   margin-bottom: 20px;
}

#btnSelecionarConvite{
    margin-top: 30px;
 }

 .text-convite-pergunta{
    font-size: 1.8rem;
 }
 .convite_passo_1 .form-check-label{
    font-size: 1.5rem;
 }
 .convite_passo_1 input[type=radio] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

.texto-convite{
    overflow-wrap: break-word;
}

#fecharConvites{
    margin-right: 20px;
}

#convite-main{
    min-height: 550px;
}
.convite-list .row{
    margin-top:20px;
}
.convite-body{
    margin-bottom: 20px;
}

.btn-mobile button{
    width: 100%;
    margin-top: 10px;
}
.descricao-site{
    word-break: break-all;
}
.recadosButtonDiv{
    text-align: right;
}

.listVideoPreview > *{
    max-width: 100%;
}
#listVideo > * {
    max-width: 95%;
}

#tblMusicas i{
    cursor: pointer;
}

.form-check-parceiro{
    display: none;
}

#endereco_site_display{
 word-break: break-all;   
}

#nomeBebeSite{
    display: inline;
}
@media (max-width: 799px) {
   .convite-body{
       display: none;
    }
    .btn-mobile{
        text-align: center;
        margin-bottom: 10px;
    }
    .btn-mobile button{
        width: 90%;
        margin-top: 10px;
        
    }
    #fecharConvites{
        margin-right: 0px;
    }
    .convite-passo{
        margin-bottom: 10px;
    }
    
    .convite-title{
        display: none;
    }


}



.ajuda-ico{
   cursor:pointer;
   color:var(--cor-secundaria);
}
#modalVideoTutorial .modal-body{
    margin:auto;
}

.thumb-convite{
    margin-top: 20px;
}
#convite_category{
    max-width: 400px;
}

#top-editor{
    padding: 16px 8px;
    min-height: 80px;
    background-color: var(--cor-principal);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1030;
    color:#FFF;
}

 .menu-save {
    color:var(--cor-secundaria);
    border-radius: 0.8em;
    padding: 10px;
    display: none;
    width: fit-content;
  }
  .menu-save i{
    font-size: 40px;
    cursor: pointer;
  }
  .menu-save .notification-container{
    margin-left: 0px;
    margin-right: 10px;
    color: yellow;
  }

  #recados_adicionar{
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .component:first-child{
    margin-top: 20px;
  }

  
  #modalListaDisponibilidade .text-principal{
    font-size: 0.9rem;
  }

  #modalListaDisponibilidade .disponibilidade-title{
    font-size: 1.2rem;
  }

  .thumb-convite img{
    border-radius: 10px;
    border: 1px solid var(--cor-principal);
  }

  .bqrcode{
    width: fit-content;
    border: 1px solid var(--cor-principal);
    padding: 1rem;
    padding-bottom: 0rem;
    margin: auto;
  }
  .bqrcode .img-logo{
    max-width: 60px;
    margin-top: -270px;
  
   
   
  }


  #bodyQrCode{
    margin-top:500px
  }

  #bodyQrCode .img-logo{
    max-width: 180px;
    margin-top: -1000px;
  }
.list-img-gallery{
    padding-top: 100px;
   
}
.list-img-content{
    background-color: rgba(255, 255, 255, 0.75);
    border: 2px solid;
}

.div-remover-list-img-gallery{
    font-size: 1em;
    color:var(--cor-principal);
    cursor:pointer;
}
.div-remover-list-img-gallery:hover{
    color:var(--cor-terciaria);
}

.list-img-gallery-img{
    max-width: 150px;
}
#list_imgs{
    margin-bottom: 20px;
}
#list_imgs img{
    max-width: 600px;
    max-height: 600px;
    margin: auto;
}

.btns-enquete{
    margin-top: 20px;
}
.enquete_revelacao{
    margin-top:3rem;
    margin-bottom:3rem;
}
.btn-enquete-revelacao1{
    margin-right: 1rem;
}


#btnEditorAlterarTitulo,
#btnEditorAlterarNomeBebe{
    margin-left: 10px;
    margin-bottom: 15px;
}

.btn-alterar-menu{
    font-size: 0.8rem;
    display: inline-block;
    margin-top: 5px;
}

.main-menu .nav-link {
    font-size: 1.2em;
}
#modalChaRifa fieldset.scheduler-border,
.cha-rifa-elements fieldset.scheduler-border {
    border: 1px groove var(--cor-principal) !important;
    padding: 0 0 0 1rem !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}
#modalChaRifa legend.scheduler-border,
.cha-rifa-elements legend.scheduler-border {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 10px;
        border-bottom:none;
        color:var(--cor-principal);
}


@media (max-width: 1280px){
    .main-menu .nav-link{
        font-size: 0.9em;
    }
}

@media (min-width: 800px) {
   
     
    #top-editor{
        left: 232px;
        min-width: 800px;
        margin-top: 1px;
    }
      .editor-site-text{
        font-size: 25px;
        padding-top: 10px;
      }

      .btn-ver-vistante{
        margin-top: 5px;
      }
      .itens-principais li.item-principal{
        padding-left: 1rem;
      }
      .bts-pc{
        padding-right: 1.5rem
      }
      .notification-counter{
        top: -25px !important;
        left: 25px !important;
      }
     
}

@media (max-width: 799px) {
    #list_imgs img{
        max-width: 95%;
        margin: auto;
    }
   .only-pc-item{
    display: none;
   }
   #top-editor{
        width: 100%;
        padding:16px 0px;
   }
   .menu-save i{
    font-size: 30px;
   }
   .menu-save .notification-counter {
     top:-20px !important;
   }
   .editor-site-text{
    font-size:17px;
   }
   .editor-site-text i{
     padding-left: 10px; 
   }
   .main-menu{
    margin-left: -10px;
   }
   #top-editor .col-3,
   #top-editor .col-4{
    padding: 0;
   }
   .menu-principal{
    padding-right: 0px;
   }
}
  
  
@media(max-width:600px){
    #recados_adicionar{
        width: 80%;
    }
    .recadosButtonDiv{
        text-align: center;
    }
    #top-editor{
        min-height: 40px;
    }
    .main > .container {
        margin-top: 0 !important;
    }

    #convite_category{
        max-width: 80%;
    }

    #modalListText .trumbowyg-button-pane button{
        padding: 1px 10px !important;
        width: auto !important;
    }
    
    
}

@media(max-width:450px){
    .main-menu .nav-link{
        font-size: 1.2em;
    }
    .main {
        margin-left: 0px;
    }
    
    .main > .container {
        padding-right: 2px;
        padding-left: 2px;
    }

    .btn-enquete-revelacao{
        padding:0.5rem;
        font-size: 1rem;
    }
    .btns-enquete{
        margin-top: 20px;
    }
    .enquete_revelacao{
        margin-top:3rem;
        margin-bottom:3rem;
    }
    .titulo-enquete-revelacao{
        font-size: 1.5rem;
    }
    .btn-enquete-revelacao1{
        margin-right: 0rem;
    }
   
}

@media(max-width:400px) {
    #top-editor button{
        margin-top: 5px;
        padding: .2rem .3rem;
        font-size: 0.8rem;
    }
    .container{
        padding-right: 2px;
        padding-left: 2px;
    }
    .main{
        margin-left: 0 !important;
    }
    .card-header{
        padding: .2rem .4rem;
    }
    .btn-component-controls{
        width: 80%;
    }
}
#convite-main{
    background-position: center;
    background-size: cover;
}


.site-password legend{
    display: none;
}