@import url('https://use.typekit.net/odg2ttd.css');

p {
    margin: 0;
    line-height: 1;
}

.text_ab {
    font-size: 14px;
    font-style: italic;
    color: var(--first-color-light);
}

.text-con {
    text-align: left;
    font: normal normal normal 16px/14px Europa;
    letter-spacing: 0px;
    color: var(--color-black-1);
    line-height: 20px;
}

.text-it-lg {
    text-align: left;
    font: normal normal normal 14px/14px Europa;
    letter-spacing: 0px;
    color: var(--color-black-1);
    font-style: italic;
}

.text-it-sm {
    text-align: left;
    font: normal normal normal 12px/14px Europa;
    letter-spacing: 0px;
    color: var(--color-gray-2);
    font-style: italic;
}

.txt-xl-bl {
    text-align: left;
    font: normal normal bold 56px/70px Europa;
    letter-spacing: 0px;
    color: var(--first-color);
}

.txt-lg-bl {
    text-align: left;
    font: normal normal bold 43px/40px Europa;
    letter-spacing: 0px;
    color: var(--first-color);
}

.txt-sm-bl-gr {
    text-align: left;
    font: normal normal bold 14px/14px Europa;
    letter-spacing: 0px;
    color: var(--first-color);
}

.txt-sm-bl {
    text-align: left;
    font: normal normal bold 14px/18px Europa;
    letter-spacing: 0px;
    color: var(--color-black-1);
}

.txt-sm-bl-bl {
    text-align: left;
    font: normal normal bold 14px/18px Europa;
    letter-spacing: 0px;
    color: var(--color-black-2);
}

.txt-nm-xxl {
    text-align: left;
    font: normal normal normal 25px/14px Europa;
    letter-spacing: 0px;
    color: var(--color-black-1);
    line-height: 20px;
}

.txt-nm-xl {
    text-align: left;
    font: normal normal normal 16px/20px Europa;
    letter-spacing: 0px;
    color: var(--color-black-2);
}

.txt-nm-lg {
    text-align: left;
    font: normal normal normal 14px/18px Europa;
    letter-spacing: 0px;
    color: var(--color-black-2);
}

.txt-nm-sm {
    text-align: left;
    font: normal normal normal 12px/15px Europa;
    letter-spacing: 0px;
    color: var(--color-black-2);
}

.txt-bl-tit {
    text-align: left;
    font: normal normal normal 30px/14px Europa;
    letter-spacing: 0px;
    color: var(--color-black-1);
}

.txt-esp {
    color: var(--first-color) !important;
}

.dtm-message{
    text-align: center !important;
}

.link-acc{
    cursor: pointer !important;
}

.nav-tabs-plans {
    border-bottom: 5px solid var(--color-scrollbar-track);
    margin: 20px 0 40px;
}

.nav-link-plans.active {
    background-color: transparent;
    border-radius: 2px;
    border-bottom: 5px solid var(--dark-green);
    color: var(--dark-green);
    height: 43px;
}

.nav-link-plans {
    width: 146px;
    height: 38px;
    background-color: inherit;
    border: none;
    color: inherit;
    border-radius: 2px;
    position: relative;
    bottom: -5px;
    cursor: pointer;
    font-size: 14px;
}

.nav-link-plans.active:hover {
    background-color: transparent;
    color: var(--dark-green);
}

.nav-link-plans:hover {
    color: var(--dark-green);
}

.nav-link-plans:focus {
    outline: none;
}

.switch-button .switch-button__checkbox {
    display: none;
}

.switch-button .switch-button__label {
    background-color: var(--color-bg-delete);
    width: 40px;
    height: 20px;
    border-radius: 3rem;
    display: inline-block;
    position: absolute;
    cursor: pointer;
    right: 33px;
    top: 12px;
}

.switch-button .switch-button__label:before {
    transition: .2s;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--color-white);
    content: '';
    border-radius: 50%;
    box-shadow: inset 0px 0px 0px 1px var(--color-black);
}

.switch-button .switch-button__checkbox:checked+.switch-button__label {
    background-color: var(--first-color);
}

.switch-button .switch-button__checkbox:checked+.switch-button__label:before {
    transform: translateX(19px);
}

/*---------*/
.ctn_btn_photo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.btn-edit {
    background: transparent;
    color: var(--dark-green);
    cursor: pointer;
    border: none;
}

.tooltip>.tooltip-inner {
    background: var(--color-black-2);
    color: var(--color-white);
    box-shadow: 0px 3px 7px var(--color-box-shadow)!important;
    border-radius: 3px !important;
    padding: 3px 20px !important;
    margin: 0 !important;
}

.tooltip-arrow,
.tooltip-arrow:after,
.tooltip-arrow:before {
    display: none;
}

.icon-add {
    margin-right: 10px;
}

.none {
    display: none !important;
}

.add-plan {
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 14px var(--color-box-shadow-3);
    border-radius: 11px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 50px;
    position: relative;
}

.ctn-additional-values {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--color-gray-2);
    border-bottom: 1px solid var(--color-gray-2);
    padding-top: 1.5rem;
    column-gap: 24px;
}

.ctn-additional-values .col-add-esp{
    width: 100%;
}

.col-add-esp {
    display: grid;
    height: fit-content;
    position: relative;
    grid-template-columns: 1fr 1fr;
}

.img-add-plan {
    background: var(--color-gray-2) 0% 0% no-repeat padding-box;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.plan-choice{
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.items-choice {
    padding-left: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 300px;
}

.input.ctn_input {
    height: fit-content !important;
}

.items-choice label {
    width: fit-content;
}

.rad {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: initial;
    display: grid;
    align-items: center;
    justify-content: start;
    grid-template-columns: auto auto;
    direction: rtl;
    column-gap: 5px;
}

.rad>input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rad>i {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: inset 0 0 0 8px var(--color-white);
    border: 1px solid gray;
    background: gray;
}

.rad>input:checked+i {
    box-shadow: inset 0 0 0 3px var(--color-white);
    background: var(--first-color);
}

.row-plan-type {
    width: fit-content;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: space-between;
    column-gap: 20px;
}

.col-firm .invalid-feedback{
    left: 0;
}

.col-plan-type {
    max-width: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    row-gap: 5px;
}

.btn-add-type {
    width: 40px;
    height: 40px;
    background: var(--dark-green) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px var(--color-box-shadow);
    border-radius: 100%;
    opacity: 1;
    border: none;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    cursor: pointer;
}

.val_plan_us{
    margin-left: 10px;
}

.plan-card-img {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--first-color);
    color: white;
    margin-right: 5px;
    font-size: 20px;
}

.disabled {
    background: var(--color-bg-disabled) 0% 0% no-repeat padding-box;
}

.icon-det {
    font-size: 50px;
    color: var(--color-green-5);
}

.det-img {
    width: 38px;
    height: 38px;
    background: var(--first-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 24px;
    min-width: 38px;
}

.mar-left {
    margin-left: 48px;
}

.mar-top {
    margin-top: 20px;
}

.list-details {
    width: 100%;
    row-gap: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: center;
}

.plan-price {
    display: flex;
    width: 100%;
    margin-top: 40px;
}

.radio-hide {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.icon-delete {
    color: var(--dark-green);
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 18px;
}

.radio-hide+img {
    cursor: pointer;
}

.top {
    top: 15px;
    left: 30px;
    position: absolute;
}

.img-in {
    object-fit: cover;
    width: 60%;
}

.active-img {
    color: var(--first-color);
    background: var(--first-color) !important;
}

/*-----------*/

.plan-details {
    display: grid;
    padding: 0;
    margin-top: 24px;
    grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six] 1fr [seven] 1fr [eight] 1fr [nine] 1fr [ten];
    grid-template-rows: auto;
    grid-gap: 20px;
}

.plan-add-acc{
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 14px var(--color-box-shadow-3);
    border-radius: 11px;
    padding: 25px;
}

.plan-add-acc .ctn_search {
    width: 100% !important;
    margin-bottom: 30px;
    min-width: auto !important;
}

.plan-details-1 {
    display: flex;
    flex-direction: column;
    grid-column-start: one;
    grid-column-end: four;
    gap: 20px;
}

.plan-details-1 .pl-text-title{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: normal;
    width: 90%;
}

.plan-details-1 .txt-lg-bl{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: normal;
}

.plan-details-1 .plan-pricing {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.plan-details-card-1 {
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 14px var(--color-box-shadow-3);
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    padding: 20px 15px 20px 40px;
    overflow: hidden;
}

.container-acc {
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 14px var(--color-box-shadow-3);
    border-radius: 11px;
    opacity: 1;
    padding: 20px;
}

.container-acc p {
    margin: 0;
}

.acc-top {
    padding-bottom: 20px;
}

#cont_accounts .ctn_search {
    width: 100% !important;
    margin-bottom: 30px;
    min-width: auto !important;
}

.icon-accounts {
    color: var(--color-icons);
}

.content-acc {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px 10px 10px 10px;
}

.card-account {
    width: 100%;
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 14px var(--color-box-shadow-3);
    border-radius: 11px;
    opacity: 1;
    margin-top: 10px;
    padding: 10px;
    display: flex;
}

.card-accounts {
    width: 100%;
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 12px var(--color-box-shadow);
    border-radius: 10px;
    padding: 10px 15px 10px 15px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* .card-accounts .text-con {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: normal;
} */

.ck-acc{
    position: absolute;
    top: 10px;
    right: 10px;
}

.ck-acc input[type="checkbox"]{
    display: none;
}

.ck-acc label::before {
    font-family: "FontAwesome";
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    content: '\f00c';
    background: var(--color-white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--color-gray-border-2);
    border-radius: 3px;
    font-size: 15px;
    color: var(--color-white);
}

.ck-acc input[type="checkbox"]:checked ~ label:before {
    background: var(--first-color);
    border: 1px solid var(--first-color);
}

.ck-acc:checked{
    background: var(--first-color);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
}

.col-acc{
    display: flex;
    gap: 5px;
}

.acc-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.acc-inf {
    margin-left: 20px;
    margin-top: 15px;
}

.img-det-firm {
    background: var(--first-color);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 5px;
}

.acc-inf p {
    margin: 5px;
}

.plan-details-2 {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    grid-column-start: four;
    grid-column-end: ten;
}

.plan-details-card-2 {
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 14px var(--color-box-shadow-3);
    border-radius: 11px;
}

.details {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 30px;
    padding-bottom: 20px;
}

.col-det {
    width: 20%;
}

.col-det-in {
    width: 32%;
}

.in-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.card-in {
    width: 32%;
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 14px var(--color-box-shadow-3);
    border-radius: 11px;
    position: relative;
    padding: 24px;
}

.card-in .card-btn{
    position: absolute;
    top: auto;
    right: 24px;
    bottom: auto;
}

.card-in .txt-nm-xxl{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-down {
    color: var(--color-icons);
    font-size: 30px;
    cursor: pointer;
    margin-left: 30px;
    display: none;
}

.card-top {
    padding-top: 20px;
    padding-left: 40px;
}

.num-fol {
    display: none;
}

.num-fol .txt-gen-details {
    font-size: 14pt;
}

.num-fol .txt-gen-esp {
    margin: 0;
    padding: 0;
    font-size: 25pt;
}

.search-disabled{
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}

.v-hidden{
    visibility: hidden;
}

.plan-card {
    width: 100%;
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 15px var(--color-box-shadow-2);
    border-radius: 10px;
    opacity: 1;
    padding: 20px;
    display: flex;
    align-items: start;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.col-card-1{
    width: 30%;
}

.col-card{
    width: 15%;
}

.plan-error{
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 100%;
    font-size: .875em;
    color: var(--color-error);
}

.md-dialog{
    width: 372px;
}

.btn-form{
    width: 154px;
    padding: 0;
}

.btn_modal{
    padding: 0 !important;
}

.btn-form-esp{
    color: var(--first-color);
    background: var(--color-white);
    border: 2px solid var(--first-color);;
}

.btn-form-esp:hover{
    color: var(--dark-green);
    background: var(--color-white);
    border: 2px solid var(--dark-green);
}

.btn_plan {
    background-color: var(--first-color);
    color: var(--white-color);
    width: 200px;
    height: 50px;
    box-shadow: 0px 3px 11px var(--sombra);
    border-radius: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    margin-left: 20px;
    float: right;
    margin-top: 20px;
}

.bg_delete .det-img{
    background: var(--color-bg-delete);
}

.bg_delete .btn-edit{
    color: var(--color-bg-delete);
}

.bg_delete .txt-lg-bl{
    color: var(--color-bg-delete);
}

.bg_delete .plan-card-img{
    background: var(--color-bg-delete);
}

.bg_delete .txt-sm-bl-gr{
    color: var(--color-bg-delete);
}

.bg_delete .list_card .dropdown-toggle{
    color: var(--color-bg-delete);
}

.bg_delete .list_card .dropdown-toggle:hover{
    color: var(--color-bg-delete);
}

.bg_delete .list_card .btn:focus, .list_card .btn:hover {
    color: var(--color-bg-delete);
}

.bg_des_acc{
    background-color: var(--color-bg-disabled) !important;
}

.bg_des_acc .list_card .dropdown-toggle{
    color: var(--color-bg-delete);
}

.bg_sus_acc{
    background-color: rgb(252, 255, 229) !important;
}

.md-acc-pl{
    width: fit-content !important;
    max-width: 500px;
}

.dis-btn{
    pointer-events: none;
    cursor: no-drop !important;
    background-color: var(--first-color);
    opacity: .6 !important;
}

.card-accounts-sel {
    width: 100%;
    height: fit-content;
    background: var(--color-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 12px var(--color-box-shadow);
    border-radius: 10px;
    margin-top: 10px;
    padding: 10px 15px 10px 15px;
    position: relative;
    display: grid;
    grid-template-columns: 6fr 4fr;
}

.card-accounts-sel .card-acc-nm{
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    justify-content: start;
    align-items: start;
}

.card-accounts-sel .col-acc-esp{
    justify-content: center;
}

/* .card-accounts-sel .text-con {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: normal;
    max-width: 200px;
} */

.card-accounts-sel .ck-acc{
    display: none;
}

.ck_acc{
    cursor: pointer;
}

.col-cc-card-1{
    width: 25%;
}

.col-cc-card {
    width: 13%;
    margin-top: 15px;
}

.col-cc-card-es {
    width: 16%;
}

.height-auto{
    height: fit-content;
}

@media only screen and (max-width: 1710px) {

    .pl-in-1 {
        width: 23%;
    }

    .pl-in-2 {
        width: 74%;
    }

    .card-accounts {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 1550px) {

    .details {
        padding: 20px 40px 20px 40px;
    }

    .pl-in-2 .details {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .col-det {
        width: 25%;
        margin-top: 20px;
    }

    .plan-details-card-1{
        padding-left: 20px;
    }

    .pl-in-2 .details{
        padding: 35px 30px 35px 30px;
    }

    .pl-in-1{
        padding: 10px 10px 10px 15px !important;
    }

    .col-cc-card-es{
        width: 18%;
    }
}

@media only screen and (max-width: 1520px) {

    .card-accounts .text-con{
        max-width: 170px
    }

    .card-in .txt-nm-xxl{
        max-width: 150px;
    }

    .plan-details-1 {
        grid-column-start: one;
        grid-column-end: five;
    }

    .plan-details-2 {
        grid-column-start: five;
        grid-column-end: ten;
    }

    .col-det {
        width: 50%;
        margin-bottom: 5px;
    }

    .pl-in-1 {
        width: 25%;
    }

    .pl-in-2 {
        width: 72%;
    }
    
    .col-card{
        width: 20%;
    }

    .col-cc-card-1{
        width: 32%;
    }

    .col-cc-card{
        width: 32%;
    }

    .col-cc-card-es{
        width: 32%;
    }

    .p-s-acc{
        padding-left: 60px;
    }
}

@media only screen and (max-width: 1399px){
    .ctn-additional-values{
        grid-template-columns: 1fr 1fr;
    }

    .card-accounts{
        grid-template-columns: auto;
    }

    .card-accounts .text-con{
        max-width: revert;
    }

    .card-accounts .col-acc-esp{
        position: relative;
        left: 55px;
    }
}

@media only screen and (max-width: 1250px) {
    .txt-bl-tit{
        font-size: 20px;
    }

    .card-in {
        width: 45%;
    }

    .details {
        padding: 20px;
        padding-left: 30px;
    }

    .card-top {
        padding-left: 30px;
        padding-right: 30px;
    }

    .details-enterprise .card-top{
        padding: 20px 15px 20px 20px;
    }

    .pl-in-1 {
        width: 26%;
        padding-left: 25px;
    }

    .pl-in-2 {
        width: 71%;
    }

    .col-card-1{
        width: 50%;
        margin-bottom: 20px;
    }

    .col-card{
        width: 50%;
        margin-bottom: 20px;
    }

    .col-add-esp{
        width: 100%;
    }

    .txt-xl-bl {
        font-size: 50px;
    }

    .ent-choice{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .col-det-in{
        width: 48%;
    }

    .col-cc-card-1 {
        width: 33%;
    }

    .col-cc-card {
        width: 33%;
    }

    .col-cc-card-es {
        width: 33%;
    }
}

@media only screen and (max-width: 1199px) {

    .plan-price {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 1150px) {

    .ctn-additional-values{
        grid-template-columns: auto;
    }

    .col-det-in {
        width: 48%;
    }

    .pl-in-1 {
        width: fit-content !important;
        padding: 20px !important;
        margin-bottom: 0 !important;
    }

    .pl-in-2 {
        width: 100% !important;
        margin-top: 20px !important;
    }

    .txt-xl-bl {
        font-size: 43px;
    }

    .plan-acc-inf .txt-lg-bl{
        font-size: 25pt;
    }
    
    .col-det{
        width: 100%;
    }

    .col-cc-card-1 {
        width: 46%;
    }

    .col-cc-card {
        width: 27%;
    }

    .col-cc-card-es {
        width: 27%;
    }
    
    .p-s-acc{
        width: 46%;
    }
}

@media only screen and (max-width: 1100px) {

    .plan-details {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .card-accounts{
        grid-template-columns: 1fr 1fr;
    }

    .card-accounts .col-acc-esp{
        position: relative;
        left: 0;
    }
}

@media only screen and (max-width: 1000px) {

    .card-accounts .text-con{
        max-width: 160px;
    }

    .card-in {
        width: 48%;
    }

    .col-det{
        width: 50%;
    }

    .list-details {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 10px;
    }

    .list-details {
        padding: 0;
    }

    .col-det-in {
        width: 100%;
    }

    .plan-card{
        padding-top: 30px;
    }

    .in-choice{
        margin-bottom: 20px;
    }

    .plan-details-2  .txt-nm-xl{
        margin: 0 !important;
    }

    .col-cc-card-1 {
        width: 65%;
    }

    .col-cc-card {
        width: 35%;
    }

    .col-cc-card-es {
        width: 35%;
    }
    
    .p-s-acc{
        width: 35%;
        padding-left: 0;
    }

    .p-s-acc-es{
        width: 65%;
        padding-left: 60px;
    }
}

@media only screen and (max-width: 900px) {
    .card-in {
        width: 100%;
    }

    .txt-gen-details-2 {
        margin-left: 5px;
    }

    .pl-in-2 {
        width: 100%;
    }
    
    .col-add-esp{
        display: block;
    }

    .plan-choice{
        margin: 10px 0 25px 0;
    }

    .ent-choice{
        display: block;
    }

    .card-accounts{
        grid-template-columns: auto;
    }

    .card-accounts .text-con{
        max-width: revert;
    }

    .card-accounts .col-acc-esp{
        position: relative;
        left: 55px;
    }
}

@media only screen and (max-width: 600px) {
    .col-det-in {
        width: 100%;
    }

    .plan-price {
        display: block;
    }

    .val_plan_us{
        margin: 0;
    }

    .plan-choice{
        margin: 10px 0 25px 0;
    }

    .card-accounts{
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 575.99px) {

    .card-accounts-sel{
        grid-template-columns: auto;
    }

    .card-accounts-sel .col-acc-esp {
        justify-content: start;
        position: relative;
        left: 55px;
        top: -12px;
    }

    .nav-tabs-plans{
        justify-content: center;
    }

    #cont_accounts {
        display: none;
    }

    .details-enterprise .det-ents {
        display: none;
    }

    .btn-down {
        display: block;
    }

    .container-acc {
        padding-bottom: 0;
    }

    .num-fol {
        display: block;
    }

    .col-card-1{
        width: 100%;
        padding-bottom: 20px;
        border-bottom: 1pt solid var(--color-gray-border-2);
    }

    .col-card{
        padding-left: 40px;
    }

    .col-card-es{
        width: 100%;
    }

    .txt-lg-bl{
        font-size: 25pt;
    }

    .txt-bl-tit{
        line-height: 25px;
    }

    .container-acc {
        padding: 30px 15px 20px 20px;
    }

    .acc-top{
        padding: 0;
        padding-bottom: 10px;
    }

    .plan-details-2{
        margin-bottom: 40px;
    }

    .div-card-1-ent{
        width: 100%;
    }

    .img-add-plan{
        width: 40px;
        height: 40px;
    }

    .add-plan{
        padding: 40px 20px 40px 20px;
    }

    .txt-xl-bl {
        font-size: 43px;
    }

    .row-types{
        justify-content: start;
    }

    .card-accounts{
        padding: 22px 10px 15px 10px;
    }

    .plan-add-acc .acc-top{
        display: block !important;
    }

    .num-acc{
        padding-left: 25px;
    }

    .pl-in-1{
        width: 100% !important;
    }

    .col-det{
        width: 100%;
    }

    .plan-details-2 .txt-lg-bl{
        font-size: 30pt;
    }

    .col-cc-card-1{
        width: 100%;
        padding-top: 30px;
    }

    .col-cc-card{
        width: 100%;
        display: flex !important;
        justify-content: space-between;
    }

    .col-main{
        border-bottom: 1pt solid var(--color-gray-border-2);
        padding-left: 60px;
        padding-bottom: 15px;
        display: block !important;
    }

    .plan-card-acc{
        padding: 15px;
    }

    .p-s-acc {
        padding-left: 0;
    }

    .p-s-acc-es {
        padding-left: 0;
    }

    .card-in .txt-nm-xxl{
        max-width: 200px;
    }
}

@media only screen and (max-width: 390px) {
    .card-accounts .text-con {
        max-width: 150px;
    }
    
    .col-card{
        width: 100%;
    }

    .col-card-1{
        margin-top: 10px;
    }

    .nav-link-plans{
        width: 100%;
    }

    .card-in .txt-nm-xxl{
        max-width: 150px;
    }
}