/*brand ===>*/

.brand-horizontal-minimal {
    width: 116px;
    height: 32px;
}

/*brand <===*/

:focus-visible {
    outline: none;
}
:disabled {
    background-color: transparent;
}
/*icons ===>*/

svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-black-100);
}

/*icons <===*/


/*Buttons ===>*/

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.4s;
    gap: 8px;
}

.btn * {
    pointer-events: none;
}

.btn:disabled {
    cursor: default;
}

.btn svg {
    width: 24px;
    height: 24px;
}

.btn span {
    flex: 1;
}

.btn-xl {
    padding: 20px 16px;
}

.btn-lg {
    padding: 16px;
}

.btn-md {
    padding: 12px 16px;
}

.btn-sm {
    padding: 8px;
}

.btn-sm svg {
    width: 16px;
    height: 16px;
}

/*button primary filled ===>*/

.btn-primary-filled {
    color: var(--primary-10);
    border: 0;
    background-color: var(--primary-50);
}

.btn-primary-filled svg {
    fill: var(--primary-10);
}

.btn-primary-filled:hover {
    background: var(--primary-40);
}

.btn-primary-filled:focus {
    background: var(--primary-30);
}

.btn-primary-filled:disabled {
    background-color: var(--primary-10);
    color: var(--primary-30);
}

.btn-primary-filled:disabled svg {
    fill: var(--primary-30);
}

/*button primary filled <===*/

/*button primary no filled ===>*/

.btn-primary-no-filled {
    color: var(--primary-50);
    border: 0;
    background-color: transparent;
}

.btn-primary-no-filled svg {
    fill: var(--primary-50);
}

.btn-primary-no-filled:hover {
    background: var(--primary-10);
}

.btn-primary-no-filled:focus {
    background: var(--primary-20);
}

.btn-primary-no-filled:disabled {
    color: var(--primary-30);
}

.btn-primary-no-filled:disabled svg {
    fill: var(--primary-30);
}

/*button primary no filled <===*/

/*button secondary filled ===>*/

.btn-secondary-filled {
    color: var(--white);
    border: 0;
    background-color: var(--secondary-100);
}

.btn-secondary-filled svg {
    fill: var(--white);
}

.btn-secondary-filled:hover {
    background: var(--secondary-90);
}

.btn-secondary-filled:focus {
    background: var(--secondary-80);
}

.btn-secondary-filled:disabled {
    background-color: var(--secondary-10);
    color: var(--secondary-40);
}

.btn-secondary-filled:disabled svg {
    fill: var(--secondary-40);
}

/*button secondary filled <===*/

/*Buttons <===*/

/*Link buttons ===>*/

.btn-link {
    display: inline-flex;
    padding: 8px 0px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    transition: 0.4s;
    text-decoration: none;
}

.btn-link:disabled {
    color: var(--primary-black-40);
}

.btn-link-primary {
    color: var(--primary-50);
}

.btn-link-primary:hover {
    color: var(--primary-40) !important;
}

.btn-link-primary:focus {
    color: var(--primary-30) !important;
}

.btn-link-secondary {
    color: var(--secondary-100);
}

.btn-link-secondary:hover {
    color: var(--secondary-90) !important;
}

.btn-link-secondary:focus {
    color: var(--secondary-80) !important;
}

.btn-link-tertiary {
    color: var(--tertiary-90);
}

.btn-link-tertiary:hover {
    color: var(--tertiary-70) !important;
}

.btn-link-tertiary:focus {
    color: var(--tertiary-80) !important;
}

/*Link buttons <===*/

/*Floating action buttons ===>*/

.btn-fla {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: var(--primary-50);
    color: var(--primary-10);
    box-shadow: 0px 4px 8px 0px rgba(180, 65, 14, 0.50);
    border-radius: 64px;
    gap: 8px;
    transition: 0.4s;
}

.btn-fla svg {
    fill: var(--primary-10);
}

.btn-fla-xl, .btn-fla-lg {
    padding: 24px 16px;
}

.btn-fla-md, .btn-fla-sm {
    padding: 16px;
}

.btn-fla-xl svg {
    width: 32px;
    height: 32px;
}

.btn-fla-lg svg, .btn-fla-md svg {
    width: 24px;
    height: 24px;
}

.btn-fla-sm svg {
    width: 16px;
    height: 16px;
}

.btn-fla:hover {
    background-color: var(--primary-40);
}

.btn-fla:focus {
    background-color: var(--primary-30);
}

.btn-fla:disabled {
    background-color: var(--primary-10);
    box-shadow: 0px 4px 8px 0px rgba(248, 109, 47, 0.16);
    color: var(--primary-30);
}

.btn-fla:disabled svg {
    fill: var(--primary-30);
}


/*Floating action buttons <===*/

/*Dropdown ===>*/

.dropdown {
    position: relative;
    display: inline-block;
    height: 100%;
    cursor: pointer;
}

.dropdown label {
    pointer-events: none;
}

.dropdown input {
    display: none;
}

.dropdown-content {
    position: absolute;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: 0.4s;
    z-index: 1;
}

.dropdown-content ul {
    display: inline-flex;
    padding: 8px;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--white);
    list-style: none;
}

.dropdown-content li {
    align-self: stretch;
    display: flex;
    justify-content: stretch;
}

.dropdown input:checked ~ .dropdown-content, .dropdown-visible .dropdown-content {
    opacity: 1;
    height: auto;
}

.dropdown-item {
    display: flex;
    padding: 20px 16px;
    /* justify-content: center; */
    align-items: center;
    gap: 8px;
    min-width: 247px;
    border-radius: 8px;

    text-decoration: none;
    color: var(--primary-black-100);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: 0.4s;
    text-align: left;
}

.dropdown-item:hover {
    background-color: var(--primary-20);
}

.dropdown-item.active {
    color: var(--primary-10);
    background-color: var(--primary-50);
}

.dropdown-visible {
    position: relative;
    display: inline-block !important;
}

#dropdown-item-selected {
    white-space: nowrap;
}

/*Dropdown <===*/

/*Navbar ===>*/

.navbar {
    background: var(--secondary-100);
    height: 96px;
    padding: 0 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    /* position: fixed; */
    /* position: sticky; */
    z-index: 2;
    /* top: 0; */
    left: 0;
    right: 0;
}

.navbar .brand-options {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}

.navbar .btn-primary-no-filled, .menu-drawer-layout .btn-primary-no-filled {
    color: var(--primary-30);
    height: -moz-available;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
}

.navbar .btn-primary-no-filled svg, .menu-drawer-layout .btn-primary-no-filled svg {
    fill: var(--primary-30);
}

.navbar .btn-primary-no-filled:hover, .navbar .btn-primary-no-filled:focus, 
.navbar .dropdown-item:hover, .navbar .dropdown-item.active, 
.navbar :target, .navbar .dropdown:has(:target), .navbar .dropdown:hover, .navbar .dropdown-visible,

.menu-drawer-layout .btn:hover, .menu-drawer-layout .btn:focus,
/* .menu-drawer-layout :target, .menu-drawer-layout .dropdown:has(:target), .menu-drawer-layout .dropdown:hover, .menu-drawer-layout .dropdown-visible, */

.social-networks .btn-primary-no-filled:hover, .container-footer .btn-primary-no-filled:focus,
.link-active {
    background-color:rgba(255,255,255,0.15);
}

.navbar .left-options {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.navbar .right-options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}

.navbar .dropdown-content ul {
    background-color: var(--secondary-90);
    color: var(--white);
}

.navbar .dropdown-item {
    color: var(--white);
}

/*Navbar <===*/


/*small-minimal-tab ===>*/

.small-minimal-tab {
    display: inline-flex;
    padding: 16px 8px;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 0;
    text-decoration: none;

    color: var(--primary-black-100);
    text-align: center;

    font-size: 18px;
    font-weight: 600;
    line-height: 24px;

    border-bottom: 2px solid var(--primary-black-40);
    background: var(--white);

    transition: 0.4s;

    width: 100%;
}

.small-minimal-tab * {
    pointer-events: none;
}

.small-minimal-tab input {
    display: none;
}

.small-minimal-tab svg {
    fill: var(--primary-black-100);
    width: 32px;
    height: 32px;
}

.small-minimal-tab:hover {
    background-color: var(--primary-10);
}

.small-minimal-tab:focus {
    background-color: var(--primary-20);
}

/* .small-minimal-tab:has(input:checked) { */
.small-minimal-tab.tab-active {
    background-color: var(--white);
    color: var(--primary-50);
    border-bottom-color: var(--primary-50);
    pointer-events: none;
}

/* .small-minimal-tab:has(input:checked) svg { */
.small-minimal-tab.tab-active svg {
    fill: var(--primary-50);
}

/*small-minimal-tab <===*/

/*golden circle card ===>*/

.golden-circle-card {
    display: flex;
    padding: 24px;
    flex-direction: column;
    /* justify-content: center; */
    align-items: flex-start;
    gap: 24px;
    transition: 0.4s;
    background: var(--white);
    align-self: stretch;
    justify-content: flex-start;
    flex: 1;
}

.golden-circle-card-empty {
    flex: 1; 
    padding: 0 24px;
}

.golden-circle-card:hover {
    background: var(--primary-10);
}

.golden-circle-card-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    word-break: break-word;
}

.golden-circle-card-header svg {
    width: 48px;
    height: 48px;
    fill: var(--primary-50);
}

.golden-circle-card.team-card {
    text-align: center;
}

.golden-circle-card.team-card .golden-circle-card-header {
    align-items: center;
}

.golden-circle-card.team-card .golden-circle-card-header svg {
    width: 56px;
    height: 56px;
}
/*golden circle card <===*/

/*image header card ===>*/

.image-header-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    background-color: var(--white);
    position: relative;
    align-items: flex-end;
}

.image-header-card-border {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: 0.4s;
    border: 2px solid transparent;
}

.image-header-card-border:hover {
    border: 2px solid var(--primary-50);
}

.image-header-card-image {
    height: 200px;
    align-self: stretch;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image-header-card-body {
    display: flex;
    padding: 0px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    color: var(--primary-black-70);
    padding-bottom: 24px;
}

.image-header-card-body h4 {
    color: var(--primary-black-100);
}

/*image header card <===*/

/*gallery group card ===>*/

.gallery-group-card {
    display: flex;
    height: 480px;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
}

.gallery-group-card .column {
    display: flex;
    /* width: 736px; */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

.gallery-group-card .column > .row {
    display: flex;
    /* width: 736px; */
    /* flex-direction: column; */
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 0;
    flex: 1;
}

.gallery-group-card > div {
    flex: 1;
}

/*gallery group card <===*/


/*gallery card ===>*/

.gallery-card {
    display: flex;
    /* height: 480px; */
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    color: var(--white);
    align-self: stretch;
    background-size: cover;
    transition: 1s;
}

.gallery-card-container {
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}

.gallery-card-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.gallery-card-header svg {
    width: 42.667px;
    height: 32px;
    min-width: 32px;
}

/*gallery card <===*/

/*grid list card ===>*/

.grid-list-card {
    display: flex;
    background: var(--white);
    position: relative;
}

.grid-list-card-content {
    display: flex;
    padding: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--primary-black-40);
    position: relative;
}

.grid-list-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.grid-list-card-header svg {
    width: 48px;
    height: 48px;
    fill: var(--primary-50);
}

.grid-list-card-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 0.4s;
    border: 2px solid transparent;
}

.grid-list-card-border:hover {
    border: 2px solid var(--primary-50);
}

/*grid list card <===*/

/*grid list image card ===>*/

.grid-list-image-card {
    display: flex;
    background: var(--white);
    position: relative;
    border: 1px solid var(--primary-black-40);
    background: var(--white);
    flex: 1;
    align-self: stretch;
}

.grid-list-image-card-empty {
    flex: 1;
}

.grid-list-image-card-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.grid-list-image-card-photo {
    /* width: 320px; */
    align-self: stretch;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex: 1;
}

.grid-list-image-card-text {
    display: flex;
    padding: 24px 24px 24px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.grid-list-image-card-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 0.4s;
    border: 2px solid transparent;
}

.grid-list-image-card-border:hover {
    border: 2px solid var(--primary-50);
}

/*grid list image card <===*/

/*features card ===>*/

.features-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex: 1;
    align-self: stretch;
}

.features-card-image {
    height: 344px;
    align-self: stretch;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.features-card-text {
    flex: 1;
}

.features-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    align-self: stretch;
    flex: 1;
}

/*features card <===*/

/*badges ===>*/

.badge {
    display: inline-flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: right;
    /* align-self: flex-start; */
}

.badge svg {
    width: 24px;
    height: 24px;
}

.badge-default {
    color: var(--primary-10);
    background-color: var(--primary-50);
}

.badge-default svg {
    fill: var(--primary-10);
}

.badge-success {
    color: var(--white);
    background-color: var(--success);
}

.badge-success svg {
    fill: var(--white);
}

.badge-info {
    color: var(--white);
    background-color: var(--informative);
}

.badge-info svg {
    fill: var(--white);
}

.badge-warning {
    color: var(--primary-black-100);
    background-color: var(--warning);
}

.badge-warning svg {
    fill: var(--primary-black-100);
}

.badge-danger {
    color: var(--white);
    background-color: var(--danger);
}

.badge-danger svg {
    fill: var(--white);
}

.badge-secondary {
    color: var(--white);
    background-color: var(--secondary-100);
}

.badge-secondary svg {
    fill: var(--white);
}

.badge-tertiary {
    color: var(--tertiary-100);
    background-color: var(--tertiary-60);
}

.badge-tertiary svg {
    fill: var(--tertiary-100);
}

.badge-shaded-default {
    color: var(--primary-50);
    background-color: var(--primary-10);
}

.badge-shaded-default svg {
    fill: var(--primary-50);
}

.badge-shaded-success {
    color: var(--success);
    background-color: var(--success-light);
}

.badge-shaded-success svg {
    fill: var(--success);
}

.badge-shaded-info {
    color: var(--informative-dark);
    background-color: var(--informative-light);
}

.badge-shaded-info svg {
    fill: var(--informative-dark);
}

.badge-shaded-warning {
    color: var(--warning-dark);
    background-color: var(--warning-light);
}

.badge-shaded-warning svg {
    fill: var(--warning-dark);
}

.badge-shaded-danger {
    color: var(--danger);
    background-color: var(--danger-light);
}

.badge-shaded-danger svg {
    fill: var(--danger);
}

.badge-shaded-secondary {
    color: var(--secondary-100);
    background-color: var(--secondary-20);
}

.badge-shaded-secondary svg {
    fill: var(--secondary-100);
}

.badge-shaded-tertiary {
    color: var(--tertiary-100);
    background-color: var(--tertiary-20);
}

.badge-shaded-tertiary svg {
    fill: var(--tertiary-100);
}

/*badges <===*/

/*pagination ===>*/

.table-paginator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    align-self: stretch;
}

.table-paginator .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.table-pagination {
    display: inline-flex;
    align-items: center;
    gap: 24px;
}

.table-pagination-control-group, .table-pagination-control-group .pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: 0.4s;
}

.table-pagination-label-group {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

.table-pagination-label-group input {
    display: flex;
    width: 40px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    border-radius: 4px;
    border: 1px solid var(--primary-black-50);
    background: var(--white);
}

.table-pagination .btn {
    border-radius: 100px;
    padding: 4px;
}

.pagination {
    cursor: pointer;
    color: var(--primary-black-100);
    /* display: flex; */
    width: 20px;
    height: 20px;
    padding: 4px 4px 0 4px;
    /* align-items: flex-start; */
    
    border-radius: 8px;
    text-align: center;
    transition: 0.4s;
}

.pagination div {
    height: inherit;
    pointer-events:none;
}

.pagination-activated div {
    border-bottom: 1px solid var(--primary-50);
}

.pagination:hover {
    color: var(--primary-50);
}

.pagination:focus {
    color: var(--primary-30);
}

.pagination .pagination-disabled {
    color: var(--primary-black-50);
}

/*pagination <===*/

/*data table ===>*/

.data-table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-spacing: 0;
    border-collapse: separate;
}

.data-table thead, .data-table tbody {
    flex: 1;
    align-self: stretch;
    transition: 0.4s;
}

.data-table tr {
    display: flex;
    /* align-items: flex-start; */
    /* align-self: stretch; */
}

.data-table thead th {
    display: inline-flex;
    padding: 16px 4px;
    gap: 10px;
    color: var(--primary-50);
    background: var(--primary-10);
    flex: 1;
}

.data-table thead.header-center th {
    justify-content: center;
    align-items: center;
}

.data-table tbody td {
    display: inline-flex;
    border-bottom: 1px solid var(--primary-black-40);
    flex: 1;
    padding: 16px 4px;
    gap: 10px;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.data-table tbody tr:hover td, .data-table tbody tr:focus td {
    background-color: var(--primary-black-20);
}

/*data table <===*/

/*contact form ===>*/

.contact-form {
    display: flex;
    width: 536px;
    padding: 40px 32px 64px 32px;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    background: var(--white);
}

.contact-form-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.contact-form-separator {
    width: 100%;
    height: 1px;
    background-color: var(--primary-black-50);
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-3, 24px);
    align-self: stretch;
}

.contact-form #enviar {
    width: 100%;
}
/*contact form <===*/

/*input group ===>*/

.input-group {
    display: flex;
    width: 100%;
    padding-top: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.input-group .container-group {
    display: flex;
    align-items: flex-start;

    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;

    border-radius: 4px;
    border: 1px solid var(--primary-black-50);
    background: var(--white);
    transition: 0.4s;
    position: relative;
}

.input-group .container-group:has(:disabled) {
    border: 1px solid var(--primary-black-40);
    background: var(--primary-black-20);
}

.input-group .container-group input,
.input-group .container-group textarea {
    border: 0;
    color: var(--primary-black-100);
    width: 100%;
    padding: 0;
}

.input-group .container-group svg {
    fill: var(--primary-black-50);
    width: 24px;
    height: 24px;
}

.input-group .container-group:hover, .input-group:has(:focus) {
    border-color: var(--secondary-100);
}

.input-group:has(:focus) svg {
    fill: var(--primary-black-100);
}

.input-group .container-group .input-label label {
    position: absolute;
    display: flex;
    pointer-events: none;
    transition: 0.3s;
    cursor: text;
    
    color: var(--primary-black-60);
}

.input-label {
    position: relative;
    flex: 1 0 0;
    transition: 0.4s;
    display: flex;
    overflow: hidden;
    align-self: stretch;
    /* white-space: nowrap;
    overflow: hidden; */
}

.container-group span {
    flex: 1;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.input-group:has(:focus) .container-group label,
.input-group .container-group input:not(:placeholder-shown) ~ label,
.input-group .container-group textarea:not(:placeholder-shown) ~ label,
.input-group .container-group input:-webkit-autofill ~ label,
.input-group .container-group textarea:-webkit-autofill ~ label {
    top: -10px;
    left: 8px;
    cursor: auto;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--primary-black-100);
    padding: 0 2px;
    background-color: white;
}

.input-group:has(:focus) .input-label,
.input-group:has(input:not(:placeholder-shown)) .input-label,
.input-group:has(textarea:not(:placeholder-shown)) .input-label,
.input-group:has(input:-webkit-autofill) .input-label,
.input-group:has(textarea:-webkit-autofill) .input-label {
    position: unset;
}

.input-group:has(:disabled) .container-group:hover,
.input-group:has(:disabled) .container-group {
    border-color: var(--primary-black-40);
}

.input-group .container-group :disabled ~ label,
.input-group .container-group :disabled {
    color: var(--primary-black-50);
    background-color: transparent;
}

.form-phone {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.form-phone .input-group:first-child {
    width: 450px;
}

.input-group.input-error .container-group {
    border-color: var(--danger);
}

.input-group.input-error:has(:focus) .container-group label,
.input-group.input-error .container-group input:not(:placeholder-shown) ~ label,
.input-group.input-error .container-group textarea:not(:placeholder-shown) ~ label {
    color: var(--danger);
}

.input-error-message {
    display: flex;
    align-self: flex-end;
    opacity: 0;
    transition: 0.4s;
    color: var(--danger);
    height: 0;
    overflow: hidden;
}

.input-group.input-error .input-error-message {
    opacity: 1;
    height: auto;
}

/*input group <===*/

/*small alert ===>*/

.small-alert {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--overlays-notifications-spacing-items, 8px);
    transition: 0.4s;
    overflow: hidden;
}

.small-alert-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.small-alert-success {
    background-color: var(--success-light);
}

.small-alert-success .small-alert-header {
    color: var(--success);
}

.small-alert-info {
    background-color: var(--informative-light);
}

.small-alert-info .small-alert-header {
    color: var(--informative-dark);
}

.small-alert-warning {
    background-color: var(--warning-light);
}

.small-alert-warning .small-alert-header {
    color: var(--warning-dark);
}

.small-alert-danger {
    background-color: var(--danger-light);
}

.small-alert-danger .small-alert-header {
    color: var(--danger);
}

/*small alert <===*/

/*badge app stores ===>*/

.container-app-stores {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.badge-app-store svg {
    width: auto;
    height: 40px;
}

.badge-google-play {
    background-image: url(/efletexiaWeb/images/badge-app-stores/google-play.png);
    /* width: 115.333px; */
    width: 133.333px;
    height: 40px;
    background-size: cover;
    background-position: center;
}

/*badges app stores <===*/

/*header ===>*/

.header {
    display: flex;
    /* height: 512px; */
    /* height: calc(100vh - 224px); */
    height: calc(100vh - 320px);
    padding: 160px 64px 64px 64px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    flex-shrink: 0;

    color: var(--white);
    background-size: cover;
    background-repeat: no-repeat;
    gap: 24px;
}

.header.header-banner {
    padding: 160px 64px;
    height: auto;
}

.header.header-cta-banner {
    padding: 120px 64px;
    height: auto;
}

/*header <===*/

/*timeline ===>*/

.timeline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.timeline .row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    align-self: stretch;
}

/* .timeline .row-left {
    align-items: flex-start;
} */

.timeline-item {
    display: flex;
    width: 50%;
    align-items: center;
    border-left: 1px solid var(--secondary-90);
}

.timeline-item hr {
    width: 64px;
    height: 0px;
    background: var(--secondary-90);
}

.timeline-item-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}

.timeline-item-icon {
    display: flex;
    padding: 4px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 32px;
    border: 1px solid var(--secondary-90);
}

.timeline-item-icon svg {
    width: 32px;
    height: 32px;
    fill: var(--primary-50);
}

.timeline-item-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.timeline .row:nth-child(even) {
    align-items: flex-end;
    padding-right: 1px;
    direction: rtl;
}

.timeline .row:nth-child(even) .timeline-item {
    /* justify-content: flex-end; */
    border-left: none;
    border-right: 1px solid var(--secondary-90);
}

/*timeline <===*/

/*news card ===>*/

.news-card {
    display: flex;
    padding-bottom: 0px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--primary-black-20);
    position: relative;
    flex: 1;
    align-self: stretch;
    justify-content: flex-start;
    cursor: pointer;
}

a.news-card {
    color: inherit !important;
    text-decoration: inherit !important;
}

.news-card-empty {
    flex: 1;
}

.news-card-photo {
    height: 200px;
    align-self: stretch;
    background-repeat: no-repeat;
    background-size: cover;
}

.news-card-body {
    display: flex;
    padding: 0px 24px 24px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    flex: 1;
}

.news-card-body-entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    flex: 1;
}

.news-card-body-entry p {
    color: var(--primary-black-70);
}

.news-card-body-footer {
    display: flex;
    gap: 16px;
    align-self: stretch;
    align-items: center;
}

.news-card-avatar {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-position: center;
    background-size: contain;
}

.news-card-footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.news-card-footer-text {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    color: var(--primary-black-70);
}

.news-card-border {
    position: absolute;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    transition: 0.4s;
    border: 2px solid transparent;
    cursor: pointer;
}

.news-card-border:hover {
    border: 2px solid var(--primary-50);
}

/*news card <===*/

/*news stacked card ===>*/

.news-stacked-card {
    flex-direction: row;
    gap: 0;
    height: 440px;
    flex: auto;
}

.news-stacked-card .news-card-photo  {
    height: 100%;
    flex: 1 0 0;
}

.news-stacked-card .news-card-body {
    flex: 1;
    padding: 24px 40px;
    justify-content: center;
}

.news-stacked-card .news-card-body-entry {
    flex: none;
}

/*news stacked card <===*/

/*label group ===>*/

.label-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    color: var(--primary-black-70);
}

.label-group-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-1, 8px);
    align-self: stretch;
    color: var(--primary-black-100);
}

.label-group-title svg {
    width: 32px;
    height: 32px;
    fill: var(--primary-50);
}

/*label group <===*/

/*cities card ===>*/

.cities-card {
    display: flex;
    padding-bottom: 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--white);
    flex: 1;
    align-self: stretch;
    justify-content: flex-start;
    border: var(--primary-black-40);
    border: 1px solid var(--primary-black-40);
    background: var(--white);
    transition: 0.4s;
}

.cities-card h5 {
    color: var(--primary-black-100);
}

.cities-card-image {
    height: 200px;
    align-self: stretch;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cities-card-header {
    display: flex;
    padding: 0px 24px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.cities-card-header svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-50);
}

.cities-card-body {
    display: flex;
    padding: 0px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    color: var(--primary-black-70);
}

.cities-card:hover {
    border: 1px solid var(--primary-50);
}

/*cities card <===*/

/*modal ===>*/

.modal {
    background-color: var(--white);
    display: none;
    z-index: 100;
    left: 0px;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: 0.4s;
    position: fixed;
    overflow: auto;
}

.modal-content {
    display: flex;
    padding: 64px;
    flex-direction: column;
    align-items: flex-end;
    gap: 64px;
}

.modal-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.modal-body {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    align-self: stretch;
}

.modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

#modal-hide {
    border: 1px solid var(--primary-50);
}

/*modal <===*/

/*accordeon ===>*/

.accordeon {
    display: inline-flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 8px; */
    border: 1px solid transparent;
    transition: 0.4s;
}

.accordeon:not(.accordeon-body-shown):hover {
    border: 1px solid var(--primary-10);
    background: var(--primary-10);
}

.accordeon-title {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.accordeon-title label {
    flex: 1;
}

.accordeon-body {
    height: 0;
    overflow: hidden;
    padding-top: 8px;
}

.accordeon-body-shown {
    border: 1px solid var(--primary-50);
    background: var(--white);
}

.accordeon-body-shown .accordeon-body {
    height: auto;
    overflow: auto;
}

/*accordeon <===*/

/*chips ===>*/

.chip {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    background-color: var(--primary-10);
    color: var(--primary-50);
    border-radius: 8px;
    gap: 8px;
    transition: 0.4s;
    border: 0;
    cursor: pointer;
}

.chip svg {
    fill: var(--primary-50);
}

.chip-xl {
    padding: 20px 16px;
}

.chip-lg {
    padding: 16px 16px;
}

.chip-md{
    padding: 12px 16px;
}

.chip-sm {
    padding: 8px 4px;
}

.chip-xl svg, .chip-lg svg, .chip-md svg {
    width: 24px;
    height: 24px;
}

.chip-sm svg {
    width: 16px;
    height: 16px;
}

.chip:hover {
    background-color: var(--primary-20);
}

.chip:focus {
    background-color: var(--primary-20);
}

.chip.active {
    color: var(--white);
    background-color: var(--primary-50);
}

.chip.active svg {
    fill: var(--white);
}

.chip:disabled, .chip.disabled {
    background-color: var(--primary-10);
    color: var(--primary-30);
    cursor: not-allowed;
    pointer-events: none;
}

.chip:disabled svg {
    fill: var(--primary-30);
}

.chips-panel {
    display: flex;
    align-items: center;
    gap: 16px;
}

/*chips <===*/

/*video ===>*/

.video-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 16px;
}

.video-stacked:hover {
    background-color: var(--primary-black-20);
}

.video-miniature {
    height: 424px;
    align-self: stretch;
    position: relative;
}

.video-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: center;
    background-size: cover;
    transition: 0.4s;
}

.video-gradient-layer {
    opacity: 0;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%);
}

.video-stacked:hover .video-gradient-layer {
    opacity: 1;
}

.video-miniature .tooltip {
    position: absolute;
    right: 8px;
    bottom: 16px;
    opacity: 1;
    transition: 0.4s;
}

.video-stacked:hover .tooltip {
    opacity: 0;
}

.video-miniature .tooltip-dark {
    left: 8px;
    right: auto;
    opacity: 0;
    transition: 0.4s;
}

.video-stacked:hover .tooltip-dark {
    opacity: 1;
}

.video-body {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.video-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.video-avatar {
    display: flex;
    width: 56px;
    height: 56px;
    border-radius: 100px;
    background-position: center;
    background-size: contain;
}

.video-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.video-date {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    color: var(--primary-black-70);
}

/*video <===*/

/*tooltip ===>*/

.tooltip {
    display: inline-flex;
    padding: 4px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    background-color: var(--primary-black-100);
    box-shadow: 0px 2px 16px 4px rgba(45, 64, 64, 0.10);
    color: white;
}

.tooltip.tooltip-dark {
    background-color: transparent;
    box-shadow: 0px 2px 8px 4px rgba(2, 62, 115, 0.16);
}

/*tooltip <===*/

/*checkbox ===>*/

.checkbox {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

.checkbox input {
    display: none;
}

.checkbox svg {
    fill: var(--primary-50);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: none;
}

.checkbox input:checked ~ .checkbox-selected {
    display: block;
}

.checkbox input:not(:checked) ~ .checkbox-deselected {
    display: block;
}

/*checkbox <===*/

/*btn spinner ===>*/

.btn.btn-spinner {
    width: 132px;
}


/*btn spinner <===*/

/*spinner ===>*/

.in-progress-content {
    display: none;
}

.in-progress .progress-spinner {
    animation: rotateSpinner 500ms linear infinite;
    pointer-events: none;
}

.in-progress .in-progress-content {
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 8px;
}

@keyframes rotateSpinner {
	to {
		transform: rotate(360deg);
	}
}




/*spinner <===*/

/*carrousel ===>*/

.carrousel-dots {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
}

.carrousel-dots svg {
    width: 10px;
    height: 10px;
    fill: var(--primary-20);
    transition: 0.4s;
}

.carrousel-dots span {
    cursor: pointer;
}

.carrousel-dots .active svg {
    fill: var(--primary-50);
}

.carrousel-images {
    overflow: hidden;
    align-self: stretch;
}

.carrousel-images .row {
    transition: 0.4s;
}

/*carrousel <===*/

/*menu-drawer ===>*/

.menu-drawer-layout {
    /* position: absolute; */
    /* left: 0; */
    /* right: 0; */
    /* height: -webkit-fill-available; */
    /* height: 100vh; */
    padding: 0px 24px;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid var(--secondary-80);
    background: var(--secondary-100);
    /* overflow: auto; */
    transition: 0.4s;
    display: none;
    opacity: 0;
    flex: 1;
    overflow: auto;
}

.menu-drawer-layout-main-option {
    display: flex;
    padding: 32px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-bottom: 1px solid var(--secondary-80);
}

.menu-drawer-layout .btn {
    align-self: stretch;
    justify-content: flex-start;
    flex: 1;
    text-align: left;
}

.menu-drawer-layout .btn-link {
    color: var(--white);
}

.menu-drawer-layout-options {
    display: flex;
    padding: 24px 0px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.menu-drawer-layout-sub-options.collapse {
    max-height: 800px;
}

.menu-drawer-layout-sub-options {
    display: flex;
    padding: 0px 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease-in-out;
}

#menu-button {
    position: relative;
    display: none;
}

#menu-button * {
    transition: 0.4s;
}

.menu-button-active {
    opacity: 0;
    position: absolute;
}

#menu-button.active .menu-button-active {
    opacity: 1;
}

#menu-button.active .menu-button-inactive {
    opacity: 0;
}

.menu-drawer-button-icons {
    position: relative;
    display: flex;
}

.menu-drawer-button-icons * {
    transition: 0.4s;
}

.menu-drawer-icon-active {
    opacity: 0;
    position: absolute;
}

.menu-drawer-layout-option.active .menu-drawer-icon-active {
    opacity: 1;
}

.menu-drawer-layout-option.active .menu-drawer-icon-inactive {
    opacity: 0;
}

/*menu-drawer <===*/

/*locading ===>*/

#loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 96px;
    right: 0;
    bottom: 0px;
    left: 0;
}

#loading .progress-spinner {
    width: 64px;
    height: 64px;
    fill: var(--primary-50);
}

/*locading <===*/

/*breadcumns ===>*/

.breadcrumbs {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--primary-50);
}

.breadcrumb-item.active {
    color: var(--primary-black-100);
}

.breadcrumb-item svg {
    width: 8px;
    height: 8px;
}

.breadcrumb-item span {
    flex: 1;
}

/*breadcumns <===*/