:root {
    --first-color: var(--primary);
}

m-button {
    position: relative;
    display: inline-flex;
    background-color: var(--primary);
    border-radius: 16px;
    font-weight: 600;
    padding: .75rem 1.25rem;
    font-size: 1rem;
    height: auto;
    text-align: center;
    text-transform: initial;
    min-width: 42px;
    min-height: 48px;
    align-items: flex-end;
    justify-content: center;
    float: inline-start;
    transition: background-color .5s;
    width: fit-content;
    white-space: break-spaces;
}

m-button:hover {
    background: var(--dark-primary);
}

@media (prefers-color-scheme: dark) {
    m-button:hover {
        background: var(--light-primary);
    }
}

m-button.disabled:hover {
    box-shadow: initial;
}

m-button.white {
    background-color: var(--white);
    color: var(--black);
}

m-button.light {
    background-color: var(--gray);
    color: var(--black);
}

m-button.white:not(.disabled):hover,
m-button.light:not(.disabled):hover {
    background: var(--light-gray-fild-border);
}

@media (prefers-color-scheme: dark) {
    m-button.white:not(.disabled):hover,
    m-button.light:not(.disabled):hover {
        color: var(--background-black);
    }

    .search-results .pagination .page:not(.disabled):hover .icon {
        background: var(--background-black) !important;
    }
}

m-button.light > .icon {
    background: var(--black);
}

m-button.white > .icon,
m-button.light > .icon,
m-button.dark > .icon {
    background: var(--primary);
}

m-button.dark {
    background-color: var(--black);
    color: var(--white);
}

m-button.dark:not(.disabled):hover {
    background-color: var(--dark-gray);
}

m-button.waiting > .icon {
    border: 2px solid var(--background-white);
    border-color: var(--background-white) transparent var(--background-white) transparent;
}

m-button.waiting {
    position: relative;
    color: var(--background-white) !important;
}

m-button.waiting > .icon {
    left: 10px;
    position: absolute;
}

m-button > .lock {
    border: none;
    border-radius: 16px;
}

m-button.searchbutton {
    min-width: 135px;
}

m-select:focus-visible,
m-field > .frame > input:focus-visible,
m-geo > .frame > input:focus-visible,
m-search > .frame > input:focus-visible,
input:focus-visible, textarea:focus-visible,
m-field > .frame > textarea:focus,
m-button:focus-visible {
    box-shadow: 0 0 0 5px var(--primary);
    outline: 2px solid var(--white);
}

m-select:focus-visible {
    border-radius: .125rem;
}

m-select > .frame > .dropdown:after {
    left: 0;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

main > article > section.search > fieldset > m-field .frame > input {
    border: 1px solid transparent;
}

main > article > section.search > fieldset > m-field > .frame > .label {
    z-index: 1;
    line-height: 48px;
    left: 1.15rem;
    pointer-events: none;
}

m-field > .frame > .label {
    z-index: 1;
}

fieldset.link,
fieldset.link * {
    cursor: pointer;
}


section > fieldset.link {
    border-bottom: 1px solid var(--light-gray-fild-border);
    padding: .5rem 0;
    margin: 0 0 .5rem 0;
}

section > fieldset.link > label {
    border: none;
    border-left: 5px solid var(--primary);
    padding: .5rem;
    font-weight: 600;
    margin: 0;
}

m-select,
m-upload {
    width: 100%;
}

m-geo > .frame > input,
m-field > .frame > input,
m-field > .frame > textarea,
m-select > .frame,
m-upload > .frame {
    background: var(--gray);
    transition: border-color .2s linear;
}

m-geo > .frame > input,
m-field > .frame > input,
m-field > .frame > textarea {
    color: var(--black);
}

m-geo > .frame,
m-field > .frame {
    height: 48px;
    border: none !important;
}

m-geo > .frame > input,
m-field > .frame > input,
m-select > .frame,
m-upload > .frame,
m-field > .frame > textarea {
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    height: 48px;
    font-family: "museo-sans", sans-serif;
    font-weight: 400;
    padding: 0 1rem;
    width: 100%;
}

.form m-field > .frame > input,
.form m-select > .frame,
.form m-field > .frame > textarea {
    background: var(--white);
}

m-field.noMoneyIcon > .frame > .mask {
    display: none;
}

m-field[mask].noMoneyIcon > .frame > .label,
m-field[mask].noMoneyIcon > .frame > input {
    padding-left: 1rem;
}

m-state.checkbox {
    display: flex;
    height: 100%;
    align-items: center;
}

m-state.checkbox > .frame > .label,
m-state.radiobutton > .frame > .label {
    max-width: calc(100% - 30px);
}

m-state.checkbox > .frame > .body > .selector,
m-state.radiobutton > .frame > .body > .selector {
    height: 22px;
    width: 22px;
}

m-state.radiobutton.active:hover:not(.disabled) > .frame > .body > .selector,
m-state.radiobutton.active > .frame > .body > .selector {
    background-color: var(--dark-gray);
}

m-state.radiobutton.active:hover:not(.disabled) > .frame > .body,
m-state.radiobutton.active > .frame > .body {
    border-color: var(--dark-gray);
}

m-state > .frame {
    position: relative;
}

m-state > .frame > .label {
    margin: 0 0 0 30px;
    line-height: 34px;
}

m-state.checkbox,
m-state.radiobutton {
    width: 100%;
}

m-state > .frame > .label {
    color: var(--black);
}

m-state.checkbox > .frame > .body,
m-state.radiobutton > .frame > .body {
    background: var(--white);
    border: 1px solid var(--light-gray-fild-border);
}

m-state.checkbox > .frame > .body,
m-state.radiobutton > .frame > .body {
    float: revert;
}

m-state > .frame > .label {
    float: left;
    overflow: initial;
    text-align: left;
    text-overflow: initial;
    white-space: normal;
    margin: .25em 0 0 30px;
    line-height: 1.15rem;
}

m-state > .frame > .label {
    font-size: .9rem;
    font-weight: 400;
}

m-field {
    margin: 0 0 1rem 0;
}

m-field > .frame > textarea {
    min-height: 96px;
    padding: 1rem;
}

m-geo.focus > .frame > input,
m-geo > .frame > input:hover,
m-field.focus > .frame > input,
m-field > .frame > input:hover,
m-field.focus > .frame > textarea,
main > article > section.search > fieldset > m-field.focus .frame > input,
m-field > .frame > textarea:hover,
m-select:hover > .frame,
m-upload:hover > .frame,
main > article > section.search > fieldset > m-field:hover .frame > input {
    border: 2px solid var(--medium-gray);
}

m-field > .frame > input:-webkit-autofill,
m-field > .frame > input:-webkit-autofill:active,
m-field > .frame > input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--black) !important;
    background: var(--light-gray);
    line-height: 48px;
    font-size: 16px;
}

input {
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}


m-select m-field > .frame > input:hover {
    border: none;
}

m-select m-field:hover > .frame > input {
    border: 2px solid var(--medium-gray);
}

m-select:hover > .frame > m-field ~ .dropdown {
    right: 8px;
    top: 8px;
}

m-select .lock {
    border: none;
}

main > article > section.hidden {
    display: none;
}

m-state.checkbox.active:hover > .frame > .body,
m-state.checkbox.active > .frame > .body {
    border-color: var(--medium-gray);
}

m-state.checkbox.active:hover > .frame > .body,
m-state.checkbox.active > .frame > .body {
    background: var(--medium-gray);
}

m-state > .error:empty {
    margin: 0;
}

m-geo > .frame > .line,
m-field > .frame > .line {
    display: none;
    height: 0;
}

m-select > .frame > .value,
m-upload > .frame > .value {
    color: var(--black);
    padding-left: 1rem;
    height: 48px;
    line-height: 48px;
}

m-button.next {
    flex-direction: row-reverse;
}

m-button > .icon {
    background-color: var(--background-white);
    margin: -4px 6px 0 0;
    height: 24px;
    width: 24px;
}

m-button.back {
    flex-direction: row;
}

m-button.up,
m-button.down {
    direction: rtl;
    min-width: 188px;
}

m-button.back > .icon,
m-button.next > .icon,
m-button.up > .icon,
m-button.down > .icon,
m-button.start > .icon,
m-button.end > .icon,
m-button.whatsapp > .icon {
    display: inline-block;
    -webkit-mask-image: url(../images/arrow.svg);
    mask-image: url(../images/arrow.svg);
    mask-repeat: no-repeat;
    -webkit-mask-position-y: center;
    -webkit-mask-position-x: left;
    mask-size: 16px;
}

m-button.captcha,
m-button.print,
m-button.share,
m-button.mail,
m-button.whatsapp {
    padding: .75rem .5rem;
}

m-button.captcha > .icon,
m-button.print > .icon,
m-button.share > .icon,
m-button.mail > .icon,
m-button.whatsapp > .icon {
    display: inline-block;
    -webkit-mask-image: url(../images/print.svg);
    mask-image: url(../images/print.svg);
    background: var(--black);
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: 20px;
    margin: 0;
}

m-button.captcha > .icon {
    -webkit-mask-image: url(../images/reload.svg);
    mask-image: url(../images/reload.svg);
}

m-button.share > .icon {
    -webkit-mask-image: url(../images/share.svg);
    mask-image: url(../images/share.svg);
}

m-button.mail > .icon {
    -webkit-mask-image: url(../images/mail.svg);
    mask-image: url(../images/mail.svg);
}

m-button.whatsapp > .icon {
    -webkit-mask-image: url(../images/whatsapp.svg);
    mask-image: url(../images/whatsapp.svg);
}

m-button.next > .icon {
    rotate: 180deg;
}

m-button.up > .icon {
    rotate: 90deg;
    top: 4px;
    position: relative;
    margin: 0 0 0 .25rem;
}

m-button.down > .icon {
    rotate: -90deg;
    top: -4px;
    position: relative;
    margin: 0 0 0 .25rem;
}

m-button > .dropdown,
m-select > .frame > .dropdown,
m-upload > .frame > .dropdown {
    right: 8px;
    top: 8px;
}

m-button .dropdown:after,
m-select > .frame > .dropdown:after,
m-upload > .frame > .dropdown:after {
    color: var(--dark-gray);
    font-size: 1rem;
}

.wait {
    border: 2px solid var(--primary);
    border-color: var(--primary) transparent var(--primary) transparent;
}

m-select > .frame > .wait,
m-geo > .frame > .wait,
m-search > .frame > .wait,
m-select > .frame > .wait {
    right: .8rem !important;
    top: -.25rem !important;
}

m-select > .frame > m-field > .frame > input {
    padding-left: 16px;
}

m-select.date > .content > header > .wait,
m-select.time > .content > header > .wait {
    margin: 2px 0 0 0;
}

m-select.time > .content > .clock {
    background: var(--light-gray);
}

m-select.time > .content > .clock p {
    color: var(--dark-gray);
}

m-select.time > .content > header > .value > span.active {
    color: var(--dark-gray);
}

m-select.date > .content .table > .row > .cell > span.active,
m-select.time > .content .table > .row > .cell > span.active {
    background-color: var(--primary);
}

m-select.date > .content .table.week > .row > .cell:nth-last-child(-n+2),
m-select.time > .content .table.week > .row > .cell:nth-last-child(-n+2) {
    color: var(--white);
}

m-geo > .content {
    box-shadow: none;
    border-radius: var(--border-radius);
    top: 48px;
    z-index: 2;
    background: var(--white);
}

m-button.select > .content ul > li,
m-geo > .content ul > li,
m-search > .content ul > li,
m-select.list > .content ul > li {
    height: 48px;
    line-height: 48px;
}

m-button.select > .content,
m-select.list > .content {
    max-width: 100%;
}

m-geo > .error,
m-field > .error,
m-select > .error,
m-upload > .error {
    color: var(--error-color);
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (prefers-color-scheme: dark) {
    m-geo > .error,
    m-field > .error,
    m-select > .error,
    m-upload > .error {
        color: var(--dark-primary);
    }
}

m-geo.error > .frame > input,
m-field.error > .frame > input,
m-select.error > .frame,
m-select.error m-field > .frame > input,
m-upload.error > .frame,
m-field.error > .frame > textarea {
    border: 2px solid var(--error-color);
}

m-field.error > .error {
    margin: .5rem 0 0 0;
    height: auto;
}

m-select.error > .frame,
m-upload.error > .frame {
    border-bottom-color: var(--error-color) !important;
}

label.required:after {
    content: '*';
    margin: 0 0 0 4px;
    color: var(--primary);
}

.lock {
    border-radius: var(--border-radius);
    background: var(--gray);
    border: 1px solid #c0c0c0;
}

body > .lightbox {
    background: var(--gray);
    position: fixed;
    border-radius: 0;
    border: 0;
}

m-geo > .content ul > li,
m-select,
m-upload,
m-button.select > .content ul > li,
m-select.list > .content ul > li {
    color: var(--black);
}

m-button > .content,
m-select > .content,
m-upload > .content {
    background-color: var(--white);
}

m-button.select > .content ul > li,
m-select.list > .content ul > li {
    cursor: pointer;
}

m-select > .frame > .delete {
    width: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .4s;
}

m-select.deletable > .frame > .value,
m-upload.deletable > .frame > .value {
    left: 0;
    transition: left .4s;
}

m-select.deletable > .frame .value,
m-upload.deletable > .frame .value {
    left: 25px;
}

m-select.deletable:hover > .frame .value {
    padding-left: calc(1rem - 1px);
}

m-select.deletable > .frame > .delete {
    opacity: 1;
    position: absolute;
    display: inline-flex;
    height: 46px;
    width: 40px;
    background-color: var(--gray);
    -webkit-mask-size: 20px 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    z-index: 1;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

m-select.date.deletable > .frame > .delete,
m-select.time.deletable > .frame > .delete {
    left: 1px;
    top: 1px;
}

m-select.date.deletable m-field.focus ~ .delete,
m-select.time.deletable m-field.focus ~ .delete {
    left: 2px;
    top: 2px;
}

m-select.list.deletable:hover .delete,
m-select.deletable m-field:hover ~ .delete,
m-field.focus ~ .delete {
    border-bottom: 2px solid var(--medium-gray);
}

m-select.date.deletable m-field:hover ~ .delete,
m-select.time.deletable m-field:hover ~ .delete {
    top: 2px;
    left: 1px;
    border-bottom: 2px solid var(--medium-gray);
    border-left: 1px solid var(--medium-gray);
}

m-select > .frame > .delete > .icon {
    margin: auto;
    mask-repeat: inherit;
    background: var(--dark-gray);
}


m-select > .frame > .delete:hover > .icon {
    background-color: var(--primary);
}

m-select > .content > header,
m-upload > .content > header {
    background-color: var(--light-gray);
    color: var(--dark-gray);
    padding: 14px !important;
}

m-select > .content > header > .icon,
m-upload > .content > header > .icon {
    background-color: var(--dark-gray);
}

m-select > .content > header > .value {
    font-size: 1.5rem;
}

m-select.date > .frame,
m-select.time > .frame {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

m-select.date > .content > .container > .data,
m-select.time > .content > .container > .data {
    background-color: var(--white);
}

m-select.date > .content .table.month,
m-select.date > .content .table.months,
m-select.date > .content .table.years {
    color: var(--dark-gray);
}

m-select.date > .content .navigation > .next,
m-select.date > .content .navigation > .previous {
    background-color: var(--dark-gray);
}

m-select.date > .content .navigation > .title {
    color: var(--black);
}

m-select.date > .content .table > .row > .cell > span.current.disabled,
m-select.date > .content .table > .row > .cell > .day.disabled {
    color: var(--dark-gray);
    font-weight: 600;
}

m-select.date > .content .table > .row > .cell > .day {
    font-weight: 800;
}

m-select.date > .content .navigation {
    background-color: var(--gray);
}

m-select.date > .content .table.week > .row > .cell:nth-last-child(-n+2) {
    color: var(--primary);
}

m-select > .frame > m-field > .frame > .mask {
    display: block;
}

m-select[mask] > .frame > .mask,
m-field[mask] > .frame > .mask {
    z-index: 1;
    background-color: var(--primary);
    top: 14px;
    left: 12px;
}

m-field[mask] > .frame > .mask {
    mask-repeat: no-repeat;
    mask-size: contain;
    height: 24px;
    width: 24px;
    max-height: 20px;
}

m-field[mask=email] > .frame > .mask {
    -webkit-mask-image: url(../images/email.svg);
    mask-image: url(../images/email.svg);
}

m-field[mask=phone] > .frame > .mask {
    -webkit-mask-image: url(../images/phone.svg);
    mask-image: url(../images/phone.svg);
}

m-field[mask] > .frame > .label,
m-field[mask] > .frame > input,
m-select > .frame > m-field[mask] > .frame > input {
    padding-left: 40px;
}

m-multi {
    width: 100%;
}

m-multi > .content > .template {
    border-bottom: var(--border);
    margin: 0 0 1rem 0;
}

m-multi > .content > .template > .frame > .body {
    background: transparent;
    padding: 0;
}

m-multi main:first-of-type,
m-multi main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: initial;
    margin: 1rem 0 0 0;
    grid-gap: 1rem;
}

m-multi main fieldset {
    width: 100%;
    margin: 0;
    padding: 0 0 1rem 0;
}

m-multi > nav {
    padding: 1rem 0;
    padding-top: 0 !important;
}

m-message > .data > .message > .body {
    background-color: var(--gray);
    color: var(--black);
    border: 1px solid var(--dark-gray);
    border-radius: var(--border-radius);
    margin: 0 1rem;
}

m-message > .data > .message > .body > .text {
    font-size: 1rem;
}

m-message > .data > .message.error > .body {
    background: #ca282444;
    border-color: #ca2824;
}

m-message > .data > .message.warning > .body {
    background: #f6c90e44;
    border-color: #f6c90e;
}

m-message > .data > .message.info > .body {
    background: #00adb544;
    border-color: #00adb5;
}

m-message > .data > .message.success > .body {
    background: #2fa41844;
    border-color: #2fa418;
}

@media (min-width: 440px) {
    .pagination m-button.back {
        margin: 0 auto 0 0;
    }

    .pagination m-button.next {
        margin: 0 0 0 auto;
    }
}

@media (min-width: 768px) {

    m-multi main:first-of-type,
    m-multi main {
        flex-direction: row;
    }

    m-message {
        position: relative;
        display: block;
        max-width: var(--max-content-width);
        margin: 0 auto;
    }

    m-message > .data > .message > .body {
        margin: 0 1rem;
    }
}

@media (min-width: 1400px) {
    .sso {
        min-width: 218px;
    }

    m-button {
        min-width: 48px;
    }

    m-message > .data > .message > .body {
        margin: 0;
    }
}


/* SubscribeReminer css*/

main article section.reminder {
    height: 100%;
    border-radius: var(--border-radius);
    padding: 1.5rem;
}


main article section.red {
    background: var(--primary);
}

main article section.red p {
    color: var(--white);
}

main article section.gray {
    background: var(--gray);

}

main article section.gray p {
    color: var(--black);
}