/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap); /*!*****************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/flatpickr/dist/flatpickr.min.css?ngGlobalStyle ***! \*****************************************************************************************************************************************************************************************************************************************************/ .flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;box-sizing:border-box;touch-action:manipulation;background:#fff;box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/* /*rtl:begin:ignore*/left:0/* /*rtl:end:ignore*/}/* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/* /*rtl:begin:ignore*/right:0/* /*rtl:end:ignore*/}/* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;box-sizing:border-box;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}} /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle (1) ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** Función para convertir un valor de px a rem **/ /** Asignar color al svg */ /** Asignar propiedades */ .row { display: flex; flex-wrap: wrap; gap: 0.75rem; } .col { padding-right: 0.75rem; padding-left: 0.75rem; } @media (width >= 0) { .col-xs-1 { flex: 0 0 calc(100% / 12 * 1 - 0.75rem); max-width: calc(100% / 12 * 1 - 0.75rem); min-width: calc(100% / 12 * 1 - 0.75rem); } } @media (width >= 0) { .col-xs-2 { flex: 0 0 calc(100% / 12 * 2 - 0.75rem); max-width: calc(100% / 12 * 2 - 0.75rem); min-width: calc(100% / 12 * 2 - 0.75rem); } } @media (width >= 0) { .col-xs-3 { flex: 0 0 calc(100% / 12 * 3 - 0.75rem); max-width: calc(100% / 12 * 3 - 0.75rem); min-width: calc(100% / 12 * 3 - 0.75rem); } } @media (width >= 0) { .col-xs-4 { flex: 0 0 calc(100% / 12 * 4 - 0.75rem); max-width: calc(100% / 12 * 4 - 0.75rem); min-width: calc(100% / 12 * 4 - 0.75rem); } } @media (width >= 0) { .col-xs-5 { flex: 0 0 calc(100% / 12 * 5 - 0.75rem); max-width: calc(100% / 12 * 5 - 0.75rem); min-width: calc(100% / 12 * 5 - 0.75rem); } } @media (width >= 0) { .col-xs-6 { flex: 0 0 calc(100% / 12 * 6 - 0.75rem); max-width: calc(100% / 12 * 6 - 0.75rem); min-width: calc(100% / 12 * 6 - 0.75rem); } } @media (width >= 0) { .col-xs-7 { flex: 0 0 calc(100% / 12 * 7 - 0.75rem); max-width: calc(100% / 12 * 7 - 0.75rem); min-width: calc(100% / 12 * 7 - 0.75rem); } } @media (width >= 0) { .col-xs-8 { flex: 0 0 calc(100% / 12 * 8 - 0.75rem); max-width: calc(100% / 12 * 8 - 0.75rem); min-width: calc(100% / 12 * 8 - 0.75rem); } } @media (width >= 0) { .col-xs-9 { flex: 0 0 calc(100% / 12 * 9 - 0.75rem); max-width: calc(100% / 12 * 9 - 0.75rem); min-width: calc(100% / 12 * 9 - 0.75rem); } } @media (width >= 0) { .col-xs-10 { flex: 0 0 calc(100% / 12 * 10 - 0.75rem); max-width: calc(100% / 12 * 10 - 0.75rem); min-width: calc(100% / 12 * 10 - 0.75rem); } } @media (width >= 0) { .col-xs-11 { flex: 0 0 calc(100% / 12 * 11 - 0.75rem); max-width: calc(100% / 12 * 11 - 0.75rem); min-width: calc(100% / 12 * 11 - 0.75rem); } } @media (width >= 0) { .col-xs-12 { flex: 0 0 calc(100% / 12 * 12 - 0.75rem); max-width: calc(100% / 12 * 12 - 0.75rem); min-width: calc(100% / 12 * 12 - 0.75rem); } } @media (width >= 576px) { .col-sm-1 { flex: 0 0 calc(100% / 12 * 1 - 0.75rem); max-width: calc(100% / 12 * 1 - 0.75rem); min-width: calc(100% / 12 * 1 - 0.75rem); } } @media (width >= 576px) { .col-sm-2 { flex: 0 0 calc(100% / 12 * 2 - 0.75rem); max-width: calc(100% / 12 * 2 - 0.75rem); min-width: calc(100% / 12 * 2 - 0.75rem); } } @media (width >= 576px) { .col-sm-3 { flex: 0 0 calc(100% / 12 * 3 - 0.75rem); max-width: calc(100% / 12 * 3 - 0.75rem); min-width: calc(100% / 12 * 3 - 0.75rem); } } @media (width >= 576px) { .col-sm-4 { flex: 0 0 calc(100% / 12 * 4 - 0.75rem); max-width: calc(100% / 12 * 4 - 0.75rem); min-width: calc(100% / 12 * 4 - 0.75rem); } } @media (width >= 576px) { .col-sm-5 { flex: 0 0 calc(100% / 12 * 5 - 0.75rem); max-width: calc(100% / 12 * 5 - 0.75rem); min-width: calc(100% / 12 * 5 - 0.75rem); } } @media (width >= 576px) { .col-sm-6 { flex: 0 0 calc(100% / 12 * 6 - 0.75rem); max-width: calc(100% / 12 * 6 - 0.75rem); min-width: calc(100% / 12 * 6 - 0.75rem); } } @media (width >= 576px) { .col-sm-7 { flex: 0 0 calc(100% / 12 * 7 - 0.75rem); max-width: calc(100% / 12 * 7 - 0.75rem); min-width: calc(100% / 12 * 7 - 0.75rem); } } @media (width >= 576px) { .col-sm-8 { flex: 0 0 calc(100% / 12 * 8 - 0.75rem); max-width: calc(100% / 12 * 8 - 0.75rem); min-width: calc(100% / 12 * 8 - 0.75rem); } } @media (width >= 576px) { .col-sm-9 { flex: 0 0 calc(100% / 12 * 9 - 0.75rem); max-width: calc(100% / 12 * 9 - 0.75rem); min-width: calc(100% / 12 * 9 - 0.75rem); } } @media (width >= 576px) { .col-sm-10 { flex: 0 0 calc(100% / 12 * 10 - 0.75rem); max-width: calc(100% / 12 * 10 - 0.75rem); min-width: calc(100% / 12 * 10 - 0.75rem); } } @media (width >= 576px) { .col-sm-11 { flex: 0 0 calc(100% / 12 * 11 - 0.75rem); max-width: calc(100% / 12 * 11 - 0.75rem); min-width: calc(100% / 12 * 11 - 0.75rem); } } @media (width >= 576px) { .col-sm-12 { flex: 0 0 calc(100% / 12 * 12 - 0.75rem); max-width: calc(100% / 12 * 12 - 0.75rem); min-width: calc(100% / 12 * 12 - 0.75rem); } } @media (width >= 768px) { .col-md-1 { flex: 0 0 calc(100% / 12 * 1 - 0.75rem); max-width: calc(100% / 12 * 1 - 0.75rem); min-width: calc(100% / 12 * 1 - 0.75rem); } } @media (width >= 768px) { .col-md-2 { flex: 0 0 calc(100% / 12 * 2 - 0.75rem); max-width: calc(100% / 12 * 2 - 0.75rem); min-width: calc(100% / 12 * 2 - 0.75rem); } } @media (width >= 768px) { .col-md-3 { flex: 0 0 calc(100% / 12 * 3 - 0.75rem); max-width: calc(100% / 12 * 3 - 0.75rem); min-width: calc(100% / 12 * 3 - 0.75rem); } } @media (width >= 768px) { .col-md-4 { flex: 0 0 calc(100% / 12 * 4 - 0.75rem); max-width: calc(100% / 12 * 4 - 0.75rem); min-width: calc(100% / 12 * 4 - 0.75rem); } } @media (width >= 768px) { .col-md-5 { flex: 0 0 calc(100% / 12 * 5 - 0.75rem); max-width: calc(100% / 12 * 5 - 0.75rem); min-width: calc(100% / 12 * 5 - 0.75rem); } } @media (width >= 768px) { .col-md-6 { flex: 0 0 calc(100% / 12 * 6 - 0.75rem); max-width: calc(100% / 12 * 6 - 0.75rem); min-width: calc(100% / 12 * 6 - 0.75rem); } } @media (width >= 768px) { .col-md-7 { flex: 0 0 calc(100% / 12 * 7 - 0.75rem); max-width: calc(100% / 12 * 7 - 0.75rem); min-width: calc(100% / 12 * 7 - 0.75rem); } } @media (width >= 768px) { .col-md-8 { flex: 0 0 calc(100% / 12 * 8 - 0.75rem); max-width: calc(100% / 12 * 8 - 0.75rem); min-width: calc(100% / 12 * 8 - 0.75rem); } } @media (width >= 768px) { .col-md-9 { flex: 0 0 calc(100% / 12 * 9 - 0.75rem); max-width: calc(100% / 12 * 9 - 0.75rem); min-width: calc(100% / 12 * 9 - 0.75rem); } } @media (width >= 768px) { .col-md-10 { flex: 0 0 calc(100% / 12 * 10 - 0.75rem); max-width: calc(100% / 12 * 10 - 0.75rem); min-width: calc(100% / 12 * 10 - 0.75rem); } } @media (width >= 768px) { .col-md-11 { flex: 0 0 calc(100% / 12 * 11 - 0.75rem); max-width: calc(100% / 12 * 11 - 0.75rem); min-width: calc(100% / 12 * 11 - 0.75rem); } } @media (width >= 768px) { .col-md-12 { flex: 0 0 calc(100% / 12 * 12 - 0.75rem); max-width: calc(100% / 12 * 12 - 0.75rem); min-width: calc(100% / 12 * 12 - 0.75rem); } } @media (width >= 992px) { .col-lg-1 { flex: 0 0 calc(100% / 12 * 1 - 0.75rem); max-width: calc(100% / 12 * 1 - 0.75rem); min-width: calc(100% / 12 * 1 - 0.75rem); } } @media (width >= 992px) { .col-lg-2 { flex: 0 0 calc(100% / 12 * 2 - 0.75rem); max-width: calc(100% / 12 * 2 - 0.75rem); min-width: calc(100% / 12 * 2 - 0.75rem); } } @media (width >= 992px) { .col-lg-3 { flex: 0 0 calc(100% / 12 * 3 - 0.75rem); max-width: calc(100% / 12 * 3 - 0.75rem); min-width: calc(100% / 12 * 3 - 0.75rem); } } @media (width >= 992px) { .col-lg-4 { flex: 0 0 calc(100% / 12 * 4 - 0.75rem); max-width: calc(100% / 12 * 4 - 0.75rem); min-width: calc(100% / 12 * 4 - 0.75rem); } } @media (width >= 992px) { .col-lg-5 { flex: 0 0 calc(100% / 12 * 5 - 0.75rem); max-width: calc(100% / 12 * 5 - 0.75rem); min-width: calc(100% / 12 * 5 - 0.75rem); } } @media (width >= 992px) { .col-lg-6 { flex: 0 0 calc(100% / 12 * 6 - 0.75rem); max-width: calc(100% / 12 * 6 - 0.75rem); min-width: calc(100% / 12 * 6 - 0.75rem); } } @media (width >= 992px) { .col-lg-7 { flex: 0 0 calc(100% / 12 * 7 - 0.75rem); max-width: calc(100% / 12 * 7 - 0.75rem); min-width: calc(100% / 12 * 7 - 0.75rem); } } @media (width >= 992px) { .col-lg-8 { flex: 0 0 calc(100% / 12 * 8 - 0.75rem); max-width: calc(100% / 12 * 8 - 0.75rem); min-width: calc(100% / 12 * 8 - 0.75rem); } } @media (width >= 992px) { .col-lg-9 { flex: 0 0 calc(100% / 12 * 9 - 0.75rem); max-width: calc(100% / 12 * 9 - 0.75rem); min-width: calc(100% / 12 * 9 - 0.75rem); } } @media (width >= 992px) { .col-lg-10 { flex: 0 0 calc(100% / 12 * 10 - 0.75rem); max-width: calc(100% / 12 * 10 - 0.75rem); min-width: calc(100% / 12 * 10 - 0.75rem); } } @media (width >= 992px) { .col-lg-11 { flex: 0 0 calc(100% / 12 * 11 - 0.75rem); max-width: calc(100% / 12 * 11 - 0.75rem); min-width: calc(100% / 12 * 11 - 0.75rem); } } @media (width >= 992px) { .col-lg-12 { flex: 0 0 calc(100% / 12 * 12 - 0.75rem); max-width: calc(100% / 12 * 12 - 0.75rem); min-width: calc(100% / 12 * 12 - 0.75rem); } } @media (width >= 1200px) { .col-xl-1 { flex: 0 0 calc(100% / 12 * 1 - 0.75rem); max-width: calc(100% / 12 * 1 - 0.75rem); min-width: calc(100% / 12 * 1 - 0.75rem); } } @media (width >= 1200px) { .col-xl-2 { flex: 0 0 calc(100% / 12 * 2 - 0.75rem); max-width: calc(100% / 12 * 2 - 0.75rem); min-width: calc(100% / 12 * 2 - 0.75rem); } } @media (width >= 1200px) { .col-xl-3 { flex: 0 0 calc(100% / 12 * 3 - 0.75rem); max-width: calc(100% / 12 * 3 - 0.75rem); min-width: calc(100% / 12 * 3 - 0.75rem); } } @media (width >= 1200px) { .col-xl-4 { flex: 0 0 calc(100% / 12 * 4 - 0.75rem); max-width: calc(100% / 12 * 4 - 0.75rem); min-width: calc(100% / 12 * 4 - 0.75rem); } } @media (width >= 1200px) { .col-xl-5 { flex: 0 0 calc(100% / 12 * 5 - 0.75rem); max-width: calc(100% / 12 * 5 - 0.75rem); min-width: calc(100% / 12 * 5 - 0.75rem); } } @media (width >= 1200px) { .col-xl-6 { flex: 0 0 calc(100% / 12 * 6 - 0.75rem); max-width: calc(100% / 12 * 6 - 0.75rem); min-width: calc(100% / 12 * 6 - 0.75rem); } } @media (width >= 1200px) { .col-xl-7 { flex: 0 0 calc(100% / 12 * 7 - 0.75rem); max-width: calc(100% / 12 * 7 - 0.75rem); min-width: calc(100% / 12 * 7 - 0.75rem); } } @media (width >= 1200px) { .col-xl-8 { flex: 0 0 calc(100% / 12 * 8 - 0.75rem); max-width: calc(100% / 12 * 8 - 0.75rem); min-width: calc(100% / 12 * 8 - 0.75rem); } } @media (width >= 1200px) { .col-xl-9 { flex: 0 0 calc(100% / 12 * 9 - 0.75rem); max-width: calc(100% / 12 * 9 - 0.75rem); min-width: calc(100% / 12 * 9 - 0.75rem); } } @media (width >= 1200px) { .col-xl-10 { flex: 0 0 calc(100% / 12 * 10 - 0.75rem); max-width: calc(100% / 12 * 10 - 0.75rem); min-width: calc(100% / 12 * 10 - 0.75rem); } } @media (width >= 1200px) { .col-xl-11 { flex: 0 0 calc(100% / 12 * 11 - 0.75rem); max-width: calc(100% / 12 * 11 - 0.75rem); min-width: calc(100% / 12 * 11 - 0.75rem); } } @media (width >= 1200px) { .col-xl-12 { flex: 0 0 calc(100% / 12 * 12 - 0.75rem); max-width: calc(100% / 12 * 12 - 0.75rem); min-width: calc(100% / 12 * 12 - 0.75rem); } } .col-auto { flex: 1; padding-right: 0.75rem; padding-left: 0.75rem; } .navigation-card { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; border-radius: 1rem; border-width: 0.0625rem; column-gap: 0.5rem; border-style: solid; align-items: center; display: flex; width: 100%; box-shadow: 0px 0px 4px 0px rgba(27, 55, 72, 0.08), 0px 4px 8px 0px rgba(27, 55, 72, 0.1); /** Orientacion */ /** Tamaños */ } .navigation-card:active { border-width: 0.125rem; } .navigation-card-vertical { flex-direction: column; } .navigation-card-horizontal { justify-content: space-between; align-items: center; } .navigation-card-l { padding: 1rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0rem; font-weight: 600; } .navigation-card-m { padding: 1rem; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0rem; font-weight: 600; } .navigation-card-s { padding: 1rem; font-size: 0.625rem; line-height: 0.875rem; letter-spacing: 0rem; font-weight: 600; } .navigation-card-xs { padding: 0.5rem; font-size: 0.625rem; line-height: 0.875rem; letter-spacing: 0rem; font-weight: 400; } .navigation-card-main { background-color: var(--color-background-secondary); border-color: var(--color-background-secondary); color: var(--color-content-accent); } .navigation-card-main svg, .navigation-card-main svg path { color: currentColor; fill: currentColor; } .navigation-card-main:hover, .navigation-card-main:focus { background-color: var(--color-content-secondary-high); border-color: var(--color-content-secondary-high); } .navigation-card-main:hover svg, .navigation-card-main:hover svg path, .navigation-card-main:focus svg, .navigation-card-main:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-main:active { background-color: var(--color-content-secondary-high); border-color: var(--color-border-secondary); } .navigation-card-main:active svg, .navigation-card-main:active svg path { color: currentColor; fill: currentColor; } .navigation-card-main-outline { background-color: transparent; border-color: var(--color-border-secondary); color: var(--color-content-secondary); } .navigation-card-main-outline svg, .navigation-card-main-outline svg path { color: currentColor; fill: currentColor; } .navigation-card-main-outline:hover, .navigation-card-main-outline:focus { border-color: var(--color-content-secondary-high); } .navigation-card-main-outline:hover svg, .navigation-card-main-outline:hover svg path, .navigation-card-main-outline:focus svg, .navigation-card-main-outline:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-main-outline:active { border-color: var(--color-border-secondary-high); } .navigation-card-main-outline:active svg, .navigation-card-main-outline:active svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary { background-color: var(--color-background-secondary); border-color: var(--color-background-secondary); color: var(--color-content-secondary-inverse); } .navigation-card-secondary svg, .navigation-card-secondary svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary:hover, .navigation-card-secondary:focus { background-color: var(--color-content-secondary-high); border-color: var(--color-content-secondary-high); } .navigation-card-secondary:hover svg, .navigation-card-secondary:hover svg path, .navigation-card-secondary:focus svg, .navigation-card-secondary:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary:active { background-color: var(--color-content-secondary-high); border-color: var(--color-border-secondary); } .navigation-card-secondary:active svg, .navigation-card-secondary:active svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-high { background-color: var(--color-background-secondary-high); border-color: var(--color-background-secondary-high); color: var(--color-content-secondary); } .navigation-card-secondary-high svg, .navigation-card-secondary-high svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-high:hover, .navigation-card-secondary-high:focus { background-color: var(--color-background-secondary-mid); border-color: var(--color-background-secondary-mid); } .navigation-card-secondary-high:hover svg, .navigation-card-secondary-high:hover svg path, .navigation-card-secondary-high:focus svg, .navigation-card-secondary-high:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-high:active { background-color: var(--color-background-secondary-mid); border-color: var(--color-border-secondary); } .navigation-card-secondary-high:active svg, .navigation-card-secondary-high:active svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-low { background-color: var(--color-background-secondary-low); border-color: var(--color-background-secondary-low); color: var(--color-content-secondary); } .navigation-card-secondary-low svg, .navigation-card-secondary-low svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-low:hover, .navigation-card-secondary-low:focus { background-color: var(--color-background-secondary-mid); border-color: var(--color-background-secondary-mid); } .navigation-card-secondary-low:hover svg, .navigation-card-secondary-low:hover svg path, .navigation-card-secondary-low:focus svg, .navigation-card-secondary-low:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-low:active { background-color: var(--color-background-secondary-high); border-color: var(--color-border-secondary); } .navigation-card-secondary-low:active svg, .navigation-card-secondary-low:active svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-outline { background-color: transparent; border-color: var(--color-border-secondary-low); color: var(--color-content-secondary-low); } .navigation-card-secondary-outline svg, .navigation-card-secondary-outline svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-outline:hover, .navigation-card-secondary-outline:focus { color: var(--color-content-secondary-mid); } .navigation-card-secondary-outline:hover svg, .navigation-card-secondary-outline:hover svg path, .navigation-card-secondary-outline:focus svg, .navigation-card-secondary-outline:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-secondary-outline:active { color: var(--color-content-secondary-mid); } .navigation-card-secondary-outline:active svg, .navigation-card-secondary-outline:active svg path { color: currentColor; fill: currentColor; } .navigation-card-add { background-color: var(--color-background-primary); border-color: var(--color-background-primary); color: var(--color-content-secondary); } .navigation-card-add svg, .navigation-card-add svg path { color: currentColor; fill: currentColor; } .navigation-card-add:hover, .navigation-card-add:focus { background-color: var(--color-background-hover); border-color: var(--color-background-hover); } .navigation-card-add:hover svg, .navigation-card-add:hover svg path, .navigation-card-add:focus svg, .navigation-card-add:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-add:active { background-color: var(--color-background-hover); border-color: var(--color-border-tertiary); } .navigation-card-add:active svg, .navigation-card-add:active svg path { color: currentColor; fill: currentColor; } .navigation-card-add-outline { background-color: transparent; border-color: var(--color-background-primary); color: var(--color-content-secondary-inverse); } .navigation-card-add-outline svg, .navigation-card-add-outline svg path { color: currentColor; fill: currentColor; } .navigation-card-add-outline:hover, .navigation-card-add-outline:focus { border-color: var(--color-background-hover); color: var(--color-content-secondary-low-inverse); } .navigation-card-add-outline:hover svg, .navigation-card-add-outline:hover svg path, .navigation-card-add-outline:focus svg, .navigation-card-add-outline:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-add-outline:active { border-color: var(--color-border-tertiary); color: var(--color-content-secondary-low-inverse); } .navigation-card-add-outline:active svg, .navigation-card-add-outline:active svg path { color: currentColor; fill: currentColor; } .navigation-card-error { background-color: var(--color-background-error); border-color: var(--color-background-error); color: var(--color-content-error); } .navigation-card-error svg, .navigation-card-error svg path { color: currentColor; fill: currentColor; } .navigation-card-error:hover, .navigation-card-error:focus { background-color: var(--color-background-error-subtle); border-color: var(--color-background-error-subtle); color: var(--color-content-error-bold); } .navigation-card-error:hover svg, .navigation-card-error:hover svg path, .navigation-card-error:focus svg, .navigation-card-error:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-error:active { background-color: var(--color-background-error-subtle); border-color: var(--color-border-error); color: var(--color-content-error-bold); } .navigation-card-error:active svg, .navigation-card-error:active svg path { color: currentColor; fill: currentColor; } .navigation-card-error-outline { background-color: transparent; border-color: var(--color-content-error); color: var(--color-content-error); } .navigation-card-error-outline svg, .navigation-card-error-outline svg path { color: currentColor; fill: currentColor; } .navigation-card-error-outline:hover, .navigation-card-error-outline:focus { border-color: var(--color-content-error-bold); color: var(--color-content-error-bold); } .navigation-card-error-outline:hover svg, .navigation-card-error-outline:hover svg path, .navigation-card-error-outline:focus svg, .navigation-card-error-outline:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-error-outline:active { border-color: var(--color-content-error); color: var(--color-content-error-bold); } .navigation-card-error-outline:active svg, .navigation-card-error-outline:active svg path { color: currentColor; fill: currentColor; } .navigation-card-warning { background-color: var(--color-background-warning); border-color: var(--color-background-warning); color: var(--color-content-warning); } .navigation-card-warning svg, .navigation-card-warning svg path { color: currentColor; fill: currentColor; } .navigation-card-warning:hover, .navigation-card-warning:focus { background-color: var(--color-background-warning-subtle); border-color: var(--color-background-warning-subtle); color: var(--color-content-warning-bold); } .navigation-card-warning:hover svg, .navigation-card-warning:hover svg path, .navigation-card-warning:focus svg, .navigation-card-warning:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-warning:active { background-color: var(--color-background-warning-subtle); border-color: var(--color-border-warning); color: var(--color-content-warning-bold); } .navigation-card-warning:active svg, .navigation-card-warning:active svg path { color: currentColor; fill: currentColor; } .navigation-card-warning-outline { background-color: transparent; border-color: var(--color-content-warning); color: var(--color-content-warning); } .navigation-card-warning-outline svg, .navigation-card-warning-outline svg path { color: currentColor; fill: currentColor; } .navigation-card-warning-outline:hover, .navigation-card-warning-outline:focus { border-color: var(--color-content-warning-bold); color: var(--color-content-warning-bold); } .navigation-card-warning-outline:hover svg, .navigation-card-warning-outline:hover svg path, .navigation-card-warning-outline:focus svg, .navigation-card-warning-outline:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-warning-outline:active { border-color: var(--color-content-warning); color: var(--color-content-warning-bold); } .navigation-card-warning-outline:active svg, .navigation-card-warning-outline:active svg path { color: currentColor; fill: currentColor; } .navigation-card-info { background-color: var(--color-background-info); border-color: var(--color-background-info); color: var(--color-content-info); } .navigation-card-info svg, .navigation-card-info svg path { color: currentColor; fill: currentColor; } .navigation-card-info:hover, .navigation-card-info:focus { background-color: var(--color-background-info-subtle); border-color: var(--color-background-info-subtle); color: var(--color-content-info-bold); } .navigation-card-info:hover svg, .navigation-card-info:hover svg path, .navigation-card-info:focus svg, .navigation-card-info:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-info:active { background-color: var(--color-background-info-subtle); border-color: var(--color-border-info); color: var(--color-content-info-bold); } .navigation-card-info:active svg, .navigation-card-info:active svg path { color: currentColor; fill: currentColor; } .navigation-card-info-outline { background-color: transparent; border-color: var(--color-content-info); color: var(--color-content-info); } .navigation-card-info-outline svg, .navigation-card-info-outline svg path { color: currentColor; fill: currentColor; } .navigation-card-info-outline:hover, .navigation-card-info-outline:focus { border-color: var(--color-content-info-bold); color: var(--color-content-info-bold); } .navigation-card-info-outline:hover svg, .navigation-card-info-outline:hover svg path, .navigation-card-info-outline:focus svg, .navigation-card-info-outline:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-info-outline:active { border-color: var(--color-content-info); color: var(--color-content-info-bold); } .navigation-card-info-outline:active svg, .navigation-card-info-outline:active svg path { color: currentColor; fill: currentColor; } .navigation-card-success { background-color: var(--color-background-success); border-color: var(--color-background-success); color: var(--color-content-success); } .navigation-card-success svg, .navigation-card-success svg path { color: currentColor; fill: currentColor; } .navigation-card-success:hover, .navigation-card-success:focus { background-color: var(--color-background-success-subtle); border-color: var(--color-background-success-subtle); color: var(--color-content-success-bold); } .navigation-card-success:hover svg, .navigation-card-success:hover svg path, .navigation-card-success:focus svg, .navigation-card-success:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-success:active { background-color: var(--color-background-success-subtle); border-color: var(--color-border-success); color: var(--color-content-success-bold); } .navigation-card-success:active svg, .navigation-card-success:active svg path { color: currentColor; fill: currentColor; } .navigation-card-success-outline { background-color: transparent; border-color: var(--color-content-success); color: var(--color-content-success); } .navigation-card-success-outline svg, .navigation-card-success-outline svg path { color: currentColor; fill: currentColor; } .navigation-card-success-outline:hover, .navigation-card-success-outline:focus { border-color: var(--color-content-success-bold); color: var(--color-content-success-bold); } .navigation-card-success-outline:hover svg, .navigation-card-success-outline:hover svg path, .navigation-card-success-outline:focus svg, .navigation-card-success-outline:focus svg path { color: currentColor; fill: currentColor; } .navigation-card-success-outline:active { border-color: var(--color-content-success); color: var(--color-content-success-bold); } .navigation-card-success-outline:active svg, .navigation-card-success-outline:active svg path { color: currentColor; fill: currentColor; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .radio-button { column-gap: 0.5rem; align-items: center; display: flex; } .radio-button label { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 400; color: var(--color-content-secondary); } .radio-button .content-radio-button { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border-radius: 62.4375rem; border-width: 0.0625rem; height: 1rem; width: 1rem; border-style: solid; position: relative; } .radio-button .content-radio-button::before { border-radius: 62.4375rem; transform: translate(-50%, -50%); position: absolute; height: 0.5rem; width: 0.5rem; display: none; content: ""; left: 50%; top: 50%; animation-name: fadeIn; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-fill-mode: both; } .radio-button .content-radio-button[checked=true]::before { display: block; } .radio-button[disabled=true] .content-radio-button { background-color: var(--color-neutral-100); border-color: var(--color-neutral-200); } .radio-button[disabled=true] .content-radio-button::before { background-color: var(--color-neutral-300); } .radio-button[disabled=true] label { color: var(--color-neutral-200); } .radio-button:not([disabled=true]):not([readonly=true]) .content-radio-button { border-color: var(--color-content-secondary); background-color: var(--color-basic-white); } .radio-button:not([disabled=true]):not([readonly=true]) .content-radio-button::before { background-color: var(--color-content-link); } .radio-button:not([disabled=true]):not([readonly=true]) .content-radio-button:hover, .radio-button:not([disabled=true]):not([readonly=true]) .content-radio-button:active, .radio-button:not([disabled=true]):not([readonly=true]) .content-radio-button:focus { border-color: var(--color-content-link); } .radio-button:not([disabled=true]):not([readonly=true]) .content-radio-button:active, .radio-button:not([disabled=true]):not([readonly=true]) .content-radio-button:focus { box-shadow: 0px 0px 0px 2px rgba(32, 101, 209, 0.1490196078); } .radio-button[readonly=true] .content-radio-button { border-color: var(--color-content-secondary); background-color: var(--color-basic-white); } .radio-button[readonly=true] .content-radio-button::before { background-color: var(--color-content-link); } .item-skeleton { border-radius: 0.5rem; background-color: var(--color-neutral-200); pointer-events: none; position: relative; height: 1.25rem; } .item-skeleton-loading::after { animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67); animation-iteration-count: infinite; background: linear-gradient(to right, #f4f4f4 0%, #d8d8d8 50%, #f4f4f4 100%); animation-name: skeletonShimmer; animation-fill-mode: forwards; background-size: 200% 100%; animation-duration: 2s; border-radius: inherit; position: absolute; height: 100%; width: 100%; content: ""; left: 0; top: 0; } @keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .checkbox { column-gap: 0.5rem; align-items: center; display: flex; } .checkbox label { color: var(--color-content-secondary); } .checkbox .content-checkbox { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border-radius: 0.25rem; border-width: 0.0625rem; height: 1rem; width: 1rem; border-style: solid; position: relative; } .checkbox .content-checkbox::before { transform: translate(-50%, -50%); position: absolute; height: 0.5rem; width: 0.5rem; display: none; content: ""; left: 50%; top: 50%; animation-name: fadeIn; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-fill-mode: both; } .checkbox .content-checkbox[checked=true]::before { display: block; } .checkbox[disabled=true] .content-checkbox { background-color: var(--color-neutral-100); border-color: var(--color-neutral-200); } .checkbox[disabled=true] .content-checkbox::before { background-color: var(--color-neutral-300); } .checkbox[disabled=true] label { color: var(--color-neutral-200); } .checkbox:not([disabled=true]):not([readonly=true]) .content-checkbox { background-color: var(--color-basic-white); border-color: var(--color-content-secondary); } .checkbox:not([disabled=true]):not([readonly=true]) .content-checkbox::before { background-color: var(--color-content-secondary); } .checkbox:not([disabled=true]):not([readonly=true]) .content-checkbox:active, .checkbox:not([disabled=true]):not([readonly=true]) .content-checkbox:focus { box-shadow: 0px 0px 0px 2px rgba(32, 101, 209, 0.1490196078); } .checkbox[readonly=true] .content-checkbox { background-color: var(--color-basic-white); border-color: var(--color-neutral-150); } .checkbox[readonly=true] .content-checkbox::before { background-color: var(--color-content-secondary); } .tooltip { border-radius: 0.25rem; padding: 0.25rem 0.5rem; background-color: rgba(0, 0, 0, 0.8); min-width: max-content; max-height: 9.525rem; animation-name: fadeIn; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-fill-mode: both; } .tooltip .tooltip-text { color: var(--color-content-secondary-inverse); -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-word; -webkit-line-clamp: 6; display: -webkit-box; max-width: 20rem; overflow: hidden; line-clamp: 6; } .tooltip-m .tooltip-text { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 400; } .tooltip-s .tooltip-text { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0rem; font-weight: 400; } .tooltip-xs .tooltip-text { font-size: 0.625rem; line-height: 0.875rem; letter-spacing: 0rem; font-weight: 400; } .tooltip .tooltip-arrow { border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent; border-width: 0.525rem 0.525rem 0.525rem 0; border-style: solid; position: absolute; height: 0; width: 0; } .tooltip .tooltip-arrow-top { transform: translateX(-50%) rotate(90deg); top: -0.725rem; left: 50%; } .tooltip .tooltip-arrow-top-left { transform: rotate(90deg); top: -0.725rem; left: 1rem; } .tooltip .tooltip-arrow-top-right { transform: rotate(90deg); top: -0.725rem; right: 1rem; } .tooltip .tooltip-arrow-bottom { transform: translateX(-50%) rotate(-90deg); bottom: -0.725rem; left: 50%; } .tooltip .tooltip-arrow-bottom-left { transform: rotate(-90deg); bottom: -0.725rem; left: 1rem; } .tooltip .tooltip-arrow-bottom-right { transform: rotate(-90deg); bottom: -0.725rem; right: 1rem; } .tooltip .tooltip-arrow-right { transform: translateY(-50%) rotate(-180deg); right: -0.425rem; top: 50%; } .tooltip .tooltip-arrow-left { transform: translateY(-50%); left: -0.425rem; top: 50%; } .overlay-backdrop { background-color: var(--color-basic-black50); position: absolute; height: 100%; z-index: 100; width: 100%; left: 0; top: 0; } .overlay-content { background-color: var(--color-content-secondary-inverse); position: absolute; z-index: 100; width: 100%; left: 0; } .overlay-content-mobile { transition: height 0.1s ease-in, top 0.1s ease-in, bottom 0.1s ease-in; border-radius: 1.5rem 1.5rem 0 0; max-height: 90vh; bottom: 0; } .overlay-content:not(.overlay-content-mobile) { border-radius: 0.5rem; box-shadow: 0px 0px 2px 0px rgba(27, 55, 72, 0.08), 0px 2px 4px 0px rgba(27, 55, 72, 0.08); } .button { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, -webkit-text-decoration 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, text-decoration 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, text-decoration 0.3s ease, box-shadow 0.3s ease, -webkit-text-decoration 0.3s ease; justify-content: center; border-style: solid; align-items: center; cursor: pointer; display: flex; width: 100%; /** Tamaños general */ /** Variantes de colores */ /** Variantes circle, square y pill */ } .button:not(.button-circle):not(.button-square):not(.button-pill) { border-width: 0.0625rem; } .button:not(.button-circle):not(.button-pill):not(.button-2xs) { border-radius: 1rem; } .button[disabled=true] { color: var(--color-content-disabled); pointer-events: none; } .button[disabled=true] svg, .button[disabled=true] svg path { color: currentColor; fill: currentColor; } .button[disabled=true]:not(.button-style-disabled-ghost):not(.button-style-disabled-outline) { background-color: var(--color-background-disabled); border-color: var(--color-background-disabled); } .button[disabled=true].button-style-disabled-ghost { background-color: transparent; border-color: transparent; } .button[disabled=true].button-style-disabled-outline { background-color: transparent; border-color: var(--color-border-disabled); } .button[loading=true] { pointer-events: none; } .button:active { border-width: 0.125rem; box-shadow: none; } .button-l { padding: 1rem 2rem; column-gap: 1rem; height: 3rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.0625rem; font-weight: 600; } .button-m { padding: 0.75rem 1.5rem; column-gap: 0.75rem; height: 3rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.0625rem; font-weight: 600; } .button-s { padding: 0.5rem 1rem; column-gap: 0.5rem; height: 2.75rem; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.03125rem; font-weight: 600; } .button-xs { padding: 0.25rem 0.75rem; column-gap: 0.25rem; height: 2.5rem; min-width: 2.5rem; font-size: 1.125rem; line-height: 1.625rem; letter-spacing: -0.03125rem; font-weight: 600; } .button-2xs { border-radius: 0.75rem; padding: 0.25rem 0.75rem; column-gap: 0.5rem; height: 1.75rem; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 600; } .button:not([disabled=true]).button-brand { background-color: var(--color-background-brand); color: var(--color-content-secondary-inverse); border-color: var(--color-background-brand); } .button:not([disabled=true]).button-brand svg, .button:not([disabled=true]).button-brand svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-brand:hover, .button:not([disabled=true]).button-brand:focus { background-color: var(--color-background-brand-hover); border-color: var(--color-background-brand-hover); box-shadow: 0px 0px 2px 0px rgba(39, 126, 173, 0.08), 0px 2px 4px 0px rgba(39, 126, 173, 0.08); } .button:not([disabled=true]).button-brand:active { background-color: var(--color-background-brand-pressed); border-color: var(--color-background-brand); } .button:not([disabled=true]).button-brand-inverse { background-color: var(--color-content-secondary-inverse); color: var(--color-content-brand); border-color: var(--color-border-brand); } .button:not([disabled=true]).button-brand-inverse svg, .button:not([disabled=true]).button-brand-inverse svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-brand-inverse:hover, .button:not([disabled=true]).button-brand-inverse:focus { background-color: var(--color-background-brand-low); border-color: var(--color-background-brand-low); box-shadow: 0px 0px 2px 0px rgba(214, 236, 247, 0.08), 0px 2px 4px 0px rgba(214, 236, 247, 0.08); } .button:not([disabled=true]).button-brand-inverse:active { background-color: var(--color-background-brand-pressed); border-color: var(--color-content-brand); color: var(--color-content-secondary-inverse); } .button:not([disabled=true]).button-brand-inverse:active svg, .button:not([disabled=true]).button-brand-inverse:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-white-outline { background-color: transparent; color: var(--color-content-secondary-inverse); border-color: var(--color-content-secondary-inverse); } .button:not([disabled=true]).button-white-outline svg, .button:not([disabled=true]).button-white-outline svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-white-outline:hover, .button:not([disabled=true]).button-white-outline:focus { background-color: var(--color-neutral-100); border-color: var(--color-neutral-100); color: var(--color-background-secondary-high); box-shadow: 0px 0px 2px 0px rgba(229, 229, 229, 0.08), 0px 2px 4px 0px rgba(229, 229, 229, 0.08); } .button:not([disabled=true]).button-white-outline:hover svg, .button:not([disabled=true]).button-white-outline:hover svg path, .button:not([disabled=true]).button-white-outline:focus svg, .button:not([disabled=true]).button-white-outline:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-white-outline:active { background-color: transparent; border-color: var(--color-content-secondary-mid); color: var(--color-background-secondary-mid); } .button:not([disabled=true]).button-white-outline:active svg, .button:not([disabled=true]).button-white-outline:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-white-ghost { background-color: transparent; color: var(--color-content-secondary-inverse); border-color: transparent; } .button:not([disabled=true]).button-white-ghost svg, .button:not([disabled=true]).button-white-ghost svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-white-ghost:hover, .button:not([disabled=true]).button-white-ghost:focus { text-decoration: underline; color: var(--color-content-secondary-mid-inverse); } .button:not([disabled=true]).button-white-ghost:hover svg, .button:not([disabled=true]).button-white-ghost:hover svg path, .button:not([disabled=true]).button-white-ghost:focus svg, .button:not([disabled=true]).button-white-ghost:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-white-ghost:active { text-decoration: none; color: var(--color-content-secondary-low-inverse); } .button:not([disabled=true]).button-white-ghost:active svg, .button:not([disabled=true]).button-white-ghost:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary { background-color: var(--color-content-secondary); color: var(--color-content-secondary-inverse); border-color: var(--color-content-secondary); } .button:not([disabled=true]).button-secondary svg, .button:not([disabled=true]).button-secondary svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary:hover, .button:not([disabled=true]).button-secondary:focus { background-color: var(--color-secondary-600); border-color: var(--color-secondary-600); box-shadow: 0px 0px 2px 0px rgba(22, 44, 58, 0.08), 0px 2px 4px 0px rgba(22, 44, 58, 0.08); } .button:not([disabled=true]).button-secondary:active { background-color: var(--color-secondary-700); border-color: var(--color-content-secondary); } .button:not([disabled=true]).button-secondary-inverse { background-color: var(--color-content-secondary-inverse); color: var(--color-content-secondary); border-color: var(--color-content-secondary); } .button:not([disabled=true]).button-secondary-inverse svg, .button:not([disabled=true]).button-secondary-inverse svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary-inverse:hover, .button:not([disabled=true]).button-secondary-inverse:focus { background-color: var(--color-neutral-50); border-color: var(--color-neutral-50); box-shadow: 0px 0px 2px 0px rgba(242, 242, 242, 0.08), 0px 2px 4px 0px rgba(242, 242, 242, 0.08); } .button:not([disabled=true]).button-secondary-inverse:active { background-color: var(--color-neutral-100); border-color: var(--color-content-secondary-high); } .button:not([disabled=true]).button-secondary-outline { background-color: var(--color-basic-white); color: var(--color-content-secondary); border-color: var(--color-content-secondary); } .button:not([disabled=true]).button-secondary-outline svg, .button:not([disabled=true]).button-secondary-outline svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary-outline:hover, .button:not([disabled=true]).button-secondary-outline:focus { background-color: var(--color-basic-white); border-color: var(--color-content-secondary-mid); color: var(--color-content-secondary-mid); box-shadow: 0px 0px 2px 0px rgba(242, 242, 242, 0.08), 0px 2px 4px 0px rgba(242, 242, 242, 0.08); } .button:not([disabled=true]).button-secondary-outline:hover svg, .button:not([disabled=true]).button-secondary-outline:hover svg path, .button:not([disabled=true]).button-secondary-outline:focus svg, .button:not([disabled=true]).button-secondary-outline:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary-outline:active { background-color: var(--color-neutral-100); border-color: var(--color-content-secondary-low); color: var(--color-content-secondary-low); } .button:not([disabled=true]).button-secondary-outline:active svg, .button:not([disabled=true]).button-secondary-outline:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary-ghost { background-color: transparent; color: var(--color-content-secondary); border-color: transparent; } .button:not([disabled=true]).button-secondary-ghost svg, .button:not([disabled=true]).button-secondary-ghost svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary-ghost:hover, .button:not([disabled=true]).button-secondary-ghost:focus { text-decoration: underline; color: var(--color-secondary-600); } .button:not([disabled=true]).button-secondary-ghost:hover svg, .button:not([disabled=true]).button-secondary-ghost:hover svg path, .button:not([disabled=true]).button-secondary-ghost:focus svg, .button:not([disabled=true]).button-secondary-ghost:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-secondary-ghost:active { text-decoration: none; color: var(--color-secondary-700); } .button:not([disabled=true]).button-secondary-ghost:active svg, .button:not([disabled=true]).button-secondary-ghost:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-accent { background-color: var(--color-background-accent); color: var(--color-content-secondary); border-color: var(--color-background-accent); } .button:not([disabled=true]).button-accent svg, .button:not([disabled=true]).button-accent svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-accent:hover, .button:not([disabled=true]).button-accent:focus { background-color: var(--color-background-accent-hover); border-color: var(--color-background-accent-hover); box-shadow: 0px 0px 2px 0px rgba(255, 203, 51, 0.08), 0px 2px 4px 0px rgba(255, 203, 51, 0.08); } .button:not([disabled=true]).button-accent:active { background-color: var(--color-background-accent-pressed); border-color: var(--color-background-accent); } .button:not([disabled=true]).button-tertiary { background-color: var(--color-content-link); color: var(--color-content-secondary-inverse); border-color: var(--color-content-link); } .button:not([disabled=true]).button-tertiary svg, .button:not([disabled=true]).button-tertiary svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-tertiary:hover, .button:not([disabled=true]).button-tertiary:focus { background-color: var(--color-content-link-hover); border-color: var(--color-content-link-hover); box-shadow: 0px 0px 2px 0px rgba(77, 132, 218, 0.08), 0px 2px 4px 0px rgba(77, 132, 218, 0.08); } .button:not([disabled=true]).button-tertiary:active { background-color: var(--color-content-link-pressed); border-color: var(--color-content-link); } .button:not([disabled=true]).button-tertiary-outline { background-color: var(--color-basic-white); color: var(--color-content-link); border-color: var(--color-content-link); } .button:not([disabled=true]).button-tertiary-outline svg, .button:not([disabled=true]).button-tertiary-outline svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-tertiary-outline:hover, .button:not([disabled=true]).button-tertiary-outline:focus { background-color: var(--color-blue-100); border-color: var(--color-blue-100); box-shadow: 0px 0px 2px 0px rgba(210, 224, 246, 0.08), 0px 2px 4px 0px rgba(210, 224, 246, 0.08); } .button:not([disabled=true]).button-tertiary-outline:active { background-color: var(--color-blue-100); border-color: var(--color-content-link-pressed); } .button:not([disabled=true]).button-tertiary-ghost { background-color: transparent; color: var(--color-content-link); border-color: transparent; } .button:not([disabled=true]).button-tertiary-ghost svg, .button:not([disabled=true]).button-tertiary-ghost svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-tertiary-ghost:hover, .button:not([disabled=true]).button-tertiary-ghost:focus { text-decoration: underline; color: var(--color-content-link-hover); } .button:not([disabled=true]).button-tertiary-ghost:hover svg, .button:not([disabled=true]).button-tertiary-ghost:hover svg path, .button:not([disabled=true]).button-tertiary-ghost:focus svg, .button:not([disabled=true]).button-tertiary-ghost:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-tertiary-ghost:active { text-decoration: none; color: var(--color-content-link-pressed); } .button:not([disabled=true]).button-tertiary-ghost:active svg, .button:not([disabled=true]).button-tertiary-ghost:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success { background-color: var(--color-content-success); color: var(--color-background-success); border-color: var(--color-content-success); } .button:not([disabled=true]).button-success svg, .button:not([disabled=true]).button-success svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success:hover, .button:not([disabled=true]).button-success:focus { background-color: var(--color-content-success-bold); border-color: var(--color-content-success-bold); box-shadow: 0px 0px 2px 0px rgba(28, 75, 30, 0.08), 0px 2px 4px 0px rgba(28, 75, 30, 0.08); } .button:not([disabled=true]).button-success:active { background-color: var(--color-content-success-bold); border-color: var(--color-content-success); } .button:not([disabled=true]).button-success-inverse { background-color: var(--color-background-success); color: var(--color-content-success); border-color: var(--color-content-success); } .button:not([disabled=true]).button-success-inverse svg, .button:not([disabled=true]).button-success-inverse svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success-inverse:hover, .button:not([disabled=true]).button-success-inverse:focus { background-color: var(--color-background-success-subtle); border-color: var(--color-background-success-subtle); box-shadow: 0px 0px 2px 0px rgba(171, 203, 173, 0.08), 0px 2px 4px 0px rgba(171, 203, 173, 0.08); } .button:not([disabled=true]).button-success-inverse:active { background-color: var(--color-content-success-bold); border-color: var(--color-content-success); color: var(--color-background-success-subtle); } .button:not([disabled=true]).button-success-inverse:active svg, .button:not([disabled=true]).button-success-inverse:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success-outline { background-color: var(--color-basic-white); color: var(--color-content-success); border-color: var(--color-border-success); } .button:not([disabled=true]).button-success-outline svg, .button:not([disabled=true]).button-success-outline svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success-outline:hover, .button:not([disabled=true]).button-success-outline:focus { background-color: var(--color-basic-white); border-color: var(--color-content-success-bold); color: var(--color-content-success-bold); box-shadow: 0px 0px 2px 0px rgba(28, 75, 30, 0.08), 0px 2px 4px 0px rgba(28, 75, 30, 0.08); } .button:not([disabled=true]).button-success-outline:hover svg, .button:not([disabled=true]).button-success-outline:hover svg path, .button:not([disabled=true]).button-success-outline:focus svg, .button:not([disabled=true]).button-success-outline:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success-outline:active { background-color: var(--color-basic-white); border-color: var(--color-content-success); color: var(--color-content-success-bold); } .button:not([disabled=true]).button-success-outline:active svg, .button:not([disabled=true]).button-success-outline:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success-ghost { background-color: transparent; color: var(--color-content-success); border-color: transparent; } .button:not([disabled=true]).button-success-ghost svg, .button:not([disabled=true]).button-success-ghost svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success-ghost:hover, .button:not([disabled=true]).button-success-ghost:focus { text-decoration: underline; color: var(--color-content-success-bold); } .button:not([disabled=true]).button-success-ghost:hover svg, .button:not([disabled=true]).button-success-ghost:hover svg path, .button:not([disabled=true]).button-success-ghost:focus svg, .button:not([disabled=true]).button-success-ghost:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-success-ghost:active { text-decoration: none; color: var(--color-content-success-bold); } .button:not([disabled=true]).button-success-ghost:active svg, .button:not([disabled=true]).button-success-ghost:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error { background-color: var(--color-content-error); color: var(--color-background-error); border-color: var(--color-content-error); } .button:not([disabled=true]).button-error svg, .button:not([disabled=true]).button-error svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error:hover, .button:not([disabled=true]).button-error:focus { background-color: var(--color-content-error-bold); border-color: var(--color-content-error-bold); } .button:not([disabled=true]).button-error:active { background-color: var(--color-content-error-bold); border-color: var(--color-content-error); } .button:not([disabled=true]).button-error-inverse { background-color: var(--color-background-error); color: var(--color-content-error); border-color: var(--color-content-error); } .button:not([disabled=true]).button-error-inverse svg, .button:not([disabled=true]).button-error-inverse svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-inverse:hover, .button:not([disabled=true]).button-error-inverse:focus { background-color: var(--color-background-error-subtle); border-color: var(--color-background-error-subtle); } .button:not([disabled=true]).button-error-inverse:hover svg, .button:not([disabled=true]).button-error-inverse:hover svg path, .button:not([disabled=true]).button-error-inverse:focus svg, .button:not([disabled=true]).button-error-inverse:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-inverse:active { background-color: var(--color-content-error-bold); border-color: var(--color-content-error); color: var(--color-background-error-subtle); } .button:not([disabled=true]).button-error-inverse:active svg, .button:not([disabled=true]).button-error-inverse:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-outline { background-color: var(--color-basic-white); color: var(--color-content-error); border-color: var(--color-border-error); } .button:not([disabled=true]).button-error-outline svg, .button:not([disabled=true]).button-error-outline svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-outline:hover, .button:not([disabled=true]).button-error-outline:focus { background-color: var(--color-basic-white); border-color: var(--color-content-error-bold); color: var(--color-content-error-bold); box-shadow: 0px 0px 2px 0px rgba(137, 34, 32, 0.08), 0px 2px 4px 0px rgba(137, 34, 32, 0.08); } .button:not([disabled=true]).button-error-outline:hover svg, .button:not([disabled=true]).button-error-outline:hover svg path, .button:not([disabled=true]).button-error-outline:focus svg, .button:not([disabled=true]).button-error-outline:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-outline:active { background-color: var(--color-basic-white); border-color: var(--color-content-error); color: var(--color-content-error-bold); } .button:not([disabled=true]).button-error-outline:active svg, .button:not([disabled=true]).button-error-outline:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-ghost { background-color: transparent; color: var(--color-content-error); border-color: transparent; } .button:not([disabled=true]).button-error-ghost svg, .button:not([disabled=true]).button-error-ghost svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-ghost:hover, .button:not([disabled=true]).button-error-ghost:focus { text-decoration: underline; color: var(--color-content-error-bold); } .button:not([disabled=true]).button-error-ghost:hover svg, .button:not([disabled=true]).button-error-ghost:hover svg path, .button:not([disabled=true]).button-error-ghost:focus svg, .button:not([disabled=true]).button-error-ghost:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-error-ghost:active { text-decoration: none; color: var(--color-content-error-bold); } .button:not([disabled=true]).button-error-ghost:active svg, .button:not([disabled=true]).button-error-ghost:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning { background-color: var(--color-content-warning); color: var(--color-background-warning); border-color: var(--color-content-warning); } .button:not([disabled=true]).button-warning svg, .button:not([disabled=true]).button-warning svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning:hover, .button:not([disabled=true]).button-warning:focus { background-color: var(--color-content-warning-bold); border-color: var(--color-content-warning-bold); } .button:not([disabled=true]).button-warning:active { background-color: var(--color-content-warning-bold); border-color: var(--color-content-warning); } .button:not([disabled=true]).button-warning-inverse { background-color: var(--color-background-warning); color: var(--color-content-warning); border-color: var(--color-content-warning); } .button:not([disabled=true]).button-warning-inverse svg, .button:not([disabled=true]).button-warning-inverse svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning-inverse:hover, .button:not([disabled=true]).button-warning-inverse:focus { background-color: var(--color-background-warning-subtle); border-color: var(--color-background-warning-subtle); } .button:not([disabled=true]).button-warning-inverse:active { background-color: var(--color-content-warning-bold); border-color: var(--color-content-warning); color: var(--color-background-warning-subtle); } .button:not([disabled=true]).button-warning-inverse:active svg, .button:not([disabled=true]).button-warning-inverse:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning-outline { background-color: var(--color-basic-white); color: var(--color-content-warning); border-color: var(--color-border-warning); } .button:not([disabled=true]).button-warning-outline svg, .button:not([disabled=true]).button-warning-outline svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning-outline:hover, .button:not([disabled=true]).button-warning-outline:focus { background-color: var(--color-basic-white); border-color: var(--color-content-warning-bold); color: var(--color-content-warning-bold); box-shadow: 0px 0px 2px 0px rgba(148, 109, 0, 0.08), 0px 2px 4px 0px rgba(148, 109, 0, 0.08); } .button:not([disabled=true]).button-warning-outline:hover svg, .button:not([disabled=true]).button-warning-outline:hover svg path, .button:not([disabled=true]).button-warning-outline:focus svg, .button:not([disabled=true]).button-warning-outline:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning-outline:active { background-color: var(--color-basic-white); border-color: var(--color-content-warning-bold); color: var(--color-content-warning-bold); } .button:not([disabled=true]).button-warning-outline:active svg, .button:not([disabled=true]).button-warning-outline:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning-ghost { background-color: transparent; color: var(--color-content-warning); border-color: transparent; } .button:not([disabled=true]).button-warning-ghost svg, .button:not([disabled=true]).button-warning-ghost svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning-ghost:hover, .button:not([disabled=true]).button-warning-ghost:focus { text-decoration: underline; color: var(--color-content-warning-bold); } .button:not([disabled=true]).button-warning-ghost:hover svg, .button:not([disabled=true]).button-warning-ghost:hover svg path, .button:not([disabled=true]).button-warning-ghost:focus svg, .button:not([disabled=true]).button-warning-ghost:focus svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-warning-ghost:active { text-decoration: none; color: var(--color-content-warning-bold); } .button:not([disabled=true]).button-warning-ghost:active svg, .button:not([disabled=true]).button-warning-ghost:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-info { background-color: var(--color-content-info); color: var(--color-background-info); border-color: var(--color-content-info); } .button:not([disabled=true]).button-info svg, .button:not([disabled=true]).button-info svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-info:hover, .button:not([disabled=true]).button-info:focus { background-color: var(--color-content-info-bold); border-color: var(--color-content-info-bold); } .button:not([disabled=true]).button-info:active { background-color: var(--color-content-info-bold); border-color: var(--color-content-info); } .button:not([disabled=true]).button-info-inverse { background-color: var(--color-background-info); color: var(--color-content-info); border-color: var(--color-content-info); } .button:not([disabled=true]).button-info-inverse svg, .button:not([disabled=true]).button-info-inverse svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-info-inverse:hover, .button:not([disabled=true]).button-info-inverse:focus { background-color: var(--color-background-info-subtle); border-color: var(--color-background-info-subtle); } .button:not([disabled=true]).button-info-inverse:active { background-color: var(--color-content-info-bold); border-color: var(--color-content-info); color: var(--color-background-info-subtle); } .button:not([disabled=true]).button-info-inverse:active svg, .button:not([disabled=true]).button-info-inverse:active svg path { color: currentColor; fill: currentColor; } .button:not([disabled=true]).button-info-outline { background-color: var(--color-basic-white); color: var(--color-content-info); border-color: var(--color-border-info); } .button:not([disabled=true]).button-info-outline:hover, .button:not([disabled=true]).button-info-outline:focus { background-color: var(--color-basic-white); border-color: var(--color-content-info-bold); color: var(--color-content-info-bold); box-shadow: 0px 0px 2px 0px rgba(19, 61, 125, 0.08), 0px 2px 4px 0px rgba(19, 61, 125, 0.08); } .button:not([disabled=true]).button-info-outline:active { background-color: var(--color-basic-white); border-color: var(--color-content-info); color: var(--color-content-info-bold); } .button:not([disabled=true]).button-info-ghost { background-color: transparent; color: var(--color-content-info); border-color: transparent; } .button:not([disabled=true]).button-info-ghost:hover, .button:not([disabled=true]).button-info-ghost:focus { text-decoration: underline; color: var(--color-content-info-bold); } .button:not([disabled=true]).button-info-ghost:active { text-decoration: none; color: var(--color-content-info-bold); } .button-circle { border-radius: 50%; } .button-circle:not(.button-circle-2xs):not(.button-square-2xs), .button-square:not(.button-circle-2xs):not(.button-square-2xs) { border-width: 0.125rem; } .button-circle-xl, .button-square-xl { padding: 1.5rem; height: 6rem; width: 6rem; } .button-circle-l, .button-square-l { padding: 1rem; height: 4rem; width: 4rem; } .button-circle-m, .button-square-m { padding: 0.75rem; height: 3rem; width: 3rem; } .button-circle-s, .button-square-s { padding: 0.5rem; height: 2.125rem; width: 2.125rem; } .button-circle-xs, .button-square-xs { padding: 0.25rem; height: 1.5rem; width: 1.5rem; } .button-circle-2xs, .button-square-2xs { border-width: 0.0625rem; padding: 0.25rem; height: 1.25rem; width: 1.25rem; } .button-pill { border-radius: 62.4375rem; } .switch { border-radius: 1rem; padding: 0.125rem; transition: background-color 0.3s ease; position: relative; cursor: pointer; border: none; /** Circulo blanco */ /** Tamaños */ /** Variante checked */ /** Variante disabled */ /** Variante readonly */ } .switch-track { padding: 0.125rem; background-color: var(--color-basic-white); transition: width 0.3s ease; transform: translateY(-50%); position: absolute; top: 50%; box-shadow: 0px 0px 2px 0px rgba(27, 55, 72, 0.08), 0px 2px 4px 0px rgba(27, 55, 72, 0.08); } .switch-track-loading { border: 0.125rem solid transparent; border-top-color: var(--color-content-secondary); animation: spin 1s linear infinite; pointer-events: none; border-radius: 50%; height: 100%; width: 100%; z-index: 1; } .switch:not(.switch-s) { height: 1.375rem; width: 2.75rem; } .switch:not(.switch-s) .switch-track { border-radius: 1rem; height: 1.125rem; width: 1.125rem; } .switch:not(.switch-s):active .switch-track { width: 1.5rem; } .switch-s { height: 1rem; width: 1.75rem; } .switch-s .switch-track { border-radius: 1rem; height: 0.75rem; width: 0.75rem; } .switch-s:active .switch-track { width: 1rem; } .switch[checked=true] { background-color: var(--color-content-secondary); } .switch[checked=true] .switch-track { right: 0.125rem; } .switch:not([checked=true]) { background-color: var(--color-background-secondary-high); } .switch[disabled=true] { background-color: var(--color-background-secondary-high); opacity: 0.65; } .switch[readonly=true] { pointer-events: none; opacity: 0.65; } /** Función para convertir un valor de px a rem **/ .primary-table { transition: width 0.3s ease-in-out; flex-direction: column; display: flex; min-height: 0; } .primary-table .container-header-and-body { grid-template-rows: auto 1fr; overflow-x: auto; display: grid; height: 100%; width: 100%; } .primary-table-header { border-bottom: 1px solid get-theme-value(palette, tertiary, background); padding: 0 1rem 0.7rem 1rem; align-items: center; column-gap: 1rem; display: grid; } .primary-table-body { overflow-y: auto; min-height: 0; height: 100%; } .primary-table-item { background-color: get-theme-value(theme, primary, background); transition: background-color 0.3s ease-in-out; border-radius: 0.3125rem; padding: 0.8rem 1rem; align-items: center; min-height: 3.25rem; margin-top: 0.3rem; column-gap: 1rem; cursor: pointer; display: grid; height: auto; } .primary-table-item:not(.primary-table-item-selected):hover { background-color: get-theme-value(theme, secondary, border); } .primary-table-item-selected { background-color: get-theme-value(palette, primary, transparent); } .primary-table-footer { padding-top: 0.5rem; } .slide { row-gap: 0.5rem; grid-template-rows: 1fr auto; display: grid; height: 100%; width: 100%; /** Variantes de colores */ /** Variantes estilos */ } .slide-content { position: relative; overflow: hidden; } .slide-item { transition: transform 0.5s ease, width 0.3s ease-in-out; position: absolute; flex-basis: 100%; height: 100%; bottom: 0; right: 0; left: 0; top: 0; } .slide-indicators { justify-content: center; align-items: center; display: flex; column-gap: 0.25rem; } .slide-indicators .item-indicator { transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out, border-radius 0.3s ease-in-out; height: 1rem; cursor: pointer; border: none; } .slide-indicators .item-indicator:not(.item-indicator-selected) { border-radius: 50%; width: 1rem; } .slide-indicators .item-indicator-selected { border-radius: 62.4375rem; width: 3rem; } .slide:not(.slide-inverse) .slide-indicators .item-indicator:not(.item-indicator-selected) { background-color: var(--color-background-secondary); } .slide:not(.slide-inverse) .slide-indicators .item-indicator-selected { background-color: var(--color-background-secondary-mid); } .slide-inverse .slide-indicadors .item-indicator:not(.item-indicator-selected) { background-color: var(--color-background-secondary-low); } .slide-inverse .slide-indicadors .item-indicator-selected { background-color: var(--color-background-secondary); } .slide:not(.slide-mobile).slide-indicators .item-indicator { height: 1rem; } .slide:not(.slide-mobile).slide-indicators .item-indicator:not(.item-indicator-selected) { width: 1rem; } .slide:not(.slide-mobile).slide-indicators .item-indicator-selected { width: 3rem; } .slide-mobile.slide-indicators .item-indicator { height: 0.5rem; } .slide-mobile.slide-indicators .item-indicator:not(.item-indicator-selected) { width: 0.5rem; } .slide-mobile.slide-indicators .item-indicator-selected { width: 1.5rem; } .slide-split .slide-item { border-radius: 1rem; } .step-horizontal .step-header { justify-content: space-between; align-items: center; display: flex; } .step-horizontal-sm .step-header { column-gap: 3.125rem; } .step-vertical .step-header { flex-direction: column; display: flex; } .step-body { position: relative; overflow: hidden; width: 100%; } .step-body-item { transition: transform 0.5s ease; overflow: hidden; } .step-body-item:not(.step-body-item-active) { position: absolute; display: block; bottom: 0; right: 0; left: 0; top: 0; } .step-body-item-active { flex-direction: column; flex-basis: 100%; display: flex; flex-grow: 1; height: 100%; width: 100%; z-index: 1; } .step-element-basic .step-element-content { border-radius: 50%; transition: background-color 0.3s ease, border-color 0.3s ease; border-width: 0.125rem; border-color: transparent; border-style: solid; } .step-element-basic.step-element-error .step-element-content { background-color: var(--color-content-error); } .step-element-basic.step-element-error .step-element-content svg, .step-element-basic.step-element-error .step-element-content svg path { color: currentColor; fill: currentColor; } .step-element-basic.step-element-error .step-element-content span { color: var(--color-content-secondary-inverse); } .step-element-basic.step-element-error p { color: var(--color-content-error); } .step-element-basic[disabled=true] .step-element-content { background-color: var(--color-background-secondary-mid); } .step-element-basic[disabled=true] .step-element-content svg, .step-element-basic[disabled=true] .step-element-content svg path { color: currentColor; fill: currentColor; } .step-element-basic[disabled=true] .step-element-content span { color: var(--color-content-secondary-mid); } .step-element-basic[disabled=true] .step-element-content::before { background-color: var(--color-background-primary); } .step-element-basic[disabled=true] p { color: var(--color-content-secondary-mid); } .step-element-basic-sm .step-element-content { height: 1.5rem; width: 1.5rem; position: relative; } .step-element-basic-sm .step-element-content:not([isFirst=true])::before { right: calc(100% + 0.3125rem); height: 0.0625rem; width: 2.75rem; position: absolute; content: ""; } .step-element-basic:not(.step-element-basic-sm) .step-element-content { height: 2rem; width: 2rem; } .step-element-basic:not(.step-element-error):not([disabled=true]).step-element-active .step-element-content { background-color: var(--color-background-secondary); border-color: var(--color-background-secondary); } .step-element-basic:not(.step-element-error):not([disabled=true]).step-element-active .step-element-content span { color: var(--color-content-secondary-inverse); } .step-element-basic:not(.step-element-error):not([disabled=true]).step-element-finished .step-element-content { background-color: var(--color-background-secondary-low); border-color: var(--color-background-secondary); } .step-element-basic:not(.step-element-error):not([disabled=true]).step-element-finished .step-element-content::before, .step-element-basic:not(.step-element-error):not([disabled=true]).step-element-active .step-element-content::before { background-color: var(--color-background-secondary); } .form-field { /** Tamaños **/ /** Variante readonly **/ /** Variante colores **/ } .form-field label { margin-bottom: 0.3rem; } .form-field label[principal=true] { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 400; color: var(--color-neutral-800); } .form-field label:not([principal=true]) { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0rem; font-weight: 400; color: var(--color-neutral-700); } .form-field label[secondary=true] { margin-top: 0.3rem; display: block; } .form-field[required=true] label[principal=true]::before { color: var(--color-content-error); margin-right: 0.3rem; content: "*"; } .form-field:not(.form-field-textarea) .form-field-content { padding: 0.5rem 0.75rem; align-items: center; } .form-field:not(.form-field-select).form-field-combo .form-field-content { border-radius: 0 0.75rem 0.75rem 0; } .form-field:not(.form-field-combo):not(.form-field-select-combo) .form-field-content { border-radius: 0.75rem; } .form-field-content { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border-width: 0.0625rem; column-gap: 0.5rem; background-color: var(--color-basic-white); border-color: var(--color-neutral-100); border-style: solid; display: flex; cursor: text; } .form-field-content input, .form-field-content textarea { background-color: transparent; appearance: none; resize: none; border: none; height: 100%; width: 100%; padding: 0; } .form-field-content input::placeholder, .form-field-content textarea::placeholder { color: var(--color-neutral-300); } .form-field-content input[type=number], .form-field-content textarea[type=number] { -moz-appearance: textfield; } .form-field-content input[type=number]::-webkit-outer-spin-button, .form-field-content input[type=number]::-webkit-inner-spin-button, .form-field-content textarea[type=number]::-webkit-outer-spin-button, .form-field-content textarea[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .form-field-content input:-webkit-autofill, .form-field-content input:-webkit-autofill:hover, .form-field-content input:-webkit-autofill:focus, .form-field-content textarea:-webkit-autofill, .form-field-content textarea:-webkit-autofill:hover, .form-field-content textarea:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; -moz-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: var(--color-neutral-900); box-shadow: 0 0 0px 1000px transparent inset; } .form-field-lg .form-field-content { min-height: 3rem; } .form-field-lg .form-field-content input { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0rem; font-weight: 400; } .form-field-md .form-field-content { min-height: 2.5rem; } .form-field-md .form-field-content input { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0rem; font-weight: 400; } .form-field-sm .form-field-content { min-height: 2rem; } .form-field-sm .form-field-content input { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 400; } .form-field-textarea .form-field-content { position: relative; padding: 0.5rem 0.75rem 2rem 0.75rem; } .form-field-textarea .form-field-content textarea { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0rem; font-weight: 400; } .form-field-textarea .form-field-content-footer { column-gap: 0.75rem; align-items: center; position: absolute; bottom: 0.5rem; right: 0.5rem; display: flex; } .form-field-textarea .form-field-content-footer-counter span { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0rem; font-weight: 400; color: var(--color-neutral-700); } .form-field-textarea-lg .form-field-content { min-height: 7.5rem; } .form-field-textarea-lg .form-field-content textarea { min-height: 4.875rem; } .form-field-textarea-md .form-field-content { min-height: 6rem; } .form-field-textarea-md .form-field-content textarea { min-height: 3.375rem; } .form-field-textarea-sm .form-field-content { min-height: 3.75rem; } .form-field-textarea-sm .form-field-content textarea { min-height: 1.875rem; } .form-field-select.form-field-combo .form-field-content { border-radius: 0.75rem 0 0 0.75rem; } .form-field:not([disabled=true]):not([readonly=true]) .form-field-content:focus-within { box-shadow: 0px 0px 4px 0px rgba(27, 55, 72, 0.08), 0px 4px 8px 0px rgba(27, 55, 72, 0.1); } .form-field:not([disabled=true]):not([readonly=true]) .form-field-content input { color: var(--color-neutral-900); } .form-field[readonly=true] .form-field-content { background-color: var(--color-neutral-25); cursor: default; } .form-field[readonly=true] .form-field-content input { color: var(--color-neutral-600); cursor: default; } .form-field:not(.form-field-error):not(.form-field-warning):not(.form-field-success):not(.form-field-info):not([disabled=true]):not([readonly=true]) .form-field-content:hover { border-color: var(--color-neutral-200); } .form-field:not(.form-field-error):not(.form-field-warning):not(.form-field-success):not(.form-field-info):not([disabled=true]):not([readonly=true]) .form-field-content:focus-within { border-color: var(--color-secondary-500); } .form-field:not(.form-field-error):not(.form-field-warning):not(.form-field-success):not(.form-field-info):not([disabled=true]):not([readonly=true]).form-field-filled .form-field-content { border-color: var(--color-secondary-500); } .form-field-error .form-field-content { border-color: var(--color-content-error); } .form-field-error label[secondary=true] { color: var(--color-content-error); } .form-field-error svg path { fill: var(--color-content-error); } .form-field-warning .form-field-content { border-color: var(--color-content-warning); } .form-field-warning label[secondary=true] { color: var(--color-content-warning); } .form-field-warning svg path { fill: var(--color-content-warning); } .form-field-success .form-field-content { border-color: var(--color-content-success); } .form-field-success label[secondary=true] { color: var(--color-content-success); } .form-field-success svg path { fill: var(--color-content-success); } .form-field-info .form-field-content { border-color: var(--color-content-info); } .form-field-info label[secondary=true] { color: var(--color-content-info); } .form-field-info svg path { fill: var(--color-content-info); } .icon-wrapper { position: relative; cursor: pointer; height: 100%; } .icon-wrapper .content-skeleton { position: absolute; z-index: 1; left: 0; top: 0; } .tag { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, -webkit-text-decoration 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, text-decoration 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, text-decoration 0.3s ease, -webkit-text-decoration 0.3s ease; border-radius: 62.4375rem; border-width: 0.0625rem; padding-block: 0.125rem; justify-content: center; border-style: solid; align-items: center; white-space: nowrap; cursor: pointer; display: flex; box-shadow: 0px 0px 2px 0px rgba(27, 55, 72, 0.08), 0px 2px 4px 0px rgba(27, 55, 72, 0.08); /** Tamaños */ /** Variantes de colores **/ } .tag[disabled=true] { background-color: var(--color-background-disabled); border-color: var(--color-border-disabled); color: var(--color-content-disabled); pointer-events: none; } .tag[loading=true] { pointer-events: none; } .tag:active { border-width: 0.125rem; } .tag-xl { padding-inline: 1.5rem; column-gap: 1.5rem; min-width: 3rem; height: 3rem; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: 0rem; font-weight: 400; } .tag-l { padding-inline: 1rem; column-gap: 1rem; min-width: 2.5rem; height: 2.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0rem; font-weight: 400; } .tag-m { padding-inline: 0.75rem; column-gap: 0.75rem; min-width: 2rem; height: 2rem; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 400; } .tag-s { padding-inline: 0.5rem; column-gap: 0.5rem; min-width: 1.5rem; height: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 400; } .tag-xs { padding-inline: 0.5rem; column-gap: 0.5rem; min-width: 1.25rem; height: 1.25rem; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0rem; font-weight: 400; } .tag-2xs { padding-inline: 0.25rem; column-gap: 0.25rem; min-width: 1rem; height: 1rem; font-size: 0.625rem; line-height: 0.875rem; letter-spacing: 0rem; font-weight: 400; } .tag:not([disabled=true]).tag-default { background-color: var(--color-secondary-100); color: var(--color-content-secondary); border-color: var(--color-secondary-100); } .tag:not([disabled=true]).tag-default svg, .tag:not([disabled=true]).tag-default svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default:hover, .tag:not([disabled=true]).tag-default:focus { background-color: var(--color-secondary-200); border-color: var(--color-border-secondary-high); } .tag:not([disabled=true]).tag-default:hover svg, .tag:not([disabled=true]).tag-default:hover svg path, .tag:not([disabled=true]).tag-default:focus svg, .tag:not([disabled=true]).tag-default:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default:active { background-color: var(--color-secondary-100); border-color: var(--color-border-secondary-high); } .tag:not([disabled=true]).tag-default:active svg, .tag:not([disabled=true]).tag-default:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default-inverse { background-color: var(--color-content-secondary); color: var(--color-content-secondary-inverse); border-color: var(--color-content-secondary); } .tag:not([disabled=true]).tag-default-inverse svg, .tag:not([disabled=true]).tag-default-inverse svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default-inverse:hover, .tag:not([disabled=true]).tag-default-inverse:focus { background-color: var(--color-content-secondary); border-color: var(--color-content-secondary); } .tag:not([disabled=true]).tag-default-inverse:hover svg, .tag:not([disabled=true]).tag-default-inverse:hover svg path, .tag:not([disabled=true]).tag-default-inverse:focus svg, .tag:not([disabled=true]).tag-default-inverse:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default-inverse:active { background-color: var(--color-content-secondary-high); border-color: var(--color-border-secondary-low); } .tag:not([disabled=true]).tag-default-inverse:active svg, .tag:not([disabled=true]).tag-default-inverse:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default-outline { background-color: transparent; color: var(--color-content-secondary); border-color: var(--color-content-secondary); } .tag:not([disabled=true]).tag-default-outline svg, .tag:not([disabled=true]).tag-default-outline svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default-outline:hover svg, .tag:not([disabled=true]).tag-default-outline:hover svg path, .tag:not([disabled=true]).tag-default-outline:focus svg, .tag:not([disabled=true]).tag-default-outline:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-default-outline:active { border-color: var(--color-content-secondary-high); color: var(--color-content-secondary-high); } .tag:not([disabled=true]).tag-default-outline:active svg, .tag:not([disabled=true]).tag-default-outline:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-accent { background-color: var(--color-background-accent); color: var(--color-accent-800); border-color: var(--color-background-accent); } .tag:not([disabled=true]).tag-accent svg, .tag:not([disabled=true]).tag-accent svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-accent:hover, .tag:not([disabled=true]).tag-accent:focus { background-color: var(--color-background-accent-hover); color: var(--color-accent-900); border-color: var(--color-background-accent-high); } .tag:not([disabled=true]).tag-accent:hover svg, .tag:not([disabled=true]).tag-accent:hover svg path, .tag:not([disabled=true]).tag-accent:focus svg, .tag:not([disabled=true]).tag-accent:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-accent:active { background-color: var(--color-background-accent-hover); color: var(--color-accent-900); border-color: var(--color-accent-700); } .tag:not([disabled=true]).tag-accent:active svg, .tag:not([disabled=true]).tag-accent:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-success { background-color: var(--color-background-success); color: var(--color-content-success); border-color: var(--color-background-success); } .tag:not([disabled=true]).tag-success svg, .tag:not([disabled=true]).tag-success svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-success:hover, .tag:not([disabled=true]).tag-success:focus { background-color: var(--color-background-success); border-color: var(--color-border-success); } .tag:not([disabled=true]).tag-success:hover svg, .tag:not([disabled=true]).tag-success:hover svg path, .tag:not([disabled=true]).tag-success:focus svg, .tag:not([disabled=true]).tag-success:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-success:active { background-color: var(--color-background-success-subtle); border-color: var(--color-border-success); } .tag:not([disabled=true]).tag-success:active svg, .tag:not([disabled=true]).tag-success:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-success-outline { background-color: transparent; color: var(--color-content-success); border-color: var(--color-content-success); } .tag:not([disabled=true]).tag-success-outline svg, .tag:not([disabled=true]).tag-success-outline svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-success-outline:hover svg, .tag:not([disabled=true]).tag-success-outline:hover svg path, .tag:not([disabled=true]).tag-success-outline:focus svg, .tag:not([disabled=true]).tag-success-outline:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-success-outline:active { color: var(--color-content-success-bold); } .tag:not([disabled=true]).tag-success-outline:active svg, .tag:not([disabled=true]).tag-success-outline:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-error { background-color: var(--color-background-error); color: var(--color-content-error); border-color: var(--color-background-error); } .tag:not([disabled=true]).tag-error svg, .tag:not([disabled=true]).tag-error svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-error:hover, .tag:not([disabled=true]).tag-error:focus { background-color: var(--color-background-error); border-color: var(--color-border-error); } .tag:not([disabled=true]).tag-error:hover svg, .tag:not([disabled=true]).tag-error:hover svg path, .tag:not([disabled=true]).tag-error:focus svg, .tag:not([disabled=true]).tag-error:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-error:active { background-color: var(--color-background-error-subtle); border-color: var(--color-border-error); } .tag:not([disabled=true]).tag-error:active svg, .tag:not([disabled=true]).tag-error:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-error-outline { background-color: transparent; color: var(--color-content-error); border-color: var(--color-content-error); } .tag:not([disabled=true]).tag-error-outline svg, .tag:not([disabled=true]).tag-error-outline svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-error-outline:hover svg, .tag:not([disabled=true]).tag-error-outline:hover svg path, .tag:not([disabled=true]).tag-error-outline:focus svg, .tag:not([disabled=true]).tag-error-outline:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-error-outline:active { color: var(--color-content-error-bold); border-color: var(--color-content-error-bold); } .tag:not([disabled=true]).tag-error-outline:active svg, .tag:not([disabled=true]).tag-error-outline:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-warning { background-color: var(--color-background-warning); color: var(--color-content-warning-bold); border-color: var(--color-background-warning); } .tag:not([disabled=true]).tag-warning svg, .tag:not([disabled=true]).tag-warning svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-warning:hover, .tag:not([disabled=true]).tag-warning:focus { background-color: var(--color-background-warning); border-color: var(--color-border-warning); } .tag:not([disabled=true]).tag-warning:hover svg, .tag:not([disabled=true]).tag-warning:hover svg path, .tag:not([disabled=true]).tag-warning:focus svg, .tag:not([disabled=true]).tag-warning:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-warning:active { background-color: var(--color-background-warning-subtle); border-color: var(--color-border-warning); } .tag:not([disabled=true]).tag-warning:active svg, .tag:not([disabled=true]).tag-warning:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-warning-outline { background-color: transparent; color: var(--color-content-warning); border-color: var(--color-content-warning); } .tag:not([disabled=true]).tag-warning-outline svg, .tag:not([disabled=true]).tag-warning-outline svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-warning-outline:hover svg, .tag:not([disabled=true]).tag-warning-outline:hover svg path, .tag:not([disabled=true]).tag-warning-outline:focus svg, .tag:not([disabled=true]).tag-warning-outline:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-warning-outline:active { color: var(--color-content-warning-bold); border-color: var(--color-content-warning-bold); } .tag:not([disabled=true]).tag-warning-outline:active svg, .tag:not([disabled=true]).tag-warning-outline:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-info { background-color: var(--color-background-info); color: var(--color-content-info); border-color: var(--color-background-info); } .tag:not([disabled=true]).tag-info svg, .tag:not([disabled=true]).tag-info svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-info:hover, .tag:not([disabled=true]).tag-info:focus { background-color: var(--color-background-info); border-color: var(--color-border-info); } .tag:not([disabled=true]).tag-info:hover svg, .tag:not([disabled=true]).tag-info:hover svg path, .tag:not([disabled=true]).tag-info:focus svg, .tag:not([disabled=true]).tag-info:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-info:active { background-color: var(--color-background-info-subtle); border-color: var(--color-border-info); } .tag:not([disabled=true]).tag-info:active svg, .tag:not([disabled=true]).tag-info:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-info-outline { background-color: transparent; color: var(--color-content-info); border-color: var(--color-content-info); } .tag:not([disabled=true]).tag-info-outline svg, .tag:not([disabled=true]).tag-info-outline svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-info-outline:hover svg, .tag:not([disabled=true]).tag-info-outline:hover svg path, .tag:not([disabled=true]).tag-info-outline:focus svg, .tag:not([disabled=true]).tag-info-outline:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-info-outline:active { color: var(--color-content-info-bold); border-color: var(--color-content-info-bold); } .tag:not([disabled=true]).tag-info-outline:active svg, .tag:not([disabled=true]).tag-info-outline:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-new { background-color: var(--color-purple-100); color: var(--color-purple-500); border-color: var(--color-purple-100); } .tag:not([disabled=true]).tag-new svg, .tag:not([disabled=true]).tag-new svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-new:hover, .tag:not([disabled=true]).tag-new:focus { border-color: var(--color-purple-500); } .tag:not([disabled=true]).tag-new:hover svg, .tag:not([disabled=true]).tag-new:hover svg path, .tag:not([disabled=true]).tag-new:focus svg, .tag:not([disabled=true]).tag-new:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-new:active { background-color: var(--color-purple-200); border-color: var(--color-purple-600); } .tag:not([disabled=true]).tag-new:active svg, .tag:not([disabled=true]).tag-new:active svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-teal { background-color: var(--color-teal-100); color: var(--color-teal-500); border-color: var(--color-teal-100); } .tag:not([disabled=true]).tag-teal svg, .tag:not([disabled=true]).tag-teal svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-teal:hover, .tag:not([disabled=true]).tag-teal:focus { border-color: var(--color-teal-500); } .tag:not([disabled=true]).tag-teal:hover svg, .tag:not([disabled=true]).tag-teal:hover svg path, .tag:not([disabled=true]).tag-teal:focus svg, .tag:not([disabled=true]).tag-teal:focus svg path { color: currentColor; fill: currentColor; } .tag:not([disabled=true]).tag-teal:active { background-color: var(--color-teal-200); border-color: var(--color-teal-600); } .tag:not([disabled=true]).tag-teal:active svg, .tag:not([disabled=true]).tag-teal:active svg path { color: currentColor; fill: currentColor; } * { font-family: Inter, SF Pro Display, Roboto; box-sizing: border-box; outline: none; margin: 0; } *::after, *::before { box-sizing: inherit; } body, html { background-color: var(--color-content-secondary-inverse); overflow: hidden !important; height: 100%; padding: 0; /* Personalizar el scroll para todos los elementos con scroll */ } body.overlay-opened, html.overlay-opened { touch-action: none !important; position: fixed; width: 100%; } body ::-webkit-scrollbar, html ::-webkit-scrollbar { width: 0.625rem; /* Ancho del scroll vertical */ height: 0.625rem; /* Altura del scroll horizontal */ } body ::-webkit-scrollbar-thumb, html ::-webkit-scrollbar-thumb { background: #c1c1c1; /* Color del scroll */ border-radius: 0.25rem; } body ::-webkit-scrollbar-thumb:hover, html ::-webkit-scrollbar-thumb:hover { background: #c1c1c1; /* Hover del scroll */ } body ::-webkit-scrollbar-track, html ::-webkit-scrollbar-track { box-shadow: 0px -1px 0px 0px #f0f0f0 inset, 0px 1px 0px 0px #e8e8e8 inset; background: #fafafa; /* Fondo del track */ border-radius: 0.25rem; } .center-all { justify-content: center; align-items: center; display: flex; } .rotate-icon { transition: transform 0.3s ease-in-out; } .rotate-icon-activate { transform: rotate(180deg); } .loading-icon { animation: spin 1s linear infinite; } .text-decoration-href { transition: -webkit-text-decoration 0.3s ease-in-out; transition: text-decoration 0.3s ease-in-out; transition: text-decoration 0.3s ease-in-out, -webkit-text-decoration 0.3s ease-in-out; } .text-decoration-href:hover { text-decoration: underline; } .text-cut { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .hide-scroll::-webkit-scrollbar { width: 0; /* Ancho del scroll vertical */ height: 0; /* Altura del scroll horizontal */ } .separator { background-color: var(--color-border-tertiary); height: 1px; width: 100%; } /** Generar propiedades estaticas, se trae del archivo _utilities.scss **/ .visibility-visible { visibility: visible; } .visibility-visible-important { visibility: visible !important; } .visibility-hidden { visibility: hidden; } .visibility-hidden-important { visibility: hidden !important; } .visibility-collapse { visibility: collapse; } .visibility-collapse-important { visibility: collapse !important; } .position-static { position: static; } .position-static-important { position: static !important; } .position-relative { position: relative; } .position-relative-important { position: relative !important; } .position-absolute { position: absolute; } .position-absolute-important { position: absolute !important; } .position-fixed { position: fixed; } .position-fixed-important { position: fixed !important; } .position-sticky { position: sticky; } .position-sticky-important { position: sticky !important; } .bs-solid { border-style: solid; } .bs-solid-important { border-style: solid !important; } .bs-double { border-style: double; } .bs-double-important { border-style: double !important; } .bs-dotted { border-style: dotted; } .bs-dotted-important { border-style: dotted !important; } .bs-dashed { border-style: dashed; } .bs-dashed-important { border-style: dashed !important; } .bs-none { border-style: none; } .bs-none-important { border-style: none !important; } .border-bottom-style-solid { border-bottom-style: solid; } .border-bottom-style-solid-important { border-bottom-style: solid !important; } .border-bottom-style-double { border-bottom-style: double; } .border-bottom-style-double-important { border-bottom-style: double !important; } .border-bottom-style-dotted { border-bottom-style: dotted; } .border-bottom-style-dotted-important { border-bottom-style: dotted !important; } .border-bottom-style-dashed { border-bottom-style: dashed; } .border-bottom-style-dashed-important { border-bottom-style: dashed !important; } .border-bottom-style-none { border-bottom-style: none; } .border-bottom-style-none-important { border-bottom-style: none !important; } .display-flex { display: flex; } .display-flex-important { display: flex !important; } .display-block { display: block; } .display-block-important { display: block !important; } .display-grid { display: grid; } .display-grid-important { display: grid !important; } .display-none { display: none; } .display-none-important { display: none !important; } .flex-wrap-wrap { flex-wrap: wrap; } .flex-wrap-wrap-important { flex-wrap: wrap !important; } .flex-wrap-nowrap { flex-wrap: nowrap; } .flex-wrap-nowrap-important { flex-wrap: nowrap !important; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-between-important { justify-content: space-between !important; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-around-important { justify-content: space-around !important; } .justify-content-flex-start { justify-content: flex-start; } .justify-content-flex-start-important { justify-content: flex-start !important; } .justify-content-flex-end { justify-content: flex-end; } .justify-content-flex-end-important { justify-content: flex-end !important; } .justify-content-center { justify-content: center; } .justify-content-center-important { justify-content: center !important; } .align-items-space-between { align-items: space-between; } .align-items-space-between-important { align-items: space-between !important; } .align-items-space-around { align-items: space-around; } .align-items-space-around-important { align-items: space-around !important; } .align-items-flex-start { align-items: flex-start; } .align-items-flex-start-important { align-items: flex-start !important; } .align-items-flex-end { align-items: flex-end; } .align-items-flex-end-important { align-items: flex-end !important; } .align-items-center { align-items: center; } .align-items-center-important { align-items: center !important; } .flex-direction-column-reverse { flex-direction: column-reverse; } .flex-direction-column-reverse-important { flex-direction: column-reverse !important; } .flex-direction-row-reverse { flex-direction: row-reverse; } .flex-direction-row-reverse-important { flex-direction: row-reverse !important; } .flex-direction-column { flex-direction: column; } .flex-direction-column-important { flex-direction: column !important; } .flex-direction-row { flex-direction: row; } .flex-direction-row-important { flex-direction: row !important; } .text-align-left { text-align: left; } .text-align-left-important { text-align: left !important; } .text-align-center { text-align: center; } .text-align-center-important { text-align: center !important; } .text-align-right { text-align: right; } .text-align-right-important { text-align: right !important; } .text-align-justify { text-align: justify; } .text-align-justify-important { text-align: justify !important; } .text-align-end { text-align: end; } .text-align-end-important { text-align: end !important; } .text-align-start { text-align: start; } .text-align-start-important { text-align: start !important; } .text-overflow-ellipsis { text-overflow: ellipsis; } .text-overflow-ellipsis-important { text-overflow: ellipsis !important; } .white-space-nowrap { white-space: nowrap; } .white-space-nowrap-important { white-space: nowrap !important; } .white-space-break-spaces { white-space: break-spaces; } .white-space-break-spaces-important { white-space: break-spaces !important; } .white-space-pre-wrap { white-space: pre-wrap; } .white-space-pre-wrap-important { white-space: pre-wrap !important; } .white-space-pre-line { white-space: pre-line; } .white-space-pre-line-important { white-space: pre-line !important; } .height-100 { height: 100%; } .height-100-important { height: 100% !important; } .height-75 { height: 75%; } .height-75-important { height: 75% !important; } .height-50 { height: 50%; } .height-50-important { height: 50% !important; } .height-25 { height: 25%; } .height-25-important { height: 25% !important; } .height-100vh { height: 100vh; } .height-100vh-important { height: 100vh !important; } .height-fit-content { height: fit-content; } .height-fit-content-important { height: fit-content !important; } .max-height-100 { max-height: 100%; } .max-height-100-important { max-height: 100% !important; } .max-height-fit-content { max-height: fit-content; } .max-height-fit-content-important { max-height: fit-content !important; } .width-100 { width: 100%; } .width-100-important { width: 100% !important; } .width-75 { width: 75%; } .width-75-important { width: 75% !important; } .width-50 { width: 50%; } .width-50-important { width: 50% !important; } .width-25 { width: 25%; } .width-25-important { width: 25% !important; } .width-100vh { width: 100vh; } .width-100vh-important { width: 100vh !important; } .width-fit-content { width: fit-content; } .width-fit-content-important { width: fit-content !important; } .max-width-100 { max-width: 100%; } .max-width-100-important { max-width: 100% !important; } .max-width-fit-content { max-width: fit-content; } .max-width-fit-content-important { max-width: fit-content !important; } .overflow-auto { overflow: auto; } .overflow-auto-important { overflow: auto !important; } .overflow-hidden { overflow: hidden; } .overflow-hidden-important { overflow: hidden !important; } .overflow-x-auto { overflow-x: auto; } .overflow-x-auto-important { overflow-x: auto !important; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-hidden-important { overflow-x: hidden !important; } .overflow-y-auto { overflow-y: auto; } .overflow-y-auto-important { overflow-y: auto !important; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-hidden-important { overflow-y: hidden !important; } .border-radius-100 { border-radius: 100%; } .border-radius-100-important { border-radius: 100% !important; } .word-break-break-all { word-break: break-all; } .word-break-break-all-important { word-break: break-all !important; } .cursor-pointer { cursor: pointer; } .cursor-pointer-important { cursor: pointer !important; } .text-decoration-underline { text-decoration: underline; } .text-decoration-underline-important { text-decoration: underline !important; } .text-decoration-overline { text-decoration: overline; } .text-decoration-overline-important { text-decoration: overline !important; } .float-left { float: left; } .float-left-important { float: left !important; } .float-right { float: right; } .float-right-important { float: right !important; } .margin-inline-0 { margin-inline: 0; } .margin-inline-0-important { margin-inline: 0 !important; } .margin-inline-auto { margin-inline: auto; } .margin-inline-auto-important { margin-inline: auto !important; } .margin-block-0 { margin-block: 0; } .margin-block-0-important { margin-block: 0 !important; } .margin-block-auto { margin-block: auto; } .margin-block-auto-important { margin-block: auto !important; } .line-height-0 { line-height: 0; } .line-height-0-important { line-height: 0 !important; } /** Generar clases para ocultar elementos dependiendo la resolución, se trae del archivo _mixins.scss **/ @media (width >= 0) and (width < 576px) { .hidden-xs { display: none !important; } } @media (width >= 576px) and (width < 768px) { .hidden-sm { display: none !important; } } @media (width >= 768px) and (width < 992px) { .hidden-md { display: none !important; } } @media (width >= 992px) and (width < 1200px) { .hidden-lg { display: none !important; } } @media (width >= 1200px) { .hidden-xl { display: none !important; } } /** Generar clases globales definidas en el figma como border-radius, padding, border-width, etc... Se trae del archivo _global.scss **/ .border-width-xl { border-width: 0.5rem; } .border-width-xl-important { border-width: 0.5rem !important; } .border-top-width-xl { border-top-width: 0.5rem; } .border-top-width-xl-important { border-top-width: 0.5rem !important; } .border-right-width-xl { border-right-width: 0.5rem; } .border-right-width-xl-important { border-right-width: 0.5rem !important; } .border-bottom-width-xl { border-bottom-width: 0.5rem; } .border-bottom-width-xl-important { border-bottom-width: 0.5rem !important; } .border-left-width-xl { border-left-width: 0.5rem; } .border-left-width-xl-important { border-left-width: 0.5rem !important; } .border-width-l { border-width: 0.25rem; } .border-width-l-important { border-width: 0.25rem !important; } .border-top-width-l { border-top-width: 0.25rem; } .border-top-width-l-important { border-top-width: 0.25rem !important; } .border-right-width-l { border-right-width: 0.25rem; } .border-right-width-l-important { border-right-width: 0.25rem !important; } .border-bottom-width-l { border-bottom-width: 0.25rem; } .border-bottom-width-l-important { border-bottom-width: 0.25rem !important; } .border-left-width-l { border-left-width: 0.25rem; } .border-left-width-l-important { border-left-width: 0.25rem !important; } .border-width-m { border-width: 0.125rem; } .border-width-m-important { border-width: 0.125rem !important; } .border-top-width-m { border-top-width: 0.125rem; } .border-top-width-m-important { border-top-width: 0.125rem !important; } .border-right-width-m { border-right-width: 0.125rem; } .border-right-width-m-important { border-right-width: 0.125rem !important; } .border-bottom-width-m { border-bottom-width: 0.125rem; } .border-bottom-width-m-important { border-bottom-width: 0.125rem !important; } .border-left-width-m { border-left-width: 0.125rem; } .border-left-width-m-important { border-left-width: 0.125rem !important; } .border-width-s { border-width: 0.09375rem; } .border-width-s-important { border-width: 0.09375rem !important; } .border-top-width-s { border-top-width: 0.09375rem; } .border-top-width-s-important { border-top-width: 0.09375rem !important; } .border-right-width-s { border-right-width: 0.09375rem; } .border-right-width-s-important { border-right-width: 0.09375rem !important; } .border-bottom-width-s { border-bottom-width: 0.09375rem; } .border-bottom-width-s-important { border-bottom-width: 0.09375rem !important; } .border-left-width-s { border-left-width: 0.09375rem; } .border-left-width-s-important { border-left-width: 0.09375rem !important; } .border-width-xs { border-width: 0.0625rem; } .border-width-xs-important { border-width: 0.0625rem !important; } .border-top-width-xs { border-top-width: 0.0625rem; } .border-top-width-xs-important { border-top-width: 0.0625rem !important; } .border-right-width-xs { border-right-width: 0.0625rem; } .border-right-width-xs-important { border-right-width: 0.0625rem !important; } .border-bottom-width-xs { border-bottom-width: 0.0625rem; } .border-bottom-width-xs-important { border-bottom-width: 0.0625rem !important; } .border-left-width-xs { border-left-width: 0.0625rem; } .border-left-width-xs-important { border-left-width: 0.0625rem !important; } .border-radius-circle { border-radius: 50%; } .border-radius-circle-important { border-radius: 50% !important; } .border-top-left-radius-circle { border-top-left-radius: 50%; } .border-top-left-radius-circle-important { border-top-left-radius: 50% !important; } .border-top-right-radius-circle { border-top-right-radius: 50%; } .border-top-right-radius-circle-important { border-top-right-radius: 50% !important; } .border-bottom-left-radius-circle { border-bottom-left-radius: 50%; } .border-bottom-left-radius-circle-important { border-bottom-left-radius: 50% !important; } .border-bottom-right-radius-circle { border-bottom-right-radius: 50%; } .border-bottom-right-radius-circle-important { border-bottom-right-radius: 50% !important; } .border-radius-pill { border-radius: 62.4375rem; } .border-radius-pill-important { border-radius: 62.4375rem !important; } .border-top-left-radius-pill { border-top-left-radius: 62.4375rem; } .border-top-left-radius-pill-important { border-top-left-radius: 62.4375rem !important; } .border-top-right-radius-pill { border-top-right-radius: 62.4375rem; } .border-top-right-radius-pill-important { border-top-right-radius: 62.4375rem !important; } .border-bottom-left-radius-pill { border-bottom-left-radius: 62.4375rem; } .border-bottom-left-radius-pill-important { border-bottom-left-radius: 62.4375rem !important; } .border-bottom-right-radius-pill { border-bottom-right-radius: 62.4375rem; } .border-bottom-right-radius-pill-important { border-bottom-right-radius: 62.4375rem !important; } .border-radius-2xl { border-radius: 2rem; } .border-radius-2xl-important { border-radius: 2rem !important; } .border-top-left-radius-2xl { border-top-left-radius: 2rem; } .border-top-left-radius-2xl-important { border-top-left-radius: 2rem !important; } .border-top-right-radius-2xl { border-top-right-radius: 2rem; } .border-top-right-radius-2xl-important { border-top-right-radius: 2rem !important; } .border-bottom-left-radius-2xl { border-bottom-left-radius: 2rem; } .border-bottom-left-radius-2xl-important { border-bottom-left-radius: 2rem !important; } .border-bottom-right-radius-2xl { border-bottom-right-radius: 2rem; } .border-bottom-right-radius-2xl-important { border-bottom-right-radius: 2rem !important; } .border-radius-xl { border-radius: 1.5rem; } .border-radius-xl-important { border-radius: 1.5rem !important; } .border-top-left-radius-xl { border-top-left-radius: 1.5rem; } .border-top-left-radius-xl-important { border-top-left-radius: 1.5rem !important; } .border-top-right-radius-xl { border-top-right-radius: 1.5rem; } .border-top-right-radius-xl-important { border-top-right-radius: 1.5rem !important; } .border-bottom-left-radius-xl { border-bottom-left-radius: 1.5rem; } .border-bottom-left-radius-xl-important { border-bottom-left-radius: 1.5rem !important; } .border-bottom-right-radius-xl { border-bottom-right-radius: 1.5rem; } .border-bottom-right-radius-xl-important { border-bottom-right-radius: 1.5rem !important; } .border-radius-l { border-radius: 1rem; } .border-radius-l-important { border-radius: 1rem !important; } .border-top-left-radius-l { border-top-left-radius: 1rem; } .border-top-left-radius-l-important { border-top-left-radius: 1rem !important; } .border-top-right-radius-l { border-top-right-radius: 1rem; } .border-top-right-radius-l-important { border-top-right-radius: 1rem !important; } .border-bottom-left-radius-l { border-bottom-left-radius: 1rem; } .border-bottom-left-radius-l-important { border-bottom-left-radius: 1rem !important; } .border-bottom-right-radius-l { border-bottom-right-radius: 1rem; } .border-bottom-right-radius-l-important { border-bottom-right-radius: 1rem !important; } .border-radius-m { border-radius: 0.75rem; } .border-radius-m-important { border-radius: 0.75rem !important; } .border-top-left-radius-m { border-top-left-radius: 0.75rem; } .border-top-left-radius-m-important { border-top-left-radius: 0.75rem !important; } .border-top-right-radius-m { border-top-right-radius: 0.75rem; } .border-top-right-radius-m-important { border-top-right-radius: 0.75rem !important; } .border-bottom-left-radius-m { border-bottom-left-radius: 0.75rem; } .border-bottom-left-radius-m-important { border-bottom-left-radius: 0.75rem !important; } .border-bottom-right-radius-m { border-bottom-right-radius: 0.75rem; } .border-bottom-right-radius-m-important { border-bottom-right-radius: 0.75rem !important; } .border-radius-s { border-radius: 0.5rem; } .border-radius-s-important { border-radius: 0.5rem !important; } .border-top-left-radius-s { border-top-left-radius: 0.5rem; } .border-top-left-radius-s-important { border-top-left-radius: 0.5rem !important; } .border-top-right-radius-s { border-top-right-radius: 0.5rem; } .border-top-right-radius-s-important { border-top-right-radius: 0.5rem !important; } .border-bottom-left-radius-s { border-bottom-left-radius: 0.5rem; } .border-bottom-left-radius-s-important { border-bottom-left-radius: 0.5rem !important; } .border-bottom-right-radius-s { border-bottom-right-radius: 0.5rem; } .border-bottom-right-radius-s-important { border-bottom-right-radius: 0.5rem !important; } .border-radius-xs { border-radius: 0.25rem; } .border-radius-xs-important { border-radius: 0.25rem !important; } .border-top-left-radius-xs { border-top-left-radius: 0.25rem; } .border-top-left-radius-xs-important { border-top-left-radius: 0.25rem !important; } .border-top-right-radius-xs { border-top-right-radius: 0.25rem; } .border-top-right-radius-xs-important { border-top-right-radius: 0.25rem !important; } .border-bottom-left-radius-xs { border-bottom-left-radius: 0.25rem; } .border-bottom-left-radius-xs-important { border-bottom-left-radius: 0.25rem !important; } .border-bottom-right-radius-xs { border-bottom-right-radius: 0.25rem; } .border-bottom-right-radius-xs-important { border-bottom-right-radius: 0.25rem !important; } .padding-12xl { padding: 7rem; } .padding-12xl-important { padding: 7rem !important; } .padding-bottom-12xl { padding-bottom: 7rem; } .padding-bottom-12xl-important { padding-bottom: 7rem !important; } .padding-inline-12xl { padding-inline: 7rem; } .padding-inline-12xl-important { padding-inline: 7rem !important; } .padding-right-12xl { padding-right: 7rem; } .padding-right-12xl-important { padding-right: 7rem !important; } .padding-block-12xl { padding-block: 7rem; } .padding-block-12xl-important { padding-block: 7rem !important; } .padding-left-12xl { padding-left: 7rem; } .padding-left-12xl-important { padding-left: 7rem !important; } .padding-top-12xl { padding-top: 7rem; } .padding-top-12xl-important { padding-top: 7rem !important; } .gap-12xl { gap: 7rem; } .gap-12xl-important { gap: 7rem !important; } .column-gap-12xl { column-gap: 7rem; } .column-gap-12xl-important { column-gap: 7rem !important; } .row-gap-12xl { row-gap: 7rem; } .row-gap-12xl-important { row-gap: 7rem !important; } .margin-12xl { margin: 7rem; } .margin-12xl-important { margin: 7rem !important; } .margin-bottom-12xl { margin-bottom: 7rem; } .margin-bottom-12xl-important { margin-bottom: 7rem !important; } .margin-inline-12xl { margin-inline: 7rem; } .margin-inline-12xl-important { margin-inline: 7rem !important; } .margin-right-12xl { margin-right: 7rem; } .margin-right-12xl-important { margin-right: 7rem !important; } .margin-block-12xl { margin-block: 7rem; } .margin-block-12xl-important { margin-block: 7rem !important; } .margin-left-12xl { margin-left: 7rem; } .margin-left-12xl-important { margin-left: 7rem !important; } .margin-top-12xl { margin-top: 7rem; } .margin-top-12xl-important { margin-top: 7rem !important; } .padding-11xl { padding: 6.5rem; } .padding-11xl-important { padding: 6.5rem !important; } .padding-bottom-11xl { padding-bottom: 6.5rem; } .padding-bottom-11xl-important { padding-bottom: 6.5rem !important; } .padding-inline-11xl { padding-inline: 6.5rem; } .padding-inline-11xl-important { padding-inline: 6.5rem !important; } .padding-right-11xl { padding-right: 6.5rem; } .padding-right-11xl-important { padding-right: 6.5rem !important; } .padding-block-11xl { padding-block: 6.5rem; } .padding-block-11xl-important { padding-block: 6.5rem !important; } .padding-left-11xl { padding-left: 6.5rem; } .padding-left-11xl-important { padding-left: 6.5rem !important; } .padding-top-11xl { padding-top: 6.5rem; } .padding-top-11xl-important { padding-top: 6.5rem !important; } .gap-11xl { gap: 6.5rem; } .gap-11xl-important { gap: 6.5rem !important; } .column-gap-11xl { column-gap: 6.5rem; } .column-gap-11xl-important { column-gap: 6.5rem !important; } .row-gap-11xl { row-gap: 6.5rem; } .row-gap-11xl-important { row-gap: 6.5rem !important; } .margin-11xl { margin: 6.5rem; } .margin-11xl-important { margin: 6.5rem !important; } .margin-bottom-11xl { margin-bottom: 6.5rem; } .margin-bottom-11xl-important { margin-bottom: 6.5rem !important; } .margin-inline-11xl { margin-inline: 6.5rem; } .margin-inline-11xl-important { margin-inline: 6.5rem !important; } .margin-right-11xl { margin-right: 6.5rem; } .margin-right-11xl-important { margin-right: 6.5rem !important; } .margin-block-11xl { margin-block: 6.5rem; } .margin-block-11xl-important { margin-block: 6.5rem !important; } .margin-left-11xl { margin-left: 6.5rem; } .margin-left-11xl-important { margin-left: 6.5rem !important; } .margin-top-11xl { margin-top: 6.5rem; } .margin-top-11xl-important { margin-top: 6.5rem !important; } .padding-10xl { padding: 6rem; } .padding-10xl-important { padding: 6rem !important; } .padding-bottom-10xl { padding-bottom: 6rem; } .padding-bottom-10xl-important { padding-bottom: 6rem !important; } .padding-inline-10xl { padding-inline: 6rem; } .padding-inline-10xl-important { padding-inline: 6rem !important; } .padding-right-10xl { padding-right: 6rem; } .padding-right-10xl-important { padding-right: 6rem !important; } .padding-block-10xl { padding-block: 6rem; } .padding-block-10xl-important { padding-block: 6rem !important; } .padding-left-10xl { padding-left: 6rem; } .padding-left-10xl-important { padding-left: 6rem !important; } .padding-top-10xl { padding-top: 6rem; } .padding-top-10xl-important { padding-top: 6rem !important; } .gap-10xl { gap: 6rem; } .gap-10xl-important { gap: 6rem !important; } .column-gap-10xl { column-gap: 6rem; } .column-gap-10xl-important { column-gap: 6rem !important; } .row-gap-10xl { row-gap: 6rem; } .row-gap-10xl-important { row-gap: 6rem !important; } .margin-10xl { margin: 6rem; } .margin-10xl-important { margin: 6rem !important; } .margin-bottom-10xl { margin-bottom: 6rem; } .margin-bottom-10xl-important { margin-bottom: 6rem !important; } .margin-inline-10xl { margin-inline: 6rem; } .margin-inline-10xl-important { margin-inline: 6rem !important; } .margin-right-10xl { margin-right: 6rem; } .margin-right-10xl-important { margin-right: 6rem !important; } .margin-block-10xl { margin-block: 6rem; } .margin-block-10xl-important { margin-block: 6rem !important; } .margin-left-10xl { margin-left: 6rem; } .margin-left-10xl-important { margin-left: 6rem !important; } .margin-top-10xl { margin-top: 6rem; } .margin-top-10xl-important { margin-top: 6rem !important; } .padding-9xl { padding: 5.5rem; } .padding-9xl-important { padding: 5.5rem !important; } .padding-bottom-9xl { padding-bottom: 5.5rem; } .padding-bottom-9xl-important { padding-bottom: 5.5rem !important; } .padding-inline-9xl { padding-inline: 5.5rem; } .padding-inline-9xl-important { padding-inline: 5.5rem !important; } .padding-right-9xl { padding-right: 5.5rem; } .padding-right-9xl-important { padding-right: 5.5rem !important; } .padding-block-9xl { padding-block: 5.5rem; } .padding-block-9xl-important { padding-block: 5.5rem !important; } .padding-left-9xl { padding-left: 5.5rem; } .padding-left-9xl-important { padding-left: 5.5rem !important; } .padding-top-9xl { padding-top: 5.5rem; } .padding-top-9xl-important { padding-top: 5.5rem !important; } .gap-9xl { gap: 5.5rem; } .gap-9xl-important { gap: 5.5rem !important; } .column-gap-9xl { column-gap: 5.5rem; } .column-gap-9xl-important { column-gap: 5.5rem !important; } .row-gap-9xl { row-gap: 5.5rem; } .row-gap-9xl-important { row-gap: 5.5rem !important; } .margin-9xl { margin: 5.5rem; } .margin-9xl-important { margin: 5.5rem !important; } .margin-bottom-9xl { margin-bottom: 5.5rem; } .margin-bottom-9xl-important { margin-bottom: 5.5rem !important; } .margin-inline-9xl { margin-inline: 5.5rem; } .margin-inline-9xl-important { margin-inline: 5.5rem !important; } .margin-right-9xl { margin-right: 5.5rem; } .margin-right-9xl-important { margin-right: 5.5rem !important; } .margin-block-9xl { margin-block: 5.5rem; } .margin-block-9xl-important { margin-block: 5.5rem !important; } .margin-left-9xl { margin-left: 5.5rem; } .margin-left-9xl-important { margin-left: 5.5rem !important; } .margin-top-9xl { margin-top: 5.5rem; } .margin-top-9xl-important { margin-top: 5.5rem !important; } .padding-8xl { padding: 5rem; } .padding-8xl-important { padding: 5rem !important; } .padding-bottom-8xl { padding-bottom: 5rem; } .padding-bottom-8xl-important { padding-bottom: 5rem !important; } .padding-inline-8xl { padding-inline: 5rem; } .padding-inline-8xl-important { padding-inline: 5rem !important; } .padding-right-8xl { padding-right: 5rem; } .padding-right-8xl-important { padding-right: 5rem !important; } .padding-block-8xl { padding-block: 5rem; } .padding-block-8xl-important { padding-block: 5rem !important; } .padding-left-8xl { padding-left: 5rem; } .padding-left-8xl-important { padding-left: 5rem !important; } .padding-top-8xl { padding-top: 5rem; } .padding-top-8xl-important { padding-top: 5rem !important; } .gap-8xl { gap: 5rem; } .gap-8xl-important { gap: 5rem !important; } .column-gap-8xl { column-gap: 5rem; } .column-gap-8xl-important { column-gap: 5rem !important; } .row-gap-8xl { row-gap: 5rem; } .row-gap-8xl-important { row-gap: 5rem !important; } .margin-8xl { margin: 5rem; } .margin-8xl-important { margin: 5rem !important; } .margin-bottom-8xl { margin-bottom: 5rem; } .margin-bottom-8xl-important { margin-bottom: 5rem !important; } .margin-inline-8xl { margin-inline: 5rem; } .margin-inline-8xl-important { margin-inline: 5rem !important; } .margin-right-8xl { margin-right: 5rem; } .margin-right-8xl-important { margin-right: 5rem !important; } .margin-block-8xl { margin-block: 5rem; } .margin-block-8xl-important { margin-block: 5rem !important; } .margin-left-8xl { margin-left: 5rem; } .margin-left-8xl-important { margin-left: 5rem !important; } .margin-top-8xl { margin-top: 5rem; } .margin-top-8xl-important { margin-top: 5rem !important; } .padding-7xl { padding: 4.5rem; } .padding-7xl-important { padding: 4.5rem !important; } .padding-bottom-7xl { padding-bottom: 4.5rem; } .padding-bottom-7xl-important { padding-bottom: 4.5rem !important; } .padding-inline-7xl { padding-inline: 4.5rem; } .padding-inline-7xl-important { padding-inline: 4.5rem !important; } .padding-right-7xl { padding-right: 4.5rem; } .padding-right-7xl-important { padding-right: 4.5rem !important; } .padding-block-7xl { padding-block: 4.5rem; } .padding-block-7xl-important { padding-block: 4.5rem !important; } .padding-left-7xl { padding-left: 4.5rem; } .padding-left-7xl-important { padding-left: 4.5rem !important; } .padding-top-7xl { padding-top: 4.5rem; } .padding-top-7xl-important { padding-top: 4.5rem !important; } .gap-7xl { gap: 4.5rem; } .gap-7xl-important { gap: 4.5rem !important; } .column-gap-7xl { column-gap: 4.5rem; } .column-gap-7xl-important { column-gap: 4.5rem !important; } .row-gap-7xl { row-gap: 4.5rem; } .row-gap-7xl-important { row-gap: 4.5rem !important; } .margin-7xl { margin: 4.5rem; } .margin-7xl-important { margin: 4.5rem !important; } .margin-bottom-7xl { margin-bottom: 4.5rem; } .margin-bottom-7xl-important { margin-bottom: 4.5rem !important; } .margin-inline-7xl { margin-inline: 4.5rem; } .margin-inline-7xl-important { margin-inline: 4.5rem !important; } .margin-right-7xl { margin-right: 4.5rem; } .margin-right-7xl-important { margin-right: 4.5rem !important; } .margin-block-7xl { margin-block: 4.5rem; } .margin-block-7xl-important { margin-block: 4.5rem !important; } .margin-left-7xl { margin-left: 4.5rem; } .margin-left-7xl-important { margin-left: 4.5rem !important; } .margin-top-7xl { margin-top: 4.5rem; } .margin-top-7xl-important { margin-top: 4.5rem !important; } .padding-6xl { padding: 4rem; } .padding-6xl-important { padding: 4rem !important; } .padding-bottom-6xl { padding-bottom: 4rem; } .padding-bottom-6xl-important { padding-bottom: 4rem !important; } .padding-inline-6xl { padding-inline: 4rem; } .padding-inline-6xl-important { padding-inline: 4rem !important; } .padding-right-6xl { padding-right: 4rem; } .padding-right-6xl-important { padding-right: 4rem !important; } .padding-block-6xl { padding-block: 4rem; } .padding-block-6xl-important { padding-block: 4rem !important; } .padding-left-6xl { padding-left: 4rem; } .padding-left-6xl-important { padding-left: 4rem !important; } .padding-top-6xl { padding-top: 4rem; } .padding-top-6xl-important { padding-top: 4rem !important; } .gap-6xl { gap: 4rem; } .gap-6xl-important { gap: 4rem !important; } .column-gap-6xl { column-gap: 4rem; } .column-gap-6xl-important { column-gap: 4rem !important; } .row-gap-6xl { row-gap: 4rem; } .row-gap-6xl-important { row-gap: 4rem !important; } .margin-6xl { margin: 4rem; } .margin-6xl-important { margin: 4rem !important; } .margin-bottom-6xl { margin-bottom: 4rem; } .margin-bottom-6xl-important { margin-bottom: 4rem !important; } .margin-inline-6xl { margin-inline: 4rem; } .margin-inline-6xl-important { margin-inline: 4rem !important; } .margin-right-6xl { margin-right: 4rem; } .margin-right-6xl-important { margin-right: 4rem !important; } .margin-block-6xl { margin-block: 4rem; } .margin-block-6xl-important { margin-block: 4rem !important; } .margin-left-6xl { margin-left: 4rem; } .margin-left-6xl-important { margin-left: 4rem !important; } .margin-top-6xl { margin-top: 4rem; } .margin-top-6xl-important { margin-top: 4rem !important; } .padding-5xl { padding: 3.5rem; } .padding-5xl-important { padding: 3.5rem !important; } .padding-bottom-5xl { padding-bottom: 3.5rem; } .padding-bottom-5xl-important { padding-bottom: 3.5rem !important; } .padding-inline-5xl { padding-inline: 3.5rem; } .padding-inline-5xl-important { padding-inline: 3.5rem !important; } .padding-right-5xl { padding-right: 3.5rem; } .padding-right-5xl-important { padding-right: 3.5rem !important; } .padding-block-5xl { padding-block: 3.5rem; } .padding-block-5xl-important { padding-block: 3.5rem !important; } .padding-left-5xl { padding-left: 3.5rem; } .padding-left-5xl-important { padding-left: 3.5rem !important; } .padding-top-5xl { padding-top: 3.5rem; } .padding-top-5xl-important { padding-top: 3.5rem !important; } .gap-5xl { gap: 3.5rem; } .gap-5xl-important { gap: 3.5rem !important; } .column-gap-5xl { column-gap: 3.5rem; } .column-gap-5xl-important { column-gap: 3.5rem !important; } .row-gap-5xl { row-gap: 3.5rem; } .row-gap-5xl-important { row-gap: 3.5rem !important; } .margin-5xl { margin: 3.5rem; } .margin-5xl-important { margin: 3.5rem !important; } .margin-bottom-5xl { margin-bottom: 3.5rem; } .margin-bottom-5xl-important { margin-bottom: 3.5rem !important; } .margin-inline-5xl { margin-inline: 3.5rem; } .margin-inline-5xl-important { margin-inline: 3.5rem !important; } .margin-right-5xl { margin-right: 3.5rem; } .margin-right-5xl-important { margin-right: 3.5rem !important; } .margin-block-5xl { margin-block: 3.5rem; } .margin-block-5xl-important { margin-block: 3.5rem !important; } .margin-left-5xl { margin-left: 3.5rem; } .margin-left-5xl-important { margin-left: 3.5rem !important; } .margin-top-5xl { margin-top: 3.5rem; } .margin-top-5xl-important { margin-top: 3.5rem !important; } .padding-4xl { padding: 3rem; } .padding-4xl-important { padding: 3rem !important; } .padding-bottom-4xl { padding-bottom: 3rem; } .padding-bottom-4xl-important { padding-bottom: 3rem !important; } .padding-inline-4xl { padding-inline: 3rem; } .padding-inline-4xl-important { padding-inline: 3rem !important; } .padding-right-4xl { padding-right: 3rem; } .padding-right-4xl-important { padding-right: 3rem !important; } .padding-block-4xl { padding-block: 3rem; } .padding-block-4xl-important { padding-block: 3rem !important; } .padding-left-4xl { padding-left: 3rem; } .padding-left-4xl-important { padding-left: 3rem !important; } .padding-top-4xl { padding-top: 3rem; } .padding-top-4xl-important { padding-top: 3rem !important; } .gap-4xl { gap: 3rem; } .gap-4xl-important { gap: 3rem !important; } .column-gap-4xl { column-gap: 3rem; } .column-gap-4xl-important { column-gap: 3rem !important; } .row-gap-4xl { row-gap: 3rem; } .row-gap-4xl-important { row-gap: 3rem !important; } .margin-4xl { margin: 3rem; } .margin-4xl-important { margin: 3rem !important; } .margin-bottom-4xl { margin-bottom: 3rem; } .margin-bottom-4xl-important { margin-bottom: 3rem !important; } .margin-inline-4xl { margin-inline: 3rem; } .margin-inline-4xl-important { margin-inline: 3rem !important; } .margin-right-4xl { margin-right: 3rem; } .margin-right-4xl-important { margin-right: 3rem !important; } .margin-block-4xl { margin-block: 3rem; } .margin-block-4xl-important { margin-block: 3rem !important; } .margin-left-4xl { margin-left: 3rem; } .margin-left-4xl-important { margin-left: 3rem !important; } .margin-top-4xl { margin-top: 3rem; } .margin-top-4xl-important { margin-top: 3rem !important; } .padding-3xl { padding: 2.5rem; } .padding-3xl-important { padding: 2.5rem !important; } .padding-bottom-3xl { padding-bottom: 2.5rem; } .padding-bottom-3xl-important { padding-bottom: 2.5rem !important; } .padding-inline-3xl { padding-inline: 2.5rem; } .padding-inline-3xl-important { padding-inline: 2.5rem !important; } .padding-right-3xl { padding-right: 2.5rem; } .padding-right-3xl-important { padding-right: 2.5rem !important; } .padding-block-3xl { padding-block: 2.5rem; } .padding-block-3xl-important { padding-block: 2.5rem !important; } .padding-left-3xl { padding-left: 2.5rem; } .padding-left-3xl-important { padding-left: 2.5rem !important; } .padding-top-3xl { padding-top: 2.5rem; } .padding-top-3xl-important { padding-top: 2.5rem !important; } .gap-3xl { gap: 2.5rem; } .gap-3xl-important { gap: 2.5rem !important; } .column-gap-3xl { column-gap: 2.5rem; } .column-gap-3xl-important { column-gap: 2.5rem !important; } .row-gap-3xl { row-gap: 2.5rem; } .row-gap-3xl-important { row-gap: 2.5rem !important; } .margin-3xl { margin: 2.5rem; } .margin-3xl-important { margin: 2.5rem !important; } .margin-bottom-3xl { margin-bottom: 2.5rem; } .margin-bottom-3xl-important { margin-bottom: 2.5rem !important; } .margin-inline-3xl { margin-inline: 2.5rem; } .margin-inline-3xl-important { margin-inline: 2.5rem !important; } .margin-right-3xl { margin-right: 2.5rem; } .margin-right-3xl-important { margin-right: 2.5rem !important; } .margin-block-3xl { margin-block: 2.5rem; } .margin-block-3xl-important { margin-block: 2.5rem !important; } .margin-left-3xl { margin-left: 2.5rem; } .margin-left-3xl-important { margin-left: 2.5rem !important; } .margin-top-3xl { margin-top: 2.5rem; } .margin-top-3xl-important { margin-top: 2.5rem !important; } .padding-2xl { padding: 2rem; } .padding-2xl-important { padding: 2rem !important; } .padding-bottom-2xl { padding-bottom: 2rem; } .padding-bottom-2xl-important { padding-bottom: 2rem !important; } .padding-inline-2xl { padding-inline: 2rem; } .padding-inline-2xl-important { padding-inline: 2rem !important; } .padding-right-2xl { padding-right: 2rem; } .padding-right-2xl-important { padding-right: 2rem !important; } .padding-block-2xl { padding-block: 2rem; } .padding-block-2xl-important { padding-block: 2rem !important; } .padding-left-2xl { padding-left: 2rem; } .padding-left-2xl-important { padding-left: 2rem !important; } .padding-top-2xl { padding-top: 2rem; } .padding-top-2xl-important { padding-top: 2rem !important; } .gap-2xl { gap: 2rem; } .gap-2xl-important { gap: 2rem !important; } .column-gap-2xl { column-gap: 2rem; } .column-gap-2xl-important { column-gap: 2rem !important; } .row-gap-2xl { row-gap: 2rem; } .row-gap-2xl-important { row-gap: 2rem !important; } .margin-2xl { margin: 2rem; } .margin-2xl-important { margin: 2rem !important; } .margin-bottom-2xl { margin-bottom: 2rem; } .margin-bottom-2xl-important { margin-bottom: 2rem !important; } .margin-inline-2xl { margin-inline: 2rem; } .margin-inline-2xl-important { margin-inline: 2rem !important; } .margin-right-2xl { margin-right: 2rem; } .margin-right-2xl-important { margin-right: 2rem !important; } .margin-block-2xl { margin-block: 2rem; } .margin-block-2xl-important { margin-block: 2rem !important; } .margin-left-2xl { margin-left: 2rem; } .margin-left-2xl-important { margin-left: 2rem !important; } .margin-top-2xl { margin-top: 2rem; } .margin-top-2xl-important { margin-top: 2rem !important; } .padding-xl { padding: 1.5rem; } .padding-xl-important { padding: 1.5rem !important; } .padding-bottom-xl { padding-bottom: 1.5rem; } .padding-bottom-xl-important { padding-bottom: 1.5rem !important; } .padding-inline-xl { padding-inline: 1.5rem; } .padding-inline-xl-important { padding-inline: 1.5rem !important; } .padding-right-xl { padding-right: 1.5rem; } .padding-right-xl-important { padding-right: 1.5rem !important; } .padding-block-xl { padding-block: 1.5rem; } .padding-block-xl-important { padding-block: 1.5rem !important; } .padding-left-xl { padding-left: 1.5rem; } .padding-left-xl-important { padding-left: 1.5rem !important; } .padding-top-xl { padding-top: 1.5rem; } .padding-top-xl-important { padding-top: 1.5rem !important; } .gap-xl { gap: 1.5rem; } .gap-xl-important { gap: 1.5rem !important; } .column-gap-xl { column-gap: 1.5rem; } .column-gap-xl-important { column-gap: 1.5rem !important; } .row-gap-xl { row-gap: 1.5rem; } .row-gap-xl-important { row-gap: 1.5rem !important; } .margin-xl { margin: 1.5rem; } .margin-xl-important { margin: 1.5rem !important; } .margin-bottom-xl { margin-bottom: 1.5rem; } .margin-bottom-xl-important { margin-bottom: 1.5rem !important; } .margin-inline-xl { margin-inline: 1.5rem; } .margin-inline-xl-important { margin-inline: 1.5rem !important; } .margin-right-xl { margin-right: 1.5rem; } .margin-right-xl-important { margin-right: 1.5rem !important; } .margin-block-xl { margin-block: 1.5rem; } .margin-block-xl-important { margin-block: 1.5rem !important; } .margin-left-xl { margin-left: 1.5rem; } .margin-left-xl-important { margin-left: 1.5rem !important; } .margin-top-xl { margin-top: 1.5rem; } .margin-top-xl-important { margin-top: 1.5rem !important; } .padding-l { padding: 1rem; } .padding-l-important { padding: 1rem !important; } .padding-bottom-l { padding-bottom: 1rem; } .padding-bottom-l-important { padding-bottom: 1rem !important; } .padding-inline-l { padding-inline: 1rem; } .padding-inline-l-important { padding-inline: 1rem !important; } .padding-right-l { padding-right: 1rem; } .padding-right-l-important { padding-right: 1rem !important; } .padding-block-l { padding-block: 1rem; } .padding-block-l-important { padding-block: 1rem !important; } .padding-left-l { padding-left: 1rem; } .padding-left-l-important { padding-left: 1rem !important; } .padding-top-l { padding-top: 1rem; } .padding-top-l-important { padding-top: 1rem !important; } .gap-l { gap: 1rem; } .gap-l-important { gap: 1rem !important; } .column-gap-l { column-gap: 1rem; } .column-gap-l-important { column-gap: 1rem !important; } .row-gap-l { row-gap: 1rem; } .row-gap-l-important { row-gap: 1rem !important; } .margin-l { margin: 1rem; } .margin-l-important { margin: 1rem !important; } .margin-bottom-l { margin-bottom: 1rem; } .margin-bottom-l-important { margin-bottom: 1rem !important; } .margin-inline-l { margin-inline: 1rem; } .margin-inline-l-important { margin-inline: 1rem !important; } .margin-right-l { margin-right: 1rem; } .margin-right-l-important { margin-right: 1rem !important; } .margin-block-l { margin-block: 1rem; } .margin-block-l-important { margin-block: 1rem !important; } .margin-left-l { margin-left: 1rem; } .margin-left-l-important { margin-left: 1rem !important; } .margin-top-l { margin-top: 1rem; } .margin-top-l-important { margin-top: 1rem !important; } .padding-m { padding: 0.75rem; } .padding-m-important { padding: 0.75rem !important; } .padding-bottom-m { padding-bottom: 0.75rem; } .padding-bottom-m-important { padding-bottom: 0.75rem !important; } .padding-inline-m { padding-inline: 0.75rem; } .padding-inline-m-important { padding-inline: 0.75rem !important; } .padding-right-m { padding-right: 0.75rem; } .padding-right-m-important { padding-right: 0.75rem !important; } .padding-block-m { padding-block: 0.75rem; } .padding-block-m-important { padding-block: 0.75rem !important; } .padding-left-m { padding-left: 0.75rem; } .padding-left-m-important { padding-left: 0.75rem !important; } .padding-top-m { padding-top: 0.75rem; } .padding-top-m-important { padding-top: 0.75rem !important; } .gap-m { gap: 0.75rem; } .gap-m-important { gap: 0.75rem !important; } .column-gap-m { column-gap: 0.75rem; } .column-gap-m-important { column-gap: 0.75rem !important; } .row-gap-m { row-gap: 0.75rem; } .row-gap-m-important { row-gap: 0.75rem !important; } .margin-m { margin: 0.75rem; } .margin-m-important { margin: 0.75rem !important; } .margin-bottom-m { margin-bottom: 0.75rem; } .margin-bottom-m-important { margin-bottom: 0.75rem !important; } .margin-inline-m { margin-inline: 0.75rem; } .margin-inline-m-important { margin-inline: 0.75rem !important; } .margin-right-m { margin-right: 0.75rem; } .margin-right-m-important { margin-right: 0.75rem !important; } .margin-block-m { margin-block: 0.75rem; } .margin-block-m-important { margin-block: 0.75rem !important; } .margin-left-m { margin-left: 0.75rem; } .margin-left-m-important { margin-left: 0.75rem !important; } .margin-top-m { margin-top: 0.75rem; } .margin-top-m-important { margin-top: 0.75rem !important; } .padding-s { padding: 0.5rem; } .padding-s-important { padding: 0.5rem !important; } .padding-bottom-s { padding-bottom: 0.5rem; } .padding-bottom-s-important { padding-bottom: 0.5rem !important; } .padding-inline-s { padding-inline: 0.5rem; } .padding-inline-s-important { padding-inline: 0.5rem !important; } .padding-right-s { padding-right: 0.5rem; } .padding-right-s-important { padding-right: 0.5rem !important; } .padding-block-s { padding-block: 0.5rem; } .padding-block-s-important { padding-block: 0.5rem !important; } .padding-left-s { padding-left: 0.5rem; } .padding-left-s-important { padding-left: 0.5rem !important; } .padding-top-s { padding-top: 0.5rem; } .padding-top-s-important { padding-top: 0.5rem !important; } .gap-s { gap: 0.5rem; } .gap-s-important { gap: 0.5rem !important; } .column-gap-s { column-gap: 0.5rem; } .column-gap-s-important { column-gap: 0.5rem !important; } .row-gap-s { row-gap: 0.5rem; } .row-gap-s-important { row-gap: 0.5rem !important; } .margin-s { margin: 0.5rem; } .margin-s-important { margin: 0.5rem !important; } .margin-bottom-s { margin-bottom: 0.5rem; } .margin-bottom-s-important { margin-bottom: 0.5rem !important; } .margin-inline-s { margin-inline: 0.5rem; } .margin-inline-s-important { margin-inline: 0.5rem !important; } .margin-right-s { margin-right: 0.5rem; } .margin-right-s-important { margin-right: 0.5rem !important; } .margin-block-s { margin-block: 0.5rem; } .margin-block-s-important { margin-block: 0.5rem !important; } .margin-left-s { margin-left: 0.5rem; } .margin-left-s-important { margin-left: 0.5rem !important; } .margin-top-s { margin-top: 0.5rem; } .margin-top-s-important { margin-top: 0.5rem !important; } .padding-xs { padding: 0.25rem; } .padding-xs-important { padding: 0.25rem !important; } .padding-bottom-xs { padding-bottom: 0.25rem; } .padding-bottom-xs-important { padding-bottom: 0.25rem !important; } .padding-inline-xs { padding-inline: 0.25rem; } .padding-inline-xs-important { padding-inline: 0.25rem !important; } .padding-right-xs { padding-right: 0.25rem; } .padding-right-xs-important { padding-right: 0.25rem !important; } .padding-block-xs { padding-block: 0.25rem; } .padding-block-xs-important { padding-block: 0.25rem !important; } .padding-left-xs { padding-left: 0.25rem; } .padding-left-xs-important { padding-left: 0.25rem !important; } .padding-top-xs { padding-top: 0.25rem; } .padding-top-xs-important { padding-top: 0.25rem !important; } .gap-xs { gap: 0.25rem; } .gap-xs-important { gap: 0.25rem !important; } .column-gap-xs { column-gap: 0.25rem; } .column-gap-xs-important { column-gap: 0.25rem !important; } .row-gap-xs { row-gap: 0.25rem; } .row-gap-xs-important { row-gap: 0.25rem !important; } .margin-xs { margin: 0.25rem; } .margin-xs-important { margin: 0.25rem !important; } .margin-bottom-xs { margin-bottom: 0.25rem; } .margin-bottom-xs-important { margin-bottom: 0.25rem !important; } .margin-inline-xs { margin-inline: 0.25rem; } .margin-inline-xs-important { margin-inline: 0.25rem !important; } .margin-right-xs { margin-right: 0.25rem; } .margin-right-xs-important { margin-right: 0.25rem !important; } .margin-block-xs { margin-block: 0.25rem; } .margin-block-xs-important { margin-block: 0.25rem !important; } .margin-left-xs { margin-left: 0.25rem; } .margin-left-xs-important { margin-left: 0.25rem !important; } .margin-top-xs { margin-top: 0.25rem; } .margin-top-xs-important { margin-top: 0.25rem !important; } .padding-2xs { padding: 0.125rem; } .padding-2xs-important { padding: 0.125rem !important; } .padding-bottom-2xs { padding-bottom: 0.125rem; } .padding-bottom-2xs-important { padding-bottom: 0.125rem !important; } .padding-inline-2xs { padding-inline: 0.125rem; } .padding-inline-2xs-important { padding-inline: 0.125rem !important; } .padding-right-2xs { padding-right: 0.125rem; } .padding-right-2xs-important { padding-right: 0.125rem !important; } .padding-block-2xs { padding-block: 0.125rem; } .padding-block-2xs-important { padding-block: 0.125rem !important; } .padding-left-2xs { padding-left: 0.125rem; } .padding-left-2xs-important { padding-left: 0.125rem !important; } .padding-top-2xs { padding-top: 0.125rem; } .padding-top-2xs-important { padding-top: 0.125rem !important; } .gap-2xs { gap: 0.125rem; } .gap-2xs-important { gap: 0.125rem !important; } .column-gap-2xs { column-gap: 0.125rem; } .column-gap-2xs-important { column-gap: 0.125rem !important; } .row-gap-2xs { row-gap: 0.125rem; } .row-gap-2xs-important { row-gap: 0.125rem !important; } .margin-2xs { margin: 0.125rem; } .margin-2xs-important { margin: 0.125rem !important; } .margin-bottom-2xs { margin-bottom: 0.125rem; } .margin-bottom-2xs-important { margin-bottom: 0.125rem !important; } .margin-inline-2xs { margin-inline: 0.125rem; } .margin-inline-2xs-important { margin-inline: 0.125rem !important; } .margin-right-2xs { margin-right: 0.125rem; } .margin-right-2xs-important { margin-right: 0.125rem !important; } .margin-block-2xs { margin-block: 0.125rem; } .margin-block-2xs-important { margin-block: 0.125rem !important; } .margin-left-2xs { margin-left: 0.125rem; } .margin-left-2xs-important { margin-left: 0.125rem !important; } .margin-top-2xs { margin-top: 0.125rem; } .margin-top-2xs-important { margin-top: 0.125rem !important; } .font-size-10xl { font-size: 4.5rem; } .font-size-10xl-important { font-size: 4.5rem !important; } .width-10xl { width: 4.5rem; } .width-10xl-important { width: 4.5rem !important; } .height-10xl { height: 4.5rem; } .height-10xl-important { height: 4.5rem !important; } .min-width-10xl { min-width: 4.5rem; } .min-width-10xl-important { min-width: 4.5rem !important; } .min-height-10xl { min-height: 4.5rem; } .min-height-10xl-important { min-height: 4.5rem !important; } .max-width-10xl { max-width: 4.5rem; } .max-width-10xl-important { max-width: 4.5rem !important; } .max-height-10xl { max-height: 4.5rem; } .max-height-10xl-important { max-height: 4.5rem !important; } .font-size-9xl { font-size: 4rem; } .font-size-9xl-important { font-size: 4rem !important; } .width-9xl { width: 4rem; } .width-9xl-important { width: 4rem !important; } .height-9xl { height: 4rem; } .height-9xl-important { height: 4rem !important; } .min-width-9xl { min-width: 4rem; } .min-width-9xl-important { min-width: 4rem !important; } .min-height-9xl { min-height: 4rem; } .min-height-9xl-important { min-height: 4rem !important; } .max-width-9xl { max-width: 4rem; } .max-width-9xl-important { max-width: 4rem !important; } .max-height-9xl { max-height: 4rem; } .max-height-9xl-important { max-height: 4rem !important; } .font-size-8xl { font-size: 3.5rem; } .font-size-8xl-important { font-size: 3.5rem !important; } .width-8xl { width: 3.5rem; } .width-8xl-important { width: 3.5rem !important; } .height-8xl { height: 3.5rem; } .height-8xl-important { height: 3.5rem !important; } .min-width-8xl { min-width: 3.5rem; } .min-width-8xl-important { min-width: 3.5rem !important; } .min-height-8xl { min-height: 3.5rem; } .min-height-8xl-important { min-height: 3.5rem !important; } .max-width-8xl { max-width: 3.5rem; } .max-width-8xl-important { max-width: 3.5rem !important; } .max-height-8xl { max-height: 3.5rem; } .max-height-8xl-important { max-height: 3.5rem !important; } .font-size-7xl { font-size: 3rem; } .font-size-7xl-important { font-size: 3rem !important; } .width-7xl { width: 3rem; } .width-7xl-important { width: 3rem !important; } .height-7xl { height: 3rem; } .height-7xl-important { height: 3rem !important; } .min-width-7xl { min-width: 3rem; } .min-width-7xl-important { min-width: 3rem !important; } .min-height-7xl { min-height: 3rem; } .min-height-7xl-important { min-height: 3rem !important; } .max-width-7xl { max-width: 3rem; } .max-width-7xl-important { max-width: 3rem !important; } .max-height-7xl { max-height: 3rem; } .max-height-7xl-important { max-height: 3rem !important; } .font-size-6xl { font-size: 2.5rem; } .font-size-6xl-important { font-size: 2.5rem !important; } .width-6xl { width: 2.5rem; } .width-6xl-important { width: 2.5rem !important; } .height-6xl { height: 2.5rem; } .height-6xl-important { height: 2.5rem !important; } .min-width-6xl { min-width: 2.5rem; } .min-width-6xl-important { min-width: 2.5rem !important; } .min-height-6xl { min-height: 2.5rem; } .min-height-6xl-important { min-height: 2.5rem !important; } .max-width-6xl { max-width: 2.5rem; } .max-width-6xl-important { max-width: 2.5rem !important; } .max-height-6xl { max-height: 2.5rem; } .max-height-6xl-important { max-height: 2.5rem !important; } .font-size-5xl { font-size: 2rem; } .font-size-5xl-important { font-size: 2rem !important; } .width-5xl { width: 2rem; } .width-5xl-important { width: 2rem !important; } .height-5xl { height: 2rem; } .height-5xl-important { height: 2rem !important; } .min-width-5xl { min-width: 2rem; } .min-width-5xl-important { min-width: 2rem !important; } .min-height-5xl { min-height: 2rem; } .min-height-5xl-important { min-height: 2rem !important; } .max-width-5xl { max-width: 2rem; } .max-width-5xl-important { max-width: 2rem !important; } .max-height-5xl { max-height: 2rem; } .max-height-5xl-important { max-height: 2rem !important; } .font-size-4xl { font-size: 1.75rem; } .font-size-4xl-important { font-size: 1.75rem !important; } .width-4xl { width: 1.75rem; } .width-4xl-important { width: 1.75rem !important; } .height-4xl { height: 1.75rem; } .height-4xl-important { height: 1.75rem !important; } .min-width-4xl { min-width: 1.75rem; } .min-width-4xl-important { min-width: 1.75rem !important; } .min-height-4xl { min-height: 1.75rem; } .min-height-4xl-important { min-height: 1.75rem !important; } .max-width-4xl { max-width: 1.75rem; } .max-width-4xl-important { max-width: 1.75rem !important; } .max-height-4xl { max-height: 1.75rem; } .max-height-4xl-important { max-height: 1.75rem !important; } .font-size-3xl { font-size: 1.5rem; } .font-size-3xl-important { font-size: 1.5rem !important; } .width-3xl { width: 1.5rem; } .width-3xl-important { width: 1.5rem !important; } .height-3xl { height: 1.5rem; } .height-3xl-important { height: 1.5rem !important; } .min-width-3xl { min-width: 1.5rem; } .min-width-3xl-important { min-width: 1.5rem !important; } .min-height-3xl { min-height: 1.5rem; } .min-height-3xl-important { min-height: 1.5rem !important; } .max-width-3xl { max-width: 1.5rem; } .max-width-3xl-important { max-width: 1.5rem !important; } .max-height-3xl { max-height: 1.5rem; } .max-height-3xl-important { max-height: 1.5rem !important; } .font-size-2xl { font-size: 1.25rem; } .font-size-2xl-important { font-size: 1.25rem !important; } .width-2xl { width: 1.25rem; } .width-2xl-important { width: 1.25rem !important; } .height-2xl { height: 1.25rem; } .height-2xl-important { height: 1.25rem !important; } .min-width-2xl { min-width: 1.25rem; } .min-width-2xl-important { min-width: 1.25rem !important; } .min-height-2xl { min-height: 1.25rem; } .min-height-2xl-important { min-height: 1.25rem !important; } .max-width-2xl { max-width: 1.25rem; } .max-width-2xl-important { max-width: 1.25rem !important; } .max-height-2xl { max-height: 1.25rem; } .max-height-2xl-important { max-height: 1.25rem !important; } .font-size-xl { font-size: 1.125rem; } .font-size-xl-important { font-size: 1.125rem !important; } .width-xl { width: 1.125rem; } .width-xl-important { width: 1.125rem !important; } .height-xl { height: 1.125rem; } .height-xl-important { height: 1.125rem !important; } .min-width-xl { min-width: 1.125rem; } .min-width-xl-important { min-width: 1.125rem !important; } .min-height-xl { min-height: 1.125rem; } .min-height-xl-important { min-height: 1.125rem !important; } .max-width-xl { max-width: 1.125rem; } .max-width-xl-important { max-width: 1.125rem !important; } .max-height-xl { max-height: 1.125rem; } .max-height-xl-important { max-height: 1.125rem !important; } .font-size-l { font-size: 1rem; } .font-size-l-important { font-size: 1rem !important; } .width-l { width: 1rem; } .width-l-important { width: 1rem !important; } .height-l { height: 1rem; } .height-l-important { height: 1rem !important; } .min-width-l { min-width: 1rem; } .min-width-l-important { min-width: 1rem !important; } .min-height-l { min-height: 1rem; } .min-height-l-important { min-height: 1rem !important; } .max-width-l { max-width: 1rem; } .max-width-l-important { max-width: 1rem !important; } .max-height-l { max-height: 1rem; } .max-height-l-important { max-height: 1rem !important; } .font-size-m { font-size: 0.875rem; } .font-size-m-important { font-size: 0.875rem !important; } .width-m { width: 0.875rem; } .width-m-important { width: 0.875rem !important; } .height-m { height: 0.875rem; } .height-m-important { height: 0.875rem !important; } .min-width-m { min-width: 0.875rem; } .min-width-m-important { min-width: 0.875rem !important; } .min-height-m { min-height: 0.875rem; } .min-height-m-important { min-height: 0.875rem !important; } .max-width-m { max-width: 0.875rem; } .max-width-m-important { max-width: 0.875rem !important; } .max-height-m { max-height: 0.875rem; } .max-height-m-important { max-height: 0.875rem !important; } .font-size-s { font-size: 0.75rem; } .font-size-s-important { font-size: 0.75rem !important; } .width-s { width: 0.75rem; } .width-s-important { width: 0.75rem !important; } .height-s { height: 0.75rem; } .height-s-important { height: 0.75rem !important; } .min-width-s { min-width: 0.75rem; } .min-width-s-important { min-width: 0.75rem !important; } .min-height-s { min-height: 0.75rem; } .min-height-s-important { min-height: 0.75rem !important; } .max-width-s { max-width: 0.75rem; } .max-width-s-important { max-width: 0.75rem !important; } .max-height-s { max-height: 0.75rem; } .max-height-s-important { max-height: 0.75rem !important; } .font-size-xs { font-size: 0.625rem; } .font-size-xs-important { font-size: 0.625rem !important; } .width-xs { width: 0.625rem; } .width-xs-important { width: 0.625rem !important; } .height-xs { height: 0.625rem; } .height-xs-important { height: 0.625rem !important; } .min-width-xs { min-width: 0.625rem; } .min-width-xs-important { min-width: 0.625rem !important; } .min-height-xs { min-height: 0.625rem; } .min-height-xs-important { min-height: 0.625rem !important; } .max-width-xs { max-width: 0.625rem; } .max-width-xs-important { max-width: 0.625rem !important; } .max-height-xs { max-height: 0.625rem; } .max-height-xs-important { max-height: 0.625rem !important; } .font-size-2xs { font-size: 0.5rem; } .font-size-2xs-important { font-size: 0.5rem !important; } .width-2xs { width: 0.5rem; } .width-2xs-important { width: 0.5rem !important; } .height-2xs { height: 0.5rem; } .height-2xs-important { height: 0.5rem !important; } .min-width-2xs { min-width: 0.5rem; } .min-width-2xs-important { min-width: 0.5rem !important; } .min-height-2xs { min-height: 0.5rem; } .min-height-2xs-important { min-height: 0.5rem !important; } .max-width-2xs { max-width: 0.5rem; } .max-width-2xs-important { max-width: 0.5rem !important; } .max-height-2xs { max-height: 0.5rem; } .max-height-2xs-important { max-height: 0.5rem !important; } .line-height-10xl { line-height: 5rem; } .line-height-10xl-important { line-height: 5rem !important; } .line-height-9xl { line-height: 4.5rem; } .line-height-9xl-important { line-height: 4.5rem !important; } .line-height-8xl { line-height: 4rem; } .line-height-8xl-important { line-height: 4rem !important; } .line-height-7xl { line-height: 3.5rem; } .line-height-7xl-important { line-height: 3.5rem !important; } .line-height-6xl { line-height: 3rem; } .line-height-6xl-important { line-height: 3rem !important; } .line-height-5xl { line-height: 2.5rem; } .line-height-5xl-important { line-height: 2.5rem !important; } .line-height-4xl { line-height: 2.25rem; } .line-height-4xl-important { line-height: 2.25rem !important; } .line-height-3xl { line-height: 2rem; } .line-height-3xl-important { line-height: 2rem !important; } .line-height-2xl { line-height: 1.75rem; } .line-height-2xl-important { line-height: 1.75rem !important; } .line-height-xl { line-height: 1.625rem; } .line-height-xl-important { line-height: 1.625rem !important; } .line-height-l { line-height: 1.5rem; } .line-height-l-important { line-height: 1.5rem !important; } .line-height-m { line-height: 1.25rem; } .line-height-m-important { line-height: 1.25rem !important; } .line-height-s { line-height: 1rem; } .line-height-s-important { line-height: 1rem !important; } .line-height-xs { line-height: 0.875rem; } .line-height-xs-important { line-height: 0.875rem !important; } .line-height-2xs { line-height: 0.75rem; } .line-height-2xs-important { line-height: 0.75rem !important; } .letter-spacing-none { letter-spacing: 0rem; } .letter-spacing-none-important { letter-spacing: 0rem !important; } .letter-spacing-s { letter-spacing: -0.03125rem; } .letter-spacing-s-important { letter-spacing: -0.03125rem !important; } .letter-spacing-xs { letter-spacing: -0.0625rem; } .letter-spacing-xs-important { letter-spacing: -0.0625rem !important; } .font-weight-regular { font-weight: 400; } .font-weight-regular-important { font-weight: 400 !important; } .font-weight-semibold { font-weight: 600; } .font-weight-semibold-important { font-weight: 600 !important; } /** Generar clases de elevación definidas en el figma, Se trae del archivo _global.scss **/ .elevation-l1 { box-shadow: 0px 0px 2px 0px rgba(27, 55, 72, 0.08), 0px 2px 4px 0px rgba(27, 55, 72, 0.08); } .elevation-l2 { box-shadow: 0px 0px 4px 0px rgba(27, 55, 72, 0.08), 0px 4px 8px 0px rgba(27, 55, 72, 0.1); } /** Inicializar paleta de colores, por el momento solo se usa la paleta light **/ .theme-light { --color-brand-100: #d6ecf7; --color-brand-200: #add8ef; --color-brand-300: #83c5e8; --color-brand-400: #5ab1e0; --color-brand-500: #319ed8; --color-brand-600: #277ead; --color-brand-700: #1d5f82; --color-brand-800: #143f56; --color-brand-900: #0a202b; --color-accent-100: #fff2cc; --color-accent-200: #ffe599; --color-accent-300: #ffd866; --color-accent-400: #ffcb33; --color-accent-500: #ffbe00; --color-accent-600: #cc9800; --color-accent-700: #997200; --color-accent-800: #664c00; --color-accent-900: #332600; --color-basic-black: #000000; --color-basic-black50: rgba(0, 0, 0, 0.5019607843); --color-basic-white: #ffffff; --color-basic-white50: rgba(255, 255, 255, 0.5019607843); --color-secondary-100: #e5edf3; --color-secondary-200: #c7d3de; --color-secondary-300: #a9b8c9; --color-secondary-400: #6e889e; --color-secondary-500: #1b3748; --color-secondary-600: #162c3a; --color-secondary-700: #121d2a; --color-secondary-800: #0d131c; --color-secondary-900: #080a0e; --color-neutral-25: #f7f7f7; --color-neutral-50: #f2f2f2; --color-neutral-100: #e5e5e5; --color-neutral-150: #d9d9d9; --color-neutral-200: #cccccc; --color-neutral-250: #bfbfbf; --color-neutral-300: #b2b2b2; --color-neutral-350: #a6a6a6; --color-neutral-400: #999999; --color-neutral-450: #8c8c8c; --color-neutral-500: #808080; --color-neutral-550: #737373; --color-neutral-600: #666666; --color-neutral-650: #595959; --color-neutral-700: #4d4d4d; --color-neutral-750: #404040; --color-neutral-800: #333333; --color-neutral-850: #262626; --color-neutral-900: #1a1a1a; --color-neutral-950: #0d0d0d; --color-blue-100: #d2e0f6; --color-blue-200: #a6c1ed; --color-blue-300: #79a3e3; --color-blue-400: #4d84da; --color-blue-500: #2065d1; --color-blue-600: #1a51a7; --color-blue-700: #133d7d; --color-blue-800: #0d2854; --color-blue-900: #06142a; --color-purple-100: #e8daef; --color-purple-200: #d2b4de; --color-purple-300: #bb8fce; --color-purple-400: #a569bd; --color-purple-500: #8e44ad; --color-purple-600: #72368a; --color-purple-700: #552968; --color-purple-800: #391b45; --color-purple-900: #1c0e23; --color-violet-100: #e2defa; --color-violet-200: #c4bef5; --color-violet-300: #a79df1; --color-violet-400: #897dec; --color-violet-500: #6c5ce7; --color-violet-600: #564ab9; --color-violet-700: #41378b; --color-violet-800: #2b255c; --color-violet-900: #16122e; --color-red-100: #fad7d7; --color-red-200: #f5b0ae; --color-red-300: #f68b86; --color-red-400: #e4815d; --color-red-500: #e53935; --color-red-600: #d72e2a; --color-red-700: #892220; --color-red-800: #5c1715; --color-red-900: #2e080b; --color-pink-100: #fbd2e0; --color-pink-200: #f6a5c1; --color-pink-300: #f278a1; --color-pink-400: #ed4b82; --color-pink-500: #e91e63; --color-pink-600: #ba184f; --color-pink-700: #8c123b; --color-pink-800: #5d0c28; --color-pink-900: #2f0614; --color-orange-100: #fae5d3; --color-orange-200: #f5cba7; --color-orange-300: #f0b27a; --color-orange-400: #eb984e; --color-orange-500: #e67e22; --color-orange-600: #b8651b; --color-orange-700: #8a4c14; --color-orange-800: #5c320e; --color-orange-900: #2e1907; --color-yellow-100: #fdf0cc; --color-yellow-200: #fce199; --color-yellow-300: #fad366; --color-yellow-400: #f9c433; --color-yellow-500: #f7b500; --color-yellow-600: #c69100; --color-yellow-700: #946d00; --color-yellow-800: #634800; --color-yellow-900: #312400; --color-green-100: #d5e5d6; --color-green-200: #abcbad; --color-green-300: #82b184; --color-green-400: #58975b; --color-green-500: #2e7d32; --color-green-600: #256428; --color-green-700: #1c4b1e; --color-green-800: #123214; --color-green-900: #09190a; --color-teal-100: #cce7e5; --color-teal-200: #99d0ca; --color-teal-300: #6e8b80; --color-teal-400: #33a195; --color-teal-500: #00897b; --color-teal-600: #006e62; --color-teal-700: #00524a; --color-teal-800: #003731; --color-teal-900: #001b19; --color-cyan-100: #ccf2f6; --color-cyan-200: #99e4ee; --color-cyan-300: #66d7e5; --color-cyan-400: #33c9dd; --color-cyan-500: #00bcd4; --color-cyan-600: #0096aa; --color-cyan-700: #00717f; --color-cyan-800: #004b55; --color-cyan-900: #00262a; --color-content-secondary: #1b3748; --color-content-secondary-high: #162c3a; --color-content-secondary-mid: #6e889e; --color-content-secondary-low: #a9b8c9; --color-content-secondary-inverse: #ffffff; --color-content-secondary-mid-inverse: #c7d3de; --color-content-secondary-low-inverse: #e5edf3; --color-content-disabled: #c7d3de; --color-content-brand: #319ed8; --color-content-brand-high: #277ead; --color-content-brand-mid: #5ab1e0; --color-content-brand-low: #83c5e8; --color-content-accent: #ffbe00; --color-content-accent-high: #cc9800; --color-content-accent-low: #ffd866; --color-content-link: #2065d1; --color-content-link-hover: #4d84da; --color-content-link-pressed: #1a51a7; --color-content-info: #2065d1; --color-content-info-bold: #133d7d; --color-content-warning: #f7b500; --color-content-warning-bold: #946d00; --color-content-error: #e53935; --color-content-error-bold: #892220; --color-content-success: #2e7d32; --color-content-success-bold: #1c4b1e; --color-background-primary: #f2f2f2; --color-background-hover: #e5e5e5; --color-background-pressed: #cccccc; --color-background-selected: #c7d3de; --color-background-disabled: #999999; --color-background-secondary: #1b3748; --color-background-secondary-high: #a9b8c9; --color-background-secondary-mid: #c7d3de; --color-background-secondary-low: #e5edf3; --color-background-brand: #319ed8; --color-background-brand-hover: #277ead; --color-background-brand-pressed: #1d5f82; --color-background-brand-high: #83c5e8; --color-background-brand-mid: #add8ef; --color-background-brand-low: #d6ecf7; --color-background-accent: #ffbe00; --color-background-accent-hover: #ffcb33; --color-background-accent-pressed: #cc9800; --color-background-accent-high: #ffd866; --color-background-accent-mid: #ffe599; --color-background-accent-low: #fff2cc; --color-background-info: #d2e0f6; --color-background-info-subtle: #a6c1ed; --color-background-warning: #fdf0cc; --color-background-warning-subtle: #fce199; --color-background-error: #fad7d7; --color-background-error-subtle: #f5b0ae; --color-background-success: #d5e5d6; --color-background-success-subtle: #abcbad; --color-border-primary: #319ed8; --color-border-primary-high: #277ead; --color-border-primary-low: #83c5e8; --color-border-secondary: #1b3748; --color-border-secondary-high: #162c3a; --color-border-secondary-low: #a9b8c9; --color-border-accent: #ffbe00; --color-border-accent-high: #cc9800; --color-border-accent-low: #ffd866; --color-border-tertiary: #cccccc; --color-border-inverse: #333333; --color-border-disabled: #999999; --color-border-brand: #319ed8; --color-border-focus: #2065d1; --color-border-info: #79a3e3; --color-border-warning: #f7b500; --color-border-error: #e53935; --color-border-success: #2e7d32; } .theme-light .bg-content-secondary { background-color: var(--color-content-secondary); } .theme-light .cl-content-secondary { color: var(--color-content-secondary); } .theme-light .bc-content-secondary { border-color: var(--color-content-secondary); } .theme-light .svg-content-secondary path { fill: var(--color-content-secondary); color: var(--color-content-secondary); } .theme-light .bg-content-secondary-high { background-color: var(--color-content-secondary-high); } .theme-light .cl-content-secondary-high { color: var(--color-content-secondary-high); } .theme-light .bc-content-secondary-high { border-color: var(--color-content-secondary-high); } .theme-light .svg-content-secondary-high path { fill: var(--color-content-secondary-high); color: var(--color-content-secondary-high); } .theme-light .bg-content-secondary-mid { background-color: var(--color-content-secondary-mid); } .theme-light .cl-content-secondary-mid { color: var(--color-content-secondary-mid); } .theme-light .bc-content-secondary-mid { border-color: var(--color-content-secondary-mid); } .theme-light .svg-content-secondary-mid path { fill: var(--color-content-secondary-mid); color: var(--color-content-secondary-mid); } .theme-light .bg-content-secondary-low { background-color: var(--color-content-secondary-low); } .theme-light .cl-content-secondary-low { color: var(--color-content-secondary-low); } .theme-light .bc-content-secondary-low { border-color: var(--color-content-secondary-low); } .theme-light .svg-content-secondary-low path { fill: var(--color-content-secondary-low); color: var(--color-content-secondary-low); } .theme-light .bg-content-secondary-inverse { background-color: var(--color-content-secondary-inverse); } .theme-light .cl-content-secondary-inverse { color: var(--color-content-secondary-inverse); } .theme-light .bc-content-secondary-inverse { border-color: var(--color-content-secondary-inverse); } .theme-light .svg-content-secondary-inverse path { fill: var(--color-content-secondary-inverse); color: var(--color-content-secondary-inverse); } .theme-light .bg-content-secondary-mid-inverse { background-color: var(--color-content-secondary-mid-inverse); } .theme-light .cl-content-secondary-mid-inverse { color: var(--color-content-secondary-mid-inverse); } .theme-light .bc-content-secondary-mid-inverse { border-color: var(--color-content-secondary-mid-inverse); } .theme-light .svg-content-secondary-mid-inverse path { fill: var(--color-content-secondary-mid-inverse); color: var(--color-content-secondary-mid-inverse); } .theme-light .bg-content-secondary-low-inverse { background-color: var(--color-content-secondary-low-inverse); } .theme-light .cl-content-secondary-low-inverse { color: var(--color-content-secondary-low-inverse); } .theme-light .bc-content-secondary-low-inverse { border-color: var(--color-content-secondary-low-inverse); } .theme-light .svg-content-secondary-low-inverse path { fill: var(--color-content-secondary-low-inverse); color: var(--color-content-secondary-low-inverse); } .theme-light .bg-content-disabled { background-color: var(--color-content-disabled); } .theme-light .cl-content-disabled { color: var(--color-content-disabled); } .theme-light .bc-content-disabled { border-color: var(--color-content-disabled); } .theme-light .svg-content-disabled path { fill: var(--color-content-disabled); color: var(--color-content-disabled); } .theme-light .bg-content-brand { background-color: var(--color-content-brand); } .theme-light .cl-content-brand { color: var(--color-content-brand); } .theme-light .bc-content-brand { border-color: var(--color-content-brand); } .theme-light .svg-content-brand path { fill: var(--color-content-brand); color: var(--color-content-brand); } .theme-light .bg-content-brand-high { background-color: var(--color-content-brand-high); } .theme-light .cl-content-brand-high { color: var(--color-content-brand-high); } .theme-light .bc-content-brand-high { border-color: var(--color-content-brand-high); } .theme-light .svg-content-brand-high path { fill: var(--color-content-brand-high); color: var(--color-content-brand-high); } .theme-light .bg-content-brand-mid { background-color: var(--color-content-brand-mid); } .theme-light .cl-content-brand-mid { color: var(--color-content-brand-mid); } .theme-light .bc-content-brand-mid { border-color: var(--color-content-brand-mid); } .theme-light .svg-content-brand-mid path { fill: var(--color-content-brand-mid); color: var(--color-content-brand-mid); } .theme-light .bg-content-brand-low { background-color: var(--color-content-brand-low); } .theme-light .cl-content-brand-low { color: var(--color-content-brand-low); } .theme-light .bc-content-brand-low { border-color: var(--color-content-brand-low); } .theme-light .svg-content-brand-low path { fill: var(--color-content-brand-low); color: var(--color-content-brand-low); } .theme-light .bg-content-accent { background-color: var(--color-content-accent); } .theme-light .cl-content-accent { color: var(--color-content-accent); } .theme-light .bc-content-accent { border-color: var(--color-content-accent); } .theme-light .svg-content-accent path { fill: var(--color-content-accent); color: var(--color-content-accent); } .theme-light .bg-content-accent-high { background-color: var(--color-content-accent-high); } .theme-light .cl-content-accent-high { color: var(--color-content-accent-high); } .theme-light .bc-content-accent-high { border-color: var(--color-content-accent-high); } .theme-light .svg-content-accent-high path { fill: var(--color-content-accent-high); color: var(--color-content-accent-high); } .theme-light .bg-content-accent-low { background-color: var(--color-content-accent-low); } .theme-light .cl-content-accent-low { color: var(--color-content-accent-low); } .theme-light .bc-content-accent-low { border-color: var(--color-content-accent-low); } .theme-light .svg-content-accent-low path { fill: var(--color-content-accent-low); color: var(--color-content-accent-low); } .theme-light .bg-content-link { background-color: var(--color-content-link); } .theme-light .cl-content-link { color: var(--color-content-link); } .theme-light .bc-content-link { border-color: var(--color-content-link); } .theme-light .svg-content-link path { fill: var(--color-content-link); color: var(--color-content-link); } .theme-light .bg-content-link-hover { background-color: var(--color-content-link-hover); } .theme-light .cl-content-link-hover { color: var(--color-content-link-hover); } .theme-light .bc-content-link-hover { border-color: var(--color-content-link-hover); } .theme-light .svg-content-link-hover path { fill: var(--color-content-link-hover); color: var(--color-content-link-hover); } .theme-light .bg-content-link-pressed { background-color: var(--color-content-link-pressed); } .theme-light .cl-content-link-pressed { color: var(--color-content-link-pressed); } .theme-light .bc-content-link-pressed { border-color: var(--color-content-link-pressed); } .theme-light .svg-content-link-pressed path { fill: var(--color-content-link-pressed); color: var(--color-content-link-pressed); } .theme-light .bg-content-info { background-color: var(--color-content-info); } .theme-light .cl-content-info { color: var(--color-content-info); } .theme-light .bc-content-info { border-color: var(--color-content-info); } .theme-light .svg-content-info path { fill: var(--color-content-info); color: var(--color-content-info); } .theme-light .bg-content-info-bold { background-color: var(--color-content-info-bold); } .theme-light .cl-content-info-bold { color: var(--color-content-info-bold); } .theme-light .bc-content-info-bold { border-color: var(--color-content-info-bold); } .theme-light .svg-content-info-bold path { fill: var(--color-content-info-bold); color: var(--color-content-info-bold); } .theme-light .bg-content-warning { background-color: var(--color-content-warning); } .theme-light .cl-content-warning { color: var(--color-content-warning); } .theme-light .bc-content-warning { border-color: var(--color-content-warning); } .theme-light .svg-content-warning path { fill: var(--color-content-warning); color: var(--color-content-warning); } .theme-light .bg-content-warning-bold { background-color: var(--color-content-warning-bold); } .theme-light .cl-content-warning-bold { color: var(--color-content-warning-bold); } .theme-light .bc-content-warning-bold { border-color: var(--color-content-warning-bold); } .theme-light .svg-content-warning-bold path { fill: var(--color-content-warning-bold); color: var(--color-content-warning-bold); } .theme-light .bg-content-error { background-color: var(--color-content-error); } .theme-light .cl-content-error { color: var(--color-content-error); } .theme-light .bc-content-error { border-color: var(--color-content-error); } .theme-light .svg-content-error path { fill: var(--color-content-error); color: var(--color-content-error); } .theme-light .bg-content-error-bold { background-color: var(--color-content-error-bold); } .theme-light .cl-content-error-bold { color: var(--color-content-error-bold); } .theme-light .bc-content-error-bold { border-color: var(--color-content-error-bold); } .theme-light .svg-content-error-bold path { fill: var(--color-content-error-bold); color: var(--color-content-error-bold); } .theme-light .bg-content-success { background-color: var(--color-content-success); } .theme-light .cl-content-success { color: var(--color-content-success); } .theme-light .bc-content-success { border-color: var(--color-content-success); } .theme-light .svg-content-success path { fill: var(--color-content-success); color: var(--color-content-success); } .theme-light .bg-content-success-bold { background-color: var(--color-content-success-bold); } .theme-light .cl-content-success-bold { color: var(--color-content-success-bold); } .theme-light .bc-content-success-bold { border-color: var(--color-content-success-bold); } .theme-light .svg-content-success-bold path { fill: var(--color-content-success-bold); color: var(--color-content-success-bold); } .theme-light .bg-background-primary { background-color: var(--color-background-primary); } .theme-light .cl-background-primary { color: var(--color-background-primary); } .theme-light .bc-background-primary { border-color: var(--color-background-primary); } .theme-light .svg-background-primary path { fill: var(--color-background-primary); color: var(--color-background-primary); } .theme-light .bg-background-hover { background-color: var(--color-background-hover); } .theme-light .cl-background-hover { color: var(--color-background-hover); } .theme-light .bc-background-hover { border-color: var(--color-background-hover); } .theme-light .svg-background-hover path { fill: var(--color-background-hover); color: var(--color-background-hover); } .theme-light .bg-background-pressed { background-color: var(--color-background-pressed); } .theme-light .cl-background-pressed { color: var(--color-background-pressed); } .theme-light .bc-background-pressed { border-color: var(--color-background-pressed); } .theme-light .svg-background-pressed path { fill: var(--color-background-pressed); color: var(--color-background-pressed); } .theme-light .bg-background-selected { background-color: var(--color-background-selected); } .theme-light .cl-background-selected { color: var(--color-background-selected); } .theme-light .bc-background-selected { border-color: var(--color-background-selected); } .theme-light .svg-background-selected path { fill: var(--color-background-selected); color: var(--color-background-selected); } .theme-light .bg-background-disabled { background-color: var(--color-background-disabled); } .theme-light .cl-background-disabled { color: var(--color-background-disabled); } .theme-light .bc-background-disabled { border-color: var(--color-background-disabled); } .theme-light .svg-background-disabled path { fill: var(--color-background-disabled); color: var(--color-background-disabled); } .theme-light .bg-background-secondary { background-color: var(--color-background-secondary); } .theme-light .cl-background-secondary { color: var(--color-background-secondary); } .theme-light .bc-background-secondary { border-color: var(--color-background-secondary); } .theme-light .svg-background-secondary path { fill: var(--color-background-secondary); color: var(--color-background-secondary); } .theme-light .bg-background-secondary-high { background-color: var(--color-background-secondary-high); } .theme-light .cl-background-secondary-high { color: var(--color-background-secondary-high); } .theme-light .bc-background-secondary-high { border-color: var(--color-background-secondary-high); } .theme-light .svg-background-secondary-high path { fill: var(--color-background-secondary-high); color: var(--color-background-secondary-high); } .theme-light .bg-background-secondary-mid { background-color: var(--color-background-secondary-mid); } .theme-light .cl-background-secondary-mid { color: var(--color-background-secondary-mid); } .theme-light .bc-background-secondary-mid { border-color: var(--color-background-secondary-mid); } .theme-light .svg-background-secondary-mid path { fill: var(--color-background-secondary-mid); color: var(--color-background-secondary-mid); } .theme-light .bg-background-secondary-low { background-color: var(--color-background-secondary-low); } .theme-light .cl-background-secondary-low { color: var(--color-background-secondary-low); } .theme-light .bc-background-secondary-low { border-color: var(--color-background-secondary-low); } .theme-light .svg-background-secondary-low path { fill: var(--color-background-secondary-low); color: var(--color-background-secondary-low); } .theme-light .bg-background-brand { background-color: var(--color-background-brand); } .theme-light .cl-background-brand { color: var(--color-background-brand); } .theme-light .bc-background-brand { border-color: var(--color-background-brand); } .theme-light .svg-background-brand path { fill: var(--color-background-brand); color: var(--color-background-brand); } .theme-light .bg-background-brand-hover { background-color: var(--color-background-brand-hover); } .theme-light .cl-background-brand-hover { color: var(--color-background-brand-hover); } .theme-light .bc-background-brand-hover { border-color: var(--color-background-brand-hover); } .theme-light .svg-background-brand-hover path { fill: var(--color-background-brand-hover); color: var(--color-background-brand-hover); } .theme-light .bg-background-brand-pressed { background-color: var(--color-background-brand-pressed); } .theme-light .cl-background-brand-pressed { color: var(--color-background-brand-pressed); } .theme-light .bc-background-brand-pressed { border-color: var(--color-background-brand-pressed); } .theme-light .svg-background-brand-pressed path { fill: var(--color-background-brand-pressed); color: var(--color-background-brand-pressed); } .theme-light .bg-background-brand-high { background-color: var(--color-background-brand-high); } .theme-light .cl-background-brand-high { color: var(--color-background-brand-high); } .theme-light .bc-background-brand-high { border-color: var(--color-background-brand-high); } .theme-light .svg-background-brand-high path { fill: var(--color-background-brand-high); color: var(--color-background-brand-high); } .theme-light .bg-background-brand-mid { background-color: var(--color-background-brand-mid); } .theme-light .cl-background-brand-mid { color: var(--color-background-brand-mid); } .theme-light .bc-background-brand-mid { border-color: var(--color-background-brand-mid); } .theme-light .svg-background-brand-mid path { fill: var(--color-background-brand-mid); color: var(--color-background-brand-mid); } .theme-light .bg-background-brand-low { background-color: var(--color-background-brand-low); } .theme-light .cl-background-brand-low { color: var(--color-background-brand-low); } .theme-light .bc-background-brand-low { border-color: var(--color-background-brand-low); } .theme-light .svg-background-brand-low path { fill: var(--color-background-brand-low); color: var(--color-background-brand-low); } .theme-light .bg-background-accent { background-color: var(--color-background-accent); } .theme-light .cl-background-accent { color: var(--color-background-accent); } .theme-light .bc-background-accent { border-color: var(--color-background-accent); } .theme-light .svg-background-accent path { fill: var(--color-background-accent); color: var(--color-background-accent); } .theme-light .bg-background-accent-hover { background-color: var(--color-background-accent-hover); } .theme-light .cl-background-accent-hover { color: var(--color-background-accent-hover); } .theme-light .bc-background-accent-hover { border-color: var(--color-background-accent-hover); } .theme-light .svg-background-accent-hover path { fill: var(--color-background-accent-hover); color: var(--color-background-accent-hover); } .theme-light .bg-background-accent-pressed { background-color: var(--color-background-accent-pressed); } .theme-light .cl-background-accent-pressed { color: var(--color-background-accent-pressed); } .theme-light .bc-background-accent-pressed { border-color: var(--color-background-accent-pressed); } .theme-light .svg-background-accent-pressed path { fill: var(--color-background-accent-pressed); color: var(--color-background-accent-pressed); } .theme-light .bg-background-accent-high { background-color: var(--color-background-accent-high); } .theme-light .cl-background-accent-high { color: var(--color-background-accent-high); } .theme-light .bc-background-accent-high { border-color: var(--color-background-accent-high); } .theme-light .svg-background-accent-high path { fill: var(--color-background-accent-high); color: var(--color-background-accent-high); } .theme-light .bg-background-accent-mid { background-color: var(--color-background-accent-mid); } .theme-light .cl-background-accent-mid { color: var(--color-background-accent-mid); } .theme-light .bc-background-accent-mid { border-color: var(--color-background-accent-mid); } .theme-light .svg-background-accent-mid path { fill: var(--color-background-accent-mid); color: var(--color-background-accent-mid); } .theme-light .bg-background-accent-low { background-color: var(--color-background-accent-low); } .theme-light .cl-background-accent-low { color: var(--color-background-accent-low); } .theme-light .bc-background-accent-low { border-color: var(--color-background-accent-low); } .theme-light .svg-background-accent-low path { fill: var(--color-background-accent-low); color: var(--color-background-accent-low); } .theme-light .bg-background-info { background-color: var(--color-background-info); } .theme-light .cl-background-info { color: var(--color-background-info); } .theme-light .bc-background-info { border-color: var(--color-background-info); } .theme-light .svg-background-info path { fill: var(--color-background-info); color: var(--color-background-info); } .theme-light .bg-background-info-subtle { background-color: var(--color-background-info-subtle); } .theme-light .cl-background-info-subtle { color: var(--color-background-info-subtle); } .theme-light .bc-background-info-subtle { border-color: var(--color-background-info-subtle); } .theme-light .svg-background-info-subtle path { fill: var(--color-background-info-subtle); color: var(--color-background-info-subtle); } .theme-light .bg-background-warning { background-color: var(--color-background-warning); } .theme-light .cl-background-warning { color: var(--color-background-warning); } .theme-light .bc-background-warning { border-color: var(--color-background-warning); } .theme-light .svg-background-warning path { fill: var(--color-background-warning); color: var(--color-background-warning); } .theme-light .bg-background-warning-subtle { background-color: var(--color-background-warning-subtle); } .theme-light .cl-background-warning-subtle { color: var(--color-background-warning-subtle); } .theme-light .bc-background-warning-subtle { border-color: var(--color-background-warning-subtle); } .theme-light .svg-background-warning-subtle path { fill: var(--color-background-warning-subtle); color: var(--color-background-warning-subtle); } .theme-light .bg-background-error { background-color: var(--color-background-error); } .theme-light .cl-background-error { color: var(--color-background-error); } .theme-light .bc-background-error { border-color: var(--color-background-error); } .theme-light .svg-background-error path { fill: var(--color-background-error); color: var(--color-background-error); } .theme-light .bg-background-error-subtle { background-color: var(--color-background-error-subtle); } .theme-light .cl-background-error-subtle { color: var(--color-background-error-subtle); } .theme-light .bc-background-error-subtle { border-color: var(--color-background-error-subtle); } .theme-light .svg-background-error-subtle path { fill: var(--color-background-error-subtle); color: var(--color-background-error-subtle); } .theme-light .bg-background-success { background-color: var(--color-background-success); } .theme-light .cl-background-success { color: var(--color-background-success); } .theme-light .bc-background-success { border-color: var(--color-background-success); } .theme-light .svg-background-success path { fill: var(--color-background-success); color: var(--color-background-success); } .theme-light .bg-background-success-subtle { background-color: var(--color-background-success-subtle); } .theme-light .cl-background-success-subtle { color: var(--color-background-success-subtle); } .theme-light .bc-background-success-subtle { border-color: var(--color-background-success-subtle); } .theme-light .svg-background-success-subtle path { fill: var(--color-background-success-subtle); color: var(--color-background-success-subtle); } .theme-light .bg-border-primary { background-color: var(--color-border-primary); } .theme-light .cl-border-primary { color: var(--color-border-primary); } .theme-light .bc-border-primary { border-color: var(--color-border-primary); } .theme-light .svg-border-primary path { fill: var(--color-border-primary); color: var(--color-border-primary); } .theme-light .bg-border-primary-high { background-color: var(--color-border-primary-high); } .theme-light .cl-border-primary-high { color: var(--color-border-primary-high); } .theme-light .bc-border-primary-high { border-color: var(--color-border-primary-high); } .theme-light .svg-border-primary-high path { fill: var(--color-border-primary-high); color: var(--color-border-primary-high); } .theme-light .bg-border-primary-low { background-color: var(--color-border-primary-low); } .theme-light .cl-border-primary-low { color: var(--color-border-primary-low); } .theme-light .bc-border-primary-low { border-color: var(--color-border-primary-low); } .theme-light .svg-border-primary-low path { fill: var(--color-border-primary-low); color: var(--color-border-primary-low); } .theme-light .bg-border-secondary { background-color: var(--color-border-secondary); } .theme-light .cl-border-secondary { color: var(--color-border-secondary); } .theme-light .bc-border-secondary { border-color: var(--color-border-secondary); } .theme-light .svg-border-secondary path { fill: var(--color-border-secondary); color: var(--color-border-secondary); } .theme-light .bg-border-secondary-high { background-color: var(--color-border-secondary-high); } .theme-light .cl-border-secondary-high { color: var(--color-border-secondary-high); } .theme-light .bc-border-secondary-high { border-color: var(--color-border-secondary-high); } .theme-light .svg-border-secondary-high path { fill: var(--color-border-secondary-high); color: var(--color-border-secondary-high); } .theme-light .bg-border-secondary-low { background-color: var(--color-border-secondary-low); } .theme-light .cl-border-secondary-low { color: var(--color-border-secondary-low); } .theme-light .bc-border-secondary-low { border-color: var(--color-border-secondary-low); } .theme-light .svg-border-secondary-low path { fill: var(--color-border-secondary-low); color: var(--color-border-secondary-low); } .theme-light .bg-border-accent { background-color: var(--color-border-accent); } .theme-light .cl-border-accent { color: var(--color-border-accent); } .theme-light .bc-border-accent { border-color: var(--color-border-accent); } .theme-light .svg-border-accent path { fill: var(--color-border-accent); color: var(--color-border-accent); } .theme-light .bg-border-accent-high { background-color: var(--color-border-accent-high); } .theme-light .cl-border-accent-high { color: var(--color-border-accent-high); } .theme-light .bc-border-accent-high { border-color: var(--color-border-accent-high); } .theme-light .svg-border-accent-high path { fill: var(--color-border-accent-high); color: var(--color-border-accent-high); } .theme-light .bg-border-accent-low { background-color: var(--color-border-accent-low); } .theme-light .cl-border-accent-low { color: var(--color-border-accent-low); } .theme-light .bc-border-accent-low { border-color: var(--color-border-accent-low); } .theme-light .svg-border-accent-low path { fill: var(--color-border-accent-low); color: var(--color-border-accent-low); } .theme-light .bg-border-tertiary { background-color: var(--color-border-tertiary); } .theme-light .cl-border-tertiary { color: var(--color-border-tertiary); } .theme-light .bc-border-tertiary { border-color: var(--color-border-tertiary); } .theme-light .svg-border-tertiary path { fill: var(--color-border-tertiary); color: var(--color-border-tertiary); } .theme-light .bg-border-inverse { background-color: var(--color-border-inverse); } .theme-light .cl-border-inverse { color: var(--color-border-inverse); } .theme-light .bc-border-inverse { border-color: var(--color-border-inverse); } .theme-light .svg-border-inverse path { fill: var(--color-border-inverse); color: var(--color-border-inverse); } .theme-light .bg-border-disabled { background-color: var(--color-border-disabled); } .theme-light .cl-border-disabled { color: var(--color-border-disabled); } .theme-light .bc-border-disabled { border-color: var(--color-border-disabled); } .theme-light .svg-border-disabled path { fill: var(--color-border-disabled); color: var(--color-border-disabled); } .theme-light .bg-border-brand { background-color: var(--color-border-brand); } .theme-light .cl-border-brand { color: var(--color-border-brand); } .theme-light .bc-border-brand { border-color: var(--color-border-brand); } .theme-light .svg-border-brand path { fill: var(--color-border-brand); color: var(--color-border-brand); } .theme-light .bg-border-focus { background-color: var(--color-border-focus); } .theme-light .cl-border-focus { color: var(--color-border-focus); } .theme-light .bc-border-focus { border-color: var(--color-border-focus); } .theme-light .svg-border-focus path { fill: var(--color-border-focus); color: var(--color-border-focus); } .theme-light .bg-border-info { background-color: var(--color-border-info); } .theme-light .cl-border-info { color: var(--color-border-info); } .theme-light .bc-border-info { border-color: var(--color-border-info); } .theme-light .svg-border-info path { fill: var(--color-border-info); color: var(--color-border-info); } .theme-light .bg-border-warning { background-color: var(--color-border-warning); } .theme-light .cl-border-warning { color: var(--color-border-warning); } .theme-light .bc-border-warning { border-color: var(--color-border-warning); } .theme-light .svg-border-warning path { fill: var(--color-border-warning); color: var(--color-border-warning); } .theme-light .bg-border-error { background-color: var(--color-border-error); } .theme-light .cl-border-error { color: var(--color-border-error); } .theme-light .bc-border-error { border-color: var(--color-border-error); } .theme-light .svg-border-error path { fill: var(--color-border-error); color: var(--color-border-error); } .theme-light .bg-border-success { background-color: var(--color-border-success); } .theme-light .cl-border-success { color: var(--color-border-success); } .theme-light .bc-border-success { border-color: var(--color-border-success); } .theme-light .svg-border-success path { fill: var(--color-border-success); color: var(--color-border-success); } .typography-desktop { /** Generar tipografía, se trae del archivo _typography.scss **/ } .typography-desktop .font-heading-5xl { font-size: 4.5rem; line-height: 5rem; letter-spacing: -0.0625rem; font-weight: 600; } .typography-desktop .font-heading-5xl:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-4xl { font-size: 4rem; line-height: 4.5rem; letter-spacing: -0.0625rem; font-weight: 600; } .typography-desktop .font-heading-4xl:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-3xl { font-size: 3.5rem; line-height: 4rem; letter-spacing: -0.0625rem; font-weight: 600; } .typography-desktop .font-heading-3xl:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-2xl { font-size: 3rem; line-height: 3.5rem; letter-spacing: -0.0625rem; font-weight: 600; } .typography-desktop .font-heading-2xl:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-xl { font-size: 2.5rem; line-height: 3rem; letter-spacing: -0.0625rem; font-weight: 600; } .typography-desktop .font-heading-xl:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-l { font-size: 2rem; line-height: 2.5rem; letter-spacing: -0.0625rem; font-weight: 600; } .typography-desktop .font-heading-l:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-m { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.0625rem; font-weight: 600; } .typography-desktop .font-heading-m:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-s { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.03125rem; font-weight: 600; } .typography-desktop .font-heading-s:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-xs { font-size: 1.125rem; line-height: 1.625rem; letter-spacing: -0.03125rem; font-weight: 600; } .typography-desktop .font-heading-xs:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-heading-2xs { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 600; } .typography-desktop .font-heading-2xs:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-semibold-xl { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: 0rem; font-weight: 600; } .typography-desktop .font-text-semibold-xl:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-semibold-l { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0rem; font-weight: 600; } .typography-desktop .font-text-semibold-l:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-semibold-m { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 600; } .typography-desktop .font-text-semibold-m:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-semibold-s { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0rem; font-weight: 600; } .typography-desktop .font-text-semibold-s:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-semibold-xs { font-size: 0.625rem; line-height: 0.875rem; letter-spacing: 0rem; font-weight: 600; } .typography-desktop .font-text-semibold-xs:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-semibold-2xs { font-size: 0.5rem; line-height: 0.75rem; letter-spacing: 0rem; font-weight: 600; } .typography-desktop .font-text-semibold-2xs:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-regular-xl { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: 0rem; font-weight: 400; } .typography-desktop .font-text-regular-xl:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-regular-l { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0rem; font-weight: 400; } .typography-desktop .font-text-regular-l:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-regular-m { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0rem; font-weight: 400; } .typography-desktop .font-text-regular-m:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-regular-s { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0rem; font-weight: 400; } .typography-desktop .font-text-regular-s:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-regular-xs { font-size: 0.625rem; line-height: 0.875rem; letter-spacing: 0rem; font-weight: 400; } .typography-desktop .font-text-regular-xs:not([class*=cl-]) { color: var(--color-content-secondary); } .typography-desktop .font-text-regular-2xs { font-size: 0.5rem; line-height: 0.75rem; letter-spacing: 0rem; font-weight: 400; } .typography-desktop .font-text-regular-2xs:not([class*=cl-]) { color: var(--color-content-secondary); } /*# sourceMappingURL=styles.css.map*/