@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700&display=swap');

:root {
    --blue-color: #0583D2;
    --yellow-color: #FF9900;
    --maroon-color: #801525;
    --gray-color: #A2A2A2;
    --black-color: #3D3D3D;
    --white-color: #ffffff;
    --green-color: #44BD5E;
    --red-color: #DC143C;
    --orange-color: #FD6A02;
}

/*GENERAL*/
html, body, header, section, footer, div, span, table, thead, tbody, tr, td, th, img, label, input, select, textarea, p, h1, h2, h3, h4, h5, h6, form, ul, ol, li, a {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%; min-width: 100%; min-height: 100%;}
body, label, p, h1, h2, h3, h4, h5, h6, input, select, textarea, a, th {font-size: 0.87rem; line-height: 21px; font-family: Poppins; font-weight: 500; color: var(--black-color); text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-shadow: rgba(0,0,0,.01) 0 0 1px;}
body { display: flex; flex-direction: column; }
a, a label, a input {cursor: pointer;}
label {vertical-align: middle;}
li {list-style: none;}
table {border-spacing: 0; border-collapse: collapse;}
img { width: 100%; }
i.icon {margin-left: 5px; margin-top: 1px; font-family: Poppins; font-size: 0.9em !important; font-style: normal;}
input, select, textarea {box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;}
* {transition: padding 0.2s ease-in-out, max-height 0.2s ease-in-out, max-width 0.2s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, margin 0.2s ease-in-out, border 0.2s ease-in-out, opacity 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out, left 0.2s ease-in-out, stroke-dasharray 1s ease-out, transform 0.2s ease-in-out, border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   -webkit-transition: padding 0.2s ease-in-out, max-height 0.2s ease-in-out, max-width 0.2s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, margin 0.2s ease-in-out, border 0.2s ease-in-out, opacity 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out, left 0.2s ease-in-out, stroke-dasharray 1s ease-out, transform 0.2s ease-in-out, border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   -moz-transition: padding 0.2s ease-in-out, max-height 0.2s ease-in-out, max-width 0.2s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, margin 0.2s ease-in-out, border 0.2s ease-in-out, opacity 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out, left 0.2s ease-in-out, stroke-dasharray 1s ease-out, transform 0.2s ease-in-out, border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   -o-transition: padding 0.2s ease-in-out, max-height 0.2s ease-in-out, max-width 0.2s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, margin 0.2s ease-in-out, border 0.2s ease-in-out, opacity 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out, left 0.2s ease-in-out, stroke-dasharray 1s ease-out, transform 0.2s ease-in-out, border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   border-radius: 0;}
*:focus {outline: none;} select{cursor:pointer;}
.amcharts-main-div * {transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; }
::-webkit-input-placeholder { color: #bbb;}
:-moz-placeholder {color: #bbb; opacity: 1;}
::-moz-placeholder {color: #bbb; opacity: 1;}
:-ms-input-placeholder {color: #bbb;}

/*PROGRESS BAR*/
.progress-bar { height:17px; width:0; border-radius:16px;}
.progress-bar-base { border-radius:16px; margin: 5px 0; background-color: #D9D9D9; }
section.query-page .message-list .message .time-line-audio-they { height: 5px; width:0; border-radius: 8px; }
section.query-page .message-list .message .time-line-audio-they-base { height: 5px; background-color: var(--gray-color); border-radius: 8px;margin: 2px 0;margin-left: 15px; width: calc(100% - 60px); }
section.query-page .message-list .message .time-line-audio-me { height: 5px; width:0; border-radius: 8px; }
section.query-page .message-list .message .time-line-audio-me-base {margin-left: 15px; width: 150px; height: 5px; background-color: var(--gray-color); border-radius: 8px;margin: 2px 0 }
.containera {
    width: calc(100% - 60px);
    border-radius: 8px;
    height: 0;
    background: #ddd;
    margin-left: 15px;
    text-align: center;
    padding-bottom: 10px;
}

.progress {
    width: 1px;
    height: 3px;
    background: #006B5A;
    transition: width .1s linear;
}
.progress-bar1 {
    margin-left: 15px;
    width: calc(100% - 60px);
    height: 10px;
    background-color: grey;
}
.progressed {
    height: 10px;
    background-color: green;
    width: 10px;
    transition: all 2s;
}
/*TABLE*/
.table-movements  {margin-top:20px; width:100%; border-collapse: initial !important;}
.table-movements thead tr th {background: linear-gradient(180deg,#154c7f 0%,#0583d2 100%);}
.table-field { width: 50%; border: 1px solid #d9d9d9; padding: 10px; }
.first-table-header-field{border-radius: 8px 0 0 0;}
.last-table-header-field{border-radius: 0 8px 0 0;}
.table-movements tr:last-child td:first-child {border-radius: 0 0 0 8px;}
.table-movements tr:last-child td:last-child {border-radius: 0 0 8px 0;}

/*SUPPORT*/
.centered {width: calc(100% - 50px); margin: 0 auto; }
.hidden {display: none !important;}
.invisible {opacity: 0;}
.full-width {width: 100%; display: block;}
.desktop-only {display: none !important;}
.disabled {opacity: 0.3; pointer-events: none;}
.pointer-none {pointer-events: none;}
.relative {position: relative;}
.h-line{width:calc(100% - 50px); margin:10px auto 15px auto; height: 1px; background: var(--gray-color);}
.position-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);}
.block {display: block;}
.section-content { height: 100%; }
.section-content.inside { background: linear-gradient(180deg, #0583D2 0%, #154C7F 100%)!important; }
.section-content.inside section { border-radius: 16px 16px 0px 0px; height: 100%; overflow-y: auto;  }
.scroll-hidden { -ms-overflow-style: none; scrollbar-width: none; }
.scroll-hidden::-webkit-scrollbar { display: none; }
.container { height: 0; flex-grow: 1; }
.pre-line { white-space: pre-line; margin-top: -22px; }
.elipsis {text-overflow: ellipsis; overflow: hidden; width: 100%; white-space: nowrap; display: block;}
.word-break{word-break:break-word;}
.pointer { cursor: pointer; }
.h-auto { height: auto !important; }
.mb-\[35px\] { margin-bottom: 35px !important; }
           
/*TEXT-FORMAT*/
.title {font-size: 2.5rem; font-family: Poppins; font-weight: 700; vertical-align: middle; line-height: 40px; }
.title.slogan { line-height: 30px; font-size: 1.5rem; }
.title-header { font-size: 1.313rem; font-family: Poppins; font-weight: 500; line-height: 32px; }
.subtitle { font-size: 1.5rem; font-family: Poppins; font-weight: 700; line-height: 27px; }
.subtitle.small { font-size: 1.125rem; }
.text {font-size: 0.87em; line-height: 21px;}
.medium-text {font-size: 0.81rem; line-height: 20px;}
.small-text {font-size: 0.75rem; line-height: 18px;}
.small-text.small {font-size: 0.5rem; line-height: 12px;}
.big-text {font-size: 1.40rem; line-height: 22px;}
.bold {font-weight: 700 !important;}
.semi-bold { font-weight: 600; }
.no-bold {font-weight: 500!important;}
.align-left {text-align: left !important;}
.align-right {text-align: right !important;}
.align-center {text-align: center !important;}
.link {font-size: 0.75em;}
.link:hover {text-decoration: underline;}
.text-subrayado {text-decoration: line-through; margin-right: 8px;}

/*TEXT COLOR*/
.text-color-blue {color: var(--blue-color); text-decoration-color: var(--blue-color);}
.text-color-yellow {color: var(--yellow-color); text-decoration-color: var(--yellow-color);}
.text-color-maroon {color: var(--maroon-color); text-decoration-color: var(--maroon-color);}
.text-color-gray {color: var(--gray-color); text-decoration-color: var(--gray-color);}
.text-color-black {color: var(--black-color); text-decoration-color: var(--black-color);}
.text-color-white {color: var(--white-color); text-decoration-color: var(--white-color);}
.text-color-green {color: var(--green-color); text-decoration-color: var(--green-color);}
.text-color-orange {color: var(--orange-color); text-decoration-color: var(--orange-color);}

/*BACKGROUND COLOR*/
.background-color-blue {background-color: var(--blue-color);}
.background-color-yellow {background-color: var(--yellow-color);}
.background-color-maroon {background-color: var(--maroon-color);}
.background-color-gray {background-color: var(--gray-color);}
.background-color-black {background-color: var(--black-color);}
.background-color-white {background-color: var(--white-color);}
.background-color-green {background-color: var(--green-color);}
.background-color-red {background-color: var(--red-color);}
.background-color-orange {background-color: var(--orange-color);}

.gradient-blue { background: linear-gradient(180deg, #154C7F 0%, #0583D2 100%)!important; }
.gradient-red { background: linear-gradient(180deg, #500D17 0%, #801525 100%)!important; }

/*BUTTONS*/
.button { position: relative; font-size:1.125rem; line-height: 27px; padding: 12px 0px; display: inline-block; font-family: Poppins; font-weight: 700; overflow: hidden; border-radius: 16px; text-align: center; width: 100%; }
.button:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 16px;}
.button:hover:after { background: rgba(255, 255, 255, 0.1); }
.button:active:after { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); background: none; }
.button.btn-icon {background-size: auto 50%; background-position: 12px center; background-repeat: no-repeat; padding-left: 42px;}
.button.btn-icon.btn-small-icon {background-size: auto 35%;border-radius:8px;}
.button.btn-medium { padding: 12px 0px; }
.button.btn-small { padding: 6px 0px; }

/*LOADING*/
.button.btn-loading {opacity: 0.75 !important; pointer-events: none;}
.button.btn-loading:before {width: 20px; height: 20px; content: ''; display: inline-block; vertical-align: middle; background: url('../Images/Icons/ic_loader.svg') center no-repeat; background-size: contain; margin-right: 10px; margin-left: -15px; animation: spin 1s linear infinite;}

/*INPUTS*/
input, textarea, select {border: 1px solid #D9D9D9; font-size: 1rem; color: var(--black-color); line-height: 24px; -webkit-appearance: none; -moz-appearance: none;}
input:focus, textarea:focus {border-color: var(--blue-color);}
input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea {height: 50px; padding: 0 15px; border-radius: 8px;}
input[type=password]::-ms-reveal, input[type=password]::-ms-clear {display: none;}
input.icon-input {padding-right: 45px !important; background-repeat: no-repeat !important;}
input.icon-input.right {background-position: calc(100% - 16px) center !important; background-size: 18px;}
input.icon-input.left {background-position: 16px center !important; padding-left: 40px;}
input.icon-input.left.right {background-position: 16px center, calc(100% - 16px) center !important;}
input.icon-input.search {background-image: url('../img/icons/ic_search.svg'); background-size: 18px;}
input.error, textarea.error, select.error, a.error {border-color: var(--red-color) !important;}
textarea {height: 100px; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; resize: none; }
select:not([size]) {padding-right: 36px; background: var(--white-color) url('../Images/Icons/ic_arrow_down_black.svg') calc(100% - 15px) center no-repeat; background-size: auto 15%;}
select[size] {background: var(--white-color); border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); overflow: auto;}
select[size] option { padding: 5px 10px; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none;}
select[size] option:checked {box-shadow: 0 0 0 20000px #88d65d inset;}

/*PASSWORD INPUTS*/
input[type="password"].password-input:not(:disabled) {background-image: url('../Images/Icons/ic_close_eye_black.svg');}
input[type="text"].password-input:not(:disabled) {background-image: url('../Images/Icons/ic_open_eye_black.svg');}
input.password-input.icon-hover {cursor: pointer;}

/*CHECKBOXES*/
input[type="checkbox"] {width: 16px; height: 16px; position: relative; display: inline-block; border: 1px solid transparent; border-radius: 3px; background-color: #ddd; flex-shrink: 0;}
input[type="checkbox"]:after {width: 7px; height: 3px; border-radius: 1px; content: ''; display: block; position: absolute; top: 3px; left: 2px; border-bottom: 2px solid transparent; border-left: 2px solid transparent; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg);}
input[type="checkbox"]:hover:after {border-color: rgba(77, 77, 77, 0.5);}
input[type="checkbox"]:checked {background-color: var(--blue-color);}
input[type="checkbox"]:checked:disabled {background-color: var(--gray-color);}
input[type="checkbox"]:checked:after {border-color: var(--white-color);}
input[type="checkbox"]:indeterminate:after {width: 10px; height: 10px; border-radius: 2px; top: 2px; left: 2px; background-color: var(--maroon-color); border: none; transform: none; -webkit-transform: none; -ms-transform: none; -moz-transform: none; -o-transform: none;}
input[type="checkbox"]:indeterminate:after:disabled {background-color: var(--gray-color);}

/*RADIO BUTTONS*/
input[type="radio"] {margin: 18px; appearence: none; -moz-appearance: none; -webkit-appearance: none; height: 14px; width: 14px; padding: 0; position: relative; display: inline-block; border: 8px solid #D9D9D9; border-radius: 50%; vertical-align: middle;}
input[type="radio"].error {border-color: var(--red) !important;}
input[type="radio"]:after {width: 10px; height: 10px; position: absolute; border-radius: 50px; content: ''; top: 1px; left: 1px;}
input[type="radio"]:checked {border-color: var(--blue-color);}
input[type="radio"]:checked:after {background: var(--primary-color);}
input[type="radio"] + span {margin-left: 5px; vertical-align: middle; font-size: 0.875rem;}

/*FORM FIELD*/
.form-field {position: relative; display: flex; flex-wrap: wrap;}
.form-field.column {flex-direction: column;}
.form-field:not(:last-child) {margin-bottom: 12px;}
.form-field input, .form-field select, .form-field textarea {padding-top: 15px; flex-grow: 1; width: 100%;}
.form-field textarea {padding-top: 20px; }
.form-field input.not-label, .form-field select.not-label, .form-field textarea.not-label {padding-top: 0;}
.form-field input + label, .form-field select + label, .form-field textarea + label {position: absolute; top: 15px; left: 15px; font-weight: 500; color: var(--gray-color); font-size: 1rem; transition: top 0.15s ease-in-out, font-size 0.15s ease-in-out; pointer-events: none;}
.form-field input:focus + label, .form-field input:not(:placeholder-shown) + label, .form-field select + label, .form-field textarea + label {top: 7px; font-size: 0.75rem; line-height: 18px;}
.form-field input:not(:focus):not(.not-label)::-webkit-input-placeholder {color: transparent;}
.form-field input:not(:focus):not(.not-label):-moz-placeholder {color: transparent;}
.form-field input:not(:focus):not(.not-label):-ms-input-placeholder {color: transparent;}
.form-field input:not(.not-label)::-webkit-input-placeholder {font-weight: 500;}
.form-field input:not(.not-label):-moz-placeholder {font-weight: 500;}
.form-field input:not(.not-label):-ms-input-placeholder {font-weight: 500;}
.form-field .info {margin-top: 5px; margin-left: 6px; padding-bottom: 10px; color: var(--gray-color); text-align: left; display: inline;}
.form-field .info.error {color: var(--red-color);}
.form-field .info.error:not(:empty) + .info {display: none;}
.form-field .info.error:empty {display: none;}
.form-field.span input {padding-left: 34px;}
.form-field.span span {display: none; position: absolute; top: 26px; left: 17px; font-size: 1rem; pointer-events: none;}
.form-field.span input:focus ~ span, .form-field.span input:not(:placeholder-shown) ~ span {display: block;}
.form-field.span .not-label ~ span {top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%);}
.form-field.span.right span {left: auto; right: 17px; font-weight: 600; color: var(--gray-color);}
.form-field.span.right input {padding-left: 16px; padding-right: 40px !important;}
.form-field.span.right.span-long input {padding-right: 90px !important;}
.form-field.error input, .form-field.error select, .form-field.error textarea {border-color: var(--red-color);}
.form-field.error label {color: var(--red-color); content: 'Este campo es obligatorio.*'; }
.form-field.small input {height: 35px; padding-top: 0; font-size: 0.75rem;}
.form-check { margin-bottom: 6px; }
.form-check * { display: inline-block; vertical-align: middle; }
.form-check input { margin-right: 10px; }

/*MULTI FORM FIELD*/
.multi-form-field {display: flex; gap: 15px;}
.multi-form-field .form-field input {width: 0;}
.multi-form-field .form-field.grow { flex-grow: 1; width: 0%; }

/*ELEMENT-LIST*/
.element-list {overflow-x: auto;}
.element-list {width: 100%;}
.element-list > .body {display: flex; flex-direction: column; gap: 10px; }
.element-list > .body > .element {overflow-x: auto; border-radius: 8px; padding: 10px; border: 1px solid #e1e1e1; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15); background-color: #F9F6F1;}
.element-list > .body > .element:nth-child(even) {background-color: #D9CDBE;}
.element-list > .body > .element > .image {width: 36px; height: 36px; grid-area: image; margin-right: 12px; border-radius: 50%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); font-size: 1rem; overflow: hidden;}
.element-list > .body > .element > .image img {width: 100%; height: 100%; object-fit: contain;}
.element-list > .body > .element > .main {grid-area: main; display: flex; flex-direction: column; justify-content: center;}
.element-list > .body > .element > .main > .name {font-weight: bold;}
.element-list > .body > .element > a.main:hover > .name {color: var(--primary-color);}
.element-list > .body > .element > .data {grid-area: data; display: flex; margin-top: 3px; flex-wrap: wrap; gap: 0 12px; align-items: center;}
.element-list > .body > .element > .data > div, .element-list > .body > .element > .data > div > label:not(.text-reconfirmada) {width: 0; min-width: 140px; flex-grow: 1; margin: 6px 0; display: flex; flex-direction: column; word-break: break-word; font-size: 0.875rem; color: var(--third-color);}
.element-list > .body > .element > .data > div > span {font-weight: 600; word-break: initial; color: var(--primary-color); }
/*.element-list > .body > .element > .data > div a svg path {fill: #ffffff;}*/
.element-list > .body > .element > .actions-container { margin-top: 15px; }
/*.element-list > header > .data div:not(.both), .element-list .body .element .data div:not(.both) { display: none; }*/
.element-list > header {overflow-x:auto; display: flex; padding: 12px 10px; background: var(--blue-color); margin-bottom: 10px !important; color: var(--white-color); border-radius: 8px;}
.element-list > header > .data {display: flex; width: 0; flex-grow: 1; gap: 12px;}
.element-list > header > .data > div {width: 0; flex-grow: 1; font-size: 0.875rem;}

.element-list > header > .data div, section.reserva > main .element-list .body .element .data div {min-width: 85px; display: initial;}

.element-list > header, .element-list .body .element { overflow-x: inherit;}
.element-list > header > .data, .element-list .body .element .data {flex-wrap: initial; width: 100%;}
.element-list > header > .data div, .element-list .body .element .data div {min-width: 160px; display: initial;}

/*BANNER CONTAINER*/
.banner-container {
    --w: 12; --h: 5; position: relative; transition: transform 0.5s ease-in-out; touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.banner-container .banners {position: relative;}
.banner-container .banners ul {display: flex; -ms-overflow-style: none; scrollbar-width: none; }
.banner-container .banners ul::-webkit-scrollbar {display: none;}
.banner-container .banners ul li {width: 100%; flex-shrink: 0;}
.banner-container .banners ul li:not(:first-child) {margin-left: 13px;}
.banner-container .banners ul li .banner {display: block; overflow: hidden;}
.banner-container .banners ul li .banner img {object-fit: cover;}
.banner-container .banners > a {width: 30px; height: 30px; position: absolute; top: 50%; background-color: #fff; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 50%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); cursor: pointer;}
.banner-container .banners > .prev {left: 5px; background-image: url('../img/icons/ic_arrow_left.svg'); }
.banner-container .banners > .next {right: 5px; background-image: url('../img/icons/ic_arrow_right.svg');  }
.banner-container .pages {width: 100%; display: flex; justify-content: center; margin-top: 18px; gap: 12px; position: absolute; bottom: -20px;}
.banner-container .pages a {height: 5px; width:71px;  border-radius: 3px; text-indent: -20000px; background: var(--gray-color); opacity: 1; display: block; position: relative; transition: opacity 0.1s ease-in-out; -webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out;}
.banner-container .pages a.active {opacity: 1; background: var(--blue-color); }


/*BOX-CONTENT*/
.box-content { width: 100%; height: 100%; }

/*NO DATA*/
.user-message-container {width: calc(100% - 160px); max-width:322px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px; padding: 55px; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.user-message-container .ic-file-close { height: 80px; width: 65px; background-size: contain; margin-bottom: 20px; }
.user-message-action { width: calc(100% - 50px); max-width:322px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); }

/*POPUPS*/
.popup {width: 100%; height: 100%; pointer-events: none; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; background: rgba(30,30,30,0.6); z-index: 200; opacity: 0; transition: opacity 0.2s ease-in-out;}
.popup.active {pointer-events: all; opacity: 1;}
.popup .popup-box::-webkit-scrollbar {display: none;}
.popup .popup-box {-ms-overflow-style: none; scrollbar-width: none;}
.popup .popup-box {flex-grow: 1; position: relative; background-color: var(--white-color); overflow-y: auto; border-radius: 14px; padding: 32px 30px; margin: 20px; max-width: 520px; max-height: calc(100% - 60px);}
.popup .popup-box.small-horizontal-padding {padding-left: 10px; padding-right: 10px;}
.popup .popup-box.big-vertical-padding {padding-top: 60px; padding-bottom: 50px;}
.popup .popup-box.big-horizontal-padding {padding-left: 30px; padding-right: 30px;}
.popup .popup-box .content .body {text-align: center;}
.popup .popup-box .content .body .popup-ico { width: 80px; height: 80px; margin-bottom: 10px; }
.popup .popup-box .content .body .popup-subtitle { font-size:1.125rem; line-height: 27px; }
.popup .popup-box .content .body .popup-title { font-size:1.5rem; line-height: 30px; }
.popup .popup-box .content .body .popup-container.small-space { margin: 10px 0 30px 0; }
.popup .popup-box .content .body .text-action { margin: 20px 0 7px 0; }
.popup .popup-box .content .body .form-field{display:block!important;}
.popup .popup-box .content .actions {display: flex; justify-content: space-between; margin-top: 25px; gap: 10px;}

.popup .popup-box .content .service {  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px; padding: 20px 20px 7px 20px; margin-bottom: 15px; }
.popup .popup-box .content .service p {margin-top: 15px;color: #9f9f9f; }
.popup .popup-box .content .service .service-info { display: flex; flex-direction: row; justify-content:space-between; align-items: center; }
.popup .popup-box .content .service .service-info .service-date .service-credits * { display: inline-block; vertical-align: middle; }
.popup .popup-box .content .service .service-info .service-date { width: 100%}
.popup .popup-box .content .service .service-date h3{ font-size: 1.125rem !important;padding-bottom:15px; }
.popup .popup-box .content .service .service-date .payment-type-container {display: flex;flex-wrap: wrap;gap: 5%;margin-bottom: 15px;}
.popup .popup-box .content .service .service-date .payment-type-container .payment-type { width: 47%;height: 50px;background-color: #800000;border-radius: 8px;}
.popup .popup-box .content .service .service-date .payment-type-container .payment-type label{ color:white}
.popup .popup-box .content .service .service-info .service-date .plan-detail { display:flex }
.popup .popup-box .content .service .service-info .service-date .service-list { display:flex }
.popup .popup-box .content .service .service-info .service-date .plan-detail .plan-credits { width: 50%}
.popup .popup-box .content .service .service-info .service-date .service-list .plan-credits { width: 50%}
.popup .popup-box .content .service .service-date .card-info { display: flex;margin-top: 13px;gap: 10px;margin-bottom: 15px; }
.popup .popup-box .content .service .service-date .box-body .card-type .form-field{width: 100% }
.popup .popup-box .content .service .service-date .card-info .wrapper {min-width: 80px;display: flex;align-items: center;justify-content: center;background: #FFF;border-radius: 8px }
.popup .popup-box .content .service .service-date .box-body .card-type {display: flex;margin-bottom: 15px;gap: 10px; }
.popup .popup-box .content .service .service-date .card-info .wrapper span { width: 100%;text-align: center;font-weight: 600;cursor: pointer;user-select: none; }
.popup .popup-box .content .service .service-date .card-info .wrapper input { width: 100%; }
.popup .popup-box .content .service .service-date .card-info .wrapper span.num {  border-right: 2px solid rgba(0,0,0,0.2);border-left: 2px solid rgba(0,0,0,0.2);pointer-events: none; }
.popup .popup-box .content .service .service-date .card-info .card-vencimiento{width: 100%}
.popup .popup-box .content .service .service-date .card-info .card-cvv{width: 65%}
.popup .popup-box .content .service .service-date .card-info .card-vencimiento .form-field input{width: 30%}
.popup .popup-box .content .service .service-date .card-info .card-cvv .form-field input{width: 40%}
.popup .popup-box .content .service .service-info .service-date .service-credits .ic-coin-yellow { width: 20px; height: 20px; margin-right: 5px; }
.popup .popup-box .content .service .service-action { display: flex; align-items: center; justify-content:center ; flex-direction: row; gap: 10px; margin-top: 20px; }

/*LOADING*/
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@-o-keyframes spin { 100% { -o-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@keyframes loading-grow { 0% { stroke-dasharray: 0 100px; } 100% { stroke-dasharray: 100px 100px; } }
.loading {position:fixed; width:100%; height:100%; top:0; left:0; background: rgba(240, 240, 240, 0.8); z-index: 200; opacity: 0; pointer-events: none;}
.loading.active {opacity:1; pointer-events:all; backdrop-filter: blur(5px);}
.loading .loading-container {text-align:center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);}
.loading .loading-container svg {width: 100px; -webkit-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}
.loading .loading-container svg path {stroke-width: 2;}
.loading .loading-container svg path:first-child {stroke: transparent;}
.loading .loading-container svg path:last-child {stroke: var(--green-color); animation: loading-grow 1s alternate infinite;}
.loading .loading-container .progress {position:fixed; top: calc(50% - 2px); font-size: 0.85em;  display:block; width: 100%; text-align:center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform:  translateY(-50%); background: transparent;}

/*ICONS*/
.ic-arrow-left-blue { background-image: url(../Images/Icons/ic_arrow_left_blue.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-fb { background-image: url(../Images/Icons/ic_facebook.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-ig { background-image: url(../Images/Icons/ic_instagram.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-in { background-image: url(../Images/Icons/ic_linkedIn.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-componet-plan-black { background-image: url(../Images/Icons/ic_component_plan_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-arrow-left-black { background-image: url(../Images/Icons/ic_arrow_left_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-arrow-right-black { background-image: url(../Images/Icons/ic_arrow_right_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-arrow-right-white { background-image: url(../Images/Icons/ic_arrow_right_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-coin-yellow { background-image: url(../Images/Icons/ic_coin_yellow.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-fb-white { background-image: url(../Images/Icons/ic_fb_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-ig-white { background-image: url(../Images/Icons/ic_instagram_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-in-white { background-image: url(../Images/Icons/ic_linkedIn_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-circle-check { background-image: url(../Images/Icons/ic_circle_check.svg); display:inline-block; background-position: center; background-repeat: no-repeat; }
.ic-file-close {background-image: url(../Images/Icons/ic_file_close.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-check-green {background-image: url(../Images/Icons/ic_check_green.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-file-black {background-image: url(../Images/Icons/ic_file_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-delete-red {background-image: url(../Images/Icons/ic_delete_red.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-paperclic-gray {background-image: url(../Images/Icons/ic_paperclip_gray.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-microphone-white {background-image: url(../Images/Icons/ic_microphone_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-file-docs-white {background-image: url(../Images/Icons/ic_file_docs_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-file-docs-black {background-image: url(../Images/Icons/ic_file_docs_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-file-img-white {background-image: url(../Images/Icons/ic_file_img_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-file-img-black {background-image: url(../Images/Icons/ic_file_img_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-play-white {background-image: url(../Images/Icons/ic_play_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-pausa-white {background-image: url(../Images/Icons/ic_pausa_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-calendar-black {background-image: url(../Images/Icons/ic_calendar_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-send-white {background-image: url(../Images/Icons/ic_send_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-back-black {background-image: url(../Images/Icons/ic_back_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-exito-red {background-image: url(../Images/Icons/ic_exito_red.svg); display:inline-block; background-position: center; background-repeat: no-repeat; background-size: contain;}
.ic-fail-red {background-image: url(../Images/Icons/ic_fail_red.svg); display:inline-block; background-position: center; background-repeat: no-repeat; background-size: contain;}
.ic-warning-red {background-image: url(../Images/Icons/ic_warning_red.svg); display:inline-block; background-position: center; background-repeat: no-repeat; background-size: contain;}
.ic-pausa-white {background-image: url(../Images/Icons/ic_pausa_white.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-visa {background-image: url(../Images/Icons/ic_visa.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-download-black {background-image: url(../Images/Icons/ic_download_black.svg); display:inline-block; background-position: center; background-repeat: no-repeat;}
.ic-warning-login-red {background-image: url(../Images/Icons/ic_warning_login_red.svg); display:inline-block; background-position: center; background-repeat: no-repeat; background-size: contain;}

/*=============================================================================================================================================================================================================================================*/

/*BIENVENIDA*/
section.welcome { background: linear-gradient(180deg,#154c7f 0%,#0583d2 100%); height: 100vh; max-height: 100vh; }
section.welcome .center { height: 100%; display: flex; align-items: center; flex-direction: column; gap: 30px; justify-content: center; }
section.welcome .logo { width: 100%; display: flex; justify-content: center; margin-bottom: 500px; }
section.welcome .logo img { width: 100%; max-width: 200px;  }
section.welcome .welcome-content { width: 100%; }
section.welcome .welcome-content .slogan-welcome { width: 100%; max-width: 248px; }
section.welcome .welcome-content .slogan-welcome h1 { margin-bottom: 20px; }
section.welcome .welcome-content .button { width: 100%; margin: 45px 0 15px 0; }

/*PANEL DE REGISTRO*/
.panel-register { width: 100%; border-radius: 24px 24px 0px 0px; position: fixed; bottom: 0; left: 0; height: 500px; cursor: pointer; }
.panel-register .line-panel { width: 100%; max-width: 120px; height: 6px; border-radius: 5px; margin: 20px auto; }

/*BOX*/
.box { width: 100%; padding: 30px 0; height: 100%;}
.box { gap:15px; display:flex; flex-direction: column; }
.box .box-part { border: 1px solid var(--blue-color); margin-bottom: 40px; padding: 20px; border-radius: 16px; }
.box .box-title { font-weight: 700; font-size: 1.125rem; line-height: 27px; margin-bottom: 10px; }
.box .box-description { font-weight: 500; font-size: 0.875rem; line-height: 21px; margin-bottom: 10px; }
.box .box-actions { margin-top: 30px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }

/*ARROWS*/
.arrows { width: 100%; position: absolute; z-index: 1; display: flex; flex-direction: row; justify-content: space-between; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.arrows a { width: 30px; height: 30px; }

/*REGISTRO*/
section.register { height: 100%; }
section.register .centered { display: flex; gap: 25px; }
section.register .box-content { display: inline-table; flex-shrink: 0; height: 512px; }
section.register .box-content .box-title { margin: 15px 0; }
section.register .box-content .box-title.back-box { display: flex; align-items: center; }
section.register .box-content .box-title .back-page { width:20px; height: 20px; margin-right: 15px; }
section.register .box-content .box-title .back-main { width:20px; height: 20px; margin-right: 15px; }
section.register .box-content .box-title .back-main.top { width:20px; height: 20px; margin-right: 15px; margin-top: -35px; }
section.register .box-content .box-title.big-space { margin: 15px 0 30px 0; }
section.register .box-content .box-description { margin-bottom: 30px; }  
section.register .box-content .box-body .terms-conditions { margin-top: 20px; }  
section.register .box-content .box-actions { position: absolute; left: 0; bottom: 60px; width: 100%; }

/*HEADER*/
header.header { width: 100%; height: 60px; box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.37); flex-shrink: 0; }
header.header.gradient { box-shadow: initial; }
header.header .header-content { display: flex; align-items: center; height: 100%; }
header.header .header-content > * { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
header.header .header-content .nav-action a.ic-menu.blue {  width: 24px; height: 18px; background-image: url(../Images/Icons/ic_menu_blue.svg); }
header.header .header-content .nav-action a.ic-menu.white { width: 24px; height: 18px; background-image: url(../Images/Icons/ic_menu_white.svg); }
header.header .header-content .nav-action a.ic-arrow-left-white {  width: 9px; height: 18px; background-image: url(../Images/Icons/ic_arrow_left_white.svg); background-repeat: no-repeat; }
header.header .header-content .nav-action a.ic_back { background-image: url(../Images/Icons/ic_back_black.svg); }
header.header .header-content .logo, header.header .header-content .logo { left: 50%; transform: translateY(-50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translateY(-50%, -50%); }
header.header .header-content .logo, header.header .header-content .logo img { width: 100px; height: 28px; }
header.header .header-content .notifications { width: 25px; height: 25px; right: 25px; left: initial; }
header.header .header-content .notifications .notification { width: 8px; height: 8px; position: absolute; top: 0; right: 0; border-radius: 50%; }
header.header .header-content .notifications .ic-notification { width: 100%; height: 100%; background-image: url(../Images/Icons/ic_notification.svg); background-repeat: no-repeat; background-position: center; }
header.header .header-content .section-title { left: 70px; }
header.header .header-content .section-title label { font-weight: 500; font-size: 1.313rem; }

/*MENU*/
.menu {height: 100%; width: 100%; position: fixed; top: 0px; left: 0; pointer-events: none; z-index: 51; transition: all 0.2s ease-in-out; }
.menu.active { overflow: auto; pointer-events: all; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); transition: all 0.2s ease-in-out; }
.menu .menu-panel {max-width: 230px; height: calc(100% - 40px); margin-left: -100%; position: relative; box-shadow: 4px 0px 6px 0px rgba(0,0,0,0.37); border-radius: 0px 16px 16px 0px; padding: 20px 30px;}
.menu.active .menu-panel {margin-left: 0;}
.menu .menu-panel .ic-volver {display: block; height: 20px; width: 20px; position: absolute; top: 20px; right: 20px; background-image: url(../Images/Icons/ic_back_black.svg); background-position: center; background-repeat: no-repeat; background-size: contain; }
.menu .menu-panel header { margin-top: 35px; }
.menu .menu-panel header .option-name { padding: 5px 15px; border-radius: 8px; margin-right: 17px; }
.menu .menu-panel header .user-name { font-size: 1.2rem; line-height: 30px; width:calc(100% - 55px); }
.menu .menu-panel .menu-list { margin-top: 40px; height: calc(100% - 210px); }
.menu .menu-panel .menu-list .option-menu { border-radius: 8px; padding: 0 10px; margin-bottom: 10px; }
.menu .menu-panel .menu-list .option-menu:hover, .menu .menu-panel .menu-list .option-menu.active { background-color: #F9F9F9; }
.menu .menu-panel .menu-list .option-menu a {height: 35px; line-height: 37px; display: block; font-weight: 600; font-size: 1rem; }
.menu .menu-panel .menu-list .option-menu a:before {content: ''; float: left; margin-right: 15px; width: 20px; height: 100%; background-position: 40% center; background-size: 18px auto; background-repeat: no-repeat;}
.menu .menu-panel .menu-list .option-menu:hover a, .menu .menu-panel .menu-list .option-menu.active a { color: var(--blue-color); }
.menu .menu-panel .menu-list .option-menu a.home:before { background-image: url('../Images/Icons/ic_home_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.home:before, .menu .menu-panel .menu-list .option-menu.active a.home:before { background-image: url('../Images/Icons/ic_home_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.queries:before { background-image: url('../Images/Icons/ic_queries_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.queries:before, .menu .menu-panel .menu-list .option-menu.active a.queries:before { background-image: url('../Images/Icons/ic_queries_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.services:before { background-image: url('../Images/Icons/ic_services_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.services:before, .menu .menu-panel .menu-list .option-menu.active a.services:before { background-image: url('../Images/Icons/ic_services_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.subscription:before { background-image: url('../Images/Icons/ic_subscription_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.subscription:before, .menu .menu-panel .menu-list .option-menu.active a.subscription:before { background-image: url('../Images/Icons/ic_subscription_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.payments:before { background-image: url('../Images/Icons/ic_payments_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.payments:before, .menu .menu-panel .menu-list .option-menu.active a.payments:before { background-image: url('../Images/Icons/ic_payments_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.cotizaciones:before { background-image: url('../Images/Icons/ic_cotizaciones_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.cotizaciones:before, .menu .menu-panel .menu-list .option-menu.active a.cotizaciones:before { background-image: url('../Images/Icons/ic_cotizaciones_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.support:before { background-image: url('../Images/Icons/ic_whatsapp_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.support:before, .menu .menu-panel .menu-list .option-menu.active a.support:before { background-image: url('../Images/Icons/ic_whatsapp_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.profile:before { background-image: url('../Images/Icons/ic_user_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.profile:before, .menu .menu-panel .menu-list .option-menu.active a.profile:before { background-image: url('../Images/Icons/ic_user_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.exit:before { background-image: url('../Images/Icons/ic_exit_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.exit:before, .menu .menu-panel .menu-list .option-menu.active a.exit:before { background-image: url('../Images/Icons/ic_exit_blue.svg'); }
.menu .menu-panel .menu-list .option-menu a.communication:before { background-image: url('../Images/Icons/ic_comunnication_black.svg'); }
.menu .menu-panel .menu-list .option-menu:hover a.communication:before, .menu .menu-panel .menu-list .option-menu.active a.communication:before { background-image: url('../Images/Icons/ic_comunnication_blue.svg'); }
.menu .menu-panel .menu-list .user-actions { position: absolute; bottom: 0px; left: 0; width: 100%; }
.menu .menu-panel footer { position: absolute; bottom: 20px; left: 50%; width: 100%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.menu .menu-panel footer .social-networks { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 7px; }
.menu .menu-panel footer .social-networks a { width: 20px; height: 20px; }
.menu .menu-panel footer .terms-conditions { margin-top: 8px; }
.menu .menu-panel footer .terms-conditions a { font-size: 0.65rem; }

/*HOME*/
section.home { border-radius: initial!important; }
section.home .home-container { height: auto; width: 100%; border-radius: 0px 0px 8px 8px; background: linear-gradient(90deg, rgba(21, 76, 127, 0.95) 0%, rgba(5, 131, 210, 0.95) 100%); }
section.home .home-container .slogan-welcome { padding: 20px 0 10px; display: flex; flex-direction: column; gap: 10px; }
section.home .home-container .slogan-welcome iframe { margin-top: 10px;}
section.home .home-container .promocion { top: 50%; left: 25px; padding: 10px 0px;}
section.home .home-container .promocion .slogan-phrase p { font-size: 1.25rem; font-weight: 700; line-height: 30px; margin: 0 0 15px 0; }
section.home .home-container .promocion .slogan-text p { margin: 15px 0 15px 0;  font-weight: 700; font-size: 1.25rem; line-height: 30px;}
section.home .home-container .promocion .slogan-basic-text p { margin: 15px 0 15px 0; font-weight: 500; font-size: 18px; line-height: 27px; }
section.home .home-container .promocion .garantia { margin: 15px 0 15px 0;}
section.home .home-container .slider { background-color: var(--white-color); border-radius: 8px; padding: 15px 15px 35px 15px; overflow: hidden; position: relative; }
section.home .home-container .slider .home-banner .step { display: flex; flex-direction: column; justify-content: space-between; }
section.home .home-container .slider .home-banner .step .informacion { display: flex; gap: 15px; }
section.home .home-container .slider .home-banner .step .informacion p { font-weight: 500; font-size: 16px; }
section.home .home-container .slider .home-banner .step .informacion p a { color: var(--blue-color); font-size: 16px; }
section.home .home-container .slider .home-banner .step .informacion .numero { background-color: var(--yellow-color); width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; margin-left: 2px; border-radius: 8px; }
section.home .home-container .slider .home-banner .step .informacion .numero label { font-weight: 700; font-size: 20px; color: var(--white-color); }
section.home .home-container .slider .home-banner .step .barras { display:flex; flex-direction:row; gap: 4px; }
section.home .services-queries-list .home-content .home-sections .home-section{ border-radius: 16px; padding: 15px; margin-bottom: 15px;}
section.home .services-queries-list .home-content .home-sections .home-section.quotes{ border: 1px solid var(--blue-color); }
section.home .services-queries-list .home-content .home-sections .home-section.queries { height: 205px; }
section.home .services-queries-list .home-content .home-sections .home-section.services { height: 202px; }
section.home .services-queries-list .home-content .home-sections .home-section.queries, 
section.home .services-queries-list .home-content .home-sections .home-section .home-section-state.queries { border: 1px solid var(--green-color); }
section.home .services-queries-list .home-content .home-sections .home-section.services,
section.home .services-queries-list .home-content .home-sections .home-section .home-section-state.services{ border: 1px solid var(--orange-color); }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-info { display: flex; flex-direction: row; justify-content: space-between; }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-info .title-home-section { width: calc(100% - 100px); }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-state { border-radius: 16px; padding: 15px; margin: 10px 0 15px 0; }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-state .state-section { display: flex; align-items: center; justify-content: space-between; }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-state .number-message { position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-state.queries .state-section div { display: flex; align-items: center; }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-state .state-section .state-message { width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
section.home .services-queries-list .home-content .home-sections .home-section .home-section-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
section.home .services-queries-list .home-content .home-sections .home-section.quotes .home-section-actions { margin-top: 20px; }
section.home .services-queries-list .home-content .home-sections .home-section:not(.quotes) .home-section-actions { padding: 12px 20px 13px 20px; border-radius: 0 0 16px 16px; position: absolute; width: calc(100% - 38px); left: -1px; cursor: pointer; }
section.home .services-queries-list .home-content .home-sections .home-section:not(.quotes) .home-section-actions .ic-arrow-right-white{ width: 25px; height: 25px; }
section.home .whatsapp-container { gap: 20px; display: flex; flex-direction: row-reverse; align-items: center; position: fixed; bottom: 20px; right: 20px; }
section.home .whatsapp-container a { background-image: url('../Images/Icons/ic_whatsapp.svg'); width: 64px; height: 64px; }

/*DETALLE COTIZACION*/
section.cotizaciones .detalle-cotizacion .part-cotizacion { margin-bottom: 15px; }

/*SERVICIOS*/
section.services-page .plans .plans-container { margin: 25px 0 35px 0; }
section.services-page .plans .plans-container .plans-list { display: flex; align-items: stretch; flex-direction: row; gap: 20px; overflow-x: auto; }
section.services-page .plans .plans-container .plans-list .plan { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; flex-basis: 180px; display: flex; flex-shrink: 0; flex-direction: column; }
section.services-page .plans .plans-container .plans-list .plan .plan-info .plan-price span { font-size: 1.5rem; line-height: 36px;  }
section.services-page .plans .plans-container .plans-list .plan .plan-info .plan-discount { font-size: 0.625rem; line-height: 15px; text-decoration: line-through; }
section.services-page .plans .plans-container .plans-list .plan .components-plan { flex-grow: 1; }
section.services-page .plans .plans-container .plans-list .plan .components-plan .component-plan { display: flex; align-items: center; flex-direction: row; }
section.services-page .plans .plans-container .plans-list .plan .components-plan .component-plan div { width: 30px; height: 30px; margin-right: 5px; }
section.services-page .plans .plans-container .plans-list .plan .plan-actions { margin: 10px -20px -20px -20px; }
section.services-page .plans .plans-container .plans-list .plan .plan-actions a { padding: 12px 0; border-radius: 0 0 16px 16px; }
section.services-page .services { border: 1px solid var(--blue-color); padding: 20px; border-radius: 16px; }
section.services-page .services .service-container:not(.cotizacion-service) { margin: 25px 0 35px 0; }
section.services-page .services .service-container.lista { margin: 0; gap:15px; display:flex; flex-direction: column; }
section.services-page .services .service-container .service { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; margin-bottom: 15px; }
section.services-page .services .service-container .service.query { border: 1px solid var(--green-color); }
section.services-page .services .service-container .service.cotizacion { border: 1px solid var(--blue-color); background-color: #E0F0F9; }
section.services-page .services .service-container .service .service-info { display: flex; flex-direction: row; justify-content:space-between; align-items: center; position:relative}
section.services-page .services .service-container .service .service-info .consulta-price label { display: flex; flex-direction: column; }
section.services-page .services .service-container .service .service-info label{ right:10px; font-size: 0.85rem; }
section.services-page .services .service-container .service .service-info .consulta-price{display: flex;flex-wrap: wrap;justify-content: end;}
section.services-page .services .service-container .service .service-info .service-date label { width:50%; font-size: 0.9rem; }
section.services-page .services .service-container .service .service-info .service-date { width:50% }
section.services-page .services .service-container .service .service-info .service-date .service-credits * { display: inline-block; vertical-align: middle; }
section.services-page .services .service-container .service .service-info .service-date .service-credits label { width: calc(100% - 30px); }
section.services-page .services .service-container .service .service-info .service-date .service-credits .ic-coin-yellow { width: 20px; height: 20px; margin-right: 5px; }
section.services-page .services .service-container .service .service-action { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 10px; margin-top: 20px; }

/*DETALLE SERVICIO*/
section.service-detail .service-image, section.service-detail .service-image img { height: 250px; object-fit: cover; }
section.service-detail .detalle-servicio .part-servicio { margin-bottom: 15px; }
section.service-detail .detalle-servicio .part-servicio .description-service {white-space: pre-wrap;}
section.service-detail .detalle-servicio .part-servicio .coins-service { display: flex; flex-direction: row; align-items: center; }
section.service-detail a.tyc { width: fit-content; }
section.service-detail a.tyc .terms-conditions { text-decoration: underline; color: var(--blue-color); }
section.service-detail .detalle-servicio .part-servicio .coins-service .ic-coin-yellow, 
.benficios-consulta .beneficio .ic-check-green { width: 20px; height: 20px; margin-right: 5px; background-size: contain; }
.benficios-consulta { margin-top: 20px; }
.benficios-consulta .beneficio { margin-bottom: 10px; }
.benficios-consulta .beneficio *  { display: inline-block; vertical-align: top; }
.benficios-consulta .beneficio label { width: calc(100% - 30px); }

/*CONSULTAS*/
section.query-page .queries-list .query { padding: 15px; border: 1px solid var(--blue-color); border-radius: 16px; margin-bottom: 15px; }
section.query-page .queries-list .query .number-message { position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; }
section.query-page .queries-list .query .query-info { display: flex; align-items: center; justify-content: space-between; flex-direction: row; }
section.query-page .queries-list .query .query-info .service-state { padding: 3px 10px; border-radius: 10.5px; }
section.query-page .queries-list .query .query-message { display: flex; align-items: center; justify-content: space-between; flex-direction: row; margin-top: 5px; }
section.query-page .queries-list .query .query-message div { display: flex; align-items: center; }
section.query-page .queries-list .query .query-message .state-message { width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
section.query-page .message-list { padding-bottom: 50px; display: flex; flex-direction: column; }
section.query-page .message-list .message { padding: 10px 15px 8px 15px; margin-bottom: 10px; max-width: 70%; }
section.query-page .message-list .message p{ white-space: pre-line;}
section.query-page .message-list .message.me { background-color: #E0F0F9; border-radius: 16px 0px 16px 16px; align-self: flex-end; }
section.query-page .message-list .message.they { background-color: #F9F9F9; border-radius: 0px 16px 16px 16px; }
section.query-page .message-list .message .hour-message { margin-top: 10px; }
section.query-page .message-list .message .message-file { display: flex; align-items: center; cursor: pointer; }
section.query-page .message-list .message.file .hour-message { margin-top: -10px; }
section.query-page .message-list .message .time-line-audio { height: 5px; background-color: var(--gray-color); border-radius: 8px; }
section.query-page .message-list .date-message { margin: 20px 0; }
section.query-page .conversation-actions { height: 45px; display: flex; flex-direction: row; align-items: center; position: fixed; bottom: 0px; left: 25px; width: calc(100% - 50px); padding: 10px 0 20px 0; justify-content: flex-end; }
section.query-page .conversation-actions textarea{ border-radius: 50px 0px 0 50px; height: 45px; width: calc(100% - 100px); border: none; background-color: #F9F9F9; font-size: 0.75rem; line-height: 18px; padding: 13px 20px; }
section.query-page .conversation-actions textarea.active{ border-radius: 50px; }
section.query-page .conversation-actions .files-conversation { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
section.query-page .conversation-actions .files-conversation .action-file { margin-right: 10px; height: 45px; width: 45px; border-radius: 0 50px 50px 0; display: block; background-color: #F9F9F9; }
section.query-page .conversation-actions .files-conversation .action-file.white { background-color: var(--white-color); }
section.query-page .type-file { height: 45px; width: 45px; border-radius: 50%; display: block; flex-shrink: 0;}
section.query-page .type-file div, section.query-page .action-file div { height: 25px; width: 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
section.query-page .chat-files { z-index: 1; position: fixed; bottom: 65px; left: 25px; width: calc(100% - 50px); padding: 10px 0; }
section.query-page .chat-files .chat-audio { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
section.query-page .chat-files .file-list .file { padding: 5px 18px; border: 1px solid var(--gray-color); border-radius: 8px; display: flex; align-items: center; flex-direction: row; justify-content: space-between; margin-bottom: 5px; }
section.query-page .chat-files .file-list .file .file-dates { display: flex; align-items: center; flex-direction: row; }
section.query-page .chat-files .file-list .file .file-dates .ic-file-black { width: 20px; height: 20px; margin-right: 10px; }
section.query-page .chat-files .file-list .file .ic-delete-red, section.query-page .chat-files .chat-audio .ic-delete-red { width: 20px; height: 20px; }

/*REALIZAR CONSULTA*/
section.realizar-consulta .content-up-file .up-file { padding: 10px; border: 1px dotted var(--gray-color); border-radius: 8px; margin-bottom: 15px; }
section.realizar-consulta .content-download-file .download-file { padding: 10px; border: 1px solid var(--gray-color); border-radius: 8px; margin-bottom: 15px; }
section.realizar-consulta .ic-file-black { width: 20px; height: 20px; margin-right: 10px; }
section.realizar-consulta .ic-download-black { width: 20px; height: 20px; margin-right: 10px; }
section.realizar-consulta .file .file-download { display: flex; justify-content: space-between;  }
section.realizar-consulta .file .file-download .informacion { display: inherit;}
section.realizar-consulta .file .file-download .informacion .archivo-datos { width: 100%;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  }
section.realizar-consulta .file-list .file { padding: 10px 18px; border: 1px solid var(--gray-color); border-radius: 8px; display: flex; align-items: center; flex-direction: row; justify-content: space-between; margin-bottom: 10px; }
section.realizar-consulta .file-list .file .file-dates { display: flex; align-items: center; flex-direction: row; }
section.realizar-consulta .file-list .file .file-dates .ic-file-black { width: 20px; height: 20px; margin-right: 10px; }
section.realizar-consulta .file-list .file .file-dates .archivo-datos { width: calc(100% - 40px);  }
section.realizar-consulta .file-list .file .file-dates .archivo-datos label{ word-break: break-all; width: 100%;  }
section.realizar-consulta .file-list .file .ic-delete-red { width: 20px; height: 20px; }

/*MIS SERVICIOS*/
section.my-services-page .my-services-list .my-service { margin-bottom: 15px; }
section.my-services-page .my-services-list .my-service .info-my-service { padding: 18px 15px 15px 15px; border: 1px solid var(--orange-color); border-radius: 16px 16px 0 0; }
section.my-services-page .my-services-list .my-service .info-my-service .service-section-info { display: flex; align-items: center; justify-content: space-between; flex-direction: row; }
section.my-services-page .my-services-list .my-service .info-my-service .service-section-info .service-state { padding: 3px 10px; border-radius: 10.5px; }
section.my-services-page .my-services-list .my-service .info-my-service .service-section-state { padding: 8px 15px 10px 15px; border: 1px solid var(--orange-color); border-radius: 16px; margin-top: 10px; }
section.my-services-page .my-services-list .my-service .my-service-action { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 0 0 16px 16px ; }
section.my-services-page .my-services-list .my-service .my-service-action .ic-arrow-right-white { width: 30px; height: 30px; }
section.my-services-page .activities-list .activity { padding: 15px; border: 1px solid var(--blue-color); border-radius: 16px; margin-bottom: 15px; margin-top: 15px; }
section.my-services-page .activities-list .activity.finalizando { border: 1px solid var(--green-color); }
section.my-services-page .activities-list .activity .activity-section,
section.my-services-page .activities-list .activity .activity-content .activity-file .files,
section.my-services-page .activities-list .activity .activity-content .activity-file .files .file-content{ display: flex; align-items: center; justify-content: space-between; flex-direction: row; }
section.my-services-page .activities-list .activity .activity-section .activity-tag { padding: 3px 10px; border-radius: 10.5px; }
section.my-services-page .activities-list .activity .activity-title { margin-top: 15px; margin-bottom: 3px; }
section.my-services-page .activities-list .activity .activity-title .ic-calendar-black { width: 10px; height: 10px; margin-right: 5px; }
section.my-services-page .activities-list .activity .activity-content .activity-file { margin-top: 20px; }
section.my-services-page .activities-list .activity .activity-content .activity-file .files { margin-bottom: 10px; }
section.my-services-page .activities-list .activity .activity-content .activity-file .files .ic-file-img-black,
section.my-services-page .activities-list .activity .activity-content .activity-file .files .ic-file-docs-black { width: 25px; height: 25px; margin-right: 10px; }

/*PAGOS*/
section.payments-page .plans .plans-container .plans-list { display: flex; flex-wrap:wrap ;align-items: stretch; flex-direction: row; gap: 20px; overflow-x: auto; }
section.payments-page .plans .plans-container .plans-list .plan { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; flex-basis: 180px; display: flex; flex-shrink: 0; flex-direction: column; }
section.payments-page .plans .plans-container .plans-list .plan .plan-info .plan-discount { font-size: 0.625rem; line-height: 15px; text-decoration: line-through; }
section.payments-page .plans .plans-container .plans-list .plan .components-plan { flex-grow: 1; }
section.payments-page .plans .plans-container .plans-list .plan .components-plan .component-plan { display: flex; align-items: center; flex-direction: row; }
section.payments-page .plans .plans-container .plans-list .plan .components-plan .component-plan div { width: 30px; height: 30px; margin-right: 5px; }
section.payments-page .plans .plans-container .plans-list .plan .plan-actions { margin: 10px -20px -20px -20px; }
section.payments-page .plans .plans-container .plans-list .plan .plan-actions a { padding: 12px 0; border-radius: 0 0 16px 16px; }

section.payments-page .payments .service-container .service { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; margin-bottom: 15px; }
section.payments-page .payments .service-container .service .service-info .service-date .plan-description { margin-bottom: 15px; }
section.payments-page .payments .service-container .service .service-info .service-date .plan-credits .service-credits {display:flex;}
section.payments-page .payments .service-container .service .service-info .service-date .service-credits * { display: inline-block; vertical-align: middle; }
section.payments-page .payments .service-container .service .service-info .service-date { width: 100%}
section.payments-page .payments .service-container .service .service-date .payment-type-container { width: 100%; height: 45px; border: 1px solid var(--blue-color); border-radius: 16px; align-items: center; justify-content: center; display: flex; margin-bottom: 15px;}
section.payments-page .payments .service-container .service .service-date .payment-type-container .payment-type { width: 45%;height: 35px;border-radius: 13px;}
section.payments-page .payments .service-container .service .service-date .payment-type-container .creditos label{ display: block; cursor: pointer; text-align: center;line-height: 35px;}
section.payments-page .payments .service-container .service .service-date .payment-type-container .tarjeta label{ display: block; cursor: pointer; text-align: center;line-height: 35px;}
section.payments-page .payments .service-container .service .service-date .credits-available{ height: 35px; background: #F9F9F9;border: 1px solid #D9D9D9; border-radius: 8px; align-items: center;display: flex;justify-content: center;padding: 10px;}
section.payments-page .payments .service-container .service .service-date .credits-available .credits-count {  display: flex;}
section.payments-page .payments .service-container .service .service-date .credits-available label {left: 60px;top: 549px;height: 24px;font-style: normal;font-weight: 500;font-size: 16px;line-height: 24px;color: #A2A2A2;}
section.payments-page .payments .service-container .service .service-date .credits-available .credits-count .ic-coin-yellow{  width: 20px;height: 20px;padding: 0 5px;}
section.payments-page .payments .service-container .service .service-info .service-date .plan-detail .plan-credits { width: 50%}
section.payments-page .payments .service-container .service .service-date .card-info { display: flex;margin-top: 13px;gap: 10px; }
section.payments-page .payments .service-container .service .service-date .card-info .wrapper {min-width: 80px;display: flex;align-items: center;justify-content: center;background: #FFF;border-radius: 8px }
section.payments-page .payments .service-container .service .service-date .card-info .wrapper span { width: 100%;text-align: center;font-weight: 600;cursor: pointer;user-select: none; }
section.payments-page .payments .service-container .service .service-date .card-info .wrapper input { width: 100%; }
section.payments-page .payments .service-container .service .service-date .card-info .wrapper span.num {  border-right: 2px solid rgba(0,0,0,0.2);border-left: 2px solid rgba(0,0,0,0.2);pointer-events: none; }
section.payments-page .payments .service-container .service .service-date .card-info .card-vencimiento{width: 100%}
section.payments-page .payments .service-container .service .service-date .card-info .card-cvv{width: 65%}
section.payments-page .payments .service-container .service .service-date .card-info .card-vencimiento .form-field input{width: 30%}
section.payments-page .payments .service-container .service .service-date .card-info .card-cvv .form-field input{width: 40%}
section.payments-page .payments .service-container .service .service-info .service-date .service-credits .ic-coin-yellow { width: 20px; height: 20px; padding:0 5px; }
section.payments-page .payments .service-container .service .service-info .service-date .service-credits .ic-circle-check { width: 20px; height: 20px; padding:0 5px; }
section.payments-page .payments .service-container .service .service-action { display: flex; align-items: center; justify-content:center ; flex-direction: column; gap: 10px; margin-top: 20px; }

/*PAGOS CONSULTA*/
section.realizar-consulta .plans .plans-container .plans-list { display: flex; flex-wrap:wrap ;align-items: stretch; flex-direction: row; gap: 20px; overflow-x: auto; }
section.realizar-consulta .plans .plans-container .plans-list .plan { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; flex-basis: 180px; display: flex; flex-shrink: 0; flex-direction: column; }
section.realizar-consulta .plans .plans-container .plans-list .plan .plan-info .plan-discount { font-size: 0.625rem; line-height: 15px; text-decoration: line-through; }
section.realizar-consulta .plans .plans-container .plans-list .plan .components-plan { flex-grow: 1; }
section.realizar-consulta .plans .plans-container .plans-list .plan .components-plan .component-plan { display: flex; align-items: center; flex-direction: row; }
section.realizar-consulta .plans .plans-container .plans-list .plan .components-plan .component-plan div { width: 30px; height: 30px; margin-right: 5px; }
section.realizar-consulta .plans .plans-container .plans-list .plan .plan-actions { margin: 10px -20px -20px -20px; }
section.realizar-consulta .plans .plans-container .plans-list .plan .plan-actions a { padding: 12px 0; border-radius: 0 0 16px 16px; }
section.realizar-consulta .payments .service-container .service { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; margin-bottom: 15px; }
section.realizar-consulta .payments .service-container .service .service-info .service-date .plan-description { margin-bottom: 15px; }
section.realizar-consulta .payments .service-container .service .service-info .service-date .plan-credits .service-credits {display:flex;}
section.realizar-consulta .payments .service-container .service .service-info .service-date .service-credits * { display: inline-block; vertical-align: middle; }
section.realizar-consulta .payments .service-container .service .service-info .service-date { width: 100%}
section.realizar-consulta .payments .service-container .service .service-date .payment-type-container {gap:10px; width: 100%;height: 45px;left: 45px;top: 476px;border: 1px solid #0583D2;border-radius: 16px;align-items: center;justify-content: center;display: flex;margin-bottom:20px;}
section.realizar-consulta .payments .service-container .service .service-date .payment-type-container .payment-type {width: 45%;height: 35px;border-radius: 13px;}
section.realizar-consulta .payments .service-container .service .service-date .payment-type-container .creditos label{ display: block; cursor: pointer; text-align: center;line-height: 35px;}
section.realizar-consulta .payments .service-container .service .service-date .payment-type-container .tarjeta label{ display: block; cursor:pointer; text-align: center;line-height: 35px;}
section.realizar-consulta .payments .service-container .service .service-date .credits-available{gap:20px ;height: 50px;left: 45px;top: 536px;background: #F9F9F9;border: 1px solid #D9D9D9;border-radius: 8px;margin-top: 15px;align-items: center;display: flex;justify-content: center;padding: 10px;}
section.realizar-consulta .payments .service-container .service .service-date .credits-available .credits-count {  display: flex;}
section.realizar-consulta .payments .service-container .service .service-date .credits-available label {left: 60px;top: 549px;height: 24px;font-style: normal;font-weight: 500;font-size: 16px;line-height: 24px;color: #A2A2A2;}
section.realizar-consulta .payments .service-container .service .service-date .credits-available .credits-count .ic-coin-yellow{  width: 20px;height: 20px;padding: 0 5px;}
section.realizar-consulta .payments .service-container .service .service-info .service-date .plan-detail .plan-credits { width: 50%}
section.realizar-consulta .payments .service-container .service .service-date .card-info { display: flex;margin-top: 13px;gap: 10px; }
section.realizar-consulta .payments .service-container .service .service-date .card-info .wrapper {min-width: 80px;display: flex;align-items: center;justify-content: center;background: #FFF;border-radius: 8px }
section.realizar-consulta .payments .service-container .service .service-date .card-info .wrapper span { width: 100%;text-align: center;font-weight: 600;cursor: pointer;user-select: none; }
section.realizar-consulta .payments .service-container .service .service-date .card-info .wrapper input { width: 100%; }
section.realizar-consulta .payments .service-container .service .service-date .card-info .wrapper span.num {  border-right: 2px solid rgba(0,0,0,0.2);border-left: 2px solid rgba(0,0,0,0.2);pointer-events: none; }
section.realizar-consulta .payments .service-container .service .service-date .card-info .card-vencimiento{width: 100%}
section.realizar-consulta .payments .service-container .service .service-date .card-info .card-cvv{width: 65%}
section.realizar-consulta .payments .service-container .service .service-date .card-info .card-vencimiento .form-field input{width: 30%}
section.realizar-consulta .payments .service-container .service .service-date .card-info .card-cvv .form-field input{width: 40%}
section.realizar-consulta .payments .service-container .service .service-info .service-date .service-credits .ic-coin-yellow { width: 20px; height: 20px; padding:0 5px; }
section.realizar-consulta .payments .service-container .service .service-info .service-date .service-credits .ic-circle-check { width: 20px; height: 20px; padding:0 5px; }
section.realizar-consulta .payments .service-container .service .service-action { display: flex; align-items: center; justify-content:center ; flex-direction: row; gap: 10px; margin-top: 20px; }

/*DETALLE SUSCRIPCION*/
section.suscriptions-page .plans .plans-container .plans-list { display: flex; align-items: stretch; flex-direction: row; gap: 20px; overflow-x: auto; }
section.suscriptions-page .plans .plans-container .plans-list .plan {border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; flex-basis: calc(100% - 42px); display: flex; flex-shrink: 0; flex-direction: column; }
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-info .plan-price span { font-size: 2.0rem; line-height: 36px;  }
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-info { margin:auto }
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-info label { margin-bottom: 15px;}
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-info label:first-child { text-align: center}
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-info label:last-child { text-align: center}
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-info .plan-discount { font-size: 0.625rem; line-height: 15px; text-decoration: line-through; }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan { flex-grow: 1; margin-top: 10px; }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .part-plan{ margin-bottom: 15px }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .part-plan p { word-break: break-word }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .number-coins, 
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .services-plan .service-credits{ display: flex; flex-direction: row; align-items: center; }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .number-coins .ic-coin-yellow,
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .services-plan .service-credits .ic-circle-check{ width: 20px; height: 20px; margin-right: 5px; }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .services-plan { margin-bottom: 20px }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .component-plan { display: flex; align-items: center; flex-direction: row; }
section.suscriptions-page .plans .plans-container .plans-list .plan .components-plan .component-plan div { width: 30px; height: 30px; margin-right: 5px; }
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-actions { margin: 10px -20px -20px -20px; }
section.suscriptions-page .plans .plans-container .plans-list .plan .plan-actions a { padding: 12px 0; border-radius: 0 0 16px 16px; }
section.suscriptions-page .services .service-container { margin: 25px 0 35px 0; }
section.suscriptions-page .services .service-container .service { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; margin-bottom: 15px; }
section.suscriptions-page .services .service-container .service .service-info { display: flex; flex-direction: row; justify-content:space-between; align-items: center; }
section.suscriptions-page .services .service-container .service .service-action { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 10px; margin-top: 20px; }

@media only screen and (min-width: 65em){
    section.suscriptions-page .plans .plans-container .plans-list .plan { flex-basis: 315px; }
}

/*CIRCLE BAR*/
section.my-suscription-page .plans-box {border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; flex-basis: 315px; display: flex; flex-shrink: 0; flex-direction: column; }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap { margin: 50px auto 40px auto; width: 200px; height: 200px; background: #D9D9D9; border-radius: 50%; border: 1px solid #D9D9D9;}
section.my-suscription-page .plans-box .plans-list .only-circle .circle-wrap { margin: 10px auto 40px auto; }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .circle .mask,.circle-wrap .circle .fill { width: 200px; height: 200px; position: absolute; border-radius: 50%;}
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .circle .mask { clip: rect(0px, 200px, 200px, 99px); }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .inside-circle { width: 163px; height: 163px; border-radius: 50%; position: absolute; z-index: 50; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .inside-circle .circle-info { width: 100%; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .inside-circle .circle-info .current-credits{ display: inline-block; margin-top: -10px; font-size: 3.0rem; }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .inside-circle .circle-info label:first-child{ margin-bottom: 5px; }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .inside-circle .circle-info label:last-child{ margin-top: -5px; }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .circle .mask .fill { clip: rect(0px, 103px, 200px, 0px); background: linear-gradient(90deg, #154C7F 0%, #0583D2 100%); }
section.my-suscription-page .plans-box .plans-list .circle-progress-bar .circle-wrap .circle .mask.full, .circle .fill { animation: fill ease-in-out 3s; }
section.my-suscription-page .plans-box .services-plan { margin: 15px 0 }
section.my-suscription-page .plans-box .service-info .plan-price span { font-size: 2.0rem; line-height: 36px;  }
section.my-suscription-page .plans-box .service-info label, section.my-suscription-page .plans-box .components-plan .margin-info { margin-bottom: 15px;}
section.my-suscription-page .plans-box .plans-list .services-plan .service-credits {  display:flex; align-items: center; flex-direction: row; }
section.my-suscription-page .plans-box .plans-list .services-plan .service-credits .ic-circle-check,
section.my-suscription-page .plans-box .plans-list .table-movements tbody tr td .ic-coin-yellow{ width: 20px; height: 20px; margin-right: 5px; }
section.my-suscription-page .plans-box .plans { border: 1px solid var(--blue-color); border-radius: 16px; padding: 10px 15px; margin-top: 20px; }
section.my-suscription-page .plans-box .plans .fechas{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
section.my-suscription-page .plans-box .plans-list .plan-actions { margin: 10px -20px -20px -20px; }
section.my-suscription-page .plans-box .plans-list .plan-actions a { padding: 12px 0; border-radius: 0 0 16px 16px; }
section.my-suscription-page .service-action { margin-top: 20px; }
section.my-suscription-page .plans-box .plans-list .table-movements tbody tr td label{ display:inline-block }
section.my-suscription-page .plans-box .plans-list .table-movements tbody tr td .creditos{display: flex;justify-content: center; }

/*MIS PAGOS*/
section.my-payments-page .payments-info .debt-box .plans-list .debt {display:flex; justify-content: space-between; margin: 15px 0; }
section.my-payments-page .recibos-pago .payments-search { display: flex; margin-bottom: 20px; align-items: center; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
section.my-payments-page .recibos-pago .payments-search .plan-name { margin-right: 10px; }
section.my-payments-page .recibos-pago .payments-search .filtros-pagos { display: flex; gap: 15px; }
section.my-payments-page .debt-box { box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); margin-bottom: 30px; border-radius: 16px;  padding: 20px; }
section.my-payments-page .plans-box { box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; flex-basis: 315px; display: flex; flex-shrink: 0; flex-direction: column; margin-bottom: 20px;}
section.my-payments-page .border-blue {border: 1px solid var(--blue-color);}
section.my-payments-page .border-orange {border: 1px solid var(--orange-color);}
section.my-payments-page .border-green {border: 1px solid var(--green-color);}
section.my-payments-page .plans-box .service-info .plan-price span { font-size: 2.0rem; line-height: 36px;  }
section.my-payments-page .plans-box .service-info { margin:auto }
section.my-payments-page .plans-box .service-info label { margin-bottom: 15px;}
section.my-payments-page .plans-box .service-info label:first-child { text-align: center}
section.my-payments-page .plans-box .service-info label:last-child { text-align: center}
section.my-payments-page .plans-box .service-info .plan-discount { font-size: 0.625rem; line-height: 15px; text-decoration: line-through; }
section.my-payments-page .plans-box .components-service { flex-grow: 1; }
section.my-payments-page .plans-box .service-price-credits { display:flex }
section.my-payments-page .plans-box .components-service .service-price label { display:block}
section.my-payments-page .plans-box .components-service p{ word-break: break-word; }
section.my-payments-page .plans-box .components-service .services-plan .service-credits * { display: inline-block; vertical-align: middle; }
section.my-payments-page .plans-box .service-price-credits .half-1 { width:40% }
section.my-payments-page .plans-box .service-price-credits .half-2{ width:60% }
section.my-payments-page .plans-box .components-plan .services-plan .service-price-credits .ic-coin-yellow { width: 20px; height: 20px; margin-right: 5px; }
section.my-payments-page .plans-box .components-plan .margin-subtitle{display: block;margin-bottom: 5px; }
section.my-payments-page .plans-box .components-plan .margin-info{ display: block;margin-bottom: 15px }
section.my-payments-page .plans-box .components-plan .margin-description{ display: block;margin-bottom: 20px }
section.my-payments-page .plans-box .components-plan .payment-field{ display: flex ;gap: 10px; margin: 5px 0; }
section.my-payments-page .plans-box .components-plan .payment-field-price{ display: flex; justify-content: space-between; }
section.my-payments-page .plans-box .components-plan .payment-field-price label:last-child{ margin-top: -5px; }
section.my-payments-page .plans-box .plans .fechas{ display: flex }
section.my-payments-page .plans-box .plans .fechas label:first-child { display: block; width:100% }
section.my-payments-page .plans-box .plan .fechas label:first-child { display: block }
section.my-payments-page .plans-box .plans-list .plan-actions { margin: -20px -20px 20px -20px; }
section.my-payments-page .plans-box .plans-list .plan-actions a { padding: 12px 0; border-radius:  16px 16px 0 0; }
section.my-payments-page .service-action { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 10px; margin-top: 20px; }
section.my-payments-page .payments .service-container .service { border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px;  padding: 20px; margin-bottom: 15px; }

/*DETALLE PAGOS*/
section.payments-page .box-info label{ margin-top: -10px; }
section.payments-page .detalle-pago { margin-top: 15px; }
section.payments-page .detalle-pago .part-payment { margin-bottom: 15px; }
section.payments-page .detalle-pago .part-payment .box-info label{ margin-bottom: 5px; }
section.payments-page .detalle-pago .part-payment .list-options{ display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; }
section.payments-page .detalle-pago .part-payment .list-options .option { display: flex; align-items: center; flex-direction: row; }
section.payments-page .detalle-pago .part-payment .list-options .option .ic-check-green { width: 20px; height: 20px; margin-right: 5px; }
section.payments-page .abstract-payment { margin-top: 30px; margin-bottom: 30px; }
section.payments-page .abstract-payment .content-abstract .abstract { margin-bottom: 10px; display: flex; align-items: center; flex-direction: row; justify-content: space-between; }
section.payments-page .abstract-payment .content-abstract .abstract:last-child { margin-top: 20px; }
section.payments-page .payment-form .form .payment-form-section { display: flex; align-items: center; flex-direction: row;}
section.payments-page .payment-form .form .payment-form-section .ic-coin-yellow { width: 20px; height: 20px; margin-right: 10px; }
section.payments-page .payment-form .form .payment-form-section .ic-visa { width: 20px; height: 20px; margin-right: 10px; }

/*RING-CHART*/
.ring-chart {width: 95px; position: relative;}
.ring-chart:hover {transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); }
.ring-chart svg path:first-child {stroke: var(--blue-color);}
.ring-chart svg path:last-child {stroke-dasharray: 0 100px;}
.ring-chart.color01 svg path:last-child { stroke: #D9D9D9; }
.ring-chart label { font-size: 1.3em; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);}
.ring-chart.big {width: 155px;}
.ring-chart.big label {font-size: 2.1em;}

/*METODOS DE PAGO*/
.pay-methods { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.pay-methods .pay-methods-container { flex-basis: calc(100% - 100px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.pay-methods .pay-methods-container .method-list { display: flex; align-items: center; gap: 10px;}
.pay-methods .pay-methods-container .method-list .method { width: 100%; max-width: 60px; height: auto; margin: 5px; filter: grayscale(90%); opacity: 0.5; display: flex; align-items: center;}
.pay-methods .pasarela { width: 100%; max-width: 80px; height: auto; margin: 5px; filter: grayscale(90%); opacity: 0.5; display: flex; align-items: center;}

/*FORMULARIOS*/
section.formularios .box-part { margin-bottom: 0; }
section.formularios .box-part .box-info .requisitos { color: var(--white-color); border: 1px solid var(--blue-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 16px; padding: 15px 30px; margin: 0 auto 20px; background-color: var(--blue-color); }
section.formularios .box-part .box-info .requisitos label { color: var(--white-color); }
section.formularios .box-part .box-info .requisitos ul li { list-style: initial; }
section.formularios .box-part .box-info .info { margin-top: 10px; }
section.formularios .box-part .box-section select { padding-right: 30px; height: 40px; } 
section.formularios .box-part .box-section .combo-container { margin-bottom: 10px; } 
section.formularios .box-part .box-section .container-checks { display: flex; gap: 20px; } 
section.formularios .box-part .box-section .container-checks.tipo { display: flex; flex-direction: column; gap: 5px; margin: 10px auto 20px; } 
section.formularios .box-part .box-section .container-checks.tipo .option input[type="radio"] { margin: 0; } 
section.formularios .box-part .box-section .container-checks .option input[type="radio"] { margin: 18px auto; } 
section.formularios .box-part .box-section .radio-container { margin-top: 25px; } 
section.formularios .box-part .subtitle { margin: 30px auto 10px; }
section.formularios .box-part .form-field input + label, section.formularios .box-part .form-field textarea + label{ position: unset; color: unset; font-size: unset; }
section.formularios .box-part .form-field.new { flex-direction: column-reverse; margin-bottom: 15px; gap: 5px; }
section.formularios .box-part .element-list + .form-field.new { margin-top: 15px; }
section.formularios .box-part .form-field.new textarea { padding-top: 5px; }
section.formularios .box-part .form-field.new input { height: 35px; padding: 0 15px; }
section.formularios .box-part .motivos { width: max-content; display: flex; margin: 10px auto 25px; gap: 20px; }
section.formularios .box-part .motivos .option { display: flex; gap: 10px; }

@media only screen and (max-width: 480px){
    .element-list > header, .element-list .body .element { width: fit-content; }
    section.formularios .box-part .motivos { width: auto; display: block; }
}