/* General Styles */
@import url("varilables.css");
@import url("typography.css");
@import url("global.css");
@import url("elements.css");

@import url('header.css');
@import url('footer.css');
@import url('menu-humber.css');
@import url('home.css');
@import url('favorite.css');
@import url('breadcrumb.css');
@import url('application.css');
@import url('tootip.css');
@import url('panel.css');
@import url('modal.css');
@import url('radio.css');
@import url("register.css");
@import url("login.css");
@import url("professional.css");
@import url("account.css");
@import url("events.css");
@import url("pagina.css");

/* Define the container (parent element of the grid) */
.container {

    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    /*display: flex;*/
    
    @media screen and (min-width: 1200px) {
        width: 100%;
    }


    &.row {
        padding: 0;
    }

    &.container-1200, &.container-1280 {
       margin: 0 20px;

        @media screen and (min-width: 767px) {
            margin: auto;
        }
        @media screen and (min-width: 1200px) {

        }
    }
}

.mobile {
    display: block;
    @media screen and (min-width: 991px) {
        display: none;
    }
}
.unset-flex-to-block {
    display: block;
}
.col {
    flex-grow: 1;

    @media screen and (min-width: 1624px) {
        flex-basis: 102px;
        margin-right: 38px;
    }
}

/* Remove the gutter on the last column in each row */
.container .col:last-child {
    margin-right: 0;
}

.col-md-1.custom-gap-col-1 {
    width: 3%;
}

.col-md-8.custom-gap-col-8 {
    width: 72%;
}

.col-1 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 102px; /* This takes 1/12th of the grid */
    }
}

.col-2 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 242px; /* 2 columns, 204px width */
    }
}

.col-3 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 382px; /* 3 columns, 306px width */
    }

}

.col-4 {
    flex: 0 0 40%;
    @media screen and (min-width: 1624px) {
        flex: 0 0 522px; /* 4 columns, 408px width */
    }
}

.col-5 {
    flex: 0 0 50%;
    @media screen and (min-width: 1624px) {
        flex: 0 0 662px; /* 5 columns, 510px width */
    }
}

.col-6 {
    flex: 0 0 60%;
    @media screen and (min-width: 1624px) {
        flex: 0 0 802px; /* 6 columns, 612px width */
    }
}

.col-7 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 942px; /* 7 columns, 714px width */
    }
}

.col-8 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 1082px; /* 8 columns, 816px width */
    }
}

.col-9 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 1222px; /* 9 columns, 918px width */
    }
}

.col-10 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 1362px; /* 10 columns, 1020px width */
    }
}

.col-11 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 1502px; /* 11 columns, 1122px width */
    }
}

.col-12 {

    @media screen and (min-width: 1624px) {
        flex: 0 0 1642px; /* 12 columns, full width */
    }
}

.block {
    display: block !important;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.dynamic-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}
.features .dynamic-truncate {
    display: block;
}

.btn-probeer-spinweb-gratis.btn-link:hover, .btn-probeer-spinweb-gratis.btn-link:focus {
    text-decoration: none;
    background: var(--unnamed-color-0d413d) 0% 0% no-repeat padding-box !important;
    border: 1px solid var(--unnamed-color-0d413d);
    opacity: 1;
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff) !important;
    text-align: center;
}



/* Media Query for smaller screens (optional for responsive) */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack the columns vertically on small screens */
    }
    .col {
        margin-right: 0; /* Remove the gutter */
        width: 100%; /* Full width for each column */
    }
}


.container-fulid-- .colum-1 {
    width: 21.4%;
    max-width: 438.5px;
}

.container-fulid-- .colum-2 {
    width: 60%;
}


.container-fulid-- .colum-3 {
    width: 18.6%;
    margin-right: 5%;
}

.section {
    border-radius: 8px;
    padding: 20px 0px;
    flex: 0;
    background-color: #fff;
}

h2 {
    color: #2C7525;
    margin-bottom: 5px;
}

p {
    margin-bottom: 15px;
    color: #555;
}

.label {
    all: unset;
}

.center-middle-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.blod18{
    font-family: var(--primaryFont);
    font-size: 18px;
    font-weight: 600;
}

.color--primary {
    color: var(--primaryColor);
}

.color--headerColor {
    color: var(--headerColor);
}


.btn-primary {
    background-color: #26c48b;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}



.feature {
    text-align: center;
}

.feature h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.bar-header {
    background-color: var(--unnamed-color-0d413d);
    height: 80px;
    display: flex;
    align-items: center;
}

.title-page {
    font-size: 29px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-29)/var(--unnamed-line-spacing-72) var(--unnamed-font-family-lato);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff) !important;
    text-align: left;
    opacity: 1;
}





/* Responsive */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
    }

    .nav ul {
        flex-direction: column;
        align-items: center;
    }

    .hero-content h1 {
        font-size: 2rem;
    }
}




.item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}


.info {
    /*flex: 0;*/
    width: 80%;

}

.info h3 {
    margin: 0;
    font-size: 16px;
}

.info span {
    color: #888;
    font-size: 14px;
}

.favorite {
    font-size: 18px;
    color: #888;
    cursor: pointer;
}



/* Login Form */
form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.w-100-p {
    width: 100%;
}

form  input[type="text"], form  input[type="password"], form  input[type="email"]{
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    width: 100% !important;
    height: 55px !important;

    &::placeholder {
        font-size: 1.3em;
        font-family: var(--unnamed-font-family-lato) !important;
        font-weight: var(--unnamed-font-style-normal)!important;

        letter-spacing: var(--unnamed-character-spacing-0);
        text-align: left;
        color: #5D5D5D !important;
        opacity: 0.35;
    }
}

input::placeholder {
    font-size: 1.3em;
    font-family: var(--unnamed-font-family-lato) !important;
    font-weight: var(--unnamed-font-style-normal)!important;

    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    color: #5D5D5D !important;
    opacity: 0.35;
}

form label {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) 15px/21px var(--unnamed-font-family-lato) !important;
    letter-spacing: var(--unnamed-character-spacing-0)!important;
    color: var(--unnamed-color-0d413d) !important;
    text-align: left;
}
form button {
    background-color: var(--unnamed-color-56d8aa);
}

form button:hover {
    background-color: var(--unnamed-color-0d413d);
    color: var(--whiteColor) !important;
}

a {
    display: block;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.alert {
    .alert-success {
        background-color: var(--unnamed-color-56d8aa);
        color: var(--unnamed-color-ffffff);
    }
}









.width-auto {
    flex: 1;
}


.row-job-option {
    a + a {
        margin: 5px 2px;
    }
}
a.btn.btn-social.btn-info.btn-upgrade i {
    font-size: 16px;
}

.btn-social :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    line-height: 44px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgb(255 255 255 / 90%);
}

a.btn.btn-social.btn-info.btn-upgrade {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--orgrancolor) !important;
    border-color: var(--orgrancolor) !important;
    font-style: normal;
    color: var(--secondaryHeaderColor);

    span {
        margin-left: 24px;
    }
}


.wrap-button-upgrade {
    margin-top: 15px;
}
.text-upgrade {
    text-align: left;
    font-size: 11px;
    color: var(--secondaryLight );
    display:inline-block;
    width: 100% !important;
    margin-top: 15px;
}
/* Responsive Design */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}


.padding-r-30 {
    padding-right: 30px;
}

.full-width-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;

}

.input-group {
    width: 100%;
}

.page {
    margin-top: 40px;
}

input[type="radio"], input[type="checkbox"] {
    margin: 0;
    margin-right: 10px;
}

.wrap-community-except {
    font: var(--unnamed-font-style-normal) normal medium 20px/30px var(--unnamed-font-family-lato);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0d413d);
    font-size: 16px;
    @media screen and (min-width: 1642px) {
        font: var(--unnamed-font-style-normal) normal medium 20px/30px var(--unnamed-font-family-lato);
        text-align: left;
        font: normal normal medium 20px/30px Lato;
        letter-spacing: 0px;
        color: #0D413D;
    }
}

.only-mobile {
    display: block;

    @media screen and (min-width: 1028px) {
        display: none;
    }
}