:root {
    --Black: #465055;

    /* green shades - more in code*/
    --LogoGreenYellow: #b9d771;
    --GreenSushi: #68c037;
    --LogoDarkGreen: #007e8d;
    --Success-Border: #d2ead5;
    /* other secondary colors */
    --BrownCoffeeRoyal: #6c3008;
    --BlueEastBay: #3d5a7f;
    --BlueLagoon: #027e8e;
    --BlueDoger: #41b4ff;
    --BlueLink: var(--Accent);
    --BlueZiggurat: #b3d9dd;
    --YellowBrightSun: #ffe541;
    --OrangeYellow: #fba043;
    --OrangeYellow_inactive: #ecba87;
    --RedPersimmon: #ff545d;
    --VioletElectric: #a543fb;
    --VioletMauve: #dea3ff;
    --PinkHot: #ff6fbc;
    --BrownTiaMaria: #c6490c;
    --BrownDiSerria: #e19e72;
    --PinkBeautyBush: #f5cece;
    --GreyDark: #838383;
    --GreyLightAlto: #dcdcdc;
    --White: #fff;
    --Grey0: #1d2227;
    /* very dark */
    --Grey1: #32373c;
    --Grey3: #838383;
    /* grey dark */
    --Grey4: #a9b3b8;
    --Grey5: #cdd2d7;
    --Grey6: #dbe0e5;
    --Grey7: #dcdcdc;
    /* GreyLightAlto*/
    --Grey8: #f0f0f5;
    --Grey9: #f5f5fa;
    --Accent: #4368f8;
    --blue-800: #17125b;
    --Accent-Dark: #3753bf;

    --Grey-Disabled: #d9d9d9;
    --primary-border: #d9d9d9;
    --primary-secondary: #fff;
    --Light-red: #db1742;
    --warning-main: #ec6f4c;

    --red-500: #eb315a;
    --Grey-800: #242424;
    --Text: #414554;

    /* very light */
    --smallBorderRadius: 3px;
    --defaultBorderRadius: 5px;
    --largeBorderRadius: 10px;
    --primaryDisabled: var(--Grey-Disabled);
    --primaryAlternate: var(--White);
    --NotifColor: var(--red-500);
    --NotifColorBG: #fcf3f2;
    --defaultBoxShadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    --mx-hover-bg-color: #4368f820;
    --defaultMicroSpacing: 4px;
    --defaultSmallSpacing: 8px;
    --defaultMediumSpacing: 16px;
    --defaultLargeSpacing: 32px;
    --defaultCardShadow: 0px 6px 11px -3px rgba(40, 33, 136, 0.1), 0px 54px 43px -13px rgba(55, 83, 191, 0.05);
    --FontAwesome: "Font Awesome 5 Pro";
}

/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("fonts/poppins-1.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("fonts/poppins-2.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("fonts/poppins-3.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("fonts/poppins-4.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("fonts/poppins-5.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("fonts/poppins-6.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-7.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-8.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-9.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-10.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-11.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-12.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-13.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-14.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-15.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-16.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-17.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-18.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-19.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-20.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-21.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/poppins-22.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/poppins-23.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/poppins-24.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("fonts/poppins-25.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("fonts/poppins-26.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("fonts/poppins-27.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("fonts/poppins-28.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("fonts/poppins-29.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("fonts/poppins-30.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("fonts/poppins-31.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("fonts/poppins-32.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("fonts/poppins-33.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-34.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-35.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-36.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-37.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-38.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-39.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-40.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-41.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-42.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-43.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-44.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-45.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-46.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-47.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-48.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/poppins-49.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/poppins-50.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/poppins-51.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("fonts/poppins-52.woff2") format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("fonts/poppins-53.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("fonts/poppins-54.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    /* leave space in top and bottom for bars */
    padding-bottom: 50px;
    padding-top: 70px;
    font-family: Poppins, Verdana, Geneva, Tahoma, sans-serif;
    overflow: hidden;
    height: 100vh;
}

p {
    color: var(--Text);
}

b,
strong {
    font-weight: 600;
}

#googleindexer {
    display: none;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    border-left: 5px solid var(--Grey8);
}

#ConsoleOutput {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    height: 100%;
    background: var(--Grey1);
    color: var(--White);
    font-size: small;
    display: none;
    z-index: -99999;
}

.ConsoleOutputShow {
    display: block !important;
    z-index: 99999 !important;
}

#consoleLog {
    width: 100%;
    background-color: var(--Grey1);
    color: var(--White);
}

#feedback-button {
    margin: 10px auto;
}

.buttonCreateSelect {
    position: relative;
}

.buttonCreateSelect > i {
    padding-right: 12px;
}

.mitigationWeight {
    margin-left: 6px;
}

.fancytree-container img {
    margin-top: 4px !important;
    width: 50px !important;
    margin-left: 0;
}

.fancy-icon img {
    width: 20px !important;
}

.fancy-icon {
    min-width: 20px;
    color: var(--Grey3);
}
.fancy-icon.admin-custom-icon {
    min-width: auto;
}

ul.fancytree-container {
    font-family: Poppins, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    height: 100% !important;
}

.fancytree-icontext {
    display: inline-block;
    min-width: 60px;
    font-weight: 400;
    margin-left: -10px;
    text-align: center;
    margin-right: 3px;
    border-radius: var(--smallBorderRadius);
    padding: 0 8px;
}

.fancytree-iconxtc {
    min-width: 50px !important;
}

.ui-helper-hidden {
    display: block !important;
}

.datepicker,
.dropdown-menu.datepicker {
    z-index: 3000; /* otherwise navar is on top of it...*/
}

.span.fancytree-title {
    border-left: 0 !important;
    padding-left: 0;
}

/* don't use vertical padding there, because it's affecting dnd logic. use margins below instead */
span.fancytree-node {
    position: relative;
    margin-left: -15px;
    border-radius: var(--defaultBorderRadius);
    width: unset;
    border: solid 1px transparent;
}
span.fancytree-node > .fancytree-custom-icon {
    margin-top: 5px;
}
span.fancytree-node > .fancytree-expander,
span.fancytree-node > .fancytree-icon,
span.fancytree-node > .fancytree-checkbox,
span.fancytree-node > .fancytree-title {
    margin-top: 2px;
    margin-bottom: 2px;
}
.fancytree-focused {
    background: var(--mx-hover-bg-color);
    box-shadow: var(--defaultCardShadow);
}

/* hover effect without dnd */
.ui-fancytree:not(:has(> .fancytree-drag-helper)) span.fancytree-node:hover,
    /* 2 cases of highlighting the folder in which the file will be dropped */
    /* 1st case: parent folder if item will be dropped after or before some other item */
.ui-fancytree:has(> .fancytree-drag-helper) span.fancytree-node:has(+ ul > li > .fancytree-drop-after, + ul > li > .fancytree-drop-before),
    /* 2nd case: item will be dropped inside the folder directly (folder as target) */
.ui-fancytree:has(> .fancytree-drag-helper) span.fancytree-node.fancytree-drop-target:not(.fancytree-drop-after, .fancytree-drop-before) {
    border: solid 1px var(--Accent);
}

.fancytree-treefocus span.fancytree-active .fancytree-title,
.fancytree-treefocus span.fancytree-selected .fancytree-title,
span.fancytree-active .fancytree-title,
span.fancytree-selected .fancytree-title,
span.fancytree-title:hover,
.fancytree-treefocus span.fancytree-focused span.fancytree-title,
span.fancytree-title:hover,
span.fancytree-active .fancytree-title:hover,
span.fancytree-selected .fancytree-title:hover {
    background: none;
    border: none;
    border-top-width: unset;
}
#fancytree-drop-marker {
    width: 32px;
    position: absolute;
    background-position: 0px -128px;
    margin: 0;
}
#fancytree-drop-marker.fancytree-drop-after:before,
#fancytree-drop-marker.fancytree-drop-before:before {
    width: 64px;
    content: "\f30b";
}

div.fancytree-drop-accept span.fancytree-drag-helper-img:before {
    content: "\f058";
    color: #1b5f4e;
}
div.fancytree-drop-reject span.fancytree-drag-helper-img:before {
    content: "\f057";
    color: var(--red-500);
}

#fancytree-drop-marker.fancytree-drop-move {
    background-position: -32px -128px;
}

.fancytree-drag-helper {
    padding: 8px;
    margin-left: 24px;
}

span.fancytree-title {
    border: none;
}
span.fancytree-active {
    background: var(--mx-hover-bg-color);
    border: solid 1px transparent;
}
span.fancytree-active > .fancytree-title {
    color: var(--Accent) !important;
}

.form-group-dense {
    margin-bottom: 4px !important;
}

.col-dense {
    height: 20px;
}

.ui-front {
    z-index: 2000;
    /* added so that (history) dialog is in front */
}

.ui-widget-overlay {
    z-index: 1999;
    /* added so that (history) dialog is in front */
}

.ui-dialog {
    overflow: visible !important;
    min-width: 550px;
    border-radius: var(--defaultBorderRadius);
}

.ui-dialog:has(.createEditDlg) {
    min-width: 800px;
}

/* This is to make sure that dragged items are not transparent and remain readable */

.ui-draggable-dragging {
    background-color: var(--White);
}

span.fancytree-node.fancytree-folder {
    margin-left: 0;
}

/* Clear out mouse over highlights on drag targets */

.fancytree-drop-accept > .fancytree-title:hover,
.fancytree-drop-reject > .fancytree-title:hover {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}

.itemTitleBar {
    font-size: large;
    width: 100%;
    border-bottom: solid 1px var(--Grey8);
    display: flex;
    justify-content: space-between;
    padding: var(--defaultSmallSpacing) var(--defaultMediumSpacing);
}

@media screen and (max-width: 768px) {
    .itemTitleBar {
        display: block;
    }
}

.createButtons {
    margin-top: 22px;
}

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

.mainmenu {
    margin-left: var(--defaultMediumSpacing);
}

.toolmenu_li li:hover {
    background-color: #f5f5f5 !important;
}

.dropdown-menu li {
    display: block;
    padding: 8px 40px 8px 32px;
    cursor: pointer;
    white-space: nowrap;
}

.bootstrap-datetimepicker-widget.dropdown-menu li {
    white-space: normal;
}

li.dropdown-item,
li.notification-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 40px 8px 16px;
    cursor: pointer;
    white-space: nowrap;
}

li.notification-item {
    align-items: flex-start;
}

.notification-item .project-icon {
    transform: translateY(5px);
}

.notification-item .mainmenu {
    flex-grow: 1;
}

.dropdown-item._branched {
    padding-left: 32px;
}

.dropdown-item._qms .menu-icon {
    font-size: 13px;
    transform: translateX(-2px);
}

.dropdown-item._qms .mainmenu {
    margin-left: 11px;
}

.dropdown-menu .divider,
.dropdown-menu .divider:hover {
    height: 1px;
    margin: 0px 0;
    padding: 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.bootstrap-datetimepicker-widget li:hover {
    background-color: transparent;
    color: var(--Grey1);
}

.bootstrap-datetimepicker-widget {
    z-index: 20000 !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--mx-hover-bg-color);
    color: var(--Accent);
}

ul.dropdown-menu.globalFilterMenu {
    overflow: auto;
    max-height: 200px;
}
.dropdown-menu.globalFilterMenu li:hover {
    background: inherit;
    color: inherit;
}

li.globalProjectFilter__group {
    cursor: auto;
}

.menuHeading {
    font-style: italic;
    color: grey;
    line-height: 1;
    margin: 0;
    padding-right: 8px;
    text-align: right;
}

#resetFilter {
    font-size: 12px;
}

.menuLine {
    height: 1px;
    overflow: hidden;
    background-color: #e5e5e5;
    display: inline-block;
    width: 100%;
}

.limenuLine {
    line-height: 6px;
    height: 12px;
}

.negativeFilter {
    margin-right: 4px;
    cursor: pointer;
    color: grey;
}

li.btnline,
li.filterGroupDD {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding : 4px 8px;
}

.btnline a {
    cursor: default !important;
    background-color: inherit !important;
    color: inherit !important;
    text-align: right;
    display: flex !important;
    align-items: baseline;
}

#idProjectList {
    overflow-y: auto;
    margin-top: var(--defaultMediumSpacing);
}

#idProjectList .dropdown-menu {
    background: var(--White);
    overflow-y: auto !important;
}

.nodeBase {
    height: auto;
    min-height: 30px;
    width: 120px;
    padding: 6px 8px;
    text-align: center;
    position: absolute;
    font-weight: 500;
    -webkit-appearance: none;
    -webkit-user-select: none;
    -webkit-writing-mode: horizontal-tb;
    box-sizing: border-box;
    color: var(--Text);
    cursor: pointer;
    display: inline-block;
    border: 1px solid var(--primary-border);
    border-radius: 8px;
}

.nodeBase:hover {
    background: var(--Accent);
    border-color: var(--Accent);
    color: var(--White);
}

.nodeBase.nodeRoot:hover {
    background: var(--White);
    border-color: var(--primary-border);
    color: var(--Text);
}

.nodeBase:hover .refId,
.nodeCreate:hover .refId,
.nodeUpdate:hover .refId {
    color: var(--White);
}

.nodeBase .refId {
    margin-right: 0;
    overflow-wrap: break-word;
    white-space: normal;
}

.nodeRoot .refId,
.nodeBase.nodeRoot:hover .refId {
    color: var(--Text);
}

.nodeBase:active {
    padding: 5px 7px;
    border-width: 2px;
    background: var(--White);
    border-color: var(--Accent);
    color: var(--Accent);
}

.nodeBase:active .refId {
    color: var(--Accent);
}

.nodeSelect,
.nodeCreateOptional {
    background: var(--Accent);
    border-color: var(--Accent);
    color: var(--White);
}

.nodeSelect:hover,
.nodeCreateOptional:hover {
    background: var(--Accent-Dark);
    border-color: var(--Accent-Dark);
}

.nodeCreate {
    border-color: var(--Light-red);
    color: var(--Light-red);
}

.nodeCreate .refId {
    color: var(--Light-red);
}

.nodeCreate:hover {
    background: var(--Light-red);
    border-color: var(--Light-red);
    color: var(--White);
}

.nodeCreate:active {
    background: var(--White);
    border-color: var(--Light-red);
    color: var(--Light-red);
}

.nodeCreate:active .refId {
    color: var(--Light-red);
}

.nodeUpdate {
    border-color: var(--warning-main);
    color: var(--warning-main);
}

.nodeUpdate .refId {
    color: var(--warning-main);
}

.nodeUpdate:hover {
    background: var(--warning-main);
    border-color: var(--warning-main);
    color: var(--White);
}

.nodeUpdate:active {
    background: var(--White);
    border-color: var(--warning-main);
    color: var(--warning-main);
}

.nodeUpdate:active .refId {
    color: var(--warning-main);
}

.nodeCollapsed {
    position: absolute;
    background-color: #8fadff;
    border: 2px solid var(--Grey1);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    height: 30px;
    width: 100px;
}

.NodeLine {
    background-color: #006;
    position: absolute;
    overflow: hidden;
}

.NodeLineDash {
    background: linear-gradient(
        45deg,
        var(--White) 25%,
        var(--Grey0) 25%,
        var(--Grey0) 50%,
        var(--White) 50%,
        var(--White) 75%,
        var(--Grey0) 75%
    );
}

.nodeContainer {
    position: relative;
}

.itemTitleBarNoTools {
    display: flex;
    align-items: baseline;
}

.itemTitleDemand {
    padding-right: 6px;
    padding-top: 1px;
}

.editable-error-block {
    position: absolute;
    top: 12px;
    left: 510px;
}

.checkboxLabel {
    padding-left: 12px;
    margin-top: 1px;
}
label {
    font-weight: 600;
}

label:has(.checkboxLabel) {
    display: inline-flex;
    align-items: center;
}
label:has(.checkboxLabel) > input {
    margin-top: 0;
}

.highlight {
    background-color: #ff0;
}

.RAM,
.RBM {
    padding-left: 16px !important;
}

.risktd {
    vertical-align: middle !important;
    padding-bottom: 6px;
}
.riskTable td {
    border-top: none !important;
}

.riskTable .refTitle {
    white-space: normal;
}

.riskSelect {
    width: 180px !important;
}

.riskAfter .riskSelect {
    width: 40px !important;
}

.riskInputValue {
    height: 34px;
    padding: 6px;
}

.riskReductionLabel {
    width: 80px;
    white-space: nowrap;
    padding-left: 8px;
}

.riskTextArea {
    height: auto;
    padding: 4px;
    min-height: 36px;
    text-wrap: pretty;
}

.riskTextSelectStyle {
    height: 34px !important;
    padding: 4px 4px !important;
}

.riskInputLabel {
    width: 80px;
    white-space: nowrap;
}

.riskCompact td {
    padding: 3px !important;
    vertical-align: top !important;
}
.riskCompact .riskInputLabel,
.riskCompact .riskReductionLabel {
    white-space: initial !important;
    font-size: smaller;
}

.riskCompact {
    padding: 12px 0 12px 6px;
}
.riskCompact table {
    width: 100%;
}
.riskCompact .riskReductionLabel {
    padding-left: 0px;
}

.riskInputTextArea {
    resize: vertical;
}

.riskValueColumn {
    width: 280px;
}

.riskgreen {
    background-color: green;
    color: var(--White);
}

.riskyellow {
    background-color: #ff0;
}

.riskred {
    color: var(--White);
    background-color: red;
}

.risksum {
    padding: 4px;
    vertical-align: middle;
    height: 34px !important;
    white-space: nowrap;
}

.riskTable {
    margin-left: 0;
    width: 100%;
    padding-top: 15px;
}

.riskhelpleft {
    padding: 2px;
    white-space: nowrap;
}

.riskhelpright {
    padding: 2px;
}

.riskhelppopover {
    max-width: 350px !important;
}

.risk_control {
    padding-left: 8px;
}

.rcb0 {
    margin-top: 4px;
    margin-left: 36px;
}

.rcbn {
    margin-top: 4px;
}

.tinyRisks .baseControlHelp,
.tinyRisks .refTitle {
    display: none;
}

.tinyRisks ul {
    list-style-type: none;
    padding-left: 6px;
}

.tinyRisks .rcb0 {
    margin-left: 6px;
}

.riskDetails td,
.riskFooter td {
    border: 1px solid var(--Grey6);
}

.rotateHead th {
    vertical-align: middle !important;
}

.riskTableBody {
    cursor: move;
}

.riskDetails .riskSelect {
    width: initial !important;
}

select.form-control {
    width: 42px;
    height: 36px;
    padding: 2px 2px 0;
    height: 36px;
}

input.form-control {
    padding: 0 26px 0 6px;
    height: 36px;
}

.test_step_ .test_step_ok {
    color: var(--Grey1);
}

.test_step_warning {
    color: orange;
}

.test_step_error {
    color: red;
}

.test-step__result {
    display: flex;
    align-items: center;
}

.test-step__icon {
    min-width: 30px;
}

.readonlyComment {
    color: var(--Light-red);
}
select {
    font-weight: 400;
}
select.risk-control {
    height: 20px;
    padding: 0;
    margin-bottom: 0;
}

.history-header {
    padding-left: 10px;
    word-wrap: break-word;
}

#detailsHistory {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1px;
    background-color: var(--Grey8);
    opacity: 0.8;
    overflow: auto;
    -webkit-transition: width 1s;
    transition: width 1s;
    z-index: 44444;
}

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

.historyDetailLine,
.historyTagLine {
    margin-top: 2px;
}

.historyDetailLine {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    opacity: 1;
    height: 40px;
}

.historyIcon {
    width: 40px;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.historyDetail {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.historyDetailAction {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.historyDetailDate {
    display: flex;
    flex-direction: row;
    font-size: 10px;
    color: grey;
}

.historyDetailDate > span:last-child {
    text-align: right;
    flex-grow: 1;
}

.historyTagLine {
    display: flex;
    flex-direction: row;
    opacity: 1;
    height: 28px;
    width: 100%;
    border: none !important;
    padding-left: 40px;
}

.historyTagContainer {
    width: 40px;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.historyTagIcon {
    font-size: 16px !important;
}

.historyVersionContainer {
    border: 1px solid var(--GreyLightAlto);
    margin: 2px;
    border-radius: 4px;
}

.historyVersionContainer:hover,
.historyVersionContainerSelected {
    background-color: var(--BlueZiggurat);
}

.tagLabel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding-right: 8px;
}

.tagLabel > span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.historyTag {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
}

.addLabelImage {
    width: 20px;
    height: 20px;
    background-color: #428bca;
    -webkit-mask-image: url(/img/add_label_1.svg);
    mask-image: url(/img/add_label_1.svg);
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
    align-self: center;
    margin-right: 8px;
}

.detailsVersions {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow: auto;
    -webkit-transition: left 1s;
    transition: left 1s;
}

.detailsHistoryEx {
    width: 400px;
}

.detailsVersionsEx {
    left: 400px;
}

.historyDetailReason {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.historyDetail.noVersion {
    padding-top: 4px;
}

.detailHide {
    display: none;
}

.timewarp .history-header,
.timewarp .pull-right {
    color: #d3d3d3;
}

.justAfterTimewarp .history-header,
.justAfterTimewarp .pull-right {
    color: red;
}

.showHideAdmin {
    display: none;
}

.showHideAdmin + label {
    display: inline-block;
    cursor: pointer;
    margin-left: -12px;
}

.cbimg {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    margin: 0 16px;
}
.reviewToggle {
    margin: unset;
}

.crossoutcb {
    position: absolute;
    color: red;
    top: -3px;
    left: 2px;
}

.showHideAdmin:checked + label .cbimg:before {
    content: "\f078";
}

.commentCol1,
.commentCol2 {
    width: 20% !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
}

.commentCol3 {
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
}

.multimitctrl {
    margin-left: 8px;
    margin-right: 4px;
    -webkit-transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    background: #fff;
}

.bannerMessage {
    z-index: 1999;
    width: 60%;
    min-height: 50px;
    padding: 10px 30px 10px 10px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: red;
    color: var(--White);
    border-radius: var(--defaultBorderRadius);
}

#loginFrame {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4000;
    border: none;
}
#message_error {
    z-index: 4001;
}

.message_close {
    position: absolute;
    right: 8px;
    top: 5px;
    cursor: pointer;
}

.message_close_big {
    font-size: 170%;
    color: var(--Grey3);
    background-color: var(--Grey8);
    top: 9px;
    position: absolute;
    right: 10px;
    cursor: pointer;
    width: 40px;
    text-align: center;
    line-height: 36px;
    height: 36px;
    border-radius: var(--largeBorderRadius);
}

.message_close_big:hover {
    box-shadow: var(--defaultCardShadow);
}

.gateComment {
    /*padding-top: 0;*/
    border: none;
}

.gateCommentBox {
    display: flex;
    flex-grow: 1;
    min-height: 40px;
    min-width: 100px;
    border-top: 1px solid var(--Grey5);
    border-left: 1px solid var(--Grey5);
    border-bottom: 1px solid var(--Grey5);
    border-right: 0;
}

.gateUser {
    flex-basis: 150px;
    width: auto;
}

.gateUser,
.gateButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gateCommentBox:last-child {
    border-right: 1px solid var(--Grey5);
}

.gateButton:last-child {
    border-left: 1px solid var(--Grey5) !important;
}

.gateButtonOff {
    color: var(--Grey7);
    min-width: 100px;
}

.gateHint,
.gateHintDone {
    font-size: small;
    font-style: italic;
    margin: 0 0 6px 0;
}

.gateUserId {
    font-weight: bold;
}

.gateInput {
    border-radius: var(--defaultBorderRadius) !important;
    resize: vertical !important;
}

.gatePass {
    height: 20px !important;
    border-radius: var(--defaultBorderRadius) !important;
    margin: 2px 0 0 !important;
    max-width: 300px;
}

.gatePassUser {
    font-weight: bold;
    text-align: left;
    line-height: 1.5;
}

.gatePassLabel {
    text-align: left;
    font-size: small;
    padding-top: 12px;
    color: grey;
}

.gateLine {
    width: 100%;
    margin-bottom: 2px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.history-restore {
    color: var(--BlueLink) !important;
    cursor: pointer;
    font-size: smaller;
}

.taglist {
    margin-left: 6px;
    font-size: smaller;
}

.history-panel {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.history-panel::after {
    content: "";
    display: table;
    clear: both;
}

.history-panel-group {
    padding-right: 4px;
}

.form-horizontal .control-label {
    width: 80px;
}
#signin-missing-container {
    display: none;
}
.login_comment {
    margin-right: 8px;
    padding: 6px;
    resize: vertical;
}

.btn-signin {
    padding: 6px 20px;
}

.btn-sync-field {
    color: var(--Black);
}

.signin-missing {
    color: grey;
    top: 50%;
    vertical-align: middle;
    text-align: center;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.input-append .btn.dropdown-toggle {
    float: none;
}

.advancedFeatureHelp {
    margin-left: 50px;
    font-size: 12px;
}

#comment {
    padding-left: 4px;
    position: relative;
}

.autoSave {
    font-weight: 300;
}

#idAutoCommit {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

@media print {
    .itemPrint {
        left: 0 !important;
        top: 0 !important;
        width: 180mm !important;
        display: block !important;
    }
    .popover {
        display: none !important;
    }
    .refIdHyper {
        color: var(--BlueLink);
    }
    #iph .refId {
        font-size: larger;
        font-weight: 300;
        margin-right: 4px;
    }
    #iph .refTitle {
        font-size: larger;
        padding-left: 6px;
        font-weight: 400;
    }
    .refId {
        font-weight: 700;
        margin-right: 2px;
        white-space: nowrap;
    }
    .refTitle {
        padding-left: 6px;
        word-wrap: break-word;
        flex-shrink: 10;
    }
    .itemTitleBarNoToolsNoEdit {
        height: 30px;
        padding: 0;
    }
    .printheader {
        width: 100%;
        margin-bottom: 12px;
    }
    .printheader td {
        padding-left: 4px;
        padding-right: 4px;
    }
    .reportheaderdate {
        text-align: right;
        white-space: nowrap;
    }
    .datepicker {
        display: none;
    }
    .itemTitle {
        max-width: 311px;
    }
}

@media screen {
    #appPrint {
        display: none;
    }
    .refId {
        font-weight: 600;
        margin-right: 2px;
        white-space: nowrap;
    }
    .refIdHyper,
    .link {
        color: var(--BlueLink);
        cursor: pointer;
    }
    .fancytree-title > .refIdHyper {
        color: var(--Grey1);
        cursor: pointer;
    }
    .refTitle {
        padding-left: 6px;
        font-weight: 300;
        word-wrap: break-word;
    }
    .itemTitleBarNoToolsNoEdit {
        height: 30px;
        padding: 2px;
    }
    .itemTitle {
        max-width: 100%;
    }
}

.printNoBox {
    width: 18cm;
}

.printBox {
    width: 18cm;
    padding: 6px;
    margin-bottom: 12px;
    border: 1px solid var(--Grey5);
    -webkit-border-radius: var(--smallBorderRadius);
    -moz-border-radius: var(--smallBorderRadius);
    border-radius: var(--smallBorderRadius);
}
.controlContainer {
    margin-top: var(--defaultMediumSpacing);
}

.controlContainer:has(.showHideAdmin) .baseControl {
    margin-left: 32px;
}

.controlContainer:empty {
    display: none;
}
.controlContainer:empty {
    display: none;
}
.controlContainer ul {
    margin-top: var(--defaultMicroSpacing);
}
.controlContainer ul li {
    margin-top: var(--defaultMicroSpacing);
}

.checkboxBlock > .controlContainer {
    margin-top: 0;
}

.baseControl {
    margin-top: var(--defaultMicroSpacing);
    margin-bottom: 0;
    padding-top: 0;
    position: relative;
}

#customStats .panel-body {
    padding-top: var(--defaultMediumSpacing);
}

.notif > .baseControlHelp {
    padding-top: 16px;
}

.adminParamGroup {
    font-size: 14px;
    font-weight: 700;
}

.adminPropGroup {
    border: 1px var(--Grey7) solid;
    border-radius: 6px;
    padding: 0 12px 6px 12px;
    margin: 24px 12px 12px 0;
}

.adminPropGroup > h2 {
    position: relative;
    background-color: white;
    display: inline;
    top: -10px;
    padding: 0 6px;
    color: var(--Grey3);
    font-size: smaller;
}

.dialog-body {
    padding-top: 30px;
}

/* color of vertical resize drag bar  */

.ui-layout-resizer {
    background-color: #3c3c3c;
    position: absolute;
}

.ui-layout-pane-west {
    padding: 8px !important;
}

.divider {
    border-bottom-color: var(--Grey5) !important;
}

.ui-layout-west {
    padding: 0;
}

.ui-layout-center {
    padding: 5px;
    width: 100%;
}

/* GRID */

.slick-header-columns {
    background: url(../../js/vendor/slickgrid/images/header-columns-bg.gif) center bottom repeat-x;
    border-bottom: 1px solid silver;
}

.slick-header-column-active,
.slick-header-column:hover {
    background: url(../../js/vendor/slickgrid/images/header-columns-over-bg.gif) center bottom repeat-xvar(--White);
}

.slick-headerrow {
    background: var(--Grey9);
}

.slick-headerrow-column {
    background: var(--Grey9);
    border-bottom: 0;
    height: 100%;
}

.slick-row {
    position: absolute;
    background: var(--White);
    border: 0;
    line-height: 20px;
}

.slick-row.selected {
    z-index: 10;
    background: #dfe8f6;
}

.slick-cell {
    padding: 0 4px;
    text-overflow: unset;
}

.slick-group {
    border-bottom: 2px solid var(--Grey5);
}

.slick-group-toggle {
    width: 9px;
    height: 9px;
    margin-right: 5px;
}

#tooltip_panel .slick-row.even,
#tooltip_panel .slick-row.odd {
    background: inherit;
}

.tooltip_panel_close {
    position: absolute;
    top: 6px;
    right: 8px;
    cursor: pointer;
}

.slick-group-toggle.expanded {
    background: url(../../js/vendor/slickgrid/images/collapse.gif) center center no-repeat;
}

.slick-group-toggle.collapsed {
    background: url(../../js/vendor/slickgrid/images/expand.gif) center center no-repeat;
}

.multiLineFormatter {
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
}

.multiLineEditorContainer {
    z-index: 1999;
    position: absolute;
    background: var(--White);
    padding: 15px 2px 2px;
    border-radius: var(--largeBorderRadius);
    -moz-border-radius: var(--largeBorderRadius);
}

.multiLineEditor {
    background-color: var(--White);
    width: 250px;
    height: 80px;
    border: 0;
    outline: 0;
}

.multiLineEditorHelp {
    margin-top: -15px;
    color: var(--Text);
    border-bottom: 1px solid var(--Grey0);
}

.slick-group-totals {
    color: gray;
    background: var(--White);
}

.slick-cell.selected {
    background-color: var(--mx-hover-bg-color);
}

.slick-cell.active {
    border-color: gray;
    border-style: solid;
}

.slick-sortable-placeholder {
    background: silver !important;
}

.slick-row:nth-child(2n) {
    background: var(--Grey9);
}

.slick-row.ui-state-active {
    background: #f5f7d7;
}

.slick-row.loading {
    opacity: 0.5;
}

.slick-cell.invalid {
    border-color: red;
    -moz-animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    -moz-animation-name: slickgrid-invalid-hilite;
    -webkit-animation-name: slickgrid-invalid-hilite;
}

.slick_table_dropdown {
    border: none;
    width: 100%;
}

.slick_table_dropdown:focus {
    outline: 0;
}

.cellAskEdit {
    color: grey;
    width: 100%;
    text-align: right;
    display: block;
    font-weight: 400;
}

.autoCell {
    color: #a9a9a9;
    font-weight: 300;
    font-style: italic;
}

.autoCellEdit {
    font-weight: 300;
    font-style: italic;
}

.retweet-main {
    margin-right: 10px;
    color: grey;
}

.reviewAnnotations,
.reviewHistory {
    color: grey;
    font-weight: lighter;
    cursor: pointer;
    margin-left: 12px;
}

.annotator-wrapper .ft_steplist {
    max-width: 18cm;
}

.annotator-wrapper {
    text-align: center;
}

.annotator-flip {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-top: 0;
}

option:disabled {
    color: var(--Grey3);
    font-size: smaller;
}

@-moz-keyframes slickgrid-invalid-hilite {
    from {
        box-shadow: 0 0 6px red;
    }
    to {
        box-shadow: none;
    }
}

@-webkit-keyframes slickgrid-invalid-hilite {
    from {
        box-shadow: 0 0 6px red;
    }
    to {
        box-shadow: none;
    }
}

.spacer-left {
    margin-left: 8px;
    line-height: 14px;
}

.slick-cell.cell-move-handle {
    font-weight: 700;
    text-align: right;
    border-right: solid gray;
    background: #efefef;
    cursor: move;
}

.cell-move-handle:hover {
    background: #b6b9bd;
}

.editor-text {
    width: 100%;
}

.slick-row.selected .cell-move-handle {
    background: #d5dc8d;
}

.slick-column-name {
    display: inline-block;
    line-height: 16px !important;
}

.cell-reorder {
    cursor: move;
}

[class^="slickgrid_"],
[class^="slickgrid_"] div {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.slick-header-column {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
    -o-text-overflow: ellipsis !important;
    text-overflow: ellipsis !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 4px !important;
    border-right: 1px solid silver !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

span.warnNoEdit {
    padding-left: 20px;
    color: red;
}

div.warnNoEdit {
    padding-top: 6px;
}

.navbar-form {
    margin: 0;
}

p.navbar-left,
p.navbar-right {
    margin-bottom: 0 !important;
}

.navbarMiddle {
    margin-right: 10px !important;
}

.navbar-brand {
    padding-left: 8px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.brandLogo {
    margin: 4px;
    height: 50px;
    min-height: 50px;
}

.logo_company,
.logo_product {
    font-size: 22px;
    font-weight: 700;
    color: var(--Grey3);
}

#progressCtrlText {
    position: absolute;
    width: 400px;
}

.progressWarning {
    background-color: orange !important;
}

.progressCtrl {
    margin-top: 14px !important;
    margin-right: 10px !important;
    width: 400px;
    height: 20px;
    color: var(--White);
    text-align: center;
    border-radius: var(--smallBorderRadius);
}

.alignHorizontal {
    display: inline-block;
    margin: 6px;
}

.progressCtrl2 {
    margin: 10px !important;
    height: 20px;
    text-align: center;
    border-radius: var(--smallBorderRadius);
}

.drop-target-active {
    border: 2px dashed var(--Grey0);
    background-color: #d3d3d3 !important;
}

.saveDlg {
    z-index: 19999 !important;
}

.dlg-no-scroll {
    overflow: hidden !important;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.dlg-v-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-top: 4px !important;
}

.dlg-scroll {
    overflow-y: auto !important;
    overflow-x: auto !important;
    margin-top: 4px !important;
}

.dlgCreateMultiple {
    padding-left: 4px;
    padding-right: 12px;
    vertical-align: middle;
    font-weight: 400;
    position: relative;
    top: 2px;
}

.dlgCreateMultiple input {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.layoutContainer {
    height: 100%;
    margin-bottom: 0 !important;
}

.panel-body {
    padding: 0 16px;
}

.panel-body-v-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

#zen .panel-body-v-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    height: 100%;
    flex-direction: column;
}
#projectNameTitleContainer {
    left: 0;
    right: 0;
}

#projectNameTitle {
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    display: flex;
    gap: var(--defaultSmallSpacing);
    align-items: center;
    font-weight: 600;
}
#projectNameTitle .project-icon {
    position: unset;
}
#idProjectList span,
#idProjectList a {
    font-weight: 500;
}

#projectNameTitle img {
    max-height: 22px;
    margin-top: -4px;
    margin-right: 5px;
}

.avatar {
    z-index: 10;
    box-shadow: 0 0 0.1em 0.13em white;
}

.avatar:hover {
    z-index: 15;
}

.treeCtrl {
    margin: 9px 0px 4px 0;
}

.treeContent {
    float: left;
    overflow-y: hidden;
    padding: 0;
    width: 100%;
}

.toolbarTab i {
    color: #027e8e;
    background: var(--White);
    padding: 6px;
    border-radius: 100px;
    font-size: small !important;
}

#toolbar .toolbarTab i {
    margin-bottom: 10px;
}

.treeContent > ul:first-child > li:first-child {
    margin-top: 5px;
}

.notLatest > .fancytree-title > .refTitle {
    color: var(--Light-red) !important;
}

.listContent {
    bottom: 0;
    overflow-y: auto;
    padding: 10px 4px;
}

.searchMetaInfo {
    font-style: italic;
    color: grey;
}

.searchResultInfo {
    padding-top: var(--defaultMicroSpacing);
}

.searchResultWaiting {
    width: 100%;
    text-align: center;
}

.searchResultWaiting > span {
    padding: 4px;
}

.searchResultTabLink {
    color: var(--BlueLink) !important;
    cursor: pointer;
}

.quickLink {
    cursor: pointer;
    text-decoration: underline;
    font-weight: 100;
}

.listSelect {
    margin-right: 8px !important;
}

#projectTree,
.itemSelectionContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: var(--defaultSmallSpacing);
}
.itemSelectionContainer {
    height: 100%;
}

#selectTree {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#selectTree .treeLabel {
    display: none !important;
}
#selectTree .itemFilterTool {
    display: none;
}

ul.fancytree-container {
    padding-top: 5px;
    border: 0 !important;
    overflow-x: hidden !important ; /* user should resize...*/
    background: #f3f6fa;
}

.ui-dialog .fancytree-container {
    background: white;
}

.greyTitle {
    color: var(--Grey3) !important;
}

.greyRefIdHyper {
    color: var(--Grey3) !important;
    cursor: pointer;
}

.ui-widget-content a {
    color: #00f;
}

.TitleSpecial {
    padding-left: 6px;
    font-weight: 400;
    font-style: italic;
}

.btn-space {
    margin-right: 12px;
}

.btn-deleteRef {
    margin-bottom: 2px;
    margin-left: 10px;
    padding: 2px 4px 1px 2px;
    cursor: pointer;
}

.popover {
    /* make sure that popovers are not cut by divs, dilaogs ect */
    z-index: 9999 !important;
    position: fixed !important;
    container: body !important;
}

.selectize-input {
    width: 18cm;
    padding: 8px 32px 8px 16px; /* adding more right padding to accommodate select's arrow */
}

#selectItemDlg .selectize-input {
    width: 100%;
}

textarea[readonly] {
    background-color: transparent !important;
}

.wysiwygResize {
    background-color: var(--White);
    border-collapse: separate;
    border: 1px solid var(--Grey5);
    padding-bottom: 10px;
    padding-right: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    box-sizing: content-box;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
    box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
    width: 920px;
    height: 100px;
    outline: 0;
    overflow: hidden;
    border-radius: var(--smallBorderRadius);
}

.wysiwygFill {
    background-color: var(--White);
    border-collapse: separate;
    border: 1px solid var(--Grey5);
    padding-bottom: 10px;
    padding-right: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    box-sizing: content-box;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
    box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
    width: 100%;
    height: 100%;
    outline: 0;
    overflow: hidden;
    border-radius: var(--smallBorderRadius);
}

div[data-role="editor-toolbar"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.wysiwygVoiceBtn {
    padding: 4px !important;
    margin: 4px !important;
    z-index: 1000;
    width: 20px;
    color: transparent !important;
    background-color: transparent !important;
    transform: scale(2, 2) !important;
    -webkit-transform: scale(2, 2) !important;
    -moz-transform: scale(2, 2) !important;
    border: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

#tokenUser .selectize-input {
    width: 100%;
}

#to_user {
    padding-left: 0;
}

#to_user .baseControl {
    margin-top: 0;
}

#to_user .baseControlHelp {
    display: none;
}

.adminHelp {
    font-style: italic;
}

#branchContentTab,
#cloneContentTab {
    padding: 20px 0 0 20px;
    max-width: 800px;
}

.adminEdit {
    background-color: var(--Grey9);
    margin: 4px;
    padding: 6px;
    border: 1px solid #51a351;
    -webkit-border-radius: var(--smallBorderRadius);
    -moz-border-radius: var(--smallBorderRadius);
    border-radius: var(--smallBorderRadius);
}

.adminTool {
    background-color: #51a351;
    font-size: 16px;
    font-weight: 700;
    padding: 2px 6px;
    margin-bottom: 12px;
    border: 1px solid #51a351;
    -webkit-border-radius: var(--smallBorderRadius);
    -moz-border-radius: var(--smallBorderRadius);
    border-radius: var(--smallBorderRadius);
}

.adminEdit .baseControlHelp {
    color: #51a351;
}

.adminWordDownload {
    padding: 8px;
}

#userRolesAdmin {
    position: absolute;
    right: 0;
    margin: 0;
    padding: 4px;
}
#userPref {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.userGuide {
    position: absolute;
    font-size: 40px;
    z-index: 3000;
    color: orange;
    cursor: pointer;
}

.blink {
    animation: 1s steps(5, start) infinite blink-animation;
    -webkit-animation: 1s steps(5, start) infinite blink-animation;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

#userGuideHelp {
    z-index: 3001;
    background: orange;
    border-radius: var(--defaultBorderRadius);
    padding: 30px;
    position: absolute;
}

.admin-tab {
    padding: 20px;
    background-color: var(--White);
    border: 1px solid var(--Grey6);
    border-top-color: transparent;
}

.admin-tab td {
    padding-right: 10px;
}

.adminrightcol {
    width: 70px;
    text-align: center;
}

.adminleftcol {
    font-weight: 700;
}

.disableSelectize {
    background-color: grey;
    position: absolute;
    top: 0;
    height: 34px;
    left: 0;
    width: 680px;
    z-index: 20000;
    opacity: 0.1;
}

#userRolesAdmin td {
    padding-right: 20px;
}

.rt_resizer {
    width: 50px;
    height: 10px;
    cursor: ns-resize;
    margin-left: calc(9cm - 25px);
    padding: 4px;
}

.rt_resizer_handle {
    background-color: var(--Grey5);
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 5px var(--Grey5);
}

/* make sure toolbar of richtext editor, second row formats more nicely...*/

.btn-group {
    margin-right: 5px;
}

.compactBtn {
    padding: 3px 6px;
}
.filter-clear-x {
    width: 13px;
    height: 13px;
    opacity: 0.6;
    z-index: 100;
    margin-top: -25px;
    float: right;
    margin-right: 8px;
    display: none;
}
/*only display when the input has text*/
.mrqlSearchInputContainer:has(input.form-control.searchNoX:not(:placeholder-shown)) .filter-clear-x {
    display: block;
}

.mrqlSearchIcon {
    display: block;
    width: 13px;
    height: 13px;
    opacity: 0.6;
    z-index: 100;
    margin-top: -27px;
    float: left;
    margin-left: 8px;
}
.mrqlSearchInputContainer {
    flex-shrink: 1;
    flex-grow: 1;
    min-width: 100px;
}
.itemFilterTool {
    display: none;
}
.itemFilterToolContainer {
    display: flex;
    justify-content: flex-end;
    padding-right: var(--defaultMicroSpacing);
}

.filter-clear-xin {
    display: inline;
    opacity: 0.6;
    z-index: 100;
    vertical-align: middle;
    top: 50%;
    right: 10px;
    margin-left: -20px;
}
.btn-sssearch {
    padding: 6px 0 6px 8px;
    width: 29px;
    border: 1px solid var(--Grey5);
    border-left: 0;
    border-right: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}
#currentFilterContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-shrink: 2;
    gap: 8px;
}

#currentFilterContainer:not(:empty) {
    margin: var(--defaultSmallSpacing) 0;
}

.btn-ssearch {
    width: 21px;
    padding-left: 4px;
    border: 1px solid var(--Grey5);
    border-left: 0;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
}

.search-list-node {
    border-radius: var(--smallBorderRadius);
    padding: 4px 4px;
    cursor: pointer;
}

.search-list-node-selected,
.search-list-node:hover {
    background-color: var(--mx-hover-bg-color);
}

.search-list-node-selected {
    color: var(--Accent);
}

#itemSelectionLabelDashboard,
#itemSelectionTRACE {
    padding-top: 4px;
}

.ui-dialog #itemSelectionLabelDashboard,
.ui-dialog #itemSelectionTRACE {
    padding-top: 0px;
    padding-right: 16px;
}

.btn-stree {
    border-right: 0;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
}

#globalProjectFilter {
    padding-right: 8px;
    position: relative;
    display: flex;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#globalProjectExplanation {
    margin: 30px auto 0 auto;
    text-align: center;
    background-color: #f9fafb;
    border-radius: 4px;
    border: 1px solid var(--Used-for-strokes-and-furniture, #d9d9d9);
    padding: 8px;
    width: 70%;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    line-height: 150%;
}

.filterGroupDD {
    text-align: right;
    margin: 4px;
}

.xmlRender {
    width: 100%;
    height: 50px;
}

.labelIsMenu {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.labelMenuEntry > a {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.labelMenuIcon {
    margin-right: 2px;
    width: 22px;
    padding: 4px;
    border-radius: var(--smallBorderRadius);
}

input[type="color"] {
    cursor: pointer;
    padding: 0 6px;
    max-width: 150px;
}

.borderless td,
.borderless th {
    border: none !important;
}

/*report*/

h1 {
    font-size: 20px;
    box-sizing: content-box;
}

h2 {
    font-size: 16px;
    box-sizing: content-box;
}

h3 {
    font-size: 12px;
}

.inputSelectionGroup {
    margin-bottom: 8px;
}

.a4fullwidth {
    width: 18cm;
}

.a4landscape {
    width: 27cm;
}

.fullscreen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1200 !important;
    width: 100%;
    display: block;
    background-color: var(--White);
}

.fullscreenWrapper {
    overflow: auto;
    padding-top: 50px;
    height: 100%;
}

.fullscreenContent {
    margin: auto;
    height: 100%;
}

.fullscreenButton {
    margin-left: -32px;
    float: right;
}

.fullscreenEditor {
    width: 100%;
    height: 100% !important;
    padding-bottom: 50px;
}

.CodeMirror {
    height: 60px;
    border: 1px solid var(--Text);
    -webkit-border-radius: var(--smallBorderRadius);
    -moz-border-radius: var(--smallBorderRadius);
    border-radius: var(--smallBorderRadius);
}

code {
    white-space: normal;
}

.loginError {
    color: red;
}

#loginError {
    text-align: center;
    line-height: 40px;
    display: block;
    width: 100%;
}

#main,
#widgetDashboard {
    padding: 0;
    flex-grow: 1;
    flex-shrink: 1;
}
#sidebar {
    overflow-y: hidden;
    min-width: 200px;
    max-width: 40%;
    background: #f3f6fa;
    flex-shrink: 0;
}
#savedSearches {
    overflow-y: auto;
    max-height: 70vh;
}
#appPopup #savedSearches {
    max-height: 300px;
}

#savedSearches li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#dragbar {
    height: 100%;
    float: right;
    width: 5px;
    cursor: col-resize;
    flex-shrink: 0;
}

#codeDrag {
    height: 100%;
    width: 5px;
    cursor: col-resize;
    background-color: var(--Grey6);
    width: 4px;
}

.btn-item,
.btn-item-large {
    -webkit-writing-mode: horizontal-tb;
    align-items: flex-start;
    background-color: transparent;
    box-sizing: border-box;
    color: var(--Text);
    cursor: pointer;
    display: block;
    float: left;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    height: 30px;
    letter-spacing: normal;
    line-height: 20px;
    position: relative;
    text-align: center;
    text-indent: 0;
    text-shadow: rgba(255, 255, 255, 0.74902) 0 1px 1px;
    text-transform: none;
    vertical-align: middle;
    visibility: visible;
    white-space: nowrap;
    width: 40px;
    word-spacing: 0;
    margin: 0;
    padding: 4px 6px !important;
    border-radius: var(--defaultBorderRadius) !important;
}

.btn-item-large {
    width: unset;
}
.btn-item:hover,
.btn-item-large:hover {
    box-shadow: var(--defaultCardShadow);
    background-color: var(--Accent-Dark);
    color: var(--White);
    text-shadow: none;
}
.btn-item:focus,
.btn-item-large:focus {
    color: var(--Accent-Dark);
    box-shadow: var(--defaultCardShadow);
    background-color: var(--White);
    border: none;
    outline: none;
}
.refMissing {
    color: var(--Light-red);
}
.btn-item:hover .refMissing {
    color: unset;
}
.btn-item:focus:hover .refMissing {
    color: var(--Light-red);
}
.btn:active {
    box-shadow: var(--defaultCardShadow);
}

.ui-dialog-titlebar .btn-dashboard-fullscreen {
    display: none;
}
.ui-dialog-titlebar .toolbarButtons {
    position: absolute;
    right: 30px;
    top: 4px;
}
.embeddedReport {
    height: 100%;
    width: 100%;
}

.selectize-dropdown {
    z-index: 9999;
}

.mappingTable {
    width: 100%;
    margin-bottom: 12px;
}

.note-editable {
    overflow: auto !important;
}

.note-toolbar > .btn-group > .btn-small {
    padding: 4px 8px;
}
.rowFlex,
.rowFlexNoGap,
.rowFlexBaseLine {
    display: flex;
    flex-wrap: wrap;
}
.rowFlexBaseLine {
    align-items: baseline;
}

.rowFlexNoWrapNoGap {
    display: flex;
    flex-wrap: nowrap;
}

.rowFlex,
.rowFlexBaseLine {
    gap: var(--defaultSmallSpacing);
}

.tinyA4Marker {
    position: relative !important;
    width: 2px !important;
    height: 100% !important;
    background-color: var(--Grey3) !important;
}

.tinyA4P {
    left: 18cm !important;
}

.tinyA4L {
    left: 26cm !important;
}

.tox-tinymce {
    border-radius: var(--defaultBorderRadius) !important;
}

.tinyError {
    background-color: red !important;
    color: var(--White) !important;
    width: 100% !important;
    padding-left: 12px !important;
    margin-top: 8px;
    border-radius: var(--defaultBorderRadius);
}

.tox-button {
    border: 1px solid var(--Accent) !important;
    background: var(--Accent) !important;
    font-weight: 400 !important;
    color: var(--Grey9) !important;
}
.tox-dialog__footer-end .tox-button {
    min-width: 100px;
}
.tox-dialog {
    padding: 0.2em !important;
}
.tox-dialog__title {
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 0.4em 1em !important;
    border-radius: var(--defaultBorderRadius);
}

.tox-dialog__header {
    border: 1px solid #ddd !important;
    background: #e9e9e9 !important;
    color: #333 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: var(--defaultBorderRadius);
}

.tox-button--secondary,
.tox-dialog__footer-end .tox-button[title="No"] {
    border: 1px solid #c5c5c5 !important;
    background: #f6f6f6 !important;
    font-weight: 400 !important;
    color: var(--Grey1) !important;
    order: 2;
}

.tox-button--icon {
    background: #f6f6f6 !important;
    border: 1px solid #c5c5c5 !important;
    color: var(--Grey1) !important;
}
.tox-dialog__header .tox-button--naked {
    background: 0 !important;
    border: 0 !important;
    color: var(--Grey1) !important;
}
.tox .tox-collection__item {
    color: var(--Text) !important;
}
.tox .tox-collection--list .tox-collection__item {
    padding: 2px 8px !important;
}

.tox-dialog__footer-end {
    display: flex !important   ;
}

.tox .tox-selectfield select,
.tox .tox-textarea,
.tox .tox-textfield,
.tox .tox-toolbar-textfield {
    border-radius: var(--defaultBorderRadius) !important;
}

.tox-menu {
    z-index: 2150 !important;
}

.tox-dialog {
    z-index: 2102 !important;
}

.tox-dialog-wrap__backdrop {
    z-index: 2101 !important;
}

.tox-silver-sink {
    z-index: 2300 !important;
}

.note-editor {
    width: 18cm;
}

.note-toolbar-dummy,
.tox-menubar-hide {
    height: 8px !important;
    background-color: var(--Grey8) !important;
    border-bottom: 1px solid var(--Grey6) !important;
    pointer-events: none;
}

.tox-statusbar__text-container-hide,
.tox-toolbar-hide {
    display: none !important;
}

.note-toolbar-imagesrc {
    display: none;
    height: 32px;
    background-color: #ff4d4d;
    color: var(--White);
    padding: 6px;
}

.note-toolbar {
    padding-bottom: 1px !important;
}

.resizableControl {
    width: 18cm;
}

.dateSelect,
.fixedControl {
    width: 18cm;
    resize: none;
}

/* 1.0 */

.plainEditor {
    width: 854px;
    height: 104px;
}

.rowEditor {
    width: 854px;
    resize: none;
}

#tooltip_panel {
    z-index: 5000;
    width: 800px;
    right: 0;
    height: 300px;
    padding: 10px;
    background: white;
    margin-top: -500px;
    position: absolute;
    top: 0;
    color: var(--Grey0);
    box-shadow: 4px 2px 4px #777;
    border: solid 2px #888;
    padding-right: 20px;
}

.alert_message {
    z-index: 10000;
    width: 400px;
    min-height: 50px;
    padding: 8px;
    margin-top: -86px;
    position: relative;
}
.alert_message hr {
    margin: 5px 0;
}

@media (max-width: 500px) {
    .alert_message {
        width: 100%;
    }
}

#message_conf_label {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#message_conf_label > div {
    margin-top: 20px;
}
#message_conf_label > div > button {
    float: right;
}

.message_container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8000;
    height: 1px;
}

.message_container-block {
    z-index: 8000;
    height: 100%;
    display: none;
}

.msgHeader {
    text-align: center;
    font-size: larger;
    font-weight: 700;
}

.msgBody {
    text-align: left;
}

.headerSortUp,
.tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
    background-repeat: no-repeat;
    background-position: center right;
}

.headerSortDown,
.tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
    background-repeat: no-repeat;
    background-position: center right;
}

.tablesorter-header {
    background-repeat: no-repeat;
    background-position: center right;
    padding: 4px 18px 4px 4px !important;
    white-space: normal;
    cursor: pointer;
}

.table-help > td {
    padding: 4px;
}

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    opacity: 0;
    outline: 0;
    background: var(--White);
    cursor: inherit;
    display: block;
}

.highLink,
.rexlink {
    color: var(--Accent) !important;
    cursor: pointer;
    white-space: nowrap;
}

.multiLineFormatter .highLink {
    white-space: break-spaces;
}

.deadlink {
    color: var(--RedPersimmon) !important;
    cursor: not-allowed;
    white-space: nowrap;
    text-decoration: wavy !important;
}

dead_highlight .doclink {
    padding: 0 12px;
}

.nolinks {
    color: var(--Grey4);
}

ul.checklistOK {
    list-style-type: none;
}

ul.checklistOK li:before {
    content: "\2713\0020";
}

.tooltip {
    position: absolute;
    z-index: 2030;
    display: block;
    visibility: visible;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
}

#selectCommentDD {
    margin-top: 10px;
    margin-left: 14px;
    width: 100%;
}

#recentCommentChange,
#recentCommentLog {
    max-height: 280px;
    overflow-y: auto;
}

.maxbutton {
    margin-right: 6px;
}

.recentCommentWorkflow {
    float: right;
    padding-bottom: 8px;
}

.commentWorkflow {
    margin: 0 10px 4px 0;
    float: right;
    padding: 0 10px;
    cursor: pointer;
    border: 1px solid var(--Grey5);
    border-radius: var(--defaultBorderRadius);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    height: 20px;
}

.recentCommentButton .btn-link {
    color: var(--Grey4);
    text-decoration: underline;
}
textarea {
    box-sizing: border-box;
    border: 1px solid var(--Grey5);
    border-radius: var(--defaultBorderRadius);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    padding: var(--defaultSmallSpacing);
}
#commentDlgText {
    margin: 0 !important;
    padding: 6px;
    resize: none;
    width: 100%;
    height: 200px;
}
#dialog_comment_text {
    resize: vertical;
    min-height: 100px;
}

.commentSelectTop {
    float: right;
}

.sectionConfOption {
    margin: 6px 0;
}

.searchNoX::-ms-clear {
    display: none;
}

a {
    cursor: pointer;
    color: var(--Accent);
}

/* *******************
    admin client
 *********************
*/

.adminLogoContainer {
    width: 310px;
    height: 60px;
    margin: 20px;
    position: relative;
    padding: 2px;
    border: dashed 1px var(--Grey4);
}

adminIconContainer {
    width: 310px;
    height: 50px;
    margin: 20px;
    position: relative;
    background-color: transparent;
}

.adminLogo {
    position: absolute;
    top: 0;
    left: 0;
}

.admin_utdl {
    padding: 4px 4px 4px 20px;
    width: 32%;
}

.admin_utdr {
    padding: 4px 0;
}

.admin_udrop {
    width: 140px !important;
    height: 34px !important;
}

.admin_udrop_text {
    float: left;
    line-height: 34px;
    margin-right: 8px;
}

.admin_utime {
    width: 220px !important;
    height: 34px !important;
    display: inline;
    margin-right: 10px;
}

.userlist_header th {
    padding: 4px;
    background-color: #f5f5f5;
}

.ua_hover {
    background-color: #f5f5f5;
}

.ua_hoverbold {
    font-weight: 700;
}

.ua_who {
    background: rgba(0, 0, 0, 0.8);
    border-radius: var(--defaultBorderRadius);
    color: var(--White);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
}

.ua_level {
    border: 1px solid var(--Grey5);
    padding: 5px 9px;
    cursor: pointer;
    min-width: 35px;
    min-height: 32px;
    max-width: 35px;
    width: 35px;
}

.ua_levelAll {
    border: 1px solid var(--Grey5);
    padding: 5px 8px;
    min-width: 33px;
    cursor: pointer;
    min-height: 32px;
}

.ua_user,
.ua_userAll {
    border-bottom: 1px solid var(--Grey5);
    border-top: 1px solid var(--Grey5);
    padding: 5px 10px;
    font-weight: 500;
    min-height: 32px;
}

/* Dropdown Content (Hidden by Default) */

.ua_dropdown_content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown */

.ua_dropdown_content a {
    color: var(--Grey1);
    padding: 6px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */

.ua_dropdown_content a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.ua_show {
    display: block;
}

th.rotate {
    /* Something you can count on */
    height: 140px;
    white-space: nowrap;
    min-width: 35px;
    max-width: 35px;
    width: 35px;
}

th.rotate > div {
    transform: translate(20px, 51px) rotate(315deg);
    /* Magic Numbers */
    /* 45 is really 360 - 45 */
    width: 30px;
    min-width: 174px;
    transform-origin: left;
    white-space: normal;
}

.filterProject__header {
    border-bottom: 1px solid var(--Grey5);
    padding: 4px 5px;
    padding-bottom: 3px; /* visually compensating for border-bottom */
    font-weight: 400;
    font-size: small;
    min-width: 150px;
    max-width: 150px;
    width: 150px;
    display: flex;
    align-items: center;
}

.filterProject__header .project-icon {
    margin-right: 5px;
}

.lbox {
    padding-left: 6px;
    border: 1px solid var(--Grey5);
}

.itemEditor,
.itemViewer {
    margin-top: -6px;
    display: inline-block;
}

.itemViewer canvas,
.itemViewer div {
    border: 1px solid transparent;
    margin: 0 1px;
}

.itemEditor canvas,
.itemEditor div {
    animation: 3s infinite glowing;
    margin: 0 1px;
}

@keyframes glowing {
    0%,
    100% {
        box-shadow: 0 0 5px red;
    }
    40%,
    60% {
        box-shadow: 0 0 12px red;
    }
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.no-decoration,
.no-decoration:active,
.no-decoration:hover {
    text-decoration: none !important;
}

#idProject i {
    line-height: 30px;
    font-size: 20px;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.userAccessHeader {
    white-space: nowrap;
}

.userSelect {
    width: 18cm;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.userSelectAdmin {
    display: inline-block;
}

.groupFlag {
    font-size: smaller;
    color: var(--White);
    border: 1px solid var(--Grey5);
    border-radius: var(--defaultBorderRadius);
    padding: 2px;
    background-color: var(--Grey5);
    margin-right: 6px;
}

#inputUser,
#ud_login {
    text-transform: lowercase;
}

.ui-widget {
    font-size: 14px !important;
    font-family: Poppins, arial, sans-serif !important;
}

.uploadTable {
    width: 18cm;
}

.historyComment {
    padding-left: 24px;
    font-size: smaller;
    word-wrap: break-word;
    padding-right: 150px;
}

.itemSelectionList {
    padding-right: 8px;
    line-height: 32px;
}

.calendar-wrapper {
    overflow: hidden;
}

.change-result {
    display: inherit;
    padding: 0 10px 10px 10px;
    height: 100%;
    overflow-y: auto;
}

.change-calendar {
    overflow-y: auto;
    height: 100%;
    float: left;
    padding: 10px;
    min-width: 240px;
}

.change-month {
    text-align: center;
    background-color: var(--LogoDarkGreen);
    color: var(--White);
}

.change-panel {
    padding: 2px;
    bottom: 0;
    position: absolute;
    top: 40px;
}

.ddmenubtndrop {
    margin-left: 10px !important;
}

.juidd {
    margin-top: 6px !important;
    margin-right: 8px !important;
}

.lineInput {
    width: 18cm;
    background-color: transparent !important;
}

.datepickText {
    cursor: pointer !important;
}

.errorControl {
    padding: 12px;
}

.buttonCTA {
    color: red;
    border: solid 1px red;
    border-radius: var(--defaultBorderRadius);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    padding: 1px 12px;
    cursor: pointer;
    font-size: 12px;
}

#appPopup .buttonCTA {
    position: absolute;
    top: 10px;
    right: 10px;
}

.toolbarButtons {
    margin-top: 0px;
    display: flex;
    justify-content: space-between;
}
.toolbarButtons button {
    margin: 0px 10px;
}

.signature {
    max-height: 1cm;
    max-width: 7cm;
}

.needsSignature {
    color: red;
}

.approvedBy {
    padding-bottom: 6px;
}

.jira-description {
    padding-bottom: 90px;
    height: 100%;
    margin-top: 10px;
}

.jiraCreator {
    color: grey;
}

.jira-textarea {
    width: 100%;
    height: 100%;
    resize: none;
    padding: 6px;
}
.tinylinkc {
    width: 180px;
}
.icon-refresh-animate {
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: rotateThis;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotateThis {
    from {
        transform: scale(1) rotate(0);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}

.refresh-animate {
    -animation: spin 0.7s infinite linear;
    -webkit-animation: 0.7s linear infinite spin2;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

#jira-container {
    display: none;
    position: absolute;
    z-index: 2000;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    -webkit-box-shadow: 8px 8px 8px 4px #303eff;
    box-shadow: 8px 8px 8px 4px #3b73af;
    background-color: var(--White);
    padding: 0;
    border: 1px solid #3b73af;
}

.aui-header {
    background-color: #205081;
}

.aui-header h2 {
    margin: 0;
    padding: 6px;
}

.mod-header {
    font-weight: 700;
}

.toggle-wrap {
    padding: 6px;
}

.itemChromeExt {
    box-sizing: border-box;
    clear: left;
    display: list-item;
    float: left;
    height: 23.9930553436279px;
    line-height: 22.2222232818604px;
    position: relative;
    text-align: left;
    width: 350px;
    margin: 1px 0 0;
    padding: 0;
}

.property-list.two-cols:after,
.property-list.two-cols:before {
    content: " ";
    display: table;
}

.property-list.two-cols:after {
    clear: both;
}

.item-right {
    clear: right;
    float: right;
}

.two-cols {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.labelTools {
    display: inline-flex;
    flex-wrap: wrap;
    row-gap: 8px;
}

.labelTools .btn,
.btnline .btn {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: solid 1px var(--Grey5);
    padding: 2px 8px;
    display: block;
    height: 24px;
    border-radius: 5px;
    align-items: center;
    gap: 4px;
    justify-content: space-around;
}

.contextFramePreview .labelTools .btn[disabled] {
    opacity: 1;
}
.chip {
    gap: 8px;
}

.chip .btn {
    display: block;
    height: 24px;
    line-height: 20px;
    padding: 0px 8px;
    padding-right: 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 1;
    border-radius: 20px !important;
    text-align: center;
    /* Body Text/Poppins/14/Regular */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: nowrap;
}
.chip .btn[disabled] {
    opacity: 1 !important;
    align-items: center;
    min-width: unset;
}
.chip button a {
    margin-left: 0px;
    cursor: pointer;
    float: right;
    font-size: 10px;
    position: absolute;
    right: 10px;
    top: 6px;
    color: unset;
}

.chip .btn[disabled]:hover {
    cursor: unset;
}

.btn-group.labelTools:empty {
    display: none;
}

.labelBar {
    padding: 0 4px;
    display: flex;
}

.crossProjectLink {
    color: #07a717 !important;
    font-weight: 700 !important;
}

.smarttext-tooltip-arrow {
    color: #dfe8f6 !important;
}

.smarttext-tooltip-inner {
    background-color: #dfe8f6 !important;
    text-align: left !important;
    color: var(--Grey1) !important;
    opacity: 1 !important;
}

.stsm {
    max-height: 150px;
    overflow-x: auto;
}

.deleteSmartText {
    visibility: visible !important;
    color: var(--Grey4) !important;
    position: absolute;
    right: 20px;
    float: none;
    top: 8px;
}

.editSmartText {
    visibility: visible !important;
    color: var(--Grey4) !important;
    position: absolute;
    right: 40px;
    float: none;
    top: 8px;
}

.selectSmartText {
    position: relative;
    padding-right: 60px;
}

.selectSmartTextGroup {
    display: block;
    clear: both;
    font-weight: 400;
    line-height: 1.428571429;
    color: var(--Text);
    white-space: nowrap;
    cursor: pointer;
}

.selectSmartTextGroup:hover {
    background-color: #f5f5f5 !important;
    color: var(--Grey0) !important;
}

.simpleInput {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: var(--Text);
    vertical-align: middle;
    background-color: var(--White);
    background-image: none;
    border: 1px solid var(--Grey5);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    margin-right: 10px;
}

.datedLink {
    color: orange;
    margin-left: 16px;
}

.versionpane {
    float: left;
    max-width: 18cm;
    min-width: 18cm;
    border: 1px solid var(--Grey5);
    border-radius: var(--smallBorderRadius);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    margin-right: 4px;
    padding: 8px;
}

#tellToSelect {
    padding: 4px;
    height: 200px;
    width: 140px;
    text-align: center;
    vertical-align: middle;
    font-size: large;
    border: 1px solid var(--Grey5);
    border-radius: var(--smallBorderRadius);
    display: flex;
    align-items: center;
}

.changedField {
    color: red !important;
}

.changedField::before {
    content: "\27A1";
}

.staleItem {
    color: red !important;
}

.itemTitle > a:hover {
    text-decoration: none !important;
}

.lockedItem {
    font-size: smaller;
    padding-left: 10px;
    color: red;
}

.hqlu {
    padding-left: 6px;
    color: var(--Grey1) !important;
    font-weight: 700;
}

.hqlc {
    color: var(--Grey1) !important;
    font-weight: normal;
    word-break: break-all;
}

.hqld {
    white-space: nowrap;
    margin: 0px 5px;
    font-style: italic;
    text-decoration: underline;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    z-index: -1;
    top: initial;
    left: auto;
    right: 100%;
    margin-top: -26px;
    -webkit-border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px;
    border-radius: 0 5px 5px;
}

.dropdown-submenu > a:hover:after {
    color: var(--White);
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu:hover > .dropdown-menu:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: default;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    margin-left: -18px;
    content: "\f053";
    font-family: var(--FontAwesome);
}

.selectize-control.single .selectize-input:after,
.selectize-control.multi .selectize-input:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 24px;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: #333333 transparent transparent transparent;
    content: "\f078";
    font-family: var(--FontAwesome);
}
.selectize-control.single .selectize-input.dropdown-active:after,
.selectize-control.multi .selectize-input.dropdown-active:after {
    margin-top: -8px;
    border-width: 0;
    content: "\f077";
    border-color: transparent transparent #333333 transparent;
}

.dropdown-submenu:hover > a:after {
    border-color: transparent white transparent transparent;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 5px 0 5px 5px;
    -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
}

.dropdown-menu a {
    cursor: pointer;
}

.dropdown-menu {
    z-index: 2000; /* otherwise navar is on top of it...*/
    padding: 16px 0;
    overflow-y: auto;
    max-height: 75vh;
}

.sharemenu {
    max-width: 400px;
    overflow-y: initial;
}

/* we have to exclude .dropdown-submenu because the sub-menu's arrow is rendered within the li's child */
.sharemenu li:not(.dropdown-submenu) > * {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mainHelpBtnMenu > li,
#mainUserMenu > li {
    padding: 0;
}

.dropdown-menu > li > a,
.dropdown-menu-main span,
.dropdown-menu-main .dropdown-menu-main-button {
    color: var(--Text);
    line-height: 125%;
    font-size: 14px;
    font-weight: 400;
    padding: 0px;
}

#mainHelpBtnMenu > li > a,
#mainUserMenu > li > a,
.dropdown-menu-main .dropdown-menu-main-button {
    padding: 8px 40px 8px 32px;
    display: block;
    width: 100%;
    text-align: left;
}

.dropdown-menu > li.deleteMenu {
    color: var(--Light-red);
}
dropdown-menu > li.deleteMenu:hover {
    color: unset;
}

dropdown-menu > li.deleteMenu:hover {
    color: unset;
}

.newSectionType .baseControl {
    margin-top: 0;
}
.dropdown-menu-main span:hover,
.dropdown-menu-main-button:hover {
    color: var(--Accent);
}

.selectize-dropdown-content {
    padding: 16px 0;
}

.noPointer {
    cursor: default !important;
}

.docOptionSelect {
    margin: 10px 0 !important;
    width: 100% !important;
}

.selectedIssue {
    background-color: #90ee90 !important;
}

.moreIssues {
    padding-top: 10px;
    color: grey;
}

#jiraResults {
    margin-top: 10px;
    padding: 6px;
    border: 1px solid var(--Grey5);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: var(--defaultBorderRadius);
}

.waitscreenmessage {
    padding-left: 8px;
}

.detailsReadOuter {
    margin: 6px 6px 12px 20px;
    padding: 6px;
    border: 1px solid var(--Grey5);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: var(--defaultBorderRadius);
}

.plusctrl {
    cursor: pointer;
    float: left;
    padding-right: 10px;
}

.note-editable .showMore,
.showMore {
    color: #00f;
    cursor: pointer;
}

.note-control-selection-bg {
    z-index: 2;
}

.code {
    font-family: "Courier New", monospace;
    white-space: pre;
    margin: 0 0 10px;
    padding: 6px;
    border: 1px solid var(--Grey5);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: var(--defaultBorderRadius);
    background-color: #f5f5f5;
    font-size: 13px;
    line-height: 1.428571429;
    word-break: break-all;
    word-wrap: break-word;
    color: var(--Text);
}

.spinningWait {
    display: block;
    padding: 20px;
}
.inlineHelpConfig {
    clear: both;
}

.baseControlHelp {
    font-size: 16px;
    font-weight: 600;
    color: var(--Text);
    left: 0 !important;
    text-transform: capitalize;
    line-height: 100%;
    display: inline-block;
}

.contentNeeded,
.refreshNeeded {
    color: var(--Light-red);
}

.contentUnsaved {
    color: var(--Grey3);
}

.baseControl > span {
    display: inline-block;
}

.inlineHelp {
    text-transform: none;
    font-weight: 200;
    font-size: 14px;
    line-height: 1;
    margin-top: var(--defaultMicroSpacing);
}

.cbInlineHelp {
    padding-left: 24px;
    font-size: 12px;
    color: var(--Grey4);
}

#projectTree .input-group-addon {
    padding: 11px 11px 6px 13px;
}

#appPopup .input-group-addon {
    padding: 11px 11px 7px 13px;
}

.ddAlignBottom {
    margin-bottom: 0 !important;
}

.ticket-list {
    list-style: none;
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}

.ticket-icon {
    padding-right: 24px;
    display: inline-block;
    width: 24px;
}

.ticket-icon-jira {
    padding-right: 8px;
    display: inline-block;
}

.ticket-icon-icon {
    width: 16px;
}

.taskDisplay {
    display: flex;
}

.taskStatus {
    background: white;
    font-size: 10px;
    color: var(--Grey3);
    padding: 4px;
    margin-left: 10px;
    border: solid 1px var(--Grey3);
    border-radius: var(--defaultBorderRadius);
    white-space: nowrap;
}
#TEOTable .taskStatus {
    padding: 2px;
    font-size: 7px;
}
.ticket-id {
    padding-left: 4px;
    color: var(--BlueLink) !important;
    cursor: pointer;
    width: 180px;
}

.tinylinkc .ticket-id {
    width: unset !important;
}

.taskDisplayContainer .ticket-id {
    width: unset !important;
    margin-right: 6px;
}

.ticket-edit,
.ticket-name,
.ticket-title,
.ticket-unlink {
    padding-right: 6px;
    padding-left: 6px;
}

.ticket-title {
}

.ticket-title-full {
    width: 100%;
}

#contextframe {
    overflow: auto;
}

#contextframe .itemTitle,
#zen .itemTitle,
[role="dialog"] .itemTitle,
.reviewDetails .itemTitle,
#accordion .itemTitle {
    font-size: 18px;
    gap: 4px;
}

#contextframesizer {
    width: 5px;
    cursor: col-resize;
    flex-shrink: 0;
    /* box-shadow: -2px 0px 2px 0px var(--Grey4); */
}
.treeLabel {
    display: none !important;
    margin: 16px 0px 8px 0px;
}

.contextClose {
    position: absolute;
    top: 20px;
    right: 0px;
    cursor: pointer;
    z-index: 10;
    display: block;
    width: 20px;
    height: 20px;
    background: var(--Grey5);
    padding-left: 2px;
    /* box-shadow: -2px 0px 2px 0px var(--Grey4); */
}

.contextCloseY {
    position: absolute;
    top: 5px;
    right: 4px;
    cursor: pointer;
    z-index: 10;
    display: block;
    width: 20px;
    height: 20px;
    padding-left: 2px;
}
.mainContainer {
    width: 100vw;
    position: absolute;
    top: 65px;
    right: 0px;
    bottom: 50px;
    flex-wrap: nowrap;
}
.contextFrameContainer {
    overflow: hidden;
    height: 100%;
}

.tabpaneltab {
    overflow-x: auto;
    padding: 8px;
    height: 100%;
}

.tab-content {
    overflow: auto;
    height: 100%;
}

tabpanel-container {
    height: 100%;
}

.contextframeIframe {
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
    height: 99%;
    overflow-x: hidden;
}

.contextframeIframeget {
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
    height: 99%;
}

.helpLink {
    text-decoration: underline;
    font-weight: 600;
    color: var(--Accent) !important;
    cursor: pointer;
}

#showHelp {
    color: var(--White);
    float: right;
    margin: 18px 10px 0 5px;
    cursor: pointer;
}

.contextFrame-select-item {
    padding: 10px;
    color: grey;
}

.contextFrameTabs a {
    padding-top: 12px;
}

.helpGlyph {
    font-size: smaller;
}

.contextFramePreview {
    margin: 5px;
    padding: 5px;
    border: 1px solid var(--Grey5);
    -webkit-border-radius: var(--smallBorderRadius);
    -moz-border-radius: var(--smallBorderRadius);
    border-radius: var(--smallBorderRadius);
    font-size: smaller;
}
.contextFramePreview .shadow-root,
#zen .shadow-root,
.reviewDetails .shadow-root,
.versionpane .shadow-root,
.syncComparison._previous .shadow-root,
.syncComparison._current._external .shadow-root {
    border: none;
    padding: unset;
}
.syncComparison {
    width: 50%;
}
.contextFramePreview > .panel-body-v-scroll {
    display: flex;
    flex-direction: column;
}

.contextFramePreviewUp {
    background: #efe;
}

.contextFramePreviewDown {
    background: #fee;
}

.contextFramePreviewError {
    background: var(--Grey8);
    color: red;
}

.contextFramePreview .baseControlHelp,
.contextFramePreview .slick-cell,
.contextFramePreview input,
.contextFramePreview select {
    font-size: 11px;
}

.contextFramePreview .slick-row.even,
.contextFramePreview .slick-row.odd {
    background: inherit;
}

.illustration {
    margin: 20px 0 30px;
    box-shadow:
        0 10px 16px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.cathelp {
    color: grey;
    padding-top: 10px;
}

.cathelp_img {
    max-width: 90%;
}

.cathelp_summary {
    color: var(--White);
    background-color: var(--blue-800);
    border-radius: var(--defaultBorderRadius);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    text-align: center;
}

.cathelp_details li {
    margin: 10px;
}

.cathelp span {
    color: inherit !important;
}

.smart-replace {
    cursor: help;
    font-size: smaller;
    color: grey;
    position: relative;
    top: -6px;
    left: -1px;
}

.smarttext-icon {
    font-style: italic;
}

.smarttext-icon:before {
    font-style: italic;
    content: "[";
    display: inline;
}

.smarttext-icon:after {
    font-style: italic;
    content: "]";
    display: inline;
}

.documentationLink {
    font-style: italic;
    color: grey;
    text-align: right;
}

.historyDlgVersionDetail {
    font-weight: 700;
}

.historyDlgVersionPaneSelected {
    background-color: #add8e6 !important;
    font-weight: 700;
}

.historyDlgVersionPaneSelected.timepwarp_day {
    color: var(--White);
    background-color: red;
}

.timepwarp_day {
    color: red;
}

.timepwarp_after {
    color: #d3d3d3;
}

.historyDlgVersionPaneSelector {
    cursor: pointer;
}

.historyPanelVersionInfo {
    font-weight: 700;
}

#explainOuter {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 70px;
    bottom: 70px;
    width: 100%;
}

#explain {
    display: inline-block;
    overflow: auto;
    width: 100%;
}

.explainh1 {
    padding: 30px;
    text-align: center;
    font-size: xx-large;
    color: #007b88;
}

.explainh2 {
    padding: 20px;
    text-align: center;
    width: 70%;
    font-size: larger;
    margin: auto;
    line-height: 1.4em;
    color: grey;
}

.explainh3 {
    padding: 20px;
    text-align: center;
    width: 70%;
    font-size: small;
    margin: auto;
    line-height: 1.4em;
    color: grey;
}

.explainh2 li {
    text-align: left;
}

.explainImg,
.explainProject {
    cursor: pointer;
    color: #c3d25e;
}

.explain-modal {
    width: 98%;
}

@media (min-width: 1200px) {
    .explain-modal {
        width: 1200px !important;
    }
}

.refOutdated {
    color: orange !important;
}

#selenium {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 50px;
    display: none;
    z-index: 2000;
    line-height: 11px;
    font-size: 11px;
}

#sup_description {
    height: 200px;
}

.sup_metainfo {
    color: grey;
}

.sup_metainfo input {
    font-size: small;
    height: 24px;
}

.sup_metainfo textarea {
    font-size: small;
}

.fixedTable .table tr td,
.fixedTable .table tr th {
    min-height: 20px;
    height: 20px;
    padding: 5px;
}

.fixedTable-header {
    height: 30px;
    margin-left: 110px;
    overflow: hidden;
    border-bottom: 1px solid var(--Grey5);
}

.fixedTable-sidebar {
    float: left;
    overflow: hidden;
    border-right: 1px solid var(--Grey5);
}

.fixedTable-body {
    overflow: auto;
    float: left;
}

.syncStatus {
    color: var(--White);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: var(--defaultBorderRadius);
    padding: 1px 0 1px 12px;
    margin-bottom: 5px;
}

.syncStatus .createButtons {
    margin: 0;
}

.syncStatusInSync {
    background-color: rgba(188, 221, 55, 0.9);
}

.syncStatusNotLinked,
.syncStatusOutOfSync {
    background-color: rgba(221, 88, 55, 0.9);
}

.syncStatusNoSync {
    background-color: rgba(88, 88, 55, 0.9);
}

.btn-sync-field {
    line-height: 0.5;
    background-color: rgba(188, 221, 55, 0.9) !important;
    border-color: rgba(175, 201, 67, 0.9) !important;
    color: var(--White);
    margin-left: 12px;
}

.iconDone {
    color: rgba(175, 201, 67, 0.9);
    margin-left: 12px;
}

.sync-command {
    color: var(--White) !important;
    margin: 0;
    text-decoration: underline;
    padding: 0 12px;
    border: none;
    vertical-align: inherit;
}

.sync-command:focus {
    outline: 0;
}

.sync-command:hover {
    color: var(--White);
}

.sync-command:before {
    content: "(";
}

.sync-command:after {
    content: ")";
}

.ft_syncSourceInfo {
    margin-right: 15px;
    margin-bottom: 10px;
    background-color: var(--Grey8);
    padding-left: 10px;
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: 5px;
}
.ft_crosslinks button.buttonCreateSelect {
    margin-top: 22px; /* spacing is 10 +22 = 32 */
}
.syncStatusList {
    text-align: left;
    padding-left: 10px;
}

.syncSourceInfoName {
    padding-right: 4px;
}

.resetSync {
    text-decoration: underline;
    cursor: pointer;
}

.copyChange {
    font-size: xx-large;
    cursor: pointer;
}

.syncActions {
    margin-bottom: 10px;
}

.modal-dialog.large {
    width: 75%;
}

.short-ctrl {
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid var(--Grey5);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    padding: 2px 4px;
}

.sopItemStatus > td > div > a > .refId {
    color: #00f;
}

.short-and {
    padding: 2px 4px;
}

.key {
    padding-top: 4px;
}

.dropdownEdit h3 {
    font-size: 14px;
    font-weight: 700;
}

.dropdownEdit th {
    padding: 2px 8px !important;
}

.dropdownEdit select {
    width: 100%;
    height: 32px;
}

.dropdownEdit .glyphicon {
    color: #777;
}

.dropdownEdit .help-block {
    margin: 0;
}

.scrollable-modal {
    height: calc(100vh - 212px) !important;
    overflow-y: auto !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
}

.jsoneditor label {
    line-height: 32px;
}

.jsoneditor h3 {
    font-size: large !important;
}

.jsoneditor select {
    height: 100% !important;
    width: 100% !important;
    padding: 4px !important;
}

.jsoneditor button,
.jsoneditor input {
    height: 26px !important;
    padding: 4px !important;
}

.projectGroupMenu {
    overflow-y: auto;
}

.projectGroupMenu span {
    color: var(--Grey1) !important;
}

.projectGroupMenu span:hover {
    color: var(--White) !important;
}
.menu-icon {
    font-size: 12px;
}
.my-qms-icon {
    position: absolute;
    margin-top: 4px;
    right: var(--defaultMediumSpacing);
    font-size: 12px;
}

.project-icon {
    height: 14px;
    width: 8px;
    border-radius: var(--defaultBorderRadius);
}
.dropdown-menu-main li > a:hover,
.dropdown-menu-main li:hover,
.dropdown-menu-main li:hover > a,
.dropdown-menu-main li:hover > span,
.dropdown-menu-main li:hover > .dropdown-menu-main-button,
.dropdown-menu-sub li:hover,
.dropdown-menu-sub li:hover > a,
li:hover > i,
.dropdown-menu > li > a:hover,
.dropdown-menu li:hover,
.dropdown-menu > li:hover > a {
    background-color: var(--Accent);
    color: var(--White) !important;
}

.dpGlobalFilter {
    width: 50vw;
}

.reject-nocomment {
    color: grey;
}

.trainer-prefix {
    float: left;
    padding-top: 8px;
    padding-right: 8px;
}

.commentBar {
    vertical-align: top;
    width: 50%;
}

.commentBarBox {
    background-color: var(--White);
    padding: 20px 10px 20px 20px;
}

.commentOrder {
    padding: 20px;
}

.commentDoc {
    vertical-align: top;
    text-align: center;
    width: 50%;
}

.searchResult {
    color: grey;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

#searchFilter {
    display: flex;
    gap: 8px;
    padding-right: var(--defaultSmallSpacing);
}

.commentUI {
    width: 100%;
    margin: 0 4px 8px 0;
    padding: 6px;
    border: 1px solid var(--Grey7);
    cursor: pointer;
    background-color: var(--White);
    -webkit-box-shadow: var(--defaultCardShadow);
    -moz-box-shadow: var(--defaultCardShadow);
    box-shadow: var(--defaultCardShadow);
    border-radius: var(--smallBorderRadius);
}

.commentBarDiv {
    padding-left: 20px;
}

.selectedComment {
    border: 1px solid var(--LogoGreenYellow);
}

.reviewDlgBox {
    overflow: auto;
    padding-right: 10px;
    padding-bottom: 30px;
    display: inline-block;
    width: 100%;
    text-align: initial;
}

.reviewMe,
.reviewMeHeader {
    font-weight: 700;
}

.reviewOther,
.reviewOtherHeader {
    color: #d3d3d3;
}

.reviewDetails {
    white-space: initial;
    height: calc(100% - 40px);
    overflow-y: auto;
}
.reviewDetails .itemTitleBarNoToolsNoEdit {
    display: none;
}

.reviewDetails .baseControl {
    margin-right: 8px;
}

.reviewDetails ::-webkit-scrollbar {
    width: 7px;
    height: 9px;
    background-color: transparent;
}
.reviewDetails ::-webkit-scrollbar-thumb {
    border: solid 1px transparent;
    background: #aaa;
    border-radius: 5px;
    box-shadow: var(--defaultCardShadow);
}

.reviewDetails:empty {
    display: none;
}
.commenttr {
    display: inline-block;
    width: 100%;
}

.commentUser {
    float: left;
    padding: 4px;
    font-weight: 700;
}

.commentDate {
    float: right;
    padding: 4px;
}

.commentLine .commentDate {
    white-space: normal;
}

.versionpane .commentDate {
    padding: 0;
    margin: 4px;
}

.commentText {
    padding: 4px;
}

.commentLine {
    padding-right: 6px;
}

.sortButton {
    margin: 0 8px 4px 0 !important;
    line-height: 1.4;
    border: none;
}

.commentSort {
    width: 0;
    height: 0;
    display: inherit;
    margin: 0 0 2px 4px;
}

.commentSortDown {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--Grey1);
}

.commentSortUp {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--Grey1);
}

.selectedAnnotation {
    background-color: var(--LogoGreenYellow);
}

.compareTools {
    position: absolute;
    right: 3em;
    top: 8px;
    color: #2920dc;
}

.compareToolsHeader {
    padding-right: 10px;
    font-weight: 700;
}

.compareToolsGroup {
    display: table;
    float: left;
}

.compareTool {
    padding-right: 12px;
    display: table-cell;
}

.compareRow {
    display: table-row;
}

.compareLeft {
    display: table-cell;
    width: 720px;
    vertical-align: top;
    padding-right: 10px;
}

.compareItem {
    margin-bottom: 10px !important;
}

.compareRight {
    width: 700px;
    display: table-cell;
    vertical-align: top;
    padding-left: 10px;
}

@media print {
    .forcePrint {
        height: initial !important;
        max-height: initial !important;
        min-height: initial !important;
    }
}

.compare_add {
    background-color: #ff0 !important;
    display: inline-block;
    white-space: normal;
}

.compare_remove {
    display: inline-block;
    color: red !important;
    text-decoration: line-through !important;
    white-space: normal;
}

.compare_style {
    background-color: #f3f391 !important;
    white-space: normal;
}

.compareHeaders {
    display: table-row;
}

.compareHeader {
    display: table-cell;
    width: 700px;
    text-align: center;
    font-size: x-large;
    padding-top: 20px;
}

.redlineDates {
    width: 200px;
    display: inline-block;
    margin: 0 6px;
}

.redlineView .reporttable {
    max-width: unset;
}

.compareHtml,
.viewHtml {
    cursor: pointer;
    color: var(--BlueLink);
}
.trainingFilter {
    cursor: pointer;
    padding: 2px 6px;
}

.trainingFilterBox {
    margin-bottom: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
}

.trainingFilterLeft {
    float: left;
    margin-right: 30px;
}

.trainingFilterRight > .controlContainer {
    margin-top: var(--defaultSmallSpacing);
}

.trainingFilterRight > .baseControl,
.trainingFilterRight > .controlContainer > .baseControl {
    margin-top: var(--defaultMicroSpacing);
}

.trainingFilterRight .userSelect,
.trainingFilterRight .lineInput {
    width: 260px;
    height: 20px;
    padding: 0px 6px;
}

.trainingFilterRight {
    margin-left: 200px;
}

.trainingFilterOut {
    color: var(--Grey5);
}

.firstTrainingRequired {
    color: var(--RedPersimmon);
}

#qmsTable .ua_level {
    cursor: default !important;
}
.compareItemSorted {
    margin: 6px 0 !important;
}

.linksettings {
    cursor: pointer;
    text-decoration: underline;
}

.pubhist > thead > tr > th {
    vertical-align: top !important;
}

.boxed {
    border-color: #adadad;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    padding: 2px 4px;
}

.note-editable p,
.note-editable span {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: var(--Grey0);
}

.note-toolbar button {
    font-size: 12px;
}

.caption {
    text-align: center;
}

/* Figure 12: xxx */

.captionFix,
.referenceFix {
    font-style: italic;
}

.cascadingSelect {
    margin-right: 8px;
}

.cascadingSelectSelect {
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: var(--defaultBorderRadius);
}

/* stacking dialogs*/

.ui-front1 {
    z-index: 2013 !important;
}

.ui-widget-overlay1 {
    z-index: 2012 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Grey4);
    opacity: 0.15;
    filter: Alpha(Opacity=15);
}

.ui-front2 {
    z-index: 2015 !important;
}

.ui-widget-overlay2 {
    z-index: 2014 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Grey4);
    opacity: 0.15;
    filter: Alpha(Opacity=15);
}

.ui-front3 {
    z-index: 2017 !important;
}

.ui-widget-overlay3 {
    z-index: 2016 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Grey4);
    opacity: 0.1;
    filter: Alpha(Opacity=10);
}

.ui-front4 {
    z-index: 2019 !important;
}

.ui-widget-overlay4 {
    z-index: 2018 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Grey4);
    opacity: 0.8;
    filter: Alpha(Opacity=8);
}

.failedImage {
    padding: 10px;
    background-color: red;
}

.docActionButton {
    margin: 0 6px 6px 0;
}

.titleGUID {
    padding: 0 6px;
    font-style: italic;
    color: green;
}

.titleOID {
    font-style: italic;
    color: green;
}

.taskFit {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 15px;
    right: 15px;
    overflow-y: auto;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    background-color: var(--White);
    padding: 6px;
    border: 1px solid var(--Grey5);
}

.taskDropDownGroup {
    position: relative;
    display: table-cell;
}

.taskSearch {
    padding: 0 12px;
    border-left: 0;
    display: table-cell;
    border-radius: 0;
}

.taskDropdown {
    border-radius: 0 4px 0 0;
    padding: 7px 4px;
    border-left: 0;
}

.moreTasks {
    padding-top: 10px;
    color: grey;
    width: 100%;
    text-align: center;
}

#signin-buttons {
    display: flex;
    align-items: center;
    flex-direction: column;
}
#signin-buttons button {
    width: 100%;
}
.signinoptions {
    padding: 0 20px;
}

#external-signin {
    cursor: pointer;
}

#external-auth-button {
    display: flex;
    align-items: center;
}

#external-auth-button-image {
    max-width: 60px;
    max-height: 20px;
    padding-right: 10px;
}

#google-signin {
    background-image: url(/img/google/1x/btn_google_signin_light_normal_web.png);
    width: 191px;
    height: 46px;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
}

#google-signin:hover {
    background-image: url(/img/google/1x/btn_google_signin_light_focus_web.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #google-signin {
        background-image: url(/img/google/2x/btn_google_signin_light_normal_web@2x.png);
    }
    #google-signin:hover {
        background-image: url(/img/google/2x/btn_google_signin_light_focus_web@2x.png);
    }
}

.explainer {
    border: 1px solid grey;
    border-radius: var(--defaultBorderRadius);
    padding: 12px;
}

@media screen and (max-width: 767px) {
    .autoSave small,
    #version {
        display: none;
    }
    #projectNameTitleContainer {
        padding-left: 16px;
    }
    #selectCommentDD {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 0;
        width: 100%;
    }
    .dropdown-menu-main span {
        color: var(--Black);
    }
    #idProjectList > li > ul {
        display: block;
    }
    body > header > nav {
        float: right;
    }
    #globalProjectFilter {
        height: 50px;
        min-width: 250px;
        padding-left: 6px;
    }

    .nav-bar {
        background-color: var(--White);
    }
    #serveradmin {
        padding: 0 0 0 18px;
    }
    #showHelp {
        display: none;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider,
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider:hover {
        background-color: var(--White) !important;
        padding: 0px;
    }

    nav button {
        float: none !important;
    }
    #nav-bar-user {
        margin-left: 0px;
        width: 100vw;
    }
    #nav-bar-project {
        top: -10px;
        right: 135px;
    }
    #media {
        display: none;
    }
    #idNotificationList {
        left: -320px !important;
        background-color: var(--Grey1) !important;
    }
    #nav-bar-full-responsive {
        top: 9px;
        right: 130px;
        color: var(--Grey4);
        font-size: xx-large;
        display: block !important;
        position: absolute;
    }
    #nav-bar-notification-responsive {
        top: 9px;
        right: 80px;
        color: var(--Grey4);
        font-size: xx-large;
        display: block !important;
        position: absolute;
    }
    #nav-bar-notification-noneresponsive {
        display: none;
    }
    #nav-bar-dasbboardg-noneresponsive {
        display: none;
    }

    #idDashboardList {
        left: -320px !important;
        background-color: var(--Grey1) !important;
    }
    .bottomNavHelp {
        display: none;
    }
    #idNotificationListResponsive {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
    }
    /* login dialog */
    .login-row {
        margin-top: 0px !important;
    }
    .login-bg {
        display: none;
    }
    #inputComment {
        max-height: 80px;
    }

    .comment-options-row {
        display: none;
    }
    .login-spacervertical {
        display: none;
    }
    .login-button-row {
        text-align: center;
    }
    .signinoptions {
        display: none;
    }
    nav.navbar-collapse.bs-navbar-collapse.no-decoration.in {
        position: fixed;
        display: block !important;
        top: 60px;
        left: 0;
        bottom: 0;
        right: 0;
        background: white;
        height: calc(100% - 100px) !important;
        max-height: calc(100% - 100px) !important;
    }

    #idProjectList .dropdown-submenu {
        padding-left: 0;
    }

    #idProjectList .dropdown-submenu > a:after {
        content: "";
    }

    #idProjectList .dropdown-submenu > a {
        padding-left: 16px;
    }

    #idProjectList .dropdown-menu {
        max-height: none !important;
    }

    .note-editable p,
    .note-editable span,
    .ui-widget {
        font-size: 12px !important;
    }
    .note-editor {
        width: 100%;
    }
    .itemTitle {
        max-width: 100% !important;
        font-size: 16px;
    }
    #contextFrameButton {
        display: none;
    }
    .tox.tox-tinymce.tox-platform-touch {
        width: 100% !important;
    }
    .btn-default {
        margin-top: 2px;
        margin-bottom: 2px;
    }
}

@media screen and (max-width: 500px) {
    .comment-input {
        width: 95%;
    }
    body {
        font-size: 12px !important;
    }
}

/* login jsp */

.login-oauth-box {
    display: none;
}

.login-alignvertical {
}

.login-spacervertical {
    height: 20px;
}
.login-header {
    color: #414554;
    font-family: Poppins;
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    margin-bottom: 20px;
}

.autocomplete {
    position: relative;
    display: inline-block;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;

    height: 36px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.login-row {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}
.login-logo {
    height: 60px;
}
.login-logo img {
    height: 60px;
}
.login-body {
    padding: 0px;
    background: var(--blue-800);
    display: flex;
}

img.login-app-logos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 33%;
}
img.login-logo-left {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60px;
}
.login-body-col-container {
    width: 484px;
    height: 100vh;
    background: white;
    position: relative;
}

.login-body-col {
    position: absolute;
    padding: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100vh;
    overflow: auto;
}

.login-bg {
    flex-grow: 1;
    position: relative;
}
.login-bg svg {
    width: 100%;
    height: 100vh;
}
@media (max-width: 500px) {
    .login-body-col {
        width: 100%;
        height: 100%;
    }
}

@media (max-height: 640px) {
    .login-spacervertical {
        height: 28px;
    }
}

@media (max-width: 500px) {
    .login-tiny {
        display: none;
    }
}

.ui-dialog-titlebar-max {
    position: absolute;
    right: 2.3em;
    top: 50%;
    margin: -10px 0 0;
    padding: 1px;
}

.maxNoX {
    right: 0.3em !important;
}

.ui-dialog-titlebar button {
    border: none;
    border-radius: var(--smallBorderRadius);
    box-shadow: none;
    width: 22px !important;
    height: 22px !important;
    background: none;
}

.ui-dialog-titlebar .ui-button .ui-icon {
    background-image: url(../../css/images/ui-icons_222222_256x240.png);
}

.filterList {
    border-radius: var(--defaultBorderRadius);
    margin: 0 4px;
    padding: 0 4px;
    color: grey;
    border: 1px solid #d3d3d3;
}

.filterListList:hover {
    background-color: transparent !important;
}

.hideScreen {
    display: none;
}

.copyBuffer {
    width: 18cm;
    display: none;
}

/* skin.css Style*/

.upload-drop-zone {
    height: 200px;
    width: 100%;
    margin-bottom: 20px;
    color: var(--Grey5);
    line-height: 200px;
    text-align: center;
    border: 2px dashed var(--Grey5);
}

.upload-drop-zone.drop {
    color: var(--Grey1);
    border-color: var(--Grey1);
}

#slaask-button {
    bottom: 60px;
    right: 10px;
    display: none;
}

.pluginDetails {
    padding: 0 0 20px 25px;
}

#notificationNav {
    padding-right: 16px;
    padding-top: 6px;
    position: relative;
    margin-top: 10px;
}

.dashboardAction {
    line-height: 40px;
    font-size: 20px;
}
.notificationAction {
    font-size: 20px;
    line-height: 30px;
    background: transparent;
    border: none;
}

.itemNotifications .past,
.itemNotifications .future,
.itemNotifications .others {
    color: #d3d3d3;
}

.nav-link {
    color: var(--Black);
}

.notificationIcon {
    background: var(--NotifColorBG);
    border: 1px solid var(--NotifColor);
    position: absolute;
    color: var(--NotifColor);
    left: 24px;
    min-width: 10px;
    height: 10px;
    line-height: 1px !important;
    vertical-align: baseline;
    border-radius: 28px;
    padding: 6px 3px;
    text-align: center;
    font-size: 11px;
    top: -3px;
}

.dropdown-menu-main.notificationIcon,
.dropdown-submenu.notificationIcon {
    right: -6px;
}

.hasNotification {
    color: var(--NotifColor);
}

.notificationBtn {
    color: var(--NotifColor);
}

.dashboardBtnMenu {
    color: var(--BlueLagoon);
    margin: 2px 12px 0 0;
}

.notificationMenuLogo {
    display: inline;
    float: left;
    line-height: 30px;
    padding: 5px;
    background: var(--White);
}

.notificationMenuProject {
    float: left;
    width: 50px;
    display: inline-block;
    line-height: 30px;
}

.nofification {
    white-space: pre-wrap;
}
#idNotificationList li {
    height: 50px;
}

#idNotificationList li:hover div,
#idNotificationList li:hover span,
#id #idNotificationList li:hover span div span {
    color: var(--White) !important;
}

.notificationMenuLogo img {
    max-height: 30px;
}

.notificationMenuSummary {
    line-height: 1.4;
    font-size: xx-small;
    margin-left: -20px;
    border-bottom: 1px solid var(--Grey5);
    border-left: 1px solid var(--Grey5);
}

.notificationMenuSummary:hover {
    color: var(--Black);
}

.notificationMenuSummary span {
    margin-left: 13px;
}

.notificationMenuSummary span.last {
    margin-left: 20px;
}

.notificationMenuSummary div {
    line-height: 10px;
    height: 8px;
    font-size: 9px;
}

.notificationBtnOn {
    background-color: transparent;
    color: var(--NotifColor);
    border: 0;
}

.notificationBtnOff {
    background-color: transparent;
    color: var(--NotifColor);
}

.notificationCounter {
    color: var(--NotifColor);
    background: var(--NotifColorBG);
    border: 1px solid var(--NotifColor);
    vertical-align: baseline;
    border-radius: 24px;
    text-align: center;
    font-size: 12px;
    min-width: 24px;
    height: 24px;
    padding: 2px;
}

.fancytree-node .notificationCounter {
    --size: 20px;
    line-height: var(--size);
    min-width: var(--size);
    height: var(--size);
    padding: 0;
}

.fancytree-notificationCounter {
    position: absolute;
    right: 5px;
    top: 2px;
}

.btn .notificationCounter {
    top: -8px;
    right: -5px;
    font-size: 11px;
    min-width: 16px;
    height: 16px;
    line-height: 10px;
}

.navBarNotification {
    margin-left: 16px;
}

.warningMerge {
    text-align: center;
    border-radius: var(--largeBorderRadius);
    background-color: red;
    padding: 6px;
    border-width: 0;
    color: var(--White);
    font-size: large;
    margin-bottom: 12px;
}

.warningMerge a {
    color: var(--White);
    text-decoration: underline;
}

.cleanupImg {
    max-width: 20px;
    max-height: 20px;
    width: 20px !important;
    height: 20px !important;
}

.cleanupImg:hover {
    max-width: unset !important;
    max-height: unset !important;
    width: unset !important;
    height: unset !important;
}

.fullscreenContent .itemTitleBarNoToolsNoEdit {
    font-size: x-large;
    line-height: initial;
}

#zen .itemTitleBarNoToolsNoEdit,
#contextframe .itemTitleBarNoToolsNoEdit,
.detailsVersions .itemTitleBarNoToolsNoEdit,
#accordion .itemTitleBarNoToolsNoEdit,
.versionpane .itemTitleBarNoToolsNoEdit {
    height: unset;
}
.emptySelection {
    color: var(--Grey5);
}

.chevronHeading {
    cursor: pointer;
    margin-bottom: 6px;
}
.chevronText {
    text-decoration: underline;
}
.chevronHelp,
.proxyInfo {
    font-style: italic;
    font-size: small;
    padding-left: 16px;
}

.chevronInner {
    padding: 16px 0 16px 16px;
}

.drawio-overlay {
    z-index: 2012 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Grey4);
}

.drawio-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: xx-large;
    margin-left: -170px;
}

.table-lined > thead > tr > td,
.table-lined > thead > tr > th {
    border-bottom: none;
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.littleBounce {
    -webkit-animation-name: littleBounce;
    animation-name: littleBounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
    0%,
    100%,
    20%,
    53%,
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    0%,
    100%,
    20%,
    53%,
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@-webkit-keyframes littleBounce {
    0%,
    100%,
    10.0%,
    2.0%,
    5.3%,
    8.0% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    4.0%,
    4.3% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    7.0% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -7px, 0);
        transform: translate3d(0, -7px, 0);
    }
    9.0% {
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes littleBounce {
    0%,
    10.0%,
    100%,
    2.0%,
    5.3%,
    8.0% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    4.0%,
    4.3% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    7.0% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -7px, 0);
        transform: translate3d(0, -7px, 0);
    }
    9.0% {
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }
}

#mainUserMenu {
    min-width: 280px;
}

.navbar-inverse {
    background-color: white;
    border-color: transparent;
}

.btn[disabled] {
    opacity: 0.25;
    /* for filters in navbar in white UI */
}
.btn-default[disabled]:hover,
.btn-default.disabled:hover {
    color: var(--Accent);
}
.btn {
    padding: 6px 21px;
    border-radius: var(--defaultBorderRadius);
    height: 36px;
}

.btn-xs {
    padding: 0 5px;
    border-radius: var(--defaultBorderRadius);
    height: 20px;
}

.btn > b {
    font-weight: 400;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
}
/* Make sure that gate buttons  fit container */
.btn.gateButton {
    height: unset;
}

.uat .btn-default,
.uat .btn-success,
.dateSettings .btn-default,
.dateSettings .btn-success {
    min-width: unset;
    width: 115px;
}

.navbar-fixed-bottom {
    box-shadow: inset 0 0 3px var(--Grey0);
    margin-top: 4px;
    margin-bottom: 0px;
    padding-right: 8px;
}

.navbar-fixed-bottom > .navbar-right {
    display: flex;
    flex-direction: row-reverse;
    padding-top: 10px;
    gap: 8px;
}
header .navbarCtrl {
    margin-top: 10px;
}

#commentDiv {
    width: 100%;
    font-weight: 300;
    background: red;
    display: flex;
    align-items: baseline;
    background: #f3f3f3;
    border-radius: var(--defaultBorderRadius);
    border: 1px solid transparent;
    padding: 0 4px;
}
.comment-input {
    height: 32px !important;
    width: 300px;
    margin-bottom: 0 !important;
    border: 1px solid transparent;
    background: transparent;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#comment:focus {
    border: unset;
}

.navbar-fixed-bottom button {
    height: 32px;
    width: 85px;
}

header {
    box-shadow: 0 0 1px 0px var(--Grey3);
}

#contextframesizer,
#dragbar {
    background: var(--Grey6);
}

#contextframesizer:hover,
#contextframesizer:hover .contextClose,
#dragbar:hover {
    background: var(--Grey4);
}

#contextframe,
#main,
#sidebar,
#widgetDashboard,
#nav-left {
    height: calc(100vh - 117px);
}
#main {
    position: relative;
    min-width: 400px;
}
#to_date {
    position: relative;
    min-width: 185px;
}

.todoBtnOn,
.todoIcon {
    background-color: #ff8f0cfc;
}

.btn-custom {
    background-color: #007e8d;
    border-color: #007e8d;
}

.ui-fancytree:focus {
    border: 0;
    outline-color: transparent !important;
}

.btn-toolbar .btn-default {
    background: white;
    border: 0;
}

.btn-toolbar .btn-default:hover {
    background: var(--Grey8);
    border: 0;
}

.panel {
    border: 0;
    border-radius: var(--smallBorderRadius);
    border: solid 1px var(--Grey8);
}

.panel-default > .panel-heading {
    background: white;
}

.panel-heading:hover {
    background-color: white;
}

.note-toolbar button {
    margin: -4px 0 2px;
    border-radius: 0;
    box-shadow: none;
    background: 0 0;
}

.note-editor .note-toolbar {
    background: 0 0;
}

.itemTitle {
    padding-top: 0px;
    display: flex;
    max-width: 100%;
    min-height: 30px;
    display: flex;
    flex-direction: column;
    font-size: 28px;
    gap: var(--defaultMicroSpacing);
    flex-grow: 2;
}
.itemTitle > .editable {
    font-size: 28px;
    line-height: 1;
}
.itemTitle .editableform .form-control {
    font-size: 24px;
    height: 30px;
}

.itemTitle > .editable-click::after {
    font-size: 20px;
}
[role="dialog"] .itemTitle > .editable,
[role="dialog"] .editableform .form-control,
.editable-empty {
    font-size: 20px;
    height: unset;
}
[role="dialog"] .itemTitle > .editable-click::after {
    font-size: 16px;
}

#appPopup .treeContent {
    width: 100%;
}

#appPopup .treeContent {
    width: 100%;
    height: 100%;
}

.itemTitle .refTitle {
    padding-left: 0;
}
.toolsBarButtonsContainer {
    flex-shrink: 0;
}

.toolsBarButtonsContainer .btn-group:last-child {
    margin-right: 0;
}

.itemTitleBar .refId {
    display: flex;
    align-items: center;
    line-height: 1;
}
.itemTitleBar {
}

.tooltipItem {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

#itemDetails {
    border: none;
    display: flex;
    flex-direction: column;
}

.itemTitleBar .labelTools {
    float: right;
}

#labelDisabler {
    height: 100%;
    width: 100%;
    background-color: #f5f5f5;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    left: 0;
}
.btn-group {
    margin-bottom: 0 !important;
}
.itemTitleBar .labelTools .btn-group > .btn {
    float: unset;
}
.itemTitleBar > .labelTools {
    margin-top: 2px;
}
.itemTitleBar > .labelTools:empty {
    display: none;
}

.panel-default > .panel-heading {
    content: "";
}

.multiLineEditorHelp {
    font-size: 0.8em;
}

.btn-default,
.ui-dialog-buttonset > button {
    min-width: 150px;
}

.btn-small,
.btn-xs {
    min-width: 0;
    margin: 0;
    font-size: 12px !important;
    padding: 0 5px;
}
.itemViewer {
    margin-left: 10px;
    position: relative;
}
.itemViewer .avatar {
    margin: 0 -7px;
    border: solid 1px white;
}
.itemViewers {
    margin-top: -12px;
}

.btn-ssearch,
.btn-sssearch,
.btn-stree {
    width: 36px;
    height: 36px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid var(--primary-border, #d9d9d9);
    background: var(--primary-secondary, #fff);
}

.btn-stree {
    display: flex;
    width: unset;
    height: 32px;
    padding: 2px 8px;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: var(--Text, #414554);
    margin: 0 var(--defaultSmallSpacing) var(--defaultSmallSpacing) 0;
}

.btn-sssearch:hover {
    background: 0 0;
    border: solid 1px var(--Grey5);
}

btn-ssearch:hover {
    background: 0 0;
    background-color: white;
    border: solid 1px var(--Grey5);
}

.btn-ssearch .caret,
.btn-sssearch .caret {
    margin-left: 0px;
}

.caret,
.dropup .caret {
    border: none;
    width: unset;
    height: unset;
}
.caret:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f078";
    font-weight: 300;
}

.dropup .caret:before {
    content: "\f077";
}

#fancytree-drop-marker,
span.fancytree-checkbox,
span.fancytree-drag-helper-img,
span.fancytree-empty,
span.fancytree-expander,
span.fancytree-icon,
span.fancytree-radio,
span.fancytree-vline {
    font-family: "Font Awesome 5 Pro";
    background: none;
    margin-left: 8px;
    margin-right: 4px;
    font-weight: 300;
    font-size: 14px;
    color: var(--Grey3);
    margin-top: 0;
}

.fancytree-checkbox:before {
    content: "\f0c8";
    cursor: pointer;
}

.fancytree-partsel span.fancytree-checkbox:before {
    content: "\f146";
    cursor: pointer;
}

.fancytree-selected span.fancytree-checkbox:before {
    content: "\f14a";
    cursor: pointer;
}

.fancytree-expanded > .fancytree-expander:before {
    content: "\f078";
}

.fancytree-icon:before {
    content: "\f15b"; /* fa-file */
    margin-left: 10px;
}

.fancytree-exp-c > .fancytree-expander:before,
.fancytree-exp-cl > .fancytree-expander:before {
    content: "\f054";
}
span.fancytree-node:has(.fancytree-custom-icon) > .fancytree-expander:before,
span.fancytree-exp-nl:has(.fancytree-icontext) > .fancytree-expander:before,
span.fancytree-exp-nl:has(.fancytree-checkbox) > .fancytree-expander:before,
span.fancytree-exp-n:has(.fancytree-checkbox) > .fancytree-expander:before {
    content: "";
}

.multiLineEditorContainer,
.note-editor {
    border: 1px solid var(--Grey5);
    border-radius: var(--defaultBorderRadius);
}

.multiLineEditorContainer {
    box-shadow: var(--defaultCardShadow);
}

.multiLineEditorContainer textarea {
    width: 100% !important;
}

.selectize-input,
.selectize-input.dropdown-active {
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: var(--defaultBorderRadius);
}

.selectize-dropdown .active {
    background-color: var(--Accent);
    color: var(--White);
}

.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
    padding: 8px 32px;
}

.nav-tabs {
    border: 0;
    padding: var(--defaultMediumSpacing);
    display: flex;
    flex-wrap: wrap;
    gap: var(--defaultSmallSpacing);
    justify-content: center;
}

.nav-tabs > li {
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid transparent;
    color: var(--Text);
}

.nav-tabs > li.active {
    border-bottom: 2px solid var(--Accent);
}

.nav-tabs > li.active a {
    color: var(--Accent);
}
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li:hover > a {
    color: var(--Accent);
    border: 0;
    background: white;
    border-radius: 0;
    cursor: pointer;
    border-radius: 0;
}
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a {
    background: none;
    border: none;
}

.nav-tabs > li > a {
    border-radius: 0;
    border: 0;
    line-height: 1;
    color: var(--Text);
    font-weight: 500;
}

.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.scrollable-element {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 12px;
    height: 9px;
    /* background-color: #F5F5F5; */
}
::-webkit-scrollbar-thumb {
    border: solid 1px #f5f5f5;
    background: #e5e5e5;
    border-radius: 5px;
    box-shadow: var(--defaultCardShadow);
}
::-webkit-scrollbar-track {
    background-color: transparent;
    border: solid 0px #f5f5f5;
}

span.fancytree-title {
    border-radius: 0;
}

.reviewedCommentMenutitem {
    margin: 10px 2px;
}
.reviewedCommentMenutitem:hover {
    background-color: #f5f5f5 !important;
    color: #262626 !important;
}
.searchVizMode {
    display: none;
}

.searchVizMode img {
    height: 40px;
}

.searchVizMode .btnContent img {
    display: none;
}
#appPopup .searchVizMode img {
    height: 20px;
}

.btn-custom.active,
.btn-custom:active,
.btn-custom:focus,
.btn-custom:hover {
    background-color: #0babbd;
    border-color: #007e8d;
    color: var(--White);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: solid 1px var(--Text);
    background: unset !important;
    color: unset !important;
    font-weight: unset !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    box-shadow: var(--defaultCardShadow);
}

.btn-default,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
    border: 1px solid var(--Accent);
    background: var(--White);
    color: var(--Accent);
}

.btn-success,
.btn-success[disabled],
.btnDoIt {
    background: var(--Accent);
    border-color: var(--Accent);
}

.btn-success[disabled] {
    opacity: 0.35;
}

.btn-success:focus,
.btn-success:hover,
.btn-success[disabled]:hover,
.btn-success:active,
.btn-success:active:focus,
.btn-success:active:hover,
.btnDoIt:hover,
.btnDoIt:active,
.btnDoIt:active:focus,
.btn-default:hover {
    background-color: var(--Accent-Dark);
    border-color: var(--Accent);
    color: white;
    box-shadow: var(--defaultCardShadow);
    outline: none;
}

.openPublish {
    min-width: 200px;
    height: 32px;
}

.cbimg {
    height: 14px;
}

.configbutton,
.refreshButton {
    height: 20px;
    width: 20px;
    margin-top: -2px;
    margin-left: 8px;
    border-color: transparent;
    background: none;
    color: var(--blue-800);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.refreshButton.refreshNeeded {
    color: var(--red-500);
}
.configbutton:hover,
.refreshButton:hover {
    color: var(--Accent);
    background: none;
    border-color: transparent;
}

.configbutton > span,
.refreshButton > span {
    font-size: 13px;
    line-height: 1 !important;
}
.refreshButton > span {
    font-size: 12px;
}

.slick-header-column {
    background: var(--Grey8) !important;
}

.alert {
    box-shadow: var(--defaultCardShadow);
}

.cathelp {
    font-size: 1em;
}

.cathelp_summary {
    border: 0;
    padding: 10px;
    font-size: 16px;
}

.cathelp_gettingStarted > span {
    border-radius: 0;
    padding: 10px;
    text-transform: uppercase;
    border: 0;
    font-size: 18px;
}

.form-control:focus,
.note-editor:focus-within,
.selectize-dropdown:focus,
.selectize-input:active,
:focus {
    border-color: var(--Accent) !important;
    outline: 0;
    box-shadow: none;
}

.btn-stree:focus {
    border-color: transparent !important;
}

.input-sm {
    height: 25px;
    margin-top: -2px;
}

#changeCommentDD {
    min-height: 25px;
    min-width: 200px;
    font-size: 1em;
    text-align: center;
}

.createEditDlg .btn-success {
    min-width: 100px;
}
.createEditDlg .itemTitleBarNoTools {
    margin-bottom: 16px;
    margin-top: 8px;
}
.juidd {
    margin-top: inherit !important;
    margin-left: inherit !important;
}

.navbar-toggle {
    background: rgb(41, 41, 41);
}

#navLeft {
    border-right: solid 1px var(--Grey5);
    max-width: 287px;
    background: var(--blue-800);
    padding: 5px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.navLeftSmall {
    min-width: 72px !important;
    width: 72px;
}

.navLeftTab {
    display: flex;
    align-items: center;
    max-height: 38px;
    padding: 9px;
    cursor: pointer;
    position: relative;
    color: var(--White);
    margin: 10px;
    border-radius: var(--defaultBorderRadius);
}
.navLeftTabActive {
    background: var(--red-500);
}

.navLeftIcon {
    border-radius: 200px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 20px;
    height: 20px;
    width: 20px;
    flex: 0 0 20px;
}

.flexGrowSpacer {
    flex-grow: 1;
}

.navLeftToggle {
    color: var(--White);
    cursor: pointer;
}

.navLeftSmall .navBarNotification {
    top: -8px;
    right: -8px;
    position: absolute;
}

.navLeftToggle:hover {
    color: var(--Accent);
}

.navLeftSmall .navLeftText {
    display: none;
}

.navLeftText {
    display: inline-block;
    margin-left: 16px;
    margin-right: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.navLeftHelp {
    font-size: 20px;
    cursor: pointer;
}

.btn-group-vertical > .btn,
.btn-group > .btn,
.btn-group > .dropdown > .btn {
    position: relative;
    float: left;
}

fieldset {
    padding: 0 12px;
    border: solid 1px var(--Grey5);
    padding-bottom: 12px;
    border-radius: var(--defaultBorderRadius);
}

legend {
    /* display: block; */
    width: auto;
    padding: 0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: inherit;
    color: var(--Text);
    border: 0;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0 6px;
    margin-left: -6px;
}

.fillHeight {
    height: calc(100% - 45px);
    /* 100% -height of the bottom bar*/
}

.itemTitleBar > i {
    margin-top: 4px;
}

.myWork-notifications .panel {
    padding: 6px;
    box-shadow: var(--defaultCardShadow);
    border-radius: var(--defaultBorderRadius);
    margin-bottom: 12px;
    border: 0;
}

.myWork-notifications .panel:last-of-type {
    margin-bottom: 0px;
}

.myWork-notifications .nofification {
    margin-left: 12px;
}

.myWork-notifications .created {
    font-size: 10px;
    font-style: italic;
    text-align: right;
    margin-right: 12px;
}

.myWork-notifications .originator {
    text-align: right;
    margin-right: 12px;
}

.btnDoIt {
    background: var(--Accent);
    color: white;
}

#itemTraceList .align-right {
    text-align: right;
    min-width: 150px;
}

.ui-dialog .itemTitleBar {
    display: none;
}

#TEOContent .square {
    height: 14px;
    width: 14px;
    margin-right: 3px;
    border-radius: 4px;
    margin-top: 2px;
    background: var(--Grey8);
}
#TEOContent .panel-body {
    padding-top: var(--defaultMediumSpacing);
}

#itemTraceList .details {
    color: var(--RedPersimmon);
}

.ft_TRACE_summary #TRACEContentPanel {
    padding: 0;
}

#xtcRow small {
    line-height: 21px;
}

.linkTrace {
    font-size: 12px;
    line-height: 19px;
    cursor: pointer;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th {
    border: none;
}

/* FontAwesome compatibility hacks */

.fa-check-square-o:before {
    content: "\f14a";
}

.fa-flag-o:before {
    content: "\f024";
}

ul.explainMore {
    max-width: 50vw;
    text-align: left;
    margin-left: 40vw;
}
.navbar-brand:hover {
    color: #999999 !important;
}

/* Review */

.annotator-widget {
    -webkit-box-shadow: var(--defaultCardShadow) !important;
    -moz-box-shadow: var(--defaultCardShadow) !important;
    -o-box-shadow: var(--defaultCardShadow) !important;
    box-shadow: var(--defaultCardShadow) !important;
    -webkit-border-radius: var(--smallBorderRadius) !important;
    -moz-border-radius: var(--smallBorderRadius) !important;
    border-radius: var(--smallBorderRadius) !important;
}

.annotator-filter,
.annotator-filter .annotator-filter-navigation button,
.annotator-editor .annotator-controls,
.annotator-editor a {
    background-image: none !important;
}
.annotator-widget {
    background-color: var(--Grey9);
}
.annotator-editor .annotator-controls {
    background-color: var(--Grey8);
}
.annotator-widget,
.annotator-editor .annotator-item input:focus,
.annotator-editor .annotator-item textarea:focus {
    background-color: var(--White);
}
.annotator-editor a,
.annotator-editor a.annotator-focus,
.annotator-editor a:focus {
    border-radius: var(--smallBorderRadius);
    -webkit-border-radius: var(--smallBorderRadius);
    -moz-border-radius: var(--smallBorderRadius);
    -o-border-radius: var(--smallBorderRadius);
    color: var(--White);
    background-color: var(--Accent);
    text-shadow: none;
    font-weight: normal;
    padding: 0px 12px;
}
.annotator-editor a::after {
    display: none;
}
.annotator-editor a:hover {
    box-shadow: var(--defaultCardShadow);
    color: var(--White);
    background-color: var(--Accent);
    text-shadow: none;
}
.annotator-editor .annotator-cancel,
.annotator-editor .annotator-cancel:hover,
.annotator-cancel:focus {
    color: #454545;
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
}
.annotator-adder {
    background-image: url("../img/iconforMarking.svg");
    background-size: 145px;
}

#previewDiv .itemTitleBarNoToolsNoEdit {
    height: unset;
    padding-bottom: 24px;
}

/* merge 22 */

.mergeInfoSummary {
    font-weight: 600;
    padding-bottom: 4px;
    text-decoration: underline;
    font-style: italic;
    font-size: smaller;
}

.mergeInfoDetail {
    font-size: smaller;
}

.mergeActionBtn {
    width: 100%;
    position: relative;
}

.mergeActionBtnCheck {
    position: absolute;
    left: 5px;
    top: 4px;
}
.mergeActionBtnText {
    padding: 0 10px 0 20px;
}

.mergeSpecified {
    background-color: var(--LogoGreenYellow);
}

.mergeNeeded {
}

.noMergeNeeded {
    color: var(--Grey7);
}

.mergeMoved {
    text-align: center;
    padding: 12px;
    font-size: large;
    font-weight: 600;
}

.mergeLinkLabel:has(.checkboxLabel),
.mergeAllLinksLabel:has(.checkboxLabel) {
    display: flex;
    align-items: center;
}

.mergeLinkLabel:last-child {
    margin: 0;
}

.mergeLinkCheckbox {
    font-weight: 400;
    margin-top: 0;
}
.mergeAllLinksLabel {
    font-weight: 400;
    font-style: italic;
    padding: 12px 0 0px 0px;
}

.mergeLinkMergeBox {
    border: 1px solid var(--Grey9);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}

.mergeInfoBox {
    background-color: var(--Grey9);
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 12px;
}

#mergeLinkButton {
    margin-left: 12px;
}

.mergeInfoTable {
    text-align: left;
}

.mergeInfoVersion {
    font-weight: 600;
}

.mergeInfoAction {
    padding: 0 6px;
}

.mergeInfoAuthor {
    font-size: smaller;
    font-style: italic;
}

/* merge 23 */

.mergeOptions {
    float: right;
}

span.mergeRevision,
span.mergeCompare {
    cursor: pointer;
    color: var(--BlueLink);
}

p.mergePair {
    margin: 0;
    padding: 4px 0;
}

p.mergePair:hover {
    background-color: var(--Grey8);
}

.mergeBtnCompare {
    font-size: xx-small;
    border: 1px var(--GreyLightAlto) solid;
    border-radius: 4px;
    margin: 0 12px;
    padding: 2px;
    cursor: pointer;
}
.mergeNoBtn {
    font-size: xx-small;
    margin: 0 12px;
    padding: 2px;
}

.mergeGroup {
    font-weight: bold !important;
}
.apiHelp {
    overflow: auto;
    padding-right: 12px;
    float: left;
    height: 100%;
    margin-right: 6px;
}
.apiHelp pre {
    overflow: auto;
    white-space: pre;
}
.apiDrag {
    background-color: var(--Grey6);
    height: 100%;
    float: left;
    width: 5px;
    cursor: col-resize;
}

.apiEdit {
    overflow: auto;
    padding-left: 12px;
    height: 100%;
}

button.sel_SelectExisting {
    margin-left: 8px;
}

#jsonEditorContainer {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

#jsonEditorContainer > div.theeditor {
    width: 100%;
    margin-right: 8px;
    position: relative;
}
#jsonEditorContainer > div.theeditor.split {
    width: 70%;
}

#jsonEditorContainer > div.editorHelp {
    flex-grow: 1;
}

.theeditor > .baseControl {
    position: absolute !important;
    bottom: 0px !important;
    top: 28px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#jsonEditorContainer > div.json-schema-view {
    width: 30%;
    margin-left: 8px;
    margin-right: -10px;
    background-color: whitesmoke;
    overflow: auto;
}

.json-schema-view .primitive > .inner,
.array > .inner {
    margin-left: -100px;
}

/* jquery / bootstrap upgrade fixes */
.navbar-right {
    margin-right: 0 !important;
}

.navbar-right.progressCtrl {
    margin-right: 10px !important;
}

.navbar-brand > img {
    display: initial;
}
.input-group-btn {
    font-size: inherit !important;
}
@media (min-width: 768px) {
    .modal-sm {
        /* confirm dialog too narrow */
        width: 600px;
    }
    .modal-sm:has(#dialog_comment_text) {
        width: 400px;
    }
    .navbar-collapse.collapse {
        align-items: center;
        flex-direction: row-reverse;
        display: flex !important;
    }
}

.modal-footer {
    /* confirm dialog not high enough */
    margin-top: 15px;
}
.modal-body {
    padding: 20px;
}

/* Styling for the formatter selection list in the Print Layout dialog */
.empty-layout-selection {
}

.layouter-left-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.layouter-left-container .formatter-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
}

.layouter-left-container .list-section-title {
    font-size: 14px;
    font-weight: bold;
    height: 20px;
    margin-top: 8px;
    margin-bottom: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.layouter-left-container .formatter-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    margin-right: 5px;
}

.layouter-left-container .formatter-id {
    color: var(--Grey3);
    font-weight: 400;
}

.layouter-left-container .formatter-item.selected {
    background-image: linear-gradient(rgb(250, 250, 251) 0px, rgb(229, 229, 229) 100%);
}

.layouter-left-container .formatter-title {
    font-weight: bold;
    font-size: 12px;
    line-height: 13px;
}

.layouter-left-container .formatter-help {
    font-size: 10px;
    color: darkgrey;
}

/* JSON Schema */
#jsonEditorContainer .json-schema-container {
    display: flex;
    flex-direction: row;
    font-family: monospace;
    font-size: 12px;
}

#jsonEditorContainer .item {
}

#jsonEditorContainer .subitem {
}

#jsonEditorContainer .subitemend {
}

#jsonEditorContainer .subitemstart {
}

#jsonEditorContainer .basetype {
    color: green;
}

#jsonEditorContainer .proplist {
}

#jsonEditorContainer .proptitle {
    color: blue;
}

#jsonEditorContainer .proprequired {
    color: red;
}

#jsonEditorContainer .rowpadding {
}

#jsonEditorContainer .schemadescription {
    font-family: sans-serif;
    color: darkgrey;
}

#widgetDashboard {
    overflow-y: auto;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 250px;
}

#widgetDashboard .grid-stack {
    width: 100%;
}

.mWidget {
    padding: 5px;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    height: 100%;
    font-size: 14px;
}
.FavoriteProjectsWidget {
    font-size: 15px;
}
.mWidgetContainer::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
    background: #f5f5f5 !important;
}

.mWidgetContainer::-webkit-scrollbar {
    width: 4px !important;
    background: #f5f5f5 !important;
}
.mWidgetContainer::-webkit-scrollbar-thumb {
    background: #000000 !important;
    border: 0;
    border-radius: 0 !important;
}

.mWidgetContainer {
    overflow: auto;
    height: calc(100% - 20px);
    display: flex;
    flex-flow: column;
}
.mWidget .widget-title {
    flex: 1 1 auto;
    font-size: 11px;
    line-height: 20px;
}
.mWidget .toolbar {
    display: inline-flex;
    flex-direction: row-reverse;
    border-bottom: solid 1px var(--Grey3);
}
.mWidget .toolbar i {
    top: 6px;
    cursor: pointer;
    margin-right: 4px;
}

.mWidget h1,
.mWidget h2,
.mWidget h3,
.mWidget h4 {
    margin: 5px;
}

.widgetAddedByAdmin:before {
    content: " ";
    position: absolute;
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 10px solid var(--Grey1);
    border-right: 10px solid #0000;
}

#addWidget,
#showHiddenWidgetButton {
    position: fixed;
    right: 20px;
    bottom: 70px;
    width: 52px;
    height: 52px;
    background: white;
    border-radius: 30px;
    z-index: 1000;
    box-shadow: var(--defaultCardShadow);
    text-align: center;
    cursor: pointer;
}
#showHiddenWidgetButton {
    right: 80px;
}

#addWidget span,
#showHiddenWidgetButton span {
    width: 52px;
    height: 52px;
}

#addWidget span .fa-sticky-note,
#showHiddenWidgetButton span .fa-eye-slash {
    line-height: 52px;
    font-size: 1.5em;
    top: 3px;
}

#addWidget span .fa-plus,
#showHiddenWidgetButton span .fa-toggle-on {
    font-size: 1em;
    top: 0px;
    left: 13px;
    opacity: 0.4;
}
#showHiddenWidgetButton span .fa-toggle-on {
    margin-left: 20px;
}

.grid-stack-item-content {
    background: white;
    border: solid 1px var(--Grey4);
    box-shadow: var(--defaultCardShadow);
}
.mWidget .notifWidget ul {
    margin-bottom: 0;
}
.mWidget .notifWidget li {
    list-style: square;
}
.mWidget .chartPlaceHolder {
    flex: 1 1 auto;
    cursor: pointer;
    display: flex;
}
.mWidget .chartPlaceHolder i {
    font-size: 60px;
    line-height: 80px;
    text-align: center;
    width: 100%;
    color: var(--Grey4);
    align-items: center;
}
.TeoWidget #itemSelectionTeo,
.TeoWidget #TEOContent .coverage {
    display: none;
}
.GenericDashboardWidget .containerdiv {
    overflow: hidden !important;

    max-height: unset !important;
}
.GenericDashboardWidget .panel {
    margin: 0 !important;
    border: 0;
}

.GenericDashboardWidget .panel-heading {
    display: none;
}
.inlineView {
    cursor: pointer;
}

.inlineViewer {
    position: fixed;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 20px;
    z-index: 2222;
}

#treeLoadWait {
    position: absolute;
    background-color: #eeeeee66;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -20px; /* to compensate for the padding of the tree */
}

.treeLoadWait > div {
    font-size: 50px;
}
.dlgLinkButton {
    float: left;
    margin-top: 12px;
    margin-left: 6px;
    color: blue;
    cursor: pointer;
}

.importedFolder {
    margin-right: 18px;
    margin-left: -12px;
    font-size: x-small;
}
.importedItem {
    font-size: x-small;
    margin-left: 12px;
}

.importLine {
    margin-bottom: 10px;
    padding: 6px;
    border: 1px solid var(--Grey5);
    -webkit-border-radius: var(--defaultBorderRadius);
    -moz-border-radius: var(--defaultBorderRadius);
    border-radius: var(--defaultBorderRadius);
}

.importLine:hover {
    background-color: var(--Grey7);
}

.importLine a {
    margin-left: 12px;
}

div.separator {
    margin-top: 16px;
    height: 32px;
}

div.separator div {
    width: 100%;
    height: 10px;
    border-bottom: 1px solid #eee;
}

div.separator span {
    font-size: 16px;
    background-color: #fff;
    padding-right: 10px;
    font-weight: 600;
}

th,
h3 {
    font-weight: 500;
}
.ui-dialog .ui-dialog-title {
    font-weight: 500;
}
.editable {
    border-bottom: none;
    font-size: 15px;
    line-height: 150%;
}

.editable-inline {
    line-height: 18px;
}
.editable-inline input {
    height: 30px;
}
.editable-click::after {
    content: "\f304";
    font-size: 13px;
    padding: 2px 10px;
    cursor: pointer;
    font-family: var(--FontAwesome);
}

.editableform .form-control,
.editable-empty {
    width: 18cm !important;
    padding: 8px 0;
    /* margin-top: 12px; */
    font-size: 16px;
    padding-left: 3px !important;
    min-width: 350px;
    border: solid 1px;
    color: grey;
    border-radius: var(--smallBorderRadius, 5px);
    font-size: 26px;
    line-height: 18px;
    height: 40px;
}
.editable-empty {
    line-height: 24px;
}

.editable.editable-click.editable-empty::after {
    float: right;
}
span.refId.refIdHyper:empty {
    display: none;
}

.notificationBtnMenu {
    background: transparent;
    border: none;
}
.notificationBtnMenu:hover .notificationIcon {
    background: var(--NotifColor);
    border-color: var(--White);
    color: var(--NotifColorBG);
}
.btn:hover:has(.notificationAction) {
    border-radius: 4px;
    box-shadow: var(--defaultCardShadow);
}

btn-link:hover,
.btn-link:focus,
.btn-link:active {
    color: var(--Accent-Dark);
}
.btn-link {
    padding: 0 var(--defaultMicroSpacing);
    color: var(--Accent);
}
.tox-editor-header {
    padding: 0 !important;
}

.textEditContainer {
    position: relative;
}
.textEditToggle {
    position: absolute;
    z-index: 100;
    right: 10px;
    top: 8px;
    font-size: 12px;
    padding: 2px 10px;
    cursor: pointer;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
}

.textEditToggleEdit {
    padding: 2px 0px 0px 10px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 13px;
}
.textEdit.textEditToggleEdit:hover {
    cursor: pointer;
}

.textEditTogglePreview:after {
    content: "\f06e";
}
.textEditToggleEdit:after {
    content: "\f304";
}

.changeProjectId,
.changeProjectId {
    margin-left: 12px;
}

.shadow-root {
    color: var(--Text);
    overflow: hidden;
    padding-left: 4px;
    margin-left: 4px;
    border-left: solid 1px var(--Grey8);
}
.empty-root {
    display: none;
}

#btnSave,
#btnCancel {
    min-width: 120px;
}

.rtEmpty {
    color: var(--Grey3);
    color: #bbb;
    font-size: 12px;
}

input.searchNoX {
    padding-left: 32px;
}

.open {
    position: relative;
}

div:first-child:is(.clearFilter) {
    display: flex;
    justify-content: flex-end;
}

[role="dialog"] .searchBoxFilter,
[role="dialog"] .treeLabel {
    display: none !important;
}
[role="dialog"] .fancytree-icon {
    margin-left: 0px !important;
}

.btn-label,
.btn-label.dropdown-toggle {
    border-radius: 5px;
    font-size: 12px;
    padding: 0px 5px;
    height: 24px;
    line-height: unset;
}
.labelTools .dropdown-toggle {
    display: block;
    padding-right: 24px !important;
}
.labelTools .dropdown-toggle .caret {
    position: absolute;
    right: 8px;
    top: 0px;
}
.btn span {
    line-height: 22px;
}

div#taskFilterToolbar .btn-group .btn {
    line-height: 1;
}
#progressCtrlContainer {
    flex-direction: row;
    padding-top: 0;
}

.bootstrap-datetimepicker-widget li:hover {
    background: transparent;
    color: var(--Text) !important;
    white-space: unset;
}

.bootstrap-datetimepicker-widget li.collapse {
    display: none;
}
.bootstrap-datetimepicker-widget li.collapse.in {
    display: block;
}

.bootstrap-datetimepicker-widget li a {
    display: inline;
}
.uplinkIcon {
    margin-bottom: 12px;
    border-radius: 4px;
    margin-right: 8px;
    padding: 4px;
    margin-left: 8px;
}
#itemLabelDashboardList td.labelList .baseControlHelp {
    display: none;
}
#itemLabelDashboardList td.labelList .baseControl {
    margin-top: 0;
}

#itemLabelDashboardList td.title {
    vertical-align: middle;
}
.selectItemDlgTreeContainer {
    flex-grow: 1;
    flex-shrink: 1;
    /* height is more or less irrelevant there. we just need to have some fixed value to be used by the flexbox as a base,
    expanding it further is handler by the flex-grow property */
    height: 1px;
}

.btnCodeFormat {
    float: right;
    border: solid 1px var(--Grey5);
    margin-left: 4px;
    height: 28px;
}
.wtLabelDeleteButton {
    margin-left: 8px;
    margin-top: 10px;
}
#labelUI {
    width: 700px;
}

.tippy-content {
    --Text: var(--White);
    font-size: 12px;
    line-height: 1.4;
}

.tippy-content .smarttext_description p {
    margin: 0;
}

.btn-label.labelInHistory {
    max-width: revert;
    text-overflow: revert;
    opacity: 1;
}
.ft_markAsTemplate .signatureInfo {
    padding-left: 32px;
}
.ft_markAsTemplate .signatureInfo input {
    border-radius: 0;
}
.btn-plain {
    appearance: none;
    border: none;
    padding: 0;
    box-shadow: none;
    background: none;
    font-size: inherit;
}

.searchBox__checkbox {
    display: flex;
    align-items: center;
}

.searchBox__checkbox._all {
    margin-bottom: 16px;
}

input[type="checkbox"].searchBox__checkbox-input {
    margin-top: 0;
    transform: translateY(-1px); /* visually looks a bit more aligned */
}

.searchBox__checkbox-label {
    font-weight: normal;
    font-style: italic;
    padding-left: 10px;
}

.newSectionWrapper {
    align-items: flex-start;
    width: 100%;
    flex-wrap: nowrap;
}

.newSectionName {
    flex-grow: 1;
    width: auto;
    height: 38px;
}

.newSectionType {
    flex: 0 0 250px;
}

/* as far as I can see there is no option to disable (or limit) input growth via JS API */
.newSectionType .selectize-input > input {
    max-width: 200px !important; /* 200 = 250 (size of the container) - 16 (left padding) - 32 (right padding) - 2 (borders) */
}

label.toogleNoAction {
    align-items: center;
    margin: 0;
}

input[type="checkbox"].toggleNoAction__input {
    margin-left: 12px;
    margin-top: 0;
    margin-bottom: 0;
}

.toggleNoAction__label {
    font-weight: 300;
    margin: 0;
}

.merge-next-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
}
#analytics-tile-container {
    display: flex;
    gap: 16px;
    padding: 16px;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}
#analytics-container {
    display: flex;
    width: 100%;
    height: 100%;
    background: white;
    flex-direction: row;
    align-content: flex-start;
}

#analytics-tile-container {
    display: flex;
    gap: 16px;
    padding: 16px;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    overflow: auto;
}
#analytics-container {
    display: flex;
    gap: 16px;
    width: 100%;
    height: 100%;
    background: white;
    flex-direction: row;
    align-content: flex-start;
}
#analytics-container #pluginList {
    padding: 16px;
    flex-shrink: 0;
    width: 200px;
    height: 100%;
}

#analytics-tile-container > div {
    height: 350px;
    width: 500px;
}
plugin-list {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    width: 100%;
    height: 100%;
    background: white;
    overflow: auto;
}

.token-dialog {
    height: 100%;
    width: 100%;
}

.token-dialog__new-token-display {
    margin: auto;
    text-align: center;
}

.token-dialog__new-token-display-message {
    margin-bottom: 10px;
    white-space: nowrap;
    font-weight: 500;
}

.token-dialog__new-token-display-value {
    margin-bottom: 10px;
    white-space: nowrap;
}

.token-dialog__new-token-display-copied-message {
    color: #164c3f;
    margin-top: 10px;
}

.token-dialog__new-token-display-section {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#analytics-header {
    margin: 16px;
}

.merge-compare__wrapper {
    display: flex;
    justify-content: flex-start;
}

/* for graphs inserted from the dashboard */
.c3:has(:is(del, ins) :is(img, svg):only-child) {
    max-height: none !important;
}

ins {
    background: var(--Success-Border, #d2ead5);
    text-decoration: none;
}

ins .highlight-diff,
ins > .commentDate,
[data-inserted="true"] {
    background: var(--Success-Border, #d2ead5);
}

del:has(:is(img, svg, .c3):only-child),
ins:has(:is(img, svg, .c3):only-child) {
    line-height: 0;
    display: inline-block;
    margin-bottom: 4px;
}

ins:has(:is(img, svg, .c3):only-child) {
    border: 8px solid var(--Success-Border, #d2ead5);
}

del {
    text-decoration-color: var(--Danger-Hover, #b50e32);
    text-decoration-thickness: 2px;
}

.htmldiff__empty-table del {
    text-decoration: none;
}

.htmldiff__empty-table,
del:has(:is(img, svg, .c3):only-child) {
    border: 8px solid var(--Danger-Hover, #b50e32);
    position: relative;
    overflow: hidden;
}

.htmldiff__empty-table:before,
.htmldiff__empty-table:after,
del:has(:is(img, svg, .c3):only-child):before,
del:has(:is(img, svg, .c3):only-child):after {
    --size: 6px; /* 8px (border-size) / 1.4 = 5.7, rounding it up to the integer */
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--Danger-Hover, #b50e32);
}

.htmldiff__empty-table:before,
del:has(:is(img, svg, .c3):only-child):before {
    clip-path: polygon(
        0 var(--size),
        calc(100% - var(--size)) 100%,
        100% 100%,
        100% calc(100% - var(--size)),
        var(--size) 0,
        0 0
    );
}

.htmldiff__empty-table:after,
del:has(:is(img, svg, .c3):only-child):after {
    clip-path: polygon(
        0 calc(100% - var(--size)),
        calc(100% - var(--size)) 0,
        100% 0,
        100% var(--size),
        var(--size) 100%,
        0 100%
    );
}

/* displayed entered text as is, with line breaks */
.ft_text {
    white-space-collapse: preserve;
}

/* hiding deleted checkbox icon because showing it doesn't make much sense */
del > .history-unchecked,
del > .history-checked,
del:has(.test-step__result:only-child) {
    display: none;
}

ins:has(review-table) {
    background: inherit;
}

del review-table {
    display: none;
}

.merge-compare__wrapper del:has(a smart-link) {
    display: none;
}

.merge-compare__wrapper ins:has(a smart-link) {
    background: none;
}

.ft_test_steps_result .slick-cell:has(:is(del > .test-step__result, ins > .test-step__result)) {
    padding: 0;
}

.labelsContainer,
.labelsTitle {
    margin-top: var(--defaultMediumSpacing);
}

.labelsTitle + .labelsContainer {
    margin-top: var(--defaultSmallSpacing);
}

.token-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
}

.token-disabled {
    color: #9e9e9e;
    line-break: anywhere;
}

.token-disabled-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #414554;
    padding: 2px 8px;
    border-radius: 50px;
    border: 1px solid #9e9e9e;
    font-size: 0.85em;
    height: 20px;
    line-height: 20px;
}

.ft_riskFolder {
    width: 100%;
}

.ft_riskFolder .table {
    width: auto;
    max-width: unset;
    table-layout: fixed;
}
.ft_riskFolder {
    position: relative;
}

.ft_riskFolder div.uplinks {
    width: max-content;
    max-width: 300px;
}
.ft_riskFolder .uplinks p {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ft_riskFolder .horizontal-scroll {
    overflow-x: scroll;
    position: relative;
}

.ft_riskFolder textarea {
    min-width: 300px;
    height: 100%;
}
.ft_riskFolder input {
    min-width: 300px;
    width: unset;
    height: 100px;
}
.ft_riskFolder input[type="text"] {
    min-width: 300px;
    width: unset;
    height: 100px;
}
.ft_riskFolder .riskTextArea {
    min-width: 300px;
    width: unset;
    height: 100%;
}
.ft_riskFolder .tinyRisks li {
    display: flex;
}

.ft_riskFolder .riskTableBody tr.riskDetails {
    background: white;
}

.ft_riskFolder .riskIdCell {
    position: sticky;
    background-color: var(--Grey9);
    left: 0px;
    z-index: 1;
    text-wrap: nowrap;
    border-left: none;
}
.ft_riskFolder .riskIdCell i {
    color: var(--red-500);
    margin-left: 4px;
}

.ft_riskFolder th.riskIdCell {
    background: white;
}

.risk-label-combined .riskTable td {
    text-wrap: nowrap;
}
.risk-label-combined .riskReductionLabel {
    text-wrap: nowrap;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 4px;
    display: block;
    background: white;
    color: black;
}
.risk-label-combined .risksum {
    line-height: 26px;
    padding: 6px 12px 6px 12px;
    height: unset !important; /* undo the height set */
    border-radius: 4px;
    border: solid 1px var(--Grey5);
}
.ft_risk2:has(.risk-label-combined) {
    overflow-y: auto;
}
.risk-label-combined {
    padding: 0;
}
.risk-label-combined .RAM,
.risk-label-combined .RBM {
    padding-left: 8px !important; /* fix padding */
}
.risk-label-combined .riskReductionLabel {
    padding-left: 0px !important; /* fix padding */
}

.risk-label-combined th:last-child,
.risk-label-combined td:last-child {
    width: 200px;
}

.strikethrough {
    text-decoration: line-through;
}

.line-break-anywhere {
    line-break: anywhere;
}

.admin-browser-warning {
    color: red;
    line-height: 50px;
    pointer-events: none;
}