:root {
    --primaryBlue: #2AB2D9;
    --primaryBlueHover: #28a6c9;
    --primaryBlueDarker: #238fad;
    --primaryBlueDarkerAlpha1: #238fad7a;
    --primaryBlueLighterAlpha1: #238fad3f;
    --primaryBlueLighterAlpha2: #edeff985;
    --primaryBlueLighterAlpha3: #fafdfd;
    --lightBlue: #EDF7F9;
    --bordeaux: #6C1B5D;
    --bordeauxHover: #5a184e;
    --darkBordeaux: #423C41;
    --white: #fff;
    --mainBg: #CDEBFB;
    --gray: #a19a9f;
    --lightGray: #C9D0D6;
}

* {
    font-family: 'Ubuntu', sans-serif;
}

body {
    background-color: var(--mainBg);
}

.FullContent {
    width: 100%;
    min-height: 100vh;
    /* background-color: var(--mainBg) */
}

.SideBar {
    height: 100%;
    width: 320px;
    min-width: 320px;
    position: fixed;
    background-color: var(--white);
    /* -webkit-box-shadow: 0px 0px 30px rgba(114, 130, 145, 0.2);
    box-shadow: 0px 0px 30px rgba(114, 130, 145, 0.2); */
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    overflow: auto;
}

body.SideBarClosed .SideBar {
    -webkit-transform: translate3d(-265px, 0, 0);
    transform: translate3d(-265px, 0, 0);
}

.MainContent {
    background-color: var(--white);
    width: calc(100% - 350px);
    width: calc(100% - 331px);
    /* width: calc(100% - 321px); */
    right: 0;
    position: absolute;
    min-height: 100vh;
    /* -webkit-box-shadow: 0px 0px 30px rgba(114, 130, 145, 0.2);
    box-shadow: 0px 0px 30px rgba(114, 130, 145, 0.2); */
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    padding: 20px 30px
}

body.SideBarClosed .MainContent {
    width: calc(100% - 56px);
}

.LogoCleo {
    display: block;
    padding-left: 30px;
    padding-right: 30px;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

    .LogoCleo img {
        display: block;
        width: 100%;
        max-width: 280px;
    }

body.SideBarClosed .LogoCleo {
    opacity: 0;
}

.ToggleMenuContainer {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ToggleMenu {
    width: 45px;
    height: 45px;
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lightBlue);
    cursor: pointer
}

    .ToggleMenu .fa {
        font-size: 24px;
        line-height: 13px;
        font-weight: 900;
        color: var(--primaryBlue);
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }

body.SideBarClosed .ToggleMenu .fa {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.LoggedinUser {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 35px 0;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

body.SideBarClosed .LoggedinUser {
    opacity: 0
}

.LoggedinUser img {
    border-radius: 100px;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
}

.LoggedInUserName {
    color: var(--darkBordeaux);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.LoggedInUserTitle {
    color: var(--gray);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.1px;
}


.MainNav {
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

body.SideBarClosed .MainNav {
    opacity: 0;
    pointer-events: none;
}

.GrandParentNavItem {
    padding: 0px 10px;
    color: var(--primaryBlue);
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

    .GrandParentNavItem.active {
        padding: 10px 10px;
        background-color: var(--primaryBlue);
        color: var(--white)
    }

.GrandParentNavItemTitle {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

    .GrandParentNavItemTitle:after {
        content: '\f107';
        font-family: FontAwesome;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
    }

.GrandParentNavItem.active .GrandParentNavItemTitle:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}


.ParentNavItem {
    padding: 0px 0px 0px 0px;
}

.ParentNavItemTitle {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

    .ParentNavItemTitle:after {
        font-weight: 300;
        content: '\f107';
        font-family: FontAwesome;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
    }

.ParentNavItem.active .ParentNavItemTitle:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ChildrenItems .NavItem,
.SemiParentNavItem .NavItem {
    font-size: 15px;
    margin: 0px 20px;
    padding: 10px 20px;
    border-radius: 5px;
    display: block;
    color: inherit;
    text-decoration: none;
}

    .ChildrenItems .NavItem.active,
    .SemiParentNavItem .NavItem.active {
        background-color: var(--white);
        color: var(--bordeaux);
        font-weight: 600;
        -webkit-box-shadow: 0px 0px 10px var(--primaryBlueDarker);
        box-shadow: 0px 0px 10px var(--primaryBlueDarker);
    }


.ChildrenItems,
.ParentItems {
    display: none;
}

.GrandParentNavItem.active .ParentItems {
    display: block;
}

.ParentNavItem.active .ChildrenItems {
    display: block;
}

.SingleNavItem {
    margin: 0px 15px;
    padding: 10px 15px;
    color: var(--primaryBlue);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
}

    .SingleNavItem:hover {
        text-decoration: none;
        color: var(--primaryBlue);
    }

    .SingleNavItem.active {
        background-color: var(--white);
        color: var(--bordeaux);
        font-weight: 600;
        -webkit-box-shadow: 0px 0px 10px var(--primaryBlueDarkerAlpha1);
        box-shadow: 0px 0px 10px var(--primaryBlueDarkerAlpha1);
    }

    .SingleNavItem .fa {
        margin-right: 10px;
        font-size: 18px
    }

.LineSeperator {
    margin: 20px 0;
    width: 100%;
    height: 1px;
    background-color: var(--lightBlue);
}

.SeperatorS {
    margin: 10px 0 0;
}

.SeperatorM {
    margin: 20px 0 0;
}

.SeperatorL {
    margin: 30px 0 0;
}

.SeperatorXL {
    margin: 40px 0 0;
}






.LoginContainer {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--mainBg);
}

.LoginBox {
    width: 100%;
    padding: 30px;
    border-radius: 20px;
    max-width: 340px;
    background-color: var(--white);
    -webkit-box-shadow: 0px 0px 10px var(--primaryBlueDarkerAlpha1);
    box-shadow: 0px 0px 10px var(--primaryBlueDarkerAlpha1);
}

    .LoginBox img {
        display: block;
        max-width: 280px;
    }

    .LoginBox h1 {
        color: var(--darkBordeaux);
        font-size: 18px;
        font-weight: 700;
        margin: 30px 0 20px;
    }

.InputElement label,
.InputElement .custom_label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--bordeaux);
    margin-bottom: 6px;
}

.InputElement input {
    /* width:100%;
    height:51px;
    padding:10px 16px;
    border-radius: 5px;
    border:1px solid var(--lightGray);
    background-color: var(--lightBlue); */
}

.InputElement .dx-texteditor-container {
    width: 100%;
    height: 51px;
    /* padding:10px 16px; */
    border-radius: 5px;
    border: 1px solid var(--lightGray);
    background-color: var(--lightBlue);
}

.InputElement .dx-textarea .dx-texteditor-container {
    width: 100%;
    height: auto;
    min-height: 200px;
}

.grid_container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.flex_box {
    flex-grow: 1;
    min-width: 230px;
    flex-basis: 33%;
    box-sizing: border-box;
}

.form_box {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #04458761;
}

    .form_box h5 {
        font-size: 0.875rem;
        font-weight: 700;
        color: #044587;
    }

.full_input {
    margin-top: 6px;
    padding: 10px 10px;
    background: var(--mainBg);
    border-radius: 4px;
}

    .full_input .label {
        display: inline-block;
        max-width: 380px;
        width: 100%;
        vertical-align: top;
        font-weight: 600;
    }

.input.disabled {
    display: inline-block;
}

.full_input .label_sm {
    display: inline-block;
    max-width: 100px;
    width: 100%;
    vertical-align: top;
    font-weight: 600;
}


.SmallLink {
    text-decoration: none;
    font-size: 14px;
    color: var(--bordeaux);
}

    .SmallLink:hover {
        text-decoration: underline;
        color: var(--bordeaux);
    }

.PrimaryButton {
    height: 51px;
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 5px;
    background-color: var(--bordeaux) !important;
    color: var(--white) !important;
    border: 0px;
    font-weight: 700;
}

    .PrimaryButton:hover {
        background-color: var(--bordeauxHover) !important;
        color: var(--white) !important;
    }

.PrimaryButtonFullWidth {
    width: 100%;
}

.ButtonMaxWidth {
    width: 100%;
    max-width: 300px;
}

.SecondaryButton {
    height: 51px;
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 5px;
    background-color: var(--primaryBlue) !important;
    color: var(--white) !important;
    border: 0px;
    font-weight: 700;
}

    .SecondaryButton:hover {
        background-color: var(--primaryBlueHover) !important;
        color: var(--white) !important;
    }

.SecondaryButtonFullWidth {
    width: 100%;
}

.ThirdButton {
    height: 51px;
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 5px;
    background-color: var(--lightBlue) !important;
    color: var(--bordeaux) !important;
    border: 0px;
    font-weight: 700;
}

    .ThirdButton:hover {
        background-color: var(--primaryBlueLighterAlpha2) !important;
        color: var(--bordeaux) !important;
    }

.ThirdButtonFullWidth {
    width: 100%;
}


.ForthButton {
    height: 51px;
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 5px;
    background-color: var(--white) !important;
    color: var(--primaryBlue) !important;
    border: 0px;
    font-weight: 700;
    border: 1px solid var(--lightGray) !important;
    /* -webkit-box-shadow: 0px 0px 20px var(--lightGray);
    box-shadow: 0px 0px 20px var(--lightGray); */
}

    .ForthButton:hover {
        background-color: var(--white) !important;
        color: var(--primaryBlue) !important;
    }

.ForthButtonFullWidth {
    width: 100%;
}


.FifthButton {
    height: 51px;
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 5px;
    background-color: var(--primaryBlueLighterAlpha3) !important;
    color: var(--primaryBlue) !important;
    border: 0px;
    font-weight: 700;
    border: 1px solid var(--lightGray) !important;
    /* -webkit-box-shadow: 0px 0px 20px var(--lightGray);
    box-shadow: 0px 0px 20px var(--lightGray); */
}

    .FifthButton:hover {
        background-color: var(--primaryBlueLighterAlpha3) !important;
        color: var(--primaryBlue) !important;
    }

.FifthButtonFullWidth {
    width: 100%;
}

.LgButton {
    width: 100%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primaryBlue) !important;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 16px;
    border-radius: 5px;
    border: 1px solid var(--lightGray) !important;
    text-decoration: none;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

    .LgButton:hover {
        color: var(--primaryBlue) !important;
        -webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
        -moz-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    }


.ButtonsContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 20px;
    width: 100%;
}

.ButtonsContainerSpread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex: 1;
    flex-wrap: wrap;
    width: 100%;
}

@media (max-width: 520px) {

    .ButtonsContainer,
    .ButtonsContainerSpread {
        flex-direction: column;
    }
}

.NoSelect {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

.MainContent h1 {
    color: var(--primaryBlue);
    font-size: calc(1.125rem + 1.5vw);
    font-weight: 900;
    margin: 10px 10px;
}

.MainContent h5 {
    color: var(--bordeaux);
    font-weight: 600;
    letter-spacing: -0.3px;
}

.MainContent h6 {
    color: var(--bordeaux);
    font-weight: 600;
}

@media (min-width: 1200px) {

    .MainContent .h1,
    .MainContent h1 {
        font-size: 2rem;
    }
}



.InfoBox {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 12px;
    padding: 20px;
    background-color: var(--primaryBlueLighterAlpha2);
    border-radius: 8px;
    color: var(--primaryBlueDarker)
}

.ClabsiFormStepsHead {
    /* padding-top:10px;
    padding-bottom:10px; */
    /* border-radius: 15px;
    background-color: var(--lightBlue);
    -webkit-box-shadow: inset 70px 0px 34px -76px rgba(0,0,0,0.3), inset -70px 0px 34px -76px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 70px 0px 34px -76px rgba(0,0,0,0.3), inset -70px 0px 34px -76px rgba(0,0,0,0.3);
    box-shadow: inset 70px 0px 34px -76px rgba(0,0,0,0.3), inset -70px 0px 34px -76px rgba(0,0,0,0.3); */
}

a.swiper-slide {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ClabsiFormStepsHead .swiper-slide,
.Steps .swiper-slide {
    /* pointer-events: none;
    -webkit-drag: auto; */
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.4px;
    font-size: 15px;
    opacity: 0.5;
    /* width:170px */
}

    .ClabsiFormStepsHead .swiper-slide .StepHeadNum,
    .Steps .swiper-slide .StepHeadNum {
        color: var(--darkBordeaux);
        background-color: var(--lightBlue);
        border: 1px solid var(--lightGray);
        font-size: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        width: 40px;
        height: 40px;
        margin-bottom: 5px;
    }

    .ClabsiFormStepsHead .swiper-slide-thumb-active,
    .Steps .swiper-slide.active {
        font-weight: 700;
        opacity: 1;
        color: var(--bordeaux)
    }

        .ClabsiFormStepsHead .swiper-slide-thumb-active .StepHeadNum,
        .Steps .swiper-slide.active .StepHeadNum {
            color: var(--white);
            background-color: var(--bordeaux);
            border: 1px solid var(--bordeaux);
        }

.ClabsiFormStepsBody {
    margin-top: 40px
}

.SmallLineSeperator {
    margin: 15px 0;
    width: 100%;
    height: 1px;
    background-color: var(--lightGray);
}

.ageAtTheIncidentCheckerResults,
#adultsAndChildrenItem,
#childrenUnder1YearItem,
#childrenUnder1MonthItem,
#newBornsItem,
.transferedByOtherHospitalClinicResultItem,
.recentExitResultItem,
#centralLineNotExistResult,
.CentralLinesContainer,
#apomonwsiApokleistikaResult,
#apomonwsiDynitikaResult,
#pathogenDatesContainer,
#AdultAbove18,
#AdultBelow18,
#neoplasiaResult,
#covid19Result,
#death28DaysAfterTheIncidentResult,
#aitiaAllagis3Cause,
#aparaititoYlikoResult,
#patientIsNewBorn,
#patientIsNotNewBorn,
#antisipsiaDermatosResultCheckbox,
#antisipsiaDermatosResultTextArea,
#ultraSoundKFKPlacementResult,
#processInterruptedResult,
#praksiNotHappenedResult,
.DenominatorsNonNicuIncidents, #numberOfIncidentsClabsiContainer, #numberOfIncidentsVaeContainer, #numberOfIncidentsCautiContainer,#numberOfIncidentsCdiContainer,
#numberOfIncidentsCDIContainer_0, #numberOfIncidentsCDIContainer_1, #numberOfIncidentsCDIContainer_2, #numberOfIncidentsCDIContainer_3, #numberOfIncidentsCDIContainer_4,
#numberOfIncidentsCLContainer_0, #numberOfIncidentsCLContainer_1, #numberOfIncidentsCLContainer_2, #numberOfIncidentsCLContainer_3, #numberOfIncidentsCLContainer_4,
#numberOfIncidentsVNContainer_0, #numberOfIncidentsVNContainer_1, #numberOfIncidentsVNContainer_2, #numberOfIncidentsVNContainer_3, #numberOfIncidentsVNContainer_4,
#thetikiKalliergeiaResult,
.noPatientAgeSubmitted,
#pedVaePathologicalResult,
#ifOtherPedVaePathologicalResult,
#pedVaeAntiMicroBioticUsageResult,
#pedVaeAntiMicroBioticUsageResult,
#pedVaeApomonosiPathogenicResult,
#requiredMaterialsTroxilato,
#requiredMaterialsEtoimoKit,
#vaeDateOfIncident,
#vaeStep1, #vaeStep2, #vaeStep3,
#vaeAntiMicroBioticUsageResult,
#vaeStep3Check1Result, #vaeStep3Check2Result, #vaeStep3Check3Result,
#apomonwsiPathogonouMikroorganismouVAEResult {
    display: none;
}

.smallTextArea.dx-textarea .dx-texteditor-container {
    min-height: 100px;
}


.CentralLine,
.Antiviogramma,
.DenominatorsNicuAge,
.DenominatorsNicuWeight,
.DenominatorsNonNicu,
.DenominatorsNonNicuIncidents,
.AntibioticInfo,
.ManageClabsiGroup {
    padding: 20px;
    border-radius: 5px;
    border: 1px solid var(--lightGray);
    /* -webkit-box-shadow: 0px 0px 20px var(--lightGray);
    box-shadow: 0px 0px 20px var(--lightGray); */
}

.ManageClabsiGroup {
    margin-top: 20px;
    margin-bottom: 35px;
}

.AntiviosiContainer {
    padding: 20px;
    border-radius: 5px;
    border: 1px solid var(--lightGray);
    background-color: var(--primaryBlueLighterAlpha3);
}

.ClabsiFormStepsBody .StepBodyItem {
    min-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.ToolTipContent {
    font-size: 15px
}


.savedFormsBeforeSubmitTitle {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--bordeaux);
    margin-bottom: 6px;
}

.savedFormBeforeSubmit {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    -webkit-box-shadow: 0px 3px 15px rgba(114, 130, 145, 0.2);
    box-shadow: 0px 3px 15px rgba(114, 130, 145, 0.2);
    border-radius: 5px;
}

    .savedFormBeforeSubmit > div {
        gap: 20px;
        align-items: center;
    }

.savedFormBeforeSubmitId {
    width: 140px
}

.savedFormBeforeSubmitName a {
    font-weight: 700;
    color: var(--bordeaux);
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.savedFormBeforeSubmitTimeCreated {
    font-size: 15px;
}

.savedFormBeforeSubmitDelete {
    color: #ff4343;
    font-size: 22px;
    cursor: pointer;
}


.firstResults {
    font-size: 14px
}

    .firstResults div {
        padding: 5px 10px;
        background-color: var(--primaryBlueLighterAlpha2);
        border-radius: 5px;
    }


.TotalResults {
    border-top: 1px solid var(--lightGray);
    padding-top: 10px;
    margin-top: 10px;
}

.finalValue {
    width: 70px;
    text-align: right;
}






@media (max-width: 991px) {
    .savedFormBeforeSubmit {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }

        .savedFormBeforeSubmit > div:first-child {
            flex-direction: column;
            gap: 0;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .savedFormBeforeSubmit > div:last-child {
            justify-content: space-between;
            width: 100%;
        }
}


.MonthYearTextContainer {
    font-size: 32px;
    font-weight: 100;
    height: 50px;
}

.DenominatorsNicuType {
    color: var(--bordeaux);
    font-size: 18px;
    font-weight: 900;
}

.DenominatorsNicuAge,
.DenominatorsNicuWeight {
    margin-top: 20px
}

.DenominatorsNicuAgeSwiperHeader,
.DenominatorsNicuWeightSwiperHeader {
    padding-bottom: 20px;
}

.DenominatorsNicuAgeHeaderSections,
.DenominatorsNicuWeightHeaderSections {
    border-bottom: 1px solid var(--lightGray);
}

.DenominatorsNicuAgeSwiperHeader .swiper-slide,
.DenominatorsNicuWeightSwiperHeader .swiper-slide {
    padding-bottom: 5px;
    cursor: pointer;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.7
}

.DenominatorsNicuAgeSwiperHeader .swiper-slide-thumb-active,
.DenominatorsNicuWeightSwiperHeader .swiper-slide-thumb-active {
    opacity: 1;
}

    .DenominatorsNicuAgeSwiperHeader .swiper-slide-thumb-active span,
    .DenominatorsNicuWeightSwiperHeader .swiper-slide-thumb-active span {
        border-bottom: 3px solid var(--primaryBlue);
        padding-bottom: 5px;
        font-weight: 900;
    }

























.dx-texteditor.dx-editor-outlined {
    border: 0px
}

.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon {
    background-color: var(--primaryBlueLighterAlpha1);
    border-color: transparent;
}

.dx-widget.dx-button.dx-button-mode-contained.dx-button-normal.dx-button-has-icon.dx-calendar-navigator-next-view.dx-calendar-navigator-next-month,
.dx-widget.dx-button.dx-button-mode-contained.dx-button-normal.dx-button-has-icon.dx-calendar-navigator-previous-view.dx-calendar-navigator-previous-month {
    text-decoration: none;
}

.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
    background: var(--primaryBlue);
}

.dx-radiogroup .dx-radiobutton,
.dx-radiogroup-horizontal .dx-radiobutton {
    height: 51px;
    padding: 12px 16px;
    border-radius: 5px;
    border: 1px solid var(--lightGray);
    background-color: var(--lightBlue);
    margin-bottom: 12px;
    margin-right: 12px
}

.dx-radiogroup-horizontal .dx-radiobutton {
    margin-bottom: 0px;
}

.InputElement .dx-checkbox {
    padding: 12px 16px;
    border-radius: 5px;
    border: 1px solid var(--lightGray);
    background-color: var(--lightBlue);
}

.dx-datebox-date .dx-dropdowneditor-icon::before,
.dx-dropdowneditor-icon::before {
    color: var(--primaryBlue);
    margin-left: -9px;
}

.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    background-color: var(--white);
}

.fa-info-circle {
    font-size: 16px;
    color: var(--gray)
}

.InputElement .LabelHasToolTip {
    display: flex;
    align-items: baseline;
    /* justify-content: space-between; */
    justify-content: flex-start;
    gap: 10px
}

.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
    white-space: initial;
    text-align: left;
    max-width: 400px;
}


.dx-invalid.dx-radiogroup .dx-radiobutton,
.dx-invalid.dx-radiogroup-horizontal .dx-radiobutton {
    border-color: #d9534f;
}










































@media only screen and (max-width: 1200px) {
    .SideBar {
        z-index: 10;
        -webkit-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
        max-width: 320px;
        min-width: 200px;
        width: 100%;
        -webkit-box-shadow: 0px 0px 30px rgba(114, 130, 145, 0.2);
        box-shadow: 0px 0px 30px rgba(114, 130, 145, 0.2);
        padding-top: 52px;
        padding-bottom: 60px;
    }

    body.SideBarClosed .SideBar {
        -webkit-transform: translate3d(-0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }

    body.SideBarClosed .LogoCleo,
    body.SideBarClosed .LoggedinUser {
        opacity: 1;
    }

    body.SideBarClosed .MainNav {
        opacity: 1;
        pointer-events: all;
    }

    .MainContent {
        -webkit-transform: translate3d(-0px, 0, 0);
        transform: translate3d(0px, 0, 0);
        width: 100%;
        padding: 60px 15px;
    }

    body.SideBarClosed .MainContent {
        -webkit-transform: translate3d(-0px, 0, 0);
        transform: translate3d(0px, 0, 0);
        width: 100%;
    }

    .ToggleMenu {
        position: fixed;
        margin: 10px 0px;
        border-radius: 0px;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        z-index: 12;
    }

        .ToggleMenu .fa {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
        }

    body.SideBarClosed .ToggleMenu .fa {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}


.DeleteItem {
    height: 51px;
    width: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: none;
    color: #fc7f7f;
    cursor: pointer;
}

    .DeleteItem:hover {
        background-color: rgba(0,0,0,0.05);
    }

    .DeleteItem i {
        display: flex !important;
        color: #fc7f7f !important;
        font-size: 24px !important;
    }

.DeleteItemInContainer {
    background-color: var(--primaryBlueLighterAlpha3) !important;
}

    .DeleteItemInContainer:hover {
        background-color: var(--primaryBlueLighterAlpha1) !important;
    }

.Steps {
    margin-bottom: 20px;
}

.squareButton {
    height: 51px !important;
    width: 51px !important;
}

    .squareButton i {
        color: var(--primaryBlue) !important;
    }

.TitleWithTempSave {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

#TempSave {
    width: 45px;
    height: 45px;
}

    #TempSave i {
        width: 21px;
        height: 21px;
        font-size: 21px;
        color: var(--primaryBlue)
    }

.general_box_link {
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    border-radius: 12px;
    border: 1px solid var(--primaryBlue);
    -webkit-transition: all 0.125s ease-out;
    transition: all 0.125s ease-out;
}

    .general_box_link:hover {
        -webkit-box-shadow: 0px 5px 15px 0px rgba(4,69,135,0.2);
        -moz-box-shadow: 0px 5px 15px 0px rgba(4,69,135,0.2);
        box-shadow: 0px 5px 15px 0px rgba(4,69,135,0.2);
    }

    .general_box_link strong {
        font-weight: 700;
        min-height: 60px;
        display: block;
        color: var(--primaryBlue);
    }

    .general_box_link div {
        font-weight: 400;
        min-height: 48px;
        color: var(--primaryBlue);
    }

.Steps.tab-navigation .swiper-slide {
    width: 100px;
}

    .Steps.tab-navigation .swiper-slide .StepHeadItem {
        border-bottom: 1px solid rgba(42, 178, 217, 1);
        padding-bottom: 12px;
    }

    .Steps.tab-navigation .swiper-slide.active .StepHeadItem {
        border-bottom: 3px solid rgba(42, 178, 217, 1);
        padding-bottom: 10px;
    }

.dx-datagrid,
.dx-toolbar {
    background-color: transparent;
}

.dx-datagrid-headers .dx-datagrid-content,
.dx-datagrid-borders > .dx-datagrid-pager {
    background-color: #fff;
    margin: 0;
    border-radius: 16px;
    box-shadow: 0px 5px 40px -19px #5683d6b9;
    -webkit-box-shadow: 0px 5px 40px -19px #5683d6b9;
    -moz-box-shadow: 0px 5px 40px -19px #5683d6b9;
}

.dx-datagrid-headers .dx-datagrid-content {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.dx-datagrid-borders > .dx-datagrid-pager {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.dx-datagrid-headers .dx-row > td {
    height: 55px
}

.dx-texteditor.dx-editor-outlined,
.dx-button,
.dx-pager .dx-page,
.dx-pager .dx-page-size {
    border-radius: 10px;
}

.dx-datagrid-search-panel {
    margin: 0 0 0 5px;
}

.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td,
.dx-datagrid .dx-column-lines > td,
.dx-datagrid-borders > .dx-datagrid-pager,
.dx-datagrid-borders > .dx-datagrid-headers,
.dx-datagrid-borders > .dx-datagrid-headers, .dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border: 0px;
}

.dx-datagrid-rowsview .dx-row:nth-child(odd) {
    background-color: #D9ECFF;
}

.dx-datagrid-rowsview .dx-row:nth-child(even) {
    background-color: #F6FBFF;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td,
.dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
    vertical-align: middle;
}

.dx-datagrid-rowsview .dx-row {
    position: relative;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

    .dx-datagrid-rowsview .dx-row:hover {
        z-index: 1000;
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        box-shadow: 0px 1px 20px -5px #5683d6b9;
        -webkit-box-shadow: 0px 1px 20px -5px #5683d6b9;
        -moz-box-shadow: 0px 1px 20px -5px #5683d6b9;
    }

.dx-freespace-row {
    display: none !important;
}

/*Qlik sense class in filter pane*/
.css-1dmzujt {
    width: 450px !important;
}

.customErrorMessage {
    font-weight: 600;
    font-size: 14px;
    color: red;
    min-height: 40px;
    display: flex;
    align-items: center;
}

    .customErrorMessage span {
        padding-right: 7px;
    }

.scroll-button {
    position: fixed;
    cursor: pointer;
    right: 20px;
    background-color: #6C1B5D;
    color: #fff;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    line-height: 50px;
    z-index: 999;
}

.scroll-top {
    display: none;
    bottom: 80px;
}

.scroll-bottom {
    display: none;
    bottom: 20px;
}