html{
    height: 100%;
}
body{
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    margin:0;
}

img{
    max-height: 100%;
    max-width: 100%;
}

#root{
    flex: 1;    
}

.wrapper_inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    height:100%;
    overflow: initial;
    background-color: #f0f2f5;
}

.contentFrontend.ant-layout-content{
    min-height: calc(100vh - 104px) !important;
}
.ant-layout-content{
    min-height: calc(100vh - 64px) !important;
}
.wrapper_inner > .content{

    display:flex;

    flex: 1;
    min-height: 100vh;
}
.content_inner{
    margin:0 auto;
    flex:1;
    width: 100%;
}


.contentBackend{
    height:1px;
}
.contentBackend .content_inner{
    max-width: 1300px;
}
.content_inner_padded{
    max-width: 100%;
    margin:0 auto;
    flex:1;
    padding-top: 100px!important;
    display:flex;
    flex-direction:column;
}
.content_inner_padded > .container{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.content_narrow{
    max-width: 1300px;
    margin: auto;
}

.navigation-drawer .ant-drawer-body{
    padding:0px;
}

.container{
    container-type: inline-size;
}

.projectSelector > .ant-select-selector{
    padding:4px 20px !important;
    border-radius:10px !important;
}

.rowPaddingLeft{
    padding-left:114px;
}

.ant-menu-item-icon{
    width:30px;
    text-align: center;
}
.ant-menu-black{
    background-color: black !important;

    .ant-menu-submenu .ant-menu-title-content,
    > .ant-menu-item a{
        color: white !important;
    }
}
.ant-menu-light{
    background-color: #e4e8ef !important;

    &.ant-menu-horizontal{
        border-bottom-color: #e4e8ef;
    }
}


.scroll_header_top_area.light{
    background-color: white;
    box-shadow: 0 -6px 10px 15px rgb(0 0 0 / 10%);
}


.ant-menu-clear{
    background-color: transparent !important;
    border-bottom: none !important;

    > .ant-menu-sub{
        background-color: rgb(243,245,248) !important;
    }
    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
        background-color: #000000;
    }
}
.ant-menu-submenu.ant-menu-clear .ant-menu-item a{
   color: black !important;
}
.ant-menu-submenu .ant-menu-item:hover{
    background-color: rgb(249,250,253);
}

.menu-login a{
    background:#00a3fa;
    border-radius:30px;
    margin:0 10px;
    transition:all 450ms;
    display:block;
    line-height:5px;
    text-align: center;
}
.menu-login a > span{
    color:#fff;
}
.menu-login:after,
.menu-login:hover:after{
    border-bottom:0px solid transparent !important;
    
}

.menu-login a:hover{
    transform: translateY(-3px) !important;
}

/* Override the default arrow positioning */
.ant-dropdown.flipped > .ant-dropdown-menu-vertical .ant-dropdown-menu-title-content {
    margin-left: 14px;
}
.ant-dropdown.flipped > .ant-dropdown-menu-vertical .ant-dropdown-menu-submenu-arrow {
    inset-inline-start: 8px;
    transform: rotate(180deg);
    width: 8px;
}



.scroll_header_top_area.clear .ant-menu-clear .ant-menu-submenu .ant-menu-title-content,
.scroll_header_top_area.clear .ant-menu-clear a{
    color: white !important;;
}
.scroll_header_top_area.light .ant-menu-clear .ant-menu-submenu .ant-menu-title-content,
.scroll_header_top_area.light .ant-menu-clear a{
    color: black !important;
}



.main_menu_drawer .ant-menu-item:hover,
.main_menu_drawer .ant-menu-item-active,
.main_menu_drawer .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.main_menu_drawer .ant-menu-submenu-active,
.main_menu_drawer .ant-menu-submenu-title:hover {
    color: #1890ff !important;
}
.main_menu_drawer .ant-menu-item {
    color: black;
}

.main_menu_drawer .ant-menu-submenu .ant-menu-title-content i{
    display: none;
}

@media only screen and (max-width: 1500px) {
    .ant-menu{
        font-size: 12px !important;
    }
}
@media only screen and (min-width: 1101px) and (max-width: 1500px) {
    .ant-menu .ant-menu-item .ant-menu-item-icon + span,
    .ant-menu .ant-menu-submenu-title .ant-menu-item-icon + span,
    .ant-menu .ant-menu-item .anticon + span,
    .ant-menu .ant-menu-submenu-title .anticon + span {
        margin-inline-start: -10px;
    }
}
/* Logo sizing across the header breakpoints.
 *
 * The container is a flex item next to the menu, so without flex:none the
 * browser happily shrinks it past its declared width — the wordmark was being
 * squeezed to 72px at 985px wide, 22px at 935px, and to nothing below 885px.
 *
 * .navLogo is background-size:contain on a roughly 4.4:1 mark, so the
 * container width is what sets the rendered height. Widths below are chosen
 * against the menu's measured minimum (~763px) plus the header's 110px of
 * horizontal padding: 260px needs ~1133px of viewport, 160px needs ~1033px.
 * Below NAV_BREAKPOINT (1160px, see layout/frontend.jsx) the menu is replaced
 * by the drawer, so nothing competes with the logo and it can be larger. */
.mainNavLogoContainer{
    flex: none;
}
@media only screen and (max-width: 1159px) {
    .mainNavLogoContainer{
        width:200px;
    }
}
@media only screen and (min-width: 1160px) and (max-width: 1299px) {
    .mainNavLogoContainer{
        width:160px;
    }
}
@media only screen and (min-width: 1300px) {
    .mainNavLogoContainer{
        width:260px;
    }
}
@media only screen and (max-width: 1110px) {
    .header_bottom {
        padding: 0 40px;
    }
}


.navLogo{
    visibility: visible;
    display: block;
    background-size: contain;
}

/* Fill the header row. A fixed 90px box inside the 100px row left the mark
   sitting 5px above centre, and capped how tall it could grow once the logo
   container widened on phones. The container is a stretched flex item, so its
   height is definite and this resolves. */
.scroll_header_top_area .navLogo{
    height: 100%;
}

/* The drawer body has no row to fill, so keep an explicit height there. */
.main_menu_drawer .navLogo{
    height: 90px;
}

.main_menu_drawer .navLogo,
.scroll_header_top_area .navLogo{
    background-repeat: no-repeat;
    background-position: center;
}




@media (max-width:700px){
    .rowPaddingLeft{
        padding-left:0px;
    }

    .ant-menu-light{
        background-color: #dcdee2 !important;
        color: black !important;
    }
}

.ant-menu-overflow{
    justify-content: right;
}
.ant-menu-overflowed-submenu{
    margin: auto !important;
}
.ant-menu-overflowed-submenu{
    margin: auto;
    min-width: 100%;
    text-align: center;
}


.ant-list.antList1 .ant-list-header{
    padding: 7px 0px;
    background-color: rgb(255 200 125);;
    text-align: center;
}

/* Forms */

.ant-form .ant-form-item-control-input-content > input,
.ant-form .ant-form-item-control-input-content .ant-input-wrapper > input,
.ant-form .ant-form-item-control-input-content .ant-input-number > .ant-input-number-input-wrap > input,
.ant-form .forceFocus > input{
    min-height: 47px;
    padding-top: 16px;
}
.ant-form .ant-select-selection-placeholder,
.ant-form input::placeholder{
    color:#c5c5c5;
}
.ant-select-selection-search{
    display:flex;
}
.ant-select-selection-search > .ant-select-selection-search-input{
    margin:auto !important;
}

.ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before{
    content: '' !important;
}
.ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::after{
    display: inline-block;
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
}

.ant-form-item.required input::placeholder{
    color: pink;
}

.ant-form .ant-form-item-control-input-content > input.ant-input{
    background-color: white !important;
}

.ant-form .ant-form-item-control-input-content:has(> textarea){
    background-color: white !important;
    border: none !important;
    border-radius: 10px !important;
}

.ant-form .ant-form-item-control-input-content:has(> textarea:focus){
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.ant-form .custom-form-item .ant-form-item{
    margin-bottom:0;
}

.custom-form-item textarea{
    margin-top: 22px;
    box-shadow: initial !important;
    background-color: transparent !important;
    padding-top: 0px !important;
    border: none;
}


.custom-form-item {
    position: relative;
    margin-bottom: 20px;
}

.custom-form-item input {
    padding-top: 10px;
    background: none;
    outline: none;
    border: none;
    width: 100%;
}
.custom-form-item .ant-input-number {
    background: none;
    outline: none;
    border: none;
    width: 100%;
    border-radius: 10px;
}

.custom-form-item .custom-label {
    position: absolute;
    top: 17px;
    left: 11px;
    font-size: 14px;
    color: #8b8b8b;
    transition: all 0.3s ease;
    pointer-events: none;
}
.custom-form-item:has(.ant-input-prefix) .custom-label {
    left:35px;
}

.custom-form-item.required > .ant-form-item:has(input:not([type="search"]):is([value=""])):not(.ant-select-selection-search-input) + .custom-label::after,
.custom-form-item.required > .ant-form-item:has(.ant-select-selector):not(:has(.ant-select-selection-item)) + .custom-label::after,
.custom-form-item.required > .ant-form-item:has(.ant-input:is([placeholder]:placeholder-shown)) + .custom-label::after,
.custom-form-item.required > .ant-form-item:has(.myCKEditor:not(.has-value)) + .custom-label::after
{
    content: " *";
    color: red !important;
}

.custom-form-item input:focus {
    border-bottom-color: #555;
}

.ant-form-item:has(input:is([value]:not([value=""])):not(.ant-select-selection-search-input)) + .custom-label,
.ant-form-item:has(.ant-select-selection-item) + .custom-label,
.ant-form-item:has(input:focus) + .custom-label,
.custom-form-item:has(textarea:focus) > .custom-label,
.ant-form-item:has(.ant-input[placeholder]:not(:placeholder-shown)) + .custom-label,
.custom-form-item:has(.ant-input > textarea[placeholder]:not(:placeholder-shown)) > .custom-label,
.ant-form-item:has(input[placeholder]:not(:placeholder-shown)) + .custom-label,
.ant-form-item:has(.ant-input:focus) + .custom-label,
.ant-form-item:has(.has-value) + .custom-label,
.ant-form-item:has(.ck-focused) + .custom-label,
.ant-form-item:has(input:-webkit-autofill) + .custom-label,
.custom-form-item.forceFocus > .ant-form-item + .custom-label,
.custom-form-item.forceFocus > .ant-input-number + .custom-label,
.custom-form-item.forceFocus > input + .custom-label,
.custom-form-item.forceFocus > input + .custom-label,
.custom-form-item:has(.myCKEditor:not(.no-toolbar)) > .ant-form-item + .custom-label
{
    font-size: 14px;
    top: 0px;
    color: #4cadc9;
}

.ant-input-affix-wrapper-focused, .ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
    z-index: 0 !important;
}

/* Multi-line placeholder helper. Sits one line below the label-as-placeholder,
   inside the input visual area. Fades out when the label floats up (focus or
   non-empty value). Add as a sibling of .custom-label inside .custom-form-item. */
.custom-form-item .custom-help {
    position: absolute;
    top: 50px;
    left: 11px;
    right: 11px;
    font-size: 13px;
    line-height: 1.4;
    color: #8b8b8b;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.custom-form-item:has(.ant-input-prefix) .custom-help {
    left: 35px;
}

.ant-form-item:has(input:is([value]:not([value=""])):not(.ant-select-selection-search-input)) ~ .custom-help,
.ant-form-item:has(.ant-select-selection-item) ~ .custom-help,
.ant-form-item:has(input:focus) ~ .custom-help,
.custom-form-item:has(textarea:focus) > .custom-help,
.ant-form-item:has(.ant-input[placeholder]:not(:placeholder-shown)) ~ .custom-help,
.custom-form-item:has(.ant-input > textarea[placeholder]:not(:placeholder-shown)) > .custom-help,
.ant-form-item:has(input[placeholder]:not(:placeholder-shown)) ~ .custom-help,
.ant-form-item:has(.ant-input:focus) ~ .custom-help,
.ant-form-item:has(.has-value) ~ .custom-help,
.ant-form-item:has(input:-webkit-autofill) ~ .custom-help,
.custom-form-item.forceFocus > .ant-form-item ~ .custom-help
{
    opacity: 0;
}

form.style1 .custom-form-item.darker input,
form.style1 .custom-form-item.darker textarea,
form.style1 .custom-form-item.darker .ant-input-affix-wrapper,
form.style1 .custom-form-item.darker .ant-select-selector,
form.style1 .custom-form-item.darker .ant-picker{
    background-color: #dde8f1 !important;
}
form.style1 .custom-form-item.darker .ant-select-multiple .ant-select-selection-item{
    background-color: #d2dadf !important;
}


/* General */

.flexColumn{
    display: flex;
    flex-direction: column;
}
.flexItem{
    flex: 1 1 0%;
    height: 1px;
}
.flexItem > .ant-form-item-row{
    flex:1;
    height: 1px;
    flex-direction: column;
}
.flexItem .ant-form-item-control-input,
.flexItem .ant-form-item-control-input-content{
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}


.ellipsis1,
.ellipsis2,
.ellipsis3,
.ellipsis4,
.ellipsis4 > pre,
.ellipsis10,
.ellipsis10 > pre{
    display: -webkit-box;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}
.ellipsis1{
    -webkit-line-clamp: 1;
}
.ellipsis2{
    -webkit-line-clamp: 2;
}
.ellipsis3{
    -webkit-line-clamp: 3;
}
.ellipsis4,
.ellipsis4 > pre{
    -webkit-line-clamp: 4;
}
.ellipsis10,
.ellipsis10 > pre{
    -webkit-line-clamp: 10;
}

.hrTitle{
    border-bottom: 1px solid lightgray;
    width: 80%;
    margin: auto;
    text-align: center;
    position: relative;
    top: -12px;
    opacity: .3;
    cursor: pointer;
    user-select: none;
}
.hrTitle > span{
    background-color: white;
    top: 12px;
    position: relative;
    padding: 0 15px;
}
.hrTitle:hover{
    opacity: 1;
}

.flex-container{
    display:flex;
}
.flex-container > *{
    flex:1;
}


/* Upload */

.ant-upload{
    width:100%;
}
form.style1 .custom-form-item .ant-upload-list{
    min-height: 30px;
}
form.style1 .custom-form-item .ant-upload-list-item.ant-upload-list-item-done {
    height: 80px;
}
form.style1 .custom-form-item .ant-upload-list-item-thumbnail {
    align-self: flex-end;
}
.ant-upload-list .ant-upload-list-item-container{
    width:100%;
}

.ant-upload .btnContainer{
    display: flex;
}
.ant-upload-wrapper:not(.leftAligned) .ant-upload .btnContainer{
    justify-content: right;
}

.UploadAtMax {
    > *{
        display:flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }
    .ant-upload-drag{
        min-width:245px !important;
        /*margin-left:20px;*/
        flex: 1 1;
    }
    .ant-upload-list{
        flex:999999;
    }
    .ant-upload-list-item{
        margin-top: 0px;
    }
}

.uploaderWrapper{
    &.addBottom  {
        display: flex;
        flex-direction: column-reverse;
    }
    &.buttonRight > .ant-upload > span > div{
        display: flex;
    }
    &.buttonRight > .ant-upload > span > div > .ant-btn{
        margin-left: auto;
    }
    &.addBottom .ant-upload-list-item{
        margin-top: 0;
        margin-bottom: 8px;
        background-color: white;
    }
}

.ant-upload-list-item:hover{
    background-color: rgb(247 247 247) !important;
}
.ant-upload-list-item-actions > button{
    padding:5px !important;
}


.readOnly{
    &.ant-input-group-wrapper{
        border-radius: 10px;
        top: -4px;
        position: relative;
    }
    &.ant-input{
        border-radius: 10px;
        background-color: rgb(240, 242, 245);
        top: -4px;
    }
    .ant-input{
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: rgb(240, 242, 245);
    }
    .ant-input-group-addon{
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;

        > button{
            border-top-right-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
        }
    }
}

@media only screen and (max-width: 900px) {
    .ant-form-item{
        margin-bottom: 6px !important;
    }
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    textarea,
    select,
    .ant-select-selector{
        padding: 18px 15px 8px !important;
    }
    .ant-input-group-addon .ant-btn-icon{
        padding: 11px 8px 11px !important;
    }

    .ant-input-search > .ant-btn.ant-input-search-btn{
        height: 54px !important;
        width: 54px !important;
    }


    :not(.massSelect):not(.autoHeight):not(.ant-pagination-options-size-changer) > .ant-select-selector{
        height: initial !important;
    }

    h1, h2, h3{
        margin: 0 0 3px !important;
        padding-top: 10px;
    }

    .ant-form.ant-form-horizontal label{
        padding:0px !important;
    }
    .ant-col-xs-24.ant-form-item-label{
        padding:0px !important;
    }
}
@media only screen and (min-width: 900px) {
    :not(.massSelect):not(.autoHeight):not(.ant-pagination-options-size-changer) > .ant-select-selector{
        height: initial !important;
    }
    
    .custom-form-item :not(.massSelect):not(.autoHeight):not(.ant-pagination-options-size-changer) > .ant-select-selector{
        padding: 19px 15px 6px !important;
    }
}

.ant-input-group-addon .ant-select > .ant-select-selector,
.ant-input-number-group-addon .ant-select > .ant-select-selector,
.ant-input-group .ant-input-group-addon .ant-select > .ant-select-selector,
.ant-input-number-group .ant-input-number-group-addon .ant-select > .ant-select-selector{
    height: auto !important;
    padding: 11px 15px 9px !important;
}


.ant-picker{
    width:100%;
    padding: 0px 10px !important;
}

/* Form (style1) */
form.style1{
    font-family: Soleil;
}
form.style1 h3{
    color: #50A6F1;
}
form.style1 .ant-row{
    column-gap:20px;
}
form.style1 .custom-form-item{
    .ant-form-item-control-input input:not(.ant-input-number-group-addon input):not(.ant-input-group-addon input),
    .ant-form-item-control-input textarea,
    .ant-form-item-control-input .ant-input-affix-wrapper,
    .ant-form-item-control-input .ant-select-selector:not(.ant-input-number-group-addon .ant-select-selector):not(.ant-input-group-addon .ant-select-selector),
    .ant-form-item-control-input .ant-picker,
    .ant-form-item-control-input .custom-form-item .ant-upload-wrapper{
        color: black;
        border: none !important;
        border-radius: 10px !important;
        line-height: 26px;
        padding: 20px 10px 8px 10px;
    }
}

form.style1 .custom-form-item:not(:has(.custom-label)) .ant-form-item-control-input input:not(.ant-input-number-group-addon input):not(.ant-input-group-addon input),
form.style1 .custom-form-item:not(:has(.custom-label)) .ant-form-item-control-input textarea,
form.style1 .custom-form-item:not(:has(.custom-label)) .ant-form-item-control-input .ant-input-affix-wrapper,
form.style1 .custom-form-item:not(:has(.custom-label)) .ant-form-item-control-input .ant-select-selector:not(.ant-input-number-group-addon .ant-select-selector):not(.ant-input-group-addon .ant-select-selector),
form.style1 .custom-form-item:not(:has(.custom-label)) .ant-form-item-control-input .ant-picker,
form.style1 .custom-form-item:not(:has(.custom-label)) .ant-form-item-control-input .custom-form-item .ant-upload-wrapper{
    padding-top: 8px !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #f5f7fa inset !important;
    -webkit-text-fill-color: black !important;
    transition: background-color 5000s ease-in-out 0s;
}
form.style1 .ant-input-number-group-addon .ant-select-selector,
form.style1 .ant-input-group-addon .ant-select-selector{
    border-radius: 9px !important;
}
form .ant-form-item.skinny input{
    min-height: auto;
    padding: 8px 10px 8px 10px;
}
form input.clearBG{
    background-color: transparent !important;
}
form.style1.whiteBG input:not(.clearBG),
form.style1.whiteBG textarea,
form.style1.whiteBG .ant-form-item-control-input-content:has(>textarea),
form.style1.whiteBG .ant-input-affix-wrapper,
form.style1.whiteBG .ant-select:not(.clearBG) > .ant-select-selector,
form.style1.whiteBG .ant-picker,
form.style1.whiteBG .ant-mentions,
form.style1.whiteBG .ant-mentions>textarea{
    background-color:#edf3f7 !important;
}
/* antd 6 draws a select's chosen value as text with a transparent search
   input laid over it. The rule above would fill that input and hide the
   value, so the fill goes on the select's own box instead. */
form.style1.whiteBG .ant-select input.ant-select-input:not(.clearBG){
    background-color: transparent !important;
}
form.style1.whiteBG .ant-select:not(.clearBG) > .ant-select-content,
form.style1.whiteBG .ant-select:not(.clearBG) > .ant-select-selector{
    background-color:#edf3f7 !important;
}
form.style1 .ant-select-selection-overflow-item > .ant-select-selection-item{
    padding: 7px;
    height: 34px;
    border-radius: 5px;
}
form.style1.whiteBG .ant-select-selection-overflow-item > .ant-select-selection-item{
    background: #ffffff;
}
form.style1 input.ant-input-disabled{
    background-color: #f0f2f3 !important;
}

/* --- Select, antd 6 -------------------------------------------------------
   antd 6 replaced `.ant-select-selector` with `.ant-select-content` and moved
   the painted box out to `.ant-select` itself. Every style1/whiteBG rule above
   names the old class, so a Select got none of them — and worse, its inner
   `.ant-select-input` matched the generic `.custom-form-item input` rules and
   was painted as if it were the field. The result was a bare white antd box
   with a filled sliver inside it.

   These rules paint the element that is actually the box, and stop painting
   the one that is not. */
form.style1 .custom-form-item .ant-select{
    border: none !important;
    border-radius: 10px !important;
    min-height: 54px;
    padding: 20px 10px 8px 10px;
}
form.style1.whiteBG .custom-form-item .ant-select{
    background-color: #edf3f7 !important;
}

/* The inner search input is not the field. */
form.style1 .custom-form-item .ant-select .ant-select-input{
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto;
    min-height: 0;
}
form.style1 .custom-form-item .ant-select .ant-select-content{
    padding: 0;
}

/* Multiple-select tags sit inside that padding rather than fighting it. */
form.style1 .custom-form-item .ant-select-multiple .ant-select-content{
    row-gap: 4px;
}

/* The label floats once a value is chosen. antd 6 marks that on the content
   element; the rules further up only knew the antd 5 `.ant-select-selection-item`. */
.ant-form-item:has(.ant-select-content-has-value) + .custom-label{
    font-size: 14px;
    top: 0px;
    color: #4cadc9;
}
.custom-form-item.required > .ant-form-item:has(.ant-select-content:not(.ant-select-content-has-value)) + .custom-label::after{
    content: " *";
    color: red !important;
}

/* InputNumber and DatePicker have the same two-layer shape as Select: the
   wrapper is the painted box and the <input> inside it is transparent. The
   generic rules above paint any <input> in a form item, so both were being
   drawn twice — a filled pill inset by the wrapper's own padding, which is why
   a number field looked narrower and differently padded than the text field
   beside it. */
form.style1 .custom-form-item .ant-input-number,
form.style1 .custom-form-item .ant-picker{
    border: none !important;
    border-radius: 10px !important;
    width: 100%;
    min-height: 54px;
    /* !important only to beat the site-wide `.ant-picker { padding: 0 10px
       !important }` further up, which leaves no room for the floating label. */
    padding: 20px 10px 8px 10px !important;
    /* Clips the stepper buttons to the rounded corners. */
    overflow: hidden;
}
form.style1.whiteBG .custom-form-item .ant-input-number,
form.style1.whiteBG .custom-form-item .ant-picker{
    background-color: #edf3f7 !important;
}

/* The inner input is not the field. */
form.style1 .custom-form-item .ant-input-number .ant-input-number-input,
form.style1 .custom-form-item .ant-picker input{
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto;
    min-height: 0;
    line-height: 26px;
}



form.style1 ::placeholder,
form.style1 .ant-select-selection-placeholder{
    color: #585858 !important;
}
form.style1 textarea{
    padding:0 17px 17px 17px;
}
form.style1 h3{
    padding-top:30px;
    font-family: Soleil;
}
form.style1 .ant-checkbox:not(.ant-checkbox-checked) > .ant-checkbox-inner{
    background-color: #f6fafd;
}

.smallUploadArea .ant-upload-drag-container > div{
    display: flex;
}
.smallUploadArea.ant-upload.ant-upload-drag{
    background: transparent !important;
    border: none !important;
}
.smallUploadArea .ant-upload-drag-container>div{
    background: #fafafa;
    border: 1px dashed #d9d9d9;
    padding: 5px 0;
}

.smallUploadArea .ant-upload-drag-container > div > div:first-child{
    width:80px;
    height:50px;
}
.smallUploadArea .ant-upload-drag-container > div  > div:nth-child(2){
    flex:1;
}
.smallUploadArea .ant-upload{
    padding: 0 !important;
}
.ant-upload-list-item-image{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
@media (min-width:900px) {
    .ant-upload-list-item .ant-upload-list-item-card-actions-btn {
        opacity: 0 !important;
    }
    .ant-upload-list-item:hover .ant-upload-list-item-card-actions-btn{
        opacity: 1 !important;
    }
}

/* Scrolling */
.customScroll1{
    overflow-y:auto;

    &::-webkit-scrollbar {
        width: 4px;
    }
    &::-webkit-scrollbar-track {
        border-radius: 8px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #707070;
    }
}

/* Shadow */
.dropshadow1{
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.dropshadow2{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.dropshadowThick{
    box-shadow: rgba(14, 30, 37, 1) 0px 2px 4px 0px, rgba(14, 30, 37, 1) 0px 2px 16px 10px;
}
.dropshadowThickBlue{
    box-shadow: #8fe5e9 0px 2px 4px 0px, #8fe5e9 0px 2px 16px 10px;
}
header.dropshadow2{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 0px 4px 0px, rgba(14, 30, 37, 0.32) 0px 0px 16px 0px;
    margin-bottom: 2px;
    z-index: 1;
}

/* Form */
.ant-form.ant-form-horizontal .ant-form-item-label>label,
input[type="password"]{
    padding: 17px 15px 18px;
}

.homeWrap{
    display:flex;
    flex-direction: column;
}
.homeWrap > .homeWrapImage{
    flex: 1 1 0%;
    flex-grow: 2;
    margin: auto;
}
.homeWrap > .homeWrapInfo{
    flex: 1 1 0%;
    flex-grow: 1;
    max-width: 900px;
    margin: auto;
    background-color: white;
    border-radius: 20px;
    min-width: 450px;
}
@media (min-width:1600px) {
    .homeWrap{
        display:flex;
        flex-direction: row;
    }
    .homeWrap > .homeWrapImage{
        margin: initial;
    }
    .homeWrap > .homeWrapInfo{
        background-color: transparent;
        padding-right: 70px;
    }
    .homeWrap ol{
        padding: 10px;
    }
}
.homeWrap ol{
    list-style-type: none;
    padding: 20px;
}
.homeWrap ol ul{
    margin-left:40px;
    margin-top:10px;
    list-style-position: inherit;
    list-style-type: disc;
}

form#register .ant-form-item-label{
    width:200px;
}


.autoHeight > .ant-select-selector{
    height: 100% !important;
}
.noPadding > .ant-select-selector{
    padding:0 !important;
}
.autoHeight .ant-select-selection-item{
    height: 100% !important;
}

.ant-select.noBorder .ant-select-selector{
    border:none !important;
}
.ant-select .ant-select-selection-item{
    height:30px;
}

/* Tabs */
.ant-tabs.ant-tabs-box > .ant-tabs-nav{
    margin-bottom: 0px;
}

.ticket-tabs > .ant-tabs-nav > .ant-tabs-nav-wrap{
    margin: 0 30px 0 29px;
} 
.ticket-tabs > .ant-tabs-nav > .ant-tabs-nav-wrap > .ant-tabs-nav-list{
    flex:1;
}
.ticket-tabs > .ant-tabs-nav > .ant-tabs-nav-wrap > .ant-tabs-nav-list:not(:has([data-node-key="publicChat"])) > [data-node-key="comments"]{
    margin-right: auto;
}
.ticket-tabs > .ant-tabs-nav > .ant-tabs-nav-wrap > .ant-tabs-nav-list > [data-node-key="publicChat"]{
    margin-right: auto;
}

.ticket-tabs > .ant-tabs-nav > .ant-tabs-nav-wrap > .ant-tabs-nav-list > .ant-tabs-tab:not(.ant-tabs-tab-active){
    background: #ededed;
}





.ant-tabs.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab[data-node-key=main_stages]{
    box-shadow: rgba(0, 0, 0, 0.3) 0px 39px 18px, rgba(0, 0, 0, 0.22) 0px 35px 12px;
}



/* Tables */
.row-dragging{
    z-index: 99999;
}



.ant-table-wrapper.ticketSummary .ant-table-thead > tr > th,
.ant-table-wrapper.ticketSummary .ant-table-tbody > tr > td, 
.ant-table-wrapper.ticketSummary .ant-table tfoot > tr > th, 
.ant-table-wrapper.ticketSummary .ant-table tfoot > tr > td{
    padding: 0;
}


/* Layout */
/* Ticke7 clamped the sider to 150px below 1500px. This site's admin labels
   ("Timeline events", "Knowledge topics") do not fit in that, so the sider is
   250px at every width it is shown at — under 1100px sider.jsx swaps it for a
   drawer anyway. Keep this in step with the width prop in sider.jsx. */
@media only screen and (max-width: 1500px) {
    .ant-layout-sider:not(.ant-layout-sider-collapsed){
        flex: 0 0 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
        width: 250px !important;
    }
    .ant-layout-sider:not(.ant-layout-sider-collapsed) .ant-layout-sider-trigger{
        width: 250px !important;
    }
}
/* Buttons */
.ant-btn:disabled{
    opacity:.3;
}

.ant-btn{
    &.btn-transparent{
        background-color: transparent;
    }

    &.btn-white{
        background-color: white;
        border-color: #afafaf;
        color:black;

        &:hover,
        &:focus{
            color:black;
            background-color: #ebebeb;
            border-color: #d3d3d3;
        }
    }

    &.btn-grey{
        background-color: darkgray;
        border-color: #757575;

        &:hover,
        &:focus{
            background-color: #cecece;
            border-color: darkgray;
        }
    }

    &.btn-lightgrey{
        background-color: #e6e6e6;
        border-color: #afafaf;

        &:hover,
        &:focus{
            color:black;
            background-color: #cecece;
            border-color: darkgray;
        }
    }
}


.btn-round-blue{
    background-color: #01a5f8 !important;
    color: #fff !important;
    border: 0 none !important;
    font-size: inherit !important;
    width: 230px;
    flex-shrink: 0;
    border-radius: 50px !important;
    text-transform: capitalize !important;
}
.btn-blue{
    background-color: #01a5f8 !important;
    color: #fff !important;
    border: 0 none !important;
}

.ant-btn.btn-blue{
    background-color: #01a5f8 !important;
    border: 1px solid #006ba1 !important;

    &:hover,
    &:focus{
        color:black;
        background-color: #008cd3 !important;
    }
}

.ant-tag.tag-lightblue{
    background-color: rgb(220, 241, 247);
    border: 1px solid #c3d8dd;
}


.ant-btn-link.ant-btn.btn-lightblue,
.ant-btn-text.ant-btn.btn-lightblue,
a.btn-lightblue{
    color: cornflowerblue;
    background: none;

    &:hover,
    &:focus{
        color:#507ccc;
    }
}

.ant-btn.btn-text-lightblue:hover{
    background-color: #1890ff2e !important;
}

.ant-btn.btn-teal{
    color:white;
    background-color: #09a9a9;
    border-color: #078989;

    &:hover,
    &:focus{
        color:white;
        background-color: #0b9393;
        border-color: #064848;
    }
}
.ant-btn.btn-red{
    color:white;
    background-color: #a90100;
    border-color: #780100;

    &:hover,
    &:focus{
        color:white;
        background-color: #900100;
        border-color: #780100;
    }
}

.btn-gray{
    &.ant-btn,
    &.ant-dropdown-menu-item{
        color:black;
        background-color: #ececec;
        border-color: #d1d1d1;

        &:hover,
        &:focus{
            color:black;
            background-color: #dddddd;
            border-color: #acacac;
        }
    }
}

.btn-green{
    &.ant-btn,
    &.ant-dropdown-menu-item{
        color:white;
        background-color: #28a745;
        border-color: #28a745;

        &:hover,
        &:focus{
            background-color: #218838;
            border-color: #1e7e34;
        }
    }
}

.ant-btn.btn-brown{
    color:white;
    background-color: #a76827;
    border-color: #a76d22;

    &:hover,
    &:focus{
        background-color: #915b24;
        border-color: #7e470d;
    }
}

.hoverButton {
    transition: width 0.5s ease;
    text-align: left !important;
    overflow: hidden;
    border-radius: 20px !important;
    width:32px;
    padding-left: 9px !important;
    padding-right: 10px !important;
    padding-top: 5px !important;
    padding-bottom: 3px !important;

    &:hover {
        color: #ff7875 !important;
        border-color: #ff7875 !important;

        .hoverText {
            display: inline-block;
        }
    }
    &.hover-blue:hover {
        color:white !important;
        background-color: #40a9ff !important;
        border-color: #40a9ff !important;
    }

    &[data-width="90px" ]:hover{width:  90px !important;}
    &[data-width="100px"]:hover{width: 100px !important;}
    &[data-width="110px"]:hover{width: 110px !important;}
    &[data-width="120px"]:hover{width: 120px !important;}
    &[data-width="130px"]:hover{width: 130px !important;}
}

.hoverText {
    transition: width 0.5s ease;
    display: none;
}










.ant-input-search .ant-input-affix-wrapper{
    padding:7px;
}



.search-input{
    display: flex !important;
    align-items: center;
}
.search-input .ant-input-affix-wrapper{
    flex:1;
    border:none;
    font-size:inherit;
    color:inherit;
    padding:10px 70px;
    background: url(images/icon-search-blue.png) no-repeat 28px 50% / 14px auto;
    appearance:none;
    border-radius:0
}
.search-input .ant-input-affix-wrapper:hover{

}
.search-input .ant-input-affix-wrapper:focus,
.search-input .ant-input-affix-wrapper-focused{
    border:none;
    box-shadow:none;
}
.search-input input{
    font-size: 18px !important;
    font-family: Arial;
}
.search-input input::placeholder{
    color:#999999;
}

.search-input .ant-input-wrapper{
    display: flex !important;
    align-items: center;
}
.search-input .ant-input-group-addon{
    width:231px;
    background: none;
    font-size: 18px;
    font-family: Arial;
}

.search-input .ant-input-wrapper,
.search-input .ant-input-group-addon,
.search-input button{
    height: 100%;
}


.nutritionists-list > div{
    justify-content: center;
}

.nutritionists-list .nutritionist .block {
    padding: 25px 35px 25px 35px;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 100%;
    box-sizing: border-box;
    color: #999999;
}
.nutritionists-list .nutritionist h3 {
    color: #01a5f8;
    font-size: 24px;
}
.nutritionists-list .nutritionist{
    margin-bottom: 30px;
    min-width: 350px;
    flex: 1;
}
.nutritionists-list .nutritionist .email-nutritionist-btn{
    margin-left:auto;
    right:-20px;
    top:16px;
}

@media only screen and (min-width: 850px) {
    .nutritionists-list .nutritionist{
        max-width: 33%;
    }
}
@media only screen and (max-width: 480px) {
    .nutritionist-cats > li {
        flex: 1 100%;
        text-align: center;
    }
}

.nutritionist-search{
    display:flex;
    flex-wrap: wrap;
}
@media only screen and (max-width: 1000px) {
    .nutritionist-search > div{
        min-width: 100%;
    }
}

.invoiceTable .ant-table-expanded-row-level-1 > .ant-table-cell{
    background-color:#e9e9e9;
}

.zoomed > .rccs{
    width:410px !important;
}
.zoomed > .rccs > .rccs__card{
    zoom:1.4;
}
.zoomedout > .rccs{
    width:284px !important;
}
.cardDetails input{
    line-height: 15px !important;
}
.cardDetails .ant-row{
    margin-bottom:10px;
}


/* Card */
.card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}
.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.dashboard-card{
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    padding: 20px;
    position: relative;
    background-color:#fcfdff;
    border-radius: 20px;
}

.box-shadow1,
.box-shadow1-low{
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 18px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.box-shadow1-medium{
    box-shadow: rgb(251 247 114 / 30%) 0px 19px 18px, rgb(251 247 114 / 22%) 0px 15px 12px;
}
.box-shadow1-high{
    box-shadow: rgb(255 106 106 / 30%) 0px 19px 18px, rgb(255 106 106 / 22%) 0px 15px 12px;
}

.box-shadow2{
    box-shadow: rgba(0, 0, 0, 0.3) 3px 11px 8px, rgba(0, 0, 0, 0.22) 0px 15px 12px
}
.box-shadow3{
    box-shadow: rgba(0, 0, 0, 0.3) 17px 21px 8px, rgba(0, 0, 0, 0.22) 0px 15px 12px
}
.box-shadow3b{
    box-shadow: rgba(0, 0, 0, 0.3) -17px 21px 8px, rgba(0, 0, 0, 0.22) 0px 15px 12px
}
.box-shadow4b{
    box-shadow: rgba(0, 0, 0, 0.3) -17px 21px 8px, rgba(0, 0, 0, 0.22) 0px 1px 12px;
}
.box-shadow5{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}


/* React Grid */
.react-grid-item:not(.react-grid-placeholder) {
    padding:10px;
}
.react-grid-item.react-draggable:not(.react-grid-placeholder) {
    border: 1px solid #c7c7c7;
    border-radius: 10px;
}

/* Modal */

.ReactModalPortal{
    z-index: 1001;

}
.ReactModalPortal > .Overlay  {
    position: fixed;
    inset: 0px;
    background-color: rgb(104 104 104 / 75%);
}






/* Google */
.pac-logo:after{
    display:none;
}



/* Boards */
.boardContainer{
    padding-top:10px;
    display:flex;
    flex-direction: column;
    flex: 1;
    height: 1px;
}

.board{
    flex:1;
    display: flex;
    flex-direction: column;
    height:1px;
    overflow: auto;
}

.board > .controls{
    padding:10px;
    display: flex;
    gap: 10px;
}

.board > .stages{
    display:flex;
    flex:1;
    height:1px;
}
.board > .stages > .stage{
    padding:5px 0;
}
.board > .stages > .stage:not(.collapsed){
    flex: 1 0 auto;
    padding:5px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}
.board > .stages > .stage:first-child{
    padding-left:0px;
}
.board > .stages > .stage:last-child{
    padding-right:0px;
}
.board > .stages > .stage > .header{
    height: 32px;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 4px;
    background: #737883;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid lightgray;
    min-width: 140px;
    color: white;
    width: 100%;
    position: relative;
}
.board > .stages > .stage.collapsed > .header{
    height: 100%;
    background: #989ba3;
}

.board > .stages > .stage > .header > .headerTitle{
    line-height: 28px;
}
.board > .stages > .stage.collapsed > .header > .headerTitle{
    transform: rotate(90deg);
    position: absolute;
    top: 22px;
    width:0px
}
.board > .stages > .stage > .header > .headerCollapse{
    position: absolute;
    right: 3px;
}
.board > .stages > .stage > .header > .headerCollapse i{
    color:white;
}
.board > .stages > .stage:not(.collapsed) > .header > .headerCollapse i{
    transform: rotate(-135deg);
}
.board > .stages > .stage.collapsed > .header > .headerCount{
    position: absolute;
    bottom: 10px;
}

/* Board hygiene — WIP limit badge in the stage header */
.board > .stages > .stage > .header > .headerWip{
    margin-left: 8px;
    padding: 0 8px;
    border-radius: 12px;
    line-height: 20px;
    font-size: .8em;
    background: rgba(255,255,255,.25);
    color: #fff;
    white-space: nowrap;
}
.board > .stages > .stage > .header > .headerWip.wip-over{
    background: #ff4d4f;
    color: #fff;
    font-weight: bold;
}
.board > .stages > .stage.collapsed > .header > .headerWip{
    display: none;
}

/* Board hygiene — aging ticket accent (left edge bar) */
.board .ticket.aging{
    box-shadow: inset 4px 0 0 0 #faad14 !important;
}

.board > .stages > .stage.collapsed > .substages,
.board > .stages > .stage.collapsed > .substage{
    display:none;
}
.board > .stages > .stage.collapsed > .header{
    min-width: 35px;
}


.board > .stages > .stage > .substages{
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    flex: 1;
    gap: 8px;
    height: 1px;
}
.board > .stages > .stage > .substages > .substage,
.board > .stages > .stage > .substage{
    flex: 1;
    padding:5px;
    border: 1px solid lightgrey;
    min-width: 260px;
    background-color: #f3f6fc;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    transition: max-width 0.5s ease 0s, min-width 0.5s ease 0s, width 300ms ease;
    position: relative;
    overflow: hidden;
}
.board > .stages > .stage > .substages > .substage.canDrop,
.board > .stages > .stage > .substage.canDrop{
    background-color: rgb(231 241 242);
}

.board .boardDropComplete > .hoverComplete{
    background-color: rgb(134 209 217);;
}



.board > .stages > .stage > .substages > .substage > p{
    text-align: center;
    padding-left: 13px;
    font-weight: 500;
    position: relative;
    margin-top: 10px;
}
.board > .stages > .stage > .substages > .substage > p > span{    
    color: #b7b7b7;
    padding-left: 10px;
    opacity: 0;
    position: absolute;
    right: 3px;
}
.board > .stages > .stage > .substages > .substage:hover > p > span{
    opacity: 1;
}

.board > .stages > .stage > .substages > .substage > .ticketsWrapper{
    height: 1px;
    display: flex;
    flex: 1;
    position: relative;
}

.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets,
.board > .stages > .stage > .substage{
    padding:10px;
    position: relative;
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets,
.board > .stages > .stage > .substage{
    padding:10px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width:100%;
}

.board > .stages > .stage > .substages > .substage::before,
.board > .stages > .stage > .substage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  height: 50px; /* Adjust this according to your needs */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(220 222 227) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.board > .stages > .stage > .substages > .substage > .ticketsWrapper::before,
.board > .stages > .stage > .substages > .substage > .ticketsWrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px; /* Adjust this according to your needs */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(243 246 252) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1000;
}
.board > .stages > .stage > .substages > .substage.canDrop > .ticketsWrapper::before,
.board > .stages > .stage > .substages > .substage.canDrop > .ticketsWrapper::after {
    background: linear-gradient(
        to bottom,
        rgb(231 241 242) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper::after {
    bottom: 0;
    transform: scaleY(-1);
  }



.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets::-webkit-scrollbar {
    width: 4px;
}

.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets::-webkit-scrollbar-track {
    border-radius: 8px;    
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #707070;
}




.board > .stages > .stage > .substage{
    flex:1;
    padding-top: 63px;
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets > .ticket,
.board > .stages > .stage > .substage > .tickets > .ticket,
.boardContainer > .ticketDragPreview .ticket{
    background-color: white;
    border: 1px solid lightgray;
    padding: 0 10px 10px 10px;
    margin-bottom: 20px;
    min-width: 170px;
    cursor: grab;
    border-radius: 8px;

    background-image: linear-gradient(30deg, #c6c9fc0d 12%, transparent 12.5%, transparent 87%, #c6c9fc0d 87.5%, #c6c9fc0d), linear-gradient(150deg, #c6c9fc0d 12%, transparent 12.5%, transparent 87%, #c6c9fc0d 87.5%, #c6c9fc0d), linear-gradient(30deg, #c6c9fc0d 12%, transparent 12.5%, transparent 87%, #c6c9fc0d 87.5%, #c6c9fc0d), linear-gradient(150deg, #c6c9fc0d 12%, transparent 12.5%, transparent 87%, #c6c9fc0d 87.5%, #c6c9fc0d), linear-gradient(60deg, #c6c9fc0d 25%, transparent 25.5%, transparent 75%, #c6c9fc0d 75%, #c6c9fc0d), linear-gradient(60deg, #c6c9fc0d 25%, transparent 25.5%, transparent 75%, #c6c9fc0d 75%, #c6c9fc0d);
    background-size: 12px 21px;
    background-position: 0 0, 0 0, 6px 11px, 6px 11px, 0 0, 6px 11px;
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets > .ticket.preassigned,
.board > .stages > .stage > .substage > .tickets > .ticket.preassigned {
    opacity: 0.5;
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets > .ticket.dragging {
    border-color:red;
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets > .ticket > .title,
.board > .stages > .stage > .substage  > .tickets  > .ticket > .title,
.boardContainer > .ticketDragPreview .ticket > .title{
    max-height: 44px;
    height: initial;
    display:flex;
    font-size: 1.2em;
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets > .ticket > .title > i{
    margin-left:auto;
    position: relative;
    left: 5px;
    top: 5px;
}
.boardContainer .ticket > .title > button,
.boardContainer .ticket > .title > a{
    font-weight: bold;
    padding: 4px 0;
    text-align: center;
    width: 100%;
}
.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets > .ticket > .description,
.board > .stages > .stage > .substage > .tickets > .ticket > .description{
    font-style: italic;
    min-height: 50px;
}
.board .ticket .indent{
    margin-left: 10%;
    width: 90%;
}

.board .ticket.compressed p{
    margin:0;
}
.board .ticket.compressed .description{
    min-height: 0 !important;
}
.board .ticket .expandIcons{
    position: absolute;
    right: 0px;
    top: 0px;
    display:none;
}
.board .ticket:hover .expandIcons{
    display:inline-flex;
}
.board .ticket .expandIcons button{
    border: none !important;
}
.board .ticket .expandIcons i:hover{
    opacity:1 !important;
}


.board > .stages > .stage > .substages > .substage > .ticketsWrapper > .tickets > .ticket > .summary,
.board > .stages > .stage > .substage > .tickets > .ticket > .summary,
.boardContainer > .ticketDragPreview .ticket > .summary{
    display:flex;
    gap:5px;
    justify-content: flex-end;
    align-items: end;
    flex-wrap: wrap;
}

.boardDropComplete{
    height: 100px;
    background-color: #e4edff;
    border: 1px solid grey;
    padding: 10px;
    margin-top: 6px;
    border-radius: 12px;
    display: flex;
}
.boardDropComplete > .substage{
    flex:1;
    align-items: center;
    justify-content: center;
    display: flex;
}


.editableField{
    border-bottom: 1px solid #f3f3f3;
    border-radius: 10px;
    padding: 7px;
    min-height: 38px;
    cursor: pointer;
    white-space: pre;
    width:100%;
}

.board.dragging {
    cursor:none;
}
.board.dragging > .stages > .stage > .substages > .substage > .tickets > .ticket{
    cursor:none;
}

/* antd 6 dropped the addon wrapper Search used to render: the button is now a
   direct child of .ant-input-search and is classed -btn, not -button. Left on
   the old selector it kept antd's default 32px and sat 6px short of the field
   beside it. */
.ant-input-search > .ant-btn.ant-input-search-btn{
    padding: 10px 0;
    height: 38px;
    /* Three classes deliberately: antd's own `.ant-btn.ant-btn-icon-only`
       width is injected after this stylesheet, so a two-class selector ties
       and loses. */
    width: 38px;
}

.boardConfigzzz{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
}

/* Board Config */
.boardConfig .ant-form-item-control-input{
    min-height: 0;
}


.boardInput > .ant-select-selector{
    padding:2px 10px !important;
    margin-left:3px;
}


/* Ticket */
.comments .commentStageTitle{
    border: 1px solid #a3a3a3;
    width: 200px;
    margin: auto;
    padding: 3px 20px;
    border-radius: 8px;
    background-color: #dfdfdf;
    text-align: center;
}
.comments .comment .time{
    position: absolute;
    right: 20px;
    top: -15px;
    color: #b7b7b7;
    font-size: 11px;
    opacity:0;
    transition: opacity 0.6s linear, visibility 0.3s linear;
}
.comments .comment .editMenu{
    position: absolute;
    right: 3px;
    top: 3px;
    font-size: 11px;
    transition: opacity 0.6s linear, visibility 0.3s linear;
    border: 1px lightgray solid;
    border-radius: 4px;
    opacity:0;
    background-color: white;
}
.comments .comment:hover .time,
.comments .comment:hover .editMenu{    
    opacity:1;
}
.comments .comment .user{
    position: absolute;
    top: -19px;
    padding: 2px 5px 0 14px;
    border: none;
    border-radius: 10px 10px 3px 10px;
    left: -8px;
    min-width: 160px;
}
.comments .comment .stage{
    position: absolute;
    top: -12px;
    background-color: rgb(221, 221, 221);
    padding: 0px 5px;
    right: 14px;
    border: 1px solid rgb(175, 175, 175);
    border-radius: 15px;
}
.comments .comment .text{
    padding-top:5px;
    white-space:break-spaces;
}
.comments .comment .text > .ant-tag{
    margin-right:0;
}
.ticketStageItem > .ant-form-item-row > .ant-form-item-label{
    width:170px;
}
.ticketDragPreview{
    position: fixed;
    top: 0;
    left: 0;
    cursor: none;
    pointer-events: none;
    z-index:9999;

    display: flex;
    align-items: center;
    justify-content: center;
}
.ticketDragPreview > .ticket{
    width:100%;
}

.taskList{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.taskList > div{
    display: flex; 
    gap: 20px;
    background-color: #f1f1f1;
    border-radius: 10px;
}
.taskList > div .icon{
    width: 20px;
    justify-content: center;
    display: flex;
    align-items: center;
}

#ticketForm > .ant-tabs > .ant-tabs-nav{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgb(240 240 240) 100%);
}

#ticketForm .mainStages{
    padding:10px 0 0 0;
    margin-top:10px;
    display: flex;
    flex-direction: column;
}

.ticket-tabs .ant-tabs-tab[data-node-key="config"]{
    border-color: transparent;
    background-color: transparent !important;
    width: 30px;
    padding: 6px;
}

#ticketForm .mainStages,
#ticketForm .mainStages > .ant-tabs{
    height: 1px;
    flex: 1;
}

#ticketForm #rc-tabs-0-panel-history{
    margin: 0 -24px;
}


/* Project */
.project-steps > .project-step{
    display: flex;
    flex-direction: column;
}



/* Public */
.banner{
    position: relative;
    background-color: black;
}
.banner > .bg{
    height: 142px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    max-height: inherit;
    transition: height 300ms;
    position: relative;
    opacity: .5;
}
.banner > .text{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.banner > .text > h1{
    font-size: 50px;
    color: white;
}

/* Footer */
.ifot {
    background: #00163e;
    background-position: 50% 50%;
    background-size: cover;
    color: #fff;
    padding: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}
.ifot .ifot-wg {
    word-break: break-word;
    padding-top: 40px;
}
.ifot .footer-logo {
    margin-bottom: 20px;
}
.ifot .footer-logo img {
    margin-right: 50px;
    /* max-width:100% (the global img rule) plus this margin made the logo's
       box 50px wider than the viewport on phones, so the whole page scrolled
       sideways. Take the margin out of the available width. */
    max-width: calc(100% - 50px);
}
.ifot ol, .ifot ul {
    list-style: none;
}
.ifot .wg ul li {
    position: relative;
    padding: 0;
    display: inline-block;
}
.ifot .wg ul li a {
    color: #fff;
    font-size: 18px;
    padding: 0 15px;
    font-weight: 700;
    display: block;
}
.ifot .socials{
    gap: 20px;
    display: flex;
    justify-content: center;
}


/* Fonts */
@font-face {
    font-family: "SoleilLight";
    src: url("../fonts/SoleilLight.otf") format("opentype");
}
@font-face {
    font-family: "Soleil";
    src: url("../fonts/SoleilLight.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Soleil";
    src: url("../fonts/SoleilBook.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Soleil";
    src: url("../fonts/SoleilRegular.otf") format("opentype");
}
@font-face {
    font-family: "Soleil";
    src: url("../fonts/SoleilBold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}




/* Clerk */
.simpleClerk .cl-signIn-start{
    margin: 0;
    padding: 0;
}
.simpleClerk .cl-header,
.simpleClerk [class^="cl-internal-"],
.simpleClerk .cl-footer{
    display:none;
}
.simpleClerk .cl-signIn-start{
    box-shadow:none;
    width:inherit;
}
.simpleClerk .cl-signIn-root{
    width: 100%;
}


/* CKEditor */
.myCKEditor > .tools{
    justify-content: right;
    display: flex;
    position: absolute;
    z-index: 9;
    right:0;
    opacity: .3;
}
.no-toolbar .ck-editor__top{
    display:none;
}
.ck.ck-toolbar{
    background-color: transparent !important;
    border: none !important;
}
.ck-editor{
    padding:10px !important;
}
.myCKEditor .ck.ck-content.ck-focused,
.myCKEditor:not(.skrink) .ck.ck-content{
    min-height: 100px;
}
.myCKEditor .ck.ck-content{
    min-height:0;
    transition: min-height .3s ease;
}
.ck-content img{
    border-radius: 7px;
}
.ant-form .ant-form-item-control-input-content:has(.ck-editor) {
    background-color: #edf3f7 !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.ck.ck-editor__main>.ck-editor__editable{
    border:none !important;
    background: none !important;
    box-shadow: none !important;
}




/* Notification */
.section-50 {
padding: 50px 0;
}  
.m-b-50 {
margin-bottom: 50px;
}  
.dark-link {
color: #333;
}  
.heading-line {
position: relative;
padding-bottom: 5px;
}  
.heading-line:after {
content: "";
height: 4px;
width: 75px;
background-color: #29B6F6;
position: absolute;
bottom: 0;
left: 0;
}  
.notification-ui_dd-content {
margin-bottom: 30px;
}  
.nf-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.nf-card__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.nf-card__body {
    flex: 1;
    min-width: 0;
}
.nf-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.nf-card__title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}
.nf-card__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.nf-card__time {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}
.nf-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}
.nf-card__desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 8px;
}
.nf-card__project {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: #374151;
}

.ant-notification-notice.iconOnly{
    width: 50px;
    padding: 0 13px;
    margin: 0;
    height: 40px;
}
  

/* Miscellaneous */
.subtle{
opacity: .3;
}
.subtle:hover{
opacity: 1;
}

.ant-spin.white .ant-spin-dot-item{
background-color: white;
}

.indeterminate-checkbox .ant-checkbox-inner {
    background-color: red !important;
    border:none;
}
.indeterminate-checkbox:hover .ant-checkbox-inner {
    background-color: #ff7b7b !important;
}
.indeterminate-checkbox .ant-checkbox-inner::after {
    content: '×'; /* You can also use an SVG or another icon */
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-weight: bold;
    line-height: 6px;
    color: white;
    opacity: 1;
    border: none;
}

.fadeOverview{
    opacity: .3;
}
.fadeOverview:hover{
    opacity: 1;
}

.collapsible{
    transition: max-height .3s ease;
    overflow:hidden;
}
.collapsible.collapsed{
    max-height:0px !important;
}


/* CheckList */
.myCheckList ul.ant-list-items{
    gap: 2px;
    display: flex;
    flex-direction: column;
}
.myCheckList .ant-list{
    margin-bottom: 30px;
}
.myCheckList .checklistRow{
    background-color: #ebebeb;
    border-radius: 10px;
    padding: 5px;
}
.checklistRow:not(:hover) .checklistEditBtn{
    display:none;
}


/* Ant Design */


/* Select */
.ant-select .selecting,
.ant-select-dropdown .selected{
    display:none;
}