﻿.registerLogin2022 .two-side{
    flex-direction: column-reverse;
}

.registerLogin2022 .two-side .input-section{
    padding: 20px 15px 0;
}
.registerLogin2022 .generic-form {
    margin-bottom: 40px !important;
}

.registerLogin2022 .tabs-with-nav.disabled{
    display: none;
}

.registerLogin2022 img.svg-info {
    width: 18px;
    height: 18px;
    margin: 0;
}
.registerLogin2022 .two-side .alert-socio.desktop-only {
    display: none;
}
.registerLogin2022 .two-side .alert-socio {
    display: flex;
    /*margin-bottom: 20px;*/
    padding: 20px 15px;
    justify-content: space-between;
    background-color: #f4f4f4;
    gap: 10px;
}

    .registerLogin2022 .two-side .alert-socio svg.svg-cross {
        stroke: #242424;
        width: 8px;
        height: 8px;
        stroke-width: 5px;
        cursor: pointer;
    }

        .registerLogin2022 .two-side .alert-socio svg.svg-cross:hover {
            stroke: #c30000;
        }
    .registerLogin2022 .two-side .alert-socio img.svg-info {
        width: 18px;
        height: 18px;
    }


    .registerLogin2022 .two-side .alert-socio p {
        margin: 0;
        width: 85%;
        color: #242424;
    }

p.obligatory-field-comment {
    font-size: 11px;
    margin-top: 20px;
}

p.confirmation-text {
    padding-top: 20px;
}

.registerLogin2022 .input-section .links {
    display: block;
    text-decoration: underline;
    margin-top: 10px;
    width: fit-content;
}

.registerLogin2022 .input-section .change-phone {
    margin-top: 10px;
}

    .registerLogin2022 .input-section .change-phone a {
        text-decoration: underline;
        margin-top: 10px;
    }


.registerLogin2022 .input-section .button.dark {
    margin-top: 40px;
    margin-bottom: 18px;
}
.registerLogin2022 .input-section .title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 17px;
}

.registerLogin2022 .tabs-with-nav .tab-names {
    display: flex;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 40px;
    border-bottom: 1px solid #DDDDDD;
}
    .registerLogin2022 .tabs-with-nav .tab-names p {
        cursor: pointer;
    }
    .registerLogin2022 .tabs-with-nav .tab-names p:first-of-type {
        margin-right: 40px;
    }
    .registerLogin2022 .tabs-with-nav .tab-names p.selected {
        color: #c30000;
        font-weight: 500;
        margin-bottom: -1px;
        padding-bottom: 16px;
        border-bottom: 3px solid #c30000;
    }

.registerLogin2022 .tabs-with-nav .tabs .tab.selected {
    display: block;
}

.registerLogin2022 .tabs-with-nav .tabs .tab{
    display: none;
}

.registerLogin2022 .check-code.disabled, .registerLogin2022 .send-code.disabled {
    display: none;
}

.registerLogin2022 .info-wrapper.check-code.disabled, .registerLogin2022 .info-wrapper.send-code.disabled, .info-wrapper.check-code p.disabled {
    display: none;
}
.registerLogin2022 .info-section .info-wrapper.disabled {
    display: none;
}

.registerLogin2022 .info-section {
    padding: 0 15px 20px;
    padding-bottom: 0;
    margin: 20px 0;
    height: 23px;
    overflow: hidden;
    position: relative;
}
    .registerLogin2022 .info-section .info-arrow {
        position: absolute;
        top: 8px;
        right: 15px;
        transform: rotate(180deg);
        transition: transform 0.5s ease;
        stroke: #242424;
        stroke-width: 2px;
        width: 9px;
        height: 9px;
        fill: none;
    }
    .registerLogin2022 .info-section.expand {
        height: auto;
    }
        
        .registerLogin2022 .info-section.expand .info-arrow {
            transform: rotate(0deg);
        }
    

    .registerLogin2022 .info-section p.discounts-info {
        padding: 0;
        width: 100%;
    }
    .registerLogin2022 .info-section p.discounts-info span{
        margin: 7px 0;
        display: block;
    }
        .registerLogin2022 .info-section p.discounts-info span:first-child {
            margin-top: 0;
        }

        .registerLogin2022 .info-section p.discounts-info span span {
            color: #c30000;
            text-decoration: underline;
            display: inline;
            cursor: pointer;
        }

    

    .registerLogin2022 .info-section p {
        color: #888888;
        width: 90%;
    }

    .registerLogin2022 .info-section{

        color: #888888;
    }

    .registerLogin2022 .info-section .info-wrapper {
        display: flex;
        margin-bottom: 10px;
    }

    .registerLogin2022 .info-section .info-requirements {
        margin-left:39px;
    }

.registerLogin2022 .info-wrapper p {
    margin: 0;
}

.registerLogin2022 .two-side.disabled, .registerLogin2022 .generic-form.disabled {
    display: none;
}

.footer-2021 {
    border-top: 1px solid #DDDDDD;
}


.two-side > *:last-child > * {
    display: block;
}

.registerLogin2022 .header.disabled, .registerLogin2022 .header-no-steps.disabled {
    display: none;
}

.registerLogin2022 .generic-form.no-account .form-textbox.error .error-msg, 
.registerLogin2022 .generic-form .form-textbox.error.password .error-msg {
    position: relative;
    font-size: 14px;
    top: 5px;
}

.registerLogin2022 .generic-form.no-account .form-textbox.error .error-msg {
    position: relative;
    font-size: 14px;
    top: 5px;
}

    .registerLogin2022 .generic-form .form-textbox.error .error-msg.disabled {
        display: none;
    }

.generic-form .box-wrapper.selectable.selected {
    border: 1px solid #c30000;
}
.generic-form .box-wrapper.selectable {
    border: 1px solid #E8E8E8;
    margin-bottom: 8px;
    background-color: white;
    cursor: pointer;
}
    .generic-form .box-wrapper.selectable p {
        font-size: 14px;
    }

.generic-form .box-wrapper {
    background-color: #f4f4f4;
    padding: 20px 25px;
    position: relative;
}

    .generic-form .box-wrapper p {
        font-size: 18px;
        margin: 0;
    }
    .generic-form .box-wrapper p.name {
        font-weight: bold;
    }
    .generic-form .box-wrapper p.message {
        font-size: 14px;
    }
    .generic-form .box-wrapper img {
        position: absolute;
        right: 25px;
        top: 25px;
        cursor: pointer;
    }

    .generic-form .box-wrapper:not(.selectable) {
        margin-bottom: 38px;
    }




/***********REGISTER PAGE ONLY**************/

.email-phone input, .email-phone label {
    color: #BEBEBE;
}

    .email-phone input:focus {
        color: #242424;
    }



.info-section .password-checks {
    display: flex;
    margin-bottom: 10px;
}

    .info-section .password-checks p{
        margin: 0;
    }

    .info-section .password-checks img {
        margin-right: 10px;
    }
    .info-section .password-checks img.disabled {
        display: none;
    }
    .info-section .password-checks p span.disabled {
        display: none;
    }

.to-site{
    float: right;
}

/***********Complete Profile PAGE ONLY**************/
.agregado {
    border: 1px #E8E8E8 solid;
    padding: 20px;
    margin-bottom: 10px;
}
    .agregado p{
        margin:0;
    }

.add-agregado, .edit-agregado {
    display: flex;
    justify-content: space-between;
}
    .add-agregado a, .edit-agregado a {
        cursor: pointer;
    }
    .add-agregado.disabled, .edit-agregado.disabled {
        display: none;
    }

    .add-agregado h2 {
        width: 70%;
    }

.edit-agregado {
    margin-bottom: 4px;
}

    .edit-agregado p{
        font-weight: bold;
    }

.registerLogin2022 .input-section .final-step {
    margin-top: 20px;
}
    .registerLogin2022 .final-step .title{
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 36px;
    }

    .registerLogin2022 .final-step p {
        font-size: 18px;
        font-weight: normal;
    }
    .registerLogin2022 .final-step p.link {
        font-weight: bold;
    }
    .registerLogin2022 .final-step .to-site p {
        font-weight: bold;
    }

.registerLogin2022 .link-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.registerLogin2022 .generic-form.add.disabled, .registerLogin2022 .generic-form.edit.disabled, .registerLogin2022 .generic-form.list.disabled {
    display: none;
}

.household-form {
    margin-bottom: 40px;
}

    .household-form.disabled {
        display: none;
    }

.registerLogin2022 .generic-form.add {
    margin-bottom: 0 !important;
}

.registerLogin2022 .generic-form.list {
    margin-bottom: 0 !important;
}

/****************PROMO WRAPPER LAST STEP*********************/
.registerLogin2022 .promo-wrapper {
    margin-bottom: 46px;
}

.registerLogin2022 .promo-wrapper .promo-info {
    background: #F4F4F4;
    font-family: Roboto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 25px;
}

    .registerLogin2022 .promo-wrapper .promo-info p {
        font-size: 18px;
        color: #242424;
    }

        .registerLogin2022 .promo-wrapper .promo-info p:nth-of-type(2) {
            margin-bottom: 15px;
        }

    .registerLogin2022 .promo-wrapper .promo-info h2 {
        color: #c30000;
        margin: 5px 0;
        line-height: 40px;
    }

    .registerLogin2022 .promo-wrapper .promo-info p:last-child a {
        color: #242424;
        font-weight: 500;
    }

.registerLogin2022 .promo-wrapper .promo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*****************LOGIN 1VEZ******************/

.option-yes.disabled, .option-no.disabled{
    display: none;
}

.generic-form .form-radiobox.has-account {
    padding: 0;
}

.form-radiobox {
    display: flex;
    align-items: center;
}

.form-radiobox input.slb-radio[type="radio"] + label {
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    margin-bottom: 0px;
}

.generic-form input.slb-radio[type="radio"]:checked + label {
    margin-bottom: 0px;
}

input[type="radio"] + label {
    color: rgb(36,36,36);
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;
}

.generic-form .radio-option-label {
    text-transform: none;
    margin-right: 20px;
}




/***************APP******************/

.generic-form .qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

/***************DUPLICADOS******************/
.socio-option.disabled, .adepto-option.disabled {
    display: none;
}

/************** Consent table******************/
.generic-form .checkboxes .entry input.slb-checkbox[type="checkbox"]:not(:checked) + label, 
.generic-form .checkboxes .entry input.slb-checkbox[type="checkbox"]:checked + label {
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    line-height: 23px;
    margin-bottom: 0px;
    font-family: Roboto;
    font-weight: 400;
}

.generic-form .checkboxes .fullRow input.slb-checkbox[type="checkbox"]:checked + label::before {
    background-color: #24242459;
}

.generic-form .checkboxes .fullCol input.slb-checkbox[type="checkbox"]:checked + label::before {
    background-color: #24242459;
}

.consentTable .rowContent .entry[col="4"] {
    min-width: 80px;
    max-width: 80px;
}


.move-buttons {
    position: relative;
    right: 0;
    margin-left: auto;
    margin-top: 40px;
}
.move-buttons .button-area .button.dark {
    margin-top: 40px;
}


/****************Pedidos*****************/

.positive {
    color: green;
}

.negative {
    color: #c30000;
}

.request {
    font-weight: 400;
}

.no-requests h2 {
    color: #BEBEBE;
    padding: 0px;
}

.generic-list .no-requests .list-item {
    cursor: auto;
}

    .generic-list .no-requests .list-item:hover h2 {
        color: #BEBEBE;
    }

.pagination {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

    .pagination .arrow:first-child {
        margin-right: 10px;
    }

    .pagination .arrow:last-child {
        margin-left: 10px;
    }

    .pagination .arrow {
        stroke: none;
        min-height: 24px;
        min-width: 24px;
        max-width: 24px;
        max-height: 24px;
        fill: #24242459;
        transform: rotate(0deg) scale(0.5);
    }

        .pagination .arrow.active {
            fill: #242424;
            cursor: pointer;
        }

            .pagination .arrow.active:hover {
                fill: #c30000;
            }

    .pagination .reverse {
        transform: rotate(180deg) scale(0.5);
    }


.single-request .true-drop {
    z-index: 10000;
}

.single-request.create-request h2 {
    padding-bottom: 26px;
    font-size: 24px;
}

.single-request .textOnlyFormText {
    font-size: 14px;
    line-height: 18px;
}

.single-request.create-request.generic-form .jumbo-wrapper .jumbo-info p,
.single-request.create-request.generic-form .jumbo-wrapper .jumbo-info p .special {
    font-size: 14px;
    line-height: 18px;
}

.single-request h3 {
    font-size: 18px;
    line-height: 24px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    margin-top: 0px;
    padding-bottom: 10px;
}

.single-request .checkboxes {
    margin: 20px 0 0 0;
}

.single-request .float-right {
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 11px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    line-height: 16px;
}

.single-request .request-container {
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 40px;
}

.single-request h2 {
    padding-bottom: 20px;
}

.single-request .request-container .form-textbox p.formLabel {
    font-weight: 500;
}

.single-request .request-container .form-textbox p {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    padding-bottom: 0px;
    text-transform: none;
    font-family: "Roboto", sans-serif;
}

.single-request .request-container .form-textbox {
    padding-bottom: 10px;
}

.request-section .generic-list {
    margin-bottom: 20px;
}

.request-section .option-wrapper .option p {
    padding-bottom: 0px;
}

.new-request-wrapper {
    display: flex;
}

    .new-request-wrapper .pagination {
        margin: 0px;
        margin-left: auto;
    }

.request-section {
    position: relative;
}

    .request-section .text-block {
        font-family: "Roboto Condensed", sans-serif;
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        padding-top: 8px;
        padding-right: 10px;
    }

    .request-section .text-block p {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 14px;
        line-height: 18px;
    }

    .request-section .text-block p:last-child {
        cursor: pointer;
    }
        .request-section .text-block p:last-child:hover {
            color: #c30000;
        }
    .request-section .generic-list .list-item:hover .see-more{
        color: #c30000;
    }

    .request-section .request-info {
        margin-bottom: 40px;
    }

.generic-form.request-section .title {
    margin-bottom: 17px;
}

.generic-form .option-wrapper .option {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid #E8E8E8;
    min-height: 64px;
    padding: 20px 25px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 300ms ease-in-out;
    font-family: Roboto;
}

.generic-form .option-wrapper .option.active {
    border-color: #c30000 !important;
}

    .generic-form .option-wrapper .option:not(.active):hover {
        border-color: #c30000 !important;
    }

.generic-form .option h2 {
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    padding: 0;
}

.generic-form .option p {
    font-size: 14px;
    line-height: 18px;
    width: 100%;
    font-weight: 400;
}

.generic-form .jumbo-wrapper .jumbo-info {
    background: #F4F4F4;
    font-family: Roboto;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.generic-form .jumbo-wrapper .jumbo-info p .special {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    padding: 0;
}

.create-request .form-textboxes {
    display: flex;
    flex-direction: column;
}

.create-request .textOnlyFormText p.pbottom-row {
    margin-bottom: 20px;
}

.create-request .pleft-standard {
    padding-left: 30px;
}

.create-request .entity {
    margin-top: 20px;
}

.final-step.request-section .box-container {
    padding-top: 20px;
    border-top: 1px solid #E8E8E8;
    margin-top: 40px;
}

.final-step.request-section .box-container h2 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
}
.final-step.request-section .box-container .form-textbox p {
    font-size: 14px;
}

.final-step.request-section .box-container .form-textbox p:first-of-type {
    font-weight: 500;
}


/***************************************************************************************************************************************************************/
/******************************************* DESKTOP ***********************************************************************************************************/
/***************************************************************************************************************************************************************/
@media (min-width: 767px) {
    .registerLogin2022 .two-side .alert-socio.desktop-only {
        display: flex;
    }
    .registerLogin2022 .two-side .alert-socio {
        margin: 0;
        margin-bottom: 37px;
    }
    .registerLogin2022 .tabs-with-nav .tab-names p:first-of-type {
        margin-right: 70px;
    }

    .registerLogin2022 .two-side {
        flex-direction: row;
    }
    .registerLogin2022 .two-side .input-section {
        min-width: calc((604.5 / 1366) * 100vw);
        max-width: calc((604.5 / 1366) * 100vw);
        margin-top: 40px;
        margin-bottom: 66.5px;
        padding: 0;
        padding-right: calc(68.5/1366 * 100vw);
        border-right: 1px solid #E8E8E8;
        min-height: calc(100vh - 181px - 70px - 42.5px - 66.5px);
    }
    .registerLogin2022 .info-section {
        padding: 0;
        padding-left: calc(68.5/1366 * 100vw);
        width: 100%;
        height: auto;
        max-height: initial;
        overflow: auto;
        margin-top: 0;
    }

        .registerLogin2022 .info-section .info-wrapper {
            display: flex;
            margin-top: 35px;
        }

        .registerLogin2022 .info-section p {
        }


            .registerLogin2022 .info-section p.discounts-info span span {
                text-decoration: none;
            }

                .registerLogin2022 .info-section p.discounts-info span span:hover {
                    text-decoration: underline;
                }

    .add-agregado h2 {
        width: 100%;
    }


    .move-buttons {
        width: 50%;
    }

    .wide-section .move-buttons {
        width: 100%;
        padding-top: 30px;
    }

        .wide-section .move-buttons .submit-button {
            width: 50%;
            float: right;
            margin-top: -50px;
        }

    .generic-form .jumbo-wrapper .jumbo-info {
        flex-direction: row;
    }

    .create-request .form-textboxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row;
    }

        .create-request .form-textboxes .form-textbox {
            width: 49%;
        }

    .final-step.request-section .box-container .person-info > div {
        display: flex;
    }

        .final-step.request-section .box-container .person-info > div > div {
            width: 50%;
        }
    .registerLogin2022 .input-section .final-step {
        margin-top: 0px;
    }
}



