/* Root / Reset */
* {
    box-sizing: border-box;
}

input::-ms-reveal {
    display: none;
}


@font-face {
    font-family: RoobertCEZ;
    src: url('../fonts/RoobertCEZ-Regular.ttf');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: RoobertCEZ;
    src: url('../fonts/RoobertCEZ-Medium.ttf');
    font-style: normal;
    font-weight: 600;
}
@font-face {
    font-family: RoobertCEZ;
    src: url('../fonts/RoobertCEZ-Bold.ttf');
    font-style: normal;
    font-weight: bold;
}
@font-face {
    font-family: RoobertCEZ;
    src: url('../fonts/RoobertCEZ-Light.ttf');
    font-style: italic;
    font-weight: normal;
}



html {
    font-size: 62.5%;
}

:root {
    --cas-theme-primary:var(--primaryColor);
    --cas-theme-primary-bg: rgba(21, 62, 80, 0.2);
    --cas-theme-primary-light: #006d85;
    --cas-theme-secondary: #74C163;
    --cas-theme-success: var(--cas-theme-secondary);
    --cas-theme-danger: var(--mdc-theme-error);
    --cas-theme-warning: #e6a210;
    --cas-theme-border-light: 1px solid rgba(0, 0, 0, .2);
    --cas-theme-twitter-color: #55acee;
    --cas-theme-vimeo-color: #1ab7ea;
    --cas-theme-vk-color: #587ea3;
    --cas-theme-yahoo-color: #720e9e;
    --cas-theme-google-color: #CC5445;
    --cas-theme-facebook-color: #3B5998;
    --atlassian-theme-primary: #0747a6;
    --mdc-theme-primary: var(--cas-theme-primary, #153e50);
}

.atlassian {
    --mdc-theme-primary: var(--atlassian-theme-primary, #0747a6);
}


/*variables  ------------------------------------------------------------------------------*/
:root {
    --sectionSpacing: 40px;
    --containerHorSpacing: 16px;
    --panelBannerSpacing: 24px;
    --headHeight: 72px;
    --headMainMenu: 60px;
    --headHeight: auto;


    --Orange-50: #FF9166 ;
    --Brand_orangeL: #FF5F1F;
    --Brand-White: #FFF;
    --primaryColor: #FF5F1F;
    --darkPrimaryColor:  #BF4717 ;
    --lightPrimaryColor:  #FF6D33 ;
    --Backgroud_light: #F0F0F2;
    --Grey_140: #505061;
     --Grey120: #7C7C88;
    --Semantic-Danger-100: #DD0707;
    --Semantic-Danger-5:  #FFECEF;
    --Brand-Primary-dark:  #242439;
}


.minMd {
    --sectionSpacing: 56px;
    --widgetHeaderTopSpacing: 40px;
}

.minLg {
    --containerHorSpacing: 56px;
    --panelBannerSpacing: 56px
}

.minSm .onlyXs {
    display: none!important;
}



.onlyMd {
    display: none!important;
}
.minMd .onlyMd {
    display: flex!important;
    flex-direction: column;
}





/* Main layout  ------------------------------------------------------------------------------*/
html body {
    font-size: 1.6rem;
    margin: 0;
    font-family: RoobertCEZ,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background: var(--Backgroud_light);
    line-height: initial;
}

.root {
    background: var(--Backgroud_light);
    position: relative;
    display: flex;
    flex-direction: column;
}


#main-content, #content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.min-vh-100 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-direction: column;
    margin: 0;
    flex-grow: 1;
    max-height: 20vh;
}


.header .gridContainer {
    padding: 0 1.6rem;
    max-width: 1440px;
    margin: 0 auto;
}

.minMd .header {
    max-height: 100%;
    flex-grow: 0;
}



.title {
    text-align: center;
    color: var(--Grey_140, #505061);
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    margin: 0;
}
.minMd .title {
    font-size: 26px;
}
.title.gutterBottom {
    margin-bottom: 56px;
}

.bodyText {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height:22px;
}
.bodyText.gutterBottom {
    margin-bottom: 16px;
}

.descriptionText {
    font-size: 12px;
    line-height: 20px;
    font-style: normal;
    font-weight: 400;
}
.text-center {
    text-align: center;
}


.dFlex {
    display: flex;
}
.flexDirectionColumn {
    flex-direction: column;
}
.alignItemsCenter {
    align-items: center;
}


.tokeInputBlock  .formGroup {
    width: 100%;
    margin-bottom: 24px;
}
.minMd .tokeInputBlock  .formGroup{
    max-width: 320px;
}

.mainHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 24px 0;
}
.minMd .mainHeader {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    height: 156px;
}

.cas-logo {
    height: 56px;
}

.minMd .cas-logo {
    height: 88px;
}


.mainContent {
    flex-grow: 1;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.mainContentIn {
    display: flex;
    position: relative;
    flex-grow: 1;
    min-height: 50vh;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    max-width: 1440px;
    z-index: 1;
    justify-content: flex-start;
}



.loginContainer {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}



/*grid container ------------------------------------------------------------------------------*/

.gridContainer {
    width: 100%;
    margin: var(--containerTopSpacing) auto 0 auto;
    display: grid;
    padding: 0 var(--containerHorSpacing);
    grid-gap: 1.6rem;
    flex-grow: 1;
    grid-template-columns: repeat( 12, [col] 1fr );
}

.gridContainer .gridContainerItem {
    grid-column:  col 1/ span 12 ;
    min-width: 0;
    display: flex;
    flex-direction: column;
}


.gridContainer {
    width: 100%;
    margin: var(--containerTopSpacing) auto 0 auto;
    display: grid;
    padding: 0 var(--containerHorSpacing);
    grid-gap: 1.6rem;
    flex-grow: 1;
    grid-template-columns: repeat(12, [col] 1fr);
}
.gridContainer .gridContainerItem {
    grid-column: col 1 / span 12;
    min-width: 0;
}

.gridContainer.noSpacing{
    margin-top: 0;
}

.minMd .gridContainer.small .gridContainerItem {
    grid-column: col 3 / span 8;
}




/*panels ------------------------------------------------------------------------------*/

.panel {
    box-shadow: none;
    margin-bottom: 0;
    position: relative;
    border-radius: 8px;
    padding: 40px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-grow: 1;
}

.panel.panelWhite {
    background: white;
    color: black;
}
.panel.panelDark {
    background: var(--Brand-Primary-dark, #242439);
    color: #fff;
}

.panel.radiusnone {
    border-radius: 0;
}
.panel.radiussmall {
    border-radius: 8px;
}
.panel.radiusmedium {
    border-radius: 16px;
}
.panel.radiuslarge {
    border-radius: 24px;
}



.footerContainer {
    display: flex;
    gap: 16px;
    color: var(--Brand-White, #FFF);
    flex-direction: column;

    max-width: 1114px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 32px;
    width: 100%;
}

.minMd .footerContainer {
    flex-direction: row;
    gap: 32px;
}

.footerContainer .content{
    flex-grow: 1;
}

.footerContainer .subTitle{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.footerContainer .description{
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.2px;
    padding-bottom: 16px;
    margin-bottom: 0;
}
.footerContainer .heading{
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.2px;
    margin: 0;
    margin-bottom: 8px;
}
.footerContainer .description.last{
    padding-bottom: 0;
}
.footerContainer .phone{
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
}


/*mui override*/

body .mui-btn {
    padding: 18px 32px;
    min-height: 56px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    box-sizing: border-box;
    text-align: center;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

    line-height: normal;
    border-radius: 8px;
    outline: 0;
    height: auto;
    background: transparent;
    text-transform: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.mui-link {
    border: 0;
    padding: 0;
    font-size: 14px;
    color: var(--Grey_140, #505061);
    cursor: pointer;
    outline: none;
    background: none;
}

.mui-link--primary {
    color: var(--Brand_orange, #FF5F1F);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.6px;
}

body .mui-btn.mui-btn--primary {
    background: var(--primaryColor);
}
body .mui-btn.mui-btn--primary:focus,  body .mui-btn.mui-btn--primary:hover {
    box-shadow: none;
    background: var(--primaryColor);
    outline: 0;
}

body .mui-btn.mui-btn--primary:active {
    background: var(--primaryColor);
    box-shadow: none;
    outline: 0;
}




body .mui-btn--raised, .mui-btn--raised:focus {
    box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.08);
}

body .mui-btn--raised:hover, body .mui-btn--raised:active, body .mui-btn--raised:active:hover {
    z-index: 1;
    box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.08);
}

body .mui-btn--primary.mui-btn--raised {
    background: linear-gradient(125deg, var(--lightPrimaryColor) 0%, var(--primaryColor) 100%);
    box-shadow: 0px 16px 32px rgba(242, 79, 0, 0.12), 0px 8px 16px rgba(242, 79, 0, 0.12), 0px 4px 8px rgba(242, 79, 0, 0.12), 0px 2px 4px rgba(242, 79, 0, 0.12), 0px 1px 2px rgba(242, 79, 0, 0.12);
    background-color: var(--primaryColor);
}


body .mui-btn--primary.mui-btn--raised:hover {
    background: linear-gradient(0deg, rgba(187, 61, 0, 0.25), rgba(187, 61, 0, 0.25)), linear-gradient(125deg, var(--lightPrimaryColor) 0%, var(--primaryColor) 100%);
    box-shadow: 0px 32px 64px rgba(242, 79, 0, 0.12), 0px 16px 32px rgba(242, 79, 0, 0.12), 0px 8px 16px rgba(242, 79, 0, 0.12), 0px 4px 8px rgba(242, 79, 0, 0.12), 0px 2px 4px rgba(242, 79, 0, 0.12), 0px 1px 2px rgba(242, 79, 0, 0.12);
    background-color: var(--primaryColor);
    outline: 0;
}

body .mui-btn--primary.mui-btn--raised:active {
    background: linear-gradient( 0deg, rgba(187, 61, 0, 0.5), rgba(187, 61, 0, 0.5)), linear-gradient(125deg, var(--lightPrimaryColor) 0%, var(--primaryColor) 100%);
    box-shadow: 0px 4px 8px rgba(242, 79, 0, 0.24), 0px 2px 4px rgba(242, 79, 0, 0.24), 0px 1px 2px rgba(242, 79, 0, 0.24);
}

/*flat*/

body .mui-btn--primary.mui-btn--flat {
    color: var(--primaryColor);
    background: none;
}
body .mui-btn--primary.mui-btn--flat:active, body .mui-btn--primary.mui-btn--flat:focus, body .mui-btn--primary.mui-btn--flat:hover{
    color: var(--primaryColor);
    background-color: rgb(255 95 31 / 15%);
}

body .mui-btn--primary.mui-btn--flat .mui-ripple {
    background-color: var(--primaryColor);
}
@media (hover: none) {
    body .mui-btn--primary.mui-btn--flat:hover {
        background: none;
    }
    body .mui-btn--primary.mui-btn--flat:active {
        background: none;
    }
}

/*outlined*/

body .mui-btn.mui-btn--outlined.mui-btn--small {
    padding: 1.1rem 2.3rem;
    font-size: 1.4rem;
}

body .mui-btn.mui-btn--outlined {
    padding: 1.6rem 3.1rem 1.6rem 3.1rem;
    color: var(--Grey_140, #505061);
    border: 0.1rem solid var(--Grey_140, #505061);
    background: rgba(0, 0, 0, 0);
}

body .mui-btn.mui-btn--outlined:active, body .mui-btn.mui-btn--outlined:focus, body .mui-btn.mui-btn--outlined:hover{
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
}

body .mui-btn.mui-btn--outlined.mui-btn--small {
    padding: 1.1rem 2.3rem;
    font-size: 1.4rem;
}





body .mui-btn--primary.mui-btn--outlined {
    padding: 2rem 3.1rem 1.8rem 3.1rem;
    color: #fff;
    border: 0.1rem solid var(--primaryColor);
    background: rgba(0, 0, 0, 0);
}
.mui-btn--primary.mui-btn--outlined.primaryColor {
    color: var(--primaryColor);
}
body .mui-btn--primary.mui-btn--outlined:active, body .mui-btn--primary.mui-btn--outlined:focus, body .mui-btn--primary.mui-btn--outlined:hover{
    background-color: rgba(242, 79, 0, 0.12);
    box-shadow: none;
}


body .mui-ripple.mui--is-animating {
    transition: transform 0.6s cubic-bezier(0,0,.2,1),width 0.6s cubic-bezier(0,0,.2,1),height 0.6s cubic-bezier(0,0,.2,1),opacity 0.6s cubic-bezier(0,0,.2,1),-webkit-transform 0.6s cubic-bezier(0,0,.2,1);}

body .mui-ripple.mui--is-visible {
    opacity: 0.24;
}






/*form --------------------------------------*/

.formContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-bottom: 16px;
}
form {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

body .mui-textfield {
    display: flex;
    position: relative;
    padding: 0;
    margin-bottom: 12px;
    flex-direction: column;
}
body .mui-textfield > input{
    background: #fff;
    border: 1px solid #fff;
    padding: 12px 16px;
    height: auto;
    min-height: 48px;
    border-radius: 8px;
    color: #242439;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px;
}

body .mui-textfield > input::placeholder{
    color: #7C7C88
}

body .mui-textfield > input:focus {
    margin: 0;
    height: auto;
}


body .mui-textfieldAddon  > input {
    padding-right: 40px;
}
body .mui-textfieldAddon .addon {
    position: absolute;
    right: 16px;
    top: 12px;
}

.mui-textfield.mui-textfield--float-label > label {
    color: #737373;
}



#eyeSlash{
    display: none;
}

#eye{
    display: flex;
    cursor: pointer;
}


body .mui-textfield--float-label > input:not(:focus).mui--is-not-empty ~ label, body .mui-textfield--float-label > input:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, body .mui-textfield--float-label > input:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, body .mui-textfield--float-label > textarea:not(:focus).mui--is-not-empty ~ label, body .mui-textfield--float-label > textarea:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, body .mui-textfield--float-label > textarea:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label {
    font-size: 13px;
    color: #737373;
}

body .mui-textfield--float-label>input:focus~label, body .mui-textfield--float-label>textarea:focus~label {
    font-size: 13px;

}



#loginErrorsPanel {
    position: fixed;
    max-width: 572px;
    padding: 0.8rem 1.6rem;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--headHeight) + var(--headMainMenu) + 1.6rem);
    transition: top cubic-bezier(0.4, 0, 0.2, 1) 300ms;
    z-index: 500;
}

.alert-info {
    background: #fff;
    color: #333;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.08), 0px 16px 32px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.6rem 1.6rem 1.6rem 2.4rem;
    position: relative;
    text-align: left;
    max-width: 560px;
    animation: zoom cubic-bezier(0.4, 0, 0.2, 1) 240ms;
    display: flex;
    align-items: center;
}

.alert-danger {
    background: #E50000;
    color: #fff;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.08), 0px 16px 32px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.6rem 1.6rem 1.6rem 2.4rem;
    position: relative;
    text-align: left;
    max-width: 560px;
    animation: zoom cubic-bezier(0.4, 0, 0.2, 1) 300ms;
    display: flex;
    align-items: center;
}
.alert-danger p {
    margin: 0;
}
.alert-danger .alertList {
    margin-right: 1.6rem;
    flex-grow: 1;
}

@-webkit-keyframes zoom {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes zoom {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.closeMessage {
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

    font-weight: 600;
    line-height: 1.6rem;
    border-radius: 0.4rem;
    letter-spacing: 0.015em;
    color: #fff;
    width: 4rem;
    height: 4rem;
    padding: 0rem;
    border: 0.1rem solid #fff;
    background: rgba(0, 0, 0, 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    position: relative;

}

.closeMessage svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.formError {
    position: relative;
    top: 100%;
    color: #E50000;
    margin: 0;
    margin-top: 4px;
    text-align: left;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.4px;
    letter-spacing: 0;
    text-transform: none;
    display: none;
}

body .mui-textfield>input:focus, body  .mui-textfield>textarea:focus {
    border: 1px solid var(--Orange-50, #FF9166);
    background: var(--Brand-White, #FFF);
}



body .mui-textfield>input:invalid:focus:required.mui--is-empty.mui--is-touched.mui--is-dirty,
body .mui-textfield>textarea:invalid:focus:required.mui--is-empty.mui--is-touched.mui--is-dirty,
body .formSubmitted .mui-textfield>input:invalid:focus:required.mui--is-empty,
body .formSubmitted .mui-textfield>textarea:invalid:focus:required.mui--is-empty {
    border-color: #E50000;
}

body .mui-textfield > input:invalid:not(:focus):not(:required).mui--is-dirty,
body .mui-textfield > input:invalid:not(:focus):required.mui--is-empty.mui--is-touched.mui--is-dirty,
body .mui-textfield > input:invalid:not(:focus):required.mui--is-not-empty.mui--is-dirty,
body .mui-textfield > input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty).mui--is-dirty,
body .mui-textfield > input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty).mui--is-dirty,
body .mui-textfield > input:not(:focus).mui--is-invalid:not(:required).mui--is-dirty,
body .mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty,
body .mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-not-empty.mui--is-dirty,
body .mui-textfield > input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty).mui--is-dirty,
body .mui-textfield > input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty).mui--is-dirty {
    border-color: #E50000;
    border-width: 1px;
    height: auto;
    background: var(--Semantic-Danger-5, #FFECEF);
    margin: 0;
}


body .mui-textfield>input:focus~label, body .mui-textfield>textarea:focus~label {
    color: var(--cas-theme-primary);
}

.formSubmitted .mui-textfield>input:invalid:required.mui--is-empty ~ .formError,
.formSubmitted .mui-textfield>input.mui--is-invalid:required.mui--is-empty  ~ .formError,
.formSubmitted .mui-textfield>textarea:invalid:required.mui--is-empty ~ .formError,
.formSubmitted .mui-textfield>textarea.mui--is-invalid:required.mui--is-empty  ~ .formError {
    display: block;
}
.formSubmitted .mui-textfield>input:invalid:required.mui--is-empty ~ label,
.formSubmitted .mui-textfield>input.mui--is-invalid:required.mui--is-empty  ~ label,
.formSubmitted .mui-textfield>textarea:invalid:required.mui--is-empty ~ label,
.formSubmitted .mui-textfield>textarea.mui--is-invalid:required.mui--is-empty  ~ label {
    color: #E50000;
}


.formSubmitted .mui-textfield > input:invalid:not(:focus):not(:required),
.formSubmitted .mui-textfield > input:invalid:not(:focus):required.mui--is-empty,
.formSubmitted .mui-textfield > input:invalid:not(:focus):required.mui--is-not-empty,
.formSubmitted .mui-textfield > input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),
.formSubmitted .mui-textfield > input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
.formSubmitted .mui-textfield > input:not(:focus).mui--is-invalid:not(:required),
.formSubmitted .mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-empty,
.formSubmitted .mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-not-empty,
.formSubmitted .mui-textfield > input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),
.formSubmitted .mui-textfield > input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
.formSubmitted .mui-textfield > textarea:invalid:not(:focus):not(:required),
.formSubmitted .mui-textfield > textarea:invalid:not(:focus):required.mui--is-empty,
.formSubmitted .mui-textfield > textarea:invalid:not(:focus):required.mui--is-not-empty,
.formSubmitted .mui-textfield > textarea:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),
.formSubmitted .mui-textfield > textarea:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
.formSubmitted .mui-textfield > textarea:not(:focus).mui--is-invalid:not(:required),
.formSubmitted .mui-textfield > textarea:not(:focus).mui--is-invalid:required.mui--is-empty,
.formSubmitted .mui-textfield > textarea:not(:focus).mui--is-invalid:required.mui--is-not-empty,
.formSubmitted .mui-textfield > textarea:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),
.formSubmitted .mui-textfield > textarea:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) {
    border: 1px solid var(--Semantic-Danger-100, #DD0707);
    background: var(--Semantic-Danger-5, #FFECEF);
    height: auto;
}


.mui-textfield>input:invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty ~ .formError,
.mui-textfield>input.mui--is-invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty  ~ .formError,
.mui-textfield>textarea:invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty ~ .formError,
.mui-textfield>textarea.mui--is-invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty  ~ .formError {
    display: block;
}

.mui-textfield>input:invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty ~ label,
.mui-textfield>input.mui--is-invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty  ~ label,
.mui-textfield>textarea:invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty ~ label,
.mui-textfield>textarea.mui--is-invalid:required.mui--is-empty.mui--is-touched.mui--is-dirty  ~ label {
    color: #E50000;
}


/* Hide the default checkbox */
input[type=checkbox] {
    visibility: hidden;
}

.styledCheckbox {
    position: relative;
    min-height: 28px;
    display: flex;
    align-items: center;
    padding-left: 40px;
    cursor: pointer;
}

/* Creating a custom checkbox
    based on demand */
.geekmark {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    color: #fff;
    width: 2.4rem;
    border: 0;
    height: 2.4rem;
    margin: 0.2rem;
    padding: 0;
    border-radius: 0.4rem;
    box-shadow: 0px 0px 0px 1px #959595;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.styledCheckbox input:hover~.geekmark {
    box-shadow: 0px 0px 0px 2px var(--lightPrimaryColor);
    background-color: rgb(254 248 245);
}


.styledCheckbox input:checked~.geekmark {
    background-color: var(--lightPrimaryColor);
    box-shadow: 0px 0px 0px 2px var(--lightPrimaryColor);
}
.styledCheckbox input:checked:hover~.geekmark {
    background-color: var(--primaryColor);
    box-shadow: 0px 0px 0px 2px var(--primaryColor);
}



.geekmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Display checkmark when checked */
.styledCheckbox input:checked~.geekmark:after {
    display: block;
}

/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and
    showing only two border to make it look
    like a tickmark */
.styledCheckbox .geekmark:after {
    left: 10px;
    top: 6px;
    color: white;
    bottom: 6px;
    width: 5px;
    height: 10px;
    border: 1px solid;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}


/* actionFooter */


.actionFooter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

.actionFooter .mui-btn {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
}

.actionFooter .mui-btn + .mui-btn {
    margin: 0;
}

.actionFooter .loginBtn {
    width: 100%;
    font-weight: 600;
}
.actionFooter .lostPassBtn {
    margin-left: 16px;
    margin-right: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: 600;
}
.actionFooter .registrationBtn {
    flex-grow: 1;
    width: 100%;
    font-weight: 600;
}

.minMd .actionFooter {
    padding-top: 38px;
}

.minMd .actionFooter .lostPassBtn {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--Brand_orange, #FF5F1F);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.6px;
    margin: 0;
}
.minMd .actionFooter .lostPassBtn:hover {
    text-decoration: underline;
}


.withoutLoginContainer {
    margin-top: 12px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/*helpers --------------------------------------------------*/
.noWrap {
    white-space: nowrap!important;
}

/*spacing --------------------------------------------------*/


.mb-small  {
    margin-bottom: 12px;
}

.mb-medium  {
    margin-bottom: 24px;
}

.mb-large  {
    margin-bottom: 32px;
}




/*authlist*/

.authList {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.authList li {
    margin-bottom: 12px;
    display: flex;

}
.authList li .mui-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-grow: 1;
    padding: 15px 24px;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 22.4px;
    text-transform: none;
    border-radius: 8px;
    font-weight: 600;
}

.authList li .authListBtnText {
    min-width: 180px;
    text-align: left;
}

.authList li  .mui-btn .icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    flex-shrink: 0;
}

.orBlock {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.4px;
    color: var(--Grey_140, #505061);
    margin-top: 4px;
    margin-bottom: 16px;
    text-align: center;
}

.appHeader {
    color: #fff;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.iconList {
    margin: 0;
    padding: 0;
}

.iconList.iconList--Dash li:before {
    content: '';
    display: flex;
    width: 8px;
    height: 1px;
    background: var(--primaryColor);
    margin-right: 8px;
    flex-shrink: 0;
    margin-top: 10px;
}

.iconList li {
    padding: 2px 0;
    display: flex;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2rem;
}


.footer {
    width: 100%;
    margin: 0 auto;
    margin-top: 0;
    max-width: 1440px;
}
.footer .footerInfoIcon {
    width: 48px;
    height: 48px;
    margin-top: -0.8rem;
    margin-left: 0.8rem;
    margin-right: -0.8rem;
    color: #959595;
}
.footer p {
    margin-bottom: 0;
}
.footer ul {
    padding: 0;
    display: flex;
    margin-top: 3.2rem;
    align-items: center;
    margin-bottom: 4rem;
    flex-direction: column;
    list-style: none;
}
.footer ul li {
    padding: 0 0 16px 0;
}
.footer ul li a {
    color: #B8B3AD;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2rem;
    cursor: pointer;
}

.footer .panelGrid {
    display: flex;
    flex-direction: column;
    margin: 0 -8px;
}
.footer .panelGrid > .panel {
    margin: 0 8px;
    margin-bottom: 8px;
}

.minLg .footer .panelGrid {
 flex-direction: row;
}


.minSm .footer .footerInfoIcon {
    margin-top: -1.6rem;
    margin-right: -1.6rem;
}

.minMd .footer .footerInfoIcon {
    margin-top: -2.4rem;
    margin-right: -2.4rem;
}

.minLg .footer ul {
    flex-direction: row;
}

.minLg .footer ul li {
    margin-left: 40px;
}

.minLg .footer ul li:first-child {
    margin-left: 0;
}

.minLg .footer ul li:nth-child(3) {
    margin-left: auto;
}


.spacer {
    flex-grow: 1;
    min-height: 12px;
}


.gdpr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    color: var(--Grey120, #7C7C88);
    margin-bottom: 16px;
}
.gdpr .divider {
    height: 12px;
    width: 1px;
    background: var(--Grey120, #7C7C88);
    margin: 0 4px;
}

.gdpr .helperDivider {
    width: 100%;
}

.minSm .gdpr .helperDivider {
    height: 12px;
    width: 1px;
    background: var(--Grey120, #7C7C88);
    margin: 0 4px;
}

.gdpr a {
    text-decoration: underline;
    color: var(--Grey120, #7C7C88);
}

#btn-gdpr {
    z-index: 1;
}