@import "https://api.fontshare.com/v2/css?f[]=switzer@600,400,300,500&display=swap";

:root {
    --font-family: "Switzer", sans-serif;
    --display-font: "Switzer", sans-serif;
    --icon-family: "uicons-regular-rounded";
    --color1: #0b626e;
    --color2: #be9d33;
    --color3: #830000;
    --color4: #FF735F;
    --color5: #fff8f6;
    --highlight: #0b626e;
    --white: light-dark(#ffffff, #0f0f0f);
    --lightGray: light-dark(#f8fafa, #272727);
    --borderGray: light-dark(#e5eaf1, #242323);
    --visibleGray: light-dark(#c4c7c5, #2c2b2b);
    --textGray: light-dark(#a3a3a4, #898989);
    --gray: light-dark(#5d5e5f, #939393);
    --darkGray: light-dark(#23262F, #b5b7be);
    --black: light-dark(#1B1E27, #fafafa);
    --red: #ec4c4c;
    --green: #3cc274;
    --blue: #546bd4;
    --yellow: #f5a905;
    --inputColor: light-dark(#103d37, #c7f5d4);
    --inputColor1: color-mix(in srgb, var(--inputColor), var(--bg-color) 95%);
    --inputColor2: color-mix(in srgb, var(--inputColor), var(--bg-color) 70%);
    --inputColor3: color-mix(in srgb, var(--inputColor), var(--bg-color) 50%);
    --inputColor4: color-mix(in srgb, var(--inputColor), var(--bg-color) 30%);
    --inputColor5: color-mix(in srgb, var(--inputColor), var(--bg-color) 0%);
    --input-size: .75rem;
    --gradient1: radial-gradient(at 98.6% 68.3%, #ecffd4 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, #f2f5ff 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, #bdd4ff 0px, transparent 50%), radial-gradient(at 21% 80.7%, #c9dcff 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, #eaffe6 0px, transparent 50%);
    --gradient2: linear-gradient(to right top, #111118, #13151a, #15181c, #181b1e, #1b1e20, #1c1f21, #1d1f22, #1e2023, #1d1f23, #1c1e22, #1b1c22, #1b1b21);
    --gradient3: linear-gradient(to right top, #eff3ff, #edf2ff, #ecf0ff, #eaefff, #e8eeff, #e6ecff, #e3ebff, #e1e9ff, #dee7ff, #dbe4ff, #d8e2ff, #d5dfff);
    --radius: .65rem;
    --inputRadius: .4rem;
    --btnRadius: 30px;
    --transition1: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition2: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    --transition3: 0.7s cubic-bezier(0.37, 0, 0.63, 1);
    --shadow-1: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    --shadow-2: rgba(0, 0, 0, 0.075) 0px 3px 6px, rgba(0, 0, 0, 0.116) 0px 3px 6px;
    --shadow-3: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    --bgShadeMobileLight: #f8f8f8;
    --bgShadeMobileDark: radial-gradient(at 98.6% 68.3%, #1f211f 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, #122303 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, #252724 0px, transparent 50%), radial-gradient(at 21% 80.7%, #071330 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, #051606 0px, transparent 50%);
    --bgShadeMobile: var(--bgShadeMobileLight);
    --bgShadewebLight: #edeef1;
    --bgShadewebDark: radial-gradient(at 98.6% 68.3%, #1f211f 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, #030623 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, #242427 0px, transparent 50%), radial-gradient(at 21% 80.7%, #071330 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, #080516 0px, transparent 50%);
    --bgShadeWeb: var(--bgShadewebLight);
    --headerBgColorMob: transparent;
    --headerTextWeightMob: 400;
    --headerNavBgColorMob: light-dark(#f0f4f9, #191919);
    --headerNavMenuColorMob: light-dark(#f0f4f9, #191919);
    --headerNavMenuWeightMob: 400;
    --headerNavActiveMenuColorMob: light-dark(#191919, #f0f4f9);
    --headerNavActiveMenuBgMob: #40B657;
    --headerNavActiveMenuBorderMob: #40B657;
    --headerBgColorWeb: light-dark(#f0f4f9, #0e0e0e);
    --headerTextWeightWeb: 500;
    --headerNavBgColorWeb: light-dark(#ffffff, #191919);
    --headerNavMenuColorWeb: #210404;
    --headerNavMenuWeightWeb: 400;
    --headerNavActiveMenuColorWeb: #ffffff;
    --headerNavActiveMenuBgWeb: #121212;
    --headerNavActiveMenuBorderWeb: #131313;
    --menuBarWidth: 72px;
    --menuBarBg: light-dark(#0b626e, #151515);
    --menuBorderColor: light-dark(#e0ebeb55, #3d3d3d);
    --menuPaddingX: 1.75rem;
    --menuHoverColor: linear-gradient(90deg, #81818107 0%, rgba(255, 255, 255, 0) 100%);
    --menuActiveIconBg: light-dark(#ffffff, #282828);
    --menuActiveIconColor: light-dark(#414141, #a1a1a1);
    --menuActiveTextColor: light-dark(#2c2c2c, #ffffff);
    --menuIconColor: light-dark(#bff1f1, #afafaf);
    --menuIconColorBg: transparent;
    --menuTextColor: light-dark(#bff1ea, #a8a8a8);
    --menuTextWeight: 400;
    --subMenuBgColor: light-dark(#124142, #242424);
    --subMenuTextColor: light-dark(#bff1ed, #bfbfbf);
    --tabBarGap: 0px;
    --tabBarBgColorMob: light-dark(#f0f4f9, #000000d4);
    --tabBarTextColorMob: light-dark(#737277, #717171);
    --tabBarBorderMob: 1px solid transparent;
    --tabBarShadow: none;
    --tabBarHighlightBg: linear-gradient(to bottom, #f7bc23, #f8bc21, #fabc1f, #fbbb1d, #fdbb1b, #feb918, #feb715, #ffb512, #ffb10d, #ffae09, #ffaa04, #ffa600);
    --tabBarHighlightTextColor: #ffffff;
    --tabBarBgColorWeb: light-dark(#f8f9fc, #666666);
    --tabBarTextColorWeb: light-dark(#464646, #666666);
    --tabBarBorderRadius: 0;
    --box-size: 48px;
    --tab-highlight-color: #1B1E27;
    --tab-highlight-text-color: #ffffff;
    --notificationAlertColor: #ff2c3c;
    --dataToolBg: light-dark(#ffffff, #191919);
    --dataToolColor: light-dark(#737277, #717171);
    --tableRow: light-dark(#ffffff, #161616);
    --tableHighlight: light-dark(#f6ffd0, #202020);
    --tableHover: light-dark(#fbffec, #161616);
    --dataCardBg: light-dark(#ffffff, #161616);
    --dataCardBorder: light-dark(#f7f7f7, #272727);
    --dataCardTextColor: light-dark(#1d1d1d, #ffffff);
    --dataCardBorderRadius: 1.5rem;
    --dataCardGap: 20px;
    --text-color: light-dark(#1d1d1d, #D3D3D3);
    --bg-color: light-dark(#ffffff, #121212);
    --shade-1: color-mix(in srgb, var(--bg-color), var(--black) 5%);
    --shade-2: color-mix(in srgb, var(--bg-color), var(--black) 10%);
    --shade-3: color-mix(in srgb, var(--bg-color), var(--black) 30%);
    --shade-4: color-mix(in srgb, var(--bg-color), var(--black) 50%);
    --shade-5: color-mix(in srgb, var(--bg-color), var(--black) 80%);
    --summary-card-bg: #ffffff;
    --summary-card-text: #000;
    --summary-card-radius: 15px;
    --summary-card-padding: 20px;
    --summary-card-gap: 20px;
    --summary-color-1: #40B657;
    --summary-color-2: #001F54;
    --summary-color-3: #034078;
    --summary-color-4: #12a225;
    --summary-color-5: #3d0528;
    --summary-color-6: #b2adf0;
    --summary-strock: 1vh;
    --summary-strock-shape: round;
    --section-space-x: clamp(1.5rem, 2vw, 2.5rem);
    --section-space-y: clamp(1.5rem, 2vw, 2rem);
    --section-max-width: 100%;
    --container-max-width: 100%
}

.section {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%)
}

.sectionLeft, .section-left {
    clear: both;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%)
}

.sectionRight, .section-right {
    clear: both;
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%)
}

.innerSection {
    width: 100%;
    max-width: var(--section-max-width);
    margin: 0 auto
}

.sectionPadding {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.sectionPaddingTop {
    padding-top: var(--section-space-y)
}

.sectionPaddingBottom {
    padding-bottom: var(--section-space-y)
}

.btnDiv {
    margin-top: .7075rem;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 1.5vw, 20px)
}

a, button, [type=button] {
    display: inline-flex;
    font-family: inherit;
    background-color: rgba(0, 0, 0, 0);
    -webkit-writing-mode: horizontal-tb;
    text-rendering: auto;
    list-style: 1;
    cursor: pointer
}

a:disabled, button:disabled, [type=button]:disabled {
    font-weight: 500;
    color: var(--gray);
    background-color: var(--borderGray);
    border: 1px solid var(--borderGray);
    box-shadow: none;
    opacity: .8;
    pointer-events: none;
    cursor: not-allowed
}

a img, button img, [type=button] img {
    width: 15px;
    margin: 0
}

a *, button *, [type=button] * {
    transition: var(--transition1);
    cursor: pointer
}

.loader {
    display: none;
    width: 15px;
    height: 15px
}

.loader::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid inherit;
    border-top: 2px solid rgba(0, 0, 0, 0);
    border-radius: 100%;
    animation: loader1 .5s ease-in-out infinite
}

@keyframes loader1 {
    0% {
        transform: translate(0%, 0%) rotate(0deg)
    }
    100% {
        transform: translate(0%, 0%) rotate(360deg)
    }
}

.header .userMenu .actionBtn, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn, .aiSerachBar button, .timeBreakActionDiv button, .timeBreakActionDiv a, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar #searchButton, .dataSection .dataNavSection .filterPopup #cancelFilterBtn, .dataSection .dataNavSection .filterPopup #applyFilterBtn, .multiActionNav .actionMenu a, .multiActionNav .actionMenu button, .multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn, #notesContainer #chatEditor button, #callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .deleteReminderBtn, #callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction button, #callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction a, #callSummarySection .contactSummaryForm .contactOptions button, .viewDataPopup .viewDataNavSection .btnDiv a, .viewDataPopup .viewDataNavSection .btnDiv button, .viewDataPopup .dropSection .dropList .dropContent .addSectionBtn, .createDataPopup .viewDataNavSection .btnDiv a, .createDataPopup .viewDataNavSection .btnDiv button, .createDataPopup .dropSection .dropList .dropContent .addSectionBtn, .viewDataPopupWide .viewDataNavSection .btnDiv a, .viewDataPopupWide .viewDataNavSection .btnDiv button, .viewDataPopupWide .dropSection .dropList .dropContent .addSectionBtn, .viewDataPage .viewDataNavSection .btnDiv a, .viewDataPage .dropSection .dropList .dropContent .addSectionBtn, .viewDataPageNarrow .viewDataNavSection .btnDiv a, .viewDataPageNarrow .viewDataNavSection .btnDiv button, .viewDataPageNarrow .dropSection .dropList .dropContent .addSectionBtn, .viewDataPageWide .viewDataNavSection .btnDiv a, .viewDataPageWide .viewDataNavSection .btnDiv button, .viewDataPageWide .dropSection .dropList .dropContent .addSectionBtn, #viewDataMenuPage .viewDataNavSection .btnDiv a, #viewDataMenuPage .viewDataNavSection .btnDiv button, #viewDataMenuPage .dropSection .dropList .dropContent .addSectionBtn, .createDataPage .viewDataNavSection .btnDiv a, .createDataPage .viewDataNavSection .btnDiv button, .createDataPage .dropSection .dropList .dropContent .addSectionBtn, .multiStepDataPage .viewDataNavSection .btnDiv a, .multiStepDataPage .viewDataNavSection .btnDiv button, .multiStepDataPage .dropSection .dropList .dropContent .addSectionBtn, #exportDataSelection .exportDataHead .exportBtn, .inputTable td [rowGeneratorCallback], .inputTable td [row_generator_callback], .addonCardModule .addonCard td [rowGeneratorCallback], .addonCardModule .addonCard td [row_generator_callback], .addonCardModule .addonModulesBtnDiv .addModuleBtn, .fileWrapper .uploadedFilesContainer .deleteFileButton, .btn-white-stroke, .btnWhiteStroke, .linkBtn, .textBtn, .outlinedBtn, .btn2, .filledTonalBtn, .filledBtn, .btn1, .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
    border-radius: var(--btnRadius);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: .5px;
    overflow: hidden;
    transition: transform .5s cubic-bezier(0.165, 0.84, 0.44, 1), background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .5s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.filledBtn, .btn1 {
    color: var(--white);
    font-weight: 500;
    filter: brightness(100%);
    background-color: var(--color1);
    border: 1px solid var(--color1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2)
}

.filledBtn:hover, .btn1:hover {
    color: var(--white);
    filter: brightness(110%);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    transition: filter .5s ease-in, background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.filledBtn:active, .btn1:active {
    filter: brightness(105%)
}

.filledBtn:visited, .btn1:visited {
    filter: brightness(90%)
}

.filledBtn.secondary, .btn1.secondary {
    background-color: var(--color2);
    border: 1px solid var(--color2)
}

.filledBtn.tertiary, .btn1.tertiary {
    background-color: var(--color3);
    border: 1px solid var(--color3)
}

.filledBtn.black, .btn1.black {
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--darkGray)
}

.filledBtn.white, .btn1.white {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--borderGray)
}

.filledBtn.red, .btn1.red {
    color: var(--white);
    background-color: var(--red);
    border: 1px solid var(--red)
}

.filledBtn.green, .btn1.green {
    color: var(--white);
    background-color: var(--green);
    border: 1px solid var(--green)
}

.filledBtn.blue, .btn1.blue {
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid var(--blue)
}

.filledBtn.elevated, .btn1.elevated {
    box-shadow: 0 4px 4px rgba(8, 8, 8, .08), 0 1px 2px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .048), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.filledBtn.elevated:hover, .btn1.elevated:hover {
    box-shadow: 0 1px 1px rgba(8, 8, 8, .08), 0 1px 1px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .12), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.filledBtn .loader::before, .btn1 .loader::before {
    border: 2px solid var(--white)
}

.filledTonalBtn {
    color: var(--color1);
    background-color: var(--color1)
}

.outlinedBtn, .btn2 {
    font-weight: 500;
    color: var(--color1);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--color1)
}

.outlinedBtn:hover, .btn2:hover {
    opacity: .8
}

.outlinedBtn.secondary, .btn2.secondary {
    border: 1px solid var(--color2)
}

.outlinedBtn.tertiary, .btn2.tertiary {
    border: 1px solid var(--color3)
}

.outlinedBtn.black, .btn2.black {
    color: var(--black);
    border: 1px solid var(--black)
}

.outlinedBtn.white, .btn2.white {
    color: var(--white);
    border: 1px solid var(--white)
}

.outlinedBtn.gray, .btn2.gray {
    color: var(--textGray);
    border: 1px solid var(--textGray)
}

.outlinedBtn.red, .btn2.red {
    color: var(--red);
    border: 1px solid var(--red)
}

.outlinedBtn.green, .btn2.green {
    color: var(--green);
    border: 1px solid var(--green)
}

.outlinedBtn.blue, .btn2.blue {
    color: var(--blue);
    border: 1px solid var(--blue)
}

.textBtn {
    color: var(--color1);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0
}

.textBtn:disabled {
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0)
}

.textBtn:hover {
    color: var(--white)
}

.textBtn.secondary {
    color: var(--color2)
}

.textBtn.tertiary {
    color: var(--color3)
}

.textBtn.black {
    color: var(--black)
}

.textBtn.white {
    color: var(--white)
}

.textBtn.red {
    color: var(--red)
}

.textBtn.green {
    color: var(--green)
}

.textBtn.blue {
    color: var(--blue)
}

.linkBtn:disabled {
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0)
}

.linkBtn:hover {
    color: var(--white)
}

.btn-white-stroke, .btnWhiteStroke {
    color: var(--white);
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--white)
}

.btn-white-stroke:hover, .btnWhiteStroke:hover {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--white)
}

.btn-white-stroke i, .btnWhiteStroke i {
    color: var(--gray)
}

.btn-white-stroke .loader::before, .btnWhiteStroke .loader::before {
    border: 2px solid var(--gray)
}

.xxsBtn {
    height: clamp(20px, 5vw, 24px);
    font-size: .878rem;
    padding: 0 8px
}

.xxsIcon {
    height: clamp(20px, 5vw, 24px);
    width: clamp(20px, 5vw, 24px);
    font-size: .878rem
}

.xsBtn {
    height: clamp(25px, 5.5vw, 28px);
    font-size: .937rem;
    padding: 0 16px
}

.xsIcon {
    height: clamp(25px, 5.5vw, 28px);
    height: clamp(25px, 5.5vw, 28px);
    font-size: .937rem
}

.smBtn, .fileWrapper .uploadedFilesContainer .deleteFileButton {
    height: clamp(29px, 6vw, 32px);
    font-size: .878rem;
    padding: 0 20px
}

.smIcon {
    height: clamp(29px, 6vw, 32px);
    width: clamp(29px, 6vw, 32px);
    font-size: .878rem
}

.mdBtn, #exportDataSelection .exportDataHead .exportBtn {
    height: clamp(32px, 6vw, 40px);
    font-size: .878rem;
    padding: 0 16px
}

.mdIcon {
    height: clamp(32px, 6vw, 40px);
    width: clamp(32px, 6vw, 40px);
    font-size: .878rem
}

.lgBtn, .timeBreakActionDiv button, .timeBreakActionDiv a, .multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn, .viewDataPopup .dropSection .dropList .dropContent .addSectionBtn, .createDataPopup .dropSection .dropList .dropContent .addSectionBtn, .viewDataPopupWide .dropSection .dropList .dropContent .addSectionBtn, .viewDataPage .dropSection .dropList .dropContent .addSectionBtn, .viewDataPageNarrow .dropSection .dropList .dropContent .addSectionBtn, .viewDataPageWide .dropSection .dropList .dropContent .addSectionBtn, #viewDataMenuPage .dropSection .dropList .dropContent .addSectionBtn, .createDataPage .dropSection .dropList .dropContent .addSectionBtn, .multiStepDataPage .dropSection .dropList .dropContent .addSectionBtn, .inputTable td [rowGeneratorCallback], .inputTable td [row_generator_callback], .addonCardModule .addonCard td [rowGeneratorCallback], .addonCardModule .addonCard td [row_generator_callback], .addonCardModule .addonModulesBtnDiv .addModuleBtn {
    height: clamp(45px, 6vw, 48px);
    font-size: .937rem;
    padding: 0 20px
}

.lgIcon {
    height: clamp(45px, 6vw, 48px);
    width: clamp(45px, 6vw, 48px);
    font-size: .937rem
}

.xlBtn, .viewDataPopup .viewDataNavSection .btnDiv a, .viewDataPopup .viewDataNavSection .btnDiv button, .createDataPopup .viewDataNavSection .btnDiv a, .createDataPopup .viewDataNavSection .btnDiv button, .viewDataPopupWide .viewDataNavSection .btnDiv a, .viewDataPopupWide .viewDataNavSection .btnDiv button,  .viewDataPageNarrow .viewDataNavSection .btnDiv a, .viewDataPageNarrow .viewDataNavSection .btnDiv button, .viewDataPageWide .viewDataNavSection .btnDiv a, .viewDataPageWide .viewDataNavSection .btnDiv button, #viewDataMenuPage .viewDataNavSection .btnDiv a, #viewDataMenuPage .viewDataNavSection .btnDiv button, .createDataPage .viewDataNavSection .btnDiv a, .createDataPage .viewDataNavSection .btnDiv button, .multiStepDataPage .viewDataNavSection .btnDiv a, .multiStepDataPage .viewDataNavSection .btnDiv button {
    height: clamp(53px, 6.5vw, 56px);
    font-size: 1rem;
    padding: 0 24px
}

.xlIcon {
    height: clamp(53px, 6.5vw, 56px);
    width: clamp(53px, 6.5vw, 56px);
    font-size: 1rem
}

.xxlBtn {
    height: clamp(61px, 7vw, 64px);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    padding: 0 28px
}

.xxlIcon {
    height: clamp(61px, 7vw, 64px);
    width: clamp(61px, 7vw, 64px);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.xsCard {
    width: 24.5%;
    min-width: 100px;
    margin-right: .75%;
    margin-left: .75%
}

.smCard {
    width: 49.5%;
    min-width: 100px
}

@media (min-width: 1024px) {
    .smCard {
        width: 32.5%
    }
}

.mdCard {
    width: 100%
}

@media (min-width: 1024px) {
    .mdCard {
        width: 49.5%
    }
}

.xxlCard {
    width: 100%
}

.xlDiv {
    width: 100%;
    min-width: 100%
}

.lgDiv {
    width: 100%;
    min-width: 100%
}

@media (min-width: 768px) {
    .lgDiv {
        width: 49%;
        min-width: 49%
    }
}

@media (min-width: 1024px) {
    .lgDiv {
        width: 74%;
        min-width: 74%
    }
}

.mdDiv {
    width: 100%;
    min-width: 100%
}

@media (min-width: 768px) {
    .mdDiv {
        width: 49%;
        min-width: 49%
    }
}

.smDiv {
    width: 49%;
    min-width: 49%
}

@media (min-width: 768px) {
    .smDiv {
        width: 31.3%;
        min-width: 31.3%
    }
}

.xsDiv {
    width: 49%;
    min-width: 49%
}

@media (min-width: 768px) {
    .xsDiv {
        width: 24%;
        min-width: 24%
    }
}

.xxsDiv {
    width: 18%;
    min-width: 100px
}

::selection {
    color: var(--white);
    background-color: var(--highlight)
}

[mode] .messageBox {
    padding: .5rem 0
}

[mode] .messageBox:empty {
    display: none
}

[mode] .messageBox::before {
    display: none;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: .937rem;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    line-height: 1
}

[mode=alert] textarea, [mode=alert] input:not([type=checkbox]):not([type=radio]) {
    border-color: #e78971;
    box-shadow: #fddad4 0px 0px 0px 1px
}

[mode=alert] .messageBox {
    background-color: #fff1e7;
    color: #ce6122
}

[mode=alert] .messageBox::before {
    content: "";
    color: #dd573f
}

[mode=error] textarea, [mode=error] input:not([type=checkbox]):not([type=radio]) {
    border-color: #ffb0b0;
    box-shadow: #ffe1e1 0px 0px 0px 1px
}

[mode=error] .messageBox {
    background-color: #ffe7e7;
    color: #ce2222
}

[mode=error] .messageBox::before {
    content: "";
    color: #dd3f3f
}

[mode=success] textarea, [mode=success] input:not([type=checkbox]):not([type=radio]) {
    border-color: #81d781;
    box-shadow: #cbffcb 0px 0px 0px 1px
}

[mode=success] .messageBox {
    background-color: #e8ffe7;
    color: #169c04
}

[mode=success] .messageBox::before {
    content: "";
    color: #3fdd3f
}

[mode=warning] textarea, [mode=warning] input:not([type=checkbox]):not([type=radio]) {
    border-color: #d7af81;
    box-shadow: #ffe7cb 0px 0px 0px 1px
}

[mode=warning] .messageBox {
    background-color: #fffbe7;
    color: #9c8004
}

[mode=warning] .messageBox::before {
    content: "";
    color: #dd713f
}

[mode=info] .messageBox::before {
    content: "";
    color: #d4d4d4
}

[mode=note] .messageBox::before {
    content: "";
    color: #dfdfdf
}

.messageBox {
    width: 100%;
    min-width: 100%;
    margin-top: 10px;
    color: var(--black);
    font-size: .733rem;
    font-weight: 500;
    border-radius: var(--inputRadius)
}

.messageBox::first-letter {
    text-transform: uppercase
}

.messageBox:empty {
    padding: 0;
    margin-top: 0
}

.formDiv {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 2%
}

form {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 2%
}

i::before {
    font-family: var(--icon-family);
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

label {
    display: flex;
    align-items: center;
    color: var(--gray);
    font-family: var(--font-family);
    font-size: .878rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: .25rem;
    transition: var(--transition1)
}

input, textarea, select, datalist, selected, item {
    width: 100%;
    padding: var(--input-size);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.3;
    letter-spacing: 0;
    transition: var(--transition1)
}

input::placeholder, textarea::placeholder, select::placeholder, datalist::placeholder, selected::placeholder, item::placeholder {
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    opacity: .65
}

[country-code]::before {
    content: attr(country-code);
    position: absolute;
    top: 32px;
    left: var(--input-size);
    z-index: 1;
    padding-right: .5rem;
    font-weight: 500;
    border-right: 1px solid var(--inputColor3)
}

[country-code] label {
    left: 60px
}

[country-code] input {
    padding-left: 60px
}

select {
    background-color: rgba(0, 0, 0, 0);
    appearance: auto
}

textarea {
    min-height: 100px;
    min-width: 100%;
    max-width: 100%;
    vertical-align: top;
    overflow: auto;
    resize: none
}

datalist {
    appearance: none
}

datalist ::-webkit-calendar-picker-indicator {
    display: none;
    background-color: inherit;
    opacity: 0
}

[type=radio], [type=checkbox], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    width: 100%
}

::-webkit-calendar-picker-indicator {
    opacity: .6;
    filter: invert(0.8)
}

[type=date], [type=datetime], [type=time], [type=datetime-local] {
    text-transform: uppercase
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus {
    outline: 0 none;
    background: ˇ;
    -webkit-text-fill-color: rgba(0, 0, 0, 0) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset;
    transition: background-color 5000s ease-in-out 0s
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=file] {
    text-indent: 11%;
    text-align: center;
    color: var(--black);
    border: 2px dashed var(--inputColor2) !important
}

input[type=file]:hover, input[type=file]:focus {
    box-shadow: none !important
}

input[type=file]:invalid {
    text-indent: 0
}

input[type=file]:valid {
    text-indent: 12%;
    color: var(--inputColor)
}

input[type=file]:valid::before {
    opacity: 0
}

input[type=file]::file-selector-button {
    opacity: 0;
    width: 0;
    margin: 0
}

input[type=file]::before {
    content: "Upload File";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 20% center;
    background-size: contain;
    pointer-events: none;
    background-color: var(--white);
    text-align: center;
    text-indent: 15px
}

.range-slider .irs {
    width: 100%
}

.range-slider .irs-to, .range-slider .irs-from {
    background-color: var(--darkGray)
}

.range-slider .irs-single {
    background-color: var(--darkGray)
}

.range-slider .irs--round .irs-bar {
    background-color: var(--inputColor3)
}

.range-slider .irs--round .irs-handle {
    border: 4px solid var(--inputColor4)
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox], input[type=radio] {
        --active: var(--inputColor5);
        --active-inner: #fff;
        --focus: 2px var(--inputColor4);
        --border: var(--borderGray);
        --border-hover: var(--inputColor3);
        --background: var(--white);
        --disabled: var(--inputColor1);
        --disabled-inner: var(--inputColor1);
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        padding: .5rem;
        margin-right: 10px;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: var(--transition1)
    }

    input[type=checkbox]:after, input[type=radio]:after {
        content: "";
        display: block;
        left: -1px;
        top: -1px;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s)
    }

    input[type=checkbox]:checked, input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
    }

    input[type=checkbox]:checked + label, input[type=radio]:checked + label {
        color: var(--black) !important
    }

    input[type=checkbox]:checked + label::before, input[type=radio]:checked + label::before {
        border: 3px solid var(--color4) !important;
        box-shadow: 2px 4px 16px rgba(0, 0, 0, .16) !important
    }

    input[type=checkbox]:checked + label span, input[type=radio]:checked + label span {
        text-shadow: none
    }

    input[type=checkbox]:disabled, input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: .9
    }

    input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border)
    }

    input[type=checkbox]:disabled + label, input[type=radio]:disabled + label {
        cursor: not-allowed
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover)
    }

    input[type=checkbox]:focus, input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus)
    }

    input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
        width: 20px;
        min-width: 20px;
        height: 20px
    }

    input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
        opacity: var(--o, 0)
    }

    input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
        --o: 1
    }

    input[type=checkbox] + label, input[type=radio] + label {
        font-size: .733rem;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: .5rem
    }

    input[type=checkbox]:not(.switch) {
        border-radius: var(--inputRadius)
    }

    input[type=checkbox]:not(.switch):after {
        width: 4px;
        height: 8px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 5px;
        top: 2px;
        transform: rotate(var(--r, 20deg))
    }

    input[type=checkbox]:not(.switch):checked {
        --r: 43deg
    }

    input[type=checkbox].switch {
        width: 38px !important;
        border-radius: 11px;
        background: var(--b, var(--background)) !important;
        transition-delay: unset !important
    }

    input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0))
    }

    input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px
    }

    input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: .6
    }

    input[type=radio] {
        border-radius: 50%
    }

    input[type=radio]:after {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7))
    }

    input[type=radio]:checked {
        --s: .5
    }
}

input:not([type=radio]):not([type=checkbox]), textarea, select, datalist, selector selected, #noteInputElement, .searchBar, .dateRange, .contactSummaryNote {
    color: var(--text-color);
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    border-radius: var(--inputRadius);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0);
    transition: border .35s, box-shadow .5s !important
}

input:not([type=radio]):not([type=checkbox]):hover, textarea:hover, select:hover, datalist:hover, selector selected:hover, #noteInputElement:hover, .searchBar:hover, .dateRange:hover, .contactSummaryNote:hover {
    border: 1px solid var(--inputColor2)
}

input:not([type=radio]):not([type=checkbox]):focus, textarea:focus, select:focus, datalist:focus, selector selected:focus, #noteInputElement:focus, .searchBar:focus, .dateRange:focus, .contactSummaryNote:focus {
    outline: 0;
    background-color: var(--white);
    border: 1px solid var(--inputColor3);
    box-shadow: 0 0 0 2.5px var(--inputColor3)
}

input:not([type=radio]):not([type=checkbox]):active, textarea:active, select:active, datalist:active, selector selected:active, #noteInputElement:active, .searchBar:active, .dateRange:active, .contactSummaryNote:active {
    background-color: var(--white);
    border: 1px solid var(--inputColor4)
}

input:not([type=radio]):not([type=checkbox]):visited, textarea:visited, select:visited, datalist:visited, selector selected:visited, #noteInputElement:visited, .searchBar:visited, .dateRange:visited, .contactSummaryNote:visited {
    background-color: var(--white);
    border: 1px solid var(--inputColor1)
}

.aiSerachBar, .multipleDocumentList .fileDetailsInputDiv, .viewDataPopup .mainDetailsDescription, .createDataPopup .mainDetailsDescription, .viewDataPopupWide .mainDetailsDescription, .viewDataPage .mainDetailsDescription, .viewDataPageNarrow .mainDetailsDescription, .viewDataPageWide .mainDetailsDescription, #viewDataMenuPage .mainDetailsDescription, .createDataPage .mainDetailsDescription, .multiStepDataPage .mainDetailsDescription, .uploadInput, .floatingLabel, .inputDiv {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 1.413rem
}

.aiSerachBar .inputBox [type=search], .multipleDocumentList .fileDetailsInputDiv .inputBox [type=search], .viewDataPopup .mainDetailsDescription .inputBox [type=search], .createDataPopup .mainDetailsDescription .inputBox [type=search], .viewDataPopupWide .mainDetailsDescription .inputBox [type=search], .viewDataPage .mainDetailsDescription .inputBox [type=search], .viewDataPageNarrow .mainDetailsDescription .inputBox [type=search], .viewDataPageWide .mainDetailsDescription .inputBox [type=search], #viewDataMenuPage .mainDetailsDescription .inputBox [type=search], .createDataPage .mainDetailsDescription .inputBox [type=search], .multiStepDataPage .mainDetailsDescription .inputBox [type=search], .uploadInput .inputBox [type=search], .floatingLabel .inputBox [type=search], .inputDiv .inputBox [type=search] {
    padding-right: 46px !important
}

.aiSerachBar .inputBox button, .multipleDocumentList .fileDetailsInputDiv .inputBox button, .viewDataPopup .mainDetailsDescription .inputBox button, .createDataPopup .mainDetailsDescription .inputBox button, .viewDataPopupWide .mainDetailsDescription .inputBox button, .viewDataPage .mainDetailsDescription .inputBox button, .viewDataPageNarrow .mainDetailsDescription .inputBox button, .viewDataPageWide .mainDetailsDescription .inputBox button, #viewDataMenuPage .mainDetailsDescription .inputBox button, .createDataPage .mainDetailsDescription .inputBox button, .multiStepDataPage .mainDetailsDescription .inputBox button, .uploadInput .inputBox button, .floatingLabel .inputBox button, .inputDiv .inputBox button {
    height: clamp(32px, 6vw, 40px);
    font-size: .878rem;
    padding: 0 16px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--inputRadius);
    cursor: pointer;
    transition: var(--transition1)
}

.aiSerachBar .inputBox button:hover i, .multipleDocumentList .fileDetailsInputDiv .inputBox button:hover i, .viewDataPopup .mainDetailsDescription .inputBox button:hover i, .createDataPopup .mainDetailsDescription .inputBox button:hover i, .viewDataPopupWide .mainDetailsDescription .inputBox button:hover i, .viewDataPage .mainDetailsDescription .inputBox button:hover i, .viewDataPageNarrow .mainDetailsDescription .inputBox button:hover i, .viewDataPageWide .mainDetailsDescription .inputBox button:hover i, #viewDataMenuPage .mainDetailsDescription .inputBox button:hover i, .createDataPage .mainDetailsDescription .inputBox button:hover i, .multiStepDataPage .mainDetailsDescription .inputBox button:hover i, .uploadInput .inputBox button:hover i, .floatingLabel .inputBox button:hover i, .inputDiv .inputBox button:hover i {
    color: var(--color2)
}

.aiSerachBar .inputBox button i, .multipleDocumentList .fileDetailsInputDiv .inputBox button i, .viewDataPopup .mainDetailsDescription .inputBox button i, .createDataPopup .mainDetailsDescription .inputBox button i, .viewDataPopupWide .mainDetailsDescription .inputBox button i, .viewDataPage .mainDetailsDescription .inputBox button i, .viewDataPageNarrow .mainDetailsDescription .inputBox button i, .viewDataPageWide .mainDetailsDescription .inputBox button i, #viewDataMenuPage .mainDetailsDescription .inputBox button i, .createDataPage .mainDetailsDescription .inputBox button i, .multiStepDataPage .mainDetailsDescription .inputBox button i, .uploadInput .inputBox button i, .floatingLabel .inputBox button i, .inputDiv .inputBox button i {
    color: var(--color3);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    cursor: pointer;
    transition: var(--transition1)
}

.aiSerachBar selector, .multipleDocumentList .fileDetailsInputDiv selector, .viewDataPopup .mainDetailsDescription selector, .createDataPopup .mainDetailsDescription selector, .viewDataPopupWide .mainDetailsDescription selector, .viewDataPage .mainDetailsDescription selector, .viewDataPageNarrow .mainDetailsDescription selector, .viewDataPageWide .mainDetailsDescription selector, #viewDataMenuPage .mainDetailsDescription selector, .createDataPage .mainDetailsDescription selector, .multiStepDataPage .mainDetailsDescription selector, .uploadInput selector, .floatingLabel selector, .inputDiv selector {
    width: 100%
}

.aiSerachBar .lgIcon, .multipleDocumentList .fileDetailsInputDiv .lgIcon, .viewDataPopup .mainDetailsDescription .lgIcon, .createDataPopup .mainDetailsDescription .lgIcon, .viewDataPopupWide .mainDetailsDescription .lgIcon, .viewDataPage .mainDetailsDescription .lgIcon, .viewDataPageNarrow .mainDetailsDescription .lgIcon, .viewDataPageWide .mainDetailsDescription .lgIcon, #viewDataMenuPage .mainDetailsDescription .lgIcon, .createDataPage .mainDetailsDescription .lgIcon, .multiStepDataPage .mainDetailsDescription .lgIcon, .uploadInput .lgIcon, .floatingLabel .lgIcon, .inputDiv .lgIcon {
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 5;
    transform: translateY(-50%);
    border-radius: var(--inputRadius)
}

.inputDiv label {
    margin-bottom: 10px
}

.inputDiv input:not([type=radio]):not([type=checkbox]):-webkit-autofill, .inputDiv textarea:-webkit-autofill, .inputDiv select:-webkit-autofill, .inputDiv datalist:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--inputColor1) inset !important;
    -webkit-text-fill-color: var(--black) !important
}

.inputDiv:has(.inputIcon) .inputIcon {
    position: absolute;
    top: 30px;
    left: 10px;
    transform: translateY(-50%);
    z-index: 1;
    border-radius: inherit;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit
}

.inputDiv:has(.inputIcon) label:not(:has(input)) {
    position: absolute;
    top: 6px;
    left: 50px;
    font-size: 14px;
    z-index: 1;
    color: inherit
}

.inputDiv:has(.inputIcon) input:not([type=radio]):not([type=checkbox]), .inputDiv:has(.inputIcon) textarea, .inputDiv:has(.inputIcon) select, .inputDiv:has(.inputIcon) datalist, .inputDiv:has(.inputIcon) selector selected, .inputDiv:has(.inputIcon) select {
    padding-top: 27px;
    padding-left: 50px;
    padding-bottom: 7px
}

.floatingLabel {
    display: flex;
    flex-direction: column
}

.floatingLabel label {
    position: absolute;
    top: 20px;
    left: 6px;
    padding: .25rem .5rem;
    pointer-events: none;
    display: block;
    z-index: 2
}

.floatingLabel input, .floatingLabel textarea, .floatingLabel select {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0)
}

.floatingLabel input::placeholder, .floatingLabel textarea::placeholder, .floatingLabel select::placeholder {
    opacity: 0
}

.floatingLabel input:focus, .floatingLabel input:valid, .floatingLabel textarea:focus, .floatingLabel textarea:valid, .floatingLabel select:focus, .floatingLabel select:valid {
    color: var(--black)
}

.floatingLabel input:focus::placeholder, .floatingLabel input:valid::placeholder, .floatingLabel textarea:focus::placeholder, .floatingLabel textarea:valid::placeholder, .floatingLabel select:focus::placeholder, .floatingLabel select:valid::placeholder {
    opacity: 1
}

.floatingLabel input:focus ~ label, .floatingLabel input:valid ~ label, .floatingLabel textarea:focus ~ label, .floatingLabel textarea:valid ~ label, .floatingLabel select:focus ~ label, .floatingLabel select:valid ~ label {
    top: -5px;
    color: var(--inputColor5);
    font-weight: 500;
    background-color: var(--white)
}

.viewDataPopup .titleDiv .title, .createDataPopup .titleDiv .title, .viewDataPopupWide .titleDiv .title, .viewDataPage .titleDiv .title, .viewDataPageNarrow .titleDiv .title, .viewDataPageWide .titleDiv .title, #viewDataMenuPage .titleDiv .title, .createDataPage .titleDiv .title, .multiStepDataPage .titleDiv .title, .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title, .titleInput, .smartInput {
    margin-bottom: 1rem
}

.viewDataPopup .titleDiv .title input, .createDataPopup .titleDiv .title input, .viewDataPopupWide .titleDiv .title input, .viewDataPage .titleDiv .title input, .viewDataPageNarrow .titleDiv .title input, .viewDataPageWide .titleDiv .title input, #viewDataMenuPage .titleDiv .title input, .createDataPage .titleDiv .title input, .multiStepDataPage .titleDiv .title input, .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input, .titleInput input, .smartInput input {
    color: var(--black);
    padding: .5rem 0;
    border: none;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid var(--borderGray);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0
}

@media (min-width: 768px) {
    .viewDataPopup .titleDiv .title input, .createDataPopup .titleDiv .title input, .viewDataPopupWide .titleDiv .title input, .viewDataPage .titleDiv .title input, .viewDataPageNarrow .titleDiv .title input, .viewDataPageWide .titleDiv .title input, #viewDataMenuPage .titleDiv .title input, .createDataPage .titleDiv .title input, .multiStepDataPage .titleDiv .title input, .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input, .titleInput input, .smartInput input {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.viewDataPopup .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .createDataPopup .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .viewDataPopupWide .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .viewDataPage .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .viewDataPageNarrow .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .viewDataPageWide .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), #viewDataMenuPage .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .createDataPage .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .multiStepDataPage .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:is(:hover,:focus,:active,:visited,:valid), .titleInput input:is(:hover,:focus,:active,:visited,:valid), .smartInput input:is(:hover,:focus,:active,:visited,:valid) {
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none
}

.titleInput:has(input:valid) label {
    display: none
}

.titleInput {
    width: 100%
}

.titleInput label {
    color: var(--highlight);
    display: block;
    margin-bottom: 0m
}

.titleInput input:not([type=radio]):not([type=checkbox]) {
    font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px);
    font-weight: 500;
    padding-left: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    caret-color: var(--inputColor5);
    box-shadow: none;
    text-transform: capitalize
}

@media (min-width: 1024px) {
    .titleInput input:not([type=radio]):not([type=checkbox]) {
        font-size: clamp(25.62890625px, 25.123072574px + 0.0010538202 * 100vw, 27.2307128906px)
    }
}

@media (min-width: 1800px) {
    .titleInput input:not([type=radio]):not([type=checkbox]) {
        font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px)
    }
}

.titleInput input:not([type=radio]):not([type=checkbox]):focus + .messageBox::after {
    display: none
}

.titleInput input:not([type=radio]):not([type=checkbox]):valid + .messageBox:after {
    display: none
}

.titleInput input:not([type=radio]):not([type=checkbox])::placeholder {
    font-size: inherit;
    font-weight: 500;
    transition: var(--transition1)
}

.titleInput .messageBox:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: var(--inputColor5);
    left: 0;
    top: -5px;
    transform: translateY(-130%);
    animation-name: blink;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    opacity: 1
}

@keyframes blink {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.horizontalInput, .horizontalInputDiv .inputDiv {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: .75rem
}

@media (min-width: 568px) {
    .horizontalInput, .horizontalInputDiv .inputDiv {
        flex-direction: row;
        align-items: center
    }
}

.horizontalInput label:not(:has([type=radio],[type=checkbox])), .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox])) {
    position: absolute;
    top: 8px;
    left: var(--input-size);
    z-index: 1
}

.horizontalInput label:not(:has([type=radio],[type=checkbox])):has([class=switch]), .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox])):has([class=switch]) {
    min-width: auto;
    margin-bottom: 0;
    overflow: unset
}

.horizontalInput label:not(:has([type=radio],[type=checkbox])):has([class=switch])::after, .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox])):has([class=switch])::after {
    content: ""
}

.horizontalInput label:not(:has([type=radio],[type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox]), .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox]) {
    --active: var(--green) !important;
    transform: scale(1.25);
    margin-right: 0
}

.horizontalInput label:not(:has([type=radio],[type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox])::before, .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 100%;
    transform: translate(-50%, -50%) scale(2)
}

@media (min-width: 568px) {
    .horizontalInput label:not(:has([type=radio],[type=checkbox])), .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox])) {
        position: relative;
        top: unset;
        left: unset;
        width: auto;
        min-width: 200px;
        margin: 0;
        margin-top: 10px;
        font-size: 1rem
    }
}

@media (min-width: 768px) {
    .horizontalInput label:not(:has([type=radio],[type=checkbox])), .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox])) {
        font-size: .937rem
    }
}

@media (min-width: 568px) {
    .horizontalInput label:not(:has([type=radio],[type=checkbox]))::after, .horizontalInputDiv .inputDiv label:not(:has([type=radio],[type=checkbox]))::after {
        content: ":";
        color: var(--textGray);
        margin-left: auto;
        margin-right: 1rem;
        margin-bottom: 3px
    }
}

.horizontalInput input, .horizontalInputDiv .inputDiv input, .horizontalInput select, .horizontalInputDiv .inputDiv select, .horizontalInput textarea, .horizontalInputDiv .inputDiv textarea, .horizontalInput selector selected item, .horizontalInputDiv .inputDiv selector selected item, .horizontalInput .inputBox, .horizontalInputDiv .inputDiv .inputBox, .horizontalInput .optionList, .horizontalInputDiv .inputDiv .optionList {
    padding-top: 30px;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

@media (min-width: 568px) {
    .horizontalInput input, .horizontalInputDiv .inputDiv input, .horizontalInput select, .horizontalInputDiv .inputDiv select, .horizontalInput textarea, .horizontalInputDiv .inputDiv textarea, .horizontalInput selector selected item, .horizontalInputDiv .inputDiv selector selected item, .horizontalInput .inputBox, .horizontalInputDiv .inputDiv .inputBox, .horizontalInput .optionList, .horizontalInputDiv .inputDiv .optionList {
        padding-top: .7rem;
        font-size: 1rem
    }
}

.horizontalInput input:not([type=radio]):not([type=checkbox]), .horizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]), .horizontalInput select, .horizontalInputDiv .inputDiv select, .horizontalInput textarea, .horizontalInputDiv .inputDiv textarea, .horizontalInput selector, .horizontalInputDiv .inputDiv selector, .horizontalInput .optionList, .horizontalInputDiv .inputDiv .optionList {
    width: 100%
}

@media (min-width: 568px) {
    .horizontalInput input:not([type=radio]):not([type=checkbox]), .horizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]), .horizontalInput select, .horizontalInputDiv .inputDiv select, .horizontalInput textarea, .horizontalInputDiv .inputDiv textarea, .horizontalInput selector, .horizontalInputDiv .inputDiv selector, .horizontalInput .optionList, .horizontalInputDiv .inputDiv .optionList {
        width: auto !important;
        flex: 1 !important
    }
}

.horizontalInput .optionList, .horizontalInputDiv .inputDiv .optionList {
    justify-content: flex-start
}

.horizontalInput textarea, .horizontalInputDiv .inputDiv textarea {
    min-width: auto
}

@media (min-width: 568px) {
    .horizontalInput input:not([type=date]), .horizontalInputDiv .inputDiv input:not([type=date]) {
        flex: 1
    }
}

.horizontalInput select, .horizontalInputDiv .inputDiv select {
    width: auto;
    min-width: auto;
    border: none
}

.horizontalInput .messageBox, .horizontalInputDiv .inputDiv .messageBox {
    width: 100%
}

.minimalHorizontalInputDiv .inputDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .75rem
}

.minimalHorizontalInputDiv .inputDiv label {
    width: auto;
    min-width: 200px;
    margin: 0;
    font-size: 1rem
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) {
    min-width: auto;
    margin-bottom: 0;
    overflow: unset
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch])::after {
    content: ""
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) input:not([type=radio]):not([type=checkbox]) {
    --active: var(--green) !important;
    transform: scale(1.25);
    margin-right: 0
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) input:not([type=radio]):not([type=checkbox])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 100%;
    transform: translate(-50%, -50%) scale(2)
}

@media (min-width: 768px) {
    .minimalHorizontalInputDiv .inputDiv label {
        font-size: .937rem
    }
}

.minimalHorizontalInputDiv .inputDiv label::after {
    content: ":";
    color: var(--textGray);
    margin-left: auto;
    margin-right: 1rem;
    margin-bottom: 3px
}

.minimalHorizontalInputDiv .inputDiv input, .minimalHorizontalInputDiv .inputDiv select, .minimalHorizontalInputDiv .inputDiv textarea, .minimalHorizontalInputDiv .inputDiv selector selected item {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

@media (min-width: 568px) {
    .minimalHorizontalInputDiv .inputDiv input, .minimalHorizontalInputDiv .inputDiv select, .minimalHorizontalInputDiv .inputDiv textarea, .minimalHorizontalInputDiv .inputDiv selector selected item {
        font-size: 1rem
    }
}

.minimalHorizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]), .minimalHorizontalInputDiv .inputDiv select, .minimalHorizontalInputDiv .inputDiv textarea, .minimalHorizontalInputDiv .inputDiv selector {
    width: auto !important;
    flex: 1 !important
}

.minimalHorizontalInputDiv .inputDiv textarea {
    min-width: auto
}

.minimalHorizontalInputDiv .inputDiv input:not([type=date]) {
    flex: 1
}

.minimalHorizontalInputDiv .inputDiv select {
    width: auto;
    min-width: auto;
    border: none
}

.minimalHorizontalInputDiv .inputDiv .messageBox {
    width: 100%
}

.actionInput selected {
    background-color: rgba(0, 0, 0, 0);
    border: none !important;
    padding: 0
}

.actionInput selected items {
    padding: 0
}

.actionInput selected item:not([value]) {
    min-height: 45px;
    border: 1px dashed var(--inputColor2);
    border-radius: var(--btnRadius);
    padding: 5px .7075rem
}

.inputBox {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.passwordShowIconDiv {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 35px;
    height: 35px;
    padding: 5px;
    border-radius: 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

.passwordShowIconDiv:hover {
    background-color: var(--lightGray)
}

.passwordShowIconDiv .hide {
    display: none
}

.passwordShowIconDiv .showIcon {
    display: block !important
}

.passwordShowIconDiv i {
    top: 3px;
    left: 5px;
    color: var(--textGray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    display: none;
    cursor: pointer;
    transition: var(--transition1)
}

.passwordShowIconDiv i:hover {
    color: var(--color3)
}

.dateRange {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.dateRange i {
    color: var(--visibleGray);
    cursor: pointer
}

.dateRange .value {
    margin: 0 .5rem;
    margin-right: auto;
    cursor: pointer
}

.checkboxList input::before, .radioList input::before {
    content: attr(data-label);
    color: var(--black);
    font-size: .878rem;
    margin-left: .7075rem
}

.checkBoxGridDiv {
    --checkbox-ratio: 16/1;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 2%;
    justify-content: flex-start
}

.checkBoxGridDiv label {
    color: var(--black);
    width: 48%;
    aspect-ratio: var(--checkbox-ratio);
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    border-radius: var(--btnRadius);
    white-space: normal
}

@media (min-width: 768px) {
    .checkBoxGridDiv label {
        width: 32%
    }
}

@media (min-width: 1024px) {
    .checkBoxGridDiv label {
        width: 23%
    }
}

.checkBoxGridDiv label i {
    color: var(--textGray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    pointer-events: none
}

.checkBoxGridDiv label .title {
    pointer-events: none
}

.checkBoxGridDiv label .text {
    pointer-events: none
}

.checkBoxGridDiv label input {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--btnRadius) !important;
    background-color: rgba(0, 0, 0, 0)
}

.checkBoxGridDiv label input::after {
    display: none
}

.checkBoxGridDiv label input:checked {
    box-shadow: 0 0 0 var(--focus)
}

.inputCounter input[type=date]::placeholder, .inputCounter input[type=datetime-local]::placeholder, .inputCounter input[type=email]::placeholder, .inputCounter input[type=file]::placeholder, .inputCounter input[type=hidden]::placeholder, .inputCounter input[type=month]::placeholder, .inputCounter input[type=number]::placeholder, .inputCounter input[type=password]::placeholder, .inputCounter input[type=range]::placeholder, .inputCounter input[type=search]::placeholder, .inputCounter input[type=tel]::placeholder, .inputCounter input[type=text]::placeholder, .inputCounter input[type=time]::placeholder, .inputCounter input[type=url]::placeholder, .inputCounter input[type=week]::placeholder, .inputCounter textarea::placeholder, .inputCounter select::placeholder, .inputCounter datalist::placeholder {
    opacity: 1
}

.inputCounter .inputBox:has(button) input {
    text-align: center
}

.inputCounter .inputBox button {
    position: absolute;
    right: 0;
    z-index: 1;
    border-left: 1px solid var(--borderGray);
    padding: .75rem .5rem
}

.inputCounter .inputBox button:hover {
    background-color: var(--black)
}

.inputCounter .inputBox button:hover i {
    color: var(--textGray)
}

.inputCounter .inputBox button:nth-child(1) {
    left: 0;
    right: unset;
    border: none;
    border-right: 1px solid var(--borderGray)
}

.inputCounter .inputBox button i {
    color: var(--gray)
}

.optionList {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px
}

.optionList label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.optionList label:has(:checked) {
    color: var(--inputColor)
}

.optionList label input[type=radio], .optionList label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media (min-width: 768px) {
    .optionList label input[type=radio], .optionList label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.optionList label input[type=radio]:hover, .optionList label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.optionList label input[type=radio]:hover::after, .optionList label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.optionList label input[type=radio]::after, .optionList label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.optionList label input[type=radio]:focus, .optionList label input[type=radio]:active, .optionList label input[type=checkbox]:focus, .optionList label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.optionList label input[type=radio]:focus::after, .optionList label input[type=radio]:active::after, .optionList label input[type=checkbox]:focus::after, .optionList label input[type=checkbox]:active::after {
    color: var(--black)
}

.optionList label input[type=radio]:checked, .optionList label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.optionList label input[type=radio]:checked::after, .optionList label input[type=checkbox]:checked::after {
    color: var(--black)
}

.optionForm {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center
}

.optionForm label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.optionForm label:has(:checked) {
    color: var(--inputColor)
}

.optionForm label input[type=radio], .optionForm label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media (min-width: 768px) {
    .optionForm label input[type=radio], .optionForm label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.optionForm label input[type=radio]:hover, .optionForm label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.optionForm label input[type=radio]:hover::after, .optionForm label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.optionForm label input[type=radio]::after, .optionForm label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.optionForm label input[type=radio]:focus, .optionForm label input[type=radio]:active, .optionForm label input[type=checkbox]:focus, .optionForm label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.optionForm label input[type=radio]:focus::after, .optionForm label input[type=radio]:active::after, .optionForm label input[type=checkbox]:focus::after, .optionForm label input[type=checkbox]:active::after {
    color: var(--black)
}

.optionForm label input[type=radio]:checked, .optionForm label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.optionForm label input[type=radio]:checked::after, .optionForm label input[type=checkbox]:checked::after {
    color: var(--black)
}

.optionForm label {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem
}

.optionForm .options {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px
}

.optionForm .options input[type=radio] {
    margin: 0;
    margin-bottom: 10px
}

.optionForm .options input[type=radio]:checked + .formDiv {
    order: 10;
    display: flex
}

.optionForm .options .formDiv {
    display: none;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 1rem;
    text-align: center
}

.optionForm .options .formDiv:empty {
    margin-top: 0
}

.optionForm .options .formDiv label {
    width: auto;
    text-align: left;
    margin-bottom: .5rem
}

.gridOptionInput {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center;
    margin-top: 0
}

.gridOptionInput label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.gridOptionInput label:has(:checked) {
    color: var(--inputColor)
}

.gridOptionInput label input[type=radio], .gridOptionInput label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media (min-width: 768px) {
    .gridOptionInput label input[type=radio], .gridOptionInput label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.gridOptionInput label input[type=radio]:hover, .gridOptionInput label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.gridOptionInput label input[type=radio]:hover::after, .gridOptionInput label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.gridOptionInput label input[type=radio]::after, .gridOptionInput label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.gridOptionInput label input[type=radio]:focus, .gridOptionInput label input[type=radio]:active, .gridOptionInput label input[type=checkbox]:focus, .gridOptionInput label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.gridOptionInput label input[type=radio]:focus::after, .gridOptionInput label input[type=radio]:active::after, .gridOptionInput label input[type=checkbox]:focus::after, .gridOptionInput label input[type=checkbox]:active::after {
    color: var(--black)
}

.gridOptionInput label input[type=radio]:checked, .gridOptionInput label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.gridOptionInput label input[type=radio]:checked::after, .gridOptionInput label input[type=checkbox]:checked::after {
    color: var(--black)
}

.gridOptionInput label {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem
}

.gridOptionInput .options {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px
}

.gridOptionInput .options input[type=radio] {
    margin: 0;
    margin-bottom: 10px
}

.gridOptionInput .options input[type=radio]:checked + .formDiv {
    order: 10;
    display: flex
}

.gridOptionInput .options .formDiv {
    display: none;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 1rem;
    text-align: center
}

.gridOptionInput .options .formDiv:empty {
    margin-top: 0
}

.gridOptionInput .options .formDiv label {
    width: auto;
    text-align: left;
    margin-bottom: .5rem
}

.gridOptionInput .options {
    display: flex;
    gap: 0 2%;
    justify-content: center;
    margin-top: 1rem
}

.gridOptionInput .options label {
    min-height: 150px;
    width: 48%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--black)
}

@media (min-width: 568px) {
    .gridOptionInput .options label {
        width: 31%;
        margin-bottom: 1rem
    }
}

.gridOptionInput .options label i, .gridOptionInput .options label img {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    border-radius: var(--radius);
    pointer-events: none;
    transition: var(--transition1)
}

.gridOptionInput .options label * {
    z-index: 10
}

.gridOptionInput .options label .text {
    margin-top: 1rem
}

.gridOptionInput .options label input {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    margin: 0;
    transform: translate(-50%, -50%) scale(0.97);
    z-index: 1
}

.gridOptionInput .options label input::after {
    height: auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.gridOptionInput .options label input:checked {
    background-color: var(--white);
    box-shadow: var(--inputColor3) 0px 0px 0px 2px
}

.gridOptionInput .options label input:checked::after {
    color: var(--black)
}

.gridOptionInput .options label input:checked + i {
    color: var(--gray);
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray)
}

.gridListOptionInput {
    margin-top: 0
}

.gridListOptionInput .options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    justify-content: flex-start;
    margin-top: 1rem
}

.gridListOptionInput .options label {
    width: auto;
    min-height: 55px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

@media (min-width: 568px) {
    .gridListOptionInput .options label {
        margin-bottom: 1rem
    }
}

.gridListOptionInput .options label i, .gridListOptionInput .options label img {
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-size: 1rem;
    padding: 10px;
    background-color: var(--lightGray);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--radius);
    z-index: 10;
    pointer-events: none;
    transition: var(--transition1)
}

.gridListOptionInput .options label input {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    margin: 0;
    padding-left: 55px;
    cursor: pointer
}

.gridListOptionInput .options label input::after {
    content: attr(data-label);
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: none;
    cursor: pointer
}

.gridListOptionInput .options label input:checked {
    background-color: var(--white);
    box-shadow: var(--inputColor3) 0px 0px 0px 2px
}

.gridListOptionInput .options label input:checked::after {
    color: var(--black)
}

.gridListOptionInput .options label input:checked + i {
    color: var(--gray);
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray)
}

.uploadInput:hover .inputBox {
    border: 1px dashed var(--inputColor4)
}

.uploadInput:hover .inputBox label {
    color: var(--inputColor4)
}

.uploadInput .inputBox {
    background-color: var(--lightGray);
    border: 1px dashed var(--inputColor3);
    border-radius: var(--inputRadius);
    overflow: hidden;
    transition: var(--transition1)
}

.uploadInput .inputBox label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inputColor5);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    pointer-events: none;
    cursor: pointer;
    transition: var(--transition1)
}

.uploadInput .inputBox label i {
    margin-right: .5rem;
    transition: var(--transition1)
}

.uploadInput .inputBox input {
    opacity: 0;
    z-index: 1;
    padding-top: calc(var(--image-ratio) * 100%);
    cursor: pointer
}

.inputEditor {
    padding-top: 0
}

.inputEditor .ql-container.ql-snow {
    border: 1px solid var(--inputBorder) !important;
    border-radius: var(--inputRadius)
}

.inputEditor .ql-toolbar.ql-snow {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    border: none;
    border-top: 1px solid var(--borderGray);
    border-radius: .25rem
}

.inputEditor textarea {
    height: 200px;
    border: 1px solid var(--inputBorder) !important;
    padding-bottom: 2.83rem !important
}

.taskListForm {
    display: flex;
    flex-direction: column;
    gap: 0
}

.taskListForm .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y)
}

.taskListForm .inputDiv {
    margin: 0;
    width: 100%;
    align-items: unset;
    border-bottom: 1px solid var(--borderGray)
}

@media (min-width: 1024px) {
    .taskListForm .inputDiv {
        flex-direction: row
    }
}

.taskListForm .inputDiv:nth-child(even) {
    background: var(--inputColor1)
}

.taskListForm .inputDiv :is(h2,h3,h4,h5,p) {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    margin: 0;
    font-weight: 400;
    display: flex;
    align-items: center
}

@media (min-width: 1024px) {
    .taskListForm .inputDiv :is(h2,h3,h4,h5,p) {
        border-right: 1px solid var(--borderGray)
    }
}

.taskListForm .inputDiv .inputBox {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center
}

.taskListForm .inputDiv .inputBox label {
    margin: 0;
    width: max-content;
    min-width: 100px;
    padding: var(--input-size);
    font-size: 1rem;
    z-index: 1;
    text-align: center;
    justify-content: center
}

.taskListForm .inputDiv .inputBox label:has(:checked) {
    color: var(--inputColor)
}

.taskListForm .inputDiv .inputBox label input[type=radio], .taskListForm .inputDiv .inputBox label input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--textGray);
    background-color: var(--white);
    border-radius: var(--inputRadius);
    padding: 0;
    margin: 0;
    transition: var(--transition1);
    cursor: pointer
}

@media (min-width: 768px) {
    .taskListForm .inputDiv .inputBox label input[type=radio], .taskListForm .inputDiv .inputBox label input[type=checkbox] {
        border: 1px solid var(--borderGray)
    }
}

.taskListForm .inputDiv .inputBox label input[type=radio]:hover, .taskListForm .inputDiv .inputBox label input[type=checkbox]:hover {
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor1);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.taskListForm .inputDiv .inputBox label input[type=radio]:hover::after, .taskListForm .inputDiv .inputBox label input[type=checkbox]:hover::after {
    color: var(--color1)
}

.taskListForm .inputDiv .inputBox label input[type=radio]::after, .taskListForm .inputDiv .inputBox label input[type=checkbox]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--darkGray);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: var(--transition1);
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:focus, .taskListForm .inputDiv .inputBox label input[type=radio]:active, .taskListForm .inputDiv .inputBox label input[type=checkbox]:focus, .taskListForm .inputDiv .inputBox label input[type=checkbox]:active {
    border: 1px solid var(--inputColor3);
    box-shadow: var(--inputColor2) 0px 0px 0px 1px;
    background-color: var(--inputColor1)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:focus::after, .taskListForm .inputDiv .inputBox label input[type=radio]:active::after, .taskListForm .inputDiv .inputBox label input[type=checkbox]:focus::after, .taskListForm .inputDiv .inputBox label input[type=checkbox]:active::after {
    color: var(--black)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:checked, .taskListForm .inputDiv .inputBox label input[type=checkbox]:checked {
    background-color: var(--white);
    border: 1px solid var(--inputColor5);
    box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.taskListForm .inputDiv .inputBox label input[type=radio]:checked::after, .taskListForm .inputDiv .inputBox label input[type=checkbox]:checked::after {
    color: var(--black)
}

@media (min-width: 1024px) {
    .taskListForm .inputDiv .inputBox {
        width: 335px;
        text-align: center
    }
}

.taskListForm .inputDiv .inputBox [type=file] {
    width: 100%
}

.taskListForm .btnDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    justify-content: flex-end
}

[drag_scroll] {
    overflow-x: auto;
    white-space: nowrap;
    cursor: grab;
    scroll-behavior: smooth
}

[drag_scroll].active {
    cursor: grabbing
}

[data-tooltip] {
    overflow: initial
}

[data-tooltip]:not([data-tooltip]):before {
    display: none
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip]:focus {
    z-index: 999
}

[data-tooltip]:focus::before, [data-tooltip]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    [data-tooltip]:hover {
        z-index: 999
    }

    [data-tooltip]:hover::before, [data-tooltip]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-top] {
    overflow: initial
}

[data-tooltip-top]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-top]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-top]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-top]:focus {
    z-index: 999
}

[data-tooltip-top]:focus::before, [data-tooltip-top]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    [data-tooltip-top]:hover {
        z-index: 999
    }

    [data-tooltip-top]:hover::before, [data-tooltip-top]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-top]::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

[data-tooltip-top]::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

[data-tooltip-bottom] {
    overflow: initial
}

[data-tooltip-bottom]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-bottom]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-bottom]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-bottom]:focus {
    z-index: 999
}

[data-tooltip-bottom]:focus::before, [data-tooltip-bottom]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    [data-tooltip-bottom]:hover {
        z-index: 999
    }

    [data-tooltip-bottom]:hover::before, [data-tooltip-bottom]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-bottom]::before {
    bottom: unset;
    right: unset;
    top: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

[data-tooltip-bottom]::after {
    top: unset;
    right: unset;
    bottom: 0;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

[data-tooltip-left] {
    overflow: initial
}

[data-tooltip-left]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-left]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-left]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-left]:focus {
    z-index: 999
}

[data-tooltip-left]:focus::before, [data-tooltip-left]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    [data-tooltip-left]:hover {
        z-index: 999
    }

    [data-tooltip-left]:hover::before, [data-tooltip-left]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-left]::before {
    top: unset;
    left: unset;
    bottom: 50%;
    right: 100%;
    transform: none;
    transform: translateY(50%)
}

[data-tooltip-left]::after {
    top: unset;
    right: unset;
    bottom: 50%;
    left: -3px;
    transform: none;
    transform: translateY(50%) rotate(90deg)
}

[data-tooltip-right] {
    overflow: initial
}

[data-tooltip-right]:not([data-tooltip]):before {
    display: none
}

[data-tooltip-right]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

[data-tooltip-right]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

[data-tooltip-right]:focus {
    z-index: 999
}

[data-tooltip-right]:focus::before, [data-tooltip-right]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    [data-tooltip-right]:hover {
        z-index: 999
    }

    [data-tooltip-right]:hover::before, [data-tooltip-right]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

[data-tooltip-right]::before {
    top: unset;
    right: unset;
    bottom: 50%;
    left: 100%;
    transform: none;
    transform: translateY(50%)
}

[data-tooltip-right]::after {
    top: unset;
    left: unset;
    bottom: 50%;
    right: -3px;
    transform: none;
    transform: translateY(50%) rotate(-90deg)
}

.moreBtn {
    display: flex;
    align-items: center;
    padding: .25rem;
    cursor: pointer
}

.moreBtn:hover .moreIcon {
    opacity: .5
}

.moreBtn:hover .btnMenuDiv {
    display: block;
    transform: none;
    opacity: 1;
    pointer-events: all
}

.moreBtn .moreIcon {
    display: flex;
    align-items: center;
    color: var(--gray);
    font-size: .733rem;
    z-index: 1;
    cursor: pointer;
    transition: var(--transition1)
}

.moreBtn .btnMenuDiv {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    padding-top: 2rem;
    transform: scale(0.8);
    transition: var(--transition1)
}

.moreBtn .btnMenuDiv:hover {
    display: block;
    transform: none;
    opacity: 1;
    pointer-events: all
}

.moreBtn .btnMenuDiv .btnMenu {
    width: 100%;
    display: block;
    background-color: var(--bg-color);
    border-radius: var(--radius);
    border: 1px solid var(--lightGray);
    text-align: left;
    box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px;
    overflow: hidden
}

.moreBtn .btnMenuDiv .btnMenu .changeStatusBtn::before {
    display: none
}

.moreBtn .btnMenuDiv .btnMenu label input {
    margin-right: 1rem;
    transform: none
}

.moreBtn .btnMenuDiv .btnMenu label input::before {
    display: none
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    margin: 0;
    color: var(--text-color);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    white-space: nowrap;
    z-index: 1;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) {
        font-size: 1rem;
        padding: 1rem .7075rem
    }
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--lightGray) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover {
    color: var(--text-color)
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before {
    opacity: 1
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1) {
    padding-top: 1.413rem
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1) {
    padding-bottom: 1.413rem
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i {
    font-size: .733rem;
    line-height: 1
}

.moreBtn .btnMenuDiv .btnMenu .filledBtn, .moreBtn .btnMenuDiv .btnMenu .outlinedBtn, .moreBtn .btnMenuDiv .btnMenu .btn1, .moreBtn .btnMenuDiv .btnMenu .btn2, .moreBtn .btnMenuDiv .btnMenu .btn3, .moreBtn .btnMenuDiv .btnMenu .btn3 {
    width: calc(100% - 20px);
    margin: 10px;
    padding: .75rem .8rem !important;
    font-size: 1rem
}

.tabMenuNav {
    width: auto;
    overflow-x: auto;
    background-color: var(--white);
    --tab-width-mobile: 100px;
    --tab-width-web: 100px
}

.tabMenuNav .tabMenuDiv {
    width: 100%;
    display: flex;
    text-align: center;
    width: auto;
    margin: 0 auto
}

.tabMenuNav .tabMenuDiv:hover .tabMenu::before {
    background-color: rgba(0, 0, 0, 0)
}

.tabMenuNav .tabMenuDiv:hover .tabMenuBorder {
    background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenu {
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--textGray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    white-space: nowrap;
    padding: 1rem .5rem;
    border-radius: .7075rem;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .tabMenuNav .tabMenuDiv .tabMenu {
        font-size: 1rem;
        padding: .7075rem 1rem;
        width: var(--tab-width-web);
        min-width: var(--tab-width-web)
    }
}

.tabMenuNav .tabMenuDiv .tabMenu::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0);
    transition: var(--transition1)
}

.tabMenuNav .tabMenuDiv .tabMenu:hover {
    color: var(--color1)
}

.tabMenuNav .tabMenuDiv .tabMenu:hover ~ .tabMenuBorder {
    background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenu:active ~ .tabMenuBorder {
    background-color: var(--highlight);
    opacity: .5;
    transition: all 250ms ease-out
}

.tabMenuNav .tabMenuDiv .tabMenu img {
    width: 25px
}

.tabMenuNav .tabMenuDiv .tabMenu i {
    top: 1px;
    font-size: .878rem
}

.tabMenuNav .tabMenuDiv .tabMenu i, .tabMenuNav .tabMenuDiv .tabMenu img {
    margin-right: 10px
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1).active ~ .tabMenuBorder {
    transform: translateX(0%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):active ~ .active ~ .tabMenuBorder {
    transform: translateX(0%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2).active ~ .tabMenuBorder {
    transform: translateX(100%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):active ~ .active ~ .tabMenuBorder {
    transform: translateX(100%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3).active ~ .tabMenuBorder {
    transform: translateX(200%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):active ~ .active ~ .tabMenuBorder {
    transform: translateX(200%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4).active ~ .tabMenuBorder {
    transform: translateX(300%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):active ~ .active ~ .tabMenuBorder {
    transform: translateX(300%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5).active ~ .tabMenuBorder {
    transform: translateX(400%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):active ~ .active ~ .tabMenuBorder {
    transform: translateX(400%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6).active ~ .tabMenuBorder {
    transform: translateX(500%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):active ~ .active ~ .tabMenuBorder {
    transform: translateX(500%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7).active ~ .tabMenuBorder {
    transform: translateX(600%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):active ~ .active ~ .tabMenuBorder {
    transform: translateX(600%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8).active ~ .tabMenuBorder {
    transform: translateX(700%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):hover ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):hover ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):focus ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):focus ~ .active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):active ~ .tabMenuBorder, .tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):active ~ .active ~ .tabMenuBorder {
    transform: translateX(700%)
}

.tabMenuNav .tabMenuDiv .activeTabMenu {
    color: var(--black);
    font-weight: 500
}

.tabMenuNav .tabMenuDiv .activeTabMenu::before {
    background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenuBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    margin: 0;
    border: 0;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0);
    transform: translateX(-50%);
    transition: all 375ms ease-out;
    will-change: transform, background
}

@media (min-width: 768px) {
    .tabMenuNav .tabMenuDiv .tabMenuBorder {
        width: var(--tab-width-web);
        min-width: var(--tab-width-web)
    }
}

.tabBarWrapper {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    left: 0;
    transition: var(--transition2)
}

.tabBarWrapper .tabBarSlide {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 0
}

.tabBarWrapper .tabBarSlide:nth-child(1) {
    height: auto
}

.dropDownDiv, .dropSection {
    width: 100%;
    margin: 0 auto
}

.dropDownDiv .dropList, .dropSection .dropList {
    display: block
}

.dropDownDiv .dropList .dropBox, .dropSection .dropList .dropBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    transition: var(--transition1);
    cursor: pointer
}

.dropDownDiv .dropList .dropBox .moreBtn, .dropSection .dropList .dropBox .moreBtn {
    margin-left: auto;
    padding: 1rem
}

.dropDownDiv .dropList .dropBox div, .dropSection .dropList .dropBox div {
    cursor: pointer;
    transition: var(--transition1)
}

.dropDownDiv .dropList .dropBox div i, .dropSection .dropList .dropBox div i {
    color: inherit;
    font-size: .878rem;
    cursor: pointer;
    transition: var(--transition1)
}

.dropDownDiv .dropList .dropBox div .dropRemove, .dropSection .dropList .dropBox div .dropRemove {
    display: none
}

.dropDownDiv .dropList .dropContent, .dropSection .dropList .dropContent {
    display: none;
    width: 100%
}

.dropDownDiv .dropList .dropContent p:nth-child(1), .dropSection .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

.multiStepForm {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    counter-reset: form-steps;
    padding-top: 0;
    background: var(--bgShadeWeb)
}

.multiStepForm .progressBarContainer {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0
}

.multiStepForm .progressBarContainer .progressBar {
    height: 3px;
    background: var(--color1);
    border-radius: var(--radius);
    transition: var(--transition2)
}

.multiStepForm .multiStepSummary {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary {
        position: fixed;
        top: 0;
        left: var(--menuBarWidth);
        min-height: 100vh;
        width: 400px;
        max-width: 400px
    }
}

@media (min-width: 1800px) {
    .multiStepForm .multiStepSummary {
        padding: 5.65rem;
        width: 500px;
        max-width: 500px
    }
}

.multiStepForm .multiStepSummary .headingDiv {
    text-align: center;
    margin-bottom: 2rem
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary .headingDiv {
        text-align: left;
        margin-bottom: 50px
    }
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary .headingDiv .breadcrumb {
        justify-content: flex-start
    }
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a {
    color: var(--black);
    font-size: .878rem;
    padding-right: 5px;
    cursor: pointer;
    transition: var(--transition1)
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:hover {
    color: var(--highlight)
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:nth-last-child(1) {
    padding-right: 0;
    color: var(--highlight);
    pointer-events: none
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb i {
    font-size: .667rem;
    opacity: .5;
    margin-right: 5px
}

.multiStepForm .multiStepSummary .headingDiv .heading {
    margin: 0;
    font-weight: 400
}

.multiStepForm .multiStepSummary .headingDiv p {
    opacity: .8
}

.multiStepForm .multiStepSummary ul {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 100%;
    margin-bottom: auto;
    display: flex
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary ul {
        position: relative;
        left: unset;
        bottom: unset;
        transform: none;
        flex-direction: column
    }
}

.multiStepForm .multiStepSummary ul .tabMenu {
    flex: 1;
    min-height: 40px;
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f
}

.multiStepForm .multiStepSummary ul .tabMenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu {
        flex: none;
        width: 100%;
        padding-left: 60px;
        margin-bottom: 2rem
    }
}

.multiStepForm .multiStepSummary ul .tabMenu::before {
    counter-increment: form-steps;
    content: counter(form-steps);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    background-color: rgba(251, 255, 250, .3568627451);
    border: 1px solid var(--highlight);
    border-radius: 100%;
    transition: var(--transition2)
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu::before {
        left: 0;
        transform: translateY(-50%)
    }
}

.multiStepForm .multiStepSummary ul .tabMenu::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 51%;
    width: 91%;
    height: 1px;
    border-bottom: 2px dashed var(--borderGray);
    transition: var(--transition2)
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu::after {
        top: 100%;
        left: 20px;
        width: 1px;
        height: 100%;
        border: none;
        border-left: 2px dashed var(--borderGray)
    }
}

.multiStepForm .multiStepSummary ul .tabMenu:nth-last-child(1)::after {
    display: none
}

.multiStepForm .multiStepSummary ul .tabMenu .title {
    display: none;
    margin: 0;
    color: var(--textGray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    line-height: 1
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu .title {
        display: block;
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.multiStepForm .multiStepSummary ul .tabMenu p {
    display: none;
    margin-top: 0;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 400
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary ul .tabMenu p {
        display: block;
        font-size: .937rem
    }
}

.multiStepForm .multiStepSummary ul .activeTabMenu::before {
    background-color: var(--highlight);
    border: 1px solid rgba(0, 0, 0, 0);
    color: var(--white);
    box-shadow: rgba(255, 255, 255, .1) 0px 1px 1px 0px inset, rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
}

.multiStepForm .multiStepSummary ul .activeTabMenu::after {
    border-left: 2px dashed var(--inputColor2)
}

.multiStepForm .multiStepSummary ul .activeTabMenu .title {
    color: var(--black);
    font-weight: 500
}

.multiStepForm .multiStepSummary dotlottie-player {
    display: none
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepSummary dotlottie-player {
        display: block
    }
}

.multiStepForm .formWrapper {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    min-height: 100vh;
    overflow: hidden
}

@media (min-width: 1024px) {
    .multiStepForm .formWrapper {
        width: calc(100% - 400px);
        margin-left: auto;
        padding-top: 0
    }
}

@media (min-width: 1800px) {
    .multiStepForm .formWrapper {
        width: calc(100% - 500px)
    }
}

.multiStepForm .formWrapper .heading {
    margin: 0;
    display: block;
    width: 100%;
    margin-bottom: .7075rem
}

.multiStepForm .formWrapper .dropDownDiv {
    width: 100%;
    overflow: hidden;
    background-color: var(--white);
    border-radius: .7075rem
}

.multiStepForm .formWrapper .multiStepWrapper {
    width: 100%;
    display: flex;
    align-items: flex-start
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    width: 100%;
    min-width: 100%;
    height: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 2%
}

@media (min-width: 1024px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer {
        padding-left: 2.83rem;
        padding-right: 2.83rem
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer:nth-child(1) {
    height: auto;
    opacity: 1
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title {
    width: 100%;
    margin: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
    font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px);
    padding-left: 5px;
    caret-color: var(--inputColor5);
    text-transform: capitalize
}

@media (min-width: 1024px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
        font-size: clamp(25.62890625px, 25.123072574px + 0.0010538202 * 100vw, 27.2307128906px)
    }
}

@media (min-width: 1800px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
        font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px)
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 60%;
    background-color: var(--inputColor5);
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:focus + .messageBox::after {
    display: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:valid + .messageBox:after {
    display: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::placeholder {
    font-size: inherit;
    transition: var(--transition1)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title .messageBox:after {
    content: "";
    display: block !important;
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: var(--inputColor5);
    left: 0;
    top: 0;
    transform: translateY(-130%);
    animation-name: blink;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    opacity: 1
}

@keyframes blink {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .text {
    max-width: 600px;
    line-height: 1.3;
    font-size: 1rem;
    font-weight: 400
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .detailsBox {
    padding: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    gap: 0 2%
}

@media (min-width: 1024px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
        width: calc(100% - 400px - var(--menuBarWidth));
        padding: .7075rem 2rem
    }
}

@media (min-width: 1800px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
        width: calc(100% - 500px - var(--menuBarWidth))
    }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 150%;
    background: #fff;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv a, .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv button {
    flex: 1
}

@media (min-width: 768px) {
    .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv a, .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv button {
        max-width: 200px
    }
}

.multiStepForm .formWrapper .gridOptionInput, .multiStepForm .formWrapper .optionForm {
    text-align: left
}

.multiStepForm .formWrapper .gridOptionInput label, .multiStepForm .formWrapper .optionForm label {
    margin: 0
}

.multiStepForm .formWrapper .gridOptionInput .options, .multiStepForm .formWrapper .optionForm .options {
    margin-top: 1rem;
    justify-content: flex-start
}

.multiStepForm .formWrapper .gridOptionInput .formDiv, .multiStepForm .formWrapper .optionForm .formDiv {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--white)
}

.multiStepForm .formWrapper .gridOptionInput .formDiv label, .multiStepForm .formWrapper .optionForm .formDiv label {
    margin-bottom: 10px
}

.multiStepForm .formWrapper .checkboxList, .multiStepForm .formWrapper .radioList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--lightGray)
}

.multiStepForm .formWrapper .checkboxList label, .multiStepForm .formWrapper .radioList label {
    width: 100%;
    color: var(--black);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem
}

@media (min-width: 568px) {
    .multiStepForm .formWrapper .checkboxList label, .multiStepForm .formWrapper .radioList label {
        width: 50%
    }
}

@media (min-width: 568px) {
    .multiStepForm .formWrapper .checkboxList label:nth-child(odd), .multiStepForm .formWrapper .radioList label:nth-child(odd) {
        padding-right: 1rem
    }
}

.multiStepForm .formWrapper .checkboxList label:nth-last-child(1), .multiStepForm .formWrapper .radioList label:nth-last-child(1) {
    margin-bottom: 0
}

@media (min-width: 568px) {
    .multiStepForm .formWrapper .checkboxList label:nth-last-child(2), .multiStepForm .formWrapper .radioList label:nth-last-child(2) {
        margin-bottom: 0
    }
}

.multiStepForm .multiStepContainer {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    max-width: 850px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media (min-width: 1024px) {
    .multiStepForm .multiStepContainer {
        clear: both;
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
        padding-top: 0
    }
}

.multiStepForm .formDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    border-radius: var(--btnRadius);
    background-color: var(--white);
    border: 1px solid var(--lightGray)
}

@media (min-width: 1024px) {
    .multiStepForm .formDiv {
        padding: 2rem
    }
}

.multiStepForm .formDiv .title {
    width: 100%;
    margin: 0;
    margin-bottom: .7075rem;
    padding-left: .35375rem;
    border-left: 3px solid var(--color1)
}

.multiStepForm .formDiv .subTitle {
    width: 100%;
    margin-top: 1.413rem;
    margin-bottom: 1.413rem;
    color: var(--color1);
    font-weight: 400
}

.multiStepForm .btnDiv {
    width: 100%;
    justify-content: flex-end
}

.multiStepForm .btnDiv a, .multiStepForm .btnDiv button {
    flex: 1;
    max-width: 200px
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: unset;
    justify-content: flex-start;
    gap: 10px;
    --checkbox-ratio: none
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) label {
    width: 100%;
    margin: 0
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) label:has([type=radio],[type=checkbox]):not(:has(option [type=radio],option [type=checkbox])) {
    aspect-ratio: var(--checkbox-ratio);
    margin: 0;
    width: max-content;
    justify-content: center;
    padding: .5rem .7075rem;
    color: var(--black);
    font-weight: 500;
    border: 2px solid var(--borderGray);
    border-radius: var(--radius)
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) label:has([type=radio],[type=checkbox]):not(:has(option [type=radio],option [type=checkbox])):hover {
    background: var(--inputColor1)
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) label:has([type=radio],[type=checkbox]):not(:has(option [type=radio],option [type=checkbox])):has(input:checked) {
    color: var(--color2);
    background: var(--white);
    border: 2px solid var(--color2);
    box-shadow: var(--shadow-1)
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) label:has([type=radio],[type=checkbox]):not(:has(option [type=radio],option [type=checkbox])) input {
    --active: var(--color2);
    --focus: var(--color2);
    border-color: var(--color2);
    transform: scale(1.2)
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) label:has([type=radio],[type=checkbox]):not(:has(option [type=radio],option [type=checkbox])) input:after {
    width: 4px;
    height: 8px;
    border: 2px solid var(--white);
    border-top: 0;
    border-left: 0;
    left: 5px;
    top: 2px;
    transform: rotate(var(--r, 20deg));
    border-radius: 0;
    background: rgba(0, 0, 0, 0)
}

.multiStepForm .inputDiv:has([type=radio],[type=checkbox]):not(:has(selector)) label:has([type=radio],[type=checkbox]):not(:has(option [type=radio],option [type=checkbox])) input:checked {
    --r: 43deg;
    background: var(--color2);
    border-color: var(--color2)
}

.inputTable {
    width: 100%;
    background-color: var(--standard-bg-color);
    border-collapse: collapse;
    margin: 1rem 0
}

.inputTable [border=left] {
    border-left: 1px solid var(--borderGray)
}

.inputTable [border=right] {
    border-right: 1px solid var(--borderGray)
}

.inputTable th {
    padding: 10px 20px;
    font-size: .733rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 1px
}

@media (min-width: 1024px) {
    .inputTable th {
        padding: 10px .7075rem
    }
}

.inputTable .rowTitle {
    background-color: var(--inputColor1)
}

.inputTable tr {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    text-align: left
}

.inputTable tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0)
}

.inputTable tr:nth-last-child(1) .deleteFieldBtn, .inputTable tr:nth-last-child(1) [rowGeneratorDeleteRowButton], .inputTable tr:nth-last-child(1) [row_generator_delete_row_button] {
    display: none !important
}

.inputTable tr:nth-last-child(1) .addFieldBtn, .inputTable tr:nth-last-child(1) [rowGeneratorAddRowButton], .inputTable tr:nth-last-child(1) [row_generator_add_row_button] {
    display: flex
}

.inputTable tr .deleteFieldBtn, .inputTable tr [rowGeneratorDeleteRowButton], .inputTable tr [row_generator_delete_row_button] {
    display: flex
}

.inputTable tr .addFieldBtn, .inputTable tr [rowGeneratorAddRowButton], .inputTable tr [row_generator_add_row_button] {
    display: none
}

.inputTable td {
    border-bottom: 1px solid var(--borderGray)
}

.inputTable td [rowGeneratorCallback], .inputTable td [row_generator_callback] {
    overflow: initial;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.inputTable td [rowGeneratorCallback]:not([data-tooltip]):before, .inputTable td [row_generator_callback]:not([data-tooltip]):before {
    display: none
}

.inputTable td [rowGeneratorCallback]:before, .inputTable td [row_generator_callback]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

.inputTable td [rowGeneratorCallback]::after, .inputTable td [row_generator_callback]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

.inputTable td [rowGeneratorCallback]:focus, .inputTable td [row_generator_callback]:focus {
    z-index: 999
}

.inputTable td [rowGeneratorCallback]:focus::before, .inputTable td [rowGeneratorCallback]:focus::after, .inputTable td [row_generator_callback]:focus::before, .inputTable td [row_generator_callback]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .inputTable td [rowGeneratorCallback]:hover, .inputTable td [row_generator_callback]:hover {
        z-index: 999
    }

    .inputTable td [rowGeneratorCallback]:hover::before, .inputTable td [rowGeneratorCallback]:hover::after, .inputTable td [row_generator_callback]:hover::before, .inputTable td [row_generator_callback]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

.inputTable td [rowGeneratorCallback]::before, .inputTable td [row_generator_callback]::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

.inputTable td [rowGeneratorCallback]::after, .inputTable td [row_generator_callback]::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

.inputTable td [rowGeneratorCallback]:hover, .inputTable td [row_generator_callback]:hover {
    background-color: var(--inputColor1);
    color: var(--inputColor4)
}

.inputTable td [rowGeneratorCallback] i, .inputTable td [row_generator_callback] i {
    margin: auto;
    transition: var(--transition1)
}

.checkboxDropDownGroup {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    z-index: 1
}

.checkboxDropDownGroup .heading {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: .7075rem;
    border-left: 3px solid var(--highlight);
    padding-left: 10px;
    color: var(--black);
    font-weight: 500
}

.checkboxDropDownGroup .checkboxListDiv {
    width: 100%;
    margin: 0 auto;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 3%
}

.checkboxDropDownGroup .checkboxListDiv .dropList {
    display: block
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    transition: var(--transition1);
    cursor: pointer
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .moreBtn {
    margin-left: auto;
    padding: 1rem
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div {
    cursor: pointer;
    transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div i {
    color: inherit;
    font-size: .878rem;
    cursor: pointer;
    transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div .dropRemove {
    display: none
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent {
    display: none;
    width: 100%
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

.checkboxDropDownGroup .checkboxListDiv .dropList {
    margin-bottom: 1.3333rem;
    transition: var(--transition2)
}

@media (min-width: 360px) {
    .checkboxDropDownGroup .checkboxListDiv .dropList {
        width: 48.5%
    }
}

@media (min-width: 768px) {
    .checkboxDropDownGroup .checkboxListDiv .dropList {
        width: 31%
    }
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox {
    padding: 10px;
    padding-left: 1rem;
    background-color: var(--inputColor1);
    border: 1px solid var(--inputColor2);
    border-radius: var(--inputRadius);
    box-shadow: var(--inputColor2) 0px 0px 0px 0px
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .title {
    margin-top: 0
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--inputColor1);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, 0);
    transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn .dropRemove::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

@media (min-width: 568px) {
    .checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn .dropRemove::after {
        display: none
    }
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 2;
    display: none;
    padding: 10px 0;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-top: none;
    border-radius: var(--radius);
    box-shadow: rgba(22, 23, 26, .103) 0px 15px 25px, rgba(0, 0, 0, .05) 0px 5px 10px
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent label {
    padding: 10px 0;
    padding-left: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--lightGray);
    cursor: pointer
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent label:nth-last-child(1) {
    border-bottom: none
}

.addonCardModule {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0
}

.addonCardModule .title {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 1rem;
    border-left: 3px solid var(--highlight);
    padding-left: 5px;
    color: var(--black);
    font-weight: 500
}

.addonCardModule .title::after {
    content: "";
    height: 1px;
    flex: 1;
    margin-left: 1rem;
    background-color: var(--inputBorder)
}

.addonCardModule .addonCard {
    width: 100%;
    background-color: var(--standard-bg-color);
    border-collapse: collapse;
    margin: 1rem 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
    padding: 1.413rem;
    background: var(--bg-color);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    margin-bottom: .7075rem
}

.addonCardModule .addonCard [border=left] {
    border-left: 1px solid var(--borderGray)
}

.addonCardModule .addonCard [border=right] {
    border-right: 1px solid var(--borderGray)
}

.addonCardModule .addonCard th {
    padding: 10px 20px;
    font-size: .733rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 1px
}

@media (min-width: 1024px) {
    .addonCardModule .addonCard th {
        padding: 10px .7075rem
    }
}

.addonCardModule .addonCard .rowTitle {
    background-color: var(--inputColor1)
}

.addonCardModule .addonCard tr {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    text-align: left
}

.addonCardModule .addonCard tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0)
}

.addonCardModule .addonCard tr:nth-last-child(1) .deleteFieldBtn, .addonCardModule .addonCard tr:nth-last-child(1) [rowGeneratorDeleteRowButton], .addonCardModule .addonCard tr:nth-last-child(1) [row_generator_delete_row_button] {
    display: none !important
}

.addonCardModule .addonCard tr:nth-last-child(1) .addFieldBtn, .addonCardModule .addonCard tr:nth-last-child(1) [rowGeneratorAddRowButton], .addonCardModule .addonCard tr:nth-last-child(1) [row_generator_add_row_button] {
    display: flex
}

.addonCardModule .addonCard tr .deleteFieldBtn, .addonCardModule .addonCard tr [rowGeneratorDeleteRowButton], .addonCardModule .addonCard tr [row_generator_delete_row_button] {
    display: flex
}

.addonCardModule .addonCard tr .addFieldBtn, .addonCardModule .addonCard tr [rowGeneratorAddRowButton], .addonCardModule .addonCard tr [row_generator_add_row_button] {
    display: none
}

.addonCardModule .addonCard td {
    border-bottom: 1px solid var(--borderGray)
}

.addonCardModule .addonCard td [rowGeneratorCallback], .addonCardModule .addonCard td [row_generator_callback] {
    overflow: initial;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.addonCardModule .addonCard td [rowGeneratorCallback]:not([data-tooltip]):before, .addonCardModule .addonCard td [row_generator_callback]:not([data-tooltip]):before {
    display: none
}

.addonCardModule .addonCard td [rowGeneratorCallback]:before, .addonCardModule .addonCard td [row_generator_callback]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

.addonCardModule .addonCard td [rowGeneratorCallback]::after, .addonCardModule .addonCard td [row_generator_callback]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

.addonCardModule .addonCard td [rowGeneratorCallback]:focus, .addonCardModule .addonCard td [row_generator_callback]:focus {
    z-index: 999
}

.addonCardModule .addonCard td [rowGeneratorCallback]:focus::before, .addonCardModule .addonCard td [rowGeneratorCallback]:focus::after, .addonCardModule .addonCard td [row_generator_callback]:focus::before, .addonCardModule .addonCard td [row_generator_callback]:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .addonCardModule .addonCard td [rowGeneratorCallback]:hover, .addonCardModule .addonCard td [row_generator_callback]:hover {
        z-index: 999
    }

    .addonCardModule .addonCard td [rowGeneratorCallback]:hover::before, .addonCardModule .addonCard td [rowGeneratorCallback]:hover::after, .addonCardModule .addonCard td [row_generator_callback]:hover::before, .addonCardModule .addonCard td [row_generator_callback]:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

.addonCardModule .addonCard td [rowGeneratorCallback]::before, .addonCardModule .addonCard td [row_generator_callback]::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

.addonCardModule .addonCard td [rowGeneratorCallback]::after, .addonCardModule .addonCard td [row_generator_callback]::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

.addonCardModule .addonCard td [rowGeneratorCallback]:hover, .addonCardModule .addonCard td [row_generator_callback]:hover {
    background-color: var(--inputColor1);
    color: var(--inputColor4)
}

.addonCardModule .addonCard td [rowGeneratorCallback] i, .addonCardModule .addonCard td [row_generator_callback] i {
    margin: auto;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .addonCardModule .addonCard {
        flex-wrap: nowrap
    }
}

.addonCardModule .addonCard:nth-last-child(1) {
    z-index: 1;
    box-shadow: rgba(17, 12, 46, .15) 0px 48px 100px 0px
}

.addonCardModule .addonCard:nth-last-child(1) [row_generator_add_row_button] {
    display: inline-flex
}

.addonCardModule .addonCard:nth-last-child(1) [row_generator_delete_row_button] {
    display: none
}

.addonCardModule .addonCard .content, .addonCardModule .addonCard .media {
    flex: 1
}

.addonCardModule [row_generator_add_row_button] {
    display: none
}

.addonCardModule [row_generator_delete_row_button] {
    display: inline-flex
}

.addonCardModule .addonModulesBtnDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem
}

.addonCardModule .addonModulesBtnDiv .addModuleBtn {
    color: var(--borderGray);
    font-weight: 500;
    background-color: var(--black);
    border: 1px solid var(--borderGray);
    border-radius: 3rem
}

.detailsBox {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 5px;
    margin: 0
}

.detailsBox .title {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 1rem;
    border-left: 3px solid var(--highlight);
    padding-left: 5px;
    color: var(--black);
    font-weight: 500
}

.detailsBox .title::after {
    content: "";
    height: 1px;
    flex: 1;
    margin-left: 1rem;
    background-color: var(--shade-5)
}

.detailsBox .inputDiv label {
    color: var(--text-color);
    font-size: .878rem;
    margin-bottom: 5px;
    opacity: .7
}

.fileWrapper {
    width: 100%
}

.fileWrapper .fileContainer {
    width: 100%;
    border: 2px dashed var(--inputColor2);
    background-color: var(--inputColor1);
    padding: 2rem;
    border-radius: var(--radius);
    transition: var(--transition1);
    cursor: pointer
}

.fileWrapper .fileContainer:hover {
    border: 2px dashed var(--inputColor3)
}

.fileWrapper .fileContainer:hover:before {
    color: var(--inputColor5)
}

.fileWrapper .fileContainer:before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    transition: var(--transition1);
    cursor: pointer
}

.fileWrapper .fileContainer input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.fileWrapper .uploadedFilesContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--inputColor1);
    padding: 1rem;
    border-radius: var(--radius);
    margin-top: 10px
}

.fileWrapper .uploadedFilesContainer .uploadedFile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7075rem 1rem;
    padding-right: 50px;
    border: 1px solid var(--lightGray);
    border-radius: var(--radius);
    background-color: var(--white);
    margin-top: 10px;
    box-shadow: rgba(0, 0, 0, .05) 0px 1px 2px 0px
}

.fileWrapper .uploadedFilesContainer .uploadedFile:hover {
    box-shadow: rgba(33, 35, 38, .1) 0px 10px 10px -10px
}

.fileWrapper .uploadedFilesContainer .uploadedFile:nth-child(1) {
    margin-top: 0
}

.fileWrapper .uploadedFilesContainer .deleteFileButton {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50px;
    margin-left: 1rem;
    color: var(--black);
    border-radius: 0;
    border-left: 1px solid var(--borderGray);
    background-color: rgba(0, 0, 0, 0)
}

.fileWrapper .uploadedFilesContainer .deleteFileButton:hover {
    color: var(--red)
}

.fileWrapper .uploadedFilesContainer .deleteFileButton i {
    transform: none
}

.fileWrapper .uploadedFilesContainer .noFileLabel {
    width: 100%;
    text-align: center;
    color: var(--gray);
    font-weight: 400
}

.tableDiv {
    width: 100%
}

table {
    width: 100%;
    display: table;
    border-spacing: 0;
    border-collapse: collapse
}

table tr {
    display: table-row;
    transition: var(--transition1)
}

table th, table td {
    border-collapse: collapse;
    background-clip: padding-box;
    text-align: left;
    padding: .25rem .75rem
}

table th:has(input,select,textarea,selector selected item), table td:has(input,select,textarea,selector selected item) {
    padding: 0
}

table th:has(textarea), table td:has(textarea) {
    min-width: 250px
}

table th:has(input,textarea), table td:has(input,textarea) {
    padding-top: 0;
    padding-bottom: 0;
    z-index: 3 !important
}

table th:has(selector), table td:has(selector) {
    z-index: 4 !important;
    padding: 0
}

table th:has(selector) selected item, table td:has(selector) selected item {
    padding-top: 0;
    padding-bottom: 0
}

table th input:not([type=checkbox],[type=radio]), table th select, table th textarea, table th selector selected item, table td input:not([type=checkbox],[type=radio]), table td select, table td textarea, table td selector selected item {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    padding: .65rem 20px;
    border: none !important;
    border-radius: 0;
    background: rgba(0, 0, 0, 0) !important;
    border-color: rgba(0, 0, 0, 0) !important
}

@media (min-width: 1024px) {
    table th input:not([type=checkbox],[type=radio]), table th select, table th textarea, table th selector selected item, table td input:not([type=checkbox],[type=radio]), table td select, table td textarea, table td selector selected item {
        padding: .65rem .7075rem
    }
}

table th input:not([type=checkbox],[type=radio]):focus, table th input:not([type=checkbox],[type=radio]):active, table th select:focus, table th select:active, table th textarea:focus, table th textarea:active, table th selector selected item:focus, table th selector selected item:active, table td input:not([type=checkbox],[type=radio]):focus, table td input:not([type=checkbox],[type=radio]):active, table td select:focus, table td select:active, table td textarea:focus, table td textarea:active, table td selector selected item:focus, table td selector selected item:active {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important
}

table th p, table td p {
    margin: 0
}

table th selector, table td selector {
    width: 100%;
    height: 100%
}

table th selector selected, table td selector selected {
    width: inherit;
    height: inherit;
    background: inherit !important;
    border-color: rgba(0, 0, 0, 0) !important;
    border-radius: 0
}

table th selector selected items, table td selector selected items {
    background: inherit !important;
    border-color: rgba(0, 0, 0, 0) !important
}

table th textarea, table td textarea {
    height: 70px;
    min-height: 70px
}

table th textarea::placeholder, table td textarea::placeholder {
    transform: translateY(50%);
    transition: var(--transition1)
}

table th textarea:focus::placeholder, table td textarea:focus::placeholder {
    opacity: 0
}

table th input[type=time], table td input[type=time] {
    font-size: clamp(25.62890625px, 25.123072574px + 0.0010538202 * 100vw, 27.2307128906px)
}

table td {
    border-bottom: 1px solid rgba(255, 255, 255, .5411764706);
    transition: var(--transition1);
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap
}

table td .xlIcon, table td .lgIcon {
    overflow: initial
}

table td .xlIcon:not([data-tooltip]):before, table td .lgIcon:not([data-tooltip]):before {
    display: none
}

table td .xlIcon:before, table td .lgIcon:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

table td .xlIcon::after, table td .lgIcon::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

table td .xlIcon:focus, table td .lgIcon:focus {
    z-index: 999
}

table td .xlIcon:focus::before, table td .xlIcon:focus::after, table td .lgIcon:focus::before, table td .lgIcon:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    table td .xlIcon:hover, table td .lgIcon:hover {
        z-index: 999
    }

    table td .xlIcon:hover::before, table td .xlIcon:hover::after, table td .lgIcon:hover::before, table td .lgIcon:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

table td .xlIcon::before, table td .lgIcon::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

table td .xlIcon::after, table td .lgIcon::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

[width=xxs] {
    width: 45px;
    min-width: 45px
}

[width=xs] {
    width: 75px;
    min-width: 75px
}

[width=sm] {
    width: 100px;
    min-width: 100px
}

[width=md] {
    width: 150px;
    min-width: 150px
}

[width=lg] {
    width: 200px;
    min-width: 200px
}

[width=xl] {
    width: 250px;
    min-width: 250px
}

[width=xxl] {
    width: 300px;
    min-width: 300px
}

[width=xxxl] {
    width: 350px;
    min-width: 350px
}

[align=left] {
    text-align: left
}

[align=center] {
    text-align: center !important
}

[align=center] * {
    margin: 0 auto;
    text-align: center
}

[align=right] {
    text-align: right
}

[align=justify] {
    text-align: justify
}

.textLimit {
    overflow: hidden
}

.name {
    color: var(--text-color);
    margin: 0;
    font-weight: 500;
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.price {
    color: var(--text-color);
    margin: 0;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    white-space: noWrap;
    pointer-events: none;
    z-index: 2
}

.price:empty {
    display: none
}

.price span {
    font-weight: 400
}

.cost {
    display: inline-block
}

.cost span {
    color: var(--text-color);
    text-align: right;
    display: block;
    font-weight: 400
}

.cost span:nth-child(1) {
    font-size: .878rem;
    font-weight: 500
}

.cost span:nth-child(2) {
    margin-top: .5rem;
    font-size: .667rem;
    font-weight: 400;
    padding-left: .25rem
}

.cost span:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 11px;
    background-color: var(--green);
    border-radius: var(--radius)
}

.datePeriod {
    color: var(--text-color)
}

.datePeriod span, .datePeriod p {
    display: block;
    font-weight: 400;
    padding-left: .7rem
}

.datePeriod span::after, .datePeriod p::after {
    content: "";
    position: absolute;
    top: 3px;
    left: -1.5px;
    width: 5px;
    height: 5px;
    z-index: 1;
    border-radius: var(--radius)
}

.datePeriod span::before, .datePeriod p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--borderGray)
}

.datePeriod span:nth-child(1)::after, .datePeriod p:nth-child(1)::after {
    background-color: #81c376
}

.datePeriod span:nth-child(2), .datePeriod p:nth-child(2) {
    margin-top: .25rem
}

.datePeriod span:nth-child(2)::after, .datePeriod p:nth-child(2)::after {
    background-color: #e57575
}

.contactActionList {
    margin-top: .5rem
}

.contactActionList .contactList {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: .25rem 0;
    z-index: 2
}

.contactActionList .contactList:hover .contactCopy {
    opacity: 1;
    transform: scale(1.1)
}

.contactActionList .contactList:hover .contactCopy i {
    opacity: .5
}

.contactActionList .contactList:nth-last-child(1) {
    border-bottom: none
}

.contactActionList .contactList .phone, .contactActionList .contactList .email, .contactActionList .contactList .whatsapp {
    padding: .25rem 0
}

.contactActionList .contactList .contactCopy {
    opacity: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    margin-left: .5rem;
    border-radius: var(--inputRadius);
    background-color: var(--inputColor1);
    cursor: pointer;
    transition: var(--transition1)
}

.contactActionList .contactList .contactCopy:hover i {
    opacity: 1;
    color: var(--text-color)
}

.contactActionList .contactList .contactCopy:focus, .contactActionList .contactList .contactCopy:active {
    color: var(--standard-bg-color);
    background-color: var(--text-color)
}

.contactActionList .contactList .contactCopy i {
    color: var(--text-color);
    cursor: pointer
}

.email, .whatsapp, .phone, .idText, .dateText, .timeText, .subSourceText, .sourceText, .departmentText, .addressText, .locationText, .userText {
    color: var(--text-color);
    display: inline-block;
    font-size: .937rem;
    font-weight: 500;
    white-space: noWrap;
    transition: var(--transition1)
}

.email:empty, .whatsapp:empty, .phone:empty, .idText:empty, .dateText:empty, .timeText:empty, .subSourceText:empty, .sourceText:empty, .departmentText:empty, .addressText:empty, .locationText:empty, .userText:empty {
    margin: 0 !important
}

.email:empty::before, .whatsapp:empty::before, .phone:empty::before, .idText:empty::before, .dateText:empty::before, .timeText:empty::before, .subSourceText:empty::before, .sourceText:empty::before, .departmentText:empty::before, .addressText:empty::before, .locationText:empty::before, .userText:empty::before {
    display: none !important
}

.email::before, .whatsapp::before, .phone::before, .idText::before, .dateText::before, .timeText::before, .subSourceText::before, .sourceText::before, .departmentText::before, .addressText::before, .locationText::before, .userText::before {
    top: 2px;
    margin-right: .5rem;
    color: inherit;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transform: translateY(2px);
    opacity: .7
}

.userText {
    font-weight: 600;
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.userText::before {
    content: ""
}

.addressText, .locationText {
    font-size: .937rem;
    text-transform: capitalize;
    z-index: 2
}

.addressText::before, .locationText::before {
    content: ""
}

.departmentText {
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.departmentText::before {
    content: ""
}

.sourceText {
    font-weight: 400;
    text-transform: capitalize;
    pointer-events: none;
    pointer-events: none;
    z-index: 2
}

.sourceText::before {
    content: ""
}

.subSourceText {
    font-size: .733rem;
    text-transform: capitalize;
    font-weight: 400;
    margin-top: .5rem;
    pointer-events: none;
    pointer-events: none;
    z-index: 2
}

.subSourceText::before {
    display: none;
    opacity: 0;
    content: ""
}

.timeText {
    pointer-events: none;
    z-index: 2
}

.timeText::before {
    content: ""
}

.dateText {
    font-size: .878rem;
    pointer-events: none;
    opacity: .7;
    pointer-events: none;
    z-index: 2
}

.dateText::before {
    content: ""
}

.idText {
    font-size: .878rem;
    opacity: .7;
    pointer-events: none;
    z-index: 2
}

.idText::before {
    content: "#"
}

.phone {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.phone:hover {
    color: #293db1
}

.phone::before {
    content: ""
}

.whatsapp {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.whatsapp:hover {
    color: #293db1
}

.whatsapp::before {
    content: ""
}

.email {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.email:hover {
    color: #293db1
}

.email::before {
    content: ""
}

.messageText {
    z-index: 2
}

.messageText:hover .label {
    color: var(--color1)
}

.messageText:hover .message {
    display: block;
    z-index: 101
}

.messageText .label {
    color: var(--text-color);
    display: flex;
    align-items: center;
    font-size: .733rem;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer
}

.messageText .label i {
    font-size: .733rem;
    color: inherit;
    padding-right: 5px;
    margin-right: 5px;
    border-right: 1px solid var(--inputColor3)
}

.messageText .message {
    color: var(--text-color);
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    width: 300px;
    font-size: .937rem;
    font-weight: 400;
    line-height: 1.5 !important;
    white-space: wrap;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1rem
}

@media (min-width: 768px) {
    .messageText .message {
        width: 500px
    }
}

.sText {
    color: var(--text-color);
    display: block;
    font-size: .878rem;
    font-weight: 400;
    margin-bottom: .5rem;
    pointer-events: none;
    z-index: 2
}

.bText {
    color: var(--text-color);
    display: block;
    font-size: .937rem;
    margin: 0;
    pointer-events: none;
    z-index: 2
}

[reminder=active] {
    border: 1px solid #b6f3b6
}

[reminder=done] {
    background-color: #ecffef
}

[reminder=done] .btn {
    display: none
}

[reminder=cancel] {
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray);
    opacity: .5
}

[reminder=cancel] .btn {
    display: none
}

[label] {
    height: 24px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: .733rem;
    font-weight: 500;
    padding: 5px;
    border-radius: 3px 0 0 3px
}

[label]:empty {
    padding: 0
}

[label]:empty:before {
    display: none
}

[label]::after {
    content: "";
    position: absolute;
    top: 0;
    right: -18px;
    height: 0;
    display: inline-block;
    border: 12px solid #e8e9ee;
    border-right: 10px inset rgba(0, 0, 0, 0) !important
}

[label=red] {
    color: var(--white);
    background-color: #ff5b5b
}

[label=red]::after {
    border-color: #ff5b5b rgba(0, 0, 0, 0) #ff5b5b #ff5b5b
}

[label=orange] {
    color: var(--white);
    background-color: #ff8146
}

[label=orange]::after {
    border-color: #ff8146 rgba(0, 0, 0, 0) #ff8146 #ff8146
}

[label=yellow] {
    color: var(--darkGray);
    background-color: #fff75b
}

[label=yellow]::after {
    border-color: #fff75b rgba(0, 0, 0, 0) #fff75b #fff75b
}

[label=green] {
    color: var(--white);
    background-color: #36bb22
}

[label=green]::after {
    border-color: #36bb22 rgba(0, 0, 0, 0) #36bb22 #36bb22
}

[label=blue] {
    color: var(--white);
    background-color: #5b69ff
}

[label=blue]::after {
    border-color: #5b69ff rgba(0, 0, 0, 0) #5b69ff #5b69ff
}

[label=gray] {
    color: var(--darkGray);
    background-color: #e8e9ee
}

[label=gray]::after {
    border-color: #e8e9ee rgba(0, 0, 0, 0) #e8e9ee #e8e9ee
}

.timeShow {
    display: block
}

.popupWindow, .centerPopupDiv, .alertPopupDiv, .messageDiv {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    transition: var(--transition1)
}

.popupWindow .icon, .centerPopupDiv .icon, .alertPopupDiv .icon, .messageDiv .icon {
    width: 100px;
    margin: 0 auto;
    font-size: clamp(25.62890625px, 25.123072574px + 0.0010538202 * 100vw, 27.2307128906px)
}

.popupWindow .image, .centerPopupDiv .image, .alertPopupDiv .image, .messageDiv .image {
    width: 100%;
    max-width: 300px;
    margin: 0 auto
}

.popupWindow .subTitle, .centerPopupDiv .subTitle, .alertPopupDiv .subTitle, .messageDiv .subTitle {
    color: var(--color1)
}

.popupWindow .name, .popupWindow .subHeading, .centerPopupDiv .name, .centerPopupDiv .subHeading, .alertPopupDiv .name, .alertPopupDiv .subHeading, .messageDiv .name, .messageDiv .subHeading {
    display: block;
    margin-bottom: 0
}

.popupWindow .heading, .popupWindow .title, .centerPopupDiv .heading, .centerPopupDiv .title, .alertPopupDiv .heading, .alertPopupDiv .title, .messageDiv .heading, .messageDiv .title {
    margin: 0;
    margin-bottom: 1rem
}

.popupWindow .heading, .centerPopupDiv .heading, .alertPopupDiv .heading, .messageDiv .heading {
    display: block;
    color: var(--black);
    font-weight: 600
}

.popupWindow .text, .centerPopupDiv .text, .alertPopupDiv .text, .messageDiv .text {
    font-size: .937rem
}

.popupWindow *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty, .centerPopupDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty, .alertPopupDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty, .messageDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty {
    display: none
}

.popupWindow p, .centerPopupDiv p, .alertPopupDiv p, .messageDiv p {
    line-height: 1.3
}

.popupWindow .listDiv, .centerPopupDiv .listDiv, .alertPopupDiv .listDiv, .messageDiv .listDiv {
    margin-top: 1rem
}

.popupWindow .listDiv li, .centerPopupDiv .listDiv li, .alertPopupDiv .listDiv li, .messageDiv .listDiv li {
    color: var(--darkGray);
    font-size: .878rem;
    margin-bottom: 1rem;
    padding-left: 1rem
}

.popupWindow .listDiv li .sText, .centerPopupDiv .listDiv li .sText, .alertPopupDiv .listDiv li .sText, .messageDiv .listDiv li .sText {
    margin-top: .25rem
}

.popupWindow .listDiv li::before, .centerPopupDiv .listDiv li::before, .alertPopupDiv .listDiv li::before, .messageDiv .listDiv li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 5px;
    height: 5px;
    background-color: var(--color3);
    border-radius: var(--radius)
}

.popupWindow .tableList, .centerPopupDiv .tableList, .alertPopupDiv .tableList, .messageDiv .tableList {
    width: 100%;
    margin-top: 1rem
}

.popupWindow .tableList li, .centerPopupDiv .tableList li, .alertPopupDiv .tableList li, .messageDiv .tableList li {
    display: flex;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.popupWindow .tableList li label, .centerPopupDiv .tableList li label, .alertPopupDiv .tableList li label, .messageDiv .tableList li label {
    position: relative;
    top: 0;
    left: 0;
    flex: 1;
    margin: 0;
    color: var(--textGray);
    font-size: .878rem;
    font-weight: 400;
    padding: 0;
    line-height: 1.6
}

.popupWindow .tableList li p, .centerPopupDiv .tableList li p, .alertPopupDiv .tableList li p, .messageDiv .tableList li p {
    flex: 2;
    margin: 0;
    color: var(--darkGray);
    font-size: .878rem;
    font-weight: 500;
    line-height: 1.6
}

.popupWindow .tableList li span, .centerPopupDiv .tableList li span, .alertPopupDiv .tableList li span, .messageDiv .tableList li span {
    color: var(--textGray);
    margin: 0 .5rem
}

.popupWindow .editDetailsBtn, .centerPopupDiv .editDetailsBtn, .alertPopupDiv .editDetailsBtn, .messageDiv .editDetailsBtn {
    margin: 0;
    border-radius: var(--inputRadius);
    margin-left: auto
}

.popupWindow .tabMenuNav, .centerPopupDiv .tabMenuNav, .alertPopupDiv .tabMenuNav, .messageDiv .tabMenuNav {
    padding: 1rem;
    padding-bottom: 0
}

.popupWindow #tabWrapper .tabBarSlide, .centerPopupDiv #tabWrapper .tabBarSlide, .alertPopupDiv #tabWrapper .tabBarSlide, .messageDiv #tabWrapper .tabBarSlide {
    padding: 1rem
}

.popupWindow .popupCloseBg, .centerPopupDiv .popupCloseBg, .alertPopupDiv .popupCloseBg, .messageDiv .popupCloseBg {
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .253);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in
}

.popupWindow .btnDiv, .popupWindow .btnSection, .centerPopupDiv .btnDiv, .centerPopupDiv .btnSection, .alertPopupDiv .btnDiv, .alertPopupDiv .btnSection, .messageDiv .btnDiv, .messageDiv .btnSection {
    gap: 20px;
    margin-top: 2rem
}

.popupWindow .btnDiv a, .popupWindow .btnDiv button, .popupWindow .btnSection a, .popupWindow .btnSection button, .centerPopupDiv .btnDiv a, .centerPopupDiv .btnDiv button, .centerPopupDiv .btnSection a, .centerPopupDiv .btnSection button, .alertPopupDiv .btnDiv a, .alertPopupDiv .btnDiv button, .alertPopupDiv .btnSection a, .alertPopupDiv .btnSection button, .messageDiv .btnDiv a, .messageDiv .btnDiv button, .messageDiv .btnSection a, .messageDiv .btnSection button {
    min-width: 150px;
    padding: 1rem;
    font-size: 1rem
}

.popupPadding {
    padding-left: 1rem;
    padding-right: 1rem
}

@media (min-width: 768px) {
    .popupPadding {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.viewDataPopup, .createDataPopup, .viewDataPopupWide, .infoMessagePopup, .warningMessagePopup, .successMessagePopup, .errorMessagePopup, .timeOutPopup, .commonPopup, .centerPopup, [side-popup], .sidePopup, .infoAlertPopup, .infoPopup, .warningAlertPopup, .warningPopup, .successAlertPopup, .successPopup, .errorAlertPopup, .alertPopup, .alertPopup {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 305;
    width: 100%;
    height: 100vh;
    transition: var(--transition1)
}

.infoAlertPopup, .infoPopup, .warningAlertPopup, .warningPopup, .successAlertPopup, .successPopup, .errorAlertPopup, .alertPopup {
    display: flex;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity .5s ease-in-out;
    overflow: auto;
    padding: 1rem;
    z-index: 380
}

.infoAlertPopup .alertPopupDiv, .infoPopup .alertPopupDiv, .warningAlertPopup .alertPopupDiv, .warningPopup .alertPopupDiv, .successAlertPopup .alertPopupDiv, .successPopup .alertPopupDiv, .errorAlertPopup .alertPopupDiv, .alertPopup .alertPopupDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    max-width: 450px;
    height: auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: var(--white);
    box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
    border-radius: var(--radius);
    text-align: center;
    overflow: hidden;
    z-index: 115
}

.infoAlertPopup .alertPopupDiv .alertIcon, .infoPopup .alertPopupDiv .alertIcon, .warningAlertPopup .alertPopupDiv .alertIcon, .warningPopup .alertPopupDiv .alertIcon, .successAlertPopup .alertPopupDiv .alertIcon, .successPopup .alertPopupDiv .alertIcon, .errorAlertPopup .alertPopupDiv .alertIcon, .alertPopup .alertPopupDiv .alertIcon {
    font-size: 1.413rem;
    margin-bottom: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.infoAlertPopup .alertPopupDiv .heading, .infoPopup .alertPopupDiv .heading, .warningAlertPopup .alertPopupDiv .heading, .warningPopup .alertPopupDiv .heading, .successAlertPopup .alertPopupDiv .heading, .successPopup .alertPopupDiv .heading, .errorAlertPopup .alertPopupDiv .heading, .alertPopup .alertPopupDiv .heading {
    color: var(--darkGray);
    font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px);
    font-weight: 500;
    margin: 0;
    line-height: 1
}

.infoAlertPopup .alertPopupDiv .text, .infoPopup .alertPopupDiv .text, .warningAlertPopup .alertPopupDiv .text, .warningPopup .alertPopupDiv .text, .successAlertPopup .alertPopupDiv .text, .successPopup .alertPopupDiv .text, .errorAlertPopup .alertPopupDiv .text, .alertPopup .alertPopupDiv .text {
    font-size: 1rem;
    text-transform: capitalize
}

.infoAlertPopup .popupCloseIcon, .infoPopup .popupCloseIcon, .warningAlertPopup .popupCloseIcon, .warningPopup .popupCloseIcon, .successAlertPopup .popupCloseIcon, .successPopup .popupCloseIcon, .errorAlertPopup .popupCloseIcon, .alertPopup .popupCloseIcon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem;
    background-color: var(--lightGray);
    border-radius: var(--inputRadius);
    border: 1px solid var(--lightGray);
    cursor: pointer;
    transition: var(--transition1)
}

.infoAlertPopup .popupCloseIcon:hover, .infoPopup .popupCloseIcon:hover, .warningAlertPopup .popupCloseIcon:hover, .warningPopup .popupCloseIcon:hover, .successAlertPopup .popupCloseIcon:hover, .successPopup .popupCloseIcon:hover, .errorAlertPopup .popupCloseIcon:hover, .alertPopup .popupCloseIcon:hover {
    background-color: var(--borderGray)
}

.infoAlertPopup .popupCloseIcon i, .infoPopup .popupCloseIcon i, .warningAlertPopup .popupCloseIcon i, .warningPopup .popupCloseIcon i, .successAlertPopup .popupCloseIcon i, .successPopup .popupCloseIcon i, .errorAlertPopup .popupCloseIcon i, .alertPopup .popupCloseIcon i {
    color: var(--black);
    font-size: .667rem;
    cursor: pointer;
    transition: var(--transition1)
}

.infoAlertPopup .popupCloseBg, .infoPopup .popupCloseBg, .warningAlertPopup .popupCloseBg, .warningPopup .popupCloseBg, .successAlertPopup .popupCloseBg, .successPopup .popupCloseBg, .errorAlertPopup .popupCloseBg, .alertPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    background-color: rgba(0, 9, 27, .089);
    cursor: pointer;
    transition: opacity .3s !important
}

.errorAlertPopup .alertIcon, .alertPopup .alertIcon {
    color: var(--red)
}

.successAlertPopup .alertIcon, .successPopup .alertIcon {
    color: var(--green)
}

.warningAlertPopup .alertIcon, .warningPopup .alertIcon {
    color: #f3d571
}

.infoAlertPopup .alertIcon, .infoPopup .alertIcon {
    color: var(--textGray)
}

[side-popup], .sidePopup {
    min-height: 100vh;
    text-align: left;
    background-color: var(--white);
    border-left: 1px solid var(--borderGray);
    box-shadow: rgba(50, 50, 93, .25) 0px 100px 10px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
    transform: translateX(120%);
    overflow: auto
}

@media (min-width: 768px) {
    [side-popup], .sidePopup {
        max-width: 500px;
        transform: translateX(800px)
    }
}

[side-popup] .popupCloseIcon, .sidePopup .popupCloseIcon {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    padding: 1rem;
    background-color: var(--color2);
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition1)
}

[side-popup] .popupCloseIcon:hover, .sidePopup .popupCloseIcon:hover {
    background-color: var(--color3)
}

[side-popup] .popupCloseIcon:hover i, .sidePopup .popupCloseIcon:hover i {
    color: var(--white)
}

[side-popup] .popupCloseIcon i, .sidePopup .popupCloseIcon i {
    color: var(--white);
    cursor: pointer;
    transition: var(--transition1)
}

[side-popup] .sidePopupSection, .sidePopup .sidePopupSection {
    z-index: 1;
    height: 100vh;
    background-color: var(--white)
}

[side-popup] .sidePopupSection .btnSection, .sidePopup .sidePopupSection .btnSection {
    margin-top: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

[side-popup] .sidePopupSection .btnSection .btn, .sidePopup .sidePopupSection .btnSection .btn {
    margin: 0;
    margin-right: 1rem !important
}

.commonPopup, [center-popup], .centerPopup {
    display: flex;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity .5s ease-in-out;
    overflow: auto;
    padding: 1rem
}

.commonPopup .centerPopupDiv, [center-popup] .centerPopupDiv, .centerPopup .centerPopupDiv {
    margin: auto;
    width: 100%;
    max-width: 500px;
    height: auto;
    min-height: 300px;
    padding: 2rem;
    background-color: var(--white);
    box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
    border-radius: var(--radius);
    text-align: center;
    overflow: hidden;
    z-index: 115
}

.commonPopup .popupCloseIcon, [center-popup] .popupCloseIcon, .centerPopup .popupCloseIcon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem;
    background-color: var(--lightGray);
    border-radius: var(--inputRadius);
    border: 1px solid var(--lightGray);
    cursor: pointer;
    transition: var(--transition1)
}

.commonPopup .popupCloseIcon:hover, [center-popup] .popupCloseIcon:hover, .centerPopup .popupCloseIcon:hover {
    background-color: var(--borderGray)
}

.commonPopup .popupCloseIcon:hover i, [center-popup] .popupCloseIcon:hover i, .centerPopup .popupCloseIcon:hover i {
    color: var(--color1)
}

.commonPopup .popupCloseIcon i, [center-popup] .popupCloseIcon i, .centerPopup .popupCloseIcon i {
    color: var(--color2);
    font-size: .667rem;
    cursor: pointer;
    transition: var(--transition1)
}

.commonPopup .popupCloseBg, [center-popup] .popupCloseBg, .centerPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    background-color: rgba(0, 9, 27, .089);
    cursor: pointer;
    transition: opacity .3s !important
}

.commonPopup {
    z-index: 380
}

.timeOutPopup {
    display: none;
    width: 100%;
    transform: translateY(-100%) !important;
    transition: opacity .5s ease-in-out;
    overflow: auto;
    animation: timeOutPopup 2.5s ease-out
}

@keyframes timeOutPopup {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }
    1% {
        transform: none;
        opacity: 1
    }
    80% {
        opacity: 1
    }
    90% {
        transform: none
    }
    100% {
        opacity: 0;
        transform: translateY(-100%)
    }
}

.timeOutPopup .timeOutPopupDiv {
    margin: 0 auto;
    margin-top: 5%;
    width: 100%;
    max-width: 500px;
    height: auto;
    min-height: 200px;
    display: flex;
    justify-self: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    box-shadow: rgba(50, 50, 93, .034) 0px 50px 200px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    text-align: center;
    overflow: hidden;
    z-index: 115
}

.timeOutPopup .timeOutPopupDiv .btnSection {
    margin-top: 2rem
}

.timeOutPopup .timeOutPopupDiv .btnSection .btn {
    margin: 0 .5rem
}

.timeOutPopup .popupCloseIcon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 30px;
    height: 30px;
    padding: 1rem;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition1)
}

.timeOutPopup .popupCloseIcon:hover {
    background-color: var(--borderGray)
}

.timeOutPopup .popupCloseIcon:hover i {
    color: var(--color2)
}

.timeOutPopup .popupCloseIcon i {
    color: var(--color2);
    cursor: pointer;
    transition: var(--transition1)
}

.timeOutPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    background-color: rgba(0, 9, 27, .24);
    cursor: pointer;
    transition: var(--transition1)
}

.infoMessagePopup, .warningMessagePopup, .successMessagePopup, .errorMessagePopup {
    position: fixed;
    top: unset;
    bottom: 2rem;
    right: 2rem;
    z-index: 110;
    width: 100%;
    height: auto;
    max-width: 400px;
    margin-left: auto;
    display: none;
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    transition: var(--transition1);
    box-shadow: rgba(17, 12, 46, .062) 0px 48px 100px 0px;
    transform: translateY(150%);
    overflow: hidden
}

.infoMessagePopup .messageDiv, .warningMessagePopup .messageDiv, .successMessagePopup .messageDiv, .errorMessagePopup .messageDiv {
    padding: 1rem;
    padding-left: calc(70px + 1rem)
}

.infoMessagePopup .messageDiv .iconDiv, .warningMessagePopup .messageDiv .iconDiv, .successMessagePopup .messageDiv .iconDiv, .errorMessagePopup .messageDiv .iconDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    display: flex;
    align-items: center
}

.infoMessagePopup .messageDiv .iconDiv i, .warningMessagePopup .messageDiv .iconDiv i, .successMessagePopup .messageDiv .iconDiv i, .errorMessagePopup .messageDiv .iconDiv i {
    margin: auto;
    font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px)
}

.infoMessagePopup .messageDiv .title, .warningMessagePopup .messageDiv .title, .successMessagePopup .messageDiv .title, .errorMessagePopup .messageDiv .title {
    margin: 0
}

.infoMessagePopup .messageDiv p, .warningMessagePopup .messageDiv p, .successMessagePopup .messageDiv p, .errorMessagePopup .messageDiv p {
    margin-top: .5rem;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 400;
    line-height: 1.4
}

.infoMessagePopup .popupClose, .warningMessagePopup .popupClose, .successMessagePopup .popupClose, .errorMessagePopup .popupClose {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

.infoMessagePopup .popupClose:hover, .warningMessagePopup .popupClose:hover, .successMessagePopup .popupClose:hover, .errorMessagePopup .popupClose:hover {
    opacity: .5
}

.infoMessagePopup .popupClose i, .warningMessagePopup .popupClose i, .successMessagePopup .popupClose i, .errorMessagePopup .popupClose i {
    font-size: .878rem;
    cursor: pointer
}

.errorMessagePopup .iconDiv {
    background-color: #ffd5d5;
    color: var(--red)
}

.successMessagePopup .iconDiv {
    background-color: #e9ffe9;
    color: #309130
}

.warningMessagePopup .iconDiv {
    background-color: #fff0c1;
    color: var(--white)
}

.infoMessagePopup .iconDiv {
    background-color: var(--lightGray);
    color: var(--gray)
}

.rightFloatingPopup {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.rightFloatingPopup.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.rightFloatingPopup .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.rightFloatingPopup .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .rightFloatingPopup .popupWindow::before {
        display: none
    }
}

.rightFloatingPopup .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .rightFloatingPopup .popupWindow::after {
        display: none
    }
}

.rightFloatingPopup .popupWindowClose, .rightFloatingPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media (min-width: 1024px) {
    .rightFloatingPopup.popupIntro {
        transform: none
    }
}

.rightFloatingPopup .popupWindow {
    padding: 2rem 0;
    justify-content: flex-start
}

@media (min-width: 1024px) {
    .rightFloatingPopup .popupWindow {
        left: unset;
        right: 0;
        width: clamp(500px, 40vw, 600px);
        height: 100vh;
        max-height: 100vh;
        align-items: flex-start;
        border-radius: 0;
        transform: none;
        transform: translateX(100%);
        box-shadow: rgba(0, 0, 0, .1) 10px 0 15px -3px, rgba(0, 0, 0, .05) 4px 0 6px -2px;
        overflow-y: auto
    }
}

.rightFloatingPopup .popupWindow .popupCloseIcon {
    display: none;
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    cursor: pointer
}

@media (min-width: 1024px) {
    .rightFloatingPopup .popupWindow .popupCloseIcon {
        display: flex
    }
}

.rightFloatingPopup .popupWindow .popupCloseIcon i {
    margin: auto;
    cursor: pointer
}

.rightFloatingPopup .popupWindow .heading {
    margin: 0;
    margin-bottom: .7075rem;
    width: 100%;
    text-align: center
}

.rightFloatingPopup .popupWindow .formDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%)
}

.rightFloatingPopup .popupWindow .btnDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

.rightFloatingPopup .popupWindow .btnDiv a, .rightFloatingPopup .popupWindow .btnDiv button {
    margin: 0;
    width: 48%
}

@media (min-width: 1024px) {
    .rightFloatingPopup .popupWindowClose {
        opacity: 0
    }
}

.contentEditorSection .editorBtnDiv .moreBtn:hover .moreIcon, .header .menu .dataViewOptionBtn:hover .moreIcon, .dataSection .dataNavSection .dataTabMenu .sortBtn:hover .moreIcon, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:hover .moreIcon, .viewDataPopup .viewDataNavSection .moreBtn:hover .moreIcon, .createDataPopup .viewDataNavSection .moreBtn:hover .moreIcon, .viewDataPopupWide .viewDataNavSection .moreBtn:hover .moreIcon, .viewDataPage .viewDataNavSection .moreBtn:hover .moreIcon, .viewDataPageNarrow .viewDataNavSection .moreBtn:hover .moreIcon, .viewDataPageWide .viewDataNavSection .moreBtn:hover .moreIcon, #viewDataMenuPage .viewDataNavSection .moreBtn:hover .moreIcon, .createDataPage .viewDataNavSection .moreBtn:hover .moreIcon, .multiStepDataPage .viewDataNavSection .moreBtn:hover .moreIcon, .moreOptionPopup:hover .moreIcon {
    opacity: .8
}

.contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup, .header .menu .dataViewOptionBtn .partialDataUpdatePopup, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .moreOptionPopup .partialDataUpdatePopup, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView, .header .menu .dataViewOptionBtn .moreOptionView, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView, .createDataPage .viewDataNavSection .moreBtn .moreOptionView, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView, .moreOptionPopup .moreOptionView {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .header .menu .dataViewOptionBtn .partialDataUpdatePopup.popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup.popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup.popupIntro .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup.popupIntro .popupWindow, .moreOptionPopup .partialDataUpdatePopup.popupIntro .popupWindow, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView.popupIntro .popupWindow, .header .menu .dataViewOptionBtn .moreOptionView.popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView.popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView.popupIntro .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .createDataPage .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView.popupIntro .popupWindow, .moreOptionPopup .moreOptionView.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .moreOptionPopup .partialDataUpdatePopup .popupWindow, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .moreOptionPopup .moreOptionView .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow::before, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .moreOptionPopup .partialDataUpdatePopup .popupWindow::before, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow::before, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow::before, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .moreOptionPopup .moreOptionView .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow::before, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::before, .moreOptionPopup .partialDataUpdatePopup .popupWindow::before, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow::before, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow::before, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow::before, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::before, .moreOptionPopup .moreOptionView .popupWindow::before {
        display: none
    }
}

.contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow::after, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .moreOptionPopup .partialDataUpdatePopup .popupWindow::after, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow::after, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow::after, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .moreOptionPopup .moreOptionView .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow::after, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow::after, .moreOptionPopup .partialDataUpdatePopup .popupWindow::after, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow::after, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow::after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow::after, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow::after, .moreOptionPopup .moreOptionView .popupWindow::after {
        display: none
    }
}

.contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindowClose, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .moreOptionPopup .partialDataUpdatePopup .popupWindowClose, .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupCloseBg, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupCloseBg, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupCloseBg, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupCloseBg, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupCloseBg, .moreOptionPopup .partialDataUpdatePopup .popupCloseBg, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindowClose, .header .menu .dataViewOptionBtn .moreOptionView .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindowClose, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .moreOptionPopup .moreOptionView .popupWindowClose, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupCloseBg, .header .menu .dataViewOptionBtn .moreOptionView .popupCloseBg, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupCloseBg, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupCloseBg, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupCloseBg, .moreOptionPopup .moreOptionView .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media (min-width: 768px) {
    .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup, .header .menu .dataViewOptionBtn .partialDataUpdatePopup, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup, .moreOptionPopup .partialDataUpdatePopup, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView, .header .menu .dataViewOptionBtn .moreOptionView, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView, .createDataPage .viewDataNavSection .moreBtn .moreOptionView, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView, .moreOptionPopup .moreOptionView {
        position: absolute;
        top: 100%;
        width: max-content;
        height: max-content;
        display: none;
        transform: scale(0.8);
        padding: .7075rem;
        overflow: unset;
        pointer-events: none
    }
}

.contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .moreOptionPopup .partialDataUpdatePopup .popupWindow, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .moreOptionPopup .moreOptionView .popupWindow {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    padding-right: 0;
    padding-left: 0
}

@media (min-width: 768px) {
    .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow, .moreOptionPopup .partialDataUpdatePopup .popupWindow, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow, .moreOptionPopup .moreOptionView .popupWindow {
        position: relative;
        min-width: 230px;
        min-height: auto;
        background-color: var(--shade-1);
        border-radius: var(--radius);
        border: 1px solid var(--shade-1);
        padding: 0;
        opacity: 0;
        transform: none;
        box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px !important
    }
}

@media (min-width: 768px) {
    .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow:before, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow:before, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow:before, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow:before, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:before, .moreOptionPopup .partialDataUpdatePopup .popupWindow:before, .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindow:after, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindow:after, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindow:after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindow:after, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindow:after, .moreOptionPopup .partialDataUpdatePopup .popupWindow:after, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow:before, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow:before, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow:before, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow:before, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:before, .moreOptionPopup .moreOptionView .popupWindow:before, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindow:after, .header .menu .dataViewOptionBtn .moreOptionView .popupWindow:after, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow:after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow:after, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindow:after, .moreOptionPopup .moreOptionView .popupWindow:after {
        display: none
    }
}

@media (min-width: 768px) {
    .contentEditorSection .editorBtnDiv .moreBtn .partialDataUpdatePopup .popupWindowClose, .header .menu .dataViewOptionBtn .partialDataUpdatePopup .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .sortBtn .partialDataUpdatePopup .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .createDataPopup .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPopupWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPageNarrow .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .viewDataPageWide .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, #viewDataMenuPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .createDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .multiStepDataPage .viewDataNavSection .moreBtn .partialDataUpdatePopup .popupWindowClose, .moreOptionPopup .partialDataUpdatePopup .popupWindowClose, .contentEditorSection .editorBtnDiv .moreBtn .moreOptionView .popupWindowClose, .header .menu .dataViewOptionBtn .moreOptionView .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindowClose, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindowClose, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .popupWindowClose, .moreOptionPopup .moreOptionView .popupWindowClose {
        opacity: 0
    }
}

@media (min-width: 768px) {
    .contentEditorSection .editorBtnDiv .moreBtn .popupIntro, .header .menu .dataViewOptionBtn .popupIntro, .dataSection .dataNavSection .dataTabMenu .sortBtn .popupIntro, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .popupIntro, .viewDataPopup .viewDataNavSection .moreBtn .popupIntro, .createDataPopup .viewDataNavSection .moreBtn .popupIntro, .viewDataPopupWide .viewDataNavSection .moreBtn .popupIntro, .viewDataPage .viewDataNavSection .moreBtn .popupIntro, .viewDataPageNarrow .viewDataNavSection .moreBtn .popupIntro, .viewDataPageWide .viewDataNavSection .moreBtn .popupIntro, #viewDataMenuPage .viewDataNavSection .moreBtn .popupIntro, .createDataPage .viewDataNavSection .moreBtn .popupIntro, .multiStepDataPage .viewDataNavSection .moreBtn .popupIntro, .moreOptionPopup .popupIntro {
        display: block;
        transform: none;
        right: 0;
        opacity: 1;
        pointer-events: all
    }
}

.contentEditorSection .editorBtnDiv .moreBtn .popupIntro .popupWindow, .header .menu .dataViewOptionBtn .popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .popupIntro .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .popupIntro .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .createDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .moreOptionPopup .popupIntro .popupWindow {
    min-height: min-content
}

@media (min-width: 768px) {
    .contentEditorSection .editorBtnDiv .moreBtn .popupIntro .popupWindow, .header .menu .dataViewOptionBtn .popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .sortBtn .popupIntro .popupWindow, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .popupIntro .popupWindow, .viewDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow, .createDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPopupWide .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPageNarrow .viewDataNavSection .moreBtn .popupIntro .popupWindow, .viewDataPageWide .viewDataNavSection .moreBtn .popupIntro .popupWindow, #viewDataMenuPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .createDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .multiStepDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow, .moreOptionPopup .popupIntro .popupWindow {
        opacity: 1
    }
}

.contentEditorSection .editorBtnDiv .moreBtn .popupIntro .popupWindow a, .header .menu .dataViewOptionBtn .popupIntro .popupWindow a, .dataSection .dataNavSection .dataTabMenu .sortBtn .popupIntro .popupWindow a, .dataSection .dataNavSection .dataTabMenu .switchViewBtn .popupIntro .popupWindow a, .viewDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .createDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .viewDataPopupWide .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .viewDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .viewDataPageNarrow .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .viewDataPageWide .viewDataNavSection .moreBtn .popupIntro .popupWindow a, #viewDataMenuPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .createDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .multiStepDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a, .moreOptionPopup .popupIntro .popupWindow a {
    flex: unset
}

.contentEditorSection .editorBtnDiv .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .header .menu .dataViewOptionBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .dataSection .dataNavSection .dataTabMenu .sortBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .dataSection .dataNavSection .dataTabMenu .switchViewBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .createDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPopupWide .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPageNarrow .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPageWide .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), #viewDataMenuPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .createDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .multiStepDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .moreOptionPopup .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn) {
    justify-content: center
}

@media (min-width: 768px) {
    .contentEditorSection .editorBtnDiv .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .header .menu .dataViewOptionBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .dataSection .dataNavSection .dataTabMenu .sortBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .dataSection .dataNavSection .dataTabMenu .switchViewBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .createDataPopup .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPopupWide .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPageNarrow .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .viewDataPageWide .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), #viewDataMenuPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .createDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .multiStepDataPage .viewDataNavSection .moreBtn .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn), .moreOptionPopup .popupIntro .popupWindow a:not(.filledBtn,.outlinedBtn,.tonedBtn,.textBtn) {
        justify-content: flex-start
    }
}

.changeUserPopup, .changeStatusPopup, .partialDataUpdatePopup {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.changeUserPopup.popupIntro .popupWindow, .changeStatusPopup.popupIntro .popupWindow, .partialDataUpdatePopup.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.changeUserPopup .popupWindow, .changeStatusPopup .popupWindow, .partialDataUpdatePopup .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.changeUserPopup .popupWindow::before, .changeStatusPopup .popupWindow::before, .partialDataUpdatePopup .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .changeUserPopup .popupWindow::before, .changeStatusPopup .popupWindow::before, .partialDataUpdatePopup .popupWindow::before {
        display: none
    }
}

.changeUserPopup .popupWindow::after, .changeStatusPopup .popupWindow::after, .partialDataUpdatePopup .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .changeUserPopup .popupWindow::after, .changeStatusPopup .popupWindow::after, .partialDataUpdatePopup .popupWindow::after {
        display: none
    }
}

.changeUserPopup .popupWindowClose, .changeUserPopup .popupCloseBg, .changeStatusPopup .popupWindowClose, .changeStatusPopup .popupCloseBg, .partialDataUpdatePopup .popupWindowClose, .partialDataUpdatePopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media (min-width: 1024px) {
    .changeUserPopup, .changeStatusPopup, .partialDataUpdatePopup {
        position: fixed;
        bottom: 0;
        right: 100%;
        z-index: 380;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        overflow: hidden
    }

    .changeUserPopup .popupWindow, .changeStatusPopup .popupWindow, .partialDataUpdatePopup .popupWindow {
        position: relative;
        bottom: unset;
        left: unset;
        width: 100%;
        max-width: 450px;
        min-height: 350px;
        max-height: 650px;
        padding: 2rem;
        background-color: var(--white);
        border-radius: var(--radius);
        box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
        z-index: 2;
        transition: all 375ms ease-out;
        transform: translateY(110%) scale(0.95)
    }

    .changeUserPopup .popupWindow::before, .changeStatusPopup .popupWindow::before, .partialDataUpdatePopup .popupWindow::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 50px;
        height: 5px;
        border-radius: var(--radius);
        background-color: var(--borderGray);
        z-index: 1;
        transform: translateX(-50%);
        pointer-events: none
    }
}

@media (min-width: 1024px)and (min-width: 1024px) {
    .changeUserPopup .popupWindow::before, .changeStatusPopup .popupWindow::before, .partialDataUpdatePopup .popupWindow::before {
        display: none
    }
}

@media (min-width: 1024px) {
    .changeUserPopup .popupWindow::after, .changeStatusPopup .popupWindow::after, .partialDataUpdatePopup .popupWindow::after {
        content: "";
        position: absolute;
        top: -50px;
        left: 50%;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--borderGray);
        font-family: var(--icon-family) !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        padding: 5px;
        border-radius: 100%;
        background-color: var(--black);
        border: 1px solid var(--gray);
        opacity: 0;
        z-index: 1;
        transform: translateX(-50%);
        pointer-events: none;
        transition: var(--transition1)
    }
}

@media (min-width: 1024px)and (min-width: 1024px) {
    .changeUserPopup .popupWindow::after, .changeStatusPopup .popupWindow::after, .partialDataUpdatePopup .popupWindow::after {
        display: none
    }
}

@media (min-width: 1024px) {
    .changeUserPopup .popupWindowClose, .changeStatusPopup .popupWindowClose, .partialDataUpdatePopup .popupWindowClose {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0);
        transition: all 375ms ease-out;
        cursor: pointer
    }
}

.changeUserPopup .popupWindow, .changeStatusPopup .popupWindow, .partialDataUpdatePopup .popupWindow {
    padding-top: 2rem
}

.changeUserPopup .popupWindow .heading, .changeStatusPopup .popupWindow .heading, .partialDataUpdatePopup .popupWindow .heading {
    margin: 0;
    margin-bottom: .7075rem;
    width: 100%;
    text-align: center
}

.changeUserPopup .popupWindow .popupCloseIcon, .changeStatusPopup .popupWindow .popupCloseIcon, .partialDataUpdatePopup .popupWindow .popupCloseIcon {
    display: none;
    position: absolute;
    top: .7075rem;
    right: .7075rem;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: var(--lightGray);
    border-radius: var(--radius);
    cursor: pointer
}

@media (min-width: 1024px) {
    .changeUserPopup .popupWindow .popupCloseIcon, .changeStatusPopup .popupWindow .popupCloseIcon, .partialDataUpdatePopup .popupWindow .popupCloseIcon {
        display: flex
    }
}

.changeUserPopup .popupWindow .popupCloseIcon i, .changeStatusPopup .popupWindow .popupCloseIcon i, .partialDataUpdatePopup .popupWindow .popupCloseIcon i {
    margin: auto;
    cursor: pointer
}

.changeUserPopup .popupWindow .btnDiv, .changeStatusPopup .popupWindow .btnDiv, .partialDataUpdatePopup .popupWindow .btnDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

.changeUserPopup .popupWindow .btnDiv a, .changeUserPopup .popupWindow .btnDiv button, .changeStatusPopup .popupWindow .btnDiv a, .changeStatusPopup .popupWindow .btnDiv button, .partialDataUpdatePopup .popupWindow .btnDiv a, .partialDataUpdatePopup .popupWindow .btnDiv button {
    margin: 0;
    width: 48%
}

.changeUserPopup .popupWindow, .changeStatusPopup .popupWindow, .partialDataUpdatePopup .popupWindow {
    min-height: 400px;
    padding: 0
}

.changeUserPopup .popupWindow .heading, .changeStatusPopup .popupWindow .heading, .partialDataUpdatePopup .popupWindow .heading {
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 1rem
}

.changeUserPopup .popupWindow .heading::before, .changeStatusPopup .popupWindow .heading::before, .partialDataUpdatePopup .popupWindow .heading::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    border-radius: 1rem;
    background: var(--highlight)
}

.changeUserPopup .popupWindow .titleDiv, .changeStatusPopup .popupWindow .titleDiv, .partialDataUpdatePopup .popupWindow .titleDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: 2.83rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin: 0 !important
}

@media (min-width: 1024px) {
    .changeUserPopup .popupWindow .titleDiv, .changeStatusPopup .popupWindow .titleDiv, .partialDataUpdatePopup .popupWindow .titleDiv {
        padding-top: 2rem
    }
}

.changeUserPopup .popupWindow .titleDiv .label, .changeStatusPopup .popupWindow .titleDiv .label, .partialDataUpdatePopup .popupWindow .titleDiv .label {
    margin: 0;
    color: var(--textGray);
    font-size: .878rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.changeUserPopup .popupWindow .scrollFormDiv, .changeStatusPopup .popupWindow .scrollFormDiv, .partialDataUpdatePopup .popupWindow .scrollFormDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    overflow-y: auto;
    max-height: 60vh;
    padding-bottom: 100px
}

@media (min-width: 1024px) {
    .changeUserPopup .popupWindow .scrollFormDiv, .changeStatusPopup .popupWindow .scrollFormDiv, .partialDataUpdatePopup .popupWindow .scrollFormDiv {
        max-height: 500px
    }
}

.changeUserPopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1), .changeStatusPopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1), .partialDataUpdatePopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1) {
    margin-bottom: 0
}

.changeUserPopup .popupWindow .formDiv, .changeStatusPopup .popupWindow .formDiv, .partialDataUpdatePopup .popupWindow .formDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: 100px
}

.changeUserPopup .popupWindow .formDiv .inputDiv:nth-last-child(1), .changeStatusPopup .popupWindow .formDiv .inputDiv:nth-last-child(1), .partialDataUpdatePopup .popupWindow .formDiv .inputDiv:nth-last-child(1) {
    margin-bottom: 0
}

.changeUserPopup .popupWindow selector, .changeStatusPopup .popupWindow selector, .partialDataUpdatePopup .popupWindow selector {
    width: 100%
}

.changeUserPopup .popupWindow selector item, .changeStatusPopup .popupWindow selector item, .partialDataUpdatePopup .popupWindow selector item {
    width: 100%;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    padding: 1rem .7075rem
}

.changeUserPopup .popupWindow selector selected, .changeStatusPopup .popupWindow selector selected, .partialDataUpdatePopup .popupWindow selector selected {
    width: inherit;
    border-radius: var(--radius)
}

.changeUserPopup .popupWindow .profileInput item, .changeStatusPopup .popupWindow .profileInput item, .partialDataUpdatePopup .popupWindow .profileInput item {
    min-height: 60px;
    padding: 5px .7075rem
}

.changeUserPopup .popupWindow .profileInput item img, .changeStatusPopup .popupWindow .profileInput item img, .partialDataUpdatePopup .popupWindow .profileInput item img {
    width: 50px;
    min-width: 50px;
    height: 50px
}

.changeUserPopup .popupWindow [multi] selected item, .changeStatusPopup .popupWindow [multi] selected item, .partialDataUpdatePopup .popupWindow [multi] selected item {
    padding: 5px
}

.changeUserPopup .popupWindow [multi] selected item img, .changeStatusPopup .popupWindow [multi] selected item img, .partialDataUpdatePopup .popupWindow [multi] selected item img {
    width: 40px;
    min-width: 40px;
    height: 40px
}

.changeUserPopup .popupWindow .avatarCenterView, .changeStatusPopup .popupWindow .avatarCenterView, .partialDataUpdatePopup .popupWindow .avatarCenterView {
    min-width: 260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: var(--inputColor1);
    border-radius: 2rem;
    margin-bottom: 1rem;
    overflow: hidden
}

.changeUserPopup .popupWindow .avatarCenterView::before, .changeStatusPopup .popupWindow .avatarCenterView::before, .partialDataUpdatePopup .popupWindow .avatarCenterView::before {
    position: absolute;
    top: 10px;
    left: calc(56px + 1rem);
    content: attr(data-label);
    display: block;
    color: var(--inputColor5);
    font-size: .733rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px
}

.changeUserPopup .popupWindow .avatarCenterView .avatar, .changeStatusPopup .popupWindow .avatarCenterView .avatar, .partialDataUpdatePopup .popupWindow .avatarCenterView .avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    object-fit: cover;
    object-position: top;
    overflow: hidden;
    margin: 6px;
    margin-right: 1rem
}

.changeUserPopup .popupWindow .avatarCenterView [src=""], .changeStatusPopup .popupWindow .avatarCenterView [src=""], .partialDataUpdatePopup .popupWindow .avatarCenterView [src=""] {
    display: none
}

.changeUserPopup .popupWindow .avatarCenterView .name, .changeStatusPopup .popupWindow .avatarCenterView .name, .partialDataUpdatePopup .popupWindow .avatarCenterView .name {
    margin: 0;
    margin-top: 17px;
    padding-right: .7075rem
}

.changeUserPopup .popupWindow .avatarCenterView .name:empty, .changeStatusPopup .popupWindow .avatarCenterView .name:empty, .partialDataUpdatePopup .popupWindow .avatarCenterView .name:empty {
    margin: 0;
    padding: 0
}

.changeUserPopup .popupWindow [type=date], .changeUserPopup .popupWindow [type=datetime-local], .changeStatusPopup .popupWindow [type=date], .changeStatusPopup .popupWindow [type=datetime-local], .partialDataUpdatePopup .popupWindow [type=date], .partialDataUpdatePopup .popupWindow [type=datetime-local] {
    text-transform: uppercase
}

.changeUserPopup .popupWindow .btnSection, .changeUserPopup .popupWindow .btnDiv, .changeStatusPopup .popupWindow .btnSection, .changeStatusPopup .popupWindow .btnDiv, .partialDataUpdatePopup .popupWindow .btnSection, .partialDataUpdatePopup .popupWindow .btnDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    justify-content: space-between;
    gap: 0 2%;
    border-radius: inherit;
    background: inherit
}

.changeUserPopup .popupWindow .btnSection a, .changeUserPopup .popupWindow .btnSection button, .changeUserPopup .popupWindow .btnDiv a, .changeUserPopup .popupWindow .btnDiv button, .changeStatusPopup .popupWindow .btnSection a, .changeStatusPopup .popupWindow .btnSection button, .changeStatusPopup .popupWindow .btnDiv a, .changeStatusPopup .popupWindow .btnDiv button, .partialDataUpdatePopup .popupWindow .btnSection a, .partialDataUpdatePopup .popupWindow .btnSection button, .partialDataUpdatePopup .popupWindow .btnDiv a, .partialDataUpdatePopup .popupWindow .btnDiv button {
    margin: 0;
    width: 48%
}

@media (min-width: 1024px) {
    .changeStatusPopup .popupWindow {
        overflow: hidden
    }
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--inputColor2)
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList .label {
    margin: 0;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 400;
    margin-bottom: 10px
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList .partialDataUpdateUserName {
    margin: 0;
    font-weight: 500
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList [status] {
    font-size: 1rem
}

.changeStatusPopup .popupWindow .changeStatusModule {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-top: auto
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons, .changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons {
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer, .changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    width: 100%;
    min-width: 100%;
    overflow-y: auto
}

@media (min-width: 768px) {
    .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer, .changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer {
        max-height: 400px
    }
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer:empty, .changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer:empty {
    display: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons:hover .activeStatus::after, .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons:hover [active_status]::after {
    opacity: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList {
    width: 100%;
    justify-content: flex-start;
    order: 2;
    color: var(--black);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    clear: both;
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-left: 3.9975rem;
    margin: 0;
    padding-top: 1.413rem;
    padding-bottom: 1.413rem;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    transition: var(--transition2);
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList * {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: var(--transition2);
    pointer-events: none;
    opacity: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList::before {
    content: "";
    position: absolute;
    top: 38%;
    left: 2rem;
    width: 10px;
    height: 10px;
    border-radius: .7075rem;
    z-index: 1;
    transition: var(--transition2)
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100%;
    padding: 0;
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList input:focus {
    box-shadow: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList input::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 1;
    background: var(--lightGray);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, 33%, var(--shade-2) rgba(255, 255, 255, 0) 100%)
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus, .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status] {
    order: 1;
    pointer-events: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus::after, .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status]::after {
    opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus::before, .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status]::before {
    animation: status-pulse 2s infinite
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus input::before, .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status] input::before {
    content: "Current Status";
    position: absolute;
    top: 50%;
    right: .7075rem;
    transform: translateY(-50%);
    color: var(--textGray);
    font-size: .667rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    padding: 5px 10px
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons {
    justify-content: flex-end
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--black);
    padding: 0 1rem;
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 1px solid var(--lightGray);
    transition: var(--transition2);
    white-space: pre-line;
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList:nth-last-of-type(1) {
    border-bottom: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList * {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: var(--transition1);
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList:hover input::after {
    opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    border: none;
    border-left: 5px solid rgba(0, 0, 0, 0);
    cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input::after {
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--borderGray) 0%, rgba(0, 42, 51, 0) 100%);
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    transform: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:focus {
    box-shadow: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked {
    border-left: 5px solid var(--inputColor5);
    background: linear-gradient(90deg, var(--inputColor1) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked::after {
    opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked + .title {
    color: var(--inputColor5)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList .title {
    margin: 0;
    display: block;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList p {
    font-weight: 500;
    margin-top: 5px;
    display: block;
    line-height: 1.3;
    opacity: .6
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList p:empty {
    display: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv {
    width: 100%;
    margin: 0;
    margin-top: .7075rem;
    padding-top: .7075rem;
    border-top: 1px solid var(--borderGray)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv input::placeholder, .changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv textarea::placeholder {
    opacity: .5
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding-top: .7075rem;
    background-color: var(--white)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv a.button {
    margin: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv .backBtn i {
    top: 1px;
    margin: 0;
    transform: translateX(-50%)
}

.changeStatusPopup .popupWindow .formDiv {
    overflow: unset
}

.popupShow {
    display: flex !important;
    transform: none !important;
    opacity: 1 !important
}

.popupShow .popupCloseBg {
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: all !important;
    cursor: pointer !important
}

.mobilePopupIntro, .popupIntro {
    right: 0 !important
}

.mobilePopupIntro .popupWindow, .popupIntro .popupWindow {
    transform: none !important;
    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12) !important;
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.mobilePopupIntro .popupWindow::after, .popupIntro .popupWindow::after {
    opacity: .85 !important
}

.mobilePopupIntro .popupWindowClose, .mobilePopupIntro .popupCloseBg, .popupIntro .popupWindowClose, .popupIntro .popupCloseBg {
    display: block;
    background-color: rgba(0, 0, 0, .72) !important;
    transition: opacity .4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transition-delay: .375ms !important;
    pointer-events: all !important
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    position: relative;
    outline-style: none;
    -webkit-text-size-adjust: 100%;
    cursor: context-menu
}

*:before, * :after {
    font-family: inherit
}

html:has(#dark:checked) {
    color-scheme: dark
}

html:has(#dark:checked) .dashboardMainContainer .dashboardSection::before {
    background: var(--bgShadeMobileDark) !important
}

@media (min-width: 1024px) {
    html:has(#dark:checked) .dashboardMainContainer .dashboardSection::before {
        background: var(--bgShadewebDark) !important
    }
}

@media (prefers-color-scheme: dark) {
    html:has(#dark:checked) .dashboardMainContainer .dashboardSection::before {
        color-scheme: dark
    }
}

html {
    color-scheme: light;
    width: 100vw;
    max-width: 100%;
    display: block;
    scroll-behavior: smooth;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html {
    font-size: 16px
}

@media screen and (min-width: 300px) {
    html {
        font-size: calc(0.0588235294vw + 15.8235294118px)
    }
}

@media screen and (min-width: 2000px) {
    html {
        font-size: 17px
    }
}

.bodyIntro {
    height: 100vh !important;
    overflow: hidden !important
}

body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    color: var(--text-color);
    background: var(--bg-color);
    font-family: var(--font-family);
    line-height: 1.3;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
    scrollbar-width: thin;
    scrollbar-color: var(--shade-3) var(--bg-color);
    scrollbar-gutter: stable;
    overflow-y: auto;
    transition: var(--transition2)
}

body ::-webkit-scrollbar {
    width: 10px;
    height: 1px
}

body ::-webkit-scrollbar-track {
    background-color: var(--white)
}

body ::-webkit-scrollbar-thumb {
    background: var(--textGray)
}

body ::-webkit-scrollbar-thumb:window-inactive {
    background: var(--textGray)
}

.bodyIntro {
    height: 100vh;
    overflow: hidden
}

.scrollTopIntro {
    top: -100% !important;
    transition: all 575ms ease-out !important
}

.scrollBottomIntro {
    bottom: -100% !important;
    transition: all 575ms ease-in !important
}

.m0 {
    margin: 0 !important
}

.p0 {
    padding: 0 !important
}

img {
    width: 100%;
    display: block;
    height: intrinsic;
    image-rendering: -webkit-optimize-contrast
}

.bgCover {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

a {
    text-decoration: none;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    text-underline-offset: .1em !important;
    text-decoration-thickness: .07em !important;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.bText {
    font-weight: 500
}

.nText {
    font-weight: 400
}

.lText {
    font-weight: 300
}

i {
    line-height: .6
}

button:focus, [type=button]:focus {
    outline: 0
}

li {
    list-style-type: none
}

:is(h1,h2) {
    line-height: 1.2
}

p {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6
}

h1, h2, h3, h4, h5 {
    font-weight: 500
}

h1 {
    font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px)
}

h2 {
    font-size: clamp(25.62890625px, 25.123072574px + 0.0010538202 * 100vw, 27.2307128906px)
}

h3 {
    font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px);
    line-height: 1.3
}

h4 {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    line-height: 1.35
}

h5 {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    line-height: 1.3
}

.errorPage {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    text-align: center
}

.errorPage .innerSection {
    min-height: 100vh;
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center
}

.errorPage .innerSection dotlottie-player {
    max-width: 500px
}

.errorPage .innerSection .content {
    z-index: 1;
    margin: auto
}

.errorPage .innerSection .code {
    position: absolute;
    top: -20vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30vh;
    font-weight: 900;
    background: var(--borderGray);
    background: -webkit-linear-gradient(to bottom, var(--borderGray), rgba(255, 255, 255, 0));
    background: linear-gradient(to bottom, var(--borderGray), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0, 0, 0, 0)
}

.errorPage .innerSection .code:empty {
    display: none
}

.errorPage .innerSection .title {
    font-size: clamp(18px, 5vh, 60px) !important;
    line-height: 1.1
}

.errorPage .innerSection p {
    margin: 0 auto;
    margin-top: 1rem;
    max-width: 600px;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    line-height: 1.3
}

.errorPage .innerSection .btnDiv {
    justify-content: center
}

.errorLogSection {
    list-style: none;
    padding: 0;
    margin: 0
}

.errorLogSection ul {
    padding: 5.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 50px;
    counter-increment: titleCounter 1;
    border-bottom: 1px solid var(--borderGray)
}

.errorLogSection ul:nth-child(even) {
    background-color: var(--lightGray)
}

.errorLogSection ul::before {
    padding: 5.65rem 0;
    content: counter(titleCounter) ". ";
    position: absolute;
    top: -2px;
    left: 1rem;
    color: var(--black);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.errorLogSection ul li {
    order: 10;
    width: 100%
}

.errorLogSection ul li:nth-child(1) {
    order: 1;
    width: auto
}

.errorLogSection ul li:nth-child(2) {
    order: 2;
    width: auto
}

.errorLogSection ul li:nth-child(2) p {
    color: #3b5fff
}

.errorLogSection ul li:nth-child(3) {
    order: 6
}

.errorLogSection ul li:nth-child(3) p {
    display: inline-block;
    color: #ff3b58
}

.errorLogSection ul li:nth-child(5) {
    order: 4;
    width: auto
}

.errorLogSection ul li:nth-child(9) {
    order: 5;
    width: auto
}

.errorLogSection ul li:nth-child(10) {
    order: 5;
    width: auto
}

.errorLogSection ul li .label, .errorLogSection ul li h5 {
    margin: 0;
    color: var(--gray);
    font-size: .878rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px
}

.errorLogSection ul li p {
    color: var(--black);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    margin: 0;
    white-space: pre-line;
    line-height: 1.4
}

selector {
    display: inline-flex;
    flex-direction: column;
    padding: 0
}

selector:hover {
    z-index: 997
}

selector[disabled], selector[disable] {
    pointer-events: none
}

selector[disabled] selected::after, selector[disable] selected::after {
    display: none
}

selector[disabled] selected items item, selector[disable] selected items item {
    min-width: min-content
}

selector.open options {
    opacity: 1;
    border: 1px solid var(--shade-5);
    box-shadow: rgba(255, 255, 255, .1) 0px 1px 1px 0px inset, rgba(50, 50, 93, .344) 0px 50px 100px -20px, rgba(0, 0, 0, .464) 0px 30px 60px -30px
}

selector selected {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    padding-right: 10px
}

selector selected::after {
    content: "";
    position: absolute;
    top: 52%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--shade-2);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    opacity: .4
}

selector selected items {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

selector selected items item:not([value]) {
    padding: .65rem .75rem
}

selector selected item {
    width: 100%
}

selector item:has([remove_multiple_select_item]) {
    flex-direction: row;
    align-items: center
}

selector item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px 10px;
    padding: .7rem .75rem;
    border-radius: 0;
    white-space: noWrap;
    overflow: hidden
}

selector item, selector item * {
    transition: var(--transition1);
    cursor: pointer
}

selector item h5 {
    font-size: 1rem;
    font-weight: 400
}

selector item p {
    font-size: .937rem;
    margin-top: 0
}

selector item input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

selector options {
    position: absolute;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: min-content;
    height: 0;
    max-height: 350px;
    opacity: 0;
    background-color: var(--bg-color);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--inputRadius);
    z-index: 999;
    overflow: hidden;
    transition: var(--transition1)
}

selector options:empty {
    display: none
}

selector options::-webkit-scrollbar {
    width: 3px;
    height: 1px;
    opacity: .5
}

selector options::-webkit-scrollbar-track {
    background-color: var(--white)
}

selector options::-webkit-scrollbar-thumb {
    background: var(--shade-3);
    cursor: grab
}

selector options::-webkit-scrollbar-thumb:window-inactive {
    background: var(--shade-3);
    cursor: grab
}

selector options search {
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
    width: 100%
}

selector options search::before {
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "";
    position: absolute;
    top: 55%;
    left: 1rem;
    transform: translateY(-50%);
    opacity: .5;
    pointer-events: none
}

selector options search input:not([type=radio]):not([type=checkbox]) {
    width: 100% !important;
    min-width: 100%;
    border-radius: 0;
    padding-left: 50px;
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none;
    border: none !important;
    border-bottom: 1px solid var(--borderGray) !important;
    border-radius: var(--inputRadius) var(--inputRadius) 0 0 !important
}

selector options search input:not([type=radio]):not([type=checkbox]):hover, selector options search input:not([type=radio]):not([type=checkbox]):focus, selector options search input:not([type=radio]):not([type=checkbox]):active {
    background: var(--inputColor1) !important;
    box-shadow: none !important
}

selector options search .icon {
    position: absolute;
    top: 55%;
    left: 1rem;
    transform: translateY(-50%);
    opacity: .5;
    pointer-events: none
}

selector options item {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--lightGray);
    text-wrap: wrap
}

selector options item:hover {
    color: var(--inputColor5);
    background-color: var(--inputColor1)
}

selector options item * {
    text-wrap: wrap
}

selector options [value=""] {
    display: none
}

selector options .selectedItem {
    color: var(--text-color);
    background-color: var(--shade-2)
}

[multi][disabled], [multi][disable] {
    pointer-events: all
}

[multi][disabled] [remove_multiple_select_item], [multi][disable] [remove_multiple_select_item] {
    display: none !important
}

[multi][disabled] options item, [multi][disable] options item {
    pointer-events: none
}

[multi] selected {
    padding-right: 0
}

[multi] selected items:has([remove_multiple_select_item]) {
    padding: 5px;
    gap: 5px;
    display: flex;
    flex-wrap: wrap
}

[multi] selected items item {
    padding: 0;
    border: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0)
}

[multi] selected items item[value] {
    width: auto;
    min-width: min-content;
    background: var(--inputColor1);
    border: 1px solid var(--inputColor2);
    border-radius: var(--inputRadius);
    padding: .5rem .75rem;
    box-shadow: rgba(0, 0, 0, .1) 0px 1px 2px 0px
}

[multi] selected items item[value] [remove_multiple_select_item] {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--inputColor1);
    color: var(--inputColor5);
    font-size: 25px;
    border-radius: 5px;
    margin-left: auto;
    padding: 5px;
    z-index: 1;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition1)
}

[multi] selected items item[value] [remove_multiple_select_item]:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px
}

[multi] selected items item[value] [remove_multiple_select_item]:hover {
    background: var(--inputColor2)
}

[item_selector] selected items item, [item_selector] options item, [itemSelector] selected items item, [itemSelector] options item, .profileInput selected items item, .profileInput options item {
    min-height: 47px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 5px .75rem
}

[item_selector] selected items item img, [item_selector] options item img, [itemSelector] selected items item img, [itemSelector] options item img, .profileInput selected items item img, .profileInput options item img {
    width: 37px;
    height: 37px;
    border-radius: 100%;
    object-fit: cover;
    object-position: top
}

[item_selector] selected items item .name, [item_selector] selected items item h5, [item_selector] options item .name, [item_selector] options item h5, [itemSelector] selected items item .name, [itemSelector] selected items item h5, [itemSelector] options item .name, [itemSelector] options item h5, .profileInput selected items item .name, .profileInput selected items item h5, .profileInput options item .name, .profileInput options item h5 {
    margin: 0;
    text-align: left
}

[item_selector][multi] selected items item, [itemSelector][multi] selected items item, .profileInput[multi] selected items item {
    padding: 5px
}

[item_selector][multi] selected items item img, [itemSelector][multi] selected items item img, .profileInput[multi] selected items item img {
    width: 30px;
    height: 30px
}

[groupItemSelector] selected items item[value], [group_item_selector] selected items item[value], .groupItemSelector selected items item[value] {
    padding: 4px;
    border-radius: var(--btnRadius);
    border-color: var(--borderGray);
    box-shadow: none
}

[groupItemSelector] selected items item[value] [remove_multiple_select_item], [group_item_selector] selected items item[value] [remove_multiple_select_item], .groupItemSelector selected items item[value] [remove_multiple_select_item] {
    display: inline-flex
}

[groupItemSelector] selected items item[value]:not(:only-child), [group_item_selector] selected items item[value]:not(:only-child), .groupItemSelector selected items item[value]:not(:only-child) {
    padding: 4px;
    border-radius: var(--btnRadius);
    background-color: var(--white);
    margin-left: -15px;
    border: none;
    box-shadow: rgba(0, 0, 0, .1) -2px 1px 1px 0px
}

[groupItemSelector] selected items item[value]:not(:only-child):hover [remove_multiple_select_item], [group_item_selector] selected items item[value]:not(:only-child):hover [remove_multiple_select_item], .groupItemSelector selected items item[value]:not(:only-child):hover [remove_multiple_select_item] {
    opacity: 1
}

[groupItemSelector] selected items item[value]:not(:only-child):nth-child(1), [group_item_selector] selected items item[value]:not(:only-child):nth-child(1), .groupItemSelector selected items item[value]:not(:only-child):nth-child(1) {
    margin-left: 0
}

[groupItemSelector] selected items item[value]:not(:only-child) img, [group_item_selector] selected items item[value]:not(:only-child) img, .groupItemSelector selected items item[value]:not(:only-child) img {
    margin-right: 0
}

[groupItemSelector] selected items item[value]:not(:only-child) *:not(img), [group_item_selector] selected items item[value]:not(:only-child) *:not(img), .groupItemSelector selected items item[value]:not(:only-child) *:not(img) {
    display: none
}

[groupItemSelector] selected items item[value]:not(:only-child) [remove_multiple_select_item], [group_item_selector] selected items item[value]:not(:only-child) [remove_multiple_select_item], .groupItemSelector selected items item[value]:not(:only-child) [remove_multiple_select_item] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: unset;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: inline-flex;
    color: var(--borderGray);
    border-radius: 100%;
    background-color: rgba(0, 0, 0, .6431372549);
    opacity: 0
}

[groupItemSelector] item, [group_item_selector] item, .groupItemSelector item {
    min-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap
}

[groupItemSelector] item img, [group_item_selector] item img, .groupItemSelector item img {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    object-fit: cover;
    object-position: top
}

[groupItemSelector] item *, [group_item_selector] item *, .groupItemSelector item * {
    margin: 0;
    text-align: left;
    white-space: nowrap
}

[groupItemSelector] options item, [group_item_selector] options item, .groupItemSelector options item {
    padding: 5px .75rem
}

@media (min-width: 568px) {
    [groupItemSelector] options item, [group_item_selector] options item, .groupItemSelector options item {
        padding: 5px .75rem !important
    }
}

[detailedItemSelector] options, [detailed_item_selector] options, .detailedItemSelector options {
    flex-direction: column;
    max-height: 400px;
    overflow: hidden
}

@media (min-width: 568px) {
    [detailedItemSelector] options, [detailed_item_selector] options, .detailedItemSelector options {
        flex-direction: row;
        flex-wrap: nowrap;
        max-height: 500px
    }
}

[detailedItemSelector] options items:nth-child(1), [detailed_item_selector] options items:nth-child(1), .detailedItemSelector options items:nth-child(1) {
    width: max-content;
    flex: 1
}

@media (min-width: 768px) {
    [detailedItemSelector] options items:nth-child(1), [detailed_item_selector] options items:nth-child(1), .detailedItemSelector options items:nth-child(1) {
        max-height: 500px;
        max-width: 350px;
        overflow-y: auto
    }
}

[detailedItemSelector] options items:nth-child(2), [detailed_item_selector] options items:nth-child(2), .detailedItemSelector options items:nth-child(2) {
    min-width: 200px;
    width: max-content;
    max-width: 300px;
    background-color: var(--inputColor1);
    border-top: 1px solid var(--borderGray)
}

@media (min-width: 568px) {
    [detailedItemSelector] options items:nth-child(2), [detailed_item_selector] options items:nth-child(2), .detailedItemSelector options items:nth-child(2) {
        border: none;
        border-left: 1px solid var(--borderGray)
    }
}

#authenticationSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--bgShadeMobile)
}

@media (min-width: 1024px) {
    #authenticationSection {
        background: var(--bgShadeWeb)
    }
}

#authenticationSection #authenticationForm {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 1.413rem;
    background: var(--standard-bg-color);
    border-radius: var(--btnRadius)
}

@media (min-width: 768px) {
    #authenticationSection #authenticationForm {
        padding: 2.83rem
    }
}

#authenticationSection #authenticationForm .formDiv {
    margin: 0 auto
}

#authenticationSection #authenticationForm .formDiv .logoDiv {
    width: 100%;
    padding-bottom: 1rem;
    margin-bottom: 1rem
}

#authenticationSection #authenticationForm .formDiv .logoDiv::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    background: linear-gradient(258deg, rgba(255, 255, 255, 0) 0%, var(--borderGray) 50%, rgba(235, 241, 255, 0) 100%)
}

#authenticationSection #authenticationForm .formDiv .logoDiv img {
    width: 10rem;
    margin: 0 auto
}

@media (min-width: 1024px) {
    #authenticationSection #authenticationForm .formDiv .logoDiv img {
        width: 13rem
    }
}

#authenticationSection #authenticationForm .formDiv .title {
    color: var(--darkGray);
    font-weight: 500;
    letter-spacing: -0.5px;
    color: var(--black);
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(138deg, rgba(0, 0, 0, 0.541), var(--black) 30%, rgba(0, 0, 0, 0.631) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    padding-bottom: 10px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 2.83rem
}

#authenticationSection #authenticationForm .formDiv .title span {
    background: inherit
}

#authenticationSection #authenticationForm .formDiv .inputDiv:has(input:valid) label {
    width: auto;
    top: -11px;
    left: 10px;
    padding-top: 0;
    padding-bottom: 0;
    transform: none;
    color: var(--color1);
    font-size: .878rem;
    border-radius: var(--radius)
}

#authenticationSection #authenticationForm .formDiv .inputDiv label {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 90%;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--darkGray);
    font-size: .937rem;
    font-weight: 400;
    padding: 5px 8px;
    background-color: var(--inputColor1)
}

#authenticationSection #authenticationForm .formDiv .inputDiv input, #authenticationSection #authenticationForm .formDiv .inputDiv textarea, #authenticationSection #authenticationForm .formDiv .inputDiv select, #authenticationSection #authenticationForm .formDiv .inputDiv datalist {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    padding: 1rem
}

#authenticationSection #authenticationForm .formDiv .passwordShowIconDiv {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 2;
    width: 35px;
    height: 35px;
    padding: 5px;
    border-radius: 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

#authenticationSection #authenticationForm .formDiv .passwordShowIconDiv:hover {
    background-color: var(--inputColor1)
}

#authenticationSection #authenticationForm .formDiv .passwordShowIconDiv:hover i {
    color: var(--inputColor3)
}

#authenticationSection #authenticationForm .formDiv .passwordShowIconDiv .hide {
    display: none
}

#authenticationSection #authenticationForm .formDiv .passwordShowIconDiv .showIcon {
    display: block !important
}

#authenticationSection #authenticationForm .formDiv .passwordShowIconDiv i {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--textGray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    display: none;
    cursor: pointer;
    transition: var(--transition1)
}

#authenticationSection #authenticationForm .formDiv .rememberDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 1.413rem;
    margin: 0
}

#authenticationSection #authenticationForm .formDiv .rememberDiv .forgotPass {
    color: var(--darkGray);
    font-size: .878rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition2)
}

#authenticationSection #authenticationForm .formDiv .rememberDiv .forgotPass:hover {
    color: var(--textGray)
}

#authenticationSection #authenticationForm .formDiv .btn {
    padding: .7075rem !important;
    border-radius: var(--radius) !important
}

#authenticationSection #authenticationForm .formDiv .btn::before {
    margin-left: -100px
}

#authenticationSection #authenticationForm #loginForm #signInSubmit {
    width: 100%;
    padding: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px) 1rem
}

#authenticationSection #authenticationForm #loginForm #signInSubmit img {
    display: none
}

#authenticationSection #authenticationForm #forgotPasswordForm #getOTP {
    width: 100%;
    padding: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px) 1rem
}

#authenticationSection #authenticationForm #forgotPasswordForm #getOTP img {
    display: none
}

#authenticationSection #authenticationForm #forgotPasswordForm .otpSection {
    display: none
}

#authenticationSection #authenticationForm #forgotPasswordForm .otpSection .otpInput .inputBox {
    flex-wrap: nowrap
}

#authenticationSection #authenticationForm #forgotPasswordForm .otpSection .otpInput input {
    color: var(--darkGray);
    font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px);
    font-weight: 800;
    padding: 1rem
}

#authenticationSection #authenticationForm #forgotPasswordForm .otpSection .otpInput .reOtpBtn {
    margin: 0;
    margin-left: .5rem;
    min-width: 110px;
    height: 100%;
    font-size: .878rem;
    font-weight: 600;
    padding: 1rem;
    border-radius: var(--inputRadius);
    border: 1px solid var(--borderGray);
    background-color: var(--lightGray)
}

@media (min-width: 568px) {
    #authenticationSection #authenticationForm #forgotPasswordForm .otpSection .otpInput .reOtpBtn {
        min-width: 130px;
        font-size: 1rem
    }
}

#authenticationSection #authenticationForm #forgotPasswordForm .otpSection .otpInput .reOtpBtn:hover {
    background-color: var(--white);
    border: 1px solid var(--color3)
}

#authenticationSection #authenticationForm #forgotPasswordForm .otpSection #resetPasswordBtn {
    width: 100%;
    padding: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px) 1rem
}

#authenticationSection #authenticationForm #forgotPasswordForm .otpSection #resetPasswordBtn img {
    display: none
}

[status_color=aqua] {
    color: aqua;
    background-color: rgba(230, 255, 255, .1);
    border: 1px solid rgba(204, 255, 255, .2)
}

[status_color=aquamarine] {
    color: #7fffd4;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=beige] {
    color: beige;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=black] {
    color: #000;
    background-color: rgba(115, 115, 115, .1);
    border: 1px solid rgba(102, 102, 102, .2)
}

[status_color=blue] {
    color: blue;
    background-color: rgba(230, 230, 255, .1);
    border: 1px solid rgba(204, 204, 255, .2)
}

[status_color=brown] {
    color: brown;
    background-color: rgba(240, 196, 196, .1);
    border: 1px solid rgba(235, 176, 176, .2)
}

[status_color=cadetblue] {
    color: #5f9ea0;
    background-color: rgba(239, 245, 246, .1);
    border: 1px solid rgba(223, 236, 236, .2)
}

[status_color=chartreuse] {
    color: #7fff00;
    background-color: rgba(242, 255, 230, .1);
    border: 1px solid rgba(229, 255, 204, .2)
}

[status_color=chocolate] {
    color: #d2691e;
    background-color: rgba(250, 232, 220, .1);
    border: 1px solid rgba(247, 218, 197, .2)
}

[status_color=coral] {
    color: coral;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=cornflowerblue] {
    color: #6495ed;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=crimson] {
    color: crimson;
    background-color: rgba(252, 218, 225, .1);
    border: 1px solid rgba(250, 195, 206, .2)
}

[status_color=cyan] {
    color: aqua;
    background-color: rgba(230, 255, 255, .1);
    border: 1px solid rgba(204, 255, 255, .2)
}

[status_color=darkblue] {
    color: #00008b;
    background-color: rgba(114, 114, 255, .1);
    border: 1px solid rgba(88, 88, 255, .2)
}

[status_color=darkcyan] {
    color: #008b8b;
    background-color: rgba(114, 255, 255, .1);
    border: 1px solid rgba(88, 255, 255, .2)
}

[status_color=darkgray] {
    color: #a9a9a9;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=darkgreen] {
    color: #006400;
    background-color: rgba(75, 255, 75, .1);
    border: 1px solid rgba(49, 255, 49, .2)
}

[status_color=darkkhaki] {
    color: #bdb76b;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(252, 252, 248, .2)
}

[status_color=darkmagenta] {
    color: #8b008b;
    background-color: rgba(255, 114, 255, .1);
    border: 1px solid rgba(255, 88, 255, .2)
}

[status_color=darkolivegreen] {
    color: #556b2f;
    background-color: rgba(198, 216, 167, .1);
    border: 1px solid rgba(187, 209, 149, .2)
}

[status_color=darkorange] {
    color: #ff8c00;
    background-color: rgba(255, 244, 230, .1);
    border: 1px solid rgba(255, 232, 204, .2)
}

[status_color=darkorchid] {
    color: #9932cc;
    background-color: rgba(244, 234, 250, .1);
    border: 1px solid rgba(234, 213, 245, .2)
}

[status_color=darkred] {
    color: darkred;
    background-color: rgba(255, 114, 114, .1);
    border: 1px solid rgba(255, 88, 88, .2)
}

[status_color=darksalmon] {
    color: #e9967a;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=darkseagreen] {
    color: #8fbc8f;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=darkslateblue] {
    color: #483d8b;
    background-color: rgba(203, 199, 230, .1);
    border: 1px solid rgba(187, 181, 223, .2)
}

[status_color=darkslategray] {
    color: #2f4f4f;
    background-color: rgba(158, 197, 197, .1);
    border: 1px solid rgba(142, 188, 188, .2)
}

[status_color=darkturquoise] {
    color: #00ced1;
    background-color: rgba(184, 254, 255, .1);
    border: 1px solid rgba(158, 254, 255, .2)
}

[status_color=darkviolet] {
    color: #9400d3;
    background-color: rgba(234, 186, 255, .1);
    border: 1px solid rgba(227, 160, 255, .2)
}

[status_color=deeppink] {
    color: #ff1493;
    background-color: rgba(255, 250, 252, .1);
    border: 1px solid rgba(255, 224, 241, .2)
}

[status_color=deepskyblue] {
    color: #00bfff;
    background-color: rgba(230, 249, 255, .1);
    border: 1px solid rgba(204, 242, 255, .2)
}

[status_color=dodgerblue] {
    color: #1e90ff;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(234, 245, 255, .2)
}

[status_color=firebrick] {
    color: #b22222;
    background-color: rgba(244, 197, 197, .1);
    border: 1px solid rgba(240, 176, 176, .2)
}

[status_color=forestgreen] {
    color: #228b22;
    background-color: rgba(169, 234, 169, .1);
    border: 1px solid rgba(148, 229, 148, .2)
}

[status_color=gold] {
    color: gold;
    background-color: rgba(255, 251, 230, .1);
    border: 1px solid rgba(255, 247, 204, .2)
}

[status_color=goldenrod] {
    color: #daa520;
    background-color: rgba(251, 245, 228, .1);
    border: 1px solid rgba(248, 236, 206, .2)
}

[status_color=gray] {
    color: gray;
    background-color: rgba(243, 243, 243, .1);
    border: 1px solid rgba(230, 230, 230, .2)
}

[status_color=green] {
    color: green;
    background-color: rgba(103, 255, 103, .1);
    border: 1px solid rgba(77, 255, 77, .2)
}

[status_color=hotpink] {
    color: hotpink;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=indianred] {
    color: #cd5c5c;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(253, 248, 248, .2)
}

[status_color=indigo] {
    color: indigo;
    background-color: rgba(191, 105, 255, .1);
    border: 1px solid rgba(181, 79, 255, .2)
}

[status_color=khaki] {
    color: khaki;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lawngreen] {
    color: #7cfc00;
    background-color: rgba(241, 255, 227, .1);
    border: 1px solid rgba(228, 255, 201, .2)
}

[status_color=lightblue] {
    color: #add8e6;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lightcoral] {
    color: #f08080;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lightgreen] {
    color: #90ee90;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lightpink] {
    color: #ffb6c1;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lightsalmon] {
    color: #ffa07a;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lightseagreen] {
    color: #20b2aa;
    background-color: rgba(195, 244, 242, .1);
    border: 1px solid rgba(174, 240, 237, .2)
}

[status_color=lightskyblue] {
    color: #87cefa;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lightslategray] {
    color: #789;
    background-color: rgba(250, 251, 251, .1);
    border: 1px solid rgba(236, 238, 240, .2)
}

[status_color=lightsteelblue] {
    color: #b0c4de;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=lime] {
    color: lime;
    background-color: rgba(230, 255, 230, .1);
    border: 1px solid rgba(204, 255, 204, .2)
}

[status_color=limegreen] {
    color: #32cd32;
    background-color: rgba(235, 250, 235, .1);
    border: 1px solid rgba(214, 245, 214, .2)
}

[status_color=linen] {
    color: linen;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=magenta] {
    color: #f0f;
    background-color: rgba(255, 230, 255, .1);
    border: 1px solid rgba(255, 204, 255, .2)
}

[status_color=maroon] {
    color: maroon;
    background-color: rgba(255, 103, 103, .1);
    border: 1px solid rgba(255, 77, 77, .2)
}

[status_color=mediumaquamarine] {
    color: #66cdaa;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=mediumblue] {
    color: #0000cd;
    background-color: rgba(180, 180, 255, .1);
    border: 1px solid rgba(154, 154, 255, .2)
}

[status_color=mediumorchid] {
    color: #ba55d3;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(252, 247, 253, .2)
}

[status_color=mediumpurple] {
    color: #9370db;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=mediumseagreen] {
    color: #3cb371;
    background-color: rgba(224, 245, 233, .1);
    border: 1px solid rgba(205, 238, 220, .2)
}

[status_color=mediumslateblue] {
    color: #7b68ee;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=mediumspringgreen] {
    color: #00fa9a;
    background-color: rgba(225, 255, 243, .1);
    border: 1px solid rgba(199, 255, 233, .2)
}

[status_color=mediumturquoise] {
    color: #48d1cc;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(235, 250, 249, .2)
}

[status_color=mediumvioletred] {
    color: #c71585;
    background-color: rgba(249, 200, 231, .1);
    border: 1px solid rgba(247, 177, 221, .2)
}

[status_color=midnightblue] {
    color: #191970;
    background-color: rgba(138, 138, 229, .1);
    border: 1px solid rgba(117, 117, 224, .2)
}

[status_color=mistyrose] {
    color: #ffe4e1;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=moccasin] {
    color: #ffe4b5;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=navajowhite] {
    color: #ffdead;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=navy] {
    color: navy;
    background-color: rgba(103, 103, 255, .1);
    border: 1px solid rgba(77, 77, 255, .2)
}

[status_color=olive] {
    color: olive;
    background-color: rgba(255, 255, 103, .1);
    border: 1px solid rgba(255, 255, 77, .2)
}

[status_color=olivedrab] {
    color: #6b8e23;
    background-color: rgba(214, 235, 172, .1);
    border: 1px solid rgba(204, 229, 152, .2)
}

[status_color=orange] {
    color: orange;
    background-color: rgba(255, 246, 230, .1);
    border: 1px solid rgba(255, 237, 204, .2)
}

[status_color=orangered] {
    color: #ff4500;
    background-color: rgba(255, 236, 230, .1);
    border: 1px solid rgba(255, 218, 204, .2)
}

[status_color=orchid] {
    color: orchid;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=palegoldenrod] {
    color: #eee8aa;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=palegreen] {
    color: #98fb98;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=paleturquoise] {
    color: #afeeee;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=palevioletred] {
    color: #db7093;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=papayawhip] {
    color: #ffefd5;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=peachpuff] {
    color: #ffdab9;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=peru] {
    color: peru;
    background-color: rgba(252, 249, 245, .1);
    border: 1px solid rgba(247, 236, 225, .2)
}

[status_color=pink] {
    color: pink;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=plum] {
    color: plum;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=powderblue] {
    color: #b0e0e6;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=purple] {
    color: purple;
    background-color: rgba(255, 103, 255, .1);
    border: 1px solid rgba(255, 77, 255, .2)
}

[status_color=red] {
    color: red;
    background-color: rgba(255, 230, 230, .1);
    border: 1px solid rgba(255, 204, 204, .2)
}

[status_color=rosybrown] {
    color: #bc8f8f;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=royalblue] {
    color: #4169e1;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(241, 244, 253, .2)
}

[status_color=saddlebrown] {
    color: #8b4513;
    background-color: rgba(240, 186, 147, .1);
    border: 1px solid rgba(237, 172, 125, .2)
}

[status_color=salmon] {
    color: salmon;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=sandybrown] {
    color: #f4a460;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=seagreen] {
    color: #2e8b57;
    background-color: rgba(183, 231, 204, .1);
    border: 1px solid rgba(164, 225, 191, .2)
}

[status_color=silver] {
    color: silver;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=skyblue] {
    color: skyblue;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=slateblue] {
    color: #6a5acd;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(247, 247, 252, .2)
}

[status_color=slategray] {
    color: #708090;
    background-color: rgba(241, 243, 244, .1);
    border: 1px solid rgba(227, 230, 233, .2)
}

[status_color=springgreen] {
    color: #00ff7f;
    background-color: rgba(230, 255, 242, .1);
    border: 1px solid rgba(204, 255, 229, .2)
}

[status_color=steelblue] {
    color: #4682b4;
    background-color: rgba(233, 240, 246, .1);
    border: 1px solid rgba(215, 228, 239, .2)
}

[status_color=tan] {
    color: tan;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=teal] {
    color: teal;
    background-color: rgba(103, 255, 255, .1);
    border: 1px solid rgba(77, 255, 255, .2)
}

[status_color=tomato] {
    color: tomato;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=turquoise] {
    color: #40e0d0;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(240, 252, 251, .2)
}

[status_color=violet] {
    color: violet;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=wheat] {
    color: wheat;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2)
}

[status_color=yellow] {
    color: #ff0;
    background-color: rgba(255, 255, 230, .1);
    border: 1px solid rgba(255, 255, 204, .2)
}

.changeStatusPopup [status_color=aqua]::before {
    background-color: rgba(0, 255, 255, .8);
    border: 1px solid rgba(0, 255, 255, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 255, 255, .35)
}

.changeStatusPopup [status_color=aqua]::after {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=aquamarine]::before {
    background-color: rgba(127, 255, 212, .8);
    border: 1px solid rgba(127, 255, 212, .8);
    box-shadow: 0px 0px 0px 8px rgba(127, 255, 212, .35)
}

.changeStatusPopup [status_color=aquamarine]::after {
    background: linear-gradient(90deg, rgba(127, 255, 212, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=beige]::before {
    background-color: rgba(245, 245, 220, .8);
    border: 1px solid rgba(245, 245, 220, .8);
    box-shadow: 0px 0px 0px 8px rgba(245, 245, 220, .35)
}

.changeStatusPopup [status_color=beige]::after {
    background: linear-gradient(90deg, rgba(245, 245, 220, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=black]::before {
    background-color: rgba(0, 0, 0, .8);
    border: 1px solid rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, .35)
}

.changeStatusPopup [status_color=black]::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=blue]::before {
    background-color: rgba(0, 0, 255, .8);
    border: 1px solid rgba(0, 0, 255, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 255, .35)
}

.changeStatusPopup [status_color=blue]::after {
    background: linear-gradient(90deg, rgba(0, 0, 255, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=brown]::before {
    background-color: rgba(165, 42, 42, .8);
    border: 1px solid rgba(165, 42, 42, .8);
    box-shadow: 0px 0px 0px 8px rgba(165, 42, 42, .35)
}

.changeStatusPopup [status_color=brown]::after {
    background: linear-gradient(90deg, rgba(165, 42, 42, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=cadetblue]::before {
    background-color: rgba(95, 158, 160, .8);
    border: 1px solid rgba(95, 158, 160, .8);
    box-shadow: 0px 0px 0px 8px rgba(95, 158, 160, .35)
}

.changeStatusPopup [status_color=cadetblue]::after {
    background: linear-gradient(90deg, rgba(95, 158, 160, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=chartreuse]::before {
    background-color: rgba(127, 255, 0, .8);
    border: 1px solid rgba(127, 255, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(127, 255, 0, .35)
}

.changeStatusPopup [status_color=chartreuse]::after {
    background: linear-gradient(90deg, rgba(127, 255, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=chocolate]::before {
    background-color: rgba(210, 105, 30, .8);
    border: 1px solid rgba(210, 105, 30, .8);
    box-shadow: 0px 0px 0px 8px rgba(210, 105, 30, .35)
}

.changeStatusPopup [status_color=chocolate]::after {
    background: linear-gradient(90deg, rgba(210, 105, 30, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=coral]::before {
    background-color: rgba(255, 127, 80, .8);
    border: 1px solid rgba(255, 127, 80, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 127, 80, .35)
}

.changeStatusPopup [status_color=coral]::after {
    background: linear-gradient(90deg, rgba(255, 127, 80, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=cornflowerblue]::before {
    background-color: rgba(100, 149, 237, .8);
    border: 1px solid rgba(100, 149, 237, .8);
    box-shadow: 0px 0px 0px 8px rgba(100, 149, 237, .35)
}

.changeStatusPopup [status_color=cornflowerblue]::after {
    background: linear-gradient(90deg, rgba(100, 149, 237, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=crimson]::before {
    background-color: rgba(220, 20, 60, .8);
    border: 1px solid rgba(220, 20, 60, .8);
    box-shadow: 0px 0px 0px 8px rgba(220, 20, 60, .35)
}

.changeStatusPopup [status_color=crimson]::after {
    background: linear-gradient(90deg, rgba(220, 20, 60, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=cyan]::before {
    background-color: rgba(0, 255, 255, .8);
    border: 1px solid rgba(0, 255, 255, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 255, 255, .35)
}

.changeStatusPopup [status_color=cyan]::after {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkblue]::before {
    background-color: rgba(0, 0, 139, .8);
    border: 1px solid rgba(0, 0, 139, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 139, .35)
}

.changeStatusPopup [status_color=darkblue]::after {
    background: linear-gradient(90deg, rgba(0, 0, 139, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkcyan]::before {
    background-color: rgba(0, 139, 139, .8);
    border: 1px solid rgba(0, 139, 139, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 139, 139, .35)
}

.changeStatusPopup [status_color=darkcyan]::after {
    background: linear-gradient(90deg, rgba(0, 139, 139, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkgray]::before {
    background-color: rgba(169, 169, 169, .8);
    border: 1px solid rgba(169, 169, 169, .8);
    box-shadow: 0px 0px 0px 8px rgba(169, 169, 169, .35)
}

.changeStatusPopup [status_color=darkgray]::after {
    background: linear-gradient(90deg, rgba(169, 169, 169, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkgreen]::before {
    background-color: rgba(0, 100, 0, .8);
    border: 1px solid rgba(0, 100, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 100, 0, .35)
}

.changeStatusPopup [status_color=darkgreen]::after {
    background: linear-gradient(90deg, rgba(0, 100, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkkhaki]::before {
    background-color: rgba(189, 183, 107, .8);
    border: 1px solid rgba(189, 183, 107, .8);
    box-shadow: 0px 0px 0px 8px rgba(189, 183, 107, .35)
}

.changeStatusPopup [status_color=darkkhaki]::after {
    background: linear-gradient(90deg, rgba(189, 183, 107, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkmagenta]::before {
    background-color: rgba(139, 0, 139, .8);
    border: 1px solid rgba(139, 0, 139, .8);
    box-shadow: 0px 0px 0px 8px rgba(139, 0, 139, .35)
}

.changeStatusPopup [status_color=darkmagenta]::after {
    background: linear-gradient(90deg, rgba(139, 0, 139, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkolivegreen]::before {
    background-color: rgba(85, 107, 47, .8);
    border: 1px solid rgba(85, 107, 47, .8);
    box-shadow: 0px 0px 0px 8px rgba(85, 107, 47, .35)
}

.changeStatusPopup [status_color=darkolivegreen]::after {
    background: linear-gradient(90deg, rgba(85, 107, 47, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkorange]::before {
    background-color: rgba(255, 140, 0, .8);
    border: 1px solid rgba(255, 140, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 140, 0, .35)
}

.changeStatusPopup [status_color=darkorange]::after {
    background: linear-gradient(90deg, rgba(255, 140, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkorchid]::before {
    background-color: rgba(153, 50, 204, .8);
    border: 1px solid rgba(153, 50, 204, .8);
    box-shadow: 0px 0px 0px 8px rgba(153, 50, 204, .35)
}

.changeStatusPopup [status_color=darkorchid]::after {
    background: linear-gradient(90deg, rgba(153, 50, 204, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkred]::before {
    background-color: rgba(139, 0, 0, .8);
    border: 1px solid rgba(139, 0, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(139, 0, 0, .35)
}

.changeStatusPopup [status_color=darkred]::after {
    background: linear-gradient(90deg, rgba(139, 0, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darksalmon]::before {
    background-color: rgba(233, 150, 122, .8);
    border: 1px solid rgba(233, 150, 122, .8);
    box-shadow: 0px 0px 0px 8px rgba(233, 150, 122, .35)
}

.changeStatusPopup [status_color=darksalmon]::after {
    background: linear-gradient(90deg, rgba(233, 150, 122, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkseagreen]::before {
    background-color: rgba(143, 188, 143, .8);
    border: 1px solid rgba(143, 188, 143, .8);
    box-shadow: 0px 0px 0px 8px rgba(143, 188, 143, .35)
}

.changeStatusPopup [status_color=darkseagreen]::after {
    background: linear-gradient(90deg, rgba(143, 188, 143, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkslateblue]::before {
    background-color: rgba(72, 61, 139, .8);
    border: 1px solid rgba(72, 61, 139, .8);
    box-shadow: 0px 0px 0px 8px rgba(72, 61, 139, .35)
}

.changeStatusPopup [status_color=darkslateblue]::after {
    background: linear-gradient(90deg, rgba(72, 61, 139, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkslategray]::before {
    background-color: rgba(47, 79, 79, .8);
    border: 1px solid rgba(47, 79, 79, .8);
    box-shadow: 0px 0px 0px 8px rgba(47, 79, 79, .35)
}

.changeStatusPopup [status_color=darkslategray]::after {
    background: linear-gradient(90deg, rgba(47, 79, 79, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkturquoise]::before {
    background-color: rgba(0, 206, 209, .8);
    border: 1px solid rgba(0, 206, 209, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 206, 209, .35)
}

.changeStatusPopup [status_color=darkturquoise]::after {
    background: linear-gradient(90deg, rgba(0, 206, 209, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=darkviolet]::before {
    background-color: rgba(148, 0, 211, .8);
    border: 1px solid rgba(148, 0, 211, .8);
    box-shadow: 0px 0px 0px 8px rgba(148, 0, 211, .35)
}

.changeStatusPopup [status_color=darkviolet]::after {
    background: linear-gradient(90deg, rgba(148, 0, 211, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=deeppink]::before {
    background-color: rgba(255, 20, 147, .8);
    border: 1px solid rgba(255, 20, 147, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 20, 147, .35)
}

.changeStatusPopup [status_color=deeppink]::after {
    background: linear-gradient(90deg, rgba(255, 20, 147, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=deepskyblue]::before {
    background-color: rgba(0, 191, 255, .8);
    border: 1px solid rgba(0, 191, 255, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 191, 255, .35)
}

.changeStatusPopup [status_color=deepskyblue]::after {
    background: linear-gradient(90deg, rgba(0, 191, 255, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=dodgerblue]::before {
    background-color: rgba(30, 144, 255, .8);
    border: 1px solid rgba(30, 144, 255, .8);
    box-shadow: 0px 0px 0px 8px rgba(30, 144, 255, .35)
}

.changeStatusPopup [status_color=dodgerblue]::after {
    background: linear-gradient(90deg, rgba(30, 144, 255, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=firebrick]::before {
    background-color: rgba(178, 34, 34, .8);
    border: 1px solid rgba(178, 34, 34, .8);
    box-shadow: 0px 0px 0px 8px rgba(178, 34, 34, .35)
}

.changeStatusPopup [status_color=firebrick]::after {
    background: linear-gradient(90deg, rgba(178, 34, 34, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=forestgreen]::before {
    background-color: rgba(34, 139, 34, .8);
    border: 1px solid rgba(34, 139, 34, .8);
    box-shadow: 0px 0px 0px 8px rgba(34, 139, 34, .35)
}

.changeStatusPopup [status_color=forestgreen]::after {
    background: linear-gradient(90deg, rgba(34, 139, 34, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=gold]::before {
    background-color: rgba(255, 215, 0, .8);
    border: 1px solid rgba(255, 215, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 215, 0, .35)
}

.changeStatusPopup [status_color=gold]::after {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=goldenrod]::before {
    background-color: rgba(218, 165, 32, .8);
    border: 1px solid rgba(218, 165, 32, .8);
    box-shadow: 0px 0px 0px 8px rgba(218, 165, 32, .35)
}

.changeStatusPopup [status_color=goldenrod]::after {
    background: linear-gradient(90deg, rgba(218, 165, 32, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=gray]::before {
    background-color: rgba(128, 128, 128, .8);
    border: 1px solid rgba(128, 128, 128, .8);
    box-shadow: 0px 0px 0px 8px rgba(128, 128, 128, .35)
}

.changeStatusPopup [status_color=gray]::after {
    background: linear-gradient(90deg, rgba(128, 128, 128, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=green]::before {
    background-color: rgba(0, 128, 0, .8);
    border: 1px solid rgba(0, 128, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 128, 0, .35)
}

.changeStatusPopup [status_color=green]::after {
    background: linear-gradient(90deg, rgba(0, 128, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=hotpink]::before {
    background-color: rgba(255, 105, 180, .8);
    border: 1px solid rgba(255, 105, 180, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 105, 180, .35)
}

.changeStatusPopup [status_color=hotpink]::after {
    background: linear-gradient(90deg, rgba(255, 105, 180, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=indianred]::before {
    background-color: rgba(205, 92, 92, .8);
    border: 1px solid rgba(205, 92, 92, .8);
    box-shadow: 0px 0px 0px 8px rgba(205, 92, 92, .35)
}

.changeStatusPopup [status_color=indianred]::after {
    background: linear-gradient(90deg, rgba(205, 92, 92, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=indigo]::before {
    background-color: rgba(75, 0, 130, .8);
    border: 1px solid rgba(75, 0, 130, .8);
    box-shadow: 0px 0px 0px 8px rgba(75, 0, 130, .35)
}

.changeStatusPopup [status_color=indigo]::after {
    background: linear-gradient(90deg, rgba(75, 0, 130, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=khaki]::before {
    background-color: rgba(240, 230, 140, .8);
    border: 1px solid rgba(240, 230, 140, .8);
    box-shadow: 0px 0px 0px 8px rgba(240, 230, 140, .35)
}

.changeStatusPopup [status_color=khaki]::after {
    background: linear-gradient(90deg, rgba(240, 230, 140, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lawngreen]::before {
    background-color: rgba(124, 252, 0, .8);
    border: 1px solid rgba(124, 252, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(124, 252, 0, .35)
}

.changeStatusPopup [status_color=lawngreen]::after {
    background: linear-gradient(90deg, rgba(124, 252, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightblue]::before {
    background-color: rgba(173, 216, 230, .8);
    border: 1px solid rgba(173, 216, 230, .8);
    box-shadow: 0px 0px 0px 8px rgba(173, 216, 230, .35)
}

.changeStatusPopup [status_color=lightblue]::after {
    background: linear-gradient(90deg, rgba(173, 216, 230, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightcoral]::before {
    background-color: rgba(240, 128, 128, .8);
    border: 1px solid rgba(240, 128, 128, .8);
    box-shadow: 0px 0px 0px 8px rgba(240, 128, 128, .35)
}

.changeStatusPopup [status_color=lightcoral]::after {
    background: linear-gradient(90deg, rgba(240, 128, 128, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightgreen]::before {
    background-color: rgba(144, 238, 144, .8);
    border: 1px solid rgba(144, 238, 144, .8);
    box-shadow: 0px 0px 0px 8px rgba(144, 238, 144, .35)
}

.changeStatusPopup [status_color=lightgreen]::after {
    background: linear-gradient(90deg, rgba(144, 238, 144, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightpink]::before {
    background-color: rgba(255, 182, 193, .8);
    border: 1px solid rgba(255, 182, 193, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 182, 193, .35)
}

.changeStatusPopup [status_color=lightpink]::after {
    background: linear-gradient(90deg, rgba(255, 182, 193, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightsalmon]::before {
    background-color: rgba(255, 160, 122, .8);
    border: 1px solid rgba(255, 160, 122, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 160, 122, .35)
}

.changeStatusPopup [status_color=lightsalmon]::after {
    background: linear-gradient(90deg, rgba(255, 160, 122, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightseagreen]::before {
    background-color: rgba(32, 178, 170, .8);
    border: 1px solid rgba(32, 178, 170, .8);
    box-shadow: 0px 0px 0px 8px rgba(32, 178, 170, .35)
}

.changeStatusPopup [status_color=lightseagreen]::after {
    background: linear-gradient(90deg, rgba(32, 178, 170, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightskyblue]::before {
    background-color: rgba(135, 206, 250, .8);
    border: 1px solid rgba(135, 206, 250, .8);
    box-shadow: 0px 0px 0px 8px rgba(135, 206, 250, .35)
}

.changeStatusPopup [status_color=lightskyblue]::after {
    background: linear-gradient(90deg, rgba(135, 206, 250, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightslategray]::before {
    background-color: rgba(119, 136, 153, .8);
    border: 1px solid rgba(119, 136, 153, .8);
    box-shadow: 0px 0px 0px 8px rgba(119, 136, 153, .35)
}

.changeStatusPopup [status_color=lightslategray]::after {
    background: linear-gradient(90deg, rgba(119, 136, 153, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lightsteelblue]::before {
    background-color: rgba(176, 196, 222, .8);
    border: 1px solid rgba(176, 196, 222, .8);
    box-shadow: 0px 0px 0px 8px rgba(176, 196, 222, .35)
}

.changeStatusPopup [status_color=lightsteelblue]::after {
    background: linear-gradient(90deg, rgba(176, 196, 222, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=lime]::before {
    background-color: rgba(0, 255, 0, .8);
    border: 1px solid rgba(0, 255, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 255, 0, .35)
}

.changeStatusPopup [status_color=lime]::after {
    background: linear-gradient(90deg, rgba(0, 255, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=limegreen]::before {
    background-color: rgba(50, 205, 50, .8);
    border: 1px solid rgba(50, 205, 50, .8);
    box-shadow: 0px 0px 0px 8px rgba(50, 205, 50, .35)
}

.changeStatusPopup [status_color=limegreen]::after {
    background: linear-gradient(90deg, rgba(50, 205, 50, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=linen]::before {
    background-color: rgba(250, 240, 230, .8);
    border: 1px solid rgba(250, 240, 230, .8);
    box-shadow: 0px 0px 0px 8px rgba(250, 240, 230, .35)
}

.changeStatusPopup [status_color=linen]::after {
    background: linear-gradient(90deg, rgba(250, 240, 230, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=magenta]::before {
    background-color: rgba(255, 0, 255, .8);
    border: 1px solid rgba(255, 0, 255, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 0, 255, .35)
}

.changeStatusPopup [status_color=magenta]::after {
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=maroon]::before {
    background-color: rgba(128, 0, 0, .8);
    border: 1px solid rgba(128, 0, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(128, 0, 0, .35)
}

.changeStatusPopup [status_color=maroon]::after {
    background: linear-gradient(90deg, rgba(128, 0, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumaquamarine]::before {
    background-color: rgba(102, 205, 170, .8);
    border: 1px solid rgba(102, 205, 170, .8);
    box-shadow: 0px 0px 0px 8px rgba(102, 205, 170, .35)
}

.changeStatusPopup [status_color=mediumaquamarine]::after {
    background: linear-gradient(90deg, rgba(102, 205, 170, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumblue]::before {
    background-color: rgba(0, 0, 205, .8);
    border: 1px solid rgba(0, 0, 205, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 205, .35)
}

.changeStatusPopup [status_color=mediumblue]::after {
    background: linear-gradient(90deg, rgba(0, 0, 205, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumorchid]::before {
    background-color: rgba(186, 85, 211, .8);
    border: 1px solid rgba(186, 85, 211, .8);
    box-shadow: 0px 0px 0px 8px rgba(186, 85, 211, .35)
}

.changeStatusPopup [status_color=mediumorchid]::after {
    background: linear-gradient(90deg, rgba(186, 85, 211, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumpurple]::before {
    background-color: rgba(147, 112, 219, .8);
    border: 1px solid rgba(147, 112, 219, .8);
    box-shadow: 0px 0px 0px 8px rgba(147, 112, 219, .35)
}

.changeStatusPopup [status_color=mediumpurple]::after {
    background: linear-gradient(90deg, rgba(147, 112, 219, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumseagreen]::before {
    background-color: rgba(60, 179, 113, .8);
    border: 1px solid rgba(60, 179, 113, .8);
    box-shadow: 0px 0px 0px 8px rgba(60, 179, 113, .35)
}

.changeStatusPopup [status_color=mediumseagreen]::after {
    background: linear-gradient(90deg, rgba(60, 179, 113, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumslateblue]::before {
    background-color: rgba(123, 104, 238, .8);
    border: 1px solid rgba(123, 104, 238, .8);
    box-shadow: 0px 0px 0px 8px rgba(123, 104, 238, .35)
}

.changeStatusPopup [status_color=mediumslateblue]::after {
    background: linear-gradient(90deg, rgba(123, 104, 238, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumspringgreen]::before {
    background-color: rgba(0, 250, 154, .8);
    border: 1px solid rgba(0, 250, 154, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 250, 154, .35)
}

.changeStatusPopup [status_color=mediumspringgreen]::after {
    background: linear-gradient(90deg, rgba(0, 250, 154, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumturquoise]::before {
    background-color: rgba(72, 209, 204, .8);
    border: 1px solid rgba(72, 209, 204, .8);
    box-shadow: 0px 0px 0px 8px rgba(72, 209, 204, .35)
}

.changeStatusPopup [status_color=mediumturquoise]::after {
    background: linear-gradient(90deg, rgba(72, 209, 204, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mediumvioletred]::before {
    background-color: rgba(199, 21, 133, .8);
    border: 1px solid rgba(199, 21, 133, .8);
    box-shadow: 0px 0px 0px 8px rgba(199, 21, 133, .35)
}

.changeStatusPopup [status_color=mediumvioletred]::after {
    background: linear-gradient(90deg, rgba(199, 21, 133, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=midnightblue]::before {
    background-color: rgba(25, 25, 112, .8);
    border: 1px solid rgba(25, 25, 112, .8);
    box-shadow: 0px 0px 0px 8px rgba(25, 25, 112, .35)
}

.changeStatusPopup [status_color=midnightblue]::after {
    background: linear-gradient(90deg, rgba(25, 25, 112, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=mistyrose]::before {
    background-color: rgba(255, 228, 225, .8);
    border: 1px solid rgba(255, 228, 225, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 228, 225, .35)
}

.changeStatusPopup [status_color=mistyrose]::after {
    background: linear-gradient(90deg, rgba(255, 228, 225, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=moccasin]::before {
    background-color: rgba(255, 228, 181, .8);
    border: 1px solid rgba(255, 228, 181, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 228, 181, .35)
}

.changeStatusPopup [status_color=moccasin]::after {
    background: linear-gradient(90deg, rgba(255, 228, 181, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=navajowhite]::before {
    background-color: rgba(255, 222, 173, .8);
    border: 1px solid rgba(255, 222, 173, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 222, 173, .35)
}

.changeStatusPopup [status_color=navajowhite]::after {
    background: linear-gradient(90deg, rgba(255, 222, 173, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=navy]::before {
    background-color: rgba(0, 0, 128, .8);
    border: 1px solid rgba(0, 0, 128, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 128, .35)
}

.changeStatusPopup [status_color=navy]::after {
    background: linear-gradient(90deg, rgba(0, 0, 128, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=olive]::before {
    background-color: rgba(128, 128, 0, .8);
    border: 1px solid rgba(128, 128, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(128, 128, 0, .35)
}

.changeStatusPopup [status_color=olive]::after {
    background: linear-gradient(90deg, rgba(128, 128, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=olivedrab]::before {
    background-color: rgba(107, 142, 35, .8);
    border: 1px solid rgba(107, 142, 35, .8);
    box-shadow: 0px 0px 0px 8px rgba(107, 142, 35, .35)
}

.changeStatusPopup [status_color=olivedrab]::after {
    background: linear-gradient(90deg, rgba(107, 142, 35, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=orange]::before {
    background-color: rgba(255, 165, 0, .8);
    border: 1px solid rgba(255, 165, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 165, 0, .35)
}

.changeStatusPopup [status_color=orange]::after {
    background: linear-gradient(90deg, rgba(255, 165, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=orangered]::before {
    background-color: rgba(255, 69, 0, .8);
    border: 1px solid rgba(255, 69, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 69, 0, .35)
}

.changeStatusPopup [status_color=orangered]::after {
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=orchid]::before {
    background-color: rgba(218, 112, 214, .8);
    border: 1px solid rgba(218, 112, 214, .8);
    box-shadow: 0px 0px 0px 8px rgba(218, 112, 214, .35)
}

.changeStatusPopup [status_color=orchid]::after {
    background: linear-gradient(90deg, rgba(218, 112, 214, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=palegoldenrod]::before {
    background-color: rgba(238, 232, 170, .8);
    border: 1px solid rgba(238, 232, 170, .8);
    box-shadow: 0px 0px 0px 8px rgba(238, 232, 170, .35)
}

.changeStatusPopup [status_color=palegoldenrod]::after {
    background: linear-gradient(90deg, rgba(238, 232, 170, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=palegreen]::before {
    background-color: rgba(152, 251, 152, .8);
    border: 1px solid rgba(152, 251, 152, .8);
    box-shadow: 0px 0px 0px 8px rgba(152, 251, 152, .35)
}

.changeStatusPopup [status_color=palegreen]::after {
    background: linear-gradient(90deg, rgba(152, 251, 152, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=paleturquoise]::before {
    background-color: rgba(175, 238, 238, .8);
    border: 1px solid rgba(175, 238, 238, .8);
    box-shadow: 0px 0px 0px 8px rgba(175, 238, 238, .35)
}

.changeStatusPopup [status_color=paleturquoise]::after {
    background: linear-gradient(90deg, rgba(175, 238, 238, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=palevioletred]::before {
    background-color: rgba(219, 112, 147, .8);
    border: 1px solid rgba(219, 112, 147, .8);
    box-shadow: 0px 0px 0px 8px rgba(219, 112, 147, .35)
}

.changeStatusPopup [status_color=palevioletred]::after {
    background: linear-gradient(90deg, rgba(219, 112, 147, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=papayawhip]::before {
    background-color: rgba(255, 239, 213, .8);
    border: 1px solid rgba(255, 239, 213, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 239, 213, .35)
}

.changeStatusPopup [status_color=papayawhip]::after {
    background: linear-gradient(90deg, rgba(255, 239, 213, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=peachpuff]::before {
    background-color: rgba(255, 218, 185, .8);
    border: 1px solid rgba(255, 218, 185, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 218, 185, .35)
}

.changeStatusPopup [status_color=peachpuff]::after {
    background: linear-gradient(90deg, rgba(255, 218, 185, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=peru]::before {
    background-color: rgba(205, 133, 63, .8);
    border: 1px solid rgba(205, 133, 63, .8);
    box-shadow: 0px 0px 0px 8px rgba(205, 133, 63, .35)
}

.changeStatusPopup [status_color=peru]::after {
    background: linear-gradient(90deg, rgba(205, 133, 63, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=pink]::before {
    background-color: rgba(255, 192, 203, .8);
    border: 1px solid rgba(255, 192, 203, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 192, 203, .35)
}

.changeStatusPopup [status_color=pink]::after {
    background: linear-gradient(90deg, rgba(255, 192, 203, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=plum]::before {
    background-color: rgba(221, 160, 221, .8);
    border: 1px solid rgba(221, 160, 221, .8);
    box-shadow: 0px 0px 0px 8px rgba(221, 160, 221, .35)
}

.changeStatusPopup [status_color=plum]::after {
    background: linear-gradient(90deg, rgba(221, 160, 221, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=powderblue]::before {
    background-color: rgba(176, 224, 230, .8);
    border: 1px solid rgba(176, 224, 230, .8);
    box-shadow: 0px 0px 0px 8px rgba(176, 224, 230, .35)
}

.changeStatusPopup [status_color=powderblue]::after {
    background: linear-gradient(90deg, rgba(176, 224, 230, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=purple]::before {
    background-color: rgba(128, 0, 128, .8);
    border: 1px solid rgba(128, 0, 128, .8);
    box-shadow: 0px 0px 0px 8px rgba(128, 0, 128, .35)
}

.changeStatusPopup [status_color=purple]::after {
    background: linear-gradient(90deg, rgba(128, 0, 128, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=red]::before {
    background-color: rgba(255, 0, 0, .8);
    border: 1px solid rgba(255, 0, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 0, 0, .35)
}

.changeStatusPopup [status_color=red]::after {
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=rosybrown]::before {
    background-color: rgba(188, 143, 143, .8);
    border: 1px solid rgba(188, 143, 143, .8);
    box-shadow: 0px 0px 0px 8px rgba(188, 143, 143, .35)
}

.changeStatusPopup [status_color=rosybrown]::after {
    background: linear-gradient(90deg, rgba(188, 143, 143, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=royalblue]::before {
    background-color: rgba(65, 105, 225, .8);
    border: 1px solid rgba(65, 105, 225, .8);
    box-shadow: 0px 0px 0px 8px rgba(65, 105, 225, .35)
}

.changeStatusPopup [status_color=royalblue]::after {
    background: linear-gradient(90deg, rgba(65, 105, 225, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=saddlebrown]::before {
    background-color: rgba(139, 69, 19, .8);
    border: 1px solid rgba(139, 69, 19, .8);
    box-shadow: 0px 0px 0px 8px rgba(139, 69, 19, .35)
}

.changeStatusPopup [status_color=saddlebrown]::after {
    background: linear-gradient(90deg, rgba(139, 69, 19, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=salmon]::before {
    background-color: rgba(250, 128, 114, .8);
    border: 1px solid rgba(250, 128, 114, .8);
    box-shadow: 0px 0px 0px 8px rgba(250, 128, 114, .35)
}

.changeStatusPopup [status_color=salmon]::after {
    background: linear-gradient(90deg, rgba(250, 128, 114, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=sandybrown]::before {
    background-color: rgba(244, 164, 96, .8);
    border: 1px solid rgba(244, 164, 96, .8);
    box-shadow: 0px 0px 0px 8px rgba(244, 164, 96, .35)
}

.changeStatusPopup [status_color=sandybrown]::after {
    background: linear-gradient(90deg, rgba(244, 164, 96, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=seagreen]::before {
    background-color: rgba(46, 139, 87, .8);
    border: 1px solid rgba(46, 139, 87, .8);
    box-shadow: 0px 0px 0px 8px rgba(46, 139, 87, .35)
}

.changeStatusPopup [status_color=seagreen]::after {
    background: linear-gradient(90deg, rgba(46, 139, 87, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=silver]::before {
    background-color: rgba(192, 192, 192, .8);
    border: 1px solid rgba(192, 192, 192, .8);
    box-shadow: 0px 0px 0px 8px rgba(192, 192, 192, .35)
}

.changeStatusPopup [status_color=silver]::after {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=skyblue]::before {
    background-color: rgba(135, 206, 235, .8);
    border: 1px solid rgba(135, 206, 235, .8);
    box-shadow: 0px 0px 0px 8px rgba(135, 206, 235, .35)
}

.changeStatusPopup [status_color=skyblue]::after {
    background: linear-gradient(90deg, rgba(135, 206, 235, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=slateblue]::before {
    background-color: rgba(106, 90, 205, .8);
    border: 1px solid rgba(106, 90, 205, .8);
    box-shadow: 0px 0px 0px 8px rgba(106, 90, 205, .35)
}

.changeStatusPopup [status_color=slateblue]::after {
    background: linear-gradient(90deg, rgba(106, 90, 205, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=slategray]::before {
    background-color: rgba(112, 128, 144, .8);
    border: 1px solid rgba(112, 128, 144, .8);
    box-shadow: 0px 0px 0px 8px rgba(112, 128, 144, .35)
}

.changeStatusPopup [status_color=slategray]::after {
    background: linear-gradient(90deg, rgba(112, 128, 144, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=springgreen]::before {
    background-color: rgba(0, 255, 127, .8);
    border: 1px solid rgba(0, 255, 127, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 255, 127, .35)
}

.changeStatusPopup [status_color=springgreen]::after {
    background: linear-gradient(90deg, rgba(0, 255, 127, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=steelblue]::before {
    background-color: rgba(70, 130, 180, .8);
    border: 1px solid rgba(70, 130, 180, .8);
    box-shadow: 0px 0px 0px 8px rgba(70, 130, 180, .35)
}

.changeStatusPopup [status_color=steelblue]::after {
    background: linear-gradient(90deg, rgba(70, 130, 180, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=tan]::before {
    background-color: rgba(210, 180, 140, .8);
    border: 1px solid rgba(210, 180, 140, .8);
    box-shadow: 0px 0px 0px 8px rgba(210, 180, 140, .35)
}

.changeStatusPopup [status_color=tan]::after {
    background: linear-gradient(90deg, rgba(210, 180, 140, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=teal]::before {
    background-color: rgba(0, 128, 128, .8);
    border: 1px solid rgba(0, 128, 128, .8);
    box-shadow: 0px 0px 0px 8px rgba(0, 128, 128, .35)
}

.changeStatusPopup [status_color=teal]::after {
    background: linear-gradient(90deg, rgba(0, 128, 128, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=tomato]::before {
    background-color: rgba(255, 99, 71, .8);
    border: 1px solid rgba(255, 99, 71, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 99, 71, .35)
}

.changeStatusPopup [status_color=tomato]::after {
    background: linear-gradient(90deg, rgba(255, 99, 71, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=turquoise]::before {
    background-color: rgba(64, 224, 208, .8);
    border: 1px solid rgba(64, 224, 208, .8);
    box-shadow: 0px 0px 0px 8px rgba(64, 224, 208, .35)
}

.changeStatusPopup [status_color=turquoise]::after {
    background: linear-gradient(90deg, rgba(64, 224, 208, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=violet]::before {
    background-color: rgba(238, 130, 238, .8);
    border: 1px solid rgba(238, 130, 238, .8);
    box-shadow: 0px 0px 0px 8px rgba(238, 130, 238, .35)
}

.changeStatusPopup [status_color=violet]::after {
    background: linear-gradient(90deg, rgba(238, 130, 238, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=wheat]::before {
    background-color: rgba(245, 222, 179, .8);
    border: 1px solid rgba(245, 222, 179, .8);
    box-shadow: 0px 0px 0px 8px rgba(245, 222, 179, .35)
}

.changeStatusPopup [status_color=wheat]::after {
    background: linear-gradient(90deg, rgba(245, 222, 179, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color=yellow]::before {
    background-color: rgba(255, 255, 0, .8);
    border: 1px solid rgba(255, 255, 0, .8);
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 0, .35)
}

.changeStatusPopup [status_color=yellow]::after {
    background: linear-gradient(90deg, rgba(255, 255, 0, 0.15) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup [status_color]:hover::after {
    opacity: 1 !important
}

.changeStatusPopup [status_color]:hover::before {
    transform: scale(1)
}

.changeStatusPopup [status_color]::before {
    transform: scale(0.5)
}

@keyframes status-pulse {
    0% {
        transform: scale(0.5);
        opacity: .3
    }
    50% {
        transform: scale(1);
        opacity: 1
    }
    100% {
        transform: scale(0.5);
        opacity: .3
    }
}

[status] {
    min-width: 100px;
    margin: 0;
    display: inline-flex !important;
    justify-content: center;
    font-size: .878rem;
    font-weight: 500;
    text-align: center;
    padding: 4px 8px;
    border-radius: var(--btnRadius);
    backdrop-filter: var(--backgeound-shade-blur);
    white-space: nowrap;
    text-transform: capitalize;
    z-index: 3
}

[status]::first-letter {
    text-transform: uppercase
}

[status]:hover::before {
    opacity: 1;
    color: var(--inputColor5);
    border: 1px dashed var(--inputColor3)
}

[status]::before {
    content: "Change";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-size: .937rem;
    font-weight: 500;
    background-color: var(--white);
    border: 1px dashed var(--inputColor2);
    border-radius: inherit;
    opacity: 0;
    letter-spacing: inherit;
    transition: var(--transition1);
    white-space: nowrap;
    cursor: pointer
}

[status][disable], [status] .disable {
    pointer-events: none
}

[status][disable]::before, [status] .disable::before {
    display: none
}

[orientation=portrait] {
    width: 100%;
    min-width: 210mm;
    max-width: 210mm;
    min-height: 297mm
}

[orientation=landscape] {
    width: 100%;
    min-width: 297mm;
    max-width: 297mm;
    min-height: 210mm
}

.printSection {
    padding-top: var(--headerHeight)
}

@media print {
    @page {
        size: A4;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        outline-style: none;
        -webkit-text-size-adjust: 100%;
        page-break-before: always;
        cursor: context-menu;
        box-shadow: none;@top-center {
        content: "Header content"
    }@bottom-center {
        content: "Footer content"
    }
    }

    body {
        margin-top: 0;
        page-break-before: avoid
    }

    .printView {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        outline-style: none;
        -webkit-text-size-adjust: 100%;
        cursor: context-menu;
        page-break-before: avoid;
        box-shadow: none
    }

    input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none
    }

    input[type=date], input[type=datetime-local], input[type=email], input[type=file], input[type=hidden], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea, select, datalist {
        padding: 0 !important;
        background-color: rgba(0, 0, 0, 0) !important;
        border: 1px solid rgba(0, 0, 0, 0) !important;
        border-radius: 0 !important;
        pointer-events: none
    }

    #spacer {
        height: 130px !important
    }

    #footerDiv {
        position: fixed;
        bottom: 20px;
        left: 0px;
        width: 100%
    }
}

.tRow .tableDiv {
    width: 100%;
    min-width: 100%;
    max-width: 100%
}

.tRow table {
    width: 100%;
    display: table;
    border-spacing: 0;
    border-collapse: collapse
}

.tRow table tr {
    display: table-row;
    transition: var(--transition1)
}

.tRow table th, .tRow table td {
    background-clip: padding-box;
    text-align: left;
    padding: .25rem .75rem
}

.tRow table td {
    border-bottom: 1px solid rgba(255, 255, 255, .5411764706);
    transition: var(--transition1);
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap
}

.tRow [width=xxs] {
    width: 45px;
    min-width: 45px
}

.tRow [width=xs] {
    width: 75px;
    min-width: 75px
}

.tRow [width=sm] {
    width: 100px;
    min-width: 100px
}

.tRow [width=md] {
    width: 150px;
    min-width: 150px
}

.tRow [width=lg] {
    width: 200px;
    min-width: 200px
}

.tRow [width=xl] {
    width: 250px;
    min-width: 250px
}

.tRow [width=xxl] {
    width: 300px;
    min-width: 300px
}

.tRow [width=xxxl] {
    width: 350px;
    min-width: 350px
}

.tRow [align=left] {
    text-align: left
}

.tRow [align=center] {
    text-align: center !important
}

.tRow [align=center] * {
    margin: 0 auto;
    text-align: center
}

.tRow [align=right] {
    text-align: right
}

.tRow [align=justify] {
    text-align: justify
}

.tRow .textLimit {
    overflow: hidden
}

.tRow .name {
    color: var(--print-font-color);
    margin: 0;
    font-weight: 500;
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.tRow .price {
    color: var(--print-font-color);
    margin: 0;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    white-space: noWrap;
    pointer-events: none;
    z-index: 2
}

.tRow .price:empty {
    display: none
}

.tRow .price span {
    font-weight: 400
}

.tRow .cost {
    display: inline-block
}

.tRow .cost span {
    color: var(--print-font-color);
    text-align: right;
    display: block;
    font-weight: 400
}

.tRow .cost span:nth-child(1) {
    font-size: .878rem;
    font-weight: 500
}

.tRow .cost span:nth-child(2) {
    margin-top: .5rem;
    font-size: .667rem;
    font-weight: 400;
    padding-left: .25rem
}

.tRow .cost span:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 11px;
    background-color: var(--green);
    border-radius: var(--radius)
}

.tRow .datePeriod {
    color: var(--print-font-color)
}

.tRow .datePeriod span, .tRow .datePeriod p {
    display: block;
    font-weight: 400;
    padding-left: .7rem
}

.tRow .datePeriod span::after, .tRow .datePeriod p::after {
    content: "";
    position: absolute;
    top: 3px;
    left: -1.5px;
    width: 5px;
    height: 5px;
    z-index: 1;
    border-radius: var(--radius)
}

.tRow .datePeriod span::before, .tRow .datePeriod p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--borderGray)
}

.tRow .datePeriod span:nth-child(1)::after, .tRow .datePeriod p:nth-child(1)::after {
    background-color: #81c376
}

.tRow .datePeriod span:nth-child(2), .tRow .datePeriod p:nth-child(2) {
    margin-top: .25rem
}

.tRow .datePeriod span:nth-child(2)::after, .tRow .datePeriod p:nth-child(2)::after {
    background-color: #e57575
}

.tRow .contactActionList {
    margin-top: .5rem
}

.tRow .contactActionList .contactList {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: .25rem 0;
    z-index: 2
}

.tRow .contactActionList .contactList:hover .contactCopy {
    opacity: 1;
    transform: scale(1.1)
}

.tRow .contactActionList .contactList:nth-last-child(1) {
    border-bottom: none
}

.tRow .contactActionList .contactList .phone, .tRow .contactActionList .contactList .email, .tRow .contactActionList .contactList .whatsapp {
    padding: .25rem 0
}

.tRow .contactActionList .contactList .contactCopy {
    color: var(--print-font-color);
    opacity: 0;
    width: 25px;
    height: 25px;
    padding: .35rem;
    margin-left: .5rem;
    border-radius: var(--radius);
    background-color: var(--inputColor1);
    cursor: pointer;
    transition: var(--transition1)
}

.tRow .contactActionList .contactList .contactCopy:hover i {
    color: var(--inputColor4)
}

.tRow .contactActionList .contactList .contactCopy i {
    color: var(--inputColor3);
    cursor: pointer
}

.tRow .email, .tRow .whatsapp, .tRow .phone, .tRow .idText, .tRow .dateText, .tRow .timeText, .tRow .subSourceText, .tRow .sourceText, .tRow .departmentText, .tRow .addressText, .tRow .locationText, .tRow .userText {
    color: var(--print-font-color);
    display: inline-block;
    font-size: .937rem;
    font-weight: 500;
    white-space: noWrap;
    transition: var(--transition1)
}

.tRow .email:empty, .tRow .whatsapp:empty, .tRow .phone:empty, .tRow .idText:empty, .tRow .dateText:empty, .tRow .timeText:empty, .tRow .subSourceText:empty, .tRow .sourceText:empty, .tRow .departmentText:empty, .tRow .addressText:empty, .tRow .locationText:empty, .tRow .userText:empty {
    margin: 0 !important
}

.tRow .email:empty::before, .tRow .whatsapp:empty::before, .tRow .phone:empty::before, .tRow .idText:empty::before, .tRow .dateText:empty::before, .tRow .timeText:empty::before, .tRow .subSourceText:empty::before, .tRow .sourceText:empty::before, .tRow .departmentText:empty::before, .tRow .addressText:empty::before, .tRow .locationText:empty::before, .tRow .userText:empty::before {
    display: none !important
}

.tRow .email::before, .tRow .whatsapp::before, .tRow .phone::before, .tRow .idText::before, .tRow .dateText::before, .tRow .timeText::before, .tRow .subSourceText::before, .tRow .sourceText::before, .tRow .departmentText::before, .tRow .addressText::before, .tRow .locationText::before, .tRow .userText::before {
    top: 2px;
    margin-right: .5rem;
    color: inherit;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transform: translateY(2px);
    opacity: .7
}

.tRow .userText {
    font-weight: 600;
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.tRow .userText::before {
    content: ""
}

.tRow .addressText, .tRow .locationText {
    font-size: .937rem;
    text-transform: capitalize;
    z-index: 2
}

.tRow .addressText::before, .tRow .locationText::before {
    content: ""
}

.tRow .departmentText {
    text-transform: capitalize;
    pointer-events: none;
    z-index: 2
}

.tRow .departmentText::before {
    content: ""
}

.tRow .sourceText {
    font-weight: 400;
    text-transform: capitalize;
    pointer-events: none;
    pointer-events: none;
    z-index: 2
}

.tRow .sourceText::before {
    content: ""
}

.tRow .subSourceText {
    font-size: .733rem;
    text-transform: capitalize;
    font-weight: 400;
    margin-top: .5rem;
    pointer-events: none;
    pointer-events: none;
    z-index: 2
}

.tRow .subSourceText::before {
    display: none;
    opacity: 0;
    content: ""
}

.tRow .timeText {
    pointer-events: none;
    z-index: 2
}

.tRow .timeText::before {
    content: ""
}

.tRow .dateText {
    font-size: .878rem;
    pointer-events: none;
    opacity: .7;
    pointer-events: none;
    z-index: 2
}

.tRow .dateText::before {
    content: ""
}

.tRow .idText {
    font-size: .878rem;
    opacity: .7;
    pointer-events: none;
    z-index: 2
}

.tRow .idText::before {
    content: "#"
}

.tRow .phone {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.tRow .phone:hover {
    color: #293db1
}

.tRow .phone::before {
    content: ""
}

.tRow .whatsapp {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.tRow .whatsapp:hover {
    color: #293db1
}

.tRow .whatsapp::before {
    content: ""
}

.tRow .email {
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .95
}

.tRow .email:hover {
    color: #293db1
}

.tRow .email::before {
    content: ""
}

.tRow .messageText {
    z-index: 2
}

.tRow .messageText:hover .label {
    color: var(--color1)
}

.tRow .messageText:hover .message {
    display: block;
    z-index: 101
}

.tRow .messageText .label {
    color: var(--print-font-color);
    display: flex;
    align-items: center;
    font-size: .733rem;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer
}

.tRow .messageText .label i {
    font-size: .733rem;
    color: inherit;
    padding-right: 5px;
    margin-right: 5px;
    border-right: 1px solid var(--inputColor3)
}

.tRow .messageText .message {
    color: var(--print-font-color);
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    width: 300px;
    font-size: .937rem;
    font-weight: 400;
    line-height: 1.5 !important;
    white-space: wrap;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1rem
}

@media (min-width: 768px) {
    .tRow .messageText .message {
        width: 500px
    }
}

.tRow .sText {
    color: var(--print-font-color);
    display: block;
    font-size: .878rem;
    font-weight: 400;
    margin-bottom: .5rem;
    pointer-events: none;
    z-index: 2
}

.tRow .bText {
    color: var(--print-font-color);
    display: block;
    font-size: .937rem;
    margin: 0;
    pointer-events: none;
    z-index: 2
}

.tRow [reminder=active] {
    border: 1px solid #b6f3b6
}

.tRow [reminder=done] {
    background-color: #ecffef
}

.tRow [reminder=done] .btn {
    display: none
}

.tRow [reminder=cancel] {
    background-color: var(--lightGray);
    border: 1px solid var(--borderGray);
    opacity: .5
}

.tRow [reminder=cancel] .btn {
    display: none
}

.tRow [label] {
    height: 24px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: .733rem;
    font-weight: 500;
    padding: 5px;
    border-radius: 3px 0 0 3px
}

.tRow [label]:empty {
    padding: 0
}

.tRow [label]:empty:before {
    display: none
}

.tRow [label]::after {
    content: "";
    position: absolute;
    top: 0;
    right: -18px;
    height: 0;
    display: inline-block;
    border: 12px solid #e8e9ee;
    border-right: 10px inset rgba(0, 0, 0, 0) !important
}

.tRow [label=red] {
    color: var(--white);
    background-color: #ff5b5b
}

.tRow [label=red]::after {
    border-color: #ff5b5b rgba(0, 0, 0, 0) #ff5b5b #ff5b5b
}

.tRow [label=orange] {
    color: var(--white);
    background-color: #ff8146
}

.tRow [label=orange]::after {
    border-color: #ff8146 rgba(0, 0, 0, 0) #ff8146 #ff8146
}

.tRow [label=yellow] {
    color: var(--darkGray);
    background-color: #fff75b
}

.tRow [label=yellow]::after {
    border-color: #fff75b rgba(0, 0, 0, 0) #fff75b #fff75b
}

.tRow [label=green] {
    color: var(--white);
    background-color: #36bb22
}

.tRow [label=green]::after {
    border-color: #36bb22 rgba(0, 0, 0, 0) #36bb22 #36bb22
}

.tRow [label=blue] {
    color: var(--white);
    background-color: #5b69ff
}

.tRow [label=blue]::after {
    border-color: #5b69ff rgba(0, 0, 0, 0) #5b69ff #5b69ff
}

.tRow [label=gray] {
    color: var(--darkGray);
    background-color: #e8e9ee
}

.tRow [label=gray]::after {
    border-color: #e8e9ee rgba(0, 0, 0, 0) #e8e9ee #e8e9ee
}

.teamProfile {
    display: inline-flex;
    align-items: center;
    z-index: 2
}

.teamProfile::before {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% + 15px)
}

.teamProfile:hover {
    z-index: 100
}

.teamProfile:hover .teamProfileView {
    display: flex
}

.teamProfile .avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-left: -15px;
    border: 3px solid var(--standard-bg-color);
    box-shadow: rgba(0, 0, 0, .1) -2px 2px 3px 0px
}

@media (min-width: 1024px) {
    .teamProfile .avatar {
        width: 40px;
        height: 40px
    }
}

.teamProfile .avatar:nth-child(1) {
    margin: 0 !important
}

.teamProfile .avatar:nth-child(n+5) {
    border: none
}

.teamProfile .avatar:nth-child(n+5)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    background-color: var(--standard-bg-color);
    border: 2px solid var(--shade-2);
    border-radius: 100%;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

@media (min-width: 1024px) {
    .teamProfile .avatar:nth-child(n+5)::after {
        width: 40px;
        height: 40px
    }
}

.teamProfile .avatar:nth-child(n+6) {
    display: none
}

.teamProfileView {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    margin-top: 15px;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .1) 0px 20px 25px -5px, rgba(0, 0, 0, .04) 0px 10px 10px -5px
}

.teamProfileView:empty {
    display: flex;
    overflow: unset;
    cursor: pointer
}

.teamProfileView:empty::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transform: translateY(-100%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    background-color: var(--standard-bg-color);
    border: 1px solid var(--shade-2);
    border-radius: 100%;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    cursor: pointer
}

@media (min-width: 1024px) {
    .teamProfileView:empty::after {
        width: 40px;
        height: 40px
    }
}

.teamProfileView .profileMinimal {
    min-height: 50px;
    min-width: 250px;
    padding-left: 60px;
    transition: var(--transition1)
}

.teamProfileView .profileMinimal::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--borderGray) 49%, rgba(255, 255, 255, 0) 100%)
}

.teamProfileView .profileMinimal:hover {
    background-color: var(--lightGray)
}

.teamProfileView .profileMinimal:nth-last-child(1) {
    border-bottom: none
}

.teamProfileView .profileMinimal img, .teamProfileView .profileMinimal .avatar {
    left: 15px;
    box-shadow: none
}

.assignUserBtn {
    display: none !important
}

.profileMinimal {
    min-height: 40px;
    display: inline-flex;
    flex-direction: column;
    gap: 5px 0;
    justify-content: center;
    align-items: flex-start;
    padding-left: 50px;
    z-index: 2;
    transition: var(--transition1);
    cursor: pointer
}

.profileMinimal:hover img[src=""] {
    opacity: .2
}

.profileMinimal img {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: var(--standard-bg-color);
    border-radius: 100%;
    border: 2px solid var(--standard-bg-color);
    box-shadow: rgba(0, 0, 0, .1) -2px 2px 3px 0px;
    object-fit: cover;
    object-position: top;
    overflow: hidden;
    transition: var(--transition1);
    cursor: pointer
}

.profileMinimal img[src=""] {
    left: 3px;
    opacity: .15;
    background-color: var(--white);
    border: 2px solid var(--white);
    box-shadow: inset 0px 0px 0px 41px var(--lightGray);
    transition: var(--transition1)
}

.profileMinimal img[src=""]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: var(--inputColor2);
    transform: translate(-50%, -50%) scale(1.5);
    transition: var(--transition1)
}

.profileMinimal img[src=""]::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    width: 13px;
    height: 13px;
    border-radius: 100%;
    background-color: var(--inputColor5);
    box-shadow: 0px 23px 0px 8px var(--inputColor5);
    transition: var(--transition1)
}

.profileMinimal item {
    padding-left: 50px
}

.profileMinimal .name {
    color: var(--text-color);
    display: block;
    margin: 0;
    font-size: .937rem;
    font-weight: 500;
    white-space: noWrap;
    transition: var(--transition1);
    cursor: pointer
}

.profileMinimal .name:empty {
    display: block !important
}

.profileMinimal .name:empty::before {
    content: attr(data-label);
    color: var(--inputColor5);
    font-size: .878rem;
    font-weight: inherit;
    margin-right: 8px;
    transition: var(--transition1)
}

.profileMinimal p {
    color: var(--text-color);
    margin: 0;
    font-size: .733rem;
    font-weight: 400;
    white-space: noWrap;
    text-transform: capitalize;
    transition: var(--transition1);
    list-style: 1;
    cursor: pointer
}

.profileMinimal p span {
    font-weight: 500
}

.profileMinimal p:empty {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: -1;
    margin: 0 !important;
    background-color: var(--inputColor1);
    border: 1px dashed var(--inputColor2);
    border-radius: var(--radius)
}

.actionLabel {
    font-weight: 500;
    padding: 0
}

.actionLabel:hover::before {
    color: var(--inputColor5) !important
}

.actionLabel:empty::before {
    content: attr(data-label);
    color: var(--inputColor5);
    font-size: .878rem;
    font-weight: inherit;
    background-color: var(--inputColor1);
    border: 1px dashed var(--inputColor2);
    border-radius: var(--radius);
    padding: 10px 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

.avatarView {
    margin: 0 auto;
    width: var(--porfile-width);
    min-width: var(--porfile-width);
    text-align: center;
    padding-top: calc(var(--profile-ratio) * var(--porfile-width));
    overflow: hidden;
    border-radius: var(--profile-radius)
}

.avatarView img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top;
    background: var(--inputColor2)
}

.avatarView input {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    width: 40px;
    height: 40px !important;
    border-radius: 100% !important;
    overflow: hidden;
    color: var(--white) !important;
    background-color: var(--highlight) !important;
    border: 2px solid var(--highlight) !important;
    pointer-events: all !important
}

.avatarView input::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    color: inherit;
    background-color: inherit
}

.avatarDiv {
    display: flex
}

.avatarDiv img {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 1px solid var(--white);
    margin-right: .5rem;
    cursor: pointer
}

.avatarDiv img img {
    cursor: pointer
}

.profileAvatarDropDown {
    display: none;
    margin-left: 1rem;
    cursor: pointer
}

@media (min-width: 1024px) {
    .profileAvatarDropDown {
        display: block;
        margin-left: .7075rem
    }
}

.profileAvatarDropDown:hover .profileMenu {
    height: auto;
    padding: 1rem 0
}

.profileAvatarDropDown .profileMenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 155;
    height: 0;
    padding: 0;
    background-color: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: rgba(50, 50, 93, .068) 0px 50px 100px -20px, rgba(16, 17, 70, .082) 0px 30px 60px -30px;
    transition: var(--transition1)
}

.profileAvatarDropDown .profileMenu .profileDetails {
    padding: .5rem 1rem
}

.profileAvatarDropDown .profileMenu .profileDetails .title {
    margin: 0;
    color: var(--color2);
    font-size: .937rem;
    font-weight: 500;
    white-space: nowrap
}

.profileAvatarDropDown .profileMenu .profileDetails .text {
    margin-top: .5rem;
    color: var(--gray);
    font-size: .667rem;
    font-weight: 400;
    white-space: nowrap
}

.profileAvatarDropDown .profileMenu a {
    display: flex;
    align-items: center;
    color: var(--black);
    font-size: .878rem;
    white-space: nowrap;
    padding: .5rem 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

.profileAvatarDropDown .profileMenu a:hover {
    color: var(--color3)
}

.profileAvatarDropDown .profileMenu a i {
    margin-right: 1rem
}

.avatarGroup {
    display: flex
}

.avatarGroup .avatar {
    margin-left: -1rem
}

.avatarGroup .avatar:nth-child(1) {
    margin-left: 0 !important
}

.xsAvatar {
    width: 30px;
    height: 30px
}

.smAvatar {
    width: 40px;
    height: 40px
}

.mdAvatar {
    width: 50px;
    height: 50px
}

.lgAvatar {
    width: 60px;
    height: 60px
}

.xlAvatar {
    width: 80px;
    height: 80px
}

.xxlAvatar {
    width: 100px;
    height: 100px
}

.avatar {
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition1);
    object-fit: cover;
    object-position: top
}

.avatar img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
    object-position: top
}

.avatarUpload {
    max-width: 205px;
    margin: 0 auto
}

.avatarUpload .avatarEdit {
    position: absolute;
    bottom: 15px;
    right: 10px;
    z-index: 1;
    width: 40px;
    height: 40px;
    background-color: var(--lightGray);
    border: 3px solid var(--borderGray);
    border-radius: var(--radius);
    overflow: hidden
}

.avatarUpload .avatarEdit input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0
}

.avatarUpload .avatarEdit input + label {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: rgba(0, 0, 0, 0);
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out
}

.avatarUpload .avatarEdit input + label:after {
    content: "";
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    color: var(--color2);
    text-align: center;
    margin: auto
}

.avatarUpload .avatarPreview {
    width: 200px;
    height: 251px;
    border-radius: var(--radius);
    border: 5px solid var(--lightGray)
}

.avatarUpload .avatarPreview #imagePreview {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    object-fit: cover
}

.userPicUpload {
    margin-right: 1rem;
    padding-top: .4rem
}

.userPicUpload label {
    position: relative;
    top: 0;
    left: 0;
    padding: 0;
    margin-bottom: .5rem
}

.userPicUpload .profilePhoto {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    width: 102px;
    height: 102px;
    min-height: 102px;
    object-fit: contain;
    overflow: hidden;
    border: 1px dashed var(--inputColor2);
    transition: all .3s
}

.userPicUpload .profilePhoto:hover {
    background-color: var(--inputColor1);
    border: 1px dashed var(--inputColor4)
}

.userPicUpload .profilePhoto input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.userPicUpload .profilePhoto img {
    display: block;
    width: 100%;
    cursor: pointer
}

.notesDiv {
    width: 100%;
    margin-top: 2rem
}

.notesDiv ul .note {
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid var(--borderGray)
}

.notesDiv ul .note:nth-last-child(1) {
    margin-bottom: 0
}

.notesDiv ul .note .name {
    color: var(--darkGray);
    font-size: .937rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    margin-bottom: .5rem
}

.notesDiv ul .note .date {
    color: var(--gray);
    font-size: .733rem;
    font-weight: 400;
    margin: 0
}

.notesDiv ul .note p {
    margin-top: .25rem;
    margin-bottom: .5rem;
    font-size: .878rem;
    font-weight: 400;
    line-height: 1.2
}

.notesDiv ul .note .bottomDiv {
    display: flex;
    align-items: flex-end;
    justify-content: space-between
}

.notesDiv ul .reminder {
    width: 100%;
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem
}

.notesDiv ul .reminder:nth-last-child(1) {
    margin-bottom: 0
}

.notesDiv ul .reminder .name {
    color: var(--gray);
    font-size: .878rem;
    font-weight: 600;
    margin: 0;
    margin-bottom: .5rem
}

.notesDiv ul .reminder .date {
    color: var(--textGray);
    font-size: .667rem;
    font-weight: 500;
    margin: 0
}

.notesDiv ul .reminder p {
    margin-top: .25rem;
    margin-bottom: .5rem;
    font-size: .878rem;
    font-weight: 500;
    line-height: 1.2
}

.notesDiv ul .reminder .bottomDiv {
    display: flex;
    align-items: flex-end;
    justify-content: space-between
}

.notesDiv ul .reminder .bottomDiv .doneBtn {
    color: var(--green);
    background-color: #ecffef
}

.notesDiv ul .reminder .bottomDiv .btn {
    margin: 0;
    margin-right: 0 !important;
    margin-left: 1rem;
    min-width: auto
}

@media (min-width: 1024px) {
    .stepSeriesDropdownForm {
        padding-left: 1rem
    }
}

@media (min-width: 1024px) {
    .stepSeriesDropdownForm .dropList:nth-child(1) .dropBox {
        padding-top: 0 !important
    }
}

.stepSeriesDropdownForm .dropList::before {
    content: ""
}

@media (min-width: 1024px) {
    .stepSeriesDropdownForm .dropList::before {
        position: absolute;
        top: 0;
        left: -18px;
        width: 1px;
        height: 100%;
        border-left: 2px dashed var(--lightGray)
    }
}

.stepSeriesDropdownForm .dropList .dropBox .number {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color2);
    font-size: .878rem;
    padding: .5rem;
    background-color: var(--lightGray);
    border: 1px solid var(--lightGray);
    border-spacing: 5px;
    border-radius: var(--radius);
    margin-right: 1rem;
    z-index: 1
}

@media (min-width: 1024px) {
    .stepSeriesDropdownForm .dropList .dropBox .number {
        left: -35px;
        margin-right: 0
    }
}

@media (min-width: 1024px) {
    .stepSeriesDropdownForm .dropList .dropBox .title {
        left: -1rem
    }
}

.privilegesDetails {
    width: 100%;
    margin-top: 1rem;
    background: var(--gradient1);
    border-radius: var(--radius);
    padding: 1rem
}

.privilegesDetails p {
    margin: 0;
    margin-bottom: .5rem;
    color: var(--color2);
    font-weight: 500
}

.privilegesDetails label {
    background-color: rgba(0, 0, 0, 0)
}

.privilegesDetails .checkboxRow {
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--borderGray)
}

.privilegesDetails .checkboxRow:nth-last-child(1) {
    border-bottom: none
}

.privilegesDetails .checkboxRow li {
    margin-bottom: 1rem;
    margin-right: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.tabBarMenuOption {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: 2s cubic-bezier(0.37, 0, 0.63, 1)
}

@media (min-width: 1024px) {
    .tabBarMenuOption {
        position: relative;
        bottom: unset !important;
        width: auto
    }
}

.tabBarMenuOption .tabBarMenuOptionList {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    border-radius: var(--radius) var(--radius) 0 0;
    background-color: var(--white);
    box-shadow: rgba(33, 35, 38, .062) 0px -10px 20px -10px;
    border: 1px solid var(--lightGray);
    padding: .7rem 0;
    transition: var(--transition1) !important
}

@media (min-width: 1024px) {
    .tabBarMenuOption .tabBarMenuOptionList {
        width: auto;
        max-width: auto;
        margin: 0;
        box-shadow: none;
        border: none;
        padding: 0
    }
}

.tabBarMenuOption .tabBarMenuOptionList a {
    margin: 0;
    display: flex;
    font-size: .937rem;
    font-weight: 500;
    padding: .75rem 1rem;
    border: none
}

@media (min-width: 1024px) {
    .tabBarMenuOption .tabBarMenuOptionList a {
        padding: .75rem
    }
}

.tabBarMenuOption .tabBarMenuOptionList a span {
    transition: all .2s
}

.downloadDataListSection {
    width: 100%;
    background-color: var(--lightGray);
    background: var(--gradient1);
    border: 1px solid var(--inputColor1);
    border-radius: var(--radius);
    padding: 1rem
}

.downloadDataListSection .title {
    display: block;
    margin-bottom: 1rem;
    color: var(--color2);
    font-weight: 600
}

.downloadDataList {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--lightGray);
    padding-bottom: .5rem
}

.downloadDataList:nth-last-child(1) {
    border-bottom: none
}

.downloadDataList .multipleDocumentList {
    background-color: var(--white);
    border-radius: var(--radius);
    padding: 1rem
}

.downloadDataList .multipleDocumentList .title {
    display: block;
    color: var(--black);
    margin-top: 0
}

.downloadDataList .multipleDocumentList .documentList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid var(--borderGray)
}

.downloadDataList .multipleDocumentList .documentList .label {
    font-weight: 400
}

.downloadDataList .multipleDocumentList .documentList .btnSection .btn {
    margin-top: 0;
    margin-left: .5rem
}

.downloadDataList .multipleDocumentList .uploadDocumentInput {
    margin-top: 2rem;
    margin-bottom: 1rem
}

.downloadDataList .multipleDocumentList .uploadDocumentInput .inputDiv {
    margin-bottom: 0
}

.downloadDataList .downloadList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0
}

.downloadDataList .downloadList .label {
    font-weight: 500
}

.downloadDataList .downloadList .btnSection .btn {
    margin: 0;
    margin-left: .5rem
}

#ajaxLoader {
    width: 100vw;
    height: 100vh;
    z-index: 999999999;
    position: fixed;
    top: 0;
    left: 0;
    display: none
}

#ajaxLoader #loaderContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .6)
}

#ajaxLoader #loaderContainer .ball1, #ajaxLoader #loaderContainer .ball2, #ajaxLoader #loaderContainer .ball3 {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    float: left;
    margin: 0 3px
}

#ajaxLoader #loaderContainer .ball1 {
    background-color: var(--inputColor2);
    -webkit-animation: single1ball1anim 1s infinite linear;
    animation: single1ball1anim 1s infinite linear
}

#ajaxLoader #loaderContainer .ball2 {
    background-color: var(--inputColor3);
    -webkit-animation: single1ball2anim 1s infinite linear;
    animation: single1ball2anim 1s infinite linear
}

#ajaxLoader #loaderContainer .ball3 {
    background-color: var(--inputColor4);
    -webkit-animation: single1ball3anim 1s infinite linear;
    animation: single1ball3anim 1s infinite linear
}

@-webkit-keyframes single1ball1anim {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    12.5% {
        -webkit-transform: scale(1.2);
        transform: scale(1.5)
    }
    25%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes single1ball1anim {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    12.5% {
        -webkit-transform: scale(1.2);
        transform: scale(1.5)
    }
    25%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes single1ball2anim {
    0%, 25% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    37.5% {
        -webkit-transform: scale(1.2);
        transform: scale(1.5)
    }
    50%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes single1ball2anim {
    0%, 25% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    37.5% {
        -webkit-transform: scale(1.2);
        transform: scale(1.5)
    }
    50%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes single1ball3anim {
    0%, 50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    62.5% {
        -webkit-transform: scale(1.2);
        transform: scale(1.5)
    }
    75%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes single1ball3anim {
    0%, 50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    62.5% {
        -webkit-transform: scale(1.2);
        transform: scale(1.5)
    }
    75%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

#exportDataSelection {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 105;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    display: none
}

#exportDataSelection .exportDataHead {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--borderGray);
    padding-right: 0
}

@media (min-width: 1024px) {
    #exportDataSelection .exportDataHead {
        padding-right: 0
    }
}

#exportDataSelection .exportDataHead .exportDataTitle {
    display: flex;
    flex-wrap: wrap
}

@media (min-width: 1024px) {
    #exportDataSelection .exportDataHead .exportDataTitle {
        align-items: center
    }
}

#exportDataSelection .exportDataHead .exportDataTitle .title {
    margin: 0;
    font-weight: 600
}

#exportDataSelection .exportDataHead .exportDataTitle p {
    display: block;
    margin: 0;
    font-size: .937rem
}

@media (min-width: 1024px) {
    #exportDataSelection .exportDataHead .exportDataTitle p {
        display: inline-block;
        padding-left: .75rem;
        margin-left: .75rem;
        border-left: 1px solid var(--borderGray)
    }
}

#exportDataSelection .exportDataHead .exportBtn {
    color: var(--white);
    font-weight: 500;
    filter: brightness(100%);
    background-color: var(--color1);
    border: 1px solid var(--color1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    margin: 0;
    border-radius: 0
}

#exportDataSelection .exportDataHead .exportBtn:hover {
    color: var(--white);
    filter: brightness(110%);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    transition: filter .5s ease-in, background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1)
}

#exportDataSelection .exportDataHead .exportBtn:active {
    filter: brightness(105%)
}

#exportDataSelection .exportDataHead .exportBtn:visited {
    filter: brightness(90%)
}

#exportDataSelection .exportDataHead .exportBtn.secondary {
    background-color: var(--color2);
    border: 1px solid var(--color2)
}

#exportDataSelection .exportDataHead .exportBtn.tertiary {
    background-color: var(--color3);
    border: 1px solid var(--color3)
}

#exportDataSelection .exportDataHead .exportBtn.black {
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--darkGray)
}

#exportDataSelection .exportDataHead .exportBtn.white {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--borderGray)
}

#exportDataSelection .exportDataHead .exportBtn.red {
    color: var(--white);
    background-color: var(--red);
    border: 1px solid var(--red)
}

#exportDataSelection .exportDataHead .exportBtn.green {
    color: var(--white);
    background-color: var(--green);
    border: 1px solid var(--green)
}

#exportDataSelection .exportDataHead .exportBtn.blue {
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid var(--blue)
}

#exportDataSelection .exportDataHead .exportBtn.elevated {
    box-shadow: 0 4px 4px rgba(8, 8, 8, .08), 0 1px 2px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .048), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

#exportDataSelection .exportDataHead .exportBtn.elevated:hover {
    box-shadow: 0 1px 1px rgba(8, 8, 8, .08), 0 1px 1px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .12), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

#exportDataSelection .exportDataHead .exportBtn .loader::before {
    border: 2px solid var(--white)
}

#exportDataSelection .exportLists {
    display: flex;
    flex-wrap: wrap
}

#exportDataSelection .exportLists label {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--borderGray);
    border-right: 1px solid var(--borderGray);
    padding: 1rem;
    margin: 0;
    cursor: pointer;
    transition: var(--transition1)
}

#exportDataSelection .exportLists label:hover {
    background-color: var(--inputColor1)
}

@media (min-width: 568px) {
    #exportDataSelection .exportLists label {
        width: 50%
    }
}

@media (min-width: 768px) {
    #exportDataSelection .exportLists label {
        width: 33.33%
    }
}

@media (min-width: 1800px) {
    #exportDataSelection .exportLists label {
        width: 25%
    }
}

#exportDataSelection .exportLists label input:not([type=checkbox]) {
    width: auto;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    padding-left: 1rem;
    margin-left: .25rem;
    cursor: text
}

#exportDataSelection .exportLists label input:not([type=checkbox])::placeholder {
    opacity: 1 !important;
    color: var(--textGray)
}

#exportDataSelection .exportLists label input:not([type=checkbox]):hover, #exportDataSelection .exportLists label input:not([type=checkbox]) :focus {
    color: var(--color1)
}

#exportDataSelection .exportLists label [type=checkbox] {
    width: 20px
}

.dataCard:has(.cardMenu [type=checkbox]:checked) {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 24, .058) 0px 15px 25px, rgba(0, 3, 17, .024) 0px 5px 10px;
    z-index: 5
}

.dataCard {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    color: var(--dataCardTextColor);
    background: var(--dataCardBg);
    border: 0px solid rgba(0, 0, 0, 0);
    border-top: 1px solid var(--dataCardBorder);
    border-radius: var(--btnRadius);
    box-shadow: rgba(0, 0, 0, .082) 0px 1px 2px 0px;
    transform: none;
    will-change: transform;
    cursor: pointer;
    transition: var(--transition2)
}

.dataCard:hover::after {
    opacity: 1;
    width: 40%;
    right: 20%;
    transition: var(--transition2)
}

.dataCard::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(189, 189, 189, 0.4117647059) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: var(--transition3)
}

@media (min-width: 568px) {
    .dataCard.sm {
        width: 48.6%
    }
}

@media (min-width: 768px) {
    .dataCard.sm {
        width: 32%
    }
}

@media (min-width: 1024px) {
    .dataCard.sm {
        width: 24.25%
    }
}

@media (min-width: 1280px) {
    .dataCard.sm {
        width: 19.2%
    }
}

@media (min-width: 1800px) {
    .dataCard.sm {
        width: 14%
    }
}

.dataCard.md {
    width: 100%
}

@media (min-width: 1024px) {
    .dataCard.md {
        width: 49%
    }
}

.dataCard.lg {
    width: 100%
}

@media (min-width: 1024px) {
    .dataCard.lg {
        width: 49%
    }
}

@media (min-width: 1280px) {
    .dataCard.lg {
        width: 74%
    }
}

.dataCard.xl {
    width: 100% !important
}

.dataCard:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 24, .089) 0px 15px 25px, rgba(0, 3, 17, .05) 0px 5px 10px;
    z-index: 5;
    transition: var(--transition1)
}

.dataCard:hover .contactActionDiv::after {
    color: var(--darkGray)
}

.dataCard .cardShape {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: var(--btnRadius);
    transform: translate(-50%, -50%);
    overflow: hidden
}

.dataCard .cardShape path {
    fill: var(--dataCardBg)
}

.dataCard .viewBtn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.dataCard .cardMenu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.413rem;
    padding-bottom: 0;
    z-index: 3
}

.dataCard .cardMenu [type=checkbox]:not(:checked) {
    background: rgba(0, 0, 0, 0)
}

.dataCard .cardMenu [type=checkbox] {
    margin-right: 1rem;
    transform: scale(1.4) translateX(3px)
}

.dataCard .cardMenu [type=checkbox]::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -5px;
    transform: scale(3)
}

.dataCard .cardMenu p {
    margin-top: 0
}

.dataCard .cardMenu [status] {
    margin: 0;
    margin-right: auto
}

.dataCard .cardMenu .reminder {
    margin: 0;
    margin-right: auto
}

.dataCard .cardMenu .moreOptions {
    z-index: 5
}

.dataCard .cardMenu .moreOptions .cardMenuMoreIcon, .dataCard .cardMenu .moreOptions .cardMenuCloseIcon {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dataCardTextColor);
    font-size: 30px;
    opacity: .7;
    z-index: 6;
    cursor: pointer;
    transform: none;
    transition: var(--transition1)
}

.dataCard .cardMenu .moreOptions .cardMenuMoreIcon::after, .dataCard .cardMenu .moreOptions .cardMenuCloseIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65px;
    height: 45px;
    transform: translate(-50%, -70%)
}

.dataCard .cardMenu .moreOptions .cardMenuCloseIcon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    color: var(--text-color);
    pointer-events: none;
    border-radius: 100%;
    background-color: var(--dataCardBg);
    transform: rotate(-45deg)
}

.dataCard .cardMenu .moreOptions .optionsDiv {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
    display: block;
    border-radius: var(--dataCardBorderRadius);
    overflow: hidden;
    transform: translateY(100%);
    transition-delay: .3s
}

.dataCard .cardMenu .moreOptions .optionsDiv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: var(--dataCardBg);
    backdrop-filter: blur(20px);
    border-radius: 100%;
    transform: translateY(100%);
    transition: var(--transition1)
}

.dataCard .cardMenu .moreOptions .optionsDiv .options {
    width: 100%;
    height: min-content;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    flex-direction: column;
    padding: .7075rem 0;
    padding-bottom: 130px;
    margin: auto;
    opacity: 0;
    transition: var(--transition1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.dataCard .cardMenu .moreOptions .optionsDiv .options::-webkit-scrollbar {
    display: none
}

.dataCard .cardMenu .moreOptions .optionsDiv .options::-webkit-scrollbar-track, .dataCard .cardMenu .moreOptions .optionsDiv .options::-webkit-scrollbar-thumb, .dataCard .cardMenu .moreOptions .optionsDiv .options::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 0, 0, 0);
    cursor: grab;
    opacity: 0
}

.dataCard .cardMenu .moreOptions .optionsDiv .options a {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .dataCard .cardMenu .moreOptions .optionsDiv .options a {
        font-size: 1rem
    }
}

.dataCard .cardMenu .moreOptions .optionsDiv .options a:not(.filledBtn,.outlinedBtn,.tonedBtn) {
    color: var(--text-color);
    width: 100%;
    padding: 15px .7075rem;
    text-align: center;
    justify-content: center;
    gap: 0 10px;
    cursor: pointer;
    transition: var(--transition1)
}

.dataCard .cardMenu .moreOptions .optionsDiv .options a:not(.filledBtn,.outlinedBtn,.tonedBtn):hover {
    opacity: 1
}

.dataCard .cardMenu .moreOptions .optionsDiv .options a:not(.filledBtn,.outlinedBtn,.tonedBtn):hover i {
    opacity: 1
}

.dataCard .cardMenu .moreOptions .optionsDiv .options a:not(.filledBtn,.outlinedBtn,.tonedBtn) i {
    opacity: .5
}

.dataCard .cardMenu .moreOptions .optionsDiv .options .filledBtn, .dataCard .cardMenu .moreOptions .optionsDiv .options .outlinedBtn, .dataCard .cardMenu .moreOptions .optionsDiv .options .tonedBtn {
    width: calc(100% - 50px);
    margin: 5px 25px;
    padding: 1rem .8rem
}

@media (min-width: 768px) {
    .dataCard .cardMenu .moreOptions .optionsDiv .options .filledBtn, .dataCard .cardMenu .moreOptions .optionsDiv .options .outlinedBtn, .dataCard .cardMenu .moreOptions .optionsDiv .options .tonedBtn {
        padding: .75rem .8rem
    }
}

.dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 85px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--bg-color);
    padding: 15px .7075rem;
    overflow-x: scroll;
    overflow-y: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker::-webkit-scrollbar {
    display: none
}

.dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker::-webkit-scrollbar-track, .dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker::-webkit-scrollbar-thumb, .dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 0, 0, 0);
    cursor: grab;
    opacity: 0
}

.dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker span {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 4px solid var(--dataCardBg);
    margin-right: .7075rem;
    cursor: pointer;
    transition: var(--transition1)
}

.dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker span:hover {
    transform: scale(1.3);
    box-shadow: rgba(0, 0, 0, .1) 0px 4px 6px -1px, rgba(0, 0, 0, .06) 0px 2px 4px -1px
}

.dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker span:hover + span {
    transform: scale(1.1)
}

.dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker span:hover + span, .dataCard .cardMenu .moreOptions .optionsDiv .cardColorPicker span:has(span:hover) {
    transform: scale(1.1)
}

.dataCard .cardMenu .moreOptionsIntro .cardMenuCloseIcon {
    z-index: 6;
    opacity: .4;
    pointer-events: all;
    transform: none
}

.dataCard .cardMenu .moreOptionsIntro .cardMenuMoreIcon {
    opacity: 0;
    transform: rotate(45deg)
}

.dataCard .cardMenu .moreOptionsIntro .optionsDiv {
    transform: none;
    height: 100%;
    transition-delay: 0 !important
}

.dataCard .cardMenu .moreOptionsIntro .optionsDiv::before {
    opacity: 1;
    transform: none;
    border-radius: var(--dataCardBorderRadius);
    transition-delay: 0 !important
}

.dataCard .cardMenu .moreOptionsIntro .optionsDiv .options {
    opacity: 1;
    transition-delay: .1s
}

.dataCard .cardMenu .moreOptionsIntro .optionsDiv .options a {
    opacity: 1;
    transform: none;
    transition: var(--transition1) !important;
    transition-delay: .2s !important
}

.dataCard .cardMenu .moreOptionsIntro .optionsDiv .cardColorPicker {
    opacity: 1;
    transform: none;
    transition-delay: .3s !important
}

.dataCard .cardMenu .moreBtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65px;
    height: 45px;
    transform: translate(-50%, -70%)
}

.dataCard .cardMenu .moreBtn .moreIcon {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    color: inherit;
    opacity: .8
}

@media (min-width: 768px) {
    .dataCard .cardMenu .moreBtn .moreIcon {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.dataCard .cardMenu .moreBtn .btnMenuDiv {
    top: 0;
    right: -15px
}

.dataCard .cardMenu .moreBtn .btnMenuDiv .btnMenu {
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius)
}

.dataCard .imageDiv {
    padding-top: calc(var(--card-image-ratio) * 100%);
    width: calc(100% - 16px);
    background-color: var(--lightGray);
    margin: 8px;
    margin-bottom: 0;
    border-radius: calc(var(--dataCardBorderRadius) - 8px);
    overflow: hidden
}

.dataCard .imageDiv:hover img {
    object-fit: contain
}

.dataCard .imageDiv img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    transition: var(--transition1)
}

.dataCard .labelTitle {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
    color: var(--text-color);
    font-size: .878rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-align: center;
    opacity: .6
}

.dataCard :is(h1,h2,h3,h4,h5,p) {
    color: inherit;
    width: 100%;
    display: block
}

.dataCard :is(h1,h2,h3,h4,h5,p):empty {
    display: none
}

.dataCard :is(h1,h2,h3,h4,h5,p)::before {
    color: inherit;
    opacity: .8
}

.dataCard .avatarView {
    margin: 0 auto;
    margin-bottom: 1rem
}

.dataCard .centerContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.413rem;
    padding-top: 0
}

.dataCard .content {
    padding: 1.413rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 2%;
    margin-bottom: auto
}

.dataCard .content .label {
    margin: 0;
    opacity: .75;
    margin-bottom: 4px
}

.dataCard .content .title {
    margin: 0;
    color: inherit;
    font-weight: 500;
    line-height: 1.1;
    text-transform: capitalize
}

.dataCard .content .text {
    margin-top: .5rem;
    color: inherit;
    opacity: .8;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3
}

@media (min-width: 768px) {
    .dataCard .content .text {
        font-size: .878rem
    }
}

.dataCard .content .dateText {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: .733rem;
    text-transform: uppercase;
    letter-spacing: .5px
}

.dataCard .content .contactActionList {
    width: 100%;
    margin: 0
}

.dataCard .content .contactActionList .contactList {
    width: 100%;
    color: inherit
}

.dataCard .content .contactActionList .contactList a {
    color: var(--dataCardTextColor);
    font-weight: 400
}

.dataCard .content .tags {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.dataCard .content .tags a, .dataCard .content .tags span, .dataCard .content .tags div {
    font-size: .878rem;
    font-weight: 400;
    text-transform: capitalize;
    padding: 5px 10px;
    border-radius: var(--radius);
    line-height: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .0980392157)
}

.dataCard .content .tags a::before, .dataCard .content .tags span::before, .dataCard .content .tags div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dataCardTextColor);
    backdrop-filter: blur(10px);
    opacity: .05
}

.dataCard .content .tags a {
    z-index: 2
}

.dataCard .content .dropDownDiv {
    z-index: 2
}

.dataCard .content .dropDownDiv .dropList {
    padding: 10px 0
}

.dataCard .content .dropDownDiv .dropList::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    opacity: .1;
    background: ar(--dataCardTextColor);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.165) 0%, var(--dataCardTextColor) 31%, rgba(255, 255, 255, 0.157) 100%)
}

.dataCard .content .dropDownDiv .dropList .dropBox {
    padding: 0
}

.dataCard .content .dropDownDiv .dropList .dropBox .title {
    color: inherit;
    font-weight: 400
}

.dataCard .content .dropDownDiv .dropList .dropBox .dropIcon {
    opacity: .5
}

.dataCard .content .dropDownDiv .dropList .dropContent {
    padding: .7075rem 0
}

.dataCard .content .dropDownDiv .dropList .dropContent p {
    opacity: .95;
    font-size: .878rem
}

.dataCard .content .detailsDiv {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 2%
}

.dataCard .content .detailsDiv .details {
    min-width: 48%;
    display: flex;
    flex-direction: column;
    gap: 3px 0
}

.dataCard .content .detailsDiv .details .label {
    margin: 0;
    opacity: .8;
    font-size: .733rem;
    font-weight: 400
}

.dataCard .content .detailsDiv .details p {
    margin: 0;
    line-height: 1.1
}

.dataCard .content .detailsDiv .details .value {
    margin: 0;
    font-size: .937rem;
    font-weight: 500;
    text-transform: capitalize
}

.dataCard .content .statusList {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    border-left: 1px solid var(--borderGray);
    padding-left: 1.413rem
}

.dataCard .content .statusList li {
    color: var(--textGray);
    font-size: .937rem;
    font-weight: 400
}

.dataCard .content .statusList li::after {
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 5px;
    left: -29px;
    font-size: 9px;
    z-index: 1
}

.dataCard .content .statusList li::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -34px;
    width: 15px;
    height: 15px;
    border-radius: var(--radius);
    border: 2px solid var(--white);
    background-color: var(--lightGray)
}

.dataCard .content .statusList li.completed {
    color: var(--black)
}

.dataCard .content .statusList li.completed::after {
    content: "";
    color: var(--green)
}

.dataCard .content .statusList li.completed::before {
    background-color: #e8f6e8;
    border: 2px solid #d6f0d6;
    outline: 1px solid var(--green)
}

.dataCard .content .statusList li.active {
    color: var(--black)
}

.dataCard .content .statusList li.active:before {
    background-color: var(--green)
}

.dataCard .content .statusList li.active::after {
    content: "";
    color: var(--white)
}

.dataCard .content .highlights {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 1rem;
    padding-top: 1rem
}

.dataCard .content .highlights::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--text-color) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .125
}

.dataCard .content .highlights p {
    margin: 0
}

.dataCard .content .profileMinimal .name {
    color: var(--dataCardTextColor)
}

.dataCard .content .profileMinimal p {
    color: var(--dataCardTextColor)
}

.dataCard .content .inputDiv input :not([typr=radio],[typr=checkbox]), .dataCard .content .inputDiv selector selected, .dataCard .content .inputDiv textarea {
    border-radius: var(--radius)
}

.dataCard .content .inputDiv textarea {
    height: 70px;
    min-height: 70px
}

.dataCard .content .btnDiv {
    padding: 0;
    padding-top: .7075rem
}

.dataCard .content .btnDiv::before {
    display: none
}

.dataCard .btnDiv {
    width: 100%;
    display: flex;
    gap: 8px;
    margin: 0;
    margin-top: auto;
    padding: .7075rem;
    padding-top: 1rem;
    z-index: 2
}

.dataCard .btnDiv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--text-color) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .075
}

.dataCard .btnDiv a, .dataCard .btnDiv button {
    flex: 1;
    margin: 0
}

.dataCard .bottomDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem .7075rem;
    margin-top: auto
}

.dataCard .cardSummaryCountList {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 1rem
}

.dataCard .cardSummaryCountList li .label {
    margin: 0;
    display: block;
    color: inherit;
    font-size: .733rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .85
}

.dataCard .cardSummaryCountList li .value {
    margin: 0;
    margin-top: 5px;
    font-weight: 400;
    line-height: 1
}

.dataCard .cardSummaryCountList li .value:empty {
    display: block
}

.dataCard .cardSummaryCountList li .value:empty:before {
    content: "0";
    opacity: .5
}

.dataCard .contactActionDiv {
    margin-top: auto;
    display: flex;
    padding-right: 80px
}

@media (min-width: 768px) {
    .dataCard .contactActionDiv {
        display: none
    }
}

.dataCard .contactActionDiv::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    opacity: .25;
    transition: var(--transition1)
}

.dataCard .contactActionDiv a {
    height: 60px;
    flex: 1;
    display: flex;
    color: var(--dataCardTextColorMob);
    background-color: var(--dataCardContactActionBgMob);
    cursor: pointer;
    transition: var(--transition1);
    overflow: hidden;
    z-index: 1
}

@media (min-width: 768px) {
    .dataCard .contactActionDiv a {
        color: var(--dataCardTextColorWeb);
        background-color: var(--dataCardContactActionBgWeb)
    }
}

.dataCard .contactActionDiv a:nth-last-child(1) {
    border-radius: 0 2rem 0 0
}

.dataCard .contactActionDiv a img {
    width: 30px
}

.dataCard .contactActionDiv a i, .dataCard .contactActionDiv a img {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    margin: auto;
    cursor: pointer;
    transition: var(--transition1)
}

.createDataCard {
    min-height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--dataCardTextColor);
    background-color: var(--inputColor1);
    border: 2px dashed var(--inputColor2);
    border-radius: var(--dataCardBorderRadius);
    box-shadow: none;
    margin-bottom: 20px;
    transform: none;
    will-change: transform;
    cursor: pointer;
    transition: var(--transition3)
}

.createDataCard:hover::after {
    opacity: 1;
    width: 40%;
    right: 20%;
    transition: var(--transition2)
}

.createDataCard::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(189, 189, 189, 0.4117647059) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: var(--transition3)
}

.createDataCard:hover {
    transform: none;
    box-shadow: none;
    border: 2px dashed var(--inputColor5);
    z-index: 5;
    transition: var(--transition1)
}

.createDataCard .viewBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit
}

.createDataCard .viewBtn i {
    color: var(--inputColor5);
    margin-right: 1rem
}

.dataSection {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: var(--headerHeight)
}

.dataSection .dataViewIntro {
    display: flex;
    align-items: flex-start
}

.dataSection .dataNavSection {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

@media (min-width: 768px) {
    .dataSection .dataNavSection {
        flex-wrap: nowrap
    }
}

.dataSection .dataNavSection .sortSection {
    width: 100%;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.dataSection .dataNavSection .sortSection::-webkit-scrollbar {
    display: none
}

.dataSection .dataNavSection .sortSection::-webkit-scrollbar-track, .dataSection .dataNavSection .sortSection::-webkit-scrollbar-thumb, .dataSection .dataNavSection .sortSection::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 0, 0, 0);
    cursor: grab;
    opacity: 0
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection {
        flex: 1;
        overflow: auto
    }
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection {
        width: auto;
        margin-right: .7075rem
    }
}

.dataSection .dataNavSection .sortSection:empty {
    display: none
}

.dataSection .dataNavSection .sortSection:hover .activeSortMenu, .dataSection .dataNavSection .sortSection:hover .activeTabMenu {
    opacity: .5
}

.dataSection .dataNavSection .sortSection a {
    min-width: min-content;
    display: inline-flex;
    align-items: center;
    color: var(--text-color);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: var(--headerTextWeightMob);
    padding: 15px 10px;
    border-radius: var(--btnRadius);
    white-space: nowrap;
    overflow: hidden;
    text-transform: capitalize;
    transition: var(--transition1);
    opacity: .4;
    overflow: hidden;
    cursor: pointer
}

.dataSection .dataNavSection .sortSection a:nth-child(1) {
    clear: both;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    width: auto
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection a:nth-child(1) {
        padding-left: 7px
    }
}

.dataSection .dataNavSection .sortSection a:nth-last-child(1) {
    clear: both;
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    width: auto
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection a:nth-last-child(1) {
        padding-right: 7px
    }
}

@media (min-width: 568px) {
    .dataSection .dataNavSection .sortSection a {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
        padding: 10px 7px
    }
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection a {
        font-size: 1rem
    }
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection a {
        font-size: .937rem;
        font-weight: var(--headerTextWeightWeb)
    }
}

@media (min-width: 1280px) {
    .dataSection .dataNavSection .sortSection a {
        font-size: 1rem
    }
}

.dataSection .dataNavSection .sortSection a:hover {
    opacity: 1
}

.dataSection .dataNavSection .sortSection a span {
    margin-left: 4px;
    min-width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .937rem;
    font-weight: 400;
    color: var(--shade-4);
    background: var(--bg-color);
    border-radius: 100%
}

.dataSection .dataNavSection .sortSection .activeSortMenu, .dataSection .dataNavSection .sortSection .activeTabMenu {
    opacity: 1
}

.dataSection .dataNavSection .sortSection .activeSortMenu:hover, .dataSection .dataNavSection .sortSection .activeTabMenu:hover {
    opacity: 1
}

.dataSection .dataNavSection .sortSection selector {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f
}

.dataSection .dataNavSection .sortSection selector::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

.dataSection .dataNavSection .sortSection selector::before {
    border-radius: 3rem
}

.dataSection .dataNavSection .sortSection selector selected {
    min-width: 150px;
    border-radius: 3rem;
    background-color: rgba(0, 0, 0, 0);
    border: none
}

.dataSection .dataNavSection .sortSection selector selected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .1
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection selector selected::before {
        opacity: .5;
        border-radius: 3rem;
        background-color: var(--inputColor1);
        border: 1px solid rgba(0, 0, 0, 0)
    }
}

.dataSection .dataNavSection .sortSection selector selected::after {
    color: var(--viewDataNavColor);
    right: 10px
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection selector selected::after {
        color: rgba(134, 134, 134, .8431372549)
    }
}

.dataSection .dataNavSection .sortSection selector selected items {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: inherit
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection selector selected items {
        border-radius: 3rem;
        border: 1px solid rgba(0, 0, 0, 0)
    }
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection selector selected items item {
        color: var(--black);
        font-size: 1rem;
        font-weight: 500
    }
}

.dataSection .dataNavSection .sortSection selector selected item {
    color: var(--viewDataNavColor);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: var(--headerTextWeightMob);
    padding: .5rem .7075rem
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection selector selected item {
        color: rgba(134, 134, 134, .8431372549);
        font-size: .937rem;
        padding: .7rem .7075rem
    }
}

.dataSection .dataNavSection .sortSection .sortDiv {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: clip
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection .sortDiv {
        padding: 0;
        width: auto
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .tabSlideList {
    height: 68px;
    display: flex;
    align-items: center;
    padding-left: 1rem
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection .sortDiv .tabSlideList {
        padding: 0
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .tabSlideList:empty {
    display: none
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow::before {
        display: none
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow::after {
        display: none
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindowClose, .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup {
        position: relative;
        bottom: unset;
        left: unset;
        height: auto;
        overflow: unset
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow {
    height: 100px;
    display: flex
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow {
        position: relative;
        bottom: unset;
        left: unset;
        height: 100%;
        padding: 0;
        border: none;
        box-shadow: none;
        transform: none;
        overflow: unset
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a {
    overflow: initial;
    flex: 1;
    display: flex;
    padding: .65rem 1rem;
    color: var(--textGray);
    cursor: pointer;
    transition: var(--transition1);
    border-right: 1px solid var(--lightGray)
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:not([data-tooltip]):before {
    display: none
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:focus {
    z-index: 999
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:focus::before, .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:hover {
        z-index: 999
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:hover::before, .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a {
        overflow: initial;
        border-radius: 0;
        width: 55px;
        background-color: rgba(0, 0, 0, 0)
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:not([data-tooltip]):before {
        display: none
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        right: 50%;
        transform: translateX(50%);
        z-index: 103;
        display: flex;
        align-items: center;
        color: var(--lightGray);
        font-size: .733rem;
        font-weight: 400;
        letter-spacing: .25px;
        text-transform: capitalize;
        background: var(--darkGray);
        backdrop-filter: blur(10px);
        padding: .5rem .76rem;
        border-radius: .25rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 50%;
        transform: translateX(50%) rotate(180deg);
        width: 0;
        height: 0;
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-bottom: 5px solid var(--darkGray);
        pointer-events: none;
        opacity: 0
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:focus {
        z-index: 999
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:focus::before, .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:focus::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

@media (min-width: 768px)and (min-width: 768px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:hover {
        z-index: 999
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:hover::before, .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a::before {
        bottom: unset;
        right: unset;
        top: 100%;
        left: 50%;
        transform: none;
        transform: translateX(-50%)
    }

    .dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a::after {
        top: unset;
        right: unset;
        bottom: 0;
        left: 50%;
        transform: none;
        transform: translateX(-50%)
    }
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:nth-last-child(1) {
    border-right: none
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a:hover {
    color: var(--highlight);
    border-radius: 0
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow a i {
    margin: auto;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    cursor: pointer
}

.dataSection .dataNavSection .sortSection .sortDiv .sortPopup .popupWindow .activeSwitch {
    color: var(--color1);
    background-color: var(--white)
}

.dataSection .dataNavSection .dataTabMenu {
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--dataToolBg)
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu {
        width: auto;
        gap: 0 7px;
        padding-right: 1rem;
        background: rgba(0, 0, 0, 0);
        margin-left: auto
    }
}

.dataSection .dataNavSection .dataTabMenu::before, .dataSection .dataNavSection .dataTabMenu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%)
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu::before, .dataSection .dataNavSection .dataTabMenu::after {
        display: none
    }
}

.dataSection .dataNavSection .dataTabMenu::after {
    top: unset;
    bottom: 0
}

.dataSection .dataNavSection .dataTabMenu .filterBtn, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *), .dataSection .dataNavSection .dataTabMenu .sortBtn {
    flex: 1;
    height: 50px;
    color: var(--dataToolColor);
    transition: var(--transition1);
    cursor: pointer
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu .filterBtn, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *), .dataSection .dataNavSection .dataTabMenu .sortBtn {
        width: var(--box-size);
        min-width: var(--box-size);
        height: var(--box-size);
        border-radius: 100%;
        background: var(--dataToolBg)
    }
}

.dataSection .dataNavSection .dataTabMenu .filterBtn:nth-last-child(1) i::after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *):nth-last-child(1) i::after, .dataSection .dataNavSection .dataTabMenu .sortBtn:nth-last-child(1) i::after {
    display: none
}

.dataSection .dataNavSection .dataTabMenu .filterBtn:hover .icon, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *):hover .icon, .dataSection .dataNavSection .dataTabMenu .sortBtn:hover .icon {
    color: var(--text-color)
}

.dataSection .dataNavSection .dataTabMenu .filterBtn:focus, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *):focus, .dataSection .dataNavSection .dataTabMenu .sortBtn:focus {
    background: var(--text-color);
    color: var(--bg-color)
}

.dataSection .dataNavSection .dataTabMenu .filterBtn .icon, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *) .icon, .dataSection .dataNavSection .dataTabMenu .sortBtn .icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    color: inherit;
    cursor: pointer;
    pointer-events: none
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu .filterBtn .icon, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *) .icon, .dataSection .dataNavSection .dataTabMenu .sortBtn .icon {
        font-size: 1rem
    }
}

.dataSection .dataNavSection .dataTabMenu .filterBtn .icon::after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *) .icon::after, .dataSection .dataNavSection .dataTabMenu .sortBtn .icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .85
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu .filterBtn .icon::after, .dataSection .dataNavSection .dataTabMenu .switchViewBtn:not(.btnMenuDiv *) .icon::after, .dataSection .dataNavSection .dataTabMenu .sortBtn .icon::after {
        display: none
    }
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow {
        min-width: 200px;
        padding: 10px 0
    }
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow a {
    width: 100%;
    display: flex;
    text-align: center;
    flex: 1;
    padding: 10px .7075rem;
    cursor: pointer;
    transition: var(--transition1)
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow a:hover {
    color: var(--text-color)
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow a:hover i {
    color: var(--highlight)
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow a:nth-last-child(1)::after {
    display: none
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow a::after {
    content: "";
    position: absolute;
    top: unset;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%)
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow a i {
    width: auto;
    height: auto
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow .activeSwitch {
    color: var(--text-color)
}

.dataSection .dataNavSection .dataTabMenu .sortBtn .moreOptionView .popupWindow .activeSwitch i {
    color: var(--highlight)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn {
    padding: 0
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv {
    top: 100%;
    padding-top: 10px;
    padding-right: .7075rem;
    min-width: 200px
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv {
        right: -1rem
    }
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu {
    padding: 8px
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu a {
    padding: 1rem .7075rem
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: calc(var(--radius) - 5px);
    opacity: 0;
    transition: var(--transition1)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu a:hover {
    background-color: var(--shade-2)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu a:hover::before {
    opacity: .15
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu a i {
    width: auto;
    margin-right: .7075rem;
    color: var(--shade-4)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu a p {
    margin: 0;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    cursor: pointer
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu a p {
        font-size: .937rem
    }
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu .activeSwitch i {
    color: var(--inputColor5)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .btnMenuDiv .btnMenu .activeSwitch::before {
    opacity: .15;
    background-color: var(--shade-4)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    padding-right: 0;
    padding-bottom: 0
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow {
        min-width: max-content;
        flex-direction: column;
        gap: 0;
        padding: 10px 0
    }
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    flex: 1;
    border-radius: var(--btnRadius);
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a {
        width: 100%;
        min-height: auto;
        padding: 10px .7075rem;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start
    }
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a:hover {
    color: var(--text-color)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a:hover i {
    color: var(--highlight)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a:nth-last-child(1)::after {
    display: none
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .85
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a::after {
        top: unset;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%)
    }
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow a i {
    width: auto;
    height: auto
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow .activeSwitch {
    color: var(--text-color)
}

.dataSection .dataNavSection .dataTabMenu .switchViewBtn .moreOptionView .popupWindow .activeSwitch i {
    color: var(--highlight)
}

.dataSection .dataNavSection .dataFilter {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.dataSection .dataNavSection .dataFilter.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.dataSection .dataNavSection .dataFilter .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.dataSection .dataNavSection .dataFilter .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .popupWindow::before {
        display: none
    }
}

.dataSection .dataNavSection .dataFilter .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .popupWindow::after {
        display: none
    }
}

.dataSection .dataNavSection .dataFilter .popupWindowClose, .dataSection .dataNavSection .dataFilter .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter {
        position: relative;
        top: unset;
        right: unset;
        z-index: 100;
        width: auto;
        height: auto;
        border: none;
        border-radius: 0;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: none;
        overflow: unset
    }
}

.dataSection .dataNavSection .dataFilter .popupWindow {
    padding: 0
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .popupWindow {
        position: relative;
        bottom: unset;
        left: unset;
        width: auto;
        max-height: 100%;
        display: flex;
        transform: none;
        padding: .65rem 1rem;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: unset
    }
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .popupWindow::after {
        display: none
    }
}

.dataSection .dataNavSection .dataFilter .searchDiv {
    padding: 0 20px;
    padding-bottom: var(--section-space-y);
    padding-top: 1.6rem;
    width: 100%;
    border-radius: 3rem
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .searchDiv {
        max-width: 300px;
        padding: 0
    }
}

.dataSection .dataNavSection .dataFilter .searchDiv::before {
    border-radius: 3rem
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar {
    width: 100%;
    display: flex;
    background-color: var(--dataToolBg);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius);
    box-shadow: none;
    transition: var(--transition2)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .searchDiv .searchBar {
        min-width: 300px
    }
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar:hover selector selected item {
    opacity: 1
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar input {
    height: 100%;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: inherit;
    line-height: 1.3;
    letter-spacing: .5px;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar input {
        font-size: .937rem
    }
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector::placeholder, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar input::placeholder {
    font-size: inherit
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector {
    border-right: 1px solid rgba(0, 0, 0, 0)
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .85
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector item {
    min-height: var(--box-size);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector item {
        font-size: .937rem
    }
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector selected {
    border-radius: 3rem 0 0 3rem;
    border: 1px solid rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0)
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector selected item {
    opacity: .7;
    letter-spacing: .5px;
    padding: 0 1rem;
    padding-right: .7075rem
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar selector selected::after {
    top: 55%;
    right: 0
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar input {
    width: 100%;
    height: unset;
    padding: 0 .7075rem;
    padding-right: 50px;
    border: none;
    box-shadow: none
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar input::placeholder {
    color: var(--text-color);
    opacity: .7;
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    transition: var(--transition1);
    letter-spacing: .5px
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar input:hover, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar input:focus, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar input:active, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar input:visited {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar input:focus + #searchButton, .dataSection .dataNavSection .dataFilter .searchDiv .searchBar input:active + #searchButton {
    opacity: 1;
    color: var(--white);
    background-color: var(--highlight);
    transition: all .2s ease-in
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar #searchButton {
    color: var(--text-color);
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    color: var(--gray);
    background-color: rgba(0, 0, 0, 0);
    margin: 0;
    width: 45px;
    min-width: 45px;
    height: 45px;
    border-radius: 100%;
    opacity: .5;
    transition: var(--transition1)
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar #searchButton i {
    top: 0;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    transform: none
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilter .searchDiv .searchBar #searchButton i {
        font-size: 1rem
    }
}

.dataSection .dataNavSection .dataFilter .searchDiv .searchBar:has(selector) input {
    padding-left: 10px
}

.dataSection .dataNavSection .dataFilter .searchResult {
    background-color: var(--bg-color);
    z-index: 1
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .dataFilter .searchResult {
        display: none;
        min-height: 100%
    }
}

.dataSection .dataNavSection .dataFilter .searchResult:empty {
    display: none
}

.dataSection .dataNavSection .dataFilter .searchResult:before {
    display: block;
    color: var(--shade-4);
    font-size: .733rem;
    font-weight: 500;
    padding-left: 0;
    margin-bottom: 1rem
}

.dataSection .dataNavSection .dataFilter .searchResult a {
    display: flex;
    color: var(--shade-4);
    padding: .75rem 2rem;
    padding-left: 3.9975rem;
    cursor: pointer;
    transition: var(--transition1)
}

.dataSection .dataNavSection .dataFilter .searchResult a:empty {
    display: none
}

.dataSection .dataNavSection .dataFilter .searchResult a:hover {
    background-color: var(--shade-2)
}

.dataSection .dataNavSection .dataFilter .searchResult a::before {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shade-4);
    content: "";
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.dataSection .dataNavSection .filterPopup {
    width: 100%;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    transition: var(--transition1);
    pointer-events: none;
    padding-bottom: 100px;
    overflow-y: auto;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 300;
        width: calc(100vw - (var(--menuBarWidth) + 10px));
        height: 0;
        max-height: 100%;
        margin: 0;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        background: rgba(188, 188, 188, .0705882353);
        backdrop-filter: blur(32px);
        box-shadow: none;
        overflow: hidden
    }
}

.dataSection .dataNavSection .filterPopup .btnDiv {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 221;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
    padding: 1rem;
    background-color: var(--bg-color);
    pointer-events: all
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .btnDiv {
        position: relative;
        bottom: unset;
        left: unset;
        width: auto;
        height: 100%;
        padding: .7rem .7075rem;
        background-color: rgba(0, 0, 0, 0);
        align-items: center;
        flex-direction: row-reverse;
        border: none;
        margin-left: auto
    }
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn {
    height: clamp(45px, 6vw, 48px);
    font-size: .937rem;
    padding: 0 20px;
    font-weight: 500;
    color: var(--color1);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--color1);
    font-weight: 500;
    margin: 0;
    border: 1px solid var(--borderGray);
    background-color: var(--bg-color)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn:hover {
    opacity: .8
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.secondary {
    border: 1px solid var(--color2)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.tertiary {
    border: 1px solid var(--color3)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.black {
    color: var(--black);
    border: 1px solid var(--black)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.white {
    color: var(--white);
    border: 1px solid var(--white)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.gray {
    color: var(--textGray);
    border: 1px solid var(--textGray)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.red {
    color: var(--red);
    border: 1px solid var(--red)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.green {
    color: var(--green);
    border: 1px solid var(--green)
}

.dataSection .dataNavSection .filterPopup #cancelFilterBtn.blue {
    color: var(--blue);
    border: 1px solid var(--blue)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup #cancelFilterBtn {
        width: 48px;
        min-width: 48px;
        height: 48px;
        color: var(--bg-color)
    }

    .dataSection .dataNavSection .filterPopup #cancelFilterBtn::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        color: var(--color1);
        content: "";
        font-family: var(--icon-family) !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: inherit
    }
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn {
    height: clamp(45px, 6vw, 48px);
    font-size: .937rem;
    padding: 0 20px;
    color: var(--white);
    font-weight: 500;
    filter: brightness(100%);
    background-color: var(--color1);
    border: 1px solid var(--color1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    margin: 0
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn:hover {
    color: var(--white);
    filter: brightness(110%);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    transition: filter .5s ease-in, background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn:active {
    filter: brightness(105%)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn:visited {
    filter: brightness(90%)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.secondary {
    background-color: var(--color2);
    border: 1px solid var(--color2)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.tertiary {
    background-color: var(--color3);
    border: 1px solid var(--color3)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.black {
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--darkGray)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.white {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--borderGray)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.red {
    color: var(--white);
    background-color: var(--red);
    border: 1px solid var(--red)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.green {
    color: var(--white);
    background-color: var(--green);
    border: 1px solid var(--green)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.blue {
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid var(--blue)
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.elevated {
    box-shadow: 0 4px 4px rgba(8, 8, 8, .08), 0 1px 2px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .048), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn.elevated:hover {
    box-shadow: 0 1px 1px rgba(8, 8, 8, .08), 0 1px 1px rgba(8, 8, 8, .2), inset 0 6px 12px rgba(255, 255, 255, .12), inset 0 1px 1px rgba(255, 255, 255, .2) !important
}

.dataSection .dataNavSection .filterPopup #applyFilterBtn .loader::before {
    border: 2px solid var(--white)
}

.dataSection .dataNavSection .filterPopup a, .dataSection .dataNavSection .filterPopup button {
    height: clamp(53px, 6.5vw, 56px);
    font-size: 1rem;
    padding: 0 24px;
    margin: 0;
    width: 50%;
    min-width: 80px
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup a, .dataSection .dataNavSection .filterPopup button {
        width: 100%;
        flex-direction: row-reverse
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv {
    width: 100%;
    min-height: 70px;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    background-color: var(--bg-color);
    border-radius: 0;
    transition: var(--transition1);
    pointer-events: all
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv {
        margin: 0;
        flex: 1;
        width: 200px;
        min-width: 200px;
        height: auto;
        min-height: 70px;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 0
    }
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv:nth-child(1) label {
        padding-left: .7075rem
    }
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv:nth-child(1) selector selected {
        padding-left: .7075rem
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .85
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv::after {
        width: 1px;
        height: 100%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%)
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv:nth-child(1)::after {
    display: none
}

.dataSection .dataNavSection .filterPopup .inputDiv label {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    position: absolute;
    top: .9rem;
    left: 3px;
    width: 100%;
    height: auto;
    display: inline-block;
    font-size: .667rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv label {
        top: 15px;
        font-size: .6rem;
        padding: 0 .5rem
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv input, .dataSection .dataNavSection .filterPopup .inputDiv select, .dataSection .dataNavSection .filterPopup .inputDiv selector {
    min-width: 100px;
    min-height: 70px;
    background-color: rgba(0, 0, 0, 0);
    padding: .5rem .7075rem;
    padding-top: 22px;
    color: var(--text-color);
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    text-indent: 1px;
    text-overflow: ""
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .filterPopup .inputDiv input, .dataSection .dataNavSection .filterPopup .inputDiv select, .dataSection .dataNavSection .filterPopup .inputDiv selector {
        font-size: 1rem
    }
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv input, .dataSection .dataNavSection .filterPopup .inputDiv select, .dataSection .dataNavSection .filterPopup .inputDiv selector {
        width: 100%;
        padding: 0 .5rem;
        padding-top: .75rem
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv input:nth-child(1), .dataSection .dataNavSection .filterPopup .inputDiv select:nth-child(1), .dataSection .dataNavSection .filterPopup .inputDiv selector:nth-child(1) {
    margin-left: 2px
}

.dataSection .dataNavSection .filterPopup .inputDiv input:hover, .dataSection .dataNavSection .filterPopup .inputDiv input:focus, .dataSection .dataNavSection .filterPopup .inputDiv input:active, .dataSection .dataNavSection .filterPopup .inputDiv input:visited, .dataSection .dataNavSection .filterPopup .inputDiv select:hover, .dataSection .dataNavSection .filterPopup .inputDiv select:focus, .dataSection .dataNavSection .filterPopup .inputDiv select:active, .dataSection .dataNavSection .filterPopup .inputDiv select:visited, .dataSection .dataNavSection .filterPopup .inputDiv selector:hover, .dataSection .dataNavSection .filterPopup .inputDiv selector:focus, .dataSection .dataNavSection .filterPopup .inputDiv selector:active, .dataSection .dataNavSection .filterPopup .inputDiv selector:visited {
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: none
}

.dataSection .dataNavSection .filterPopup .inputDiv selector {
    padding: 0
}

.dataSection .dataNavSection .filterPopup .inputDiv selector selected {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    min-height: inherit;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    padding-top: 22px;
    padding-bottom: 16px;
    border-radius: 0;
    box-shadow: none
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv selector selected {
        padding: 0 .5rem;
        padding-top: .75rem
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv selector selected::after {
    top: 60%;
    right: 0
}

.dataSection .dataNavSection .filterPopup .inputDiv selector selected items {
    width: 100%;
    color: var(--text-color)
}

.dataSection .dataNavSection .filterPopup .inputDiv selector selected items item:not([value]) {
    padding: 0
}

.dataSection .dataNavSection .filterPopup .inputDiv selector selected items item {
    padding: 0
}

.dataSection .dataNavSection .filterPopup .inputDiv selector selected items item input {
    min-width: auto;
    min-height: auto;
    padding: 0
}

.dataSection .dataNavSection .filterPopup .inputDiv selector options {
    position: fixed;
    top: unset !important;
    bottom: 0 !important;
    box-shadow: none;
    border-radius: 0
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv selector options {
        position: absolute;
        bottom: unset !important;
        top: 100% !important;
        border-radius: var(--inputRadius)
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv selector options item {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    min-height: 70px
}

@media (min-width: 1280px) {
    .dataSection .dataNavSection .filterPopup .inputDiv selector options item {
        min-height: auto;
        padding: .7rem 1rem
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv selector item {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .filterPopup .inputDiv selector item {
        font-size: 1rem
    }
}

.dataSection .dataNavSection .filterPopup .inputDiv .selectorIntro options {
    box-shadow: 0px 0 100vh 100vh rgba(0, 0, 0, .39), 0px 1px 8px 1px rgba(0, 0, 0, .39)
}

@media (min-width: 768px) {
    .dataSection .dataNavSection .filterPopup .inputDiv .selectorIntro options {
        box-shadow: rgba(255, 255, 255, .1) 0px 1px 1px 0px inset, rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
    }
}

.dataSection .dataNavSection .dataFilterIntro {
    left: 0
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilterIntro {
        height: auto;
        left: 0;
        right: 0;
        opacity: 1
    }
}

.dataSection .dataNavSection .dataFilterIntro .popupWindow {
    transform: none;
    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilterIntro .popupWindow {
        box-shadow: none !important
    }
}

.dataSection .dataNavSection .dataFilterIntro .popupWindow::after {
    opacity: .7
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilterIntro .popupWindow .filterPopup {
        height: auto;
        overflow: unset
    }
}

.dataSection .dataNavSection .dataFilterIntro .popupWindowClose {
    display: block;
    background-color: rgba(0, 0, 0, .72);
    transition: 2s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-delay: .575ms;
    pointer-events: all
}

@media (min-width: 1024px) {
    .dataSection .dataNavSection .dataFilterIntro .popupWindowClose {
        background-color: rgba(0, 0, 0, 0)
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter {
        width: 100%;
        min-width: 100%
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter .popupWindow {
        min-width: 100%
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter .dataFilter {
        left: 0;
        right: 0;
        height: auto;
        width: 100%;
        min-width: 100%;
        flex: 1;
        flex-direction: row;
        flex-wrap: nowrap;
        opacity: 1
    }

    .dataSection .openFilter .dataFilter .inputDiv {
        border-bottom: none
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter .popupWindow {
        flex: 1;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter .popupWindow .filterPopup {
        position: relative;
        top: unset;
        left: unset;
        width: 100%;
        height: auto;
        flex: 1;
        flex-wrap: nowrap;
        box-shadow: none;
        overflow: unset;
        padding-left: 1rem
    }

    .dataSection .openFilter .popupWindow .filterPopup .inputDiv {
        flex: 1;
        width: auto;
        min-width: auto;
        max-width: auto
    }

    .dataSection .openFilter .popupWindow .filterPopup .inputDiv selector options item {
        min-height: auto
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter .popupWindow .filterPopup .btnDiv {
        padding-left: 1rem;
        padding-right: 0;
        margin-left: 0
    }
}

@media (min-width: 1280px) {
    .dataSection .openFilter .popupWindow .filterPopup .btnDiv {
        margin-left: auto
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter .popupWindow .filterPopup .btnDiv #cancelFilterBtn {
        display: none
    }
}

@media (min-width: 1024px) {
    .dataSection .openFilter .dataTabMenu .filterBtn {
        display: none
    }
}

.dataSection .sideFilter {
    z-index: 101
}

@media (min-width: 1024px) {
    .dataSection .sideFilter .dataFilter.dataFilterIntro .popupWindow .filterPopup {
        height: 100vh;
        transform: none;
        overflow: hidden;
        overflow-y: auto
    }
}

@media (min-width: 1024px) {
    .dataSection .sideFilter .dataFilter .filterPopup {
        position: fixed;
        top: 0;
        left: unset;
        right: 0;
        z-index: 102;
        height: 100vh;
        max-height: 100vh;
        width: 100%;
        max-width: 500px;
        transform: translateX(100%)
    }
}

@media (min-width: 1024px) {
    .dataSection .sideFilter .dataFilter .filterPopup .inputDiv label {
        left: .7075rem
    }
}

@media (min-width: 1024px) {
    .dataSection .sideFilter .dataFilter .filterPopup .inputDiv input, .dataSection .sideFilter .dataFilter .filterPopup .inputDiv select, .dataSection .sideFilter .dataFilter .filterPopup .inputDiv selector selected {
        padding-left: .7075rem;
        padding-right: .7075rem
    }
}

@media (min-width: 1024px) {
    .dataSection .sideFilter .dataFilter .filterPopup .btnDiv {
        height: auto
    }
}

.dataSection .filterSelectBox {
    width: 100%;
    font-family: var(--font-family);
    color: var(--black);
    font-size: .667rem;
    font-weight: 500;
    padding: .75rem;
    background-color: var(--white);
    border: 1px solid var(--inputBorder);
    border-radius: var(--inputRadius);
    margin-right: 1rem;
    cursor: pointer;
    transition: var(--transition1)
}

.dataSection .filterSelectBox:hover {
    background-color: var(--white);
    border: 1px solid var(--green)
}

.dataSection .fiterDropDown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    max-width: 300px
}

.dataSection .fiterDropDown .content {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    width: auto;
    height: 0;
    opacity: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: var(--radius);
    border: 1px solid var(--borderGray);
    background-color: var(--white);
    padding: 0 1rem;
    box-shadow: rgba(255, 255, 255, .1) 0px 1px 1px 0px inset, rgba(23, 34, 65, .048) 0px 50px 100px -20px, rgba(0, 2, 37, .089) 0px 30px 60px -30px;
    overflow: hidden;
    transition: var(--transition1)
}

.dataSection .fiterDropDown .content .inputDiv {
    width: 100%;
    max-width: 100%
}

.dataSection .fiterDropDown .content .btnDiv {
    width: 100%;
    justify-content: center;
    margin-top: .5rem
}

.dataSection .fiterDropDown .content .btnDiv .btn {
    margin: 0 .5rem
}

.dataSection .fiterDropDown .filterCloseBg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    background-color: rgba(0, 0, 0, .075)
}

.multiActionNav {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 103;
    width: 100%;
    height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: var(--tabBarBgColorMob);
    border-top: var(--tabBarBorderMob);
    border-radius: var(--tabBarBorderRadius);
    transition: var(--transition1);
    overflow: hidden;
    opacity: 0;
    box-shadow: var(--tabBarShadow);
    transform: translateY(100%);
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .multiActionNav {
        position: relative;
        bottom: unset;
        left: unset;
        flex-direction: row;
        background: rgba(0, 0, 0, 0);
        border: none;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        overflow: hidden
    }
}

.multiActionNav .content {
    width: 100%;
    margin: 0;
    padding: 1rem;
    background-color: rgba(230, 230, 230, .3137254902);
    text-align: center
}

@media (min-width: 768px) {
    .multiActionNav .content {
        width: auto;
        background-color: rgba(0, 0, 0, 0);
        text-align: left
    }
}

.multiActionNav .content span {
    font-weight: 500
}

.multiActionNav .actionMenu {
    display: flex;
    height: 100%
}

.multiActionNav .actionMenu::after {
    content: attr(data-tooltop)
}

.multiActionNav .actionMenu a, .multiActionNav .actionMenu button {
    overflow: initial;
    width: 60px;
    height: 60px;
    margin: 0;
    color: var(--tabBarTextColorMob);
    border-radius: 0;
    border-right: 1px solid var(--borderGray);
    overflow: unset
}

.multiActionNav .actionMenu a:not([data-tooltip]):before, .multiActionNav .actionMenu button:not([data-tooltip]):before {
    display: none
}

.multiActionNav .actionMenu a:before, .multiActionNav .actionMenu button:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

.multiActionNav .actionMenu a::after, .multiActionNav .actionMenu button::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

.multiActionNav .actionMenu a:focus, .multiActionNav .actionMenu button:focus {
    z-index: 999
}

.multiActionNav .actionMenu a:focus::before, .multiActionNav .actionMenu a:focus::after, .multiActionNav .actionMenu button:focus::before, .multiActionNav .actionMenu button:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .multiActionNav .actionMenu a:hover, .multiActionNav .actionMenu button:hover {
        z-index: 999
    }

    .multiActionNav .actionMenu a:hover::before, .multiActionNav .actionMenu a:hover::after, .multiActionNav .actionMenu button:hover::before, .multiActionNav .actionMenu button:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

.multiActionNav .actionMenu a::before, .multiActionNav .actionMenu button::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

.multiActionNav .actionMenu a::after, .multiActionNav .actionMenu button::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

@media (min-width: 1024px) {
    .multiActionNav .actionMenu a, .multiActionNav .actionMenu button {
        color: var(--tabBarTextColorWeb)
    }
}

.multiActionNav .actionMenu a:nth-last-child(1), .multiActionNav .actionMenu button:nth-last-child(1) {
    border-right: none
}

.multiActionNav .actionMenu a i, .multiActionNav .actionMenu button i {
    margin: 0;
    transform: none
}

.multiActionNav .actionMenu a:hover, .multiActionNav .actionMenu button:hover {
    background-color: var(--lightGray)
}

.multiActionNavIntro {
    opacity: 1;
    overflow: unset;
    height: auto;
    transform: none
}

@media (min-width: 768px) {
    .multiActionNavIntro {
        height: 60px
    }
}

.dataListDiv {
    width: 100%
}

.dataListDiv:has(.dataCardSection div) .emptyDataListMessage {
    display: none
}

.emptyDataListMessage {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center
}

.emptyDataListMessage dotlottie-player {
    width: clamp(150px, 60vw, 300px);
    z-index: 2
}

.emptyDataListMessage .content {
    z-index: 1;
    margin: auto;
    text-align: center
}

.emptyDataListMessage .code {
    position: absolute;
    top: -20vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(30px, 20vw, 20vh);
    font-weight: 900;
    background: -webkit-linear-gradient(to bottom, var(--shade-2), rgba(255, 255, 255, 0));
    background: linear-gradient(to bottom, var(--shade-2), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0, 0, 0, 0)
}

.emptyDataListMessage .code:empty {
    display: none
}

.emptyDataListMessage .title {
    font-size: clamp(20px, 5vh, 60px);
    line-height: 1.1
}

.emptyDataListMessage p {
    margin: 0 auto;
    margin-top: 10px;
    max-width: 600px;
    line-height: 1.3
}

@media (min-width: 768px) {
    .emptyDataListMessage p {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

@media (min-width: 1024px) {
    .emptyDataListMessage p {
        font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
    }
}

.emptyDataListMessage .btnDiv {
    justify-content: center
}

.emptyDataListMessage a {
    margin-top: 2rem;
    padding: .7075rem 2rem;
    border-radius: 5.65rem;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

@media (min-width: 768px) {
    .emptyDataListMessage a {
        font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
        padding: 1rem 2.83rem
    }
}

@media (min-width: 1024px) {
    .emptyDataListMessage a {
        font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px)
    }
}

.tableDiv {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .7075rem;
    padding-bottom: 60px;
    margin-bottom: 60px;
    background: rgba(0, 0, 0, 0);
    overflow-x: auto;
    overflow-y: clip
}

@media (min-width: 768px) {
    .tableDiv {
        display: block;
        padding-top: 0
    }
}

.tableDiv::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.tableDiv::-webkit-scrollbar-track {
    background-color: var(--white)
}

.tableDiv::-webkit-scrollbar-thumb {
    background: var(--borderGray);
    border-radius: var(--inputRadius)
}

.tableDiv::-webkit-scrollbar-thumb:window-inactive {
    background: var(--borderGray)
}

.tableDiv table {
    min-height: 81vh
}

.tableDiv table tbody {
    display: table
}

.tableDiv table .tableMenu {
    position: relative;
    left: 0;
    z-index: 10 !important;
    width: 6%;
    min-width: 90px;
    max-width: 130px;
    height: 100%;
    display: table-cell;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1rem;
    border: none;
    white-space: nowrap;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .tableDiv table .tableMenu {
        padding-left: 1.413rem;
        width: 4%;
        min-width: 90px;
        max-width: 90px
    }
}

.tableDiv table .tableMenu p {
    display: inline-block;
    opacity: .65;
    font-weight: 400;
    transition: var(--transition1);
    transform: translateX(-6px)
}

.tableDiv table .tableMenu .rowCheckBox, .tableDiv table .tableMenu .selectAllCheckBox {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%) scale(1.2);
    z-index: 1;
    margin: 0;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .tableDiv table .tableMenu .rowCheckBox, .tableDiv table .tableMenu .selectAllCheckBox {
        opacity: 0
    }
}

.tableDiv table .tableMenu .rowCheckBox:checked, .tableDiv table .tableMenu .selectAllCheckBox:checked {
    opacity: 1;
    transform: translateY(-50%) scale(1.3)
}

.tableDiv table .tableMenu .rowCheckBox::before, .tableDiv table .tableMenu .selectAllCheckBox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 80px;
    transform: translate(-50%, -50%)
}

.tableDiv table .tableMenu .moreBtn {
    height: 100%;
    display: inline-flex
}

.tableDiv table .tableMenu .moreBtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

.tableDiv table .tableMenu .moreBtn:hover .btnMenuDiv {
    padding-left: 1px
}

.tableDiv table .tableMenu .moreBtn .moreIcon {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.tableDiv table .tableMenu .moreBtn .btnMenuDiv {
    top: -2px;
    left: 100%;
    width: max-content;
    min-width: 250px;
    padding-top: 0
}

.tableDiv table .tableMenu .moreBtn .btnMenuDiv .btnMenu {
    border-top: none
}

.tableDiv table .contactActionList .contactList {
    border: none !important;
    padding: 0 !important
}

.tableDiv table .contactActionList .contactList p {
    margin-bottom: 0
}

.tableDiv table tr:nth-last-child(1) .tableMenu .moreBtn .btnMenuDiv, .tableDiv table tr:nth-last-child(2) .tableMenu .moreBtn .btnMenuDiv, .tableDiv table tr:nth-last-child(3) .tableMenu .moreBtn .btnMenuDiv {
    top: unset;
    bottom: 50%;
    transform: translateY(50%)
}

.tableDiv table tr:nth-child(1) .tableMenu .moreBtn .btnMenuDiv, .tableDiv table tr:nth-child(2) .tableMenu .moreBtn .btnMenuDiv, .tableDiv table tr:nth-child(3) .tableMenu .moreBtn .btnMenuDiv {
    top: 2px;
    bottom: unset;
    transform: none
}

.tableDiv table tr:nth-child(1) {
    height: 30px;
    border-bottom: 1px solid rgba(131, 131, 131, .1411764706)
}

.tableDiv table tr:nth-child(1) th {
    height: inherit;
    min-height: inherit
}

.tableDiv table tr:nth-child(even) {
    background-color: var(--tableRow)
}

.tableDiv table tr:hover {
    z-index: 10
}

.tableDiv table tr:hover .viewBtn {
    opacity: 1
}

.tableDiv table tr:hover .tableMenu p {
    opacity: 0
}

.tableDiv table tr:hover .tableMenu .rowCheckBox, .tableDiv table tr:hover .tableMenu .selectAllCheckBox {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.tableDiv table tr th {
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: noWrap;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .733rem;
    font-weight: 500
}

@media (min-width: 768px) {
    .tableDiv table tr th {
        font-size: .667rem
    }
}

.tableDiv table tr th p {
    color: var(--text-color);
    display: inline-block;
    margin: 0;
    top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    opacity: .7
}

.tableDiv table tr th span {
    top: -1px;
    color: inherit;
    font-size: 8px;
    margin-left: 3px
}

.tableDiv table tr th .moreBtn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    z-index: 5
}

.tableDiv table tr th .moreBtn .moreIcon {
    color: var(--text-color);
    font-size: .878rem !important
}

.tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu {
    border-top: 1px solid var(--borderGray)
}

.tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label {
    text-transform: capitalize;
    padding: .5rem clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label input {
    margin-top: 0 !important
}

.tableDiv table tr td {
    height: 70px;
    min-height: 70px;
    border: none
}

.tableDiv table tr td:nth-last-child(1) {
    padding-right: 10px
}

.tableDiv table tr td .callBack {
    margin-top: 5px
}

.tableDiv table tr td:not(:first-child) {
    z-index: 2;
    pointer-events: auto
}

.tableDiv table tr td a {
    display: inline-flex
}

.tableDiv table tr td p, .tableDiv table tr td span {
    margin-top: 0;
    line-height: 1.2
}

.tableDiv table tr td .labelText {
    display: flex;
    align-items: center;
    color: var(--gray) !important;
    font-size: .733rem !important;
    font-weight: 500 !important;
    white-space: nowrap
}

.tableDiv table tr td .labelText span {
    margin-top: .25rem;
    display: block;
    color: var(--black) !important;
    font-size: .937rem !important;
    font-weight: 600 !important;
    white-space: nowrap
}

.tableDiv table tr td .link {
    color: #1551bd;
    background-color: #f0f8ff;
    padding: .15rem .55rem;
    border-radius: var(--inputRadius);
    line-height: 1.5;
    transition: var(--transition1);
    cursor: pointer
}

.tableDiv table tr td .link:hover {
    background-color: #dcefff;
    color: #124fc2
}

.tableDiv table tr .tableMenu .moreBtn {
    color: var(--text-color);
    padding: 1.4rem .75rem
}

.tableDiv table tr .tableMenu .moreBtn i {
    color: inherit
}

.tableDiv table tr .hidden {
    width: 0;
    padding: 0;
    opacity: 0
}

.tableDiv table tr .viewBtn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 101%;
    min-height: 101%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    opacity: 0;
    background: #000724;
    background: linear-gradient(90deg, var(--tableHover) 0%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition2);
    cursor: pointer
}

.tableDiv table tr .viewBtn a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.tableDiv table .activeRow {
    background-color: var(--tableHighlight) !important
}

.tableDiv .subTable .subTableData {
    padding: 0;
    padding-left: 0 !important
}

.tableDiv .subTable .subTableData table tr:nth-child(1) {
    height: 30px !important;
    background-color: var(--color2) !important
}

.dataCardSection {
    width: 100%;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    border-radius: var(--btnRadius) var(--btnRadius) 0 0;
    padding: var(--dataCardGap);
    gap: var(--dataCardGap)
}

@media (min-width: 768px) {
    .dataCardSection {
        display: none
    }
}

.dataCardSection:has(div) {
    padding-bottom: 100px
}

.dragViewSection {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    min-height: 100vh;
    display: flex
}

.dragViewSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

.dragViewSection .dragView {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    flex: 1
}

@media (min-width: 1024px) {
    .dragViewSection .dragView {
        padding-top: 80px;
        border-right: 1px solid var(--borderGray)
    }
}

.dragViewSection .dragView .dragViewTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    padding-top: 1rem;
    padding-bottom: 1rem
}

@media (min-width: 1024px) {
    .dragViewSection .dragView .dragViewTitle {
        position: absolute;
        left: 50%;
        top: 1rem;
        width: 88%;
        transform: translateX(-50%)
    }
}

.dragViewSection .dragView .dragViewTitle .title {
    margin: 0
}

.paginationFooter {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99;
    width: calc(100% - var(--tabBarGap) * 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: var(--tabBarGap);
    margin-top: 0;
    background: var(--tabBarBgColorMob);
    border-top: var(--tabBarBorderMob);
    border-radius: var(--tabBarBorderRadius);
    box-shadow: var(--tabBarShadow);
    transform: translateY(150%);
    transition: all 575ms ease-out
}

.paginationFooter:hover::after {
    opacity: 1;
    width: 40%;
    right: 20%;
    transition: var(--transition2)
}

.paginationFooter::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(189, 189, 189, 0.4117647059) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: var(--transition3)
}

.paginationFooter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .paginationFooter {
        width: calc(100% - (var(--menuBarWidth) + var(--tabBarGap) + var(--dataCardGap) * 2));
        height: 50px;
        right: var(--dataCardGap);
        bottom: 0 !important;
        flex-direction: row-reverse;
        margin-right: 0;
        margin-left: 0;
        background: var(--bgShadeMobile);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: 100vh;
        border: none;
        box-shadow: none;
        z-index: 30
    }
}

.paginationFooter::before {
    border: none
}

.paginationFooter .pagination {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    overflow: hidden
}

@media (min-width: 768px) {
    .paginationFooter .pagination {
        width: unset;
        justify-content: flex-end
    }
}

.paginationFooter .pagination .pageNumber {
    flex: 1;
    width: calc(100% - 120px);
    height: 60px;
    display: flex;
    overflow: auto
}

@media (min-width: 768px) {
    .paginationFooter .pagination .pageNumber {
        flex: none;
        width: unset
    }
}

.paginationFooter .pagination .pageNumber::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0)
}

.paginationFooter .pagination .pageNumber::-webkit-scrollbar-thumb {
    background: var(--shade-2)
}

.paginationFooter .pagination .pageNumber li, .paginationFooter .pagination .pageNumber div {
    width: 20%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--tabBarTextColorMob);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .paginationFooter .pagination .pageNumber li, .paginationFooter .pagination .pageNumber div {
        width: 50px;
        min-width: 50px;
        height: 50px;
        padding: .5rem;
        color: var(--tabBarTextColorWeb);
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
        font-weight: 400
    }
}

.paginationFooter .pagination .pageNumber li::before, .paginationFooter .pagination .pageNumber div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: var(--highlight);
    background: linear-gradient(180deg, var(--highlight) 0%, rgba(255, 255, 255, 0) 90%);
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .paginationFooter .pagination .pageNumber li::before, .paginationFooter .pagination .pageNumber div::before {
        transform: rotate(180deg)
    }
}

.paginationFooter .pagination .pageNumber li i, .paginationFooter .pagination .pageNumber div i {
    cursor: pointer
}

.paginationFooter .pagination .pageNumber li:hover::before, .paginationFooter .pagination .pageNumber div:hover::before {
    opacity: .25
}

.paginationFooter .pagination .pageNumber .activePage {
    color: var(--text-color)
}

@media (min-width: 768px) {
    .paginationFooter .pagination .pageNumber .activePage {
        color: var(--tabBarTextColorWeb)
    }
}

.paginationFooter .pagination .pageNumber .activePage::before {
    opacity: 1;
    background: var(--borderGray);
    background: linear-gradient(180deg, var(--borderGray) 0%, rgba(255, 255, 255, 0) 90%)
}

.paginationFooter .pagination a {
    color: var(--tabBarTextColorMob);
    width: 60px;
    height: 50px;
    min-width: 60px;
    display: flex;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .paginationFooter .pagination a {
        color: var(--tabBarTextColorWeb)
    }
}

.paginationFooter .pagination a:hover {
    opacity: 1;
    background-color: var(--shade-2)
}

.paginationFooter .pagination a i {
    top: 0;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    margin: auto
}

.paginationFooter .pagination .previousPageBtn {
    color: var(--tabBarTextColorMob);
    border-right: 1px solid var(--shade-2)
}

@media (min-width: 768px) {
    .paginationFooter .pagination .previousPageBtn {
        color: var(--tabBarTextColorWeb);
        border: none
    }
}

.paginationFooter .pagination .nextPageBtn {
    color: var(--tabBarTextColorMob);
    border-left: 1px solid var(--shade-2)
}

@media (min-width: 768px) {
    .paginationFooter .pagination .nextPageBtn {
        color: var(--tabBarTextColorWeb);
        border: none
    }
}

.paginationFooter .paginationDetails {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 .7075rem;
    transition: var(--transition1);
    overflow: hidden
}

@media (min-width: 768px) {
    .paginationFooter .paginationDetails {
        flex: 1;
        width: 100%;
        height: auto;
        clear: both;
        margin: 0 auto;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
        margin: 0;
        height: 100%
    }
}

.paginationFooter .paginationDetails .text {
    margin: 0;
    color: var(--tabBarTextColorMob);
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
    opacity: .75
}

@media (min-width: 768px) {
    .paginationFooter .paginationDetails .text {
        color: var(--tabBarTextColorWeb)
    }
}

.paginationFooter .paginationDetails .text:nth-child(2) {
    font-size: 1rem
}

.paginationFooter .paginationDetails .text select {
    width: 42px;
    padding: 5px;
    margin: 0 3px;
    color: var(--tabBarTextColorMob);
    border: 1px solid var(--shade-2);
    border-radius: var(--radius);
    text-align: center;
    opacity: .8
}

@media (min-width: 768px) {
    .paginationFooter .paginationDetails .text select {
        color: var(--tabBarTextColorWeb)
    }
}

.paginationFooter .paginationDetails .text span {
    color: var(--tabBarTextColorMob);
    margin: 0 .15rem;
    opacity: .8
}

@media (min-width: 768px) {
    .paginationFooter .paginationDetails .text span {
        color: var(--tabBarTextColorWeb);
        font-weight: 400
    }
}

.multiStepDataPage, .createDataPage, #viewDataMenuPage, .viewDataPageWide, .viewDataPageNarrow, .viewDataPage, .viewDataPopupWide, .createDataPopup, .viewDataPopup {
    width: 100%;
    color: var(--text-color);
    background: var(--bg-color);
    padding-top: 70px
}

.multiStepDataPage .viewDataNavSection, .createDataPage .viewDataNavSection, #viewDataMenuPage .viewDataNavSection, .viewDataPageWide .viewDataNavSection, .viewDataPageNarrow .viewDataNavSection, .viewDataPage .viewDataNavSection, .viewDataPopupWide .viewDataNavSection, .createDataPopup .viewDataNavSection, .viewDataPopup .viewDataNavSection {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    min-height: 70px;
    display: flex;
    gap: 0 10px;
    background: var(--bg-color);
    padding-left: 1.413rem
}

.multiStepDataPage .viewDataNavSection .detailsDiv, .createDataPage .viewDataNavSection .detailsDiv, #viewDataMenuPage .viewDataNavSection .detailsDiv, .viewDataPageWide .viewDataNavSection .detailsDiv, .viewDataPageNarrow .viewDataNavSection .detailsDiv, .viewDataPopupWide .viewDataNavSection .detailsDiv, .createDataPopup .viewDataNavSection .detailsDiv, .viewDataPopup .viewDataNavSection .detailsDiv {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center
}

.multiStepDataPage .viewDataNavSection .detailsDiv .title, .createDataPage .viewDataNavSection .detailsDiv .title, #viewDataMenuPage .viewDataNavSection .detailsDiv .title, .viewDataPageWide .viewDataNavSection .detailsDiv .title, .viewDataPageNarrow .viewDataNavSection .detailsDiv .title, .viewDataPage .viewDataNavSection .detailsDiv .title, .viewDataPopupWide .viewDataNavSection .detailsDiv .title, .createDataPopup .viewDataNavSection .detailsDiv .title, .viewDataPopup .viewDataNavSection .detailsDiv .title {
    margin: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    text-transform: capitalize
}

.multiStepDataPage .viewDataNavSection .detailsDiv p, .createDataPage .viewDataNavSection .detailsDiv p, #viewDataMenuPage .viewDataNavSection .detailsDiv p, .viewDataPageWide .viewDataNavSection .detailsDiv p, .viewDataPageNarrow .viewDataNavSection .detailsDiv p, .viewDataPage .viewDataNavSection .detailsDiv p, .viewDataPopupWide .viewDataNavSection .detailsDiv p, .createDataPopup .viewDataNavSection .detailsDiv p, .viewDataPopup .viewDataNavSection .detailsDiv p {
    margin: 0
}

.multiStepDataPage .viewDataNavSection .detailsDiv .dateText, .createDataPage .viewDataNavSection .detailsDiv .dateText, #viewDataMenuPage .viewDataNavSection .detailsDiv .dateText, .viewDataPageWide .viewDataNavSection .detailsDiv .dateText, .viewDataPageNarrow .viewDataNavSection .detailsDiv .dateText, .viewDataPage .viewDataNavSection .detailsDiv .dateText, .viewDataPopupWide .viewDataNavSection .detailsDiv .dateText, .createDataPopup .viewDataNavSection .detailsDiv .dateText, .viewDataPopup .viewDataNavSection .detailsDiv .dateText {
    display: none
}

@media (min-width: 568px) {
    .multiStepDataPage .viewDataNavSection .detailsDiv .dateText, .createDataPage .viewDataNavSection .detailsDiv .dateText, #viewDataMenuPage .viewDataNavSection .detailsDiv .dateText, .viewDataPageWide .viewDataNavSection .detailsDiv .dateText, .viewDataPageNarrow .viewDataNavSection .detailsDiv .dateText, .viewDataPage .viewDataNavSection .detailsDiv .dateText, .viewDataPopupWide .viewDataNavSection .detailsDiv .dateText, .createDataPopup .viewDataNavSection .detailsDiv .dateText, .viewDataPopup .viewDataNavSection .detailsDiv .dateText {
        display: inline-block
    }
}

.multiStepDataPage .viewDataNavSection .btnDiv, .createDataPage .viewDataNavSection .btnDiv, #viewDataMenuPage .viewDataNavSection .btnDiv, .viewDataPageWide .viewDataNavSection .btnDiv, .viewDataPageNarrow .viewDataNavSection .btnDiv, .viewDataPage .viewDataNavSection .btnDiv, .viewDataPopupWide .viewDataNavSection .btnDiv, .createDataPopup .viewDataNavSection .btnDiv, .viewDataPopup .viewDataNavSection .btnDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 200;
    min-height: 60px;
    margin: 0;
    background: var(--bg-color);
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0 10px
}

@media (min-width: 1024px) {
    .multiStepDataPage .viewDataNavSection .btnDiv, .createDataPage .viewDataNavSection .btnDiv, #viewDataMenuPage .viewDataNavSection .btnDiv, .viewDataPageWide .viewDataNavSection .btnDiv, .viewDataPageNarrow .viewDataNavSection .btnDiv, .viewDataPage .viewDataNavSection .btnDiv, .viewDataPopupWide .viewDataNavSection .btnDiv, .createDataPopup .viewDataNavSection .btnDiv, .viewDataPopup .viewDataNavSection .btnDiv {
        position: absolute;
        bottom: unset;
        top: 0;
        height: 100%;
        min-height: 70px;
        width: 100%
    }
}
.viewDataPage .viewDataNavSection .btnDiv button,.viewDataPage .viewDataNavSection .btnDiv a,{
    margin: 0;
    flex: 1
}
@media (min-width: 568px) {
    .viewDataPage .viewDataNavSection .btnDiv button,.viewDataPage .viewDataNavSection .btnDiv a,{
        flex: unset;
    }
}
.multiStepDataPage .viewDataNavSection .btnDiv a, .createDataPage .viewDataNavSection .btnDiv a, #viewDataMenuPage .viewDataNavSection .btnDiv a, .viewDataPageWide .viewDataNavSection .btnDiv a, .viewDataPageNarrow .viewDataNavSection .btnDiv a,  .viewDataPopupWide .viewDataNavSection .btnDiv a, .createDataPopup .viewDataNavSection .btnDiv a, .viewDataPopup .viewDataNavSection .btnDiv a, .multiStepDataPage .viewDataNavSection .btnDiv button, .createDataPage .viewDataNavSection .btnDiv button, #viewDataMenuPage .viewDataNavSection .btnDiv button, .viewDataPageWide .viewDataNavSection .btnDiv button, .viewDataPageNarrow .viewDataNavSection .btnDiv button,  .viewDataPopupWide .viewDataNavSection .btnDiv button, .createDataPopup .viewDataNavSection .btnDiv button, .viewDataPopup .viewDataNavSection .btnDiv button {
    margin: 0;
    flex: 1
}

@media (min-width: 568px) {
    .multiStepDataPage .viewDataNavSection .btnDiv a, .createDataPage .viewDataNavSection .btnDiv a, #viewDataMenuPage .viewDataNavSection .btnDiv a, .viewDataPageWide .viewDataNavSection .btnDiv a, .viewDataPageNarrow .viewDataNavSection .btnDiv a,  .viewDataPopupWide .viewDataNavSection .btnDiv a, .createDataPopup .viewDataNavSection .btnDiv a, .viewDataPopup .viewDataNavSection .btnDiv a, .multiStepDataPage .viewDataNavSection .btnDiv button, .createDataPage .viewDataNavSection .btnDiv button, #viewDataMenuPage .viewDataNavSection .btnDiv button, .viewDataPageWide .viewDataNavSection .btnDiv button, .viewDataPageNarrow .viewDataNavSection .btnDiv button,  .viewDataPopupWide .viewDataNavSection .btnDiv button, .createDataPopup .viewDataNavSection .btnDiv button, .viewDataPopup .viewDataNavSection .btnDiv button {
        flex: unset;
        min-width: 100px
    }
}

.multiStepDataPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit, .createDataPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit, #viewDataMenuPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit, .viewDataPageWide .viewDataNavSection .btnDiv .saveViewDataPopupEdit, .viewDataPageNarrow .viewDataNavSection .btnDiv .saveViewDataPopupEdit, .viewDataPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit, .viewDataPopupWide .viewDataNavSection .btnDiv .saveViewDataPopupEdit, .createDataPopup .viewDataNavSection .btnDiv .saveViewDataPopupEdit, .viewDataPopup .viewDataNavSection .btnDiv .saveViewDataPopupEdit {
    order: 2;
    color: var(--white);
    background-color: #20b85d
}

.multiStepDataPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, .createDataPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, #viewDataMenuPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, .viewDataPageWide .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, .viewDataPageNarrow .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, .viewDataPage .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, .viewDataPopupWide .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, .createDataPopup .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover, .viewDataPopup .viewDataNavSection .btnDiv .saveViewDataPopupEdit:hover {
    background-color: #1a9c4e
}

.multiStepDataPage .viewDataNavSection .btnDiv .cancelViewDataPopupEdit, .createDataPage .viewDataNavSection .btnDiv .cancelViewDataPopupEdit, #viewDataMenuPage .viewDataNavSection .btnDiv .cancelViewDataPopupEdit, .viewDataPageWide .viewDataNavSection .btnDiv .cancelViewDataPopupEdit, .viewDataPageNarrow .viewDataNavSection .btnDiv .cancelViewDataPopupEdit,  .viewDataPopupWide .viewDataNavSection .btnDiv .cancelViewDataPopupEdit, .createDataPopup .viewDataNavSection .btnDiv .cancelViewDataPopupEdit, .viewDataPopup .viewDataNavSection .btnDiv .cancelViewDataPopupEdit {
    order: 1;
    color: var(--text-color);
    font-weight: 500;
    background-color: var(--white);
    border: 1px solid var(--shade-2)
}

.multiStepDataPage .viewDataNavSection .moreOptionDiv, .createDataPage .viewDataNavSection .moreOptionDiv, #viewDataMenuPage .viewDataNavSection .moreOptionDiv, .viewDataPageWide .viewDataNavSection .moreOptionDiv, .viewDataPageNarrow .viewDataNavSection .moreOptionDiv, .viewDataPage .viewDataNavSection .moreOptionDiv, .viewDataPopupWide .viewDataNavSection .moreOptionDiv, .createDataPopup .viewDataNavSection .moreOptionDiv, .viewDataPopup .viewDataNavSection .moreOptionDiv {
    order: 5;
    padding-right: .7075rem;
    padding-left: 10px;
    min-height: 60px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.multiStepDataPage .viewDataNavSection .moreOptionDiv a, .createDataPage .viewDataNavSection .moreOptionDiv a, #viewDataMenuPage .viewDataNavSection .moreOptionDiv a, .viewDataPageWide .viewDataNavSection .moreOptionDiv a, .viewDataPageNarrow .viewDataNavSection .moreOptionDiv a, .viewDataPage .viewDataNavSection .moreOptionDiv a, .viewDataPopupWide .viewDataNavSection .moreOptionDiv a, .createDataPopup .viewDataNavSection .moreOptionDiv a, .viewDataPopup .viewDataNavSection .moreOptionDiv a, .multiStepDataPage .viewDataNavSection .moreOptionDiv button, .createDataPage .viewDataNavSection .moreOptionDiv button, #viewDataMenuPage .viewDataNavSection .moreOptionDiv button, .viewDataPageWide .viewDataNavSection .moreOptionDiv button, .viewDataPageNarrow .viewDataNavSection .moreOptionDiv button, .viewDataPage .viewDataNavSection .moreOptionDiv button, .viewDataPopupWide .viewDataNavSection .moreOptionDiv button, .createDataPopup .viewDataNavSection .moreOptionDiv button, .viewDataPopup .viewDataNavSection .moreOptionDiv button {
    margin-top: 0
}

@media (min-width: 768px) {
    .multiStepDataPage .viewDataNavSection .moreOptionDiv a, .createDataPage .viewDataNavSection .moreOptionDiv a, #viewDataMenuPage .viewDataNavSection .moreOptionDiv a, .viewDataPageWide .viewDataNavSection .moreOptionDiv a, .viewDataPageNarrow .viewDataNavSection .moreOptionDiv a, .viewDataPage .viewDataNavSection .moreOptionDiv a, .viewDataPopupWide .viewDataNavSection .moreOptionDiv a, .createDataPopup .viewDataNavSection .moreOptionDiv a, .viewDataPopup .viewDataNavSection .moreOptionDiv a, .multiStepDataPage .viewDataNavSection .moreOptionDiv button, .createDataPage .viewDataNavSection .moreOptionDiv button, #viewDataMenuPage .viewDataNavSection .moreOptionDiv button, .viewDataPageWide .viewDataNavSection .moreOptionDiv button, .viewDataPageNarrow .viewDataNavSection .moreOptionDiv button, .viewDataPage .viewDataNavSection .moreOptionDiv button, .viewDataPopupWide .viewDataNavSection .moreOptionDiv button, .createDataPopup .viewDataNavSection .moreOptionDiv button, .viewDataPopup .viewDataNavSection .moreOptionDiv button {
        min-width: 125px
    }
}

.multiStepDataPage .viewDataNavSection .moreBtn, .createDataPage .viewDataNavSection .moreBtn, #viewDataMenuPage .viewDataNavSection .moreBtn, .viewDataPageWide .viewDataNavSection .moreBtn, .viewDataPageNarrow .viewDataNavSection .moreBtn, .viewDataPage .viewDataNavSection .moreBtn, .viewDataPopupWide .viewDataNavSection .moreBtn, .createDataPopup .viewDataNavSection .moreBtn, .viewDataPopup .viewDataNavSection .moreBtn {
    min-width: var(--box-size);
    min-height: 70px;
    padding-right: 1.413rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreIcon, .createDataPage .viewDataNavSection .moreBtn .moreIcon, #viewDataMenuPage .viewDataNavSection .moreBtn .moreIcon, .viewDataPageWide .viewDataNavSection .moreBtn .moreIcon, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreIcon, .viewDataPage .viewDataNavSection .moreBtn .moreIcon, .viewDataPopupWide .viewDataNavSection .moreBtn .moreIcon, .createDataPopup .viewDataNavSection .moreBtn .moreIcon, .viewDataPopup .viewDataNavSection .moreBtn .moreIcon {
    font-size: 35px
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView, .createDataPage .viewDataNavSection .moreBtn .moreOptionView, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView {
    padding-top: 0
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    color: var(--text-color);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3), .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) {
        font-size: 1rem;
        padding: 1rem .7075rem
    }
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--shade-2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover {
    color: var(--text-color)
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before {
    opacity: 1
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1), .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1) {
    padding-top: .7075rem
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1), .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1) {
    padding-bottom: .7075rem
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, .createDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i {
    top: 2px;
    font-size: .733rem;
    line-height: 1
}

.multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .filledBtn, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .filledBtn, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .outlinedBtn, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .btn1, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .btn1, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .btn1, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .btn1, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .btn1, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .btn1, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .btn1, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .btn1, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .btn1, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .btn2, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .btn2, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .btn2, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .btn2, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .btn2, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .btn2, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .btn2, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .btn2, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .btn2, .multiStepDataPage .viewDataNavSection .moreBtn .moreOptionView .btn3, .createDataPage .viewDataNavSection .moreBtn .moreOptionView .btn3, #viewDataMenuPage .viewDataNavSection .moreBtn .moreOptionView .btn3, .viewDataPageWide .viewDataNavSection .moreBtn .moreOptionView .btn3, .viewDataPageNarrow .viewDataNavSection .moreBtn .moreOptionView .btn3, .viewDataPage .viewDataNavSection .moreBtn .moreOptionView .btn3, .viewDataPopupWide .viewDataNavSection .moreBtn .moreOptionView .btn3, .createDataPopup .viewDataNavSection .moreBtn .moreOptionView .btn3, .viewDataPopup .viewDataNavSection .moreBtn .moreOptionView .btn3 {
    width: calc(100% - 20px);
    margin: 10px;
    padding: .75rem .8rem !important;
    font-size: 1rem
}

.multiStepDataPage .viewDataNavSection .moreBtn .btnMenuDiv, .createDataPage .viewDataNavSection .moreBtn .btnMenuDiv, #viewDataMenuPage .viewDataNavSection .moreBtn .btnMenuDiv, .viewDataPageWide .viewDataNavSection .moreBtn .btnMenuDiv, .viewDataPageNarrow .viewDataNavSection .moreBtn .btnMenuDiv, .viewDataPage .viewDataNavSection .moreBtn .btnMenuDiv, .viewDataPopupWide .viewDataNavSection .moreBtn .btnMenuDiv, .createDataPopup .viewDataNavSection .moreBtn .btnMenuDiv, .viewDataPopup .viewDataNavSection .moreBtn .btnMenuDiv {
    right: -1px;
    padding-top: 60px;
    min-width: 230px
}
.viewDataPage .viewDataNavSection .backBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    min-width: unset;
}
.viewDataPage .viewDataNavSection .detailsDiv{
    flex: 1;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:10px;
    margin-right: 10px;
}
.viewDataPage .mainDetails .showChangeStatusModal{
    float: right;
    margin-right: 10px;
}
.multiStepDataPage .viewDataNavSection .popupCloseIcon, .createDataPage .viewDataNavSection .popupCloseIcon, #viewDataMenuPage .viewDataNavSection .popupCloseIcon, .viewDataPageWide .viewDataNavSection .popupCloseIcon, .viewDataPageNarrow .viewDataNavSection .popupCloseIcon, .viewDataPage .viewDataNavSection .popupCloseIcon, .viewDataPopupWide .viewDataNavSection .popupCloseIcon, .createDataPopup .viewDataNavSection .popupCloseIcon, .viewDataPopup .viewDataNavSection .popupCloseIcon, .multiStepDataPage .viewDataNavSection .backBtn, .createDataPage .viewDataNavSection .backBtn, #viewDataMenuPage .viewDataNavSection .backBtn, .viewDataPageWide .viewDataNavSection .backBtn, .viewDataPageNarrow .viewDataNavSection .backBtn,  .viewDataPopupWide .viewDataNavSection .backBtn, .createDataPopup .viewDataNavSection .backBtn, .viewDataPopup .viewDataNavSection .backBtn {
    margin: auto 0;
    width: var(--box-size);
    min-width: var(--box-size);
    height: var(--box-size);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dataToolColor);
    background-color: var(--dataToolBg);
    border: 1px solid var(--dataToolBg);
    border-radius: var(--btnRadius);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    cursor: pointer;
    transition: var(--transition1);
    will-change: transform
}

.multiStepDataPage .viewDataNavSection .popupCloseIcon:hover, .createDataPage .viewDataNavSection .popupCloseIcon:hover, #viewDataMenuPage .viewDataNavSection .popupCloseIcon:hover, .viewDataPageWide .viewDataNavSection .popupCloseIcon:hover, .viewDataPageNarrow .viewDataNavSection .popupCloseIcon:hover, .viewDataPage .viewDataNavSection .popupCloseIcon:hover, .viewDataPopupWide .viewDataNavSection .popupCloseIcon:hover, .createDataPopup .viewDataNavSection .popupCloseIcon:hover, .viewDataPopup .viewDataNavSection .popupCloseIcon:hover, .multiStepDataPage .viewDataNavSection .backBtn:hover, .createDataPage .viewDataNavSection .backBtn:hover, #viewDataMenuPage .viewDataNavSection .backBtn:hover, .viewDataPageWide .viewDataNavSection .backBtn:hover, .viewDataPageNarrow .viewDataNavSection .backBtn:hover, .viewDataPage .viewDataNavSection .backBtn:hover, .viewDataPopupWide .viewDataNavSection .backBtn:hover, .createDataPopup .viewDataNavSection .backBtn:hover, .viewDataPopup .viewDataNavSection .backBtn:hover {
    transform: scale(1.1)
}

.multiStepDataPage .viewDataNavSection .popupCloseIcon i, .createDataPage .viewDataNavSection .popupCloseIcon i, #viewDataMenuPage .viewDataNavSection .popupCloseIcon i, .viewDataPageWide .viewDataNavSection .popupCloseIcon i, .viewDataPageNarrow .viewDataNavSection .popupCloseIcon i, .viewDataPage .viewDataNavSection .popupCloseIcon i, .viewDataPopupWide .viewDataNavSection .popupCloseIcon i, .createDataPopup .viewDataNavSection .popupCloseIcon i, .viewDataPopup .viewDataNavSection .popupCloseIcon i, .multiStepDataPage .viewDataNavSection .backBtn i, .createDataPage .viewDataNavSection .backBtn i, #viewDataMenuPage .viewDataNavSection .backBtn i, .viewDataPageWide .viewDataNavSection .backBtn i, .viewDataPageNarrow .viewDataNavSection .backBtn i, .viewDataPage .viewDataNavSection .backBtn i, .viewDataPopupWide .viewDataNavSection .backBtn i, .createDataPopup .viewDataNavSection .backBtn i, .viewDataPopup .viewDataNavSection .backBtn i {
    left: -1px;
    cursor: pointer;
    transition: var(--transition1)
}

.multiStepDataPage .viewDataDetailsSection, .createDataPage .viewDataDetailsSection, #viewDataMenuPage .viewDataDetailsSection, .viewDataPageWide .viewDataDetailsSection, .viewDataPageNarrow .viewDataDetailsSection, .viewDataPage .viewDataDetailsSection, .viewDataPopupWide .viewDataDetailsSection, .createDataPopup .viewDataDetailsSection, .viewDataPopup .viewDataDetailsSection {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    background-color: inherit
}

.multiStepDataPage .mainDetails, .createDataPage .mainDetails, #viewDataMenuPage .mainDetails, .viewDataPageWide .mainDetails, .viewDataPageNarrow .mainDetails, .viewDataPage .mainDetails, .viewDataPopupWide .mainDetails, .createDataPopup .mainDetails, .viewDataPopup .mainDetails {
    width: 100%;
    display: block;
    background-color: inherit;
    padding-top: .7075rem;
    padding-bottom: .7075rem
}

.multiStepDataPage hr, .createDataPage hr, #viewDataMenuPage hr, .viewDataPageWide hr, .viewDataPageNarrow hr, .viewDataPage hr, .viewDataPopupWide hr, .createDataPopup hr, .viewDataPopup hr {
    border-top: 1px dashed var(--borderGray);
    margin-top: 2rem;
    padding-top: 2rem
}

.multiStepDataPage .content, .createDataPage .content, #viewDataMenuPage .content, .viewDataPageWide .content, .viewDataPageNarrow .content, .viewDataPage .content, .viewDataPopupWide .content, .createDataPopup .content, .viewDataPopup .content {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%
}

.multiStepDataPage .titleDiv, .createDataPage .titleDiv, #viewDataMenuPage .titleDiv, .viewDataPageWide .titleDiv, .viewDataPageNarrow .titleDiv, .viewDataPage .titleDiv, .viewDataPopupWide .titleDiv, .createDataPopup .titleDiv, .viewDataPopup .titleDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: .7075rem
}

.multiStepDataPage .titleDiv .title, .createDataPage .titleDiv .title, #viewDataMenuPage .titleDiv .title, .viewDataPageWide .titleDiv .title, .viewDataPageNarrow .titleDiv .title, .viewDataPage .titleDiv .title, .viewDataPopupWide .titleDiv .title, .createDataPopup .titleDiv .title, .viewDataPopup .titleDiv .title {
    width: 100%;
    margin-bottom: 1rem !important
}

.multiStepDataPage .titleDiv .title input, .createDataPage .titleDiv .title input, #viewDataMenuPage .titleDiv .title input, .viewDataPageWide .titleDiv .title input, .viewDataPageNarrow .titleDiv .title input, .viewDataPage .titleDiv .title input, .viewDataPopupWide .titleDiv .title input, .createDataPopup .titleDiv .title input, .viewDataPopup .titleDiv .title input {
    font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px);
    font-weight: 500;
    padding-left: 5px !important;
    caret-color: var(--inputColor5);
    text-transform: capitalize
}

@media (min-width: 1024px) {
    .multiStepDataPage .titleDiv .title input, .createDataPage .titleDiv .title input, #viewDataMenuPage .titleDiv .title input, .viewDataPageWide .titleDiv .title input, .viewDataPageNarrow .titleDiv .title input, .viewDataPage .titleDiv .title input, .viewDataPopupWide .titleDiv .title input, .createDataPopup .titleDiv .title input, .viewDataPopup .titleDiv .title input {
        font-size: clamp(25.62890625px, 25.123072574px + 0.0010538202 * 100vw, 27.2307128906px)
    }
}

@media (min-width: 1800px) {
    .multiStepDataPage .titleDiv .title input, .createDataPage .titleDiv .title input, #viewDataMenuPage .titleDiv .title input, .viewDataPageWide .titleDiv .title input, .viewDataPageNarrow .titleDiv .title input, .viewDataPage .titleDiv .title input, .viewDataPopupWide .titleDiv .title input, .createDataPopup .titleDiv .title input, .viewDataPopup .titleDiv .title input {
        font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px)
    }
}

.multiStepDataPage .titleDiv .title input:focus + .messageBox::after, .createDataPage .titleDiv .title input:focus + .messageBox::after, #viewDataMenuPage .titleDiv .title input:focus + .messageBox::after, .viewDataPageWide .titleDiv .title input:focus + .messageBox::after, .viewDataPageNarrow .titleDiv .title input:focus + .messageBox::after, .viewDataPage .titleDiv .title input:focus + .messageBox::after, .viewDataPopupWide .titleDiv .title input:focus + .messageBox::after, .createDataPopup .titleDiv .title input:focus + .messageBox::after, .viewDataPopup .titleDiv .title input:focus + .messageBox::after {
    display: none
}

.multiStepDataPage .titleDiv .title input:valid + .messageBox:after, .createDataPage .titleDiv .title input:valid + .messageBox:after, #viewDataMenuPage .titleDiv .title input:valid + .messageBox:after, .viewDataPageWide .titleDiv .title input:valid + .messageBox:after, .viewDataPageNarrow .titleDiv .title input:valid + .messageBox:after, .viewDataPage .titleDiv .title input:valid + .messageBox:after, .viewDataPopupWide .titleDiv .title input:valid + .messageBox:after, .createDataPopup .titleDiv .title input:valid + .messageBox:after, .viewDataPopup .titleDiv .title input:valid + .messageBox:after {
    display: none
}

.multiStepDataPage .titleDiv .title input::placeholder, .createDataPage .titleDiv .title input::placeholder, #viewDataMenuPage .titleDiv .title input::placeholder, .viewDataPageWide .titleDiv .title input::placeholder, .viewDataPageNarrow .titleDiv .title input::placeholder, .viewDataPage .titleDiv .title input::placeholder, .viewDataPopupWide .titleDiv .title input::placeholder, .createDataPopup .titleDiv .title input::placeholder, .viewDataPopup .titleDiv .title input::placeholder {
    font-size: inherit;
    font-weight: 500;
    transition: var(--transition1)
}

.multiStepDataPage .titleDiv .title .messageBox:after, .createDataPage .titleDiv .title .messageBox:after, #viewDataMenuPage .titleDiv .title .messageBox:after, .viewDataPageWide .titleDiv .title .messageBox:after, .viewDataPageNarrow .titleDiv .title .messageBox:after, .viewDataPage .titleDiv .title .messageBox:after, .viewDataPopupWide .titleDiv .title .messageBox:after, .createDataPopup .titleDiv .title .messageBox:after, .viewDataPopup .titleDiv .title .messageBox:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: var(--inputColor5);
    left: 0;
    top: -5px;
    transform: translateY(-130%);
    animation-name: blink;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    opacity: 1
}

@keyframes blink {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.multiStepDataPage .titleDiv .text, .createDataPage .titleDiv .text, #viewDataMenuPage .titleDiv .text, .viewDataPageWide .titleDiv .text, .viewDataPageNarrow .titleDiv .text, .viewDataPage .titleDiv .text, .viewDataPopupWide .titleDiv .text, .createDataPopup .titleDiv .text, .viewDataPopup .titleDiv .text {
    max-width: 600px;
    line-height: 1.3;
    font-size: 1rem;
    font-weight: 400
}

.multiStepDataPage .rowInputContainer, .createDataPage .rowInputContainer, #viewDataMenuPage .rowInputContainer, .viewDataPageWide .rowInputContainer, .viewDataPageNarrow .rowInputContainer, .viewDataPage .rowInputContainer, .viewDataPopupWide .rowInputContainer, .createDataPopup .rowInputContainer, .viewDataPopup .rowInputContainer {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0 2%
}

.multiStepDataPage .centerContent, .createDataPage .centerContent, #viewDataMenuPage .centerContent, .viewDataPageWide .centerContent, .viewDataPageNarrow .centerContent, .viewDataPage .centerContent, .viewDataPopupWide .centerContent, .createDataPopup .centerContent, .viewDataPopup .centerContent {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    text-align: center;
    margin: 1rem
}

.multiStepDataPage .horizontalInputDiv, .createDataPage .horizontalInputDiv, #viewDataMenuPage .horizontalInputDiv, .viewDataPageWide .horizontalInputDiv, .viewDataPageNarrow .horizontalInputDiv, .viewDataPage .horizontalInputDiv, .viewDataPopupWide .horizontalInputDiv, .createDataPopup .horizontalInputDiv, .viewDataPopup .horizontalInputDiv, .multiStepDataPage .minimalHorizontalInputDiv, .createDataPage .minimalHorizontalInputDiv, #viewDataMenuPage .minimalHorizontalInputDiv, .viewDataPageWide .minimalHorizontalInputDiv, .viewDataPageNarrow .minimalHorizontalInputDiv, .viewDataPage .minimalHorizontalInputDiv, .viewDataPopupWide .minimalHorizontalInputDiv, .createDataPopup .minimalHorizontalInputDiv, .viewDataPopup .minimalHorizontalInputDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%)
}

.multiStepDataPage .mainDetailsDescription, .createDataPage .mainDetailsDescription, #viewDataMenuPage .mainDetailsDescription, .viewDataPageWide .mainDetailsDescription, .viewDataPageNarrow .mainDetailsDescription, .viewDataPage .mainDetailsDescription, .viewDataPopupWide .mainDetailsDescription, .createDataPopup .mainDetailsDescription, .viewDataPopup .mainDetailsDescription {
    margin-top: .7075rem
}

.multiStepDataPage #viewDataTabContainer, .createDataPage #viewDataTabContainer, #viewDataMenuPage #viewDataTabContainer, .viewDataPageWide #viewDataTabContainer, .viewDataPageNarrow #viewDataTabContainer, .viewDataPage #viewDataTabContainer, .viewDataPopupWide #viewDataTabContainer, .createDataPopup #viewDataTabContainer, .viewDataPopup #viewDataTabContainer {
    margin-top: 2rem;
    overflow: visible;
    overflow-x: clip
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav, .createDataPage #viewDataTabContainer .viewDataTabNav, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav, .viewDataPageWide #viewDataTabContainer .viewDataTabNav, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav, .viewDataPage #viewDataTabContainer .viewDataTabNav, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav, .createDataPopup #viewDataTabContainer .viewDataTabNav, .viewDataPopup #viewDataTabContainer .viewDataTabNav {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    align-items: center;
    overflow-x: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, .createDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, .viewDataPageWide #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, .viewDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, .createDataPopup #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar, .viewDataPopup #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar {
    display: none
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .createDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .viewDataPageWide #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .viewDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .createDataPopup #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .viewDataPopup #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-track, .multiStepDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, .createDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, .viewDataPageWide #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, .viewDataPage #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, .createDataPopup #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb, .viewDataPopup #viewDataTabContainer .viewDataTabNav::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    cursor: grab;
    opacity: 0
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav:hover, .createDataPage #viewDataTabContainer .viewDataTabNav:hover, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav:hover, .viewDataPageWide #viewDataTabContainer .viewDataTabNav:hover, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav:hover, .viewDataPage #viewDataTabContainer .viewDataTabNav:hover, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav:hover, .createDataPopup #viewDataTabContainer .viewDataTabNav:hover, .viewDataPopup #viewDataTabContainer .viewDataTabNav:hover {
    border-bottom: 1px solid var(--borderGray)
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav:hover::after, .createDataPage #viewDataTabContainer .viewDataTabNav:hover::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav:hover::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav:hover::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav:hover::after, .viewDataPage #viewDataTabContainer .viewDataTabNav:hover::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav:hover::after, .createDataPopup #viewDataTabContainer .viewDataTabNav:hover::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav:hover::after, .multiStepDataPage #viewDataTabContainer .viewDataTabNav:hover::before, .createDataPage #viewDataTabContainer .viewDataTabNav:hover::before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav:hover::before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav:hover::before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav:hover::before, .viewDataPage #viewDataTabContainer .viewDataTabNav:hover::before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav:hover::before, .createDataPopup #viewDataTabContainer .viewDataTabNav:hover::before, .viewDataPopup #viewDataTabContainer .viewDataTabNav:hover::before {
    opacity: 1
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, .createDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, .viewDataPageWide #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, .viewDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, .createDataPopup #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu, .viewDataPopup #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu {
    color: var(--text-color)
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, .createDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, .viewDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, .createDataPopup #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::after {
    transform: none
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, .createDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, .viewDataPage #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, .createDataPopup #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before, .viewDataPopup #viewDataTabContainer .viewDataTabNav:hover .activeTabMenu::before {
    transform: translateX(-100%);
    transition: none
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav a, .createDataPage #viewDataTabContainer .viewDataTabNav a, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a, .viewDataPage #viewDataTabContainer .viewDataTabNav a, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a, .createDataPopup #viewDataTabContainer .viewDataTabNav a, .viewDataPopup #viewDataTabContainer .viewDataTabNav a, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu {
    min-width: 50px;
    display: inline-table;
    align-items: center;
    color: var(--text-color);
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    font-weight: 500;
    padding: .65rem .5rem;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-transform: capitalize;
    transition: var(--transition1);
    opacity: .5;
    overflow: hidden;
    cursor: pointer
}

@media (min-width: 768px) {
    .multiStepDataPage #viewDataTabContainer .viewDataTabNav a, .createDataPage #viewDataTabContainer .viewDataTabNav a, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a, .viewDataPage #viewDataTabContainer .viewDataTabNav a, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a, .createDataPopup #viewDataTabContainer .viewDataTabNav a, .viewDataPopup #viewDataTabContainer .viewDataTabNav a, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu {
        padding: 1rem .5rem
    }
}

@media (min-width: 1800px) {
    .multiStepDataPage #viewDataTabContainer .viewDataTabNav a, .createDataPage #viewDataTabContainer .viewDataTabNav a, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a, .viewDataPage #viewDataTabContainer .viewDataTabNav a, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a, .createDataPopup #viewDataTabContainer .viewDataTabNav a, .viewDataPopup #viewDataTabContainer .viewDataTabNav a, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu {
        font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px)
    }
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav a:hover, .createDataPage #viewDataTabContainer .viewDataTabNav a:hover, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a:hover, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a:hover, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a:hover, .viewDataPage #viewDataTabContainer .viewDataTabNav a:hover, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a:hover, .createDataPopup #viewDataTabContainer .viewDataTabNav a:hover, .viewDataPopup #viewDataTabContainer .viewDataTabNav a:hover, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu:hover, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu:hover, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu:hover, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:hover, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:hover {
    opacity: 1;
    color: var(--tab-highlight-color)
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav a:hover::after, .createDataPage #viewDataTabContainer .viewDataTabNav a:hover::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a:hover::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a:hover::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a:hover::after, .viewDataPage #viewDataTabContainer .viewDataTabNav a:hover::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a:hover::after, .createDataPopup #viewDataTabContainer .viewDataTabNav a:hover::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav a:hover::after, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:hover::after {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: .3s
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav a:hover::before, .createDataPage #viewDataTabContainer .viewDataTabNav a:hover::before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a:hover::before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a:hover::before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a:hover::before, .viewDataPage #viewDataTabContainer .viewDataTabNav a:hover::before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a:hover::before, .createDataPopup #viewDataTabContainer .viewDataTabNav a:hover::before, .viewDataPopup #viewDataTabContainer .viewDataTabNav a:hover::before, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:hover::before {
    transition: all .3s ease-in;
    transform: none;
    opacity: 1
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav a::after, .createDataPage #viewDataTabContainer .viewDataTabNav a::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a::after, .viewDataPage #viewDataTabContainer .viewDataTabNav a::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a::after, .createDataPopup #viewDataTabContainer .viewDataTabNav a::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav a::after, .multiStepDataPage #viewDataTabContainer .viewDataTabNav a:before, .createDataPage #viewDataTabContainer .viewDataTabNav a:before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a:before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a:before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a:before, .viewDataPage #viewDataTabContainer .viewDataTabNav a:before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a:before, .createDataPopup #viewDataTabContainer .viewDataTabNav a:before, .viewDataPopup #viewDataTabContainer .viewDataTabNav a:before, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu::after, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu::after, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:before, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu:before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu:before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu:before, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu:before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu:before, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:before, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    width: 100%;
    border-radius: 2rem;
    opacity: 0
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav a::before, .createDataPage #viewDataTabContainer .viewDataTabNav a::before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a::before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a::before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a::before, .viewDataPage #viewDataTabContainer .viewDataTabNav a::before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a::before, .createDataPopup #viewDataTabContainer .viewDataTabNav a::before, .viewDataPopup #viewDataTabContainer .viewDataTabNav a::before, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::before, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu::before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu::before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu::before, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu::before, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu::before, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu::before {
    background-color: var(--tab-highlight-color);
    transform: translateX(-100%);
    transition: none
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav a::after, .createDataPage #viewDataTabContainer .viewDataTabNav a::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav a::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav a::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav a::after, .viewDataPage #viewDataTabContainer .viewDataTabNav a::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav a::after, .createDataPopup #viewDataTabContainer .viewDataTabNav a::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav a::after, .multiStepDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, .createDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPage #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .tabMenu::after, .createDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu::after, .viewDataPopup #viewDataTabContainer .viewDataTabNav .tabMenu::after {
    background-color: var(--tab-highlight-color);
    transform: translateX(100%);
    transition-delay: 0;
    transition: opacity .5s, transform .3s ease-out
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu, .createDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .activeTabMenu, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .activeTabMenu, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .activeTabMenu, .viewDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .activeTabMenu, .createDataPopup #viewDataTabContainer .viewDataTabNav .activeTabMenu, .viewDataPopup #viewDataTabContainer .viewDataTabNav .activeTabMenu {
    color: var(--text-color);
    opacity: 1
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, .createDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, .viewDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, .createDataPopup #viewDataTabContainer .viewDataTabNav .activeTabMenu::before, .viewDataPopup #viewDataTabContainer .viewDataTabNav .activeTabMenu::before {
    transition: var(--transition2);
    transform: none
}

.multiStepDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, .createDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, #viewDataMenuPage #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, .viewDataPageWide #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, .viewDataPageNarrow #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, .viewDataPage #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, .viewDataPopupWide #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, .createDataPopup #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover, .viewDataPopup #viewDataTabContainer .viewDataTabNav .activeTabMenu:hover {
    color: var(--tab-highlight-color)
}

.multiStepDataPage #viewDataTabContainer .tabBarWrapper .tabBarSlide, .createDataPage #viewDataTabContainer .tabBarWrapper .tabBarSlide, #viewDataMenuPage #viewDataTabContainer .tabBarWrapper .tabBarSlide, .viewDataPageWide #viewDataTabContainer .tabBarWrapper .tabBarSlide, .viewDataPageNarrow #viewDataTabContainer .tabBarWrapper .tabBarSlide, .viewDataPage #viewDataTabContainer .tabBarWrapper .tabBarSlide, .viewDataPopupWide #viewDataTabContainer .tabBarWrapper .tabBarSlide, .createDataPopup #viewDataTabContainer .tabBarWrapper .tabBarSlide, .viewDataPopup #viewDataTabContainer .tabBarWrapper .tabBarSlide {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    display: flex;
    flex-wrap: wrap;
    height: 0;
    gap: 0 2%
}

.multiStepDataPage #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), .createDataPage #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), #viewDataMenuPage #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), .viewDataPageWide #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), .viewDataPageNarrow #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), .viewDataPage #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), .viewDataPopupWide #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), .createDataPopup #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1), .viewDataPopup #viewDataTabContainer .tabBarWrapper .tabBarSlide:nth-child(1) {
    height: auto
}

.multiStepDataPage .dropSection, .createDataPage .dropSection, #viewDataMenuPage .dropSection, .viewDataPageWide .dropSection, .viewDataPageNarrow .dropSection, .viewDataPage .dropSection, .viewDataPopupWide .dropSection, .createDataPopup .dropSection, .viewDataPopup .dropSection {
    margin-top: .7075rem
}

.multiStepDataPage .dropSection .dropList:nth-last-child(1)::before, .createDataPage .dropSection .dropList:nth-last-child(1)::before, #viewDataMenuPage .dropSection .dropList:nth-last-child(1)::before, .viewDataPageWide .dropSection .dropList:nth-last-child(1)::before, .viewDataPageNarrow .dropSection .dropList:nth-last-child(1)::before, .viewDataPage .dropSection .dropList:nth-last-child(1)::before, .viewDataPopupWide .dropSection .dropList:nth-last-child(1)::before, .createDataPopup .dropSection .dropList:nth-last-child(1)::before, .viewDataPopup .dropSection .dropList:nth-last-child(1)::before {
    display: none
}

.multiStepDataPage .dropSection .dropList .dropBox, .createDataPage .dropSection .dropList .dropBox, #viewDataMenuPage .dropSection .dropList .dropBox, .viewDataPageWide .dropSection .dropList .dropBox, .viewDataPageNarrow .dropSection .dropList .dropBox, .viewDataPage .dropSection .dropList .dropBox, .viewDataPopupWide .dropSection .dropList .dropBox, .createDataPopup .dropSection .dropList .dropBox, .viewDataPopup .dropSection .dropList .dropBox {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-top: .7075rem;
    padding-bottom: .7075rem;
    border-bottom: 1px solid var(--borderGray);
    background-color: var(--white)
}

.multiStepDataPage .dropSection .dropList .dropBox:hover .arrowBtn, .createDataPage .dropSection .dropList .dropBox:hover .arrowBtn, #viewDataMenuPage .dropSection .dropList .dropBox:hover .arrowBtn, .viewDataPageWide .dropSection .dropList .dropBox:hover .arrowBtn, .viewDataPageNarrow .dropSection .dropList .dropBox:hover .arrowBtn, .viewDataPage .dropSection .dropList .dropBox:hover .arrowBtn, .viewDataPopupWide .dropSection .dropList .dropBox:hover .arrowBtn, .createDataPopup .dropSection .dropList .dropBox:hover .arrowBtn, .viewDataPopup .dropSection .dropList .dropBox:hover .arrowBtn {
    border: 1px solid var(--inputColor1)
}

.multiStepDataPage .dropSection .dropList .dropBox:hover .arrowBtn i, .createDataPage .dropSection .dropList .dropBox:hover .arrowBtn i, #viewDataMenuPage .dropSection .dropList .dropBox:hover .arrowBtn i, .viewDataPageWide .dropSection .dropList .dropBox:hover .arrowBtn i, .viewDataPageNarrow .dropSection .dropList .dropBox:hover .arrowBtn i, .viewDataPage .dropSection .dropList .dropBox:hover .arrowBtn i, .viewDataPopupWide .dropSection .dropList .dropBox:hover .arrowBtn i, .createDataPopup .dropSection .dropList .dropBox:hover .arrowBtn i, .viewDataPopup .dropSection .dropList .dropBox:hover .arrowBtn i {
    color: var(--inputColor5)
}

.multiStepDataPage .dropSection .dropList .dropBox .title, .createDataPage .dropSection .dropList .dropBox .title, #viewDataMenuPage .dropSection .dropList .dropBox .title, .viewDataPageWide .dropSection .dropList .dropBox .title, .viewDataPageNarrow .dropSection .dropList .dropBox .title, .viewDataPage .dropSection .dropList .dropBox .title, .viewDataPopupWide .dropSection .dropList .dropBox .title, .createDataPopup .dropSection .dropList .dropBox .title, .viewDataPopup .dropSection .dropList .dropBox .title {
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 500
}

.multiStepDataPage .dropSection .dropList .dropBox .title i, .createDataPage .dropSection .dropList .dropBox .title i, #viewDataMenuPage .dropSection .dropList .dropBox .title i, .viewDataPageWide .dropSection .dropList .dropBox .title i, .viewDataPageNarrow .dropSection .dropList .dropBox .title i, .viewDataPage .dropSection .dropList .dropBox .title i, .viewDataPopupWide .dropSection .dropList .dropBox .title i, .createDataPopup .dropSection .dropList .dropBox .title i, .viewDataPopup .dropSection .dropList .dropBox .title i {
    color: var(--textGray);
    margin-right: .7075rem
}

.multiStepDataPage .dropSection .dropList .dropBox .arrowBtn, .createDataPage .dropSection .dropList .dropBox .arrowBtn, #viewDataMenuPage .dropSection .dropList .dropBox .arrowBtn, .viewDataPageWide .dropSection .dropList .dropBox .arrowBtn, .viewDataPageNarrow .dropSection .dropList .dropBox .arrowBtn, .viewDataPage .dropSection .dropList .dropBox .arrowBtn, .viewDataPopupWide .dropSection .dropList .dropBox .arrowBtn, .createDataPopup .dropSection .dropList .dropBox .arrowBtn, .viewDataPopup .dropSection .dropList .dropBox .arrowBtn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--inputColor1);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, 0);
    transition: var(--transition1)
}

.multiStepDataPage .dropSection .dropList .dropContent, .createDataPage .dropSection .dropList .dropContent, #viewDataMenuPage .dropSection .dropList .dropContent, .viewDataPageWide .dropSection .dropList .dropContent, .viewDataPageNarrow .dropSection .dropList .dropContent, .viewDataPage .dropSection .dropList .dropContent, .viewDataPopupWide .dropSection .dropList .dropContent, .createDataPopup .dropSection .dropList .dropContent, .viewDataPopup .dropSection .dropList .dropContent {
    padding-top: .7075rem;
    padding-bottom: .7075rem;
    display: none;
    flex-wrap: wrap;
    gap: 2%;
    background: var(--bg-color)
}

.multiStepDataPage .dropSection .dropList .dropContent .heading, .createDataPage .dropSection .dropList .dropContent .heading, #viewDataMenuPage .dropSection .dropList .dropContent .heading, .viewDataPageWide .dropSection .dropList .dropContent .heading, .viewDataPageNarrow .dropSection .dropList .dropContent .heading, .viewDataPage .dropSection .dropList .dropContent .heading, .viewDataPopupWide .dropSection .dropList .dropContent .heading, .createDataPopup .dropSection .dropList .dropContent .heading, .viewDataPopup .dropSection .dropList .dropContent .heading {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: .7075rem;
    border-left: 3px solid var(--highlight);
    padding-left: 10px;
    color: var(--black);
    font-weight: 500
}

.multiStepDataPage .dropSection .dropList .dropContent .checkboxDropDownGroup, .createDataPage .dropSection .dropList .dropContent .checkboxDropDownGroup, #viewDataMenuPage .dropSection .dropList .dropContent .checkboxDropDownGroup, .viewDataPageWide .dropSection .dropList .dropContent .checkboxDropDownGroup, .viewDataPageNarrow .dropSection .dropList .dropContent .checkboxDropDownGroup, .viewDataPage .dropSection .dropList .dropContent .checkboxDropDownGroup, .viewDataPopupWide .dropSection .dropList .dropContent .checkboxDropDownGroup, .createDataPopup .dropSection .dropList .dropContent .checkboxDropDownGroup, .viewDataPopup .dropSection .dropList .dropContent .checkboxDropDownGroup {
    padding: 0
}

.multiStepDataPage .dropSection .dropList .dropContent .checkboxListDiv, .createDataPage .dropSection .dropList .dropContent .checkboxListDiv, #viewDataMenuPage .dropSection .dropList .dropContent .checkboxListDiv, .viewDataPageWide .dropSection .dropList .dropContent .checkboxListDiv, .viewDataPageNarrow .dropSection .dropList .dropContent .checkboxListDiv, .viewDataPage .dropSection .dropList .dropContent .checkboxListDiv, .viewDataPopupWide .dropSection .dropList .dropContent .checkboxListDiv, .createDataPopup .dropSection .dropList .dropContent .checkboxListDiv, .viewDataPopup .dropSection .dropList .dropContent .checkboxListDiv {
    padding: 0
}

.multiStepDataPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, .createDataPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, #viewDataMenuPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, .viewDataPageWide .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, .viewDataPageNarrow .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, .viewDataPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, .viewDataPopupWide .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, .createDataPopup .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox, .viewDataPopup .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropBox {
    padding: 10px
}

.multiStepDataPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, .createDataPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, #viewDataMenuPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, .viewDataPageWide .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, .viewDataPageNarrow .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, .viewDataPage .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, .viewDataPopupWide .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, .createDataPopup .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent, .viewDataPopup .dropSection .dropList .dropContent .checkboxListDiv .dropList .dropContent {
    padding: 10px
}

.multiStepDataPage .dropSection .dropList .dropContent p, .createDataPage .dropSection .dropList .dropContent p, #viewDataMenuPage .dropSection .dropList .dropContent p, .viewDataPageWide .dropSection .dropList .dropContent p, .viewDataPageNarrow .dropSection .dropList .dropContent p, .viewDataPage .dropSection .dropList .dropContent p, .viewDataPopupWide .dropSection .dropList .dropContent p, .createDataPopup .dropSection .dropList .dropContent p, .viewDataPopup .dropSection .dropList .dropContent p {
    line-height: 1.5
}

.multiStepDataPage .dropSection .dropList .dropContent p span, .createDataPage .dropSection .dropList .dropContent p span, #viewDataMenuPage .dropSection .dropList .dropContent p span, .viewDataPageWide .dropSection .dropList .dropContent p span, .viewDataPageNarrow .dropSection .dropList .dropContent p span, .viewDataPage .dropSection .dropList .dropContent p span, .viewDataPopupWide .dropSection .dropList .dropContent p span, .createDataPopup .dropSection .dropList .dropContent p span, .viewDataPopup .dropSection .dropList .dropContent p span {
    line-height: 1.5
}

.multiStepDataPage .dropSection .dropList .dropContent .formBox, .createDataPage .dropSection .dropList .dropContent .formBox, #viewDataMenuPage .dropSection .dropList .dropContent .formBox, .viewDataPageWide .dropSection .dropList .dropContent .formBox, .viewDataPageNarrow .dropSection .dropList .dropContent .formBox, .viewDataPage .dropSection .dropList .dropContent .formBox, .viewDataPopupWide .dropSection .dropList .dropContent .formBox, .createDataPopup .dropSection .dropList .dropContent .formBox, .viewDataPopup .dropSection .dropList .dropContent .formBox {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
    border: 1px solid var(--borderGray);
    padding: .7075rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, .1) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px
}

.multiStepDataPage .dropSection .dropList .dropContent .addSectionBtn, .createDataPage .dropSection .dropList .dropContent .addSectionBtn, #viewDataMenuPage .dropSection .dropList .dropContent .addSectionBtn, .viewDataPageWide .dropSection .dropList .dropContent .addSectionBtn, .viewDataPageNarrow .dropSection .dropList .dropContent .addSectionBtn, .viewDataPage .dropSection .dropList .dropContent .addSectionBtn, .viewDataPopupWide .dropSection .dropList .dropContent .addSectionBtn, .createDataPopup .dropSection .dropList .dropContent .addSectionBtn, .viewDataPopup .dropSection .dropList .dropContent .addSectionBtn {
    min-width: 120px;
    margin: 0 auto;
    display: flex;
    padding-left: 1rem;
    color: var(--black);
    border: 2px solid var(--color2);
    border-radius: 3rem;
    justify-self: center
}

.multiStepDataPage .dropSection .dropList .dropContent .addSectionBtn:hover, .createDataPage .dropSection .dropList .dropContent .addSectionBtn:hover, #viewDataMenuPage .dropSection .dropList .dropContent .addSectionBtn:hover, .viewDataPageWide .dropSection .dropList .dropContent .addSectionBtn:hover, .viewDataPageNarrow .dropSection .dropList .dropContent .addSectionBtn:hover, .viewDataPage .dropSection .dropList .dropContent .addSectionBtn:hover, .viewDataPopupWide .dropSection .dropList .dropContent .addSectionBtn:hover, .createDataPopup .dropSection .dropList .dropContent .addSectionBtn:hover, .viewDataPopup .dropSection .dropList .dropContent .addSectionBtn:hover {
    color: var(--color2)
}

.multiStepDataPage .popupCloseBg, .createDataPage .popupCloseBg, #viewDataMenuPage .popupCloseBg, .viewDataPageWide .popupCloseBg, .viewDataPageNarrow .popupCloseBg, .viewDataPage .popupCloseBg, .viewDataPopupWide .popupCloseBg, .createDataPopup .popupCloseBg, .viewDataPopup .popupCloseBg {
    width: 95%
}

.viewDataTabMenu {
    order: 1;
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: flex;
    align-items: center;
    overflow-x: auto;
    border-bottom: 1px solid var(--borderGray);
    overflow: hidden
}

.viewDataTabMenu:hover .activeTabMenu {
    color: var(--text-color)
}

.viewDataTabMenu:hover .activeTabMenu::after {
    transform: translateX(100%);
    background-color: rgba(0, 0, 0, 0)
}

.viewDataTabMenu:hover .activeTabMenu::before {
    width: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: var(--transition2)
}

.viewDataTabMenu a {
    min-width: min-content;
    display: flex;
    align-items: center;
    color: var(--text-color);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    padding: .7075rem 1rem;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-transform: capitalize;
    transition: var(--transition1);
    opacity: .65;
    cursor: pointer
}

@media (min-width: 768px) {
    .viewDataTabMenu a {
        font-size: 1rem
    }
}

@media (min-width: 1800px) {
    .viewDataTabMenu a {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.viewDataTabMenu a i {
    font-size: .878rem;
    margin-right: 10px
}

.viewDataTabMenu a i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 30px;
    height: 30px;
    border-radius: var(--radius)
}

.viewDataTabMenu a:hover {
    opacity: 1;
    color: var(--highlight)
}

.viewDataTabMenu a:hover::after {
    transform: none;
    transition: none;
    background-color: rgba(0, 0, 0, 0)
}

.viewDataTabMenu a:hover::before {
    width: 100%;
    background-color: var(--highlight);
    transition: var(--transition2)
}

.viewDataTabMenu a::after, .viewDataTabMenu a:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 2rem
}

.viewDataTabMenu a::after {
    background-color: var(--highlight);
    transform: translateX(100%);
    transition: transform .3s ease-out
}

.viewDataTabMenu .activeTabMenu {
    opacity: 1
}

.viewDataTabMenu .activeTabMenu::before {
    width: 100%;
    background-color: var(--highlight);
    transition: var(--transition2)
}

.viewDataTabMenu .activeTabMenu:hover {
    opacity: 1;
    color: var(--tab-highlight-color)
}

.horizontalLayout {
    display: flex;
    flex-direction: column
}

@media (min-width: 768px) {
    .horizontalLayout {
        flex-direction: row;
        align-items: center
    }
}

.horizontalLayout .content {
    flex: 1;
    order: 2
}

@media (min-width: 768px) {
    .horizontalLayout .content {
        order: 1
    }
}

.horizontalLayout .content .titleDiv {
    padding-top: 0
}

.horizontalLayout .avatarView {
    order: 1
}

@media (min-width: 768px) {
    .horizontalLayout .avatarView {
        order: 2;
        width: calc(var(--porfile-width));
        margin: .7075rem
    }
}

.horizontalLayout .avatarView::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--borderGray)
}

@media (min-width: 768px) {
    .horizontalLayout .avatarView::before {
        height: 100%;
        width: 1px
    }
}

.multipleDocumentList {
    margin: 0 auto;
    width: 100%;
    max-width: 700px;
    padding: .7075rem;
    border-radius: var(--radius);
    border: 1px solid var(--lightGray);
    box-shadow: rgba(17, 12, 46, .15) 0px 48px 100px 0px
}

.multipleDocumentList .uploadInput {
    width: 100%;
    margin-bottom: .7075rem
}

.multipleDocumentList .fileDetailsInputDiv .inputBox {
    display: flex;
    width: 100%
}

.multipleDocumentList .fileDetailsInputDiv .inputBox selector {
    width: 150px
}

.multipleDocumentList .fileDetailsInputDiv .inputBox input {
    flex: 1
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn {
    font-weight: 500;
    color: var(--color1);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--color1);
    margin: 0;
    min-width: 100px
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn:hover {
    opacity: .8
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.secondary {
    border: 1px solid var(--color2)
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.tertiary {
    border: 1px solid var(--color3)
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.black {
    color: var(--black);
    border: 1px solid var(--black)
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.white {
    color: var(--white);
    border: 1px solid var(--white)
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.gray {
    color: var(--textGray);
    border: 1px solid var(--textGray)
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.red {
    color: var(--red);
    border: 1px solid var(--red)
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.green {
    color: var(--green);
    border: 1px solid var(--green)
}

.multipleDocumentList .fileDetailsInputDiv .inputBox #documentUploadBtn.blue {
    color: var(--blue);
    border: 1px solid var(--blue)
}

.surveyForm {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%)
}

.surveyForm .heading {
    width: 100%;
    border-left: 3px solid var(--highlight);
    padding-left: 10px;
    margin: .7075rem 0
}

.surveyForm .heading:nth-child(1) {
    margin-top: 0
}

.surveyForm .inputDiv {
    width: 100%;
    padding: 1rem 0;
    padding-left: 1rem;
    margin: 0;
    border-bottom: 1px solid var(--borderGray);
    counter-increment: titleCounter 1
}

@media (min-width: 568px) {
    .surveyForm .inputDiv {
        padding-left: .7075rem
    }
}

@media (min-width: 1024px) {
    .surveyForm .inputDiv {
        padding-left: 2rem
    }
}

.surveyForm .inputDiv::before {
    content: counter(titleCounter) ". ";
    position: absolute;
    top: 1rem;
    left: 0;
    color: var(--textGray)
}

.surveyForm .inputDiv:nth-last-child(1) {
    border-bottom: none
}

.surveyForm .inputDiv label {
    white-space: wrap
}

.surveyForm .inputDiv .options {
    margin-top: 0;
    justify-content: flex-start
}

#viewAdditionalDetails {
    width: 100%;
    background: var(--white);
    border-radius: var(--btnRadius) var(--btnRadius) 0 0;
    border-top: 1px solid var(--borderGray);
    overflow: hidden
}

@media (min-width: 768px) {
    #viewAdditionalDetails {
        border-radius: 0
    }
}

#viewAdditionalDetails #viewAdditionalDetailsNav {
    width: 100%;
    overflow-x: auto;
    --number-of-tabs: 3;
    padding: 1rem
}

@media (min-width: 768px) {
    #viewAdditionalDetails #viewAdditionalDetailsNav {
        padding: 8px 1rem
    }
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab {
    width: 100%;
    margin: 0 auto;
    display: flex;
    text-align: center
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 16px);
    height: calc(100% + 14px);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 17.98rem;
    transform: translate(-50%, -50%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab:hover .tabMenu {
    color: var(--gray)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab:hover .tabMenu::before {
    background-color: rgba(0, 0, 0, 0)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab:hover .activeTabMenu {
    color: var(--white)
}

@media (min-width: 768px) {
    #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab:hover .activeTabMenu {
        color: var(--black)
    }
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab:hover .tabMenuBorder {
    opacity: 1;
    background-color: var(--tab-highlight-color)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu {
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray);
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
    padding: 13px 5px;
    border-radius: .7075rem;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu {
        font-size: 1rem
    }
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 94%;
    border-radius: 17.98rem;
    letter-spacing: 1px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, 0);
    z-index: -1;
    transition: var(--transition1)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:hover {
    color: var(--tab-highlight-text-color)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:hover ~ .tabMenuBorder {
    background-color: var(--tab-highlight-color)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:active ~ .tabMenuBorder {
    background-color: var(--tab-highlight-color);
    opacity: 1;
    transition: all 250ms ease-out
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu img {
    width: 25px
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu i {
    top: 1px;
    font-size: .878rem
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu i, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu img {
    margin-right: 10px
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(1).active ~ .tabMenuBorder {
    transform: translateX(0%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(1):hover ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(1):hover ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(1):focus ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(1):focus ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(1):active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(1):active ~ .active ~ .tabMenuBorder {
    transform: translateX(0%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(2).active ~ .tabMenuBorder {
    transform: translateX(100%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(2):hover ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(2):hover ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(2):focus ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(2):focus ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(2):active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(2):active ~ .active ~ .tabMenuBorder {
    transform: translateX(100%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(3).active ~ .tabMenuBorder {
    transform: translateX(200%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(3):hover ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(3):hover ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(3):focus ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(3):focus ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(3):active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(3):active ~ .active ~ .tabMenuBorder {
    transform: translateX(200%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(4).active ~ .tabMenuBorder {
    transform: translateX(300%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(4):hover ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(4):hover ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(4):focus ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(4):focus ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(4):active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(4):active ~ .active ~ .tabMenuBorder {
    transform: translateX(300%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(5).active ~ .tabMenuBorder {
    transform: translateX(400%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(5):hover ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(5):hover ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(5):focus ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(5):focus ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(5):active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(5):active ~ .active ~ .tabMenuBorder {
    transform: translateX(400%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(6).active ~ .tabMenuBorder {
    transform: translateX(500%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(6):hover ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(6):hover ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(6):focus ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(6):focus ~ .active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(6):active ~ .tabMenuBorder, #viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenu:nth-child(6):active ~ .active ~ .tabMenuBorder {
    transform: translateX(500%)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .activeTabMenu {
    color: var(--tab-highlight-text-color);
    font-weight: 500
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .activeTabMenu::before {
    background-color: var(--tab-highlight-color)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .activeTabMenu:hover {
    color: var(--white)
}

#viewAdditionalDetails #viewAdditionalDetailsNav .slideNavTab .tabMenuBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    border: 0;
    border-radius: 17.98rem;
    background-color: var(--tab-highlight-color);
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all 375ms ease-out;
    will-change: transform, background;
    opacity: 0
}

#viewAdditionalDetails .tabBarWrapper {
    height: 100%
}

#viewAdditionalDetails .tabBarWrapper .tabBarSlide {
    height: 90vh;
    overflow: auto
}

#viewAdditionalDetails .tabBarWrapper .tabBarSlide #notesContainer, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #callSummarySection, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #logContainer {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-top: var(--section-space-y);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 150px
}

#viewAdditionalDetails .tabBarWrapper .tabBarSlide #notesContainer::-webkit-scrollbar, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #callSummarySection::-webkit-scrollbar, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #logContainer::-webkit-scrollbar {
    display: none
}

#viewAdditionalDetails .tabBarWrapper .tabBarSlide #notesContainer::-webkit-scrollbar-track, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #notesContainer::-webkit-scrollbar-thumb, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #notesContainer::-webkit-scrollbar-thumb:window-inactive, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #callSummarySection::-webkit-scrollbar-track, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #callSummarySection::-webkit-scrollbar-thumb, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #callSummarySection::-webkit-scrollbar-thumb:window-inactive, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #logContainer::-webkit-scrollbar-track, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #logContainer::-webkit-scrollbar-thumb, #viewAdditionalDetails .tabBarWrapper .tabBarSlide #logContainer::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 0, 0, 0);
    cursor: grab;
    opacity: 0
}

#notesContainer {
    display: flex;
    flex-direction: column;
    gap: 20px 0
}

#notesContainer .note {
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px 5px;
    padding: 5px 0
}

#notesContainer .note .avatar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: top;
    border-radius: 100%;
    margin-right: 10px
}

#notesContainer .note .noteText {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px 0;
    padding: 1rem;
    background-color: var(--lightGray);
    border-radius: 0 1rem 1rem 1rem
}

#notesContainer .note .noteText::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    z-index: 100;
    display: block;
    width: 20px;
    height: 8px;
    background-color: inherit;
    border-radius: 3px 0 10px 10px;
    pointer-events: none
}

#notesContainer .note .noteText::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    top: 6.5px;
    left: -16px;
    box-shadow: 9px 9px 0 0 var(--lightGray);
    pointer-events: none;
    transform: rotate(284deg)
}

#notesContainer .note .noteText .name {
    color: var(--black);
    font-size: .878rem;
    font-weight: 500
}

#notesContainer .note .noteText p {
    margin: 0;
    color: var(--black);
    font-size: .937rem;
    line-height: 1.5;
    font-weight: 400;
    overflow-wrap: break-word
}

#notesContainer .note .noteText span {
    font-size: .733rem;
    font-weight: 400;
    display: block;
    opacity: .7
}

#notesContainer [user=myself] {
    align-items: flex-end;
    margin-left: auto
}

#notesContainer [user=myself] .profileMinimal .avatar {
    margin: 0
}

#notesContainer [user=myself] .noteText {
    border-radius: 1rem 0 1rem 1rem;
    margin-left: auto
}

#notesContainer [user=myself] .noteText::before {
    top: 0;
    left: unset;
    right: -8px;
    border-radius: 0 3px 10px 10px
}

#notesContainer [user=myself] .noteText::after {
    left: unset;
    right: -15px;
    transform: rotate(164deg)
}

#notesContainer [user=myself] .noteText .name {
    display: none
}

#notesContainer #chatEditor {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 101;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: var(--lightGray)
}

#notesContainer #chatEditor::before {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: #040404;
    background: linear-gradient(0deg, var(--lightGray) 8%, rgba(255, 255, 255, 0) 100%)
}

#notesContainer #chatEditor #noteInputElement {
    height: 70px;
    min-height: 70px;
    width: 100%;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    padding: 0 .7075rem;
    background-color: var(--white);
    border-radius: var(--btnRadius);
    overflow: hidden;
    box-shadow: none
}

#notesContainer #chatEditor #noteInputElement::placeholder {
    color: var(--gray);
    font-weight: 400
}

#notesContainer #chatEditor #noteInputElement:focus, #notesContainer #chatEditor #noteInputElement:active, #notesContainer #chatEditor #noteInputElement:valid {
    box-shadow: none
}

#notesContainer #chatEditor #noteInputElement:focus + button, #notesContainer #chatEditor #noteInputElement:active + button {
    color: var(--white);
    background-color: var(--highlight);
    transform: translateY(-50%)
}

#notesContainer #chatEditor button {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    margin: 0;
    margin-left: auto;
    border-radius: var(--btnRadius);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    color: var(--gray);
    background-color: var(--inputColor1)
}

#notesContainer #chatEditor button i {
    transform: none
}

#notesContainer #chatEditor .editorField {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 .7075rem;
    transform: translateY(80px)
}

#notesContainer #chatEditor .editorField::before {
    content: "";
    position: absolute;
    top: -56px;
    right: 44px;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: var(--transition2);
    cursor: pointer
}

#notesContainer #chatEditor .editorField .editorTool {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: var(--transition2);
    overflow: hidden
}

#notesContainer #chatEditor .editorField #chatFileUploadField, #notesContainer #chatEditor .editorField #chatCameraField {
    display: none;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    margin-right: .5rem
}

#notesContainer #chatEditor .editorField #chatFileUploadField::before, #notesContainer #chatEditor .editorField #chatCameraField::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    cursor: pointer
}

#notesContainer #chatEditor .editorField #chatFileUploadField::before {
    content: "";
    color: var(--gray);
    background-color: var(--borderGray)
}

#notesContainer #chatEditor .editorField #chatCameraField::before {
    content: "";
    color: var(--gray);
    background-color: var(--borderGray)
}

#notesContainer #chatEditor .editorField #voiceRecordField {
    display: none;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    overflow: hidden;
    margin-left: .5rem
}

#notesContainer #chatEditor .editorField #voiceRecordField::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inputColor2);
    background-color: var(--color1);
    background: var(--gradient1);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    cursor: pointer
}

#callSummarySection .callSummaryNoteList {
    width: 100%
}

#callSummarySection .callSummaryNoteList .callSummaryNote {
    border-bottom: 1px solid var(--borderGray);
    padding: 1rem 0
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv {
    display: flex;
    flex-direction: column
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv {
    display: flex;
    align-items: center;
    justify-content: space-between
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .profileMinimal .avatar img {
    width: 30px;
    height: 30px
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .profileMinimal .profile p {
    font-size: .733rem
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .details {
    text-align: right
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .details .mode {
    margin: 0;
    display: block;
    color: var(--highlight);
    font-size: .878rem;
    font-weight: 600;
    text-transform: uppercase
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .details .dateText {
    margin-top: 5px;
    display: block;
    color: var(--gray);
    font-size: .937rem;
    font-weight: 400
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .deleteReminderBtn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    background-color: var(--white);
    margin: 0;
    margin-left: auto;
    border-radius: 100%
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .deleteReminderBtn:hover {
    color: #ea5252;
    background-color: #fff8f8
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .detailsDiv .deleteReminderBtn i {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .note {
    margin: 1rem 0
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .note .label {
    margin: 0;
    color: var(--black);
    font-size: .878rem;
    font-weight: 500
}

#callSummarySection .callSummaryNoteList .callSummaryNote .noteDiv .note .text {
    margin-top: 5px;
    width: 100%;
    color: var(--darkGray);
    font-size: .937rem;
    font-weight: 400;
    line-height: 1.3
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction button, #callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction a {
    margin: 0;
    padding: .6rem .75rem;
    font-size: .937rem
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction .postponeReminderBtn {
    color: #ff4500;
    background-color: var(--white);
    border: 1px solid #ffdccf;
    margin-right: 1rem
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction .postponeReminderBtn:hover {
    color: var(--white);
    background-color: #ff4500;
    border: 1px solid rgba(0, 0, 0, 0)
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction .completeReminderBtn {
    min-width: 107px;
    background-color: #f0fff0;
    color: #00b400;
    border: 1px solid #bde2bd
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction .completeReminderBtn:hover {
    color: var(--white);
    background-color: #00b400;
    border: 1px solid rgba(0, 0, 0, 0)
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction .cancelReminderBtn {
    margin-left: auto;
    background-color: var(--lightGray);
    color: var(--gray);
    border: 1px solid var(--borderGray)
}

#callSummarySection .callSummaryNoteList .callSummaryNote .callSummaryAction .cancelReminderBtn:hover {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--black)
}

#callSummarySection #viewFollowUpPopupBtn {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    will-change: transform
}

#callSummarySection #viewFollowUpPopupBtn:hover {
    transform: scale(1.2);
    transition: var(--transition1)
}

#callSummarySection #viewFollowUpPopupBtn i {
    will-change: transform
}

#callSummarySection .contactSummaryForm {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    padding-bottom: 10px;
    background-color: var(--lightGray);
    transition: var(--transition2)
}

#callSummarySection .contactSummaryForm .contactSummaryClose {
    display: none
}

#callSummarySection .contactSummaryForm .contactSummaryNote {
    height: 70px;
    min-height: 70px;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    padding: 1.5rem .7075rem;
    padding-right: 60px;
    background-color: var(--white);
    border-radius: 2rem;
    border: 1px solid var(--borderGray);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .048) 0px 1px 2px 0px;
    transition: var(--transition2)
}

@media (min-width: 1024px) {
    #callSummarySection .contactSummaryForm .contactSummaryNote {
        box-shadow: none
    }
}

#callSummarySection .contactSummaryForm .contactSummaryNote::placeholder {
    color: var(--textGray);
    font-weight: 300
}

#callSummarySection .contactSummaryForm .contactSummaryNote:focus, #callSummarySection .contactSummaryForm .contactSummaryNote:active {
    box-shadow: none
}

#callSummarySection .contactSummaryForm .contactSummaryNote:focus + .contactOptions #addCallLogButton, #callSummarySection .contactSummaryForm .contactSummaryNote:active + .contactOptions #addCallLogButton {
    color: var(--white);
    background-color: var(--color1)
}

#callSummarySection .contactSummaryForm .contactOptions {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    gap: 2%;
    padding-left: .7075rem;
    padding-right: .7075rem;
    padding-top: .7075rem;
    pointer-events: none;
    transition: var(--transition1)
}

#callSummarySection .contactSummaryForm .contactOptions select, #callSummarySection .contactSummaryForm .contactOptions input, #callSummarySection .contactSummaryForm .contactOptions label {
    flex: 1 !important;
    display: none;
    opacity: 0
}

#callSummarySection .contactSummaryForm .contactOptions .remiderSwitch, #callSummarySection .contactSummaryForm .contactOptions label {
    flex: unset !important;
    position: absolute;
    top: -32px;
    right: .65rem;
    background-color: var(--lightGray);
    padding: 8px 8px;
    border: 1px solid var(--borderGray);
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
    margin: 0
}

@media (min-width: 768px) {
    #callSummarySection .contactSummaryForm .contactOptions .remiderSwitch, #callSummarySection .contactSummaryForm .contactOptions label {
        position: relative;
        top: unset;
        right: unset;
        padding: 0;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        border-radius: 0
    }
}

#callSummarySection .contactSummaryForm .contactOptions .remiderSwitch input, #callSummarySection .contactSummaryForm .contactOptions label input {
    border: 1px solid var(--inputColor2);
    box-shadow: 0 0 0 1px var(--inputColor3) inset
}

#callSummarySection .contactSummaryForm .contactOptions select, #callSummarySection .contactSummaryForm .contactOptions input {
    width: auto;
    font-size: .937rem;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 1rem;
    background-color: var(--lightGray)
}

#callSummarySection .contactSummaryForm .contactOptions label {
    font-size: .937rem
}

#callSummarySection .contactSummaryForm .contactOptions [type=datetime-local] {
    flex: 1;
    text-transform: uppercase
}

@media (min-width: 568px) {
    #callSummarySection .contactSummaryForm .contactOptions [type=datetime-local] {
        flex: none
    }
}

#callSummarySection .contactSummaryForm .contactOptions button {
    position: fixed;
    bottom: 1.15rem;
    right: 1.25rem;
    width: 55px;
    height: 55px;
    margin: 0;
    margin-left: auto;
    border-radius: 7.99rem;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    background-color: var(--borderGray)
}

@media (min-width: 1024px) {
    #callSummarySection .contactSummaryForm .contactOptions button {
        right: 1.15rem
    }
}

#callSummarySection .contactSummaryForm .contactOptions button i {
    transform: none
}

#callSummarySection .contactSummaryFormIntro {
    transition: var(--transition1)
}

#callSummarySection .contactSummaryFormIntro .contactSummaryNote {
    box-shadow: none;
    height: 150px;
    min-height: 150px;
    padding-top: 60px;
    border-radius: 1rem 0 1rem 1rem;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    #callSummarySection .contactSummaryFormIntro .contactSummaryNote {
        border-radius: 1rem
    }
}

#callSummarySection .contactSummaryFormIntro .contactSummaryClose {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex
}

#callSummarySection .contactSummaryFormIntro .contactOptions {
    pointer-events: all;
    padding-top: 1rem
}

@media (min-width: 768px) {
    #callSummarySection .contactSummaryFormIntro .contactOptions {
        padding-top: .7075rem
    }
}

#callSummarySection .contactSummaryFormIntro .contactOptions select, #callSummarySection .contactSummaryFormIntro .contactOptions input, #callSummarySection .contactSummaryFormIntro .contactOptions label {
    display: flex;
    align-items: center;
    opacity: 1;
    transition-delay: .5s
}

#logContainer li {
    padding-top: 1rem;
    padding-left: 2rem;
    padding-bottom: 1rem
}

#logContainer li:nth-last-child(1) {
    border-bottom: none;
    padding-bottom: 0
}

#logContainer li:nth-last-child(1)::after {
    display: none
}

#logContainer li:nth-last-child(1)::before {
    background-color: var(--inputColor4);
    border: 1px solid var(--inputColor3);
    box-shadow: 0px 0px 0px 8px var(--inputColor1);
    animation: circle-pulse 2s infinite
}

@keyframes circle-pulse {
    0% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-box-shadow: 0 0 0 0 var(--inputColor2);
        box-shadow: 0 0 0 0 var(--inputColor2)
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1.2);
        -webkit-box-shadow: 0 0 0 var(--inputColor1);
        box-shadow: 0 0 0 8px var(--inputColor1)
    }
    100% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-box-shadow: 0 0 0 0 var(--inputColor1);
        box-shadow: 0 0 0 0 var(--inputColor1)
    }
}

#logContainer li::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 5px;
    width: 1px;
    height: 100%;
    border-left: 1px solid var(--borderGray)
}

#logContainer li::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: .7075rem;
    background-color: #d2d3d3;
    border: 1px solid #d2d3d3;
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0);
    z-index: 1
}

#logContainer li .title {
    margin: 0;
    font-size: .937rem;
    font-weight: 500;
    text-transform: capitalize
}

#logContainer li .description {
    margin-top: 8px;
    font-size: .878rem
}

#logContainer li .details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem
}

#logContainer li .details .profileMinimal img {
    width: 30px;
    height: 30px
}

#logContainer li .details .profileMinimal .name {
    font-size: .733rem
}

#logContainer li .details .dateText {
    margin: 0;
    color: var(--darkGray);
    font-size: .733rem
}

.viewDataPopup {
    min-height: 100vh;
    background-color: var(--white);
    box-shadow: #32325d 0px 100px 10px -20px, rgba(0, 0, 0, .38) 0px 30px 60px -30px;
    transform: translateX(100%);
    padding-top: 0;
    overflow: hidden;
    transition: var(--transition2)
}

@media (min-width: 768px) {
    .viewDataPopup {
        max-width: 600px;
        border-left: 1px solid var(--borderGray)
    }
}

.viewDataPopup.popupIntro {
    transform: none
}

.viewDataPopup .viewDataNavSection {
    position: absolute
}

.viewDataPopup .viewDataNavSection .backBtn i {
    left: 0px;
    transform: rotate(180deg)
}

.viewDataPopup .viewDataDetailsSection {
    height: 100vh;
    padding-top: 55px;
    overflow-y: auto
}

.viewDataPopup .mainDetails {
    padding-top: 0;
    padding-bottom: 2rem
}

.viewDataPopup #viewAdditionalDetails #viewAdditionalDetailsNav {
    position: sticky
}

@media (min-width: 1280px) {
    .viewDataPopup #viewAdditionalDetails #viewAdditionalDetailsNav {
        position: relative;
        top: unset
    }
}

@media (min-width: 768px) {
    .viewDataPopup #viewAdditionalDetails #chatEditor, .viewDataPopup #viewAdditionalDetails .contactSummaryForm {
        max-width: 599px;
        border-radius: 0;
        border: none;
        padding: 10px
    }
}

@media (min-width: 768px) {
    .viewDataPopup #viewAdditionalDetails #chatEditor .contactOptions, .viewDataPopup #viewAdditionalDetails .contactSummaryForm .contactOptions {
        padding-left: calc(var(--menuBarWidth) + 30px)
    }
}

@media (min-width: 1280px) {
    .viewDataPopup #viewAdditionalDetails #chatEditor .contactOptions, .viewDataPopup #viewAdditionalDetails .contactSummaryForm .contactOptions {
        padding: 0 20px;
        padding-top: 20px
    }
}

.viewDataPopup .popupCloseBg {
    background-color: rgba(0, 0, 0, 0)
}

.createDataPopup {
    min-height: 100vh;
    background-color: var(--white);
    box-shadow: #32325d 0px 100px 10px -20px, rgba(0, 0, 0, .38) 0px 30px 60px -30px;
    right: -120%;
    padding-top: 0;
    overflow: hidden;
    transition: var(--transition2)
}

@media (min-width: 768px) {
    .createDataPopup {
        max-width: 600px;
        border-left: 1px solid var(--borderGray)
    }
}

.createDataPopup .viewDataNavSection {
    position: absolute
}

.createDataPopup .viewDataNavSection .backBtn {
    order: 3;
    margin-left: auto
}

.createDataPopup .viewDataNavSection .detailsDiv {
    order: 1
}

.createDataPopup .viewDataNavSection .moreOptionDiv, .createDataPopup .viewDataNavSection .moreBtn {
    order: 2
}

.createDataPopup .viewDataNavSection .btnDiv {
    position: fixed;
    top: unset;
    bottom: 0;
    right: 0
}

@media (min-width: 768px) {
    .createDataPopup .viewDataNavSection .btnDiv {
        max-width: 600px
    }
}

.createDataPopup .viewDataNavSection .btnDiv a, .createDataPopup .viewDataNavSection .btnDiv button {
    max-width: 200px
}

.createDataPopup .viewDataDetailsSection {
    height: 100vh;
    padding-top: 0;
    padding-bottom: 100px;
    overflow-y: auto
}

.createDataPopup .mainDetails {
    padding: 0
}

.createDataPopup .popupCloseBg {
    background-color: rgba(0, 0, 0, 0)
}

.viewDataPopupWide {
    min-height: 100vh;
    background-color: var(--white);
    box-shadow: rgba(50, 50, 93, .25) 0px 100px 10px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
    right: 120%;
    overflow: hidden;
    transition: var(--transition2)
}

@media (min-width: 768px) {
    .viewDataPopupWide {
        max-width: 600px
    }
}

@media (min-width: 1024px) {
    .viewDataPopupWide {
        max-width: 1000px;
        border-left: 1px solid var(--borderGray)
    }
}

@media (min-width: 1024px) {
    .viewDataPopupWide .viewDataNavSection {
        padding-right: 500px
    }
}

.viewDataPopupWide .viewDataNavSection .viewDataNav {
    order: 1
}

.viewDataPopupWide .viewDataNavSection .navMenu {
    order: 4;
    border-top: 1px solid var(--borderGray)
}

.viewDataPopupWide .viewDataNavSection .moreBtn {
    order: 2
}

.viewDataPopupWide .viewDataNavSection .popupCloseIcon, .viewDataPopupWide .viewDataNavSection .backBtn {
    order: 3
}

.viewDataPopupWide .viewDataDetailsSection {
    width: 100%;
    height: 100vh;
    padding-top: 55px;
    overflow-y: auto
}

.viewDataPopupWide .mainDetails {
    padding-bottom: 2rem
}

@media (min-width: 1024px) {
    .viewDataPopupWide .mainDetails {
        padding-right: 500px
    }
}

@media (min-width: 1024px) {
    .viewDataPopupWide #viewAdditionalDetails {
        position: fixed;
        top: 0;
        right: 0;
        width: 500px;
        height: 100vh
    }
}

.viewDataPopupWide #chatEditor, .viewDataPopupWide .contactSummaryForm {
    max-width: 100%
}

@media (min-width: 768px) {
    .viewDataPopupWide #chatEditor, .viewDataPopupWide .contactSummaryForm {
        max-width: 600px
    }
}

@media (min-width: 1024px) {
    .viewDataPopupWide #chatEditor, .viewDataPopupWide .contactSummaryForm {
        max-width: 500px
    }
}

@media (min-width: 1024px) {
    .viewDataPage .viewDataNavSection {
        left: var(--menuBarWidth);
        width: calc(100% - var(--menuBarWidth))
    }
}

@media (min-width: 1280px) {
    .viewDataPage .viewDataNavSection {
        width: calc(100% - (500px + var(--menuBarWidth)))
    }
}

@media (min-width: 1800px) {
    .viewDataPage .viewDataNavSection {
        width: calc(100% - (600px + var(--menuBarWidth)))
    }
}

.viewDataPage .viewDataNavSection .detailsDiv {
    order: 2
}

.viewDataPage .viewDataNavSection .moreBtn {
    order: 4
}

.viewDataPage .viewDataNavSection .popupCloseIcon {
    order: 1
}

.viewDataPage .viewDataNavSection .navMenu {
    order: 4;
    border-top: 1px solid var(--borderGray)
}

@media (min-width: 768px) {
    .viewDataPage .viewDataNavSection .navMenu {
        width: auto;
        margin: 5px auto;
        order: 3
    }
}

@media (min-width: 1280px) {
    .viewDataPage .viewDataNavSection .navMenu {
        width: 100%;
        margin: auto .7075rem;
        order: 4
    }
}

@media (min-width: 1800px) {
    .viewDataPage .viewDataNavSection .navMenu {
        width: auto;
        margin: 5px auto;
        order: 3
    }
}

.viewDataPage .viewDataNavSection .btnDiv {
    width: 100%;
    height: 90px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 200
}

@media (min-width: 768px) {
    .viewDataPage .viewDataNavSection .btnDiv {
        width: calc(100% - var(--menuBarWidth))
    }
}

@media (min-width: 1280px) {
    .viewDataPage .viewDataNavSection .btnDiv {
        position: absolute;
        height: 100%;
        width: 100%
    }
}

@media (min-width: 1280px) {
    .viewDataPage .viewDataDetailsSection {
        flex-wrap: nowrap
    }
}

@media (min-width: 1280px) {
    .viewDataPage .mainDetails {
        min-height: 100vh;
        padding-right: 500px
    }
}

@media (min-width: 1800px) {
    .viewDataPage .mainDetails {
        padding-right: 600px
    }
}

@media (min-width: 1280px) {
    .viewDataPage #viewAdditionalDetails {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 500px;
        border: none
    }
}

@media (min-width: 1800px) {
    .viewDataPage #viewAdditionalDetails {
        width: 600px
    }
}

.viewDataPage #viewAdditionalDetails #viewAdditionalDetailsNav {
    position: sticky
}

@media (min-width: 1280px) {
    .viewDataPage #viewAdditionalDetails #viewAdditionalDetailsNav {
        position: relative;
        top: unset;
        background-color: var(--white)
    }
}

@media (min-width: 1024px) {
    .viewDataPage #viewAdditionalDetails #chatEditor, .viewDataPage #viewAdditionalDetails .contactSummaryForm {
        padding-left: calc(var(--menuBarWidth) + 10px)
    }
}

@media (min-width: 1280px) {
    .viewDataPage #viewAdditionalDetails #chatEditor, .viewDataPage #viewAdditionalDetails .contactSummaryForm {
        max-width: 499px;
        border-radius: 0;
        border: none;
        padding: 10px;
        border-radius: 2rem 2rem 0 0
    }
}

@media (min-width: 1800px) {
    .viewDataPage #viewAdditionalDetails #chatEditor, .viewDataPage #viewAdditionalDetails .contactSummaryForm {
        max-width: 599px
    }
}

@media (min-width: 768px) {
    .viewDataPage #viewAdditionalDetails #chatEditor .contactOptions, .viewDataPage #viewAdditionalDetails .contactSummaryForm .contactOptions {
        padding-left: calc(var(--menuBarWidth) + 30px)
    }
}

@media (min-width: 1280px) {
    .viewDataPage #viewAdditionalDetails #chatEditor .contactOptions, .viewDataPage #viewAdditionalDetails .contactSummaryForm .contactOptions {
        padding: 0 20px;
        padding-top: 20px
    }
}

.viewDataPageWide {
    margin: 0 auto;
    max-width: 1024px;
    min-height: 100vh;
    border-left: 1px solid var(--borderGray);
    border-right: 1px solid var(--borderGray);
    overflow: hidden
}

.viewDataPageWide .viewDataNavSection {
    left: 0;
    max-width: 1023px
}

@media (min-width: 1024px) {
    .viewDataPageWide .viewDataNavSection {
        left: calc(47.5% + var(--menuBarWidth));
        transform: translateX(-50%)
    }
}

.viewDataPageWide .mainDetails {
    padding-right: 0
}

#viewDataMenuPage {
    max-width: 1024px;
    display: flex;
    margin: 0 auto;
    padding-top: var(--headerHeight);
    background-color: rgba(0, 0, 0, 0)
}

@media (min-width: 1024px) {
    #viewDataMenuPage {
        transform: none !important
    }
}

#viewDataMenuPage::before {
    display: none
}

#viewDataMenuPage .dataSideMenu {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    position: relative;
    width: 100%;
    min-width: 100%;
    display: inline-flex;
    flex-direction: column;
    background-color: var(--bg-color);
    margin: 0;
    overflow: hidden;
    border-radius: var(--btnRadius) var(--btnRadius) 0 0
}

@media (min-width: 1024px) {
    #viewDataMenuPage .dataSideMenu {
        position: sticky;
        top: 0;
        left: unset;
        width: max-content;
        width: 250px;
        min-width: 250px;
        padding: 0;
        padding-top: 2rem;
        border-right: 1px solid var(--borderGray);
        border-radius: var(--btnRadius) 0 0 0
    }
}

@media (min-width: 1280px) {
    #viewDataMenuPage .dataSideMenu {
        border-radius: 0
    }
}

#viewDataMenuPage .dataSideMenu .sideMenu {
    width: 100%
}

@media (min-width: 768px) {
    #viewDataMenuPage .dataSideMenu .sideMenu {
        width: 110%;
        min-height: 100vh
    }
}

#viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv {
    display: flex;
    flex-direction: column
}

#viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--black);
    font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px);
    font-weight: 500;
    padding-top: .7075rem;
    padding-bottom: .7075rem;
    border-bottom: 1px solid var(--lightGray);
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    #viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv a {
        width: 100%;
        height: auto;
        clear: both;
        margin: 0 auto;
        padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
        padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
        width: 91%;
        justify-content: flex-start;
        color: var(--gray);
        font-size: 1rem;
        padding-top: 13px;
        padding-bottom: 13px;
        border: none;
        border-right: 2px solid rgba(0, 0, 0, 0)
    }
}

#viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv a::after {
    content: "";
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-left: auto;
    opacity: .4
}

@media (min-width: 1024px) {
    #viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv a::after {
        display: none
    }
}

#viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv a i, #viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv a img {
    width: 20px;
    margin-right: 1rem;
    opacity: .5
}

@media (min-width: 1024px) {
    #viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv a:hover {
        border: none;
        border-right: 2px solid var(--inputColor5);
        background: linear-gradient(90deg, rgba(0, 42, 51, 0) 0%, var(--inputColor1) 50%)
    }
}

@media (min-width: 1024px) {
    #viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv .activeTabMenu {
        color: var(--black);
        border: none;
        border-right: 2px solid var(--inputColor5);
        background: linear-gradient(90deg, rgba(0, 42, 51, 0) 0%, var(--inputColor2) 400%)
    }
}

@media (min-width: 1024px) {
    #viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv .activeTabMenu i, #viewDataMenuPage .dataSideMenu .sideMenu .sideMenuListDiv .activeTabMenu img {
        color: var(--inputColor5)
    }
}

#viewDataMenuPage .dataSideMenu .configrationClose {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out;
    cursor: pointer
}

#viewDataMenuPage .mainDetails {
    width: 100%;
    min-width: 100%;
    display: inline-block;
    overflow: hidden;
    padding-top: 0;
    background-color: var(--bg-color);
    border-radius: var(--btnRadius) var(--btnRadius) 0 0
}

@media (min-width: 1024px) {
    #viewDataMenuPage .mainDetails {
        max-width: 750px;
        min-width: 750px;
        border-radius: 0 var(--btnRadius) 0 0;
        padding-top: 1rem
    }
}

@media (min-width: 1280px) {
    #viewDataMenuPage .mainDetails {
        border-radius: 0
    }
}

#viewDataMenuPage .tabBarWrapper {
    display: flex;
    width: 100%;
    transition: opacity .7s !important
}

#viewDataMenuPage .tabBarWrapper .tabBarSlide {
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
    height: 0;
    opacity: 0;
    overflow: hidden
}

#viewDataMenuPage .tabBarWrapper .tabBarSlide:nth-child(1) {
    height: auto;
    opacity: 1
}

#viewDataMenuPage .tabBarWrapper .tabBarSlide .heading {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    width: 100%;
    margin-bottom: 2rem
}

.createDataPage {
    margin: 0 auto;
    min-height: 100vh;
    max-width: 1024px;
    box-shadow: var(--inputColor2) 0px 1px 3px;
    padding-bottom: 17.98rem
}

.createDataPage .viewDataNavSection {
    transform: none
}

@media (min-width: 1024px) {
    .createDataPage .viewDataNavSection {
        padding-left: calc(var(--menuBarWidth) + var(--tabBarGap))
    }
}

.createDataPage .viewDataNavSection .btnDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    padding-top: 0;
    position: fixed;
    top: unset;
    bottom: 0;
    right: unset;
    left: calc(50% - 10px);
    transform: translateX(-50%);
    display: flex;
    background: rgba(0, 0, 0, 0)
}

@media (min-width: 1024px) {
    .createDataPage .viewDataNavSection .btnDiv {
        width: calc(100% - var(--menuBarWidth));
        transform: translateX(calc(-52.5% + var(--menuBarWidth)));
        max-width: 1024px
    }
}

.createDataPage .viewDataNavSection .btnDiv::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background: var(--bg-color);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-color) 100%);
    pointer-events: none
}

.createDataPage .viewDataNavSection .btnDiv a, .createDataPage .viewDataNavSection .btnDiv button {
    max-width: 200px;
    pointer-events: all
}

.multiStepDataPage {
    background-color: var(--bg-color)
}

.summaryNavBar {
    display: flex;
    background-color: var(--inputColor1);
    border-bottom: 1px solid var(--borderGray)
}

@media (min-width: 768px) {
    .summaryNavBar {
        border-bottom: 1px solid var(--lightGray)
    }
}

.summaryNavBar .summaryDetails {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

@media (min-width: 768px) {
    .summaryNavBar .summaryDetails {
        width: 300px;
        min-width: 300px
    }
}

.summaryNavBar .summaryDetails .topDiv {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.summaryNavBar .summaryDetails .dateTime {
    margin: 0;
    color: var(--textGray);
    font-size: .878rem;
    font-weight: 400
}

.summaryNavBar .summaryDetails .title {
    margin-top: 10px;
    font-weight: 700
}

.summaryNavBar .summaryDetails .company {
    margin-top: 8px;
    font-size: .937rem;
    font-weight: 500;
    border-left: 2px solid var(--highlight);
    padding-left: 5px
}

.summaryNavBar .profile {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    display: flex;
    align-items: center
}

@media (min-width: 768px) {
    .summaryNavBar .profile {
        width: 300px;
        min-width: 300px
    }
}

.summaryNavBar .profile .avatar {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 5px solid var(--borderGray)
}

.summaryNavBar .profile .details {
    margin-left: 1rem
}

.summaryNavBar .profile .details .dateTime {
    margin: 0;
    color: var(--textGray);
    font-size: .733rem;
    font-weight: 400
}

.summaryNavBar .profile .details .title {
    margin-top: 5px
}

.summaryNavBar .profile .details .title span {
    margin-top: 5px;
    display: block;
    font-weight: 700
}

.timeSummary {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px dashed var(--borderGray)
}

@media (min-width: 768px) {
    .timeSummary {
        width: 200px;
        min-width: 200px
    }
}

.timeSummary .scheduledTime {
    margin: 0;
    margin-bottom: 5px;
    display: flex;
    align-items: center
}

.timeSummary .scheduledTime span {
    color: var(--textGray);
    font-size: .667rem;
    margin-left: .25rem
}

.timeSummary .scheduledTime span i {
    top: 2.5px
}

.timeSummary .performedTime {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--black);
    font-weight: 500
}

@media (min-width: 1024px) {
    .timeSummary .performedTime {
        font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px)
    }
}

.timeSummary .performedTime span {
    display: flex;
    align-items: center;
    color: var(--textGray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    margin-left: .35375rem
}

.dataSummaryNav {
    order: 3;
    position: fixed;
    top: 0;
    left: 0;
    flex: 1;
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    display: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow-x: auto
}

@media (min-width: 768px) {
    .dataSummaryNav {
        width: 40%;
        overflow: hidden;
        background-color: var(--inputColor1)
    }
}

@media (min-width: 1280px) {
    .dataSummaryNav {
        width: 30%
    }
}

.dataSummaryNav::-webkit-scrollbar {
    opacity: 0;
    display: none
}

.dataSummaryNav .dataSummaryCard {
    width: 48%;
    min-width: 180px;
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    box-shadow: rgba(0, 0, 0, .05) 0px 1px 2px 0px;
    transition: var(--transition2)
}

@media (min-width: 768px) {
    .dataSummaryNav .dataSummaryCard {
        min-width: 200px;
        border: 1px solid var(--lightGray)
    }
}

.dataSummaryNav .dataSummaryCard:hover {
    box-shadow: rgba(17, 17, 26, 0) 0px 1px 0px;
    border: 1px solid var(--borderGray)
}

.dataSummaryNav .dataSummaryCard:hover .icon {
    transform: none;
    color: var(--black);
    background-color: var(--lightGray)
}

.dataSummaryNav .dataSummaryCard:hover .icon i {
    opacity: 0
}

.dataSummaryNav .dataSummaryCard:hover .icon .arrow {
    opacity: 1
}

.dataSummaryNav .dataSummaryCard .label {
    width: 100%;
    margin: 0;
    color: inherit;
    font-size: .667rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .8
}

@media (min-width: 568px) {
    .dataSummaryNav .dataSummaryCard .label {
        font-size: .733rem
    }
}

.dataSummaryNav .dataSummaryCard .value {
    margin-top: 8px;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500
}

@media (min-width: 568px) {
    .dataSummaryNav .dataSummaryCard .value {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

@media (min-width: 768px) {
    .dataSummaryNav .dataSummaryCard .value {
        font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px)
    }
}

.dataSummaryNav .dataSummaryCard .value:empty::before {
    content: "0"
}

.dataSummaryNav .dataSummaryCard .icon {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: var(--lightGray);
    transition: var(--transition1);
    transform: scale(0.9)
}

@media (min-width: 768px) {
    .dataSummaryNav .dataSummaryCard .icon {
        width: 40px;
        height: 40px
    }
}

.dataSummaryNav .dataSummaryCard .icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
    transition: .2s all ease-in
}

@media (min-width: 768px) {
    .dataSummaryNav .dataSummaryCard .icon i {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.dataSummaryNav .dataSummaryCard .icon .arrow {
    opacity: 0;
    transition: var(--transition1)
}

.dataSummaryNav [data-summary=red] .icon {
    color: #e76d6d;
    background-color: #ffefef
}

.dataSummaryNav [data-summary=red-filled] {
    background-color: #e66379;
    color: var(--white)
}

.dataSummaryNav [data-summary=red-filled] .icon {
    color: #ff5f5f;
    background-color: #f1afba
}

.dataSummaryNav [data-summary=orange] .icon {
    color: #e7856d;
    background-color: #fff8ef
}

.dataSummaryNav [data-summary=orange-filled] {
    background-color: #ff9d65;
    color: var(--white)
}

.dataSummaryNav [data-summary=orange-filled] .icon {
    color: #ff7d32;
    background-color: #ffc6a6
}

.dataSummaryNav [data-summary=yellow] .icon {
    color: #ebb80f;
    background-color: #fffbef
}

.dataSummaryNav [data-summary=yellow-filled] {
    background-color: #fff5d3;
    color: var(--black)
}

.dataSummaryNav [data-summary=yellow-filled] .icon {
    color: #ffa125;
    background-color: #ffe3a6
}

.dataSummaryNav [data-summary=blue] .icon {
    color: #698dc4;
    background-color: #eff6ff
}

.dataSummaryNav [data-summary=blue-filled] {
    background-color: #d3dfff;
    color: var(--black)
}

.dataSummaryNav [data-summary=blue-filled] .icon {
    color: #259dff;
    background-color: #a6caff
}

.dataSummaryNav [data-summary=green] .icon {
    color: #6de773;
    background-color: #f2ffef
}

.dataSummaryNav .createDataSummary {
    width: 180px;
    min-width: 180px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
    border-radius: var(--radius);
    cursor: pointer
}

.dataSummaryNav .createDataSummary::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    border: 1px dashed var(--inputColor2);
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
    cursor: pointer
}

.dataSummaryNav .createDataSummary:hover .text {
    color: var(--color1)
}

.dataSummaryNav .createDataSummary .text {
    margin: 0;
    color: var(--textGray);
    font-size: .937rem;
    font-weight: 300;
    cursor: pointer
}

.dataSummaryNav .createDataSummary .text i {
    display: block;
    margin-bottom: 10px;
    cursor: pointer
}

.timeBreakActionDiv {
    position: fixed;
    bottom: .7075rem;
    right: .7075rem;
    z-index: 200;
    display: flex;
    box-shadow: rgba(0, 0, 0, .1) 0px 10px 50px;
    border-radius: .5rem;
    transition: var(--transition2)
}

.timeBreakActionDiv button, .timeBreakActionDiv a {
    font-weight: 400;
    background-color: var(--white);
    margin: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.timeBreakActionDiv button:nth-child(1), .timeBreakActionDiv a:nth-child(1) {
    border-radius: .5rem 0 0 .5rem
}

.timeBreakActionDiv button:nth-last-child(1), .timeBreakActionDiv a:nth-last-child(1) {
    border-radius: 0 .5rem .5rem 0
}

.timeBreakActionDiv button i, .timeBreakActionDiv a i {
    top: 0
}

.timeBreakActionDiv .breakBtn, .timeBreakActionDiv .resumeBtn {
    border-right: none;
    border-radius: .5rem 0 0 .5rem
}

.timeBreakActionDiv .breakBtn:hover, .timeBreakActionDiv .resumeBtn:hover {
    color: var(--color2);
    background-color: var(--lightGray)
}

.timeBreakActionDiv .breakBtn {
    border: 1px solid var(--borderGray);
    border-right: none
}

.timeBreakActionDiv .resumeBtn {
    display: none;
    color: var(--white);
    background: linear-gradient(to right top, #071432, #071b42, #072153, #082864, #0b2e76, #0b3581, #093c8c, #064397, #004c9d, #0054a3, #005da8, #0065ad)
}

.timeBreakActionDiv .resumeBtn i {
    color: #4eabec
}

.timeBreakActionDiv .resumeBtn:hover {
    color: var(--white)
}

.timeBreakActionDiv .logout {
    overflow: initial;
    border: 1px solid var(--borderGray)
}

.timeBreakActionDiv .logout:not([data-tooltip]):before {
    display: none
}

.timeBreakActionDiv .logout:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    z-index: 103;
    display: flex;
    align-items: center;
    color: var(--lightGray);
    font-size: .733rem;
    font-weight: 400;
    letter-spacing: .25px;
    text-transform: capitalize;
    background: var(--darkGray);
    backdrop-filter: blur(10px);
    padding: .5rem .76rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none
}

.timeBreakActionDiv .logout::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid var(--darkGray);
    pointer-events: none;
    opacity: 0
}

.timeBreakActionDiv .logout:focus {
    z-index: 999
}

.timeBreakActionDiv .logout:focus::before, .timeBreakActionDiv .logout:focus::after {
    opacity: 1;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .timeBreakActionDiv .logout:hover {
        z-index: 999
    }

    .timeBreakActionDiv .logout:hover::before, .timeBreakActionDiv .logout:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

.timeBreakActionDiv .logout::before {
    top: unset;
    right: unset;
    bottom: 100%;
    left: 50%;
    transform: none;
    transform: translateX(-50%)
}

.timeBreakActionDiv .logout::after {
    top: 0;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: none;
    transform: translateX(-50%) rotate(180deg)
}

.timeBreakIntro {
    right: 43%;
    bottom: 50%;
    z-index: 999;
    box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
}

.timeBreakIntro::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 6, 20, .5333333333)
}

.timeBreakIntro .breakBtn {
    display: none
}

.timeBreakIntro .resumeBtn {
    display: block
}

.mainSummarySection [width] {
    margin: calc(var(--summary-card-gap) / 2)
}

.mainSummarySection [width] [width] {
    margin: inherit
}

.mainSummarySection [width=xxs] {
    min-width: 200px;
    width: calc(20% - var(--summary-card-gap))
}

.mainSummarySection [width=xs] {
    min-width: 200px;
    width: calc(50% - var(--summary-card-gap))
}

@media (min-width: 568px) {
    .mainSummarySection [width=xs] {
        width: calc(33.33% - var(--summary-card-gap))
    }
}

@media (min-width: 768px) {
    .mainSummarySection [width=xs] {
        width: calc(25% - var(--summary-card-gap))
    }
}

.mainSummarySection [width=sm] {
    min-width: 200px;
    width: calc(100% - var(--summary-card-gap))
}

@media (min-width: 568px) {
    .mainSummarySection [width=sm] {
        width: calc(50% - var(--summary-card-gap))
    }
}

@media (min-width: 768px) {
    .mainSummarySection [width=sm] {
        width: calc(100% - var(--summary-card-gap))
    }
}

@media (min-width: 768px)and (min-width: 568px) {
    .mainSummarySection [width=sm] {
        width: calc(33.33% - var(--summary-card-gap))
    }
}

.mainSummarySection [width=md] {
    width: calc(100% - var(--summary-card-gap))
}

@media (min-width: 568px) {
    .mainSummarySection [width=md] {
        width: calc(50% - var(--summary-card-gap))
    }
}

.mainSummarySection [width=lg] {
    width: calc(100% - var(--summary-card-gap))
}

@media (min-width: 1024px) {
    .mainSummarySection [width=lg] {
        width: calc(66.6666% - var(--summary-card-gap))
    }
}

.mainSummarySection [width=xl] {
    width: calc(100% - var(--summary-card-gap))
}

@media (min-width: 1024px) {
    .mainSummarySection [width=xl] {
        width: calc(75% - var(--summary-card-gap))
    }
}

.mainSummarySection [width=xxl] {
    min-width: calc(100% - var(--summary-card-gap));
    width: calc(100% - var(--summary-card-gap))
}

.dataSummary {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.dataSummary.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.dataSummary .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.dataSummary .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .dataSummary .popupWindow::before {
        display: none
    }
}

.dataSummary .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .dataSummary .popupWindow::after {
        display: none
    }
}

.dataSummary .popupWindowClose, .dataSummary .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

.dataSummary .popupWindow {
    min-height: 80vh
}

@media (min-width: 768px) {
    .dataSummary .popupWindow {
        max-width: 650px;
        min-height: 100vh;
        left: unset;
        right: 0;
        border-radius: 0
    }
}

.mainSummarySection {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: calc(var(--summary-card-gap) / 2) 0;
    padding-top: var(--headerHeight)
}

@media (min-width: 1280px) {
    .mainSummarySection {
        margin: 0;
        padding-right: calc(var(--summary-card-gap) / 2)
    }
}

.mainSummarySection .summaryWrapper, .mainSummarySection .sideSummaryWrapper {
    overflow: hidden;
    padding: 0
}

.mainSummarySection .summaryContainer, .mainSummarySection .sideSummaryContainer {
    width: calc(100% - var(--summary-card-gap));
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 calc(var(--summary-card-gap) / 2)
}

@media (min-width: 1280px) {
    .mainSummarySection .summaryContainer, .mainSummarySection .sideSummaryContainer {
        width: calc(100% + 1vw);
        max-height: 100vh;
        margin: 0;
        overflow-y: scroll
    }
}

.mainSummarySection .summaryContainer::-webkit-scrollbar, .mainSummarySection .summaryContainer::-webkit-scrollbar-track, .mainSummarySection .summaryContainer::-webkit-scrollbar-thumb, .mainSummarySection .summaryContainer::-webkit-scrollbar-thumb:window-inactive, .mainSummarySection .sideSummaryContainer::-webkit-scrollbar, .mainSummarySection .sideSummaryContainer::-webkit-scrollbar-track, .mainSummarySection .sideSummaryContainer::-webkit-scrollbar-thumb, .mainSummarySection .sideSummaryContainer::-webkit-scrollbar-thumb:window-inactive {
    width: 0;
    display: none;
    overflow-anchor: unset;
    background: rgba(0, 0, 0, 0)
}

.mainSummarySection .summaryWrapper {
    width: 100%
}

@media (min-width: 1280px) {
    .mainSummarySection .summaryWrapper {
        width: 60%;
        padding-left: calc(var(--summary-card-gap) / 2)
    }
}

.mainSummarySection .sideSummaryWrapper {
    width: 100%
}

@media (min-width: 1280px) {
    .mainSummarySection .sideSummaryWrapper {
        width: 40%
    }
}

@media (min-width: 1280px) {
    .mainSummarySection .sideSummaryWrapper .sideSummaryContainer {
        margin-left: 0
    }
}

.summaryCard {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    display: flex;
    flex-direction: column;
    color: var(--summary-card-text);
    border: 1px solid rgba(22, 83, 79, .1019607843);
    border-radius: var(--summary-card-radius);
    padding: var(--summary-card-padding);
    background: var(--summary-card-bg);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .048) 0px 1px 2px 0px;
    text-align: center
}

.summaryCard * {
    font-family: inherit !important
}

.summaryCard .ct-grid {
    stroke: var(--borderGray);
    stroke-width: 1px;
    stroke-dasharray: 1px
}

.summaryCard .ct-chart-bar .ct-grids .ct-horizontal {
    display: none
}

.summaryCard .ct-chart-bar .ct-labels .ct-label {
    color: var(--black);
    font-weight: 500;
    margin-top: 10px
}

.summaryCard .ct-point {
    stroke-width: var(--summary-strock);
    stroke-linecap: var(--summary-strock-shape)
}

.summaryCard .ct-series-a .ct-point {
    stroke: var(--summary-color-1)
}

.summaryCard .ct-series-b .ct-point {
    stroke: var(--summary-color-2)
}

.summaryCard .ct-series-c .ct-point {
    stroke: var(--summary-color-3)
}

.summaryCard .ct-series-d .ct-point {
    stroke: var(--summary-color-4)
}

.summaryCard .ct-series-e .ct-point {
    stroke: var(--summary-color-5)
}

.summaryCard .ct-slice-pie {
    stroke: rgba(0, 0, 0, 0);
    stroke-width: var(--summary-strock)
}

.summaryCard .ct-series-a .ct-slice-pie {
    fill: var(--summary-color-1)
}

.summaryCard .ct-series-b .ct-slice-pie {
    fill: var(--summary-color-2)
}

.summaryCard .ct-series-c .ct-slice-pie {
    fill: var(--summary-color-3)
}

.summaryCard .ct-series-d .ct-slice-pie {
    fill: var(--summary-color-4)
}

.summaryCard .ct-series-e .ct-slice-pie {
    fill: var(--summary-color-5)
}

.summaryCard .ct-line {
    stroke-width: 3px;
    stroke-dasharray: 0
}

.summaryCard .ct-area {
    fill: rgba(0, 0, 0, 0) !important
}

.summaryCard .ct-series-a .ct-line {
    stroke: var(--summary-color-1)
}

.summaryCard .ct-series-b .ct-line {
    stroke: var(--summary-color-2)
}

.summaryCard .ct-series-c .ct-line {
    stroke: var(--summary-color-3)
}

.summaryCard .ct-series-d .ct-line {
    stroke: var(--summary-color-4)
}

.summaryCard .ct-series-e .ct-line {
    stroke: var(--summary-color-5)
}

.summaryCard .ct-chart-pie {
    margin: 0;
    margin-top: var(--summary-card-gap);
    transform: scale(0.9)
}

.summaryCard .ct-chart-pie .ct-label {
    fill: var(--white) !important;
    color: var(--white) !important;
    font-size: 1.5em !important
}

.summaryCard .ct-chart-donut .ct-label {
    fill: var(--black) !important;
    color: var(--black) !important;
    font-size: 2vh !important
}

.summaryCard foreignObject {
    width: 16px !important;
    height: 16px !important
}

.summaryCard foreignObject .ct-label.ct-vertical.ct-start {
    color: var(--darkGray);
    width: 16px !important;
    height: 16px !important
}

.summaryCard .ct-bar {
    stroke-width: var(--summary-strock);
    stroke-dasharray: 0;
    stroke-linecap: var(--summary-strock-shape)
}

.summaryCard .ct-series-a .ct-bar {
    stroke: var(--summary-color-1)
}

.summaryCard .ct-series-b .ct-bar {
    stroke: var(--summary-color-2)
}

.summaryCard .ct-series-c .ct-bar {
    stroke: var(--summary-color-3)
}

.summaryCard .ct-series-d .ct-bar {
    stroke: var(--summary-color-4)
}

.summaryCard .ct-series-e .ct-bar {
    stroke: var(--summary-color-5)
}

.summaryCard .ct-slice-donut {
    stroke-width: var(--summary-strock) !important;
    stroke-linecap: var(--summary-strock-shape)
}

.summaryCard .ct-series-a .ct-slice-donut {
    stroke: var(--summary-color-1)
}

.summaryCard .ct-series-b .ct-slice-donut {
    stroke: var(--summary-color-2)
}

.summaryCard .ct-series-c .ct-slice-donut {
    stroke: var(--summary-color-3)
}

.summaryCard .ct-series-d .ct-slice-donut {
    stroke: var(--summary-color-4)
}

.summaryCard .ct-series-e .ct-slice-donut {
    stroke: var(--summary-color-5)
}

.summaryCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

.summaryCard .titleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px
}

.summaryCard .titleDiv .title {
    color: inherit;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    line-height: 1
}

.summaryCard .titleDiv .title span {
    font-size: .937rem;
    font-weight: 400;
    opacity: .8;
    margin-left: 10px
}

.summaryCard .titleDiv .btnDiv {
    margin-top: 0;
    gap: 10px
}

.summaryCard .titleDiv .btnDiv a {
    margin-top: 0
}

.summaryCard .titleDiv .btnDiv selector selected {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius)
}

.summaryCard .titleDiv .btnDiv selector selected item {
    padding: 11px 15px;
    font-size: .937rem
}

.summaryCard .titleDiv .btnDiv selector item {
    padding: 8px 10px
}

@media (min-width: 768px) {
    .summaryCard .titleDiv .btnDiv selector item {
        padding: 7px 10px
    }
}

.summaryCard .titleDiv .btnDiv selector * {
    font-size: 1rem
}

@media (min-width: 768px) {
    .summaryCard .titleDiv .btnDiv selector * {
        font-size: .733rem
    }
}

.summaryCard .titleDiv .btnDiv selector options {
    min-width: 100px
}

.summaryCard .chartToolTip {
    display: flex;
    flex-wrap: wrap
}

.summaryCard .chartToolTip li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: inherit;
    font-size: .878rem
}

.summaryCard .chartToolTip li span {
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: var(--inputRadius);
    background-color: var(--textGray)
}

.summaryCard .chartToolTip li:nth-child(1) span {
    background: var(--summary-color-1)
}

.summaryCard .chartToolTip li:nth-child(2) span {
    background: var(--summary-color-2)
}

.summaryCard .chartToolTip li:nth-child(3) span {
    background: var(--summary-color-3)
}

.summaryCard .chartToolTip li:nth-child(4) span {
    background: var(--summary-color-4)
}

.summaryCard .chartToolTip li:nth-child(5) span {
    background: var(--summary-color-5)
}

.summaryCard .tableDiv {
    width: calc(100% + 15px);
    min-width: calc(100% + 15px);
    max-width: calc(100% + 15px);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .7075rem;
    background: var(--standard-bg-color);
    overflow-x: auto;
    overflow-y: clip;
    padding: 0;
    margin: 0
}

@media (min-width: 768px) {
    .summaryCard .tableDiv {
        display: block;
        padding-top: 0
    }
}

@media (min-width: 1024px) {
    .summaryCard .tableDiv {
        background: rgba(0, 0, 0, 0)
    }
}

.summaryCard .tableDiv::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.summaryCard .tableDiv::-webkit-scrollbar-track {
    background-color: var(--white)
}

.summaryCard .tableDiv::-webkit-scrollbar-thumb {
    background: var(--borderGray);
    border-radius: var(--inputRadius)
}

.summaryCard .tableDiv::-webkit-scrollbar-thumb:window-inactive {
    background: var(--borderGray)
}

.summaryCard .tableDiv table {
    min-height: 100%
}

.summaryCard .tableDiv table tbody {
    width: 100%;
    display: table
}

.summaryCard .tableDiv table .checkBoxTD {
    position: relative;
    left: 0;
    z-index: 10;
    width: 6%;
    min-width: 130px;
    max-width: 130px;
    height: 100%;
    display: table-cell;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: .7075rem;
    border: none;
    white-space: nowrap;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .summaryCard .tableDiv table .checkBoxTD {
        padding-left: .7075rem;
        width: 4%;
        min-width: 90px;
        max-width: 90px
    }
}

.summaryCard .tableDiv table .checkBoxTD p {
    display: inline-block;
    opacity: .65;
    top: -5px;
    font-weight: 400
}

.summaryCard .tableDiv table .checkBoxTD .rowCheckBox, .summaryCard .tableDiv table .checkBoxTD .selectAllCheckBox {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    transition: var(--transition3)
}

@media (min-width: 768px) {
    .summaryCard .tableDiv table .checkBoxTD .rowCheckBox, .summaryCard .tableDiv table .checkBoxTD .selectAllCheckBox {
        opacity: 0
    }
}

.summaryCard .tableDiv table .checkBoxTD .rowCheckBox:checked, .summaryCard .tableDiv table .checkBoxTD .selectAllCheckBox:checked {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.summaryCard .tableDiv table .checkBoxTD .rowCheckBox::before, .summaryCard .tableDiv table .checkBoxTD .selectAllCheckBox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 80px;
    transform: translate(-50%, -50%)
}

.summaryCard .tableDiv table .checkBoxTD .moreBtn {
    height: 100%
}

.summaryCard .tableDiv table .checkBoxTD .moreBtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

.summaryCard .tableDiv table .checkBoxTD .moreBtn:hover .btnMenuDiv {
    padding-left: 1px
}

.summaryCard .tableDiv table .checkBoxTD .moreBtn .moreIcon {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.summaryCard .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv {
    top: -2px;
    left: 100%;
    width: max-content;
    min-width: 250px;
    padding-top: 0
}

.summaryCard .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv .btnMenu {
    border-top: none
}

.summaryCard .tableDiv table .contactActionList .contactList {
    border: none !important;
    padding: 0 !important
}

.summaryCard .tableDiv table .contactActionList .contactList p {
    margin-bottom: 0
}

.summaryCard .tableDiv table tr:nth-child(1) {
    height: 30px;
    border-bottom: 1px solid rgba(131, 131, 131, .1411764706)
}

.summaryCard .tableDiv table tr:nth-child(1) th {
    height: inherit;
    min-height: inherit
}

.summaryCard .tableDiv table tr:nth-child(even) {
    background-color: var(--tableRow)
}

.summaryCard .tableDiv table tr:hover {
    z-index: 10
}

.summaryCard .tableDiv table tr:hover .viewBtn {
    opacity: 1
}

.summaryCard .tableDiv table tr:hover td .rowCheckBox, .summaryCard .tableDiv table tr:hover td .selectAllCheckBox, .summaryCard .tableDiv table tr:hover th .rowCheckBox, .summaryCard .tableDiv table tr:hover th .selectAllCheckBox {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.summaryCard .tableDiv table tr th {
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: noWrap;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .733rem;
    font-weight: 500
}

@media (min-width: 768px) {
    .summaryCard .tableDiv table tr th {
        font-size: .667rem
    }
}

.summaryCard .tableDiv table tr th p {
    color: var(--text-color);
    display: inline-block;
    margin: 0;
    top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    opacity: .7
}

.summaryCard .tableDiv table tr th span {
    top: -1px;
    color: inherit;
    font-size: 8px;
    margin-left: 3px
}

.summaryCard .tableDiv table tr th .moreBtn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.summaryCard .tableDiv table tr th .moreBtn .moreIcon {
    color: var(--text-color);
    top: 4px;
    font-size: .878rem !important
}

.summaryCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu {
    border-top: 1px solid var(--borderGray)
}

.summaryCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label {
    text-transform: capitalize;
    padding: .5rem clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.summaryCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label input {
    margin-top: 0 !important
}

.summaryCard .tableDiv table tr td {
    height: 70px;
    min-height: 70px;
    border: none
}

.summaryCard .tableDiv table tr td:nth-last-child(1) {
    padding-right: 10px
}

.summaryCard .tableDiv table tr td .callBack {
    margin-top: 5px
}

.summaryCard .tableDiv table tr td a {
    display: inline-flex;
    z-index: 2
}

.summaryCard .tableDiv table tr td p, .summaryCard .tableDiv table tr td span {
    margin-top: 0;
    line-height: 1.2
}

.summaryCard .tableDiv table tr td .labelText {
    display: flex;
    align-items: center;
    color: var(--gray) !important;
    font-size: .733rem !important;
    font-weight: 500 !important;
    white-space: nowrap
}

.summaryCard .tableDiv table tr td .labelText span {
    margin-top: .25rem;
    display: block;
    color: var(--black) !important;
    font-size: .937rem !important;
    font-weight: 600 !important;
    white-space: nowrap
}

.summaryCard .tableDiv table tr td .link {
    color: #1551bd;
    background-color: #f0f8ff;
    padding: .15rem .55rem;
    border-radius: var(--inputRadius);
    line-height: 1.5;
    transition: var(--transition1);
    cursor: pointer
}

.summaryCard .tableDiv table tr td .link:hover {
    background-color: #dcefff;
    color: #124fc2
}

.summaryCard .tableDiv table tr .tableMenu .moreBtn {
    color: var(--text-color);
    padding: 1.4rem .75rem
}

.summaryCard .tableDiv table tr .tableMenu .moreBtn i {
    color: inherit
}

.summaryCard .tableDiv table tr .hidden {
    width: 0;
    padding: 0;
    opacity: 0
}

.summaryCard .tableDiv table tr .viewBtn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 101%;
    min-height: 101%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    opacity: 0;
    background: #000724;
    background: linear-gradient(90deg, var(--tableHover) 0%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition2);
    cursor: pointer
}

.summaryCard .tableDiv table tr .viewBtn a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.summaryCard .tableDiv table .activeRow {
    background-color: var(--tableHighlight) !important
}

.summaryCard .titleDiv {
    width: 100%;
    text-align: center;
    justify-content: center !important
}

.summaryCard .chartToolTip {
    justify-content: center
}

.summaryCard .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 77%;
    height: 77%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    padding: var(--summary-card-padding);
    background-color: var(--standard-bg-color)
}

.summaryCard .content ul li {
    display: flex;
    align-items: center
}

.summaryCard .content ul li p {
    margin: 2px 0
}

.summaryCard .content ul li .label {
    text-transform: uppercase;
    color: var(--textGray);
    font-size: .937rem;
    font-weight: 500;
    letter-spacing: .5px
}

.summaryCard .content ul li .value {
    color: var(--black);
    font-weight: 600;
    margin-left: 10px
}

.summaryTable {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    display: flex;
    flex-direction: column;
    color: var(--summary-card-text);
    border: 1px solid rgba(22, 83, 79, .1019607843);
    border-radius: var(--summary-card-radius);
    padding: var(--summary-card-padding);
    background: var(--summary-card-bg);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .048) 0px 1px 2px 0px;
    padding: 0
}

.summaryTable * {
    font-family: inherit !important
}

.summaryTable .ct-grid {
    stroke: var(--borderGray);
    stroke-width: 1px;
    stroke-dasharray: 1px
}

.summaryTable .ct-chart-bar .ct-grids .ct-horizontal {
    display: none
}

.summaryTable .ct-chart-bar .ct-labels .ct-label {
    color: var(--black);
    font-weight: 500;
    margin-top: 10px
}

.summaryTable .ct-point {
    stroke-width: var(--summary-strock);
    stroke-linecap: var(--summary-strock-shape)
}

.summaryTable .ct-series-a .ct-point {
    stroke: var(--summary-color-1)
}

.summaryTable .ct-series-b .ct-point {
    stroke: var(--summary-color-2)
}

.summaryTable .ct-series-c .ct-point {
    stroke: var(--summary-color-3)
}

.summaryTable .ct-series-d .ct-point {
    stroke: var(--summary-color-4)
}

.summaryTable .ct-series-e .ct-point {
    stroke: var(--summary-color-5)
}

.summaryTable .ct-slice-pie {
    stroke: rgba(0, 0, 0, 0);
    stroke-width: var(--summary-strock)
}

.summaryTable .ct-series-a .ct-slice-pie {
    fill: var(--summary-color-1)
}

.summaryTable .ct-series-b .ct-slice-pie {
    fill: var(--summary-color-2)
}

.summaryTable .ct-series-c .ct-slice-pie {
    fill: var(--summary-color-3)
}

.summaryTable .ct-series-d .ct-slice-pie {
    fill: var(--summary-color-4)
}

.summaryTable .ct-series-e .ct-slice-pie {
    fill: var(--summary-color-5)
}

.summaryTable .ct-line {
    stroke-width: 3px;
    stroke-dasharray: 0
}

.summaryTable .ct-area {
    fill: rgba(0, 0, 0, 0) !important
}

.summaryTable .ct-series-a .ct-line {
    stroke: var(--summary-color-1)
}

.summaryTable .ct-series-b .ct-line {
    stroke: var(--summary-color-2)
}

.summaryTable .ct-series-c .ct-line {
    stroke: var(--summary-color-3)
}

.summaryTable .ct-series-d .ct-line {
    stroke: var(--summary-color-4)
}

.summaryTable .ct-series-e .ct-line {
    stroke: var(--summary-color-5)
}

.summaryTable .ct-chart-pie {
    margin: 0;
    margin-top: var(--summary-card-gap);
    transform: scale(0.9)
}

.summaryTable .ct-chart-pie .ct-label {
    fill: var(--white) !important;
    color: var(--white) !important;
    font-size: 1.5em !important
}

.summaryTable .ct-chart-donut .ct-label {
    fill: var(--black) !important;
    color: var(--black) !important;
    font-size: 2vh !important
}

.summaryTable foreignObject {
    width: 16px !important;
    height: 16px !important
}

.summaryTable foreignObject .ct-label.ct-vertical.ct-start {
    color: var(--darkGray);
    width: 16px !important;
    height: 16px !important
}

.summaryTable .ct-bar {
    stroke-width: var(--summary-strock);
    stroke-dasharray: 0;
    stroke-linecap: var(--summary-strock-shape)
}

.summaryTable .ct-series-a .ct-bar {
    stroke: var(--summary-color-1)
}

.summaryTable .ct-series-b .ct-bar {
    stroke: var(--summary-color-2)
}

.summaryTable .ct-series-c .ct-bar {
    stroke: var(--summary-color-3)
}

.summaryTable .ct-series-d .ct-bar {
    stroke: var(--summary-color-4)
}

.summaryTable .ct-series-e .ct-bar {
    stroke: var(--summary-color-5)
}

.summaryTable .ct-slice-donut {
    stroke-width: var(--summary-strock) !important;
    stroke-linecap: var(--summary-strock-shape)
}

.summaryTable .ct-series-a .ct-slice-donut {
    stroke: var(--summary-color-1)
}

.summaryTable .ct-series-b .ct-slice-donut {
    stroke: var(--summary-color-2)
}

.summaryTable .ct-series-c .ct-slice-donut {
    stroke: var(--summary-color-3)
}

.summaryTable .ct-series-d .ct-slice-donut {
    stroke: var(--summary-color-4)
}

.summaryTable .ct-series-e .ct-slice-donut {
    stroke: var(--summary-color-5)
}

.summaryTable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

.summaryTable .titleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px
}

.summaryTable .titleDiv .title {
    color: inherit;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    line-height: 1
}

.summaryTable .titleDiv .title span {
    font-size: .937rem;
    font-weight: 400;
    opacity: .8;
    margin-left: 10px
}

.summaryTable .titleDiv .btnDiv {
    margin-top: 0;
    gap: 10px
}

.summaryTable .titleDiv .btnDiv a {
    margin-top: 0
}

.summaryTable .titleDiv .btnDiv selector selected {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius)
}

.summaryTable .titleDiv .btnDiv selector selected item {
    padding: 11px 15px;
    font-size: .937rem
}

.summaryTable .titleDiv .btnDiv selector item {
    padding: 8px 10px
}

@media (min-width: 768px) {
    .summaryTable .titleDiv .btnDiv selector item {
        padding: 7px 10px
    }
}

.summaryTable .titleDiv .btnDiv selector * {
    font-size: 1rem
}

@media (min-width: 768px) {
    .summaryTable .titleDiv .btnDiv selector * {
        font-size: .733rem
    }
}

.summaryTable .titleDiv .btnDiv selector options {
    min-width: 100px
}

.summaryTable .chartToolTip {
    display: flex;
    flex-wrap: wrap
}

.summaryTable .chartToolTip li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: inherit;
    font-size: .878rem
}

.summaryTable .chartToolTip li span {
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: var(--inputRadius);
    background-color: var(--textGray)
}

.summaryTable .chartToolTip li:nth-child(1) span {
    background: var(--summary-color-1)
}

.summaryTable .chartToolTip li:nth-child(2) span {
    background: var(--summary-color-2)
}

.summaryTable .chartToolTip li:nth-child(3) span {
    background: var(--summary-color-3)
}

.summaryTable .chartToolTip li:nth-child(4) span {
    background: var(--summary-color-4)
}

.summaryTable .chartToolTip li:nth-child(5) span {
    background: var(--summary-color-5)
}

.summaryTable .tableDiv {
    width: calc(100% + 15px);
    min-width: calc(100% + 15px);
    max-width: calc(100% + 15px);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .7075rem;
    background: var(--standard-bg-color);
    overflow-x: auto;
    overflow-y: clip;
    padding: 0;
    margin: 0
}

@media (min-width: 768px) {
    .summaryTable .tableDiv {
        display: block;
        padding-top: 0
    }
}

@media (min-width: 1024px) {
    .summaryTable .tableDiv {
        background: rgba(0, 0, 0, 0)
    }
}

.summaryTable .tableDiv::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.summaryTable .tableDiv::-webkit-scrollbar-track {
    background-color: var(--white)
}

.summaryTable .tableDiv::-webkit-scrollbar-thumb {
    background: var(--borderGray);
    border-radius: var(--inputRadius)
}

.summaryTable .tableDiv::-webkit-scrollbar-thumb:window-inactive {
    background: var(--borderGray)
}

.summaryTable .tableDiv table {
    min-height: 100%
}

.summaryTable .tableDiv table tbody {
    width: 100%;
    display: table
}

.summaryTable .tableDiv table .checkBoxTD {
    position: relative;
    left: 0;
    z-index: 10;
    width: 6%;
    min-width: 130px;
    max-width: 130px;
    height: 100%;
    display: table-cell;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: .7075rem;
    border: none;
    white-space: nowrap;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .summaryTable .tableDiv table .checkBoxTD {
        padding-left: .7075rem;
        width: 4%;
        min-width: 90px;
        max-width: 90px
    }
}

.summaryTable .tableDiv table .checkBoxTD p {
    display: inline-block;
    opacity: .65;
    top: -5px;
    font-weight: 400
}

.summaryTable .tableDiv table .checkBoxTD .rowCheckBox, .summaryTable .tableDiv table .checkBoxTD .selectAllCheckBox {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    transition: var(--transition3)
}

@media (min-width: 768px) {
    .summaryTable .tableDiv table .checkBoxTD .rowCheckBox, .summaryTable .tableDiv table .checkBoxTD .selectAllCheckBox {
        opacity: 0
    }
}

.summaryTable .tableDiv table .checkBoxTD .rowCheckBox:checked, .summaryTable .tableDiv table .checkBoxTD .selectAllCheckBox:checked {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.summaryTable .tableDiv table .checkBoxTD .rowCheckBox::before, .summaryTable .tableDiv table .checkBoxTD .selectAllCheckBox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 80px;
    transform: translate(-50%, -50%)
}

.summaryTable .tableDiv table .checkBoxTD .moreBtn {
    height: 100%
}

.summaryTable .tableDiv table .checkBoxTD .moreBtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

.summaryTable .tableDiv table .checkBoxTD .moreBtn:hover .btnMenuDiv {
    padding-left: 1px
}

.summaryTable .tableDiv table .checkBoxTD .moreBtn .moreIcon {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.summaryTable .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv {
    top: -2px;
    left: 100%;
    width: max-content;
    min-width: 250px;
    padding-top: 0
}

.summaryTable .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv .btnMenu {
    border-top: none
}

.summaryTable .tableDiv table .contactActionList .contactList {
    border: none !important;
    padding: 0 !important
}

.summaryTable .tableDiv table .contactActionList .contactList p {
    margin-bottom: 0
}

.summaryTable .tableDiv table tr:nth-child(1) {
    height: 30px;
    border-bottom: 1px solid rgba(131, 131, 131, .1411764706)
}

.summaryTable .tableDiv table tr:nth-child(1) th {
    height: inherit;
    min-height: inherit
}

.summaryTable .tableDiv table tr:nth-child(even) {
    background-color: var(--tableRow)
}

.summaryTable .tableDiv table tr:hover {
    z-index: 10
}

.summaryTable .tableDiv table tr:hover .viewBtn {
    opacity: 1
}

.summaryTable .tableDiv table tr:hover td .rowCheckBox, .summaryTable .tableDiv table tr:hover td .selectAllCheckBox, .summaryTable .tableDiv table tr:hover th .rowCheckBox, .summaryTable .tableDiv table tr:hover th .selectAllCheckBox {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.summaryTable .tableDiv table tr th {
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: noWrap;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .733rem;
    font-weight: 500
}

@media (min-width: 768px) {
    .summaryTable .tableDiv table tr th {
        font-size: .667rem
    }
}

.summaryTable .tableDiv table tr th p {
    color: var(--text-color);
    display: inline-block;
    margin: 0;
    top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    opacity: .7
}

.summaryTable .tableDiv table tr th span {
    top: -1px;
    color: inherit;
    font-size: 8px;
    margin-left: 3px
}

.summaryTable .tableDiv table tr th .moreBtn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.summaryTable .tableDiv table tr th .moreBtn .moreIcon {
    color: var(--text-color);
    top: 4px;
    font-size: .878rem !important
}

.summaryTable .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu {
    border-top: 1px solid var(--borderGray)
}

.summaryTable .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label {
    text-transform: capitalize;
    padding: .5rem clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.summaryTable .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label input {
    margin-top: 0 !important
}

.summaryTable .tableDiv table tr td {
    height: 70px;
    min-height: 70px;
    border: none
}

.summaryTable .tableDiv table tr td:nth-last-child(1) {
    padding-right: 10px
}

.summaryTable .tableDiv table tr td .callBack {
    margin-top: 5px
}

.summaryTable .tableDiv table tr td a {
    display: inline-flex;
    z-index: 2
}

.summaryTable .tableDiv table tr td p, .summaryTable .tableDiv table tr td span {
    margin-top: 0;
    line-height: 1.2
}

.summaryTable .tableDiv table tr td .labelText {
    display: flex;
    align-items: center;
    color: var(--gray) !important;
    font-size: .733rem !important;
    font-weight: 500 !important;
    white-space: nowrap
}

.summaryTable .tableDiv table tr td .labelText span {
    margin-top: .25rem;
    display: block;
    color: var(--black) !important;
    font-size: .937rem !important;
    font-weight: 600 !important;
    white-space: nowrap
}

.summaryTable .tableDiv table tr td .link {
    color: #1551bd;
    background-color: #f0f8ff;
    padding: .15rem .55rem;
    border-radius: var(--inputRadius);
    line-height: 1.5;
    transition: var(--transition1);
    cursor: pointer
}

.summaryTable .tableDiv table tr td .link:hover {
    background-color: #dcefff;
    color: #124fc2
}

.summaryTable .tableDiv table tr .tableMenu .moreBtn {
    color: var(--text-color);
    padding: 1.4rem .75rem
}

.summaryTable .tableDiv table tr .tableMenu .moreBtn i {
    color: inherit
}

.summaryTable .tableDiv table tr .hidden {
    width: 0;
    padding: 0;
    opacity: 0
}

.summaryTable .tableDiv table tr .viewBtn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 101%;
    min-height: 101%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    opacity: 0;
    background: #000724;
    background: linear-gradient(90deg, var(--tableHover) 0%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition2);
    cursor: pointer
}

.summaryTable .tableDiv table tr .viewBtn a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.summaryTable .tableDiv table .activeRow {
    background-color: var(--tableHighlight) !important
}

.summaryTable .titleDiv {
    padding: var(--summary-card-padding)
}

.singleSummaryGrid {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    display: flex;
    flex-direction: column;
    color: var(--summary-card-text);
    border: 1px solid rgba(22, 83, 79, .1019607843);
    border-radius: var(--summary-card-radius);
    padding: var(--summary-card-padding);
    background: var(--summary-card-bg);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .048) 0px 1px 2px 0px;
    min-width: 150px
}

.singleSummaryGrid * {
    font-family: inherit !important
}

.singleSummaryGrid .ct-grid {
    stroke: var(--borderGray);
    stroke-width: 1px;
    stroke-dasharray: 1px
}

.singleSummaryGrid .ct-chart-bar .ct-grids .ct-horizontal {
    display: none
}

.singleSummaryGrid .ct-chart-bar .ct-labels .ct-label {
    color: var(--black);
    font-weight: 500;
    margin-top: 10px
}

.singleSummaryGrid .ct-point {
    stroke-width: var(--summary-strock);
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryGrid .ct-series-a .ct-point {
    stroke: var(--summary-color-1)
}

.singleSummaryGrid .ct-series-b .ct-point {
    stroke: var(--summary-color-2)
}

.singleSummaryGrid .ct-series-c .ct-point {
    stroke: var(--summary-color-3)
}

.singleSummaryGrid .ct-series-d .ct-point {
    stroke: var(--summary-color-4)
}

.singleSummaryGrid .ct-series-e .ct-point {
    stroke: var(--summary-color-5)
}

.singleSummaryGrid .ct-slice-pie {
    stroke: rgba(0, 0, 0, 0);
    stroke-width: var(--summary-strock)
}

.singleSummaryGrid .ct-series-a .ct-slice-pie {
    fill: var(--summary-color-1)
}

.singleSummaryGrid .ct-series-b .ct-slice-pie {
    fill: var(--summary-color-2)
}

.singleSummaryGrid .ct-series-c .ct-slice-pie {
    fill: var(--summary-color-3)
}

.singleSummaryGrid .ct-series-d .ct-slice-pie {
    fill: var(--summary-color-4)
}

.singleSummaryGrid .ct-series-e .ct-slice-pie {
    fill: var(--summary-color-5)
}

.singleSummaryGrid .ct-line {
    stroke-width: 3px;
    stroke-dasharray: 0
}

.singleSummaryGrid .ct-area {
    fill: rgba(0, 0, 0, 0) !important
}

.singleSummaryGrid .ct-series-a .ct-line {
    stroke: var(--summary-color-1)
}

.singleSummaryGrid .ct-series-b .ct-line {
    stroke: var(--summary-color-2)
}

.singleSummaryGrid .ct-series-c .ct-line {
    stroke: var(--summary-color-3)
}

.singleSummaryGrid .ct-series-d .ct-line {
    stroke: var(--summary-color-4)
}

.singleSummaryGrid .ct-series-e .ct-line {
    stroke: var(--summary-color-5)
}

.singleSummaryGrid .ct-chart-pie {
    margin: 0;
    margin-top: var(--summary-card-gap);
    transform: scale(0.9)
}

.singleSummaryGrid .ct-chart-pie .ct-label {
    fill: var(--white) !important;
    color: var(--white) !important;
    font-size: 1.5em !important
}

.singleSummaryGrid .ct-chart-donut .ct-label {
    fill: var(--black) !important;
    color: var(--black) !important;
    font-size: 2vh !important
}

.singleSummaryGrid foreignObject {
    width: 16px !important;
    height: 16px !important
}

.singleSummaryGrid foreignObject .ct-label.ct-vertical.ct-start {
    color: var(--darkGray);
    width: 16px !important;
    height: 16px !important
}

.singleSummaryGrid .ct-bar {
    stroke-width: var(--summary-strock);
    stroke-dasharray: 0;
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryGrid .ct-series-a .ct-bar {
    stroke: var(--summary-color-1)
}

.singleSummaryGrid .ct-series-b .ct-bar {
    stroke: var(--summary-color-2)
}

.singleSummaryGrid .ct-series-c .ct-bar {
    stroke: var(--summary-color-3)
}

.singleSummaryGrid .ct-series-d .ct-bar {
    stroke: var(--summary-color-4)
}

.singleSummaryGrid .ct-series-e .ct-bar {
    stroke: var(--summary-color-5)
}

.singleSummaryGrid .ct-slice-donut {
    stroke-width: var(--summary-strock) !important;
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryGrid .ct-series-a .ct-slice-donut {
    stroke: var(--summary-color-1)
}

.singleSummaryGrid .ct-series-b .ct-slice-donut {
    stroke: var(--summary-color-2)
}

.singleSummaryGrid .ct-series-c .ct-slice-donut {
    stroke: var(--summary-color-3)
}

.singleSummaryGrid .ct-series-d .ct-slice-donut {
    stroke: var(--summary-color-4)
}

.singleSummaryGrid .ct-series-e .ct-slice-donut {
    stroke: var(--summary-color-5)
}

.singleSummaryGrid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

.singleSummaryGrid .titleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px
}

.singleSummaryGrid .titleDiv .title {
    color: inherit;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    line-height: 1
}

.singleSummaryGrid .titleDiv .title span {
    font-size: .937rem;
    font-weight: 400;
    opacity: .8;
    margin-left: 10px
}

.singleSummaryGrid .titleDiv .btnDiv {
    margin-top: 0;
    gap: 10px
}

.singleSummaryGrid .titleDiv .btnDiv a {
    margin-top: 0
}

.singleSummaryGrid .titleDiv .btnDiv selector selected {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius)
}

.singleSummaryGrid .titleDiv .btnDiv selector selected item {
    padding: 11px 15px;
    font-size: .937rem
}

.singleSummaryGrid .titleDiv .btnDiv selector item {
    padding: 8px 10px
}

@media (min-width: 768px) {
    .singleSummaryGrid .titleDiv .btnDiv selector item {
        padding: 7px 10px
    }
}

.singleSummaryGrid .titleDiv .btnDiv selector * {
    font-size: 1rem
}

@media (min-width: 768px) {
    .singleSummaryGrid .titleDiv .btnDiv selector * {
        font-size: .733rem
    }
}

.singleSummaryGrid .titleDiv .btnDiv selector options {
    min-width: 100px
}

.singleSummaryGrid .chartToolTip {
    display: flex;
    flex-wrap: wrap
}

.singleSummaryGrid .chartToolTip li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: inherit;
    font-size: .878rem
}

.singleSummaryGrid .chartToolTip li span {
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: var(--inputRadius);
    background-color: var(--textGray)
}

.singleSummaryGrid .chartToolTip li:nth-child(1) span {
    background: var(--summary-color-1)
}

.singleSummaryGrid .chartToolTip li:nth-child(2) span {
    background: var(--summary-color-2)
}

.singleSummaryGrid .chartToolTip li:nth-child(3) span {
    background: var(--summary-color-3)
}

.singleSummaryGrid .chartToolTip li:nth-child(4) span {
    background: var(--summary-color-4)
}

.singleSummaryGrid .chartToolTip li:nth-child(5) span {
    background: var(--summary-color-5)
}

.singleSummaryGrid .tableDiv {
    width: calc(100% + 15px);
    min-width: calc(100% + 15px);
    max-width: calc(100% + 15px);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .7075rem;
    background: var(--standard-bg-color);
    overflow-x: auto;
    overflow-y: clip;
    padding: 0;
    margin: 0
}

@media (min-width: 768px) {
    .singleSummaryGrid .tableDiv {
        display: block;
        padding-top: 0
    }
}

@media (min-width: 1024px) {
    .singleSummaryGrid .tableDiv {
        background: rgba(0, 0, 0, 0)
    }
}

.singleSummaryGrid .tableDiv::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.singleSummaryGrid .tableDiv::-webkit-scrollbar-track {
    background-color: var(--white)
}

.singleSummaryGrid .tableDiv::-webkit-scrollbar-thumb {
    background: var(--borderGray);
    border-radius: var(--inputRadius)
}

.singleSummaryGrid .tableDiv::-webkit-scrollbar-thumb:window-inactive {
    background: var(--borderGray)
}

.singleSummaryGrid .tableDiv table {
    min-height: 100%
}

.singleSummaryGrid .tableDiv table tbody {
    width: 100%;
    display: table
}

.singleSummaryGrid .tableDiv table .checkBoxTD {
    position: relative;
    left: 0;
    z-index: 10;
    width: 6%;
    min-width: 130px;
    max-width: 130px;
    height: 100%;
    display: table-cell;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: .7075rem;
    border: none;
    white-space: nowrap;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .singleSummaryGrid .tableDiv table .checkBoxTD {
        padding-left: .7075rem;
        width: 4%;
        min-width: 90px;
        max-width: 90px
    }
}

.singleSummaryGrid .tableDiv table .checkBoxTD p {
    display: inline-block;
    opacity: .65;
    top: -5px;
    font-weight: 400
}

.singleSummaryGrid .tableDiv table .checkBoxTD .rowCheckBox, .singleSummaryGrid .tableDiv table .checkBoxTD .selectAllCheckBox {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    transition: var(--transition3)
}

@media (min-width: 768px) {
    .singleSummaryGrid .tableDiv table .checkBoxTD .rowCheckBox, .singleSummaryGrid .tableDiv table .checkBoxTD .selectAllCheckBox {
        opacity: 0
    }
}

.singleSummaryGrid .tableDiv table .checkBoxTD .rowCheckBox:checked, .singleSummaryGrid .tableDiv table .checkBoxTD .selectAllCheckBox:checked {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.singleSummaryGrid .tableDiv table .checkBoxTD .rowCheckBox::before, .singleSummaryGrid .tableDiv table .checkBoxTD .selectAllCheckBox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 80px;
    transform: translate(-50%, -50%)
}

.singleSummaryGrid .tableDiv table .checkBoxTD .moreBtn {
    height: 100%
}

.singleSummaryGrid .tableDiv table .checkBoxTD .moreBtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

.singleSummaryGrid .tableDiv table .checkBoxTD .moreBtn:hover .btnMenuDiv {
    padding-left: 1px
}

.singleSummaryGrid .tableDiv table .checkBoxTD .moreBtn .moreIcon {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.singleSummaryGrid .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv {
    top: -2px;
    left: 100%;
    width: max-content;
    min-width: 250px;
    padding-top: 0
}

.singleSummaryGrid .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv .btnMenu {
    border-top: none
}

.singleSummaryGrid .tableDiv table .contactActionList .contactList {
    border: none !important;
    padding: 0 !important
}

.singleSummaryGrid .tableDiv table .contactActionList .contactList p {
    margin-bottom: 0
}

.singleSummaryGrid .tableDiv table tr:nth-child(1) {
    height: 30px;
    border-bottom: 1px solid rgba(131, 131, 131, .1411764706)
}

.singleSummaryGrid .tableDiv table tr:nth-child(1) th {
    height: inherit;
    min-height: inherit
}

.singleSummaryGrid .tableDiv table tr:nth-child(even) {
    background-color: var(--tableRow)
}

.singleSummaryGrid .tableDiv table tr:hover {
    z-index: 10
}

.singleSummaryGrid .tableDiv table tr:hover .viewBtn {
    opacity: 1
}

.singleSummaryGrid .tableDiv table tr:hover td .rowCheckBox, .singleSummaryGrid .tableDiv table tr:hover td .selectAllCheckBox, .singleSummaryGrid .tableDiv table tr:hover th .rowCheckBox, .singleSummaryGrid .tableDiv table tr:hover th .selectAllCheckBox {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.singleSummaryGrid .tableDiv table tr th {
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: noWrap;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .733rem;
    font-weight: 500
}

@media (min-width: 768px) {
    .singleSummaryGrid .tableDiv table tr th {
        font-size: .667rem
    }
}

.singleSummaryGrid .tableDiv table tr th p {
    color: var(--text-color);
    display: inline-block;
    margin: 0;
    top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    opacity: .7
}

.singleSummaryGrid .tableDiv table tr th span {
    top: -1px;
    color: inherit;
    font-size: 8px;
    margin-left: 3px
}

.singleSummaryGrid .tableDiv table tr th .moreBtn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.singleSummaryGrid .tableDiv table tr th .moreBtn .moreIcon {
    color: var(--text-color);
    top: 4px;
    font-size: .878rem !important
}

.singleSummaryGrid .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu {
    border-top: 1px solid var(--borderGray)
}

.singleSummaryGrid .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label {
    text-transform: capitalize;
    padding: .5rem clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.singleSummaryGrid .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label input {
    margin-top: 0 !important
}

.singleSummaryGrid .tableDiv table tr td {
    height: 70px;
    min-height: 70px;
    border: none
}

.singleSummaryGrid .tableDiv table tr td:nth-last-child(1) {
    padding-right: 10px
}

.singleSummaryGrid .tableDiv table tr td .callBack {
    margin-top: 5px
}

.singleSummaryGrid .tableDiv table tr td a {
    display: inline-flex;
    z-index: 2
}

.singleSummaryGrid .tableDiv table tr td p, .singleSummaryGrid .tableDiv table tr td span {
    margin-top: 0;
    line-height: 1.2
}

.singleSummaryGrid .tableDiv table tr td .labelText {
    display: flex;
    align-items: center;
    color: var(--gray) !important;
    font-size: .733rem !important;
    font-weight: 500 !important;
    white-space: nowrap
}

.singleSummaryGrid .tableDiv table tr td .labelText span {
    margin-top: .25rem;
    display: block;
    color: var(--black) !important;
    font-size: .937rem !important;
    font-weight: 600 !important;
    white-space: nowrap
}

.singleSummaryGrid .tableDiv table tr td .link {
    color: #1551bd;
    background-color: #f0f8ff;
    padding: .15rem .55rem;
    border-radius: var(--inputRadius);
    line-height: 1.5;
    transition: var(--transition1);
    cursor: pointer
}

.singleSummaryGrid .tableDiv table tr td .link:hover {
    background-color: #dcefff;
    color: #124fc2
}

.singleSummaryGrid .tableDiv table tr .tableMenu .moreBtn {
    color: var(--text-color);
    padding: 1.4rem .75rem
}

.singleSummaryGrid .tableDiv table tr .tableMenu .moreBtn i {
    color: inherit
}

.singleSummaryGrid .tableDiv table tr .hidden {
    width: 0;
    padding: 0;
    opacity: 0
}

.singleSummaryGrid .tableDiv table tr .viewBtn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 101%;
    min-height: 101%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    opacity: 0;
    background: #000724;
    background: linear-gradient(90deg, var(--tableHover) 0%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition2);
    cursor: pointer
}

.singleSummaryGrid .tableDiv table tr .viewBtn a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.singleSummaryGrid .tableDiv table .activeRow {
    background-color: var(--tableHighlight) !important
}

.singleSummaryGrid:hover::before {
    width: 100%;
    height: 100%
}

.singleSummaryGrid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    background-color: var(--lightGray);
    border-radius: inherit;
    cursor: pointer;
    transition: var(--transition1)
}

.singleSummaryGrid:nth-child(1) {
    border: 1px solid #b8c5ff !important
}

.singleSummaryGrid:nth-child(1):hover {
    border: 1px solid #b8c5ff
}

.singleSummaryGrid:nth-child(1) .icon {
    background-color: #6f83db
}

.singleSummaryGrid:nth-child(2):hover {
    border: 1px solid #ddb8ff
}

.singleSummaryGrid:nth-child(2)::before {
    background-color: #faf5ff
}

.singleSummaryGrid:nth-child(2) .icon {
    background-color: #a16fdb
}

.singleSummaryGrid:nth-child(3):hover {
    border: 1px solid #ffcfb8
}

.singleSummaryGrid:nth-child(3)::before {
    background-color: #fff8f5
}

.singleSummaryGrid:nth-child(3) .icon {
    background-color: #ff9271
}

.singleSummaryGrid:nth-child(4):hover {
    border: 1px solid #c4e293
}

.singleSummaryGrid:nth-child(4)::before {
    background-color: #fafff5
}

.singleSummaryGrid:nth-child(4) .icon {
    background-color: #a0db6f
}

.singleSummaryGrid:nth-child(5):hover {
    border: 1px solid #94e6d4
}

.singleSummaryGrid:nth-child(5)::before {
    background-color: #f5fffe
}

.singleSummaryGrid:nth-child(5) .icon {
    background-color: #3fddc3
}

.singleSummaryGrid:nth-child(6):hover {
    border: 1px solid #c2cdff
}

.singleSummaryGrid:nth-child(6)::before {
    background-color: #f5f9ff
}

.singleSummaryGrid:nth-child(6) .icon {
    background-color: #3f76dd
}

.singleSummaryGrid:nth-child(7):hover {
    border: 1px solid #ffd3d3
}

.singleSummaryGrid:nth-child(7)::before {
    background-color: #fff5f5
}

.singleSummaryGrid:nth-child(7) .icon {
    background-color: #cf3939
}

.singleSummaryGrid .icon {
    display: flex;
    width: 40px;
    height: 40px;
    padding: .5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius);
    cursor: pointer
}

.singleSummaryGrid .icon i {
    margin: auto;
    color: var(--white)
}

.singleSummaryGrid .icon img {
    cursor: pointer
}

.singleSummaryGrid .label {
    font-size: .667rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: .5rem;
    cursor: pointer
}

.singleSummaryGrid .value {
    margin: 0;
    display: inline-block;
    font-weight: 500;
    cursor: pointer
}

.singleSummaryGrid .value:empty::before {
    content: "0";
    color: var(--black);
    display: inline-block
}

.singleSummaryGraphCard {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    display: flex;
    flex-direction: column;
    color: var(--summary-card-text);
    border: 1px solid rgba(22, 83, 79, .1019607843);
    border-radius: var(--summary-card-radius);
    padding: var(--summary-card-padding);
    background: var(--summary-card-bg);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .048) 0px 1px 2px 0px;
    padding: 0 !important
}

.singleSummaryGraphCard * {
    font-family: inherit !important
}

.singleSummaryGraphCard .ct-grid {
    stroke: var(--borderGray);
    stroke-width: 1px;
    stroke-dasharray: 1px
}

.singleSummaryGraphCard .ct-chart-bar .ct-grids .ct-horizontal {
    display: none
}

.singleSummaryGraphCard .ct-chart-bar .ct-labels .ct-label {
    color: var(--black);
    font-weight: 500;
    margin-top: 10px
}

.singleSummaryGraphCard .ct-point {
    stroke-width: var(--summary-strock);
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryGraphCard .ct-series-a .ct-point {
    stroke: var(--summary-color-1)
}

.singleSummaryGraphCard .ct-series-b .ct-point {
    stroke: var(--summary-color-2)
}

.singleSummaryGraphCard .ct-series-c .ct-point {
    stroke: var(--summary-color-3)
}

.singleSummaryGraphCard .ct-series-d .ct-point {
    stroke: var(--summary-color-4)
}

.singleSummaryGraphCard .ct-series-e .ct-point {
    stroke: var(--summary-color-5)
}

.singleSummaryGraphCard .ct-slice-pie {
    stroke: rgba(0, 0, 0, 0);
    stroke-width: var(--summary-strock)
}

.singleSummaryGraphCard .ct-series-a .ct-slice-pie {
    fill: var(--summary-color-1)
}

.singleSummaryGraphCard .ct-series-b .ct-slice-pie {
    fill: var(--summary-color-2)
}

.singleSummaryGraphCard .ct-series-c .ct-slice-pie {
    fill: var(--summary-color-3)
}

.singleSummaryGraphCard .ct-series-d .ct-slice-pie {
    fill: var(--summary-color-4)
}

.singleSummaryGraphCard .ct-series-e .ct-slice-pie {
    fill: var(--summary-color-5)
}

.singleSummaryGraphCard .ct-line {
    stroke-width: 3px;
    stroke-dasharray: 0
}

.singleSummaryGraphCard .ct-area {
    fill: rgba(0, 0, 0, 0) !important
}

.singleSummaryGraphCard .ct-series-a .ct-line {
    stroke: var(--summary-color-1)
}

.singleSummaryGraphCard .ct-series-b .ct-line {
    stroke: var(--summary-color-2)
}

.singleSummaryGraphCard .ct-series-c .ct-line {
    stroke: var(--summary-color-3)
}

.singleSummaryGraphCard .ct-series-d .ct-line {
    stroke: var(--summary-color-4)
}

.singleSummaryGraphCard .ct-series-e .ct-line {
    stroke: var(--summary-color-5)
}

.singleSummaryGraphCard .ct-chart-pie {
    margin: 0;
    margin-top: var(--summary-card-gap);
    transform: scale(0.9)
}

.singleSummaryGraphCard .ct-chart-pie .ct-label {
    fill: var(--white) !important;
    color: var(--white) !important;
    font-size: 1.5em !important
}

.singleSummaryGraphCard .ct-chart-donut .ct-label {
    fill: var(--black) !important;
    color: var(--black) !important;
    font-size: 2vh !important
}

.singleSummaryGraphCard foreignObject {
    width: 16px !important;
    height: 16px !important
}

.singleSummaryGraphCard foreignObject .ct-label.ct-vertical.ct-start {
    color: var(--darkGray);
    width: 16px !important;
    height: 16px !important
}

.singleSummaryGraphCard .ct-bar {
    stroke-width: var(--summary-strock);
    stroke-dasharray: 0;
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryGraphCard .ct-series-a .ct-bar {
    stroke: var(--summary-color-1)
}

.singleSummaryGraphCard .ct-series-b .ct-bar {
    stroke: var(--summary-color-2)
}

.singleSummaryGraphCard .ct-series-c .ct-bar {
    stroke: var(--summary-color-3)
}

.singleSummaryGraphCard .ct-series-d .ct-bar {
    stroke: var(--summary-color-4)
}

.singleSummaryGraphCard .ct-series-e .ct-bar {
    stroke: var(--summary-color-5)
}

.singleSummaryGraphCard .ct-slice-donut {
    stroke-width: var(--summary-strock) !important;
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryGraphCard .ct-series-a .ct-slice-donut {
    stroke: var(--summary-color-1)
}

.singleSummaryGraphCard .ct-series-b .ct-slice-donut {
    stroke: var(--summary-color-2)
}

.singleSummaryGraphCard .ct-series-c .ct-slice-donut {
    stroke: var(--summary-color-3)
}

.singleSummaryGraphCard .ct-series-d .ct-slice-donut {
    stroke: var(--summary-color-4)
}

.singleSummaryGraphCard .ct-series-e .ct-slice-donut {
    stroke: var(--summary-color-5)
}

.singleSummaryGraphCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

.singleSummaryGraphCard .titleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px
}

.singleSummaryGraphCard .titleDiv .title {
    color: inherit;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    line-height: 1
}

.singleSummaryGraphCard .titleDiv .title span {
    font-size: .937rem;
    font-weight: 400;
    opacity: .8;
    margin-left: 10px
}

.singleSummaryGraphCard .titleDiv .btnDiv {
    margin-top: 0;
    gap: 10px
}

.singleSummaryGraphCard .titleDiv .btnDiv a {
    margin-top: 0
}

.singleSummaryGraphCard .titleDiv .btnDiv selector selected {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius)
}

.singleSummaryGraphCard .titleDiv .btnDiv selector selected item {
    padding: 11px 15px;
    font-size: .937rem
}

.singleSummaryGraphCard .titleDiv .btnDiv selector item {
    padding: 8px 10px
}

@media (min-width: 768px) {
    .singleSummaryGraphCard .titleDiv .btnDiv selector item {
        padding: 7px 10px
    }
}

.singleSummaryGraphCard .titleDiv .btnDiv selector * {
    font-size: 1rem
}

@media (min-width: 768px) {
    .singleSummaryGraphCard .titleDiv .btnDiv selector * {
        font-size: .733rem
    }
}

.singleSummaryGraphCard .titleDiv .btnDiv selector options {
    min-width: 100px
}

.singleSummaryGraphCard .chartToolTip {
    display: flex;
    flex-wrap: wrap
}

.singleSummaryGraphCard .chartToolTip li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: inherit;
    font-size: .878rem
}

.singleSummaryGraphCard .chartToolTip li span {
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: var(--inputRadius);
    background-color: var(--textGray)
}

.singleSummaryGraphCard .chartToolTip li:nth-child(1) span {
    background: var(--summary-color-1)
}

.singleSummaryGraphCard .chartToolTip li:nth-child(2) span {
    background: var(--summary-color-2)
}

.singleSummaryGraphCard .chartToolTip li:nth-child(3) span {
    background: var(--summary-color-3)
}

.singleSummaryGraphCard .chartToolTip li:nth-child(4) span {
    background: var(--summary-color-4)
}

.singleSummaryGraphCard .chartToolTip li:nth-child(5) span {
    background: var(--summary-color-5)
}

.singleSummaryGraphCard .tableDiv {
    width: calc(100% + 15px);
    min-width: calc(100% + 15px);
    max-width: calc(100% + 15px);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .7075rem;
    background: var(--standard-bg-color);
    overflow-x: auto;
    overflow-y: clip;
    padding: 0;
    margin: 0
}

@media (min-width: 768px) {
    .singleSummaryGraphCard .tableDiv {
        display: block;
        padding-top: 0
    }
}

@media (min-width: 1024px) {
    .singleSummaryGraphCard .tableDiv {
        background: rgba(0, 0, 0, 0)
    }
}

.singleSummaryGraphCard .tableDiv::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.singleSummaryGraphCard .tableDiv::-webkit-scrollbar-track {
    background-color: var(--white)
}

.singleSummaryGraphCard .tableDiv::-webkit-scrollbar-thumb {
    background: var(--borderGray);
    border-radius: var(--inputRadius)
}

.singleSummaryGraphCard .tableDiv::-webkit-scrollbar-thumb:window-inactive {
    background: var(--borderGray)
}

.singleSummaryGraphCard .tableDiv table {
    min-height: 100%
}

.singleSummaryGraphCard .tableDiv table tbody {
    width: 100%;
    display: table
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD {
    position: relative;
    left: 0;
    z-index: 10;
    width: 6%;
    min-width: 130px;
    max-width: 130px;
    height: 100%;
    display: table-cell;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: .7075rem;
    border: none;
    white-space: nowrap;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .singleSummaryGraphCard .tableDiv table .checkBoxTD {
        padding-left: .7075rem;
        width: 4%;
        min-width: 90px;
        max-width: 90px
    }
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD p {
    display: inline-block;
    opacity: .65;
    top: -5px;
    font-weight: 400
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .rowCheckBox, .singleSummaryGraphCard .tableDiv table .checkBoxTD .selectAllCheckBox {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    transition: var(--transition3)
}

@media (min-width: 768px) {
    .singleSummaryGraphCard .tableDiv table .checkBoxTD .rowCheckBox, .singleSummaryGraphCard .tableDiv table .checkBoxTD .selectAllCheckBox {
        opacity: 0
    }
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .rowCheckBox:checked, .singleSummaryGraphCard .tableDiv table .checkBoxTD .selectAllCheckBox:checked {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .rowCheckBox::before, .singleSummaryGraphCard .tableDiv table .checkBoxTD .selectAllCheckBox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 80px;
    transform: translate(-50%, -50%)
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .moreBtn {
    height: 100%
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .moreBtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .moreBtn:hover .btnMenuDiv {
    padding-left: 1px
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .moreBtn .moreIcon {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv {
    top: -2px;
    left: 100%;
    width: max-content;
    min-width: 250px;
    padding-top: 0
}

.singleSummaryGraphCard .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv .btnMenu {
    border-top: none
}

.singleSummaryGraphCard .tableDiv table .contactActionList .contactList {
    border: none !important;
    padding: 0 !important
}

.singleSummaryGraphCard .tableDiv table .contactActionList .contactList p {
    margin-bottom: 0
}

.singleSummaryGraphCard .tableDiv table tr:nth-child(1) {
    height: 30px;
    border-bottom: 1px solid rgba(131, 131, 131, .1411764706)
}

.singleSummaryGraphCard .tableDiv table tr:nth-child(1) th {
    height: inherit;
    min-height: inherit
}

.singleSummaryGraphCard .tableDiv table tr:nth-child(even) {
    background-color: var(--tableRow)
}

.singleSummaryGraphCard .tableDiv table tr:hover {
    z-index: 10
}

.singleSummaryGraphCard .tableDiv table tr:hover .viewBtn {
    opacity: 1
}

.singleSummaryGraphCard .tableDiv table tr:hover td .rowCheckBox, .singleSummaryGraphCard .tableDiv table tr:hover td .selectAllCheckBox, .singleSummaryGraphCard .tableDiv table tr:hover th .rowCheckBox, .singleSummaryGraphCard .tableDiv table tr:hover th .selectAllCheckBox {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.singleSummaryGraphCard .tableDiv table tr th {
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: noWrap;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .733rem;
    font-weight: 500
}

@media (min-width: 768px) {
    .singleSummaryGraphCard .tableDiv table tr th {
        font-size: .667rem
    }
}

.singleSummaryGraphCard .tableDiv table tr th p {
    color: var(--text-color);
    display: inline-block;
    margin: 0;
    top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    opacity: .7
}

.singleSummaryGraphCard .tableDiv table tr th span {
    top: -1px;
    color: inherit;
    font-size: 8px;
    margin-left: 3px
}

.singleSummaryGraphCard .tableDiv table tr th .moreBtn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.singleSummaryGraphCard .tableDiv table tr th .moreBtn .moreIcon {
    color: var(--text-color);
    top: 4px;
    font-size: .878rem !important
}

.singleSummaryGraphCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu {
    border-top: 1px solid var(--borderGray)
}

.singleSummaryGraphCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label {
    text-transform: capitalize;
    padding: .5rem clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.singleSummaryGraphCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label input {
    margin-top: 0 !important
}

.singleSummaryGraphCard .tableDiv table tr td {
    height: 70px;
    min-height: 70px;
    border: none
}

.singleSummaryGraphCard .tableDiv table tr td:nth-last-child(1) {
    padding-right: 10px
}

.singleSummaryGraphCard .tableDiv table tr td .callBack {
    margin-top: 5px
}

.singleSummaryGraphCard .tableDiv table tr td a {
    display: inline-flex;
    z-index: 2
}

.singleSummaryGraphCard .tableDiv table tr td p, .singleSummaryGraphCard .tableDiv table tr td span {
    margin-top: 0;
    line-height: 1.2
}

.singleSummaryGraphCard .tableDiv table tr td .labelText {
    display: flex;
    align-items: center;
    color: var(--gray) !important;
    font-size: .733rem !important;
    font-weight: 500 !important;
    white-space: nowrap
}

.singleSummaryGraphCard .tableDiv table tr td .labelText span {
    margin-top: .25rem;
    display: block;
    color: var(--black) !important;
    font-size: .937rem !important;
    font-weight: 600 !important;
    white-space: nowrap
}

.singleSummaryGraphCard .tableDiv table tr td .link {
    color: #1551bd;
    background-color: #f0f8ff;
    padding: .15rem .55rem;
    border-radius: var(--inputRadius);
    line-height: 1.5;
    transition: var(--transition1);
    cursor: pointer
}

.singleSummaryGraphCard .tableDiv table tr td .link:hover {
    background-color: #dcefff;
    color: #124fc2
}

.singleSummaryGraphCard .tableDiv table tr .tableMenu .moreBtn {
    color: var(--text-color);
    padding: 1.4rem .75rem
}

.singleSummaryGraphCard .tableDiv table tr .tableMenu .moreBtn i {
    color: inherit
}

.singleSummaryGraphCard .tableDiv table tr .hidden {
    width: 0;
    padding: 0;
    opacity: 0
}

.singleSummaryGraphCard .tableDiv table tr .viewBtn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 101%;
    min-height: 101%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    opacity: 0;
    background: #000724;
    background: linear-gradient(90deg, var(--tableHover) 0%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition2);
    cursor: pointer
}

.singleSummaryGraphCard .tableDiv table tr .viewBtn a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.singleSummaryGraphCard .tableDiv table .activeRow {
    background-color: var(--tableHighlight) !important
}

.singleSummaryGraphCard .titleDiv {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--summary-card-padding);
    margin-bottom: 0
}

@media (min-width: 768px) {
    .singleSummaryGraphCard .titleDiv {
        padding: var(--summary-card-padding)
    }
}

.singleSummaryGraphCard .titleDiv .label {
    display: block;
    margin: 0;
    font-size: .733rem;
    font-weight: 500;
    opacity: .8
}

.singleSummaryGraphCard .titleDiv .value {
    margin-top: 10px;
    display: block
}

.singleSummaryGraphCard .ct-chart {
    left: -20%
}

.singleSummaryGraphCard .ct-grids, .singleSummaryGraphCard .ct-labels {
    display: none
}

.singleSummaryListCard {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    display: flex;
    flex-direction: column;
    color: var(--summary-card-text);
    border: 1px solid rgba(22, 83, 79, .1019607843);
    border-radius: var(--summary-card-radius);
    padding: var(--summary-card-padding);
    background: var(--summary-card-bg);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .048) 0px 1px 2px 0px
}

.singleSummaryListCard * {
    font-family: inherit !important
}

.singleSummaryListCard .ct-grid {
    stroke: var(--borderGray);
    stroke-width: 1px;
    stroke-dasharray: 1px
}

.singleSummaryListCard .ct-chart-bar .ct-grids .ct-horizontal {
    display: none
}

.singleSummaryListCard .ct-chart-bar .ct-labels .ct-label {
    color: var(--black);
    font-weight: 500;
    margin-top: 10px
}

.singleSummaryListCard .ct-point {
    stroke-width: var(--summary-strock);
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryListCard .ct-series-a .ct-point {
    stroke: var(--summary-color-1)
}

.singleSummaryListCard .ct-series-b .ct-point {
    stroke: var(--summary-color-2)
}

.singleSummaryListCard .ct-series-c .ct-point {
    stroke: var(--summary-color-3)
}

.singleSummaryListCard .ct-series-d .ct-point {
    stroke: var(--summary-color-4)
}

.singleSummaryListCard .ct-series-e .ct-point {
    stroke: var(--summary-color-5)
}

.singleSummaryListCard .ct-slice-pie {
    stroke: rgba(0, 0, 0, 0);
    stroke-width: var(--summary-strock)
}

.singleSummaryListCard .ct-series-a .ct-slice-pie {
    fill: var(--summary-color-1)
}

.singleSummaryListCard .ct-series-b .ct-slice-pie {
    fill: var(--summary-color-2)
}

.singleSummaryListCard .ct-series-c .ct-slice-pie {
    fill: var(--summary-color-3)
}

.singleSummaryListCard .ct-series-d .ct-slice-pie {
    fill: var(--summary-color-4)
}

.singleSummaryListCard .ct-series-e .ct-slice-pie {
    fill: var(--summary-color-5)
}

.singleSummaryListCard .ct-line {
    stroke-width: 3px;
    stroke-dasharray: 0
}

.singleSummaryListCard .ct-area {
    fill: rgba(0, 0, 0, 0) !important
}

.singleSummaryListCard .ct-series-a .ct-line {
    stroke: var(--summary-color-1)
}

.singleSummaryListCard .ct-series-b .ct-line {
    stroke: var(--summary-color-2)
}

.singleSummaryListCard .ct-series-c .ct-line {
    stroke: var(--summary-color-3)
}

.singleSummaryListCard .ct-series-d .ct-line {
    stroke: var(--summary-color-4)
}

.singleSummaryListCard .ct-series-e .ct-line {
    stroke: var(--summary-color-5)
}

.singleSummaryListCard .ct-chart-pie {
    margin: 0;
    margin-top: var(--summary-card-gap);
    transform: scale(0.9)
}

.singleSummaryListCard .ct-chart-pie .ct-label {
    fill: var(--white) !important;
    color: var(--white) !important;
    font-size: 1.5em !important
}

.singleSummaryListCard .ct-chart-donut .ct-label {
    fill: var(--black) !important;
    color: var(--black) !important;
    font-size: 2vh !important
}

.singleSummaryListCard foreignObject {
    width: 16px !important;
    height: 16px !important
}

.singleSummaryListCard foreignObject .ct-label.ct-vertical.ct-start {
    color: var(--darkGray);
    width: 16px !important;
    height: 16px !important
}

.singleSummaryListCard .ct-bar {
    stroke-width: var(--summary-strock);
    stroke-dasharray: 0;
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryListCard .ct-series-a .ct-bar {
    stroke: var(--summary-color-1)
}

.singleSummaryListCard .ct-series-b .ct-bar {
    stroke: var(--summary-color-2)
}

.singleSummaryListCard .ct-series-c .ct-bar {
    stroke: var(--summary-color-3)
}

.singleSummaryListCard .ct-series-d .ct-bar {
    stroke: var(--summary-color-4)
}

.singleSummaryListCard .ct-series-e .ct-bar {
    stroke: var(--summary-color-5)
}

.singleSummaryListCard .ct-slice-donut {
    stroke-width: var(--summary-strock) !important;
    stroke-linecap: var(--summary-strock-shape)
}

.singleSummaryListCard .ct-series-a .ct-slice-donut {
    stroke: var(--summary-color-1)
}

.singleSummaryListCard .ct-series-b .ct-slice-donut {
    stroke: var(--summary-color-2)
}

.singleSummaryListCard .ct-series-c .ct-slice-donut {
    stroke: var(--summary-color-3)
}

.singleSummaryListCard .ct-series-d .ct-slice-donut {
    stroke: var(--summary-color-4)
}

.singleSummaryListCard .ct-series-e .ct-slice-donut {
    stroke: var(--summary-color-5)
}

.singleSummaryListCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

.singleSummaryListCard .titleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px
}

.singleSummaryListCard .titleDiv .title {
    color: inherit;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    line-height: 1
}

.singleSummaryListCard .titleDiv .title span {
    font-size: .937rem;
    font-weight: 400;
    opacity: .8;
    margin-left: 10px
}

.singleSummaryListCard .titleDiv .btnDiv {
    margin-top: 0;
    gap: 10px
}

.singleSummaryListCard .titleDiv .btnDiv a {
    margin-top: 0
}

.singleSummaryListCard .titleDiv .btnDiv selector selected {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius)
}

.singleSummaryListCard .titleDiv .btnDiv selector selected item {
    padding: 11px 15px;
    font-size: .937rem
}

.singleSummaryListCard .titleDiv .btnDiv selector item {
    padding: 8px 10px
}

@media (min-width: 768px) {
    .singleSummaryListCard .titleDiv .btnDiv selector item {
        padding: 7px 10px
    }
}

.singleSummaryListCard .titleDiv .btnDiv selector * {
    font-size: 1rem
}

@media (min-width: 768px) {
    .singleSummaryListCard .titleDiv .btnDiv selector * {
        font-size: .733rem
    }
}

.singleSummaryListCard .titleDiv .btnDiv selector options {
    min-width: 100px
}

.singleSummaryListCard .chartToolTip {
    display: flex;
    flex-wrap: wrap
}

.singleSummaryListCard .chartToolTip li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: inherit;
    font-size: .878rem
}

.singleSummaryListCard .chartToolTip li span {
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: var(--inputRadius);
    background-color: var(--textGray)
}

.singleSummaryListCard .chartToolTip li:nth-child(1) span {
    background: var(--summary-color-1)
}

.singleSummaryListCard .chartToolTip li:nth-child(2) span {
    background: var(--summary-color-2)
}

.singleSummaryListCard .chartToolTip li:nth-child(3) span {
    background: var(--summary-color-3)
}

.singleSummaryListCard .chartToolTip li:nth-child(4) span {
    background: var(--summary-color-4)
}

.singleSummaryListCard .chartToolTip li:nth-child(5) span {
    background: var(--summary-color-5)
}

.singleSummaryListCard .tableDiv {
    width: calc(100% + 15px);
    min-width: calc(100% + 15px);
    max-width: calc(100% + 15px);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .7075rem;
    background: var(--standard-bg-color);
    overflow-x: auto;
    overflow-y: clip;
    padding: 0;
    margin: 0
}

@media (min-width: 768px) {
    .singleSummaryListCard .tableDiv {
        display: block;
        padding-top: 0
    }
}

@media (min-width: 1024px) {
    .singleSummaryListCard .tableDiv {
        background: rgba(0, 0, 0, 0)
    }
}

.singleSummaryListCard .tableDiv::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.singleSummaryListCard .tableDiv::-webkit-scrollbar-track {
    background-color: var(--white)
}

.singleSummaryListCard .tableDiv::-webkit-scrollbar-thumb {
    background: var(--borderGray);
    border-radius: var(--inputRadius)
}

.singleSummaryListCard .tableDiv::-webkit-scrollbar-thumb:window-inactive {
    background: var(--borderGray)
}

.singleSummaryListCard .tableDiv table {
    min-height: 100%
}

.singleSummaryListCard .tableDiv table tbody {
    width: 100%;
    display: table
}

.singleSummaryListCard .tableDiv table .checkBoxTD {
    position: relative;
    left: 0;
    z-index: 10;
    width: 6%;
    min-width: 130px;
    max-width: 130px;
    height: 100%;
    display: table-cell;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: .7075rem;
    border: none;
    white-space: nowrap;
    transition: var(--transition1)
}

@media (min-width: 768px) {
    .singleSummaryListCard .tableDiv table .checkBoxTD {
        padding-left: .7075rem;
        width: 4%;
        min-width: 90px;
        max-width: 90px
    }
}

.singleSummaryListCard .tableDiv table .checkBoxTD p {
    display: inline-block;
    opacity: .65;
    top: -5px;
    font-weight: 400
}

.singleSummaryListCard .tableDiv table .checkBoxTD .rowCheckBox, .singleSummaryListCard .tableDiv table .checkBoxTD .selectAllCheckBox {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    transition: var(--transition3)
}

@media (min-width: 768px) {
    .singleSummaryListCard .tableDiv table .checkBoxTD .rowCheckBox, .singleSummaryListCard .tableDiv table .checkBoxTD .selectAllCheckBox {
        opacity: 0
    }
}

.singleSummaryListCard .tableDiv table .checkBoxTD .rowCheckBox:checked, .singleSummaryListCard .tableDiv table .checkBoxTD .selectAllCheckBox:checked {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.singleSummaryListCard .tableDiv table .checkBoxTD .rowCheckBox::before, .singleSummaryListCard .tableDiv table .checkBoxTD .selectAllCheckBox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 80px;
    transform: translate(-50%, -50%)
}

.singleSummaryListCard .tableDiv table .checkBoxTD .moreBtn {
    height: 100%
}

.singleSummaryListCard .tableDiv table .checkBoxTD .moreBtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
}

.singleSummaryListCard .tableDiv table .checkBoxTD .moreBtn:hover .btnMenuDiv {
    padding-left: 1px
}

.singleSummaryListCard .tableDiv table .checkBoxTD .moreBtn .moreIcon {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

.singleSummaryListCard .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv {
    top: -2px;
    left: 100%;
    width: max-content;
    min-width: 250px;
    padding-top: 0
}

.singleSummaryListCard .tableDiv table .checkBoxTD .moreBtn .btnMenuDiv .btnMenu {
    border-top: none
}

.singleSummaryListCard .tableDiv table .contactActionList .contactList {
    border: none !important;
    padding: 0 !important
}

.singleSummaryListCard .tableDiv table .contactActionList .contactList p {
    margin-bottom: 0
}

.singleSummaryListCard .tableDiv table tr:nth-child(1) {
    height: 30px;
    border-bottom: 1px solid rgba(131, 131, 131, .1411764706)
}

.singleSummaryListCard .tableDiv table tr:nth-child(1) th {
    height: inherit;
    min-height: inherit
}

.singleSummaryListCard .tableDiv table tr:nth-child(even) {
    background-color: var(--tableRow)
}

.singleSummaryListCard .tableDiv table tr:hover {
    z-index: 10
}

.singleSummaryListCard .tableDiv table tr:hover .viewBtn {
    opacity: 1
}

.singleSummaryListCard .tableDiv table tr:hover td .rowCheckBox, .singleSummaryListCard .tableDiv table tr:hover td .selectAllCheckBox, .singleSummaryListCard .tableDiv table tr:hover th .rowCheckBox, .singleSummaryListCard .tableDiv table tr:hover th .selectAllCheckBox {
    opacity: 1;
    transform: translateY(-50%) scale(1.2)
}

.singleSummaryListCard .tableDiv table tr th {
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: noWrap;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .733rem;
    font-weight: 500
}

@media (min-width: 768px) {
    .singleSummaryListCard .tableDiv table tr th {
        font-size: .667rem
    }
}

.singleSummaryListCard .tableDiv table tr th p {
    color: var(--text-color);
    display: inline-block;
    margin: 0;
    top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    opacity: .7
}

.singleSummaryListCard .tableDiv table tr th span {
    top: -1px;
    color: inherit;
    font-size: 8px;
    margin-left: 3px
}

.singleSummaryListCard .tableDiv table tr th .moreBtn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.singleSummaryListCard .tableDiv table tr th .moreBtn .moreIcon {
    color: var(--text-color);
    top: 4px;
    font-size: .878rem !important
}

.singleSummaryListCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu {
    border-top: 1px solid var(--borderGray)
}

.singleSummaryListCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label {
    text-transform: capitalize;
    padding: .5rem clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

.singleSummaryListCard .tableDiv table tr th .moreBtn .btnMenuDiv .btnMenu label input {
    margin-top: 0 !important
}

.singleSummaryListCard .tableDiv table tr td {
    height: 70px;
    min-height: 70px;
    border: none
}

.singleSummaryListCard .tableDiv table tr td:nth-last-child(1) {
    padding-right: 10px
}

.singleSummaryListCard .tableDiv table tr td .callBack {
    margin-top: 5px
}

.singleSummaryListCard .tableDiv table tr td a {
    display: inline-flex;
    z-index: 2
}

.singleSummaryListCard .tableDiv table tr td p, .singleSummaryListCard .tableDiv table tr td span {
    margin-top: 0;
    line-height: 1.2
}

.singleSummaryListCard .tableDiv table tr td .labelText {
    display: flex;
    align-items: center;
    color: var(--gray) !important;
    font-size: .733rem !important;
    font-weight: 500 !important;
    white-space: nowrap
}

.singleSummaryListCard .tableDiv table tr td .labelText span {
    margin-top: .25rem;
    display: block;
    color: var(--black) !important;
    font-size: .937rem !important;
    font-weight: 600 !important;
    white-space: nowrap
}

.singleSummaryListCard .tableDiv table tr td .link {
    color: #1551bd;
    background-color: #f0f8ff;
    padding: .15rem .55rem;
    border-radius: var(--inputRadius);
    line-height: 1.5;
    transition: var(--transition1);
    cursor: pointer
}

.singleSummaryListCard .tableDiv table tr td .link:hover {
    background-color: #dcefff;
    color: #124fc2
}

.singleSummaryListCard .tableDiv table tr .tableMenu .moreBtn {
    color: var(--text-color);
    padding: 1.4rem .75rem
}

.singleSummaryListCard .tableDiv table tr .tableMenu .moreBtn i {
    color: inherit
}

.singleSummaryListCard .tableDiv table tr .hidden {
    width: 0;
    padding: 0;
    opacity: 0
}

.singleSummaryListCard .tableDiv table tr .viewBtn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 101%;
    min-height: 101%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    opacity: 0;
    background: #000724;
    background: linear-gradient(90deg, var(--tableHover) 0%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition2);
    cursor: pointer
}

.singleSummaryListCard .tableDiv table tr .viewBtn a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.singleSummaryListCard .tableDiv table .activeRow {
    background-color: var(--tableHighlight) !important
}

.singleSummaryListCard:hover {
    border: 1px solid var(--color1)
}

.singleSummaryListCard:nth-child(1):hover {
    border: 1px solid var(--summary-color-1)
}

.singleSummaryListCard:nth-child(1) .icon {
    background-color: var(--summary-color-1)
}

.singleSummaryListCard:nth-child(1) .label {
    color: var(--gray)
}

.singleSummaryListCard:nth-child(1) .value {
    color: inherit
}

.singleSummaryListCard:nth-child(2) {
    color: var(--black)
}

.singleSummaryListCard:nth-child(2):hover {
    border: 1px solid var(--summary-color-2)
}

.singleSummaryListCard:nth-child(2) .icon {
    background-color: var(--summary-color-2)
}

.singleSummaryListCard:nth-child(2) .label {
    color: var(--gray)
}

.singleSummaryListCard:nth-child(2) .value {
    color: inherit
}

.singleSummaryListCard:nth-child(3) {
    color: var(--black)
}

.singleSummaryListCard:nth-child(3):hover {
    border: 1px solid var(--summary-color-3)
}

.singleSummaryListCard:nth-child(3) .icon {
    background-color: var(--summary-color-3)
}

.singleSummaryListCard:nth-child(3) .label {
    color: var(--gray)
}

.singleSummaryListCard:nth-child(3) .value {
    color: inherit
}

.singleSummaryListCard:nth-child(4) {
    color: var(--black)
}

.singleSummaryListCard:nth-child(4):hover {
    border: 1px solid var(--summary-color-4)
}

.singleSummaryListCard:nth-child(4) .icon {
    background-color: var(--summary-color-4)
}

.singleSummaryListCard:nth-child(4) .label {
    color: var(--gray)
}

.singleSummaryListCard:nth-child(4) .value {
    color: inherit
}

.singleSummaryListCard:nth-child(5) {
    color: var(--black)
}

.singleSummaryListCard:nth-child(5):hover {
    border: 1px solid var(--summary-color-5)
}

.singleSummaryListCard:nth-child(5) .icon {
    background-color: var(--summary-color-5)
}

.singleSummaryListCard:nth-child(5) .label {
    color: var(--gray)
}

.singleSummaryListCard:nth-child(5) .value {
    color: inherit
}

.singleSummaryListCard:nth-child(6) {
    color: var(--black)
}

.singleSummaryListCard:nth-child(6):hover {
    border: 1px solid var(--summary-color-6)
}

.singleSummaryListCard:nth-child(6) .icon {
    background-color: var(--summary-color-6)
}

.singleSummaryListCard:nth-child(6) .label {
    color: var(--gray)
}

.singleSummaryListCard:nth-child(6) .value {
    color: inherit
}

.singleSummaryListCard .titleDiv {
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: flex-start;
    padding-left: 45px;
    margin-bottom: 20px;
    gap: 0
}

.singleSummaryListCard .titleDiv::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--borderGray) 49%, rgba(255, 255, 255, 0) 100%)
}

.singleSummaryListCard .titleDiv .icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 38px;
    height: 38px;
    padding: 10px;
    border-radius: var(--radius);
    cursor: pointer
}

.singleSummaryListCard .titleDiv .icon img {
    cursor: pointer
}

.singleSummaryListCard .titleDiv .icon i {
    color: var(--white)
}

.singleSummaryListCard .titleDiv .title {
    color: var(--textGray);
    font-size: .6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px
}

.singleSummaryListCard .titleDiv .heading {
    margin: 0;
    font-weight: 500;
    line-height: 1
}

.singleSummaryListCard .summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem 0
}

.singleSummaryListCard .summary:nth-last-child(1) {
    padding-bottom: 0
}

.singleSummaryListCard .summary .label {
    margin: 0;
    font-weight: 400;
    cursor: pointer
}

.singleSummaryListCard .summary .value {
    margin: 0;
    display: inline-block;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    cursor: pointer
}

.singleSummaryListCard .summary .value:empty::before {
    content: "0";
    color: var(--textGray);
    display: inline-block
}

.summaryGridContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.summaryGridContainer .heading {
    width: 100%
}

.aiSerachBar {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 200;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    background: linear-gradient(to right, #5b38e1, #0074ff, #009cff, #00bcfd, #00d8ee, #00d5ea, #00d2e5, #00cfe1, #00ade4, #0089e2, #0060d3, #242daf);
    border-radius: 3rem;
    padding: 1px;
    overflow: hidden
}

.aiSerachBar input {
    border-radius: inherit !important;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    padding: 1rem 2rem;
    border: 1px solid rgba(0, 0, 0, 0) !important;
    box-shadow: none !important
}

.aiSerachBar input::placeholder {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px) !important
}

.aiSerachBar input:active + button path, .aiSerachBar input:focus + button path {
    fill: var(--highlight)
}

.aiSerachBar button {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 1rem
}

.aiSerachBar button path {
    fill: var(--textGray)
}

.header {
    clear: both;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: clamp(var(--tabBarGap), var(--dataCardGap), var(--tabBarGap));
    padding-bottom: 10px;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header {
        z-index: 101;
        width: calc(100% - (var(--menuBarWidth) + var(--tabBarGap)));
        padding-top: 0
    }
}

@media (min-width: 1280px) {
    .header {
        height: 70px;
        min-height: 70px;
        flex-wrap: nowrap;
        padding: 0
    }
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0)
}

.header .innerSection {
    display: flex;
    justify-content: space-between
}

.header .logoDiv {
    order: 1;
    padding: .5rem 0;
    width: 6rem
}

.header .backBtn {
    margin-left: 15px;
    width: var(--box-size);
    height: var(--box-size);
    display: flex;
    color: var(--dataToolColor);
    background: var(--dataToolBg);
    font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px);
    border-radius: 100%;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header .backBtn {
        font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px);
        margin-left: .7075rem
    }
}

@media (min-width: 1280px) {
    .header .backBtn {
        margin: auto .7075rem;
        margin-right: 10px
    }
}

.header .backBtn::before {
    content: "";
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85px;
    height: 76px
}

.header .backBtn:hover {
    opacity: .8
}

.header .backBtn i {
    margin: auto;
    left: -1px;
    transition: var(--transition1);
    cursor: pointer
}

.header .titleInput:has(input) {
    -webkit-text-fill-color: unset
}

@media (min-width: 1280px) {
    .header .titleInput:has(input) {
        width: auto
    }
}

.header .titleInput:has(input) input {
    text-align: center;
    font-size: inherit !important;
    font-weight: inherit !important
}

@media (min-width: 1280px) {
    .header .titleInput:has(input) input {
        text-align: left
    }
}

.header .title {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    color: var(--text-color);
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(90deg, var(--shade-5), var(--text-color) 50%, var(--text-color) 72%, var(--shade-5) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--display-font);
    font-size: clamp(25.62890625px, 25.123072574px + 0.0010538202 * 100vw, 27.2307128906px);
    font-weight: var(--headerTextWeightMob);
    line-height: 1;
    transition: var(--transition1);
    opacity: .8
}

@media (min-width: 1024px) {
    .header .title {
        font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
        font-weight: var(--headerTextWeightWeb)
    }
}

@media (min-width: 1280px) {
    .header .title {
        width: auto;
        order: 1;
        position: relative;
        top: unset;
        left: unset;
        height: auto;
        margin: 0;
        margin-right: auto;
        text-align: left;
        transform: none
    }
}

.header .title i {
    top: 1px;
    left: -3px;
    color: var(--gray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

@media (min-width: 1024px) {
    .header .title i {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.header .title input {
    color: var(--text-color)
}

.header .navDropDownMenu {
    position: absolute;
    left: 50%;
    top: 16px;
    z-index: 2;
    transform: translateX(-50%);
    height: min-content;
    color: var(--headerTextColorMob);
    font-family: var(--display-font);
    line-height: 1;
    margin: 0 auto
}

@media (min-width: 1024px) {
    .header .navDropDownMenu {
        order: 1;
        top: 50%;
        left: 80px;
        transform: none;
        transform: translateY(-50%);
        color: var(--headerTextColorWeb);
        margin: 0;
        margin-right: auto;
        text-align: left
    }
}

.header .navDropDownMenu selected {
    min-width: 150px;
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    background: var(--headerBgColorMob);
    border-radius: var(--btnRadius)
}

.header .navDropDownMenu selected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header .navDropDownMenu selected {
        background: var(--headerNavBgColorWeb)
    }
}

.header .navDropDownMenu selected:hover {
    border: 1px solid rgba(0, 0, 0, 0)
}

.header .navDropDownMenu selected item {
    text-align: center;
    justify-content: center;
    padding-top: 9px;
    padding-bottom: 9px
}

@media (min-width: 1024px) {
    .header .navDropDownMenu selected item {
        text-align: left;
        justify-content: flex-start
    }
}

.header .navDropDownMenu options {
    margin-top: 5px;
    left: 50%;
    transform: translateX(-50%)
}

@media (min-width: 1024px) {
    .header .navDropDownMenu options {
        left: 0;
        transform: none
    }
}

.header .navDropDownMenu options item {
    min-width: max-content
}

.header .navDropDownMenu options item:empty {
    display: none
}

.header .navDropDownMenu item {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    padding: .75rem .7075rem;
    font-weight: var(--headerTextWeightMob)
}

@media (min-width: 1024px) {
    .header .navDropDownMenu item {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
        font-weight: var(--headerTextWeightWeb)
    }
}

.header .navMenu:has(selector) .tabMenuDiv {
    overflow: unset
}

.header .navMenu:has(selector) .tabMenuDiv .tabMenu {
    padding: 0;
    overflow: unset
}

.header .navMenu:has(selector) .tabMenuDiv .tabMenu selector {
    width: 100%;
    background: inherit;
    color: inherit;
    border-radius: inherit
}

.header .navMenu:has(selector) .tabMenuDiv .tabMenu selector selected {
    background: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    color: inherit;
    border-radius: inherit
}

.header .navMenu:has(selector) .tabMenuDiv .tabMenu selector selected items {
    color: inherit
}

.header .navMenu:has(selector) .tabMenuDiv .tabMenu selector selected items item {
    color: inherit;
    text-align: center;
    align-items: center
}

.header .navMenu {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    order: 4;
    width: calc(100% - 1.415rem);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: var(--btnRadius);
    opacity: 1;
    transition: var(--transition1)
}

.header .navMenu:hover::after {
    opacity: 1;
    width: 40%;
    right: 20%;
    transition: var(--transition2)
}

.header .navMenu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(189, 189, 189, 0.4117647059) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: var(--transition3)
}

.header .navMenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media (min-width: 1280px) {
    .header .navMenu {
        position: absolute;
        bottom: unset;
        top: 50%;
        left: calc(50% + var(--menuBarWidth));
        transform: translate(-50%, -50%);
        order: 2;
        width: auto;
        padding: 0;
        margin: 0;
        background-color: rgba(0, 0, 0, 0)
    }
}

.header .navMenu::after {
    top: -3px
}

.header .navMenu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 9px);
    height: calc(100% + 7px);
    background-color: var(--headerNavBgColorMob);
    border-radius: var(--btnRadius);
    transform: translate(-50%, -50%)
}

@media (min-width: 1024px) {
    .header .navMenu::before {
        width: calc(100% + 5px);
        height: calc(100% + 4px);
        background-color: var(--headerNavBgColorWeb);
        box-shadow: none
    }
}

.header .navMenu .tabMenuDiv {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    height: 100%;
    display: flex;
    text-align: center;
    margin: 0 auto;
    overflow: auto;
    padding-left: 1px
}

.header .navMenu .tabMenuDiv::-webkit-scrollbar {
    display: none
}

.header .navMenu .tabMenuDiv::-webkit-scrollbar-track, .header .navMenu .tabMenuDiv::-webkit-scrollbar-thumb, .header .navMenu .tabMenuDiv::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 0, 0, 0);
    cursor: grab;
    opacity: 0
}

@media (min-width: 1280px) {
    .header .navMenu .tabMenuDiv {
        max-width: 700px;
        height: auto;
        width: auto;
        padding: 0;
        padding-left: 1px
    }
}

@media (min-width: 1800px) {
    .header .navMenu .tabMenuDiv {
        max-width: 900px
    }
}

.header .navMenu .tabMenuDiv:hover .tabMenu {
    color: var(--headerNavMenuColorMob)
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv:hover .tabMenu {
        color: var(--headerNavMenuColorWeb)
    }
}

.header .navMenu .tabMenuDiv:hover .tabMenu::before {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0)
}

.header .navMenu .tabMenuDiv:hover .tabMenuBorder {
    opacity: 1;
    background-color: var(--headerNavActiveMenuBgMob);
    border: 1px solid var(--headerNavActiveMenuBorderMob)
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv:hover .tabMenuBorder {
        background-color: var(--headerNavActiveMenuBgWeb);
        border: 1px solid var(--headerNavActiveMenuBorderWeb)
    }
}

.header .navMenu .tabMenuDiv .tabMenu {
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    display: flex;
    justify-content: center;
    color: var(--headerNavMenuColorMob);
    font-size: 1rem;
    font-weight: var(--headerNavMenuWeightMob);
    text-align: center;
    white-space: nowrap;
    padding: 12px 1rem;
    border-radius: var(--btnRadius);
    z-index: 1;
    cursor: pointer;
    transition: var(--transition1);
    overflow: hidden
}

@media (min-width: 360px) {
    .header .navMenu .tabMenuDiv .tabMenu {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv .tabMenu {
        color: var(--headerNavMenuColorWeb);
        font-size: 1rem;
        font-weight: var(--headerNavMenuWeightWeb)
    }
}

@media (min-width: 1280px) {
    .header .navMenu .tabMenuDiv .tabMenu {
        width: var(--tab-width-web);
        min-width: auto
    }
}

.header .navMenu .tabMenuDiv .tabMenu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 94%;
    border-radius: inherit;
    letter-spacing: 1px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, 0);
    z-index: -1;
    transition: var(--transition1)
}

.header .navMenu .tabMenuDiv .tabMenu:hover {
    color: var(--headerNavActiveMenuColorMob)
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv .tabMenu:hover {
        color: var(--headerNavActiveMenuColorWeb)
    }
}

.header .navMenu .tabMenuDiv .tabMenu:hover ~ .tabMenuBorder {
    background-color: var(--headerNavActiveMenuBgMob)
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv .tabMenu:hover ~ .tabMenuBorder {
        background-color: var(--headerNavActiveMenuBgWeb)
    }
}

.header .navMenu .tabMenuDiv .tabMenu:active ~ .tabMenuBorder {
    background-color: var(--headerNavActiveMenuBgMob);
    opacity: 1;
    transition: all 250ms ease-out
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv .tabMenu:active ~ .tabMenuBorder {
        background-color: var(--headerNavActiveMenuBgWeb)
    }
}

.header .navMenu .tabMenuDiv .tabMenu img {
    width: 25px
}

.header .navMenu .tabMenuDiv .tabMenu i {
    top: 1px;
    font-size: .878rem
}

.header .navMenu .tabMenuDiv .tabMenu i, .header .navMenu .tabMenuDiv .tabMenu img {
    margin-right: 10px
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(1).active ~ .tabMenuBorder {
    transform: translateX(0%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(1):hover ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(1):hover ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(1):focus ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(1):focus ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(1):active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(1):active ~ .active ~ .tabMenuBorder {
    transform: translateX(0%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(2).active ~ .tabMenuBorder {
    transform: translateX(100%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(2):hover ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(2):hover ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(2):focus ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(2):focus ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(2):active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(2):active ~ .active ~ .tabMenuBorder {
    transform: translateX(100%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(3).active ~ .tabMenuBorder {
    transform: translateX(200%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(3):hover ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(3):hover ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(3):focus ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(3):focus ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(3):active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(3):active ~ .active ~ .tabMenuBorder {
    transform: translateX(200%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(4).active ~ .tabMenuBorder {
    transform: translateX(300%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(4):hover ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(4):hover ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(4):focus ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(4):focus ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(4):active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(4):active ~ .active ~ .tabMenuBorder {
    transform: translateX(300%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(5).active ~ .tabMenuBorder {
    transform: translateX(400%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(5):hover ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(5):hover ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(5):focus ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(5):focus ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(5):active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(5):active ~ .active ~ .tabMenuBorder {
    transform: translateX(400%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(6).active ~ .tabMenuBorder {
    transform: translateX(500%)
}

.header .navMenu .tabMenuDiv .tabMenu:nth-child(6):hover ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(6):hover ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(6):focus ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(6):focus ~ .active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(6):active ~ .tabMenuBorder, .header .navMenu .tabMenuDiv .tabMenu:nth-child(6):active ~ .active ~ .tabMenuBorder {
    transform: translateX(500%)
}

.header .navMenu .tabMenuDiv .activeTabMenu {
    color: var(--headerNavActiveMenuColorMob)
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv .activeTabMenu {
        color: var(--headerNavActiveMenuColorWeb)
    }
}

.header .navMenu .tabMenuDiv .activeTabMenu::before {
    background-color: var(--headerNavActiveMenuBgMob);
    border: 1px solid var(--headerNavActiveMenuBorderMob)
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv .activeTabMenu::before {
        background-color: var(--headerNavActiveMenuBgWeb);
        border: 1px solid var(--headerNavActiveMenuBorderWeb)
    }
}

.header .navMenu .tabMenuDiv .activeTabMenu:hover {
    color: var(--headerNavActiveMenuColorMob)
}

@media (min-width: 1024px) {
    .header .navMenu .tabMenuDiv .activeTabMenu:hover {
        color: var(--headerNavActiveMenuColorWeb)
    }
}

.header .navMenu .tabMenuDiv .tabMenuBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: var(--tab-width-mobile);
    min-width: var(--tab-width-mobile);
    border: 0;
    opacity: 0;
    border-radius: 17.98rem;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all 375ms ease-out;
    will-change: transform, background
}

@media (min-width: 1280px) {
    .header .navMenu .tabMenuDiv .tabMenuBorder {
        width: var(--tab-width-web);
        min-width: var(--tab-width-web);
        background-color: var(--headerNavBgColorWeb)
    }
}

.header .navMenu .navMenuDropDown {
    height: min-content;
    color: var(--headerTextColorMob);
    font-family: var(--display-font);
    line-height: 1;
    margin: 0;
    margin-right: 5px;
    text-align: center;
    border: 1px solid var(--headerNavMenuWeightMob);
    border-radius: var(--btnRadius)
}

@media (min-width: 1024px) {
    .header .navMenu .navMenuDropDown {
        color: var(--headerTextColorWeb);
        text-align: left
    }
}

.header .navMenu .navMenuDropDown selected {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    background: var(--headerBgColorMob);
    border-radius: var(--btnRadius)
}

.header .navMenu .navMenuDropDown selected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header .navMenu .navMenuDropDown selected {
        background: var(--headerNavBgColorWeb)
    }
}

.header .navMenu .navMenuDropDown selected:hover {
    border: 1px solid rgba(0, 0, 0, 0)
}

.header .navMenu .navMenuDropDown selected item {
    text-align: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

@media (min-width: 1024px) {
    .header .navMenu .navMenuDropDown selected item {
        font-size: 1rem;
        text-align: left;
        justify-content: flex-start
    }
}

.header .navMenu .navMenuDropDown selected item i {
    color: var(--color1);
    font-size: 1rem;
    margin-right: 1rem
}

.header .navMenu .navMenuDropDown options {
    margin-top: 10px;
    border-radius: var(--btnRadius)
}

.header .navMenu .navMenuDropDown options item {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px)
}

@media (min-width: 1024px) {
    .header .navMenu .navMenuDropDown options item {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.header .navMenu .navMenuDropDown options item:empty {
    display: none
}

.header .navMenu .navMenuDropDown item {
    padding: .75rem .7075rem;
    font-weight: var(--headerTextWeightMob)
}

@media (min-width: 1024px) {
    .header .navMenu .navMenuDropDown item {
        font-weight: var(--headerTextWeightWeb)
    }
}

.header .userMenu {
    order: 2;
    display: flex;
    align-items: center
}

.header .userMenu .actionBtn {
    border: 1px solid var(--color1);
    color: var(--black);
    font-size: .937rem;
    font-weight: 600;
    padding: .5rem .75rem;
    margin: 0
}

.header .menu:has(.filledBtn,.outlinedBtn) {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    margin: 0;
    padding-top: .35375rem;
    padding-bottom: .7075rem;
    gap: 0 10px;
    background: rgba(0, 0, 0, 0)
}

@media (min-width: 1024px) {
    .header .menu:has(.filledBtn,.outlinedBtn) {
        width: auto;
        padding-right: 1rem;
        padding-bottom: 0
    }
}

.header .menu:has(.filledBtn,.outlinedBtn)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(0deg, var(--bg-color) 0%, rgba(255, 255, 255, 0) 100%);
    border: none;
    opacity: 1;
    box-shadow: none;
    transform: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header .menu:has(.filledBtn,.outlinedBtn)::before {
        display: none
    }
}

.header .menu:not(:has(a)) {
    display: none
}

.header .menu {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 101;
    width: calc(100% - var(--tabBarGap) * 2);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: var(--tabBarGap);
    margin-top: 0;
    background: var(--tabBarBgColorMob);
    border-radius: var(--tabBarBorderRadius);
    box-shadow: var(--tabBarShadow);
    border-top: var(--tabBarBorderMob);
    transition: all 575ms ease-out
}

.header .menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header .menu {
        order: 2;
        position: relative;
        bottom: unset;
        left: unset;
        z-index: 10;
        width: auto;
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        border-radius: 0;
        box-shadow: none
    }
}

@media (min-width: 1024px) {
    .header .menu::before {
        display: none
    }
}

.header .menu .menuLink, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    transition: var(--transition1);
    cursor: pointer
}

@media (min-width: 1024px) {
    .header .menu .menuLink, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn {
        flex: none;
        overflow: initial
    }

    .header .menu .menuLink:not([data-tooltip]):before, .header .menu a:not([data-tooltip]):not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4):before, .header .menu .dataViewOptionBtn:not([data-tooltip]):before {
        display: none
    }

    .header .menu .menuLink:before, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4):before, .header .menu .dataViewOptionBtn:before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        right: 50%;
        transform: translateX(50%);
        z-index: 103;
        display: flex;
        align-items: center;
        color: var(--lightGray);
        font-size: .733rem;
        font-weight: 400;
        letter-spacing: .25px;
        text-transform: capitalize;
        background: var(--darkGray);
        backdrop-filter: blur(10px);
        padding: .5rem .76rem;
        border-radius: .25rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none
    }

    .header .menu .menuLink::after, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::after, .header .menu .dataViewOptionBtn::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 50%;
        transform: translateX(50%) rotate(180deg);
        width: 0;
        height: 0;
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-bottom: 5px solid var(--darkGray);
        pointer-events: none;
        opacity: 0
    }

    .header .menu .menuLink:focus, .header .menu a:focus:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn:focus {
        z-index: 999
    }

    .header .menu .menuLink:focus::before, .header .menu a:focus:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .header .menu .dataViewOptionBtn:focus::before, .header .menu .menuLink:focus::after, .header .menu a:focus:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::after, .header .menu .dataViewOptionBtn:focus::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

@media (min-width: 1024px)and (min-width: 768px) {
    .header .menu .menuLink:hover, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn:hover {
        z-index: 999
    }

    .header .menu .menuLink:hover::before, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .header .menu .dataViewOptionBtn:hover::before, .header .menu .menuLink:hover::after, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::after, .header .menu .dataViewOptionBtn:hover::after {
        opacity: 1;
        transition: var(--transition1)
    }
}

@media (min-width: 1024px) {
    .header .menu .menuLink::before, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .header .menu .dataViewOptionBtn::before {
        bottom: unset;
        right: unset;
        top: 100%;
        left: 50%;
        transform: none;
        transform: translateX(-50%)
    }

    .header .menu .menuLink::after, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::after, .header .menu .dataViewOptionBtn::after {
        top: unset;
        right: unset;
        bottom: 0;
        left: 50%;
        transform: none;
        transform: translateX(-50%)
    }
}

.header .menu .menuLink:nth-child(1), .header .menu a:nth-child(1):not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn:nth-child(1) {
    padding-left: 1rem
}

.header .menu .menuLink:hover, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn:hover {
    z-index: 10
}

.header .menu .menuLink:hover::before, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .header .menu .dataViewOptionBtn:hover::before, .header .menu .menuLink:hover::after, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::after, .header .menu .dataViewOptionBtn:hover::after {
    z-index: 10
}

.header .menu .menuLink:hover i, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) i, .header .menu .dataViewOptionBtn:hover i {
    color: var(--highlight)
}

@media (min-width: 1280px) {
    .header .menu .menuLink:hover i, .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) i, .header .menu .dataViewOptionBtn:hover i {
        color: var(--textGray)
    }
}

.header .menu .menuLink i, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) i, .header .menu .dataViewOptionBtn i {
    color: var(--tabBarTextColorMob);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    transform: none;
    transition: var(--transition1);
    cursor: pointer
}

@media (min-width: 1280px) {
    .header .menu .menuLink i, .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) i, .header .menu .dataViewOptionBtn i {
        font-size: 1rem;
        color: var(--tabBarTextColorWeb)
    }
}

.header .menu [notification-count]::after {
    content: attr(notification-count);
    position: absolute;
    top: -3px;
    right: -23px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--borderGray);
    font-size: .6rem;
    font-weight: 600;
    font-style: normal;
    border-radius: 100%;
    background-color: var(--notificationAlertColor);
    transform: translate(-50%, -50%)
}

.header .menu [notification-count]::after:empty {
    display: none
}

.header .menu [notification-count=""]::after {
    display: none
}

.header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn {
    height: 100%;
    min-width: 60px;
    margin: 0;
    color: var(--tabBarTextColorMob);
    border-radius: 0 !important;
    border: none;
    overflow: unset
}

@media (min-width: 1024px) {
    .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .dataViewOptionBtn {
        min-width: 45px;
        color: var(--headerTextColorWeb)
    }
}

.header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) i, .header .menu .dataViewOptionBtn i {
    top: 0;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
}

@media (min-width: 1024px) {
    .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) i, .header .menu .dataViewOptionBtn i {
        font-size: 1rem
    }
}

.header .menu .filledBtn, .header .menu .outlinedBtn, .header .menu .btn1, .header .menu .btn2, .header .menu .btn3, .header .menu .btn4 {
    margin: 0;
    flex: 1;
    min-height: 48px
}

@media (min-width: 1024px) {
    .header .menu .filledBtn, .header .menu .outlinedBtn, .header .menu .btn1, .header .menu .btn2, .header .menu .btn3, .header .menu .btn4 {
        flex: none
    }
}

@media (min-width: 1024px) {
    .header .menu .dataViewOptionBtn {
        padding-right: 20px
    }
}

.header .menu .dataViewOptionBtn::before, .header .menu .dataViewOptionBtn::after {
    display: none
}

@media (min-width: 768px) {
    .header .menu .dataViewOptionBtn .moreOptionView {
        position: fixed;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .header .menu .dataViewOptionBtn .moreOptionView {
        position: absolute;
        top: 100%;
        width: max-content;
        height: max-content;
        display: none;
        transform: scale(0.8);
        padding: .7075rem;
        overflow: unset;
        pointer-events: none
    }
}

.header .menu .dataViewOptionBtn .moreOptionView .popupWindow {
    flex-direction: column;
    padding-right: 0;
    padding-bottom: 0
}

@media (min-width: 1024px) {
    .header .menu .dataViewOptionBtn .moreOptionView .popupWindow {
        min-width: max-content;
        gap: 0;
        padding: 10px 0
    }
}

.header .menu .dataViewOptionBtn .moreOptionView .popupWindow a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px .7075rem;
    flex: 1;
    cursor: pointer;
    transition: var(--transition1)
}

.header .menu .dataViewOptionBtn .moreOptionView .popupWindow a:hover {
    color: var(--text-color)
}

.header .menu .dataViewOptionBtn .moreOptionView .popupWindow a:hover i {
    color: var(--highlight)
}

.header .menu .dataViewOptionBtn .moreOptionView .popupWindow a:nth-last-child(1)::after {
    display: none
}

.header .menu .dataViewOptionBtn .moreOptionView .popupWindow a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .85
}

@media (min-width: 1024px) {
    .header .menu .dataViewOptionBtn .moreOptionView .popupWindow a::after {
        top: unset;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--shade-2) 49%, rgba(255, 255, 255, 0) 100%)
    }
}

.header .menu .dataViewOptionBtn .moreOptionView .popupWindow a i {
    width: auto;
    height: auto
}

.header .menu .highlightTab {
    flex: 1.5
}

.header .menu .highlightTab:hover {
    background-color: rgba(0, 0, 0, 0)
}

.header .menu .highlightTab i {
    color: var(--tabBarHighlightTextColor)
}

@media (min-width: 1024px) {
    .header .menu .highlightTab i {
        color: var(--black)
    }
}

.header .menu .highlightTab i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55px;
    height: 55px;
    transform: translate(-50%, -50%);
    background: var(--tabBarHighlightBg);
    border: 2px solid var(--tabBarBgColorMob);
    border-radius: .7075rem;
    box-shadow: rgba(33, 35, 38, .1) 0px 10px 10px -10px;
    z-index: -1
}

@media (min-width: 768px) {
    .header .menu .highlightTab i::after {
        display: none
    }
}

@media (min-width: 768px) {
    .header .menu .filterBtn, .header .menu .switchViewBtn {
        display: none
    }
}

.header .menu .dataViewOptions {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0
}

.header .menu .dataViewOptions.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.header .menu .dataViewOptions .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.header .menu .dataViewOptions .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .header .menu .dataViewOptions .popupWindow::before {
        display: none
    }
}

.header .menu .dataViewOptions .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header .menu .dataViewOptions .popupWindow::after {
        display: none
    }
}

.header .menu .dataViewOptions .popupWindowClose, .header .menu .dataViewOptions .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

.header .menu .dataViewOptions .popupWindow {
    height: auto;
    padding-left: 0;
    padding-right: 0
}

@media (min-width: 768px) {
    .header .menu .dataViewOptions .popupWindow {
        bottom: unset;
        top: 60px;
        left: unset;
        right: 15px;
        max-width: 200px;
        padding: 0;
        border: 1px solid var(--shade-2);
        border-radius: var(--radius);
        box-shadow: rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px !important;
        transform: translateX(100vw)
    }
}

.header .menu .dataViewOptions .popupWindow .optionList a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7075rem;
    color: var(--text-color);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition1);
    border-bottom: 1px solid var(--shade-2)
}

@media (min-width: 768px) {
    .header .menu .dataViewOptions .popupWindow .optionList a {
        font-size: 1rem
    }
}

.header .menu .dataViewOptions .popupWindow .optionList a:hover {
    background-color: var(--shade-2)
}

.header .menu .dataViewOptions .popupWindow .optionList a:hover i {
    color: var(--highlight)
}

.header .menu .dataViewOptions .popupWindow .optionList a i {
    margin-right: .7075rem;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    cursor: pointer
}

@media (min-width: 768px) {
    .header .menu .dataViewOptions .popupWindow .optionList a i {
        font-size: 1rem
    }
}

@media (min-width: 768px) {
    .header .menu .dataViewOptions .popupWindowClose {
        opacity: 0
    }
}

.header .menuIntroScroll {
    transform: translateY(100%);
    transition: all 175ms ease-out
}

.header .menuIcon {
    width: var(--box-size);
    height: var(--box-size);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 15px;
    gap: 5px;
    border-radius: 100%;
    background-color: var(--dataToolBg);
    transition: all .3s;
    cursor: pointer;
    display: inline-flex;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .header .menuIcon {
        display: none
    }
}

.header .menuIcon.menuIconIntro {
    transform: rotate(45deg)
}

.header .menuIcon::before {
    content: "";
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85px;
    height: 76px;
    transition: var(--transition1);
    cursor: pointer
}

.header .menuIcon div {
    position: absolute;
    width: 5px;
    min-width: 5px;
    height: 5px;
    min-height: 5px;
    border-radius: 1rem;
    background: var(--dataToolColor);
    animation-timing-function: ease-in-out;
    transition: var(--transition1);
    cursor: pointer
}

.header .menuIcon div:nth-child(1) {
    top: 39.5%;
    left: 39.5%;
    transform: translate(-50%, -50%)
}

.header .menuIcon div:nth-child(2) {
    top: 39.5%;
    right: 39.5%;
    transform: translate(50%, -50%)
}

.header .menuIcon div:nth-child(3) {
    bottom: 39.5%;
    left: 39.5%;
    transform: translate(-50%, 50%)
}

.header .menuIcon div:nth-child(4) {
    bottom: 39.5%;
    right: 39.5%;
    transform: translate(50%, 50%)
}

.header .btnDiv {
    order: 2;
    height: 100%;
    display: flex;
    align-items: center;
    margin-top: 0
}

.header .btnDiv a {
    margin-top: 0
}

.header .profileHeader {
    height: 100%
}

.header .profileHeader:hover .profileMenu {
    opacity: 1;
    height: 100%;
    padding: 1rem 0;
    border: 1px solid var(--borderGray)
}

.header .profileHeader .profileDetails {
    height: 100%;
    margin-left: 1rem;
    display: flex;
    align-items: center
}

.header .profileHeader .profileDetails .avatar {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    overflow: hidden
}

.header .profileHeader .profileDetails .name {
    display: none;
    margin: 0;
    color: var(--black);
    font-size: .733rem;
    font-weight: 600
}

@media (min-width: 568px) {
    .header .profileHeader .profileDetails .name {
        display: inline-block
    }
}

.header .profileHeader .profileMenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 111;
    height: 0;
    width: 250px;
    opacity: 0;
    padding: 0;
    background-color: var(--white);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: rgba(17, 12, 46, .15) 0px 48px 100px 0px;
    overflow: hidden;
    transition: var(--transition1)
}

.header .profileHeader .profileMenu a {
    display: block;
    color: var(--black);
    font-size: .937rem;
    font-weight: 600;
    padding: 1rem .7075rem;
    border-bottom: 1px solid var(--borderGray);
    cursor: pointer;
    transition: var(--transition1)
}

.header .profileHeader .profileMenu a:hover {
    color: var(--color1);
    background-color: var(--lightGray)
}

.header .profileHeader .profileMenu a:nth-last-child(1) {
    border-bottom: none
}

.header .btn {
    margin-top: 0
}

.sideBarNavigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 104;
    transition: var(--transition2);
    overflow: hidden
}

@media (min-width: 1024px) {
    .sideBarNavigation {
        z-index: 346
    }
}

.sideBarNavigation .sideBar {
    position: fixed;
    top: 0;
    right: var(--tabBarGap);
    z-index: 2;
    width: clamp(250px, 85vw, 320px);
    height: calc(100svh - var(--tabBarGap) * 2);
    margin: var(--tabBarGap) 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: var(--menuBarBg);
    border-radius: var(--tabBarBorderRadius);
    transform: translate3d(120%, 0, 0);
    transition: var(--transition2);
    will-change: transform;
    overflow: hidden
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar {
        right: unset;
        left: var(--tabBarGap);
        width: var(--menuBarWidth);
        transform: translate3d(0, 0, 0);
        box-shadow: rgba(0, 0, 0, 0) 0px 4px 6px -1px
    }
}

.sideBarNavigation .sideBar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--menuBorderColor) 49%, rgba(255, 255, 255, 0) 100%);
    opacity: .5;
    transition: inherit
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar::after {
        left: unset;
        right: 0
    }
}

.sideBarNavigation .sideBar .logoDiv {
    z-index: 2;
    display: flex;
    transition: inherit;
    padding-top: 15px;
    margin-bottom: 40px
}

.sideBarNavigation .sideBar .logoDiv .logoIcon {
    position: absolute;
    top: 15px;
    left: 0;
    width: var(--logo-icon-width);
    display: none;
    object-fit: contain;
    object-position: center;
    transition: inherit;
    transform: translateX(calc((var(--menuBarWidth) - var(--logo-icon-width)) / 2))
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .logoDiv .logoIcon {
        display: block
    }
}

.sideBarNavigation .sideBar .logoDiv .logo {
    width: var(--logo-width);
    min-width: var(--logo-width);
    max-width: var(--logo-width);
    display: block;
    object-fit: contain;
    overflow: hidden;
    transition: inherit;
    margin-left: calc(var(--menuPaddingX) + 12px)
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .logoDiv .logo {
        opacity: 0
    }
}

.sideBarNavigation .sideBar .userNav .theme, .sideBarNavigation .sideBar .userNav .logout, .sideBarNavigation .sideBar .userNav .profile, .sideBarNavigation .sideBar .menuList .menuLink, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn {
    width: 100%;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 4px;
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    padding-left: var(--menuPaddingX);
    padding-right: calc(var(--menuPaddingX) + 10px);
    transition: inherit;
    cursor: pointer
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme, .sideBarNavigation .sideBar .userNav .logout, .sideBarNavigation .sideBar .userNav .profile, .sideBarNavigation .sideBar .menuList .menuLink, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn {
        min-height: var(--box-size);
        padding: 15px 0;
        font-size: 17px
    }
}

@media (min-width: 1800px) {
    .sideBarNavigation .sideBar .userNav .theme, .sideBarNavigation .sideBar .userNav .logout, .sideBarNavigation .sideBar .userNav .profile, .sideBarNavigation .sideBar .menuList .menuLink, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn {
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.sideBarNavigation .sideBar .userNav .theme::before, .sideBarNavigation .sideBar .userNav .logout::before, .sideBarNavigation .sideBar .userNav .profile::before, .sideBarNavigation .sideBar .menuList .menuLink::before, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn::before, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--menuHoverColor);
    transition: inherit;
    opacity: 0
}

.sideBarNavigation .sideBar .userNav .theme:hover::before, .sideBarNavigation .sideBar .userNav .logout:hover::before, .sideBarNavigation .sideBar .userNav .profile:hover::before, .sideBarNavigation .sideBar .menuList .menuLink:hover::before, .sideBarNavigation .sideBar .menuList .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .header .menu .sideBarNavigation .sideBar .menuList a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4)::before, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn:hover::before, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn:hover::before {
    opacity: 1
}

.sideBarNavigation .sideBar .userNav .theme:hover p, .sideBarNavigation .sideBar .userNav .logout:hover p, .sideBarNavigation .sideBar .userNav .profile:hover p, .sideBarNavigation .sideBar .menuList .menuLink:hover p, .sideBarNavigation .sideBar .menuList .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .header .menu .sideBarNavigation .sideBar .menuList a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn:hover p, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn:hover p {
    color: var(--menuActiveTextColor)
}

.sideBarNavigation .sideBar .userNav .theme:hover .arrow, .sideBarNavigation .sideBar .userNav .logout:hover .arrow, .sideBarNavigation .sideBar .userNav .profile:hover .arrow, .sideBarNavigation .sideBar .menuList .menuLink:hover .arrow, .sideBarNavigation .sideBar .menuList .header .menu a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .arrow, .header .menu .sideBarNavigation .sideBar .menuList a:hover:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .arrow, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn:hover .arrow, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn:hover .arrow {
    opacity: .5
}

.sideBarNavigation .sideBar .userNav .theme .icon, .sideBarNavigation .sideBar .userNav .logout .icon, .sideBarNavigation .sideBar .userNav .profile .icon, .sideBarNavigation .sideBar .menuList .menuLink .icon, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .icon, .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .icon, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn .icon, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn .icon {
    min-width: var(--box-size);
    height: var(--box-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    background: var(--menuIconColorBg);
    border-radius: var(--btnRadius);
    z-index: 1;
    margin: 0 auto;
    color: var(--menuIconColor);
    cursor: pointer;
    transition: inherit;
    will-change: transform
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme .icon, .sideBarNavigation .sideBar .userNav .logout .icon, .sideBarNavigation .sideBar .userNav .profile .icon, .sideBarNavigation .sideBar .menuList .menuLink .icon, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .icon, .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .icon, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn .icon, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn .icon {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(calc((var(--menuBarWidth) - var(--box-size)) / 2), -50%);
        font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px)
    }
}

.sideBarNavigation .sideBar .userNav .theme p, .sideBarNavigation .sideBar .userNav .logout p, .sideBarNavigation .sideBar .userNav .profile p, .sideBarNavigation .sideBar .menuList .menuLink p, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn p, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn p {
    flex: 1;
    margin: 0;
    color: var(--menuTextColor);
    font-family: var(--display-font);
    font-size: inherit;
    font-weight: var(--menuTextWeight);
    white-space: nowrap;
    letter-spacing: .15px;
    cursor: pointer;
    transition: inherit
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme p, .sideBarNavigation .sideBar .userNav .logout p, .sideBarNavigation .sideBar .userNav .profile p, .sideBarNavigation .sideBar .menuList .menuLink p, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn p, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn p {
        opacity: 0;
        margin-left: calc(var(--box-size) + 10px)
    }
}

.sideBarNavigation .sideBar .userNav .theme .arrow, .sideBarNavigation .sideBar .userNav .logout .arrow, .sideBarNavigation .sideBar .userNav .profile .arrow, .sideBarNavigation .sideBar .menuList .menuLink .arrow, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .arrow, .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .arrow, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn .arrow, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn .arrow {
    top: 2px;
    margin-left: auto;
    color: var(--menuIconColor);
    font-size: .733rem;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transition: inherit
}

@media (min-width: 568px) {
    .sideBarNavigation .sideBar .userNav .theme .arrow, .sideBarNavigation .sideBar .userNav .logout .arrow, .sideBarNavigation .sideBar .userNav .profile .arrow, .sideBarNavigation .sideBar .menuList .menuLink .arrow, .sideBarNavigation .sideBar .menuList .header .menu a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .arrow, .header .menu .sideBarNavigation .sideBar .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .arrow, .sideBarNavigation .sideBar .menuList .header .menu .dataViewOptionBtn .arrow, .header .menu .sideBarNavigation .sideBar .menuList .dataViewOptionBtn .arrow {
        overflow: hidden;
        margin-left: auto
    }
}

.sideBarNavigation .sideBar .menu {
    width: calc(100% + 18px);
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 1rem;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: inherit
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .menu {
        height: 75vh
    }
}

.sideBarNavigation .sideBar .menuList {
    width: 100%;
    transition: inherit
}

.sideBarNavigation .sideBar .menuList .activeMenu {
    background-color: var(--menuActiveBgColor)
}

.sideBarNavigation .sideBar .menuList .activeMenu .icon {
    color: var(--menuActiveIconColor)
}

.sideBarNavigation .sideBar .menuList .activeMenu .icon::after {
    background: var(--menuActiveIconBg)
}

.sideBarNavigation .sideBar .menuList .activeMenu p {
    color: var(--menuActiveTextColor)
}

.sideBarNavigation .sideBar .subMenu {
    display: none;
    background: var(--subMenuBgColor);
    padding: 10px 0;
    overflow: hidden;
    transition-timing-function: cubic-bezier(0.525, 0.06, 0.11, 0.995)
}

.sideBarNavigation .sideBar .subMenu a {
    display: block;
    font-size: inherit;
    color: var(--subMenuTextColor);
    padding: 8px var(--menuPaddingX);
    letter-spacing: .5px;
    white-space: noWrap;
    transition: inherit;
    cursor: pointer
}

.sideBarNavigation .sideBar .subMenu a::after {
    content: "";
    position: absolute;
    top: -25px;
    left: var(--menuPaddingX);
    height: 100%;
    width: 1px;
    background: var(--menuBorderColor)
}

.sideBarNavigation .sideBar .subMenu a::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 10px;
    border-radius: 0 0 0 10px;
    border-left: 1px solid var(--menuBorderColor);
    border-bottom: 1px solid var(--menuBorderColor);
    margin-right: 14px;
    margin-bottom: 3px
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .subMenu a::before {
        margin-right: 18px
    }
}

.sideBarNavigation .sideBar .userNav {
    margin-top: auto;
    transition: inherit
}

.sideBarNavigation .sideBar .userNav .profile {
    padding-top: 10px;
    padding-bottom: 10px;
    transition: inherit;
    gap: 0 10px
}

.sideBarNavigation .sideBar .userNav .profile:hover .title {
    color: var(--menuActiveTextColor)
}

.sideBarNavigation .sideBar .userNav .profile:hover .text {
    color: var(--menuTextColor)
}

.sideBarNavigation .sideBar .userNav .profile .avatar {
    width: var(--box-size);
    min-width: var(--box-size);
    height: var(--box-size);
    background-color: var(--menuBorderColor);
    border: 2px solid var(--menuBorderColor);
    border-radius: var(--btnRadius);
    transition: inherit;
    overflow: hidden
}

@media (min-width: 568px) {
    .sideBarNavigation .sideBar .userNav .profile .avatar {
        transform: translateX(calc((var(--menuBarWidth) - var(--box-size)) / 2))
    }
}

.sideBarNavigation .sideBar .userNav .profile p, .sideBarNavigation .sideBar .userNav .profile .title, .sideBarNavigation .sideBar .userNav .profile .profileDetails {
    margin: 0;
    color: var(--menuTextColor);
    font-weight: var(--menuTextWeight);
    white-space: nowrap;
    letter-spacing: .25px;
    text-transform: capitalize;
    line-height: 1;
    transition: inherit
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .profile p, .sideBarNavigation .sideBar .userNav .profile .title, .sideBarNavigation .sideBar .userNav .profile .profileDetails {
        opacity: 0
    }
}

.sideBarNavigation .sideBar .userNav .profile .profileDetails {
    display: flex;
    flex-direction: column;
    gap: 6px 0
}

.sideBarNavigation .sideBar .userNav .profile .profileDetails .title {
    font-size: 1rem
}

.sideBarNavigation .sideBar .userNav .profile .profileDetails .text {
    color: var(--menuIconColor);
    font-size: 12px
}

.sideBarNavigation .sideBar .userNav .profile .arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 1;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, .11);
    cursor: pointer;
    transition: inherit
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .profile .arrow {
        opacity: 0
    }
}

.sideBarNavigation .sideBar .userNav .logout::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--menuBorderColor) 49%, rgba(255, 255, 255, 0) 100%)
}

.sideBarNavigation .sideBar .userNav .theme:has(#dark:checked)::before {
    transform: translateX(100%) scale(0.9)
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme:has(#dark:checked)::before {
        transform: translateX(calc((var(--menuBarWidth) - var(--box-size)) / 2))
    }
}

.sideBarNavigation .sideBar .userNav .theme {
    padding: 0 5px;
    margin: 10px 0;
    display: flex;
    transition: var(--transition2)
}

.sideBarNavigation .sideBar .userNav .theme::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 50%;
    height: 100%;
    background: var(--menuBorderColor);
    border-radius: var(--btnRadius);
    transform: scale(0.9);
    opacity: .3;
    transition: var(--transition2)
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme::before {
        width: var(--box-size);
        height: var(--box-size);
        transform: translateX(calc((var(--menuBarWidth) - var(--box-size)) / 2))
    }
}

.sideBarNavigation .sideBar .userNav .theme:hover::before {
    opacity: .5
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme .switch:has(input:not(:checked)) {
        display: none
    }
}

.sideBarNavigation .sideBar .userNav .theme .switch {
    flex: 1;
    gap: 0 10px;
    display: flex;
    opacity: 1;
    margin: 0;
    z-index: 1;
    color: var(--menuTextColor);
    font-weight: var(--menuTextWeight);
    cursor: pointer;
    transition: inherit
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme .switch {
        justify-content: center
    }
}

.sideBarNavigation .sideBar .userNav .theme .switch input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: var(--radius);
    margin: 0
}

.sideBarNavigation .sideBar .userNav .theme .switch i {
    color: inherit;
    cursor: pointer;
    transition: inherit;
    margin-left: 45px
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme .switch i {
        margin: 0
    }
}

.sideBarNavigation .sideBar .userNav .theme .switch p {
    position: absolute;
    left: 50%;
    margin: 0;
    flex: unset;
    color: inherit;
    cursor: pointer;
    transition: 1s ease-in
}

@media (min-width: 1024px) {
    .sideBarNavigation .sideBar .userNav .theme .switch p {
        opacity: 0
    }
}

.sideBarNavigation .sideBar .profileView {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.sideBarNavigation .sideBar .profileView .avatar {
    width: var(--porfile-width);
    padding-top: calc(var(--profile-ratio) * var(--porfile-width));
    border-radius: var(--profile-radius);
    overflow: hidden
}

.sideBarNavigation .sideBar .profileView .avatar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.sideBarNavigation .sideBar .profileView .profileDetails {
    margin-top: .7075rem;
    text-align: left
}

.sideBarNavigation .sideBar .profileView .profileDetails .title {
    margin: 0;
    color: var(--color1);
    text-transform: capitalize
}

.sideBarNavigation .sideBar .profileView .profileDetails .text {
    margin-top: 0;
    color: var(--textGray)
}

.sideBarNavigation .menuIcon {
    margin-right: 15px;
    width: var(--box-size);
    height: var(--box-size);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 15px;
    gap: 5px;
    border-radius: 100%;
    background-color: var(--dataToolBg);
    transition: all .3s;
    cursor: pointer;
    display: inline-flex;
    transition: var(--transition1);
    position: fixed;
    right: 0;
    top: 15px;
    z-index: 3;
    display: none
}

@media (min-width: 1024px) {
    .sideBarNavigation .menuIcon {
        display: none
    }
}

.sideBarNavigation .menuIcon.menuIconIntro {
    transform: rotate(45deg)
}

.sideBarNavigation .menuIcon::before {
    content: "";
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85px;
    height: 76px;
    transition: var(--transition1);
    cursor: pointer
}

.sideBarNavigation .menuIcon div {
    position: absolute;
    width: 5px;
    min-width: 5px;
    height: 5px;
    min-height: 5px;
    border-radius: 1rem;
    background: var(--dataToolColor);
    animation-timing-function: ease-in-out;
    transition: var(--transition1);
    cursor: pointer
}

.sideBarNavigation .menuIcon div:nth-child(1) {
    top: 39.5%;
    left: 39.5%;
    transform: translate(-50%, -50%)
}

.sideBarNavigation .menuIcon div:nth-child(2) {
    top: 39.5%;
    right: 39.5%;
    transform: translate(50%, -50%)
}

.sideBarNavigation .menuIcon div:nth-child(3) {
    bottom: 39.5%;
    left: 39.5%;
    transform: translate(-50%, 50%)
}

.sideBarNavigation .menuIcon div:nth-child(4) {
    bottom: 39.5%;
    right: 39.5%;
    transform: translate(50%, 50%)
}

.sideBarNavigation .menuIcon.menuIconIntro {
    background: var(--menuTextColor)
}

.sideBarNavigation .menuIcon.menuIconIntro::before {
    border-radius: 100%
}

.sideBarNavigation .menuIcon.menuIconIntro div {
    background: var(--menuBarBg)
}

.sideBarNavigation .menuCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    display: block !important;
    cursor: pointer;
    background-color: #000;
    opacity: 0;
    transform: translateX(100%);
    transition-delay: 50ms
}

.sideBarNavigationIntro {
    right: 0;
    transition: all 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995)
}

.sideBarNavigationIntro .sideBar {
    transform: translateZ(0)
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar {
        width: clamp(250px, 85vw, 320px)
    }
}

.sideBarNavigationIntro .sideBar::after {
    opacity: .5;
    bottom: 20%
}

@media (min-width: 568px) {
    .sideBarNavigationIntro .sideBar .userNav .logout, .sideBarNavigationIntro .sideBar .userNav .profile, .sideBarNavigationIntro .sideBar .menu .menuList .menuLink, .sideBarNavigationIntro .sideBar .header .menu .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .header .sideBarNavigationIntro .sideBar .menu .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4), .sideBarNavigationIntro .sideBar .header .menu .menuList .dataViewOptionBtn, .header .sideBarNavigationIntro .sideBar .menu .menuList .dataViewOptionBtn {
        justify-content: flex-start;
        padding-left: var(--menuPaddingX);
        padding-right: calc(var(--menuPaddingX) + 10px)
    }
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar .userNav .logout .icon, .sideBarNavigationIntro .sideBar .userNav .profile .icon, .sideBarNavigationIntro .sideBar .menu .menuList .menuLink .icon, .sideBarNavigationIntro .sideBar .header .menu .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .icon, .header .sideBarNavigationIntro .sideBar .menu .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) .icon, .sideBarNavigationIntro .sideBar .header .menu .menuList .dataViewOptionBtn .icon, .header .sideBarNavigationIntro .sideBar .menu .menuList .dataViewOptionBtn .icon {
        transform: translate(var(--menuPaddingX), -50%)
    }
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar .userNav .logout p, .sideBarNavigationIntro .sideBar .userNav .profile p, .sideBarNavigationIntro .sideBar .menu .menuList .menuLink p, .sideBarNavigationIntro .sideBar .header .menu .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .header .sideBarNavigationIntro .sideBar .menu .menuList a:not(.filledBtn,.outlineBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn4) p, .sideBarNavigationIntro .sideBar .header .menu .menuList .dataViewOptionBtn p, .header .sideBarNavigationIntro .sideBar .menu .menuList .dataViewOptionBtn p {
        opacity: 1
    }
}

@media (min-width: 568px) {
    .sideBarNavigationIntro .sideBar .logoDiv .logoIcon {
        opacity: 0;
        transition-duration: 100ms
    }
}

@media (min-width: 568px) {
    .sideBarNavigationIntro .sideBar .logoDiv .logo {
        opacity: 1;
        transition: all 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995)
    }
}

.sideBarNavigationIntro .sideBar .userNav .profile .avatar {
    transform: none
}

.sideBarNavigationIntro .sideBar .userNav .profile .arrow {
    opacity: .35
}

.sideBarNavigationIntro .sideBar .userNav .profile .profileDetails {
    opacity: 1
}

.sideBarNavigationIntro .sideBar .userNav .profile .profileDetails .title, .sideBarNavigationIntro .sideBar .userNav .profile .profileDetails .text {
    opacity: 1
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar .userNav .theme::before {
        width: 50%;
        height: 100%
    }
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar .userNav .theme .switch:has(input:not(:checked)) {
        display: flex
    }
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar .userNav .theme .switch {
        justify-content: flex-start
    }
}

.sideBarNavigationIntro .sideBar .userNav .theme .switch i {
    margin-left: 45px
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar .userNav .theme .switch p {
        opacity: 1
    }
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .sideBar .userNav .theme:has(#dark:checked)::before {
        transform: translateX(100%) scale(0.9)
    }
}

.sideBarNavigationIntro .menuCloseBg {
    opacity: .5;
    transform: none;
    transition: opacity 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition-delay: 0s
}

@media (min-width: 1024px) {
    .sideBarNavigationIntro .menuCloseBg {
        opacity: 0
    }
}

.contentEditorSection {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-top: var(--headerHeight) !important;
    transition: var(--transition1)
}

.contentEditorSection .contentBasicDetails {
    padding-top: var(--section-space-y);
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%
}

.contentEditorSection .contentBasicDetails .titleDiv {
    width: 100%
}

.contentEditorSection .contentBasicDetails .titleDiv label {
    margin-bottom: 0
}

.contentEditorSection .contentBasicDetails .titleDiv input, .contentEditorSection .contentBasicDetails .titleDiv textarea {
    height: calc(clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px) * 2);
    min-height: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px);
    padding-left: 2px;
    padding-right: 0;
    font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px);
    font-weight: 500;
    background: rgba(0, 0, 0, 0) !important;
    border-top-color: rgba(0, 0, 0, 0) !important;
    border-right-color: rgba(0, 0, 0, 0) !important;
    border-left-color: rgba(0, 0, 0, 0) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden
}

.contentEditorSection .contentBasicDetails .titleDiv input::placeholder, .contentEditorSection .contentBasicDetails .titleDiv textarea::placeholder {
    font-weight: 500
}

.contentEditorSection .contentBasicDetails .titleDiv input:focus + .messageBox::after, .contentEditorSection .contentBasicDetails .titleDiv textarea:focus + .messageBox::after {
    display: none
}

.contentEditorSection .contentBasicDetails .titleDiv input:valid + .messageBox:after, .contentEditorSection .contentBasicDetails .titleDiv textarea:valid + .messageBox:after {
    display: none
}

.contentEditorSection .contentBasicDetails .titleDiv .messageBox:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: var(--inputColor5);
    left: 0;
    top: -5px;
    transform: translateY(-130%);
    animation-name: blink;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    opacity: 1
}

@keyframes blink {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.contentEditorSection .contentEditor {
    order: 3;
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%;
    margin: 0
}

@media (min-width: 1280px) {
    .contentEditorSection .contentEditor {
        order: 2
    }
}

.contentEditorSection .contentEditor::after {
    color: var(--text-color);
    font-style: normal;
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    opacity: .8;
    margin: 0;
    padding: 0
}

.contentEditorSection .additionalDetails {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    height: max-content
}

.contentEditorSection .additionalDetails.popupIntro .popupWindow {
    transform: translateZ(0) !important;
    transition-delay: .3s;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.contentEditorSection .additionalDetails .popupWindow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    padding: var(--btnRadius) var(--btnRadius) 0 0;
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: 1rem 1rem 0 0;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    scroll-behavior: auto;
    transition-delay: 0ms
}

.contentEditorSection .additionalDetails .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    transform: translateX(-50%);
    pointer-events: none
}

@media (min-width: 1024px) {
    .contentEditorSection .additionalDetails .popupWindow::before {
        display: none
    }
}

.contentEditorSection .additionalDetails .popupWindow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textGray);
    font-family: var(--icon-family) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--shade-1);
    border: 1px solid var(--shade-2);
    border-top: 1px solid var(--shade-2);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -150%);
    pointer-events: none;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .contentEditorSection .additionalDetails .popupWindow::after {
        display: none
    }
}

.contentEditorSection .additionalDetails .popupWindowClose, .contentEditorSection .additionalDetails .popupCloseBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all 375ms ease-out
}

@media (min-width: 1280px) {
    .contentEditorSection .additionalDetails {
        width: auto;
        height: 100vh
    }
}

.contentEditorSection .additionalDetails .popupWindow {
    max-height: 70vh;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 100px;
    justify-content: flex-start;
    overflow-y: auto
}

@media (min-width: 1280px) {
    .contentEditorSection .additionalDetails .popupWindow {
        max-height: 100%;
        left: unset;
        right: 0;
        width: calc(500px - .7075rem);
        height: 100vh;
        align-items: flex-start;
        padding: 0;
        border-radius: 0;
        transform: translateX(110%);
        overflow-y: scroll
    }
}

@media (min-width: 1800px) {
    .contentEditorSection .additionalDetails .popupWindow {
        right: -15px;
        width: calc(600px - .7075rem)
    }
}

.contentEditorSection .additionalDetails .mainDetails {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
    background: var(--lightGray);
    padding-top: 2rem
}

@media (min-width: 1280px) {
    .contentEditorSection .additionalDetails .mainDetails {
        padding-top: 1rem
    }
}

.contentEditorSection .additionalDetails .mainDetails .infoInput {
    background: var(--white);
    border-radius: var(--btnRadius)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput label {
    position: absolute;
    left: 61px;
    top: 7px;
    font-size: .733rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2
}

.contentEditorSection .additionalDetails .mainDetails .infoInput input, .contentEditorSection .additionalDetails .mainDetails .infoInput selector selected items {
    z-index: 1;
    font-weight: 500;
    padding-left: 60px;
    padding-top: 25px;
    padding-bottom: 7px;
    background: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: var(--btnRadius)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput input::placeholder, .contentEditorSection .additionalDetails .mainDetails .infoInput selector selected items::placeholder {
    font-weight: 400
}

.contentEditorSection .additionalDetails .mainDetails .infoInput input:valid, .contentEditorSection .additionalDetails .mainDetails .infoInput selector selected items:valid {
    border: 1px dashed var(--inputColor3)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput input:focus, .contentEditorSection .additionalDetails .mainDetails .infoInput selector selected items:focus {
    border: 1px solid var(--inputColor3);
    background-color: var(--white)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput selector selected {
    background-color: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius);
    padding-left: 0;
    padding-top: 0
}

.contentEditorSection .additionalDetails .mainDetails .infoInput selector selected items {
    background-color: rgba(0, 0, 0, 0);
    border-radius: var(--btnRadius)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput selector selected items item {
    border-radius: var(--btnRadius);
    font-size: .878rem;
    padding: 2px 8px
}

.contentEditorSection .additionalDetails .mainDetails .infoInput selector selected items item [remove_multiple_select_item] {
    width: 20px;
    height: 20px;
    border-radius: var(--btnRadius);
    padding: 0;
    margin-left: 5px
}

.contentEditorSection .additionalDetails .mainDetails .infoInput selector options input {
    border: 1px solid var(--inputColor2);
    padding: 10px 1rem
}

.contentEditorSection .additionalDetails .mainDetails .infoInput selector options input:valid {
    border: 1px solid var(--inputColor2)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .inputIcon {
    position: absolute;
    top: 30px;
    left: 8px;
    z-index: 2;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    color: var(--white);
    background: var(--inputColor4)
}

@media (min-width: 768px) {
    .contentEditorSection .additionalDetails .mainDetails .infoInput .inputIcon {
        margin-top: -1px;
        left: 9px
    }
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .inputIcon i {
    font-size: 1rem;
    color: inherit;
    margin: auto
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv {
    display: flex;
    margin: 0;
    width: 100%;
    background-color: var(--white);
    border-radius: 0 0 var(--btnRadius) var(--btnRadius);
    border: 1px solid var(--borderGray);
    border-top: none;
    gap: 0;
    overflow: unset;
    transition: var(--transition1) !important
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -1px;
    width: 100%;
    height: 25px;
    background-color: inherit;
    border-left: 1px solid var(--borderGray);
    border-right: 1px solid var(--borderGray);
    pointer-events: none;
    transition: none !important
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv a, .contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv button {
    margin: 0;
    flex: 1;
    color: var(--darkGray);
    font-size: .937rem;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0);
    padding: 15px
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv a:hover, .contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv button:hover {
    color: var(--color1)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv a:hover i, .contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv button:hover i {
    color: var(--textGray)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv a i, .contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv button i {
    color: var(--textGray)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv a:nth-child(1), .contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv button:nth-child(1) {
    border-radius: var(--btnRadius) 0 0 var(--btnRadius);
    border-right: 1px solid var(--borderGray)
}

.contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv a:nth-child(2), .contentEditorSection .additionalDetails .mainDetails .infoInput .btnDiv button:nth-child(2) {
    border-radius: 0 var(--btnRadius) var(--btnRadius) 0
}

.contentEditorSection .additionalDetails .dropDownDiv {
    height: 100%
}

.contentEditorSection .additionalDetails .dropDownDiv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 25px;
    background: var(--lightGray);
    pointer-events: none
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList {
    background-color: var(--white);
    border-top: 1px solid var(--borderGray);
    border-radius: var(--btnRadius) var(--btnRadius) 0 0;
    box-shadow: 0px -20px 17px -9px rgba(255, 255, 255, .06)
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList::before {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 28px;
    background: inherit;
    pointer-events: none
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList:nth-last-child(1) {
    height: 100%
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList:nth-last-child(1)::before {
    height: 20%;
    top: unset;
    bottom: -20%
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList:nth-last-child(1) .dropBox {
    pointer-events: none
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList:nth-last-child(1) .dropContent {
    display: flex !important
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropBox {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    cursor: pointer
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropBox .title {
    margin: 0;
    color: var(--text-color);
    font-weight: 400;
    transition: var(--transition1);
    cursor: pointer
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropBox .arrowBtn i {
    color: var(--text-color);
    opacity: .5
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: 10px;
    flex-wrap: wrap;
    gap: 0 2%;
    border-radius: 0 0 var(--btnRadius) var(--btnRadius)
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv {
    margin-top: 0
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv label {
    position: absolute;
    top: 8px;
    left: .75rem;
    z-index: 1;
    color: var(--darkGray)
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv input, .contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv textarea, .contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv selector selected {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    color: var(--text-color);
    padding-top: 30px;
    border-radius: var(--radius)
}

@media (min-width: 1280px) {
    .contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv input, .contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv textarea, .contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv selector selected {
        font-size: 1rem
    }
}

.contentEditorSection .additionalDetails .dropDownDiv .dropList .dropContent .inputDiv selector selected item {
    color: var(--text-color)
}

.contentEditorSection .additionalDetails .articleCardContainer {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    height: 100%;
    display: flex;
    align-items: center
}

.contentEditorSection .editorBtnDiv {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 380;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: flex-end;
    gap: 0 10px;
    background: var(--bgShadeMobile);
    background-size: 100% 100vh;
    background-position: center top;
    background-attachment: fixed;
    border-radius: var(--btnRadius) var(--btnRadius) 0 0
}

@media (min-width: 1280px) {
    .contentEditorSection .editorBtnDiv {
        top: 0;
        bottom: unset;
        z-index: 102;
        height: 70px;
        width: auto;
        background: rgba(0, 0, 0, 0);
        border-radius: 0
    }
}

.contentEditorSection .editorBtnDiv a, .contentEditorSection .editorBtnDiv button {
    flex: 1;
    margin: 0
}

.contentEditorSection .editorBtnDiv .moreBtn .moreIcon {
    font-size: clamp(20.25px, 19.8503289474px + 0.000832648 * 100vw, 21.515625px);
    color: var(--text-color)
}

.contentEditorSection .editorBtnDiv .moreBtn .moreIcon i {
    opacity: 1
}

.contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    color: var(--text-color);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition1)
}

@media (min-width: 1024px) {
    .contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) {
        font-size: 1rem;
        padding: 1rem .7075rem
    }
}

.contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--shade-2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover {
    color: var(--text-color)
}

.contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):hover::before {
    opacity: 1
}

.contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-child(1) {
    padding-top: .7075rem
}

.contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3):nth-last-child(1) {
    padding-bottom: .7075rem
}

.contentEditorSection .editorBtnDiv .moreBtn a:not(.filledBtn,.outlinedBtn,.tonedBtn,.btn1,.btn2,.btn3,.btn3) i {
    top: 2px;
    font-size: .733rem;
    line-height: 1
}

.contentEditorSection .editorBtnDiv .moreBtn .filledBtn, .contentEditorSection .editorBtnDiv .moreBtn .outlinedBtn, .contentEditorSection .editorBtnDiv .moreBtn .btn1, .contentEditorSection .editorBtnDiv .moreBtn .btn2, .contentEditorSection .editorBtnDiv .moreBtn .btn3, .contentEditorSection .editorBtnDiv .moreBtn .btn3 {
    width: calc(100% - 20px);
    margin: 10px;
    padding: .75rem .8rem !important;
    font-size: 1rem
}

.contentEditorSection .editorBtnDiv .blogMenuIcon {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    margin-left: auto;
    transition: all .3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--btnRadius);
    border: 1px solid var(--shade-2);
    background-color: var(--standard-bg-color)
}

.contentEditorSection .editorBtnDiv .blogMenuIcon:hover {
    transform: scale(1.1)
}

.contentEditorSection .editorBtnDiv .blogMenuIcon div {
    width: 25px;
    height: 2px;
    min-height: 2px;
    margin: 2.5px 0;
    border-radius: 1rem;
    background: var(--text-color);
    animation-timing-function: ease-in-out;
    transition: all .3s;
    cursor: pointer
}

.contentEditorSection .editorBtnDiv .blogMenuIcon div:nth-child(2) {
    width: 20px
}

.contentEditorSection .editorBtnDiv .blogMenuIconIntro {
    transform: none
}

.contentEditorSection .editorBtnDiv .blogMenuIconIntro div {
    width: 25px
}

.contentEditorSection .editorBtnDiv .blogMenuIconIntro div:nth-child(1) {
    transform: rotate(45deg) translate(1px, 5px);
    margin: 0
}

.contentEditorSection .editorBtnDiv .blogMenuIconIntro div:nth-child(2) {
    transform: rotate(-45deg) translate(5%, -49%);
    margin: 0
}

.contentEditorSection .articleCard {
    margin: auto;
    width: 100%
}

.contentEditorSection .articleCard .imageDiv {
    width: 100%;
    padding-top: calc(var(--article-image-ratio) * 100%)
}

.contentEditorSection .articleCard .imageDiv:hover {
    z-index: 2
}

.contentEditorSection .articleCard .imageDiv .uploadInput {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: var(--btnRadius)
}

.contentEditorSection .articleCard .imageDiv .uploadInput:hover label {
    z-index: 2
}

.contentEditorSection .articleCard .imageDiv .uploadInput:hover img {
    opacity: 0
}

.contentEditorSection .articleCard .imageDiv .uploadInput label {
    color: var(--black);
    background-color: rgba(0, 0, 0, 0)
}

.contentEditorSection .articleCard .imageDiv .uploadInput [src=""] {
    display: none
}

.contentEditorSection .articleCard .imageDiv .uploadInput [blogcardthumbnailimagepreview] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1
}

.contentEditorSection .articleCard .imageDiv .uploadInput input {
    z-index: 3
}

.contentEditorSection .articleCard .imageDiv .uploadInput .inputBox {
    height: 100%;
    background-color: inherit
}

.contentEditorSection .articleCard .content .title:empty {
    display: none
}

.contentEditorSection .articleCard .content textarea {
    background-color: rgba(0, 0, 0, 0);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 0;
    padding-bottom: 10px;
    box-shadow: none
}

.contentEditorSectionIntro {
    margin: 0;
    max-width: 100%;
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

@media (min-width: 1280px) {
    .contentEditorSectionIntro {
        width: calc(100% - 500px)
    }
}

@media (min-width: 1800px) {
    .contentEditorSectionIntro {
        width: calc(100% - 600px)
    }
}

.contentEditorSectionIntro .additionalDetails {
    right: 0 !important
}

.contentEditorSectionIntro .additionalDetails .popupWindow {
    transform: none !important;
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

@media (min-width: 1280px) {
    .contentEditorSectionIntro .additionalDetails .popupWindow {
        border-left: 1px solid var(--borderGray) !important
    }
}

.contentEditorSectionIntro .editorBtnDiv {
    --bg-shade-visibility: 1;
    --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
    --bg-shade-blur: blur(40px);
    --bg-shade-border: 1px solid #ffffff0d;
    --bg-shade-border-top: 1px solid #f1f6ff3d;
    --bg-shade-border-bottom: 1px solid #fcfdff17;
    --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f;
    background: rgba(0, 0, 0, 0)
}

.contentEditorSectionIntro .editorBtnDiv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--bg-shade-visibility);
    backdrop-filter: var(--bg-shade-blur);
    background-color: var(--bg-shade-bg-color);
    border: var(--bg-shade-border);
    border-top: var(--bg-shade-border-top);
    border-bottom: var(--bg-shade-border-bottom);
    box-shadow: var(--bg-shade-shadow);
    border-radius: inherit;
    transition: var(--transition1)
}

@media (min-width: 1280px) {
    .contentEditorSectionIntro .editorBtnDiv {
        background: rgba(0, 0, 0, 0);
        padding-right: 500px;
        transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1)
    }

    .contentEditorSectionIntro .editorBtnDiv::before {
        display: none
    }
}

@media (min-width: 1800px) {
    .contentEditorSectionIntro .editorBtnDiv {
        padding-right: 600px
    }
}

.contentEditorSectionIntro .editorBtnDiv .blogMenuIcon {
    transform: none
}

.contentEditorSectionIntro .editorBtnDiv .blogMenuIcon div:nth-child(1) {
    transform: rotate(45deg) translate(4%, 4%);
    margin: 0;
    width: 25px
}

.contentEditorSectionIntro .editorBtnDiv .blogMenuIcon div:nth-child(2) {
    transform: rotate(-45deg) translate(4%, 4%);
    margin: 0;
    width: 25px
}

.contentEditor {
    width: 100%;
    min-height: 80vh !important;
    display: block !important;
    margin: 5.65rem auto;
    --heading-color: #181e25;
    --font-color: #323b48;
    --text-low: #788ba5;
    background-color: rgba(255, 255, 255, .1529411765);
    border-top: 1px solid rgba(255, 255, 255, .231372549);
    border-radius: var(--btnRadius)
}

.contentEditor table tr td {
    color: inherit;
    border: 1px solid var(--borderGray)
}

body .medium-editor-toolbar {
    font-family: var(--fontFamily);
    background: var(--standard-bg-color);
    border-radius: var(--btnRadius);
    border: 1px solid var(--shade-2);
    box-shadow: rgba(50, 50, 93, .144) 0px 50px 100px -20px, rgba(0, 0, 0, .185) 0px 30px 60px -30px;
    overflow: hidden
}

body .medium-editor-toolbar ul li button {
    font-size: 16px;
    min-width: 60px;
    height: 60px;
    color: var(--text-color);
    border-right: 1px solid var(--shade-2)
}

body .medium-editor-toolbar ul li button:nth-last-child(1) {
    border-radius: 0
}

body .medium-editor-toolbar ul li button:hover {
    color: var(--inputColor5);
    background: none;
    background-color: var(--inputColor1)
}

body .medium-editor-toolbar ul li button b {
    font-weight: 500
}

body .medium-editor-toolbar ul li .medium-editor-button-active {
    color: var(--standard-bg-color);
    background: none;
    background-color: var(--inputColor4)
}

body .medium-editor-toolbar ul li .medium-editor-button-active:hover {
    color: var(--standard-bg-color);
    background: none;
    background-color: var(--inputColor3)
}

body .trumbowyg-dark {
    margin: .7075rem 0
}

body .trumbowyg-dark label {
    font-weight: 500;
    padding-left: 5px;
    margin-bottom: 10px;
    color: var(--text-color)
}

body .trumbowyg-dark label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 51%;
    transform: translateY(-50%);
    width: 2px;
    height: 12px;
    background-color: var(--highlight)
}

body .trumbowyg-box.trumbowyg-fullscreen {
    background: var(--bg-color) !important;
    border-radius: 0
}

body .trumbowyg-box.trumbowyg-fullscreen .trumbowyg-button-pane {
    position: sticky;
    top: 0;
    border-radius: 0 !important
}

body .trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea {
    flex: unset !important
}

body .trumbowyg-box {
    border: 1px solid var(--text-color) !important;
    border-radius: var(--radius)
}

body .trumbowyg-box .trumbowyg-editor {
    min-height: 250px;
    padding: 5px .7075rem
}

body .trumbowyg-box .trumbowyg-editor p:nth-child(1) {
    margin: 0
}

body .trumbowyg-box .trumbowyg-button-pane {
    padding: 0;
    background: #fff;
    background: linear-gradient(90deg, var(--bg-color) 0%, var(--lightGray) 43%, var(--bg-color) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    border: none;
    border-bottom: 1px solid var(--text-color)
}

body .trumbowyg-box .trumbowyg-button-pane::before {
    top: 50px;
    background: var(--lightGray)
}

body .trumbowyg-box .trumbowyg-button-pane::after {
    display: none
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-button-group::before {
    height: 50px;
    background-color: var(--lightGray)
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-button-group::after {
    margin: 0;
    height: 50px;
    background-color: var(--borderGray) !important
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-button-group [type=button] {
    width: 50px;
    height: 50px
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-button-group [type=button]:hover {
    background: var(--lightGray)
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-button-group [type=button]::after {
    top: 23px
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-button-group [type=button] svg {
    width: 22px;
    fill: var(--text-color) !important;
    color: var(--text-color) !important
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active {
    background-color: var(--black) !important;
    color: var(--textGray) !important
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-dropdown table tr td {
    border: 1px solid var(--text-color);
    padding: 10px 13px
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-dropdown table tr td:active {
    background-color: var(--lightGray)
}

body .trumbowyg-box .trumbowyg-button-pane .trumbowyg-dropdown .trumbowyg-table-size {
    color: var(--white);
    text-align: center;
    padding: 10px
}

body .trumbowyg-modal .trumbowyg-modal-box {
    border-radius: var(--radius)
}

body .trumbowyg-dropdown-emoji {
    max-width: 100%;
    width: 100vw
}

body .trumbowyg-dropdown-emoji button {
    width: 70px;
    height: 70px;
    padding: 0;
    font-size: 24px
}

body .trumbowyg-editor-box ul, body .trumbowyg-editor-box ol {
    padding-left: .7075rem
}

body .trumbowyg-editor-box ul li, body .trumbowyg-editor-box ol li {
    list-style-position: outside
}

body .trumbowyg-editor-box ul li::marker, body .trumbowyg-editor-box ol li::marker {
    color: var(--text-color);
    opacity: .8
}

body .trumbowyg-editor-box ul li {
    list-style-type: disc
}

body .trumbowyg-editor-box ol li {
    list-style-type: decimal
}

body .trumbowyg-editor-box table {
    width: 100%;
    display: table;
    border-spacing: 0;
    border-collapse: collapse
}

body .trumbowyg-editor-box table tr {
    display: table-row;
    transition: var(--transition1)
}

body .trumbowyg-editor-box table th, body .trumbowyg-editor-box table td {
    border: 1px solid var(--borderGray);
    border-collapse: collapse;
    background-clip: padding-box;
    text-align: left;
    padding: .25rem .75rem
}

.inventoryCard .cardMenu .stockLabel {
    margin: 0;
    margin-right: auto;
    color: var(--green);
    font-size: .937rem;
    font-weight: 600
}

#dataSection .tableDiv table tr .product:hover .productView {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
    width: 180px;
    padding: .5rem;
    background-color: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: 0 0 var(--inputRadius) var(--inputRadius);
    box-shadow: rgba(0, 0, 0, .1) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px
}

#dataSection .tableDiv table tr .product:hover .productView img {
    display: block;
    border-radius: var(--inputRadius)
}

#dataSection .tableDiv table tr .product .productView {
    cursor: pointer
}

#dataSection .tableDiv table tr .product .productView img {
    display: none;
    margin-top: 1rem;
    cursor: pointer
}

#dataSection .tableDiv table tr .product .productView p {
    cursor: pointer
}

#dataSection .tableDiv table tr .product .productView .productId {
    display: block;
    margin-top: 5px;
    color: var(--black);
    font-size: .733rem;
    font-weight: 500;
    white-space: noWrap;
    cursor: pointer
}

#inventoryDetailsSection {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--white);
    overflow: hidden
}

#inventoryDetailsSection #inventoryNav {
    width: 100%;
    overflow-x: auto
}

#inventoryDetailsSection #inventoryNav .slideNavTab {
    display: flex;
    text-align: center;
    border-bottom: 1px solid var(--borderGray);
    width: 100%;
    min-width: 650px
}

#inventoryDetailsSection #inventoryNav .slideNavTab:hover .tabMenu::before {
    background-color: rgba(0, 0, 0, 0)
}

#inventoryDetailsSection #inventoryNav .slideNavTab:hover .tabMenuBorder {
    background-color: var(--color1)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu {
    width: 20%;
    color: var(--textGray);
    white-space: nowrap;
    padding: .7075rem 1rem;
    border-radius: .7075rem;
    cursor: pointer;
    transition: var(--transition1)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0);
    transition: var(--transition1)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:hover {
    color: var(--color1)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:hover ~ .tabMenuBorder {
    background: var(--color2);
    transition: transform 250ms cubic-bezier(0, 0.5, 0.5, 1.1), background 250ms ease-out
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:active ~ .tabMenuBorder {
    background: var(--blue);
    transition: all 250ms ease-out
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(1).active ~ .tabMenuBorder {
    transform: translateX(0%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(1):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(1):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(1):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(1):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(1):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(1):active ~ .active ~ .tabMenuBorder {
    transform: translateX(0%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(2).active ~ .tabMenuBorder {
    transform: translateX(100%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(2):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(2):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(2):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(2):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(2):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(2):active ~ .active ~ .tabMenuBorder {
    transform: translateX(100%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(3).active ~ .tabMenuBorder {
    transform: translateX(200%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(3):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(3):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(3):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(3):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(3):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(3):active ~ .active ~ .tabMenuBorder {
    transform: translateX(200%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(4).active ~ .tabMenuBorder {
    transform: translateX(300%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(4):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(4):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(4):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(4):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(4):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(4):active ~ .active ~ .tabMenuBorder {
    transform: translateX(300%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(5).active ~ .tabMenuBorder {
    transform: translateX(400%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(5):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(5):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(5):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(5):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(5):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(5):active ~ .active ~ .tabMenuBorder {
    transform: translateX(400%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(6).active ~ .tabMenuBorder {
    transform: translateX(500%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(6):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(6):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(6):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(6):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(6):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(6):active ~ .active ~ .tabMenuBorder {
    transform: translateX(500%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(7).active ~ .tabMenuBorder {
    transform: translateX(600%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(7):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(7):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(7):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(7):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(7):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(7):active ~ .active ~ .tabMenuBorder {
    transform: translateX(600%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(8).active ~ .tabMenuBorder {
    transform: translateX(700%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(8):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(8):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(8):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(8):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(8):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(8):active ~ .active ~ .tabMenuBorder {
    transform: translateX(700%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(9).active ~ .tabMenuBorder {
    transform: translateX(800%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(9):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(9):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(9):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(9):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(9):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(9):active ~ .active ~ .tabMenuBorder {
    transform: translateX(800%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(10).active ~ .tabMenuBorder {
    transform: translateX(900%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(10):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(10):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(10):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(10):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(10):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(10):active ~ .active ~ .tabMenuBorder {
    transform: translateX(900%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(11).active ~ .tabMenuBorder {
    transform: translateX(1000%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(11):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(11):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(11):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(11):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(11):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(11):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1000%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(12).active ~ .tabMenuBorder {
    transform: translateX(1100%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(12):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(12):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(12):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(12):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(12):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(12):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1100%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(13).active ~ .tabMenuBorder {
    transform: translateX(1200%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(13):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(13):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(13):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(13):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(13):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(13):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1200%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(14).active ~ .tabMenuBorder {
    transform: translateX(1300%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(14):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(14):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(14):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(14):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(14):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(14):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1300%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(15).active ~ .tabMenuBorder {
    transform: translateX(1400%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(15):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(15):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(15):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(15):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(15):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(15):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1400%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(16).active ~ .tabMenuBorder {
    transform: translateX(1500%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(16):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(16):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(16):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(16):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(16):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(16):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1500%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(17).active ~ .tabMenuBorder {
    transform: translateX(1600%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(17):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(17):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(17):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(17):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(17):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(17):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1600%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(18).active ~ .tabMenuBorder {
    transform: translateX(1700%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(18):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(18):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(18):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(18):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(18):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(18):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1700%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(19).active ~ .tabMenuBorder {
    transform: translateX(1800%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(19):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(19):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(19):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(19):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(19):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(19):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1800%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(20).active ~ .tabMenuBorder {
    transform: translateX(1900%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(20):hover ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(20):hover ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(20):focus ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(20):focus ~ .active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(20):active ~ .tabMenuBorder, #inventoryDetailsSection #inventoryNav .slideNavTab .tabMenu:nth-child(20):active ~ .active ~ .tabMenuBorder {
    transform: translateX(1900%)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .activeTabMenu {
    color: var(--color1);
    font-weight: 600
}

#inventoryDetailsSection #inventoryNav .slideNavTab .activeTabMenu::before {
    background-color: var(--color1)
}

#inventoryDetailsSection #inventoryNav .slideNavTab .tabMenuBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 20%;
    margin: 0;
    border: 0;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0);
    transform: translateX(-50%);
    transition: all 375ms ease-out;
    will-change: transform, background
}

#inventoryDetailsSection .tabBarWrapper .tabBarSlide {
    background-color: var(--white);
    padding: 1rem;
    overflow: hidden
}

@media (min-width: 768px) {
    #inventoryDetailsSection .tabBarWrapper .tabBarSlide {
        padding: 1rem
    }
}

#inventoryDetailsSection .btnSection {
    width: 100%;
    text-align: center
}

#inventoryDetailsSection .btnSection button {
    min-width: 200px
}

.inventoryMediaSection {
    overflow: hidden
}

.inventoryMediaSection .inventoryMediaWrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard {
    width: var(--media-card-width);
    min-width: var(--media-card-width);
    padding-top: calc(var(--media-card-ratio) * var(--media-card-width));
    border-radius: var(--inputRadius);
    overflow: hidden;
    margin-right: 1rem;
    margin-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: var(--transition1)
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard:hover::before {
    color: var(--color1);
    border: 2px dashed var(--inputColor2)
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard::before {
    content: attr(data-label);
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--inputColor1);
    border: 2px dashed var(--inputBorder);
    border-radius: var(--inputRadius);
    color: var(--textGray);
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500;
    transform: scale(0.97);
    cursor: pointer;
    transition: var(--transition1)
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard img[src=""] {
    display: none
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard img[src=""] + .imageDeleteBtn {
    display: none
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    transition: var(--transition1)
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard .imageDeleteBtn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    background-color: var(--white);
    padding: 1rem;
    border-radius: var(--radius);
    color: var(--red);
    font-size: clamp(22.78125px, 22.3316200658px + 0.000936729 * 100vw, 24.205078125px);
    border: 1px solid var(--borderGray);
    cursor: pointer;
    transition: var(--transition1)
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard .imageDeleteBtn:hover {
    color: var(--white);
    background-color: var(--red);
    border: 1px solid var(--inputColor4)
}

.inventoryMediaSection .inventoryMediaWrapper .mediaCard .imageDeleteBtn i {
    cursor: pointer;
    transition: var(--transition1)
}

.inventoryMediaSection .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 35px;
    height: 50px;
    display: flex;
    color: var(--textGray);
    font-size: clamp(28.8325195313px, 28.2634566458px + 0.0011855477 * 100vw, 30.634552002px);
    background-color: var(--black);
    cursor: pointer;
    transition: var(--transition1)
}

.inventoryMediaSection .arrow:hover {
    color: var(--white);
    background-color: var(--darkGray)
}

.inventoryMediaSection .arrow:hover i {
    transform: scale(1.1)
}

.inventoryMediaSection .arrow:nth-child(1) {
    left: 0;
    border-radius: 0 .5rem .5rem 0
}

.inventoryMediaSection .arrow:nth-child(2) {
    right: 0;
    border-radius: .5rem 0 0 .5rem
}

.inventoryMediaSection .arrow i {
    margin: auto;
    cursor: pointer;
    transition: var(--transition1)
}

#courseDetailsView {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0
}

#courseDetailsView #primaryDetails, #courseDetailsView #curriculumDetails {
    width: 100%;
    height: auto;
    clear: both;
    margin: 0 auto;
    padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width)) / 2, 100%);
    padding-bottom: var(--section-space-y);
    padding-top: var(--section-space-y);
    width: 100%
}

@media (min-width: 1024px) {
    #courseDetailsView #primaryDetails, #courseDetailsView #curriculumDetails {
        width: 50%;
        height: 100vh;
        overflow-y: auto
    }
}

#courseDetailsView #primaryDetails .heading, #courseDetailsView #curriculumDetails .heading {
    width: 100%;
    color: var(--color1);
    text-align: center;
    margin-bottom: 1.413rem
}

#courseDetailsView #primaryDetails {
    background: var(--white);
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%
}

#courseDetailsView #primaryDetails .ql-toolbar.ql-snow {
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0
}

#courseDetailsView #primaryDetails .ql-container.ql-snow {
    border-radius: 0 0 var(--radius) var(--radius)
}

#courseDetailsView #curriculumDetails .curriculumForm {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px 0
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList {
    display: block
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList .dropBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    transition: var(--transition1);
    cursor: pointer
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList .dropBox .moreBtn {
    margin-left: auto;
    padding: 1rem
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList .dropBox div {
    cursor: pointer;
    transition: var(--transition1)
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList .dropBox div i {
    color: inherit;
    font-size: .878rem;
    cursor: pointer;
    transition: var(--transition1)
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList .dropBox div .dropRemove {
    display: none
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList .dropContent {
    display: none;
    width: 100%
}

#courseDetailsView #curriculumDetails .curriculumForm .dropList .dropContent p:nth-child(1) {
    margin-top: 0
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm {
    width: 100%;
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: 1px solid var(--borderGray);
    list-style-type: decimal;
    list-style-position: outside
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm::marker {
    display: inline-block;
    color: var(--gray);
    font-family: var(--fontFamily);
    font-weight: 600
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .arrowBtn, #courseDetailsView #curriculumDetails .curriculumForm .modulesForm .updateModule, #courseDetailsView #curriculumDetails .curriculumForm .modulesForm .deleteBtn, #courseDetailsView #curriculumDetails .curriculumForm .modulesForm .editChapterBtn, #courseDetailsView #curriculumDetails .curriculumForm .modulesForm .updateChapterBtn {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    padding: .5rem;
    cursor: pointer
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .arrowBtn {
    border: 1px solid var(--borderGray);
    margin-left: auto
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .updateModule {
    overflow: initial;
    color: var(--white);
    background-color: var(--color1);
    border: 1px solid var(--color1)
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .deleteBtn {
    overflow: initial;
    border: 1px solid #909294
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .dropBox {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    padding: .7075rem
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .dropBox input {
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
    padding: 0;
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px);
    font-weight: 500
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .dropContent {
    gap: 20px 0;
    border-top: 1px solid var(--borderGray);
    background: var(--lightGray);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1.413rem
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList {
    margin-bottom: 20px;
    padding: 1.413rem;
    background: var(--white);
    border: 1px solid var(--borderGray);
    border-radius: var(--radius);
    box-shadow: rgba(0, 0, 0, .1) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList .chapterTitleDiv {
    display: flex;
    gap: 5px
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList .chapterTitleDiv .btnDiv {
    margin: 0;
    flex-wrap: nowrap;
    gap: 0
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList .chapterTitleDiv .btnDiv .updateChapterBtn {
    color: var(--green)
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList .chapterTitleDiv .btnDiv .updateChapterBtn:hover {
    background: #eafff2
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList .chapterTitleDiv .btnDiv .deleteBtn {
    border: none;
    color: var(--red)
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList .chapterTitleDiv .btnDiv .deleteBtn:hover {
    background: #ffeaea
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .chapterList .chapterDetails {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.413rem
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .subTitle {
    width: 100%;
    margin-bottom: .7075rem
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentsListDiv {
    width: 100%
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentsListDiv .documentList {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid var(--borderGray);
    padding: 10px 0
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentsListDiv .documentList:has(.documentTitleL:empty) {
    display: none
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentsListDiv .documentList .documentTitle {
    margin-right: auto
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentsListDiv .documentList .downloadDocumentBtn, #courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentsListDiv .documentList .deleteDocumentBtn {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    padding: .5rem;
    cursor: pointer
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentupload {
    border-radius: var(--radius);
    border: 1px solid var(--color1);
    padding: .7075rem;
    margin-bottom: 1.413rem
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentupload .inputBox {
    width: 100%
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentupload .inputBox .inputDiv {
    min-width: auto
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentupload .inputBox .inputDiv input {
    padding: 1.5rem
}

#courseDetailsView #curriculumDetails .curriculumForm .modulesForm .documentupload .inputBox .documentUploadBtn {
    min-width: 100px;
    border-radius: var(--radius)
}

#courseDetailsView #curriculumDetails .curriculumForm .addModuleumForm {
    display: flex
}

#courseDetailsView #curriculumDetails .curriculumForm .addModuleumForm input {
    background: var(--white)
}

#courseDetailsView #curriculumDetails .curriculumForm .addModuleumForm .saveModule {
    min-width: 150px;
    border-radius: var(--radius)
}

.page-leave {
    animation: leave 1500ms cubic-bezier(0.77, 0, 0.175, 1) forwards
}

@keyframes leave {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.page-enter {
    opacity: 0;
    animation: enter 1500ms cubic-bezier(0.77, 0, 0.175, 1) forwards
}

@keyframes enter {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.svgMainAnimation {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto
}

.dashboardMainContainer:has(.header) .sideBarNavigation .menuIcon {
    display: flex
}

@media (min-width: 1024px) {
    .dashboardMainContainer:has(.header) .sideBarNavigation .menuIcon {
        display: none
    }
}

.dashboardMainContainer {
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    display: flex
}

.dashboardMainContainer.dashboardMainContainerIntro .header {
    height: 65px;
    padding: 8px 0;
    background-position: center top;
    background-attachment: fixed;
    background: var(--bgShadeMobile);
    background-size: 100% 100vh;
    background-repeat: no-repeat;
    border-radius: 0 0 1.75rem 1.75rem
}

@media (min-width: 1024px) {
    .dashboardMainContainer.dashboardMainContainerIntro .header {
        border-radius: 0;
        padding-bottom: 0;
        background: var(--bgShadeWeb);
        background-size: 100% 100vh
    }
}

@media (min-width: 1280px) {
    .dashboardMainContainer.dashboardMainContainerIntro .header {
        height: 70px;
        padding-top: 0
    }
}

.dashboardMainContainer.dashboardMainContainerIntro .header::before {
    backdrop-filter: blur(40px)
}

.dashboardMainContainer.dashboardMainContainerIntro .header .title {
    transform: translate(-50%, -50%)
}

@media (min-width: 1280px) {
    .dashboardMainContainer.dashboardMainContainerIntro .header .title {
        transform: none
    }
}

.dashboardMainContainer.dashboardMainContainerIntro .header .navMenu {
    transform: rotateX(90deg) scale(0.9);
    opacity: 0;
    margin: 0 auto;
    overflow: hidden
}

@media (min-width: 1280px) {
    .dashboardMainContainer.dashboardMainContainerIntro .header .navMenu {
        opacity: 1;
        transform: none;
        transform: translate(-50%, -50%);
        overflow: unset
    }
}

.dashboardMainContainer.dashboardMainContainerIntro .header .menu {
    transform: translateY(150%);
    transition: all 375ms ease-out
}

@media (min-width: 1024px) {
    .dashboardMainContainer.dashboardMainContainerIntro .header .menu {
        transform: none
    }
}

.dashboardMainContainer.dashboardMainContainerIntro .header .menuIcon {
    height: 60px;
    padding: 21px 29px
}

.dashboardMainContainer.dashboardMainContainerIntro .sideBarNavigation .menuIcon {
    top: 8px
}

.dashboardMainContainer.dashboardMainContainerIntro .paginationFooter {
    transform: none;
    transition: all 375ms ease-out
}

.dashboardMainContainer.dashboardScrollIntro .header, .dashboardMainContainer.dashboardScrollIntro .sideBarNavigation .menuIcon {
    top: calc(-1 * var(--headerHeight))
}

.dashboardMainContainer.dashboardScrollIntro .paginationFooter .paginationDetails {
    height: 0
}

@media (min-width: 768px) {
    .dashboardMainContainer.dashboardScrollIntro .paginationFooter .paginationDetails {
        height: auto
    }
}

.dashboardMainContainer .dashboardSection {
    width: 100%;
    transition: transform 800ms cubic-bezier(0, 0.5, 0.5, 1.1)
}

@media (min-width: 1024px) {
    .dashboardMainContainer .dashboardSection {
        padding-left: calc(var(--menuBarWidth) + var(--tabBarGap));
        transform: none
    }
}

.dashboardMainContainer .dashboardSection::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background: var(--bgShadeMobile);
    pointer-events: none
}

@media (min-width: 1024px) {
    .dashboardMainContainer .dashboardSection::before {
        background: var(--bgShadeWeb)
    }
}

.dashboardMainContainer .dashboardSection .titleDiv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem
}

.dashboardMainContainer .dashboardSection .titleDiv .title {
    margin: 0;
    color: var(--darkGray);
    font-weight: 500
}

.dashboardMainContainer .dashboardSection .titleDiv .btn {
    margin-top: 0
}

.dashboardMainContainer .dashboardSection .dashboard {
    width: 100%;
    min-height: 80vh;
    padding-left: 1rem;
    padding-right: 1rem
}

@media (min-width: 1024px) {
    .dashboardMainContainer .dashboardSection .dashboard {
        padding: 0
    }
}

::-webkit-scrollbar {
    width: 10px;
    height: 1px
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0)
}

::-webkit-scrollbar-thumb {
    background-color: var(--shade-2);
    cursor: grab
}

::-webkit-scrollbar-thumb:window-inactive {
    background-color: var(--shade-2);
    cursor: grab
}

[readonly] input:not([type=checkbox],[type=radio]), [readonly] textarea, [readonly] select, [readonly] label, [readonly] selector {
    pointer-events: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    overflow: hidden
}

[readonly] input:not([type=checkbox],[type=radio]) *, [readonly] textarea *, [readonly] select *, [readonly] label *, [readonly] selector * {
    pointer-events: none !important
}

[readonly] .surveyForm input:not([type=checkbox],[type=radio]), [readonly] .surveyForm textarea, [readonly] .surveyForm select, [readonly] .surveyForm selector item {
    font-size: clamp(18px, 17.6447368421px + 0.0007401316 * 100vw, 19.125px) !important
}

[readonly] [type=checkbox], [readonly] [type=radio] {
    pointer-events: none !important
}

[readonly] input[type=date]::-webkit-calendar-picker-indicator, [readonly] input[type=datetime-local]::-webkit-calendar-picker-indicator {
    display: none
}

[readonly] selector selected::after {
    opacity: 0 !important
}

[readonly] .profileInput item {
    box-shadow: none !important
}

[readonly] [multi] items item {
    box-shadow: none !important
}

[readonly] [multi] items item [remove_multiple_select_item] {
    display: none !important
}

[readonly] textarea {
    resize: none;
    overflow: hidden;
    line-height: 1.4 !important
}

[readonly] .options input {
    display: none !important
}

[readonly] .options input:checked {
    display: block !important
}

[readonly] .inventoryMediaSection .mediaCard {
    pointer-events: none !important
}

[readonly] .inputTable input {
    padding: .6rem 1rem
}

[readonly] .viewDataTabContainer {
    background: linear-gradient(90deg, rgb(235, 235, 235) 0%, rgb(255, 255, 255) 50%, rgb(226, 226, 226) 100%)
}

[readonly] [row_generator] [row_generator_row] [row_generator_callback], [readonly] [row_generator] [row_generator_row] .deleteFieldBtn, [readonly] [row_generator] [row_generator_row] .addFieldBtn, [readonly] .inputTable [row_generator_row] [row_generator_callback], [readonly] .inputTable [row_generator_row] .deleteFieldBtn, [readonly] .inputTable [row_generator_row] .addFieldBtn {
    display: none !important
}

[readonly] .deleteModuleBtn, [readonly] .addModuleBtn {
    display: none !important
}

[readonly] .avatarView input {
    display: none
}

[readonly] .floatingLabel {
    margin-top: .7075rem
}

[readonly] .floatingLabel label {
    left: 0
}

[readonly] #noteInputElement {
    pointer-events: auto
}

[readonly] .detailsDropDownDiv .dropList .dropContent .floatingLabel, [readonly] .detailsDropDownDiv .dropList .dropContent .inputDiv {
    margin-bottom: 1rem
}

[readonly] .detailsDropDownDiv .dropList .dropContent .floatingLabel label, [readonly] .detailsDropDownDiv .dropList .dropContent .inputDiv label {
    color: var(--gray);
    font-size: .667rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px
}