/*!
 * Compomentes Mantra - Sonae MC 
 * https://mantra.mc.pt/
 */


/*Divider*/
.divider {
    border-top: var(--sdBorderWidth);
    color: var(--sdNeutral10);
}

/*Link*/
.link-small {
    color: var(--sdBrandCntPrimary500);
    margin-right: var(--sdNano);
    font-size: var(--sdCaption);
}

.link-medium {
    color: var(--sdBrandCntPrimary500);
    margin-right: var(--sdNano);
    font-size: var(--sdBodyS);
}

.link-large {
    color: var(--sdBrandCntPrimary500);
    margin-right: var(--sdNano);
    font-size: var(--sdBody);
}

.link-small:hover, .link-medium:hover, .link-large:hover {
    color: var(--sdBrandCntPrimary700);
}

.link-small:active, .link-medium:active, .link-large:active {
    color: var(--sdBrandCntPrimary800);
}

.link-small:disabled, .link-medium:disabled, .link-large:disabled {
    color: var(--sdNeutral60);
}



/*
 *    Checkbox
 */


.checkbox-small {
    border-color: var(--sdNeutral10);
    border-width: var(--sdBorderWidth);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    background-color: var(--sdNeutral0);
    height: 1em;
    width: 1em;
}

.checkbox-medium {
    border-color: var(--sdNeutral10);
    border-width: var(--sdBorderWidth);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    background-color: var(--sdNeutral0);
    height: 1.5em;
    width: 1.5em;
}

.checkbox-large {
    border-color: var(--sdNeutral10);
    border-width: var(--sdBorderWidth);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    background-color: var(--sdNeutral0);
    height: 2em;
    width: 2em;
}


.checkbox-small:checked {
    background-color: var(--sdBrandCntPrimary500);
    border-color: var(--sdNeutral10);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    border-width: var(--sdBorderWidth);
    height: 1em;
    width: 1em;
}

.checkbox-small:disabled {
    background-color: var(--sdNeutral5);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    height: 1em;
    width: 1em;
}


.checkbox-medium:checked {
    background-color: var(--sdBrandCntPrimary500);
    border-color: var(--sdNeutral10);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    border-width: var(--sdBorderWidth);
    height: 1.5em;
    width: 1.5em;
}

.checkbox-medium:disabled {
    background-color: var(--sdNeutral5);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    height: 1.5em;
    width: 1.5em;
}

.checkbox-large:checked {
    background-color: var(--sdBrandCntPrimary500);
    border-color: var(--sdNeutral10);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    border-width: var(--sdBorderWidth);
    height: 2em;
    width: 2em;
}

.checkbox-large:disabled {
    background-color: var(--sdNeutral5);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    border-radius: var(--sdBorderRadiusCheckbox) !important;
    height: 2em;
    width: 2em;
}


/*
 *   Dropdown
 */

.dropdown-title {
    font-size: var(--sdBodyS);
    margin-bottom: var(--sdNano);
}

.dropdown-soft-rounded {
    border-radius: var(--sdBorderSoft);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral0);
    height: 2.5em;
}


.dropdown-rounded {
    border-radius: var(--sdBorderRounded);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral0);
    height: 2.5em;
}

.dropdown-soft-rounded:disabled {
    border-radius: var(--sdBorderSoft);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral5);
    height: 2.5em;
}


.dropdown-rounded:disabled {
    border-radius: var(--sdBorderRounded);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral5);
    height: 2.5em;
}


/*
 *  Tooltip 
 */

.k-tooltip {
    background: #B9B9B9 !important;
}

    .innerTooltip {
        padding: 6px;
    }

    .visionTooltip {
        padding: 1px;
        margin-left: 2px
    }

    .visionIcon {
        color: #ce1314;
        margin-left: 0.7rem;
    }

#tooltipContainer {
    display: inline-flex;
    align-items: center; 
}


/*
 *  Text Area 
 */
.soft-rounded-text-chat {
    border-color: var(--sdNeutral10);
    border-width: var(--sdBorderWidth);
    border-radius: 1.5em !important;
    background-color: var(--sdNeutral0);
    height: 6em;
    width: 27.75em;
}

.soft-rounded-text-chat-error {
    border-color: var(--sdSemanticError);
    border-width: var(--sdBorderWidth);
    border-radius: 1.5em !important;
    background-color: var(--sdNeutra0);
    height: 6em;
    width: 27.75em;
}

.soft-rounded-text-chat-pressed {
    border-color: var(--sdNeutral20);
    border-width: var(--sdBorderWidth);
    border-radius: 1.5em !important;
    background-color: var(--sdNeutra0);
    height: 6em;
    width: 27.75em;
}


.soft-rounded-text-chat:hover {
    background-color: var(--sdBrandCntPrimary500);
    border-color: var(--sdNeutral10);
    border-radius: 0.25em !important;
    border-width: var(--sdBorderWidth);
    height: 6em;
    width: 27.75em;
}

.soft-rounded-text-chat:disabled {
    background-color: var(--sdNeutral5);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    border-radius: 0.25em !important;
    height: 6em;
    width: 27.75em;
}

.sharp-rounded-text-chat {
    border-color: var(--sdNeutral10);
    border-radius: 1.5em !important;
    background-color: var(--sdNeutral0);
    height: 6em;
    width: 27.75em;
}

.soft-rounded-text-chat-error {
    border-color: var(--sdSemanticError);
    border-radius: 1.5em !important;
    background-color: var(--sdNeutra0);
    height: 6em;
    width: 27.75em;
}

.soft-rounded-text-chat-pressed {
    border-color: var(--sdNeutral20);
    border-radius: 1.5em !important;
    background-color: var(--sdNeutra0);
    height: 6em;
    width: 27.75em;
}


.soft-rounded-text-chat:hover {
    background-color: var(--sdBrandCntPrimary500);
    border-color: var(--sdNeutral10);
    border-radius: 0.25em !important;
    height: 6em;
    width: 27.75em;
}

.soft-rounded-text-chat:disabled {
    background-color: var(--sdNeutral5);
    border-color: var(--sdNeutral10);
    border-radius: 0.25em !important;
    height: 6em;
    width: 27.75em;
}



/*
 *  Tipografica
 */     

        /* regular */
.h1-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdH1);
    line-height: var(--sdM); 
}

.display-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdDisplay);
    line-height: var(--sdL);
}

.h2-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdH2);
    line-height: var(--sdS);
}

.h3-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdH3);
    line-height: var(--sdXs);
}

.h4-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdH4);
    line-height: var(--sdXxs);
}

.h5-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdH5);
    line-height: var(--sdXxs);
}

.body-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.body-s-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-l-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.button-m-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-s-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.caption-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.overline-regular {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdRegular);
    font-size: var(--sdOverline);
    line-height: var(--sdXxxs);
}


        /* semi bold */
.h1-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdH1);
    line-height: var(--sdM);
}

.display-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdDisplay);
    line-height: var(--sdL);
}

.h2-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdH2);
    line-height: var(--sdS);
}

.h3-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdH3);
    line-height: var(--sdXs);
}

.h4-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdH4);
    line-height: var(--sdXxs);
}

.h5-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdH5);
    line-height: var(--sdXxs);
}

.body-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.body-s-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-l-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.button-m-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-s-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.caption-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.overline-semibold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdSemibold);
    font-size: var(--sdOverline);
    line-height: var(--sdXxxs);
}


        /* bold */
.h1-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdH1);
    line-height: var(--sdM);
}

.display-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdDisplay);
    line-height: var(--sdL);
}

.h2-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdH2);
    line-height: var(--sdS);
}

.h3-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdH3);
    line-height: var(--sdXs);
}

.h4-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdH4);
    line-height: var(--sdXxs);
}

.h5-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdH5);
    line-height: var(--sdXxs);
}

.body-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.body-s-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-l-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.button-m-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-s-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.caption-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.overline-bold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdBold);
    font-size: var(--sdOverline);
    line-height: var(--sdXxxs);
}



        /* extra bold  */
.h1-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdH1);
    line-height: var(--sdM);
}

.display-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdDisplay);
    line-height: var(--sdL);
}

.h2-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdH2);
    line-height: var(--sdS);
}

.h3-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdH3);
    line-height: var(--sdXs);
}

.h4-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdH4);
    line-height: var(--sdXxs);
}

.h5-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdH5);
    line-height: var(--sdXxs);
}

.body-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.body-s-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-l-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdBody);
    line-height: var(--sdXxs);
}

.button-m-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdBodyS);
    line-height: var(--sdXxxs);
}

.button-s-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.caption-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdCaption);
    line-height: var(--sdXxxs);
}

.overline-extrabold {
    font-family: var(--sdFontFamily);
    font-weight: var(--sdExtrabold);
    font-size: var(--sdOverline);
    line-height: var(--sdXxxs);
}



/* Spacing */

    /* letter*/
.letter-spacing-quarck {
    letter-spacing: var(--lsQuarck);
}

.letter-spacing-nano {
    letter-spacing: var(--lsNano);
}

.letter-spacing-xxs {
    letter-spacing: var(--lsXxs);
}

.letter-spacing-xs {
    letter-spacing: var(--lsXs);
}

.letter-spacing-s {
    letter-spacing: var(--lsS);
}

.letter-spacing-m {
    letter-spacing: var(--lsM);
}

.letter-spacing-l {
    letter-spacing: var(--lsL);
}

.letter-spacing-xl {
    letter-spacing: var(--lsXl);
}

.letter-spacing-xxl {
    letter-spacing: var(--lsXxl);
}

.letter-spacing-xxxl {
    letter-spacing: var(--lsXxxl);
}

.letter-spacing-huge {
    letter-spacing: var(--lsHuge);
}

.letter-spacing-giant {
    letter-spacing: var(--lsGiant);
}


    /* border */
.border-spacing-quarck {
    border-spacing: var(--lsQuarck);
}

.border-spacing-nano {
    border-spacing: var(--lsNano);
}

.border-spacing-xxs {
    border-spacing: var(--lsXxs);
}

.border-spacing-xs {
    border-spacing: var(--lsXs);
}

.border-spacing-s {
    border-spacing: var(--lsS);
}

.border-spacing-m {
    border-spacing: var(--lsM);
}

.border-spacing-l {
    border-spacing: var(--lsL);
}

.border-spacing-xl {
    border-spacing: var(--lsXl);
}

.border-spacing-xxl {
    border-spacing: var(--lsXxl);
}

.border-spacing-xxxl {
    border-spacing: var(--lsXxxl);
}

.border-spacing-huge {
    border-spacing: var(--lsHuge);
}

.border-spacing-giant {
    border-spacing: var(--lsGiant);
}


        /* word */
.word-spacing-quarck {
    word-spacing: var(--lsQuarck);
}

.word-spacing-nano {
    word-spacing: var(--lsNano);
}

.word-spacing-xxs {
    word-spacing: var(--lsXxs);
}

.word-spacing-xs {
    word-spacing: var(--lsXs);
}

.word-spacing-s {
    word-spacing: var(--lsS);
}

.word-spacing-m {
    word-spacing: var(--lsM);
}

.word-spacing-l {
    word-spacing: var(--lsL);
}

.word-spacing-xl {
    word-spacing: var(--lsXl);
}

.word-spacing-xxl {
    word-spacing: var(--lsXxl);
}

.word-spacing-xxxl {
    word-spacing: var(--lsXxxl);
}

.word-spacing-huge {
    word-spacing: var(--lsHuge);
}

.word-spacing-giant {
    word-spacing: var(--lsGiant);
}



/*
 *  Input 
 */
.input-title {
    font-size: var(--sdBodyS);
    margin-bottom: var(--sdNano);
}

.input-soft-rounded {
    border-radius: var(--sdBorderSoft);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral0);
    height: 2.5em;
}


.input-rounded {
    border-radius: var(--sdBorderRounded);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral0);
    height: 2.5em;
}

.input-soft-rounded:disabled {
    border-radius: var(--sdBorderSoft);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral5);
    height: 2.5em;
}


.input-rounded:disabled {
    border-radius: var(--sdBorderRounded);
    border-width: var(--sdBorderWidth);
    border-color: var(--sdNeutral10);
    background-color: var(--sdNeutral5);
    height: 2.5em;
}



/*
 *  Card Dashboard 
 *  https://mantra.mc.pt/266413d7e/p/57b6a5-card-dashboard
 */

.tabstrip-icon {
    margin-left: auto;
}

.k-tabstrip-items .k-link {
    background-color: #FFFFFF;
    width: 19rem;
    height: 4rem;
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    margin-bottom: 8px;
    margin-right: 1.5rem;
    border-left: 4px solid #DC3228;
    color: black !important;
    gap: 1rem;
    font-weight: bold;
    box-shadow: 0px 0px 0.25rem 0px #00000026;
}

.k-tabstrip-items:hover .k-link:hover {
    background-color: #DC3228 !important;
    color: white !important;
}

.k-tabstrip-items-wrapper .k-item.k-state-active {
    background-color: transparent;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-state-active {
    border-bottom: 0;
}


/*
 *  Loading 
 *  https://mantra.mc.pt/266413d7e/p/08a6d1-loading/b/27ab43
 */

.showLoaded {
    height: calc(100vh - 70px);
    width: 100%;
    position: absolute;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-border {
    background-color: rgb(255, 255, 255);
    color: gray;
}


/*
 *  Pagination  
 *  Kendo Grid 
 *  https://mantra.mc.pt/266413d7e/p/110bea-pagination
 */

.k-pager-wrap {
    background-color: white;
}

.k-pager-wrap .k-link {
    color: #6F7070;
    background: #FFFFFF;
    border: 2px solid #EBEBEB;
    border-radius: 8px;
    margin-left: 4px;
    margin-right: 4px;
}

.k-pager-wrap .k-link:hover {
    color: #6F7070;
    background: #FFFFFF;
    border: 2px solid #6F7070;
    border-radius: 8px;
}


/*
 *
 *  Button 
 *  https://mantra.mc.pt/266413d7e/p/32808f-button
 *  {Hierarchy}-{size}-{Type}
 *  
 */


.primary-s-none,
.primary-m-none,
.primary-l-none,
.primary-xl-none,
.primary-s-soft,
.primary-m-soft,
.primary-l-soft,
.primary-xl-soft,
.primary-s-rounded,
.primary-m-rounded,
.primary-l-rounded,
.primary-xl-rounded,
.secondary-s-none,
.secondary-m-none,
.secondary-l-none,
.secondary-xl-none,
.secondary-s-soft,
.secondary-m-soft,
.secondary-l-soft,
.secondary-xl-soft,
.secondary-s-rounded,
.secondary-m-rounded,
.secondary-l-rounded,
.secondary-xl-rounded,
.tertiary-s-none,
.tertiary-m-none,
.tertiary-l-none,
.tertiary-xl-none,
.tertiary-s-soft,
.tertiary-m-soft,
.tertiary-l-soft,
.tertiary-xl-soft,
.tertiary-s-rounded,
.tertiary-m-rounded,
.tertiary-l-rounded,
.tertiary-xl-rounded {
    gap: 8px;
}


    /*
        Primary
 */

    .primary-s-none:hover,
    .primary-m-none:hover,
    .primary-l-none:hover,
    .primary-xl-none:hover,
    .primary-s-soft:hover,
    .primary-m-soft:hover,
    .primary-l-soft:hover,
    .primary-xl-soft:hover,
    .primary-s-rounded:hover,
    .primary-m-rounded:hover,
    .primary-l-rounded:hover,
    .primary-xl-rounded:hover {
        background: var(--sdBrandCntPrimary700);
    }

    .primary-s-none:active,
    .primary-m-none:active,
    .primary-l-none:active,
    .primary-xl-none:active,
    .primary-s-soft:active,
    .primary-m-soft:active,
    .primary-l-soft:active,
    .primary-xl-soft:active,
    .primary-s-rounded:active,
    .primary-m-rounded:active,
    .primary-l-rounded:active,
    .primary-xl-rounded:active {
        background: var(--sdBrandCntPrimary800);
    }

.primary-s-none {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-m-none {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-l-none {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-xl-none {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}


.primary-s-soft {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-m-soft {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-l-soft {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-xl-soft {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}


.primary-s-rounded {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-m-rounded {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-l-rounded {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0;

    & svg {
        fill: white;
    }
}

.primary-xl-rounded {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: var(--sdBrandCntPrimary500);
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0;
    & svg {
        fill: white;
    }
}

 /*
        Secondary
    */

.secondary-s-none:hover,
.secondary-m-none:hover,
.secondary-l-none:hover,
.secondary-xl-none:hover,
.secondary-s-soft:hover,
.secondary-m-soft:hover,
.secondary-l-soft:hover,
.secondary-xl-soft:hover,
.secondary-s-rounded:hover,
.secondary-m-rounded:hover,
.secondary-l-rounded:hover,
.secondary-xl-rounded:hover {
    background: var(--sdBrandCntPrimary50);
}



.secondary-s-none:active,
.secondary-m-none:active,
.secondary-l-none:active,
.secondary-xl-none:active,
.secondary-s-soft:active,
.secondary-m-soft:active,
.secondary-l-soft:active,
.secondary-xl-soft:active,
.secondary-s-rounded:active,
.secondary-m-rounded:active,
.secondary-l-rounded:active,
.secondary-xl-rounded:active {
    background: var(--sdBrandCntPrimary100);
}

.secondary-s-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: white;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-m-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-l-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-xl-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}


.secondary-s-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: white;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-m-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-l-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-xl-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}


.secondary-s-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: white;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-m-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-l-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.secondary-xl-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: white;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: var(--sdBorderMc) solid;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}


/*
   Tertiary
 */

.tertiary-s-none:hover,
.tertiary-m-none:hover,
.tertiary-l-none:hover,
.tertiary-xl-none:hover,
.tertiary-s-soft:hover,
.tertiary-m-soft:hover,
.tertiary-l-soft:hover,
.tertiary-xl-soft:hover,
.tertiary-s-rounded:hover,
.tertiary-m-rounded:hover,
.tertiary-l-rounded:hover,
.tertiary-xl-rounded:hover {
    background: var(--sdBrandCntPrimary50);
    color: var(--sdBrandCntPrimary800);

    & svg {
        fill: var(--sdBrandCntPrimary800);
    }
}



.tertiary-s-none:active,
.tertiary-m-none:active,
.tertiary-l-none:active,
.tertiary-xl-none:active,
.tertiary-s-soft:active,
.tertiary-m-soft:active,
.tertiary-l-soft:active,
.tertiary-xl-soft:active,
.tertiary-s-rounded:active,
.tertiary-m-rounded:active,
.tertiary-l-rounded:active,
.tertiary-xl-rounded:active {
    background: var(--sdBrandCntPrimary100);
    color: var(--sdBrandCntPrimary700);

    & svg {
        fill: var(--sdBrandCntPrimary700);
    }
}

.tertiary-s-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: none;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-m-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-l-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-xl-none {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderNone);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}


.tertiary-s-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: none;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-m-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-l-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-xl-soft {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderSoft);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}


.tertiary-s-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdXs);
    background: none;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-m-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-l-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

.tertiary-xl-rounded {
    color: var(--sdBrandCntPrimary500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: fit-content;
    height: var(--sdS);
    background: none;
    border-radius: var(--sdBorderRounded);
    flex: none;
    flex-grow: 0;
    border: 0px;

    & svg {
        fill: var(--sdBrandCntPrimary500);
    }
}

    .primary-s-none:disabled,
    .primary-m-none:disabled,
    .primary-l-none:disabled,
    .primary-xl-none:disabled,
    .primary-s-soft:disabled,
    .primary-m-soft:disabled,
    .primary-l-soft:disabled,
    .primary-xl-soft:disabled,
    .primary-s-rounded:disabled,
    .primary-m-rounded:disabled,
    .primary-l-rounded:disabled,
    .primary-xl-rounded:disabled,
    .secondary-s-none:disabled,
    .secondary-m-none:disabled,
    .secondary-l-none:disabled,
    .secondary-xl-none:disabled,
    .secondary-s-soft:disabled,
    .secondary-m-soft:disabled,
    .secondary-l-soft:disabled,
    .secondary-xl-soft:disabled,
    .secondary-s-rounded:disabled,
    .secondary-m-rounded:disabled,
    .secondary-l-rounded:disabled,
    .secondary-xl-rounded:disabled,
    .tertiary-s-none:disabled,
    .tertiary-m-none:disabled,
    .tertiary-l-none:disabled,
    .tertiary-xl-none:disabled,
    .tertiary-s-soft:disabled,
    .tertiary-m-soft:disabled,
    .tertiary-l-soft:disabled,
    .tertiary-xl-soft:disabled,
    .tertiary-s-rounded:disabled,
    .tertiary-m-rounded:disabled,
    .tertiary-l-rounded:disabled,
    .tertiary-xl-rounded:disabled {
        background-color: var(--sdNeutral5);
        color: var(--sdNeutral40);
        border-color: transparent;

        & svg {
            fill: var(--sdNeutral40);
        }
    }
 


/*
 *
 *  Rating
 *  https://mantra.mc.pt/266413d7e/p/52adcb-rating
 *  Kendo Rating Component
 *  Template Adicional Necessária 
 *
 */

.k-rating-item {
    color: #EB9302;
}

.k-rating-item.k-state-selected,
.k-rating-item.k-state-hover {
    color: #EB9302;
}

/*
 *
 *  Chip
 *  https://mantra.mc.pt/266413d7e/p/290a66-chips
 */

.chip-default-x-small {
    background-color: var(--sdNeutral0);
    border: solid 2px var(--sdNeutral10);
    border-radius: 24px;
    padding: 4px 16px;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-default-x-small:disabled {
    background-color: var(--sdNeutral5);
    border-color: var(--sdNeutral0);
}

.chip-default-small {
    background-color: var(--sdNeutral0);
    border: solid 2px var(--sdNeutral10);
    border-radius: 24px;
    padding: 8px 16px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-default-small:disabled {
    background-color: var(--sdNeutral5);
    border-color: var(--sdNeutral0);
}

.chip-default-medium {
    background-color: var(--sdNeutral0);
    border: solid 2px var(--sdNeutral10);
    border-radius: 24px;
    padding: 12px 16px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-default-medium:disabled {
    background-color: var(--sdNeutral5);
    border-color: var(--sdNeutral0);
}

.chip-default-large {
    background-color: var(--sdNeutral0);
    border: solid 2px var(--sdNeutral10);
    border-radius: 24px;
    padding: 12px 16px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-default-large:disabled {
    background-color: var(--sdNeutral5);
    border-color: var(--sdNeutral0);
}


/*
 *
 *  Divider
 *  https://mantra.mc.pt/266413d7e/p/237729-divider
 */

.divider {
    opacity: 1;
    height: 2px !important;
}