.btn:not(.tdate-group-addon) {
    /*display: flex;*/
    white-space: normal !important;
    text-align: center !important;
    margin: 3px !important;
    min-width: fit-content !important;
    min-height: var(--button-height) !important;
    border-radius: 5px !important;
}

/* Seleciona especificamente os botões dentro de cards
.card-wrapper .panel.card .panel-footer.card-footer.card-item-actions,
.card-wrapper .panel.card .card-footer {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 10px !important;
}*/

/* Estilo para os botões dentro do footer do card 
.card-wrapper .panel.card .panel-footer.card-footer.card-item-actions .btn,
.card-wrapper .panel.card .card-footer .btn {
    width: 100% !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}*/

/* Remove a margem do último botão */
.card-wrapper .panel.card .panel-footer.card-footer.card-item-actions .btn:last-child,
.card-wrapper .panel.card .card-footer .btn:last-child {
    margin-bottom: 0 !important;
}

/* Ajusta o ícone dentro do botão */
.card-wrapper .panel.card .panel-footer.card-footer.card-item-actions .btn i,
.card-wrapper .panel.card .card-footer .btn i {
    margin-right: 5px !important;
}

/* Estilos gerais para flexbox */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.col-sm-12 {
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    flex-wrap: wrap;
    /*display: flex !important;*/
}

.container-login .panel-login {
    margin: auto !important;
    max-width: 800px !important;
    /*max-width: var(--login-panel-max-width) !important;*/
    /*max-height: 750px !important; /* Alterado de 75% para ser mais adaptável */
    min-height: 650px !important; /* Adicionar altura mínima */
    /*background: var(--live-background-color) !important;
    box-shadow: var(--login-panel-box-shadow) !important;*/
    display: flex !important;
    flex-direction: var(--login-panel-detail-direction) !important;
    justify-content: center !important;
    border-radius: var(--login-panel-border-radius) !important;
    overflow: none !important; /* Permitir scroll se necessário */
    /*padding: 15px !important; /* Adicionar padding para evitar colagem nas bordas */
}

.container-login .login-content [page-name="LoginForm"] .card-header .card-title {
    width: 100% !important;
    text-align: var(--login-header-align) !important;
    font-size: 18px !important;
    color: var(--login-header-color) !important;
}

.login-medium-logo {
    background-image: url('../../../../app/images/builderLogoLogin.png') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    color: transparent !important;
    border: transparent !important;
    height: 80px !important;
}

.btn-facebook {
  display: flex !important ;
  align-items: center !important ;
  justify-content: center !important ;
  padding: 5px !important ;
  font-size: var(--font-size) !important ; /* Tamanho de fonte consistente */
  width: 440px !important;
  min-width: fit-content !important;
  max-width:440px !important;
  border-radius:5px !important;
  min-height: var(--button-height) !important;
  margin:5px !important ;
  background-color: #1a77f2 !important;
}

.btn-facebook i {
  font-size: 1em !important; /* Tamanho do ícone proporcional */
  margin-right: 10px !important;
}

.btn-instagram {
    display: flex !important ;
    background-color: #E33E5C !important;
    align-items: center !important ;
    justify-content: center !important ;
    padding: 5px !important ;
    font-size: var(--font-size) !important ; /* Tamanho de fonte consistente */
    width: 350px !important;
    min-width: fit-content !important;
    max-width:440px !important;
    border-radius:5px !important ;
    min-height: var(--button-height) !important;
    margin:5px !important ;
    background-color: #1a77f2 !important;
}

.btn-instagram i {
    font-size: 1em !important; /* Tamanho do ícone proporcional */
    margin-right: 10px !important;
}


/* Media query para telas pequenas */
@media screen and (max-width: 768px) {
    
    .card-header,
    .header-actions,
    .panel-heading,
    .tfooter,
    .panel-footer
    [class*="btn btn-group"]:not(.note-editor) {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Força todos os containers de botões a respeitarem o layout vertical */
    .btn:not(.note-editor):not(.note-toolbar):not(.note-btn):not(.tdate-group-addon),
    .btn-group:not(.note-editor):not([tradiogroup]),
    .button-container:not(.note-editor):not(.toggle-wrapper),
    .actions-group:not(.note-editor){
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: fit-content !important;
        height: 50px !important;
    }
    
    /* Exceção específica para o tradiogroup (mantém na horizontal) */
    .toggle-wrapper .btn-group {
        display: flex !important;
        flex-direction: row !important;
        width: auto !important;
    }

    .toggle-wrapper .btn-group label.btn {
        width: auto !important;
        flex: 0 1 auto !important;
        margin: 0 2px !important;
    }
    
    .row {
        flex-direction: column !important;
    }

    .cartao-simples {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    .cartao-planos {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        min-width: -webkit-fill-available !important;
    }
    
    .saas-contrato-warning {
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        min-width: -webkit-fill-available !important;
    }

    .ver_mais {
        width: 100% !important;
        text-align: center !important;
    }
    
    .main-content {
      flex-direction: column;
      height: auto; /* Permitir altura automática em telas pequenas */
      overflow: visible; /* Permitir scroll em telas pequenas */
    }
      
    .canvas-container {
        height: 60vh; /* Altura fixa para o canvas em telas pequenas */
        min-height: 300px;
        margin-bottom: 10px;
    }
      
    .properties-panel {
        width: 100%;
        height: auto;
        max-height: 40vh; /* Em telas pequenas, limita a altura */
    }

    .properties-panel-content {
        max-height: calc(90vh - 50px); /* Altura máxima menos altura do cabeçalho */
    }
}