/*
 * NOTE: The @import chain that used to live here was removed and replaced with
 * explicit <link> tags in Pages/_Host.cshtml (in the same cascade order), so that
 * asp-append-version can fingerprint each sub-file and MapStaticAssets can cache
 * them correctly. Adding a new Abena-*.css partial now means adding a <link> in
 * _Host.cshtml — it will NOT be picked up automatically anymore.
 */

/*======================================  GENERALITES =================================*/
:root {
    --bgcolor: #F4F4F8;
    --primary: #0A3E76;
    --primary-75: #3A4392;
    --secondary: #4264D0;
    --primary-15: #C8C8C8;
    --abs-secondary: #4264D0;
    --abs-light-purple: #7777a6;
    --abs-light-purple-bg: #F0F0FF;
    --abs-light-turquoise: #4F8891;
    --abs-light-turquoise-bg: #D6EBEE;
    --abs-light-green: #77B36D;
    --abs-light-green-bg: #E1FCEA;
    --abs-light-red: #FF4554;
    --abs-light-red-bg: #FFE5E7;
    --white: #fff;
    --red: #DB504A;
    --orange: #DC9442;
    --black: #262B32;
    --black-75: #46505D;
    --yellow: #F7CE5B;
    --placeholder: #676767;
    --icons: #B5B5CF;
    --borders: #2F2F2F;
    --scroll: #DADAE7;
    --top-bar-height: 78px;
    --rail-width: 250px;
    --rail-mini-width: 80px;
    --tree-line-width: 2px;
    --tree-line-color: #ECECF2;
    --focus-outline-color: rgba(13, 110, 253, 0.25);
    --focus-border-color: #86b7fe;
    --primary-font: Gilroy-Medium, 'Helvetica Neue', Helvetica, sans-serif;
    --primary-bold: Gilroy-SemiBold, 'Helvetica Neue', Helvetica, sans-serif;
    --Gilroy-Medium: Gilroy-Medium, 'Helvetica Neue', Helvetica, sans-serif;
    --scroll-width: 0.5rem;
	--treeview-margin:.25rem;
    --grid-border-radius: 0.5rem;
    --kendo-font-family: "Roboto", "Rounded Mplus 1c", system-ui, sans-serif;
    --kendo-font-size-xs: 0.625rem; /* 10px */
    --kendo-font-weight-normal: 400;
    --abena-color-page-title: #0D1740;
    --kendo-h5-font-size: 1.3125rem; /* 21px */
    --kendo-h5-line-height: 1.33; /* ~28px */
    --kendo-font-weight-bold: 700;
    --abena-color-title-deep: #002C75;

    /* GIR Levels */
    --gir-level-1-border: #00A63E;
    --gir-level-1-color: #008236;
    --gir-level-1-bg: #DCFCE7;
    --gir-level-2-border: #00C950;
    --gir-level-2-color: #008236;
    --gir-level-2-bg: #DCFCE7;
    --gir-level-3-border: #7CCF00;
    --gir-level-3-color: #497D00;
    --gir-level-3-bg: #ECFCCA;
    --gir-level-4-border: #F0B100;
    --gir-level-4-color: #A65F00;
    --gir-level-4-bg: #FEF9C2;
    --gir-level-5-border: #FF6900;
    --gir-level-5-color: #CA3500;
    --gir-level-5-bg: #FFEDD4;
    --gir-level-6-border: #AD46FF;
    --gir-level-6-color: #7D00E0;
    --gir-level-6-bg: #EFDBFF;
}


body {
    font-family: var(--primary-font);
    /* Match the design's global font rendering (inherited by all descendants). */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*Scrollbar*/
::-webkit-scrollbar {
    background-color: transparent;
    width: var(--scroll-width) !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll);
    border-radius: .25rem;
}

/* Placeholders */
input::placeholder {
    color: var(--placeholder);
    opacity: 1; /* Firefox */
}

/*Icons*/
i {
    font-size: 1rem;
    line-height: 1.5rem;
}

/*Typographies*/

.abs-titre {
    font-size: 1.125rem;
    font-weight: 600;
}

.abs-titre-h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--black);
}


/*Sticky parts*/
.k-grid-header .k-grid-header-sticky, .k-grid-header .k-grid-header-sticky.k-sorted {
    background: none;
}

.k-grid .k-grid-header-sticky, .k-grid .k-grid-content-sticky, .k-grid .k-grid-footer-sticky {
    border: none;
}

/*Separators*/
.abs-separator-line {
    width: 1px;
    height: 2.25rem;
    background-color: var(--borders);
}

.abs-separator-line-horizontal {
    height: 1px;
    width: 100%;
    margin: 0.625rem 0;
    background-color: var(--borders);
}

.abs-loading {
    color: official;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 31.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader {
    border: 1rem solid #f3f3f3; /* Light grey */
    border-top: 1rem solid var(--primary); /* Blue */
    border-bottom: 1rem solid var(--primary); /* Blue */
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/*======================================  FIN DE GENERALITES =================================*/


/*========================================  COMPONENTS RESETS  ========================================*/

/*BOUTONS*/
button, input, optgroup, select, textarea {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--black);
    max-height: 3rem;
}

/* The reset above sizes form controls in rem (font-size:1rem; line-height:1.5rem;
   max-height:3rem), so they rescale with the responsive root font-size set at the
   width breakpoints further down this file (75% / 70% / 62.5%). The left rail menu
   (.rail-three-zone) and the top bar (.abs-topbar) are fixed-px panels and must stay
   static — pin their form controls to the px baseline (root = 16px) so they don't
   shift on window resize. Component-specific px font-sizes still win (higher
   specificity), so intentional sizes like the assistance contact link are preserved. */
.rail-three-zone button, .rail-three-zone input, .rail-three-zone optgroup, .rail-three-zone select, .rail-three-zone textarea,
.abs-topbar button, .abs-topbar input, .abs-topbar optgroup, .abs-topbar select, .abs-topbar textarea {
    font-size: 16px;
    line-height: 24px;
    max-height: 48px;
}

.k-button-text, .k-menu-link-text {
    font-size: 0.938rem;
    line-height: 1.5rem;
}

.abs-outline-button.k-button-outline-base {
    height: 3rem;
    font: var(--primary-font);
    font-size: 0.9375rem;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}

.k-button-solid-base {
    background: var(--bgcolor);
}

    .k-button-solid-base:hover, .k-button-solid-base.k-hover {
        background: var(--scroll);
    }

.k-menu-expand-arrow {
    margin-inline-end: 0 !important;
}


.abs-add-button.k-menu.k-menu-horizontal {
    padding: 0;
    background-color: var(--primary);
    color: var(--white);
    border-radius: 0.375rem;
    height: 2.375rem;
}

.abs-add-button .k-menu-link-text {
    color: var(--white);
    margin-left: 0.3125rem;
}

.abs-add-button .k-menu-expand-arrow {
    color: var(--white);
}

/*.abs-add-button .k-menu-link .k-icon.add {
    width: 0;
}*/

.k-treeview-toggle {
}

/*FORM*/
input, select {
    height: 3.25rem;
    font-family: var(--primary-font) !important;
}

.k-checkbox {
    border-color: var(--borders);
}

.k-checkbox-md {
    width: 1.25rem;
    height: 1.25rem;
}

.k-rounded-md {
    border-radius: .375rem;
}

.k-drawer-mini .k-drawer-wrapper {
    /*width: 4.75rem !important;*/
    /*width: var(--rail-width);*/
}

/*.k-drawer-start .k-drawer-wrapper {*/
/*    width: var(--rail-width) !important;*/
/*}*/


.k-input-solid:focus, .k-input-solid.k-focus {
    border-color: var(--primary-15);
    box-shadow: inset 0 0 0.25rem rgb(48 55 120 / 40%);
}


/*GRILLE*/
.abs-page {
    padding: 1.25rem 2rem 0.5625rem;
    margin: 0 1.25rem 1.25rem;
    background-color: white;
    /*height: 94%;*/
    border-radius: 0.625rem;
}

.abs-page:has(.homepage-header) {
    margin: 0;
}

/* When the resident view page is open, let it own the full available area —
   strip the host-page padding/margin/background/radius so the v3 chrome
   (header bar + light-grey body) reaches the viewport edges. */
.abs-page:has(.resident-view-page) {
    padding: 0;
    margin: 0;
    padding-left: 0 !important;
    background: transparent;
    border-radius: 0;
}

.abs-grid {
    height: 100%;
    width: 100%;
}

    .abs-grid .fa-button {
        color: var(--secondary);
        font-weight: 400;
    }


    .abs-grid .k-cell-inner > .k-link {
    }

    .abs-grid .k-button-icon {
        font-size: 1.5rem !important;
        color: var(--secondary) !important;
    }

    .abs-grid .k-table-td > div {
        font-size: 0.9375rem;
        border: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .abs-grid .k-grid th {
        border-width: 0;
    }

    .abs-grid .k-grid td {
        border-width: 0;
    }


    .abs-grid .k-grid {
        height: inherit;
        border: none;
        border-radius: 1.25rem;
    }

        .abs-grid .k-grid .k-table-row {
            border-radius: 0.5rem;
        }

        .abs-grid .k-grid .k-grouping-row .k-grid td, .k-grid .k-table-td {
            border-color: transparent;
        }

        .etab-grid.k-grid{
            border-radius: var(--grid-border-radius);
        }

        .abs-grid .k-grid .k-grid-header, .etab-grid.k-grid .k-grid-header, .homepage-orders-bar-grid .k-grid-header {
            border: none;
            background-color: transparent;
            margin-bottom: 0.25rem;
            padding-inline-end: 0 !important;
            border-top-left-radius: var(--grid-border-radius);
            border-top-right-radius: var(--grid-border-radius);
        }
        .abs-grid .k-grid .k-grid-header .k-grid-header-wrap, .etab-grid.k-grid .k-grid-header .k-grid-header-wrap  {
            border-top-left-radius: var(--grid-border-radius);
            border-top-right-radius: var(--grid-border-radius);
        }
        
        .abs-grid:not(:has(.k-grid-pager)) .k-grid .k-grid-container .k-grid-content, .etab-grid.k-grid:not(:has(.k-grid-pager)) .k-grid-container .k-grid-content {
            border-bottom-left-radius: var(--grid-border-radius);
            border-bottom-right-radius: var(--grid-border-radius);
        }
        
        .abs-grid .k-grid .k-grid-pager, .etab-grid.k-grid .k-grid-pager {
            border-bottom-left-radius: var(--grid-border-radius);
            border-bottom-right-radius: var(--grid-border-radius);
        }

        .abs-grid .k-grid .k-grid-header-wrap {
            border: none;
        }

        .abs-grid .k-grid .k-table-alt-row {
            background-color: var(--bgcolor);
        }

            .abs-grid .k-grid:not(.abena-v2-grid) .k-table-alt-row:hover {
                background-color: var(--bgcolor) !important;
            }

        .abs-grid .k-grid .k-table-row:hover {
            background-color: white;
        }

    .abs-grid .k-grid-md .k-table-th > .k-cell-inner {
        /*margin: 0;*/
    }

        .abs-grid .k-grid-md .k-table-th > .k-cell-inner > .k-link {
            /*padding: 0.5rem 0;*/
            padding: 0.5rem 0.5rem;
        }

    .abs-grid .k-master-row:hover .k-grid-content-sticky {
        background-color: white;
    }

    .abs-grid .k-table-tbody .k-table-row.k-selected > .k-table-td {
        background-color: white;
    }

    .abs-grid .k-master-row.k-table-alt-row .k-grid-content-sticky {
        background-color: var(--bgcolor);
    }

    .abs-grid div.k-grid-header .k-header {
        background-color: var(--bgcolor);
        height: 1.875rem;
        vertical-align: middle !important;
    }

        .abs-grid div.k-grid-header .k-header.k-grid-header-sticky {
            background-color: var(--bgcolor);
            height: 1.875rem;
            vertical-align: middle !important;
            padding: 0.25rem 0.5rem;
        }


    .abs-grid .k-button-solid-base {
        background-color: transparent !important;
        border: none;
        color: var(--secondary) !important;
    }

    .abs-grid .k-grid-md .k-grouping-row .k-icon {
        display: none;
    }

    .abs-grid .k-table-row .k-group-cell {
        background-color: white;
    }

    .abs-grid .k-grouping-row {
        background-color: transparent;
    }

    .abs-grid .k-group-col {
        width: 0.125rem;
    }

/*.k-grid-header, .k-table-thead, .k-table-header, .k-table-group-sticky-header {
    background: none;
}

.k-grid th, .k-grid td, .k-table-md .k-table-th, .k-table-md .k-table-td {
    border: none;
}*/


/*DIALOG*/
.k-window {
    background-color: var(--white);
}

/* Search  */
.abs-search-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: none;
    width: 100%;
}

    .abs-search-box .reset-input {
        margin-left: -1.5625rem;
        z-index: 500;
        cursor: pointer;
        color: rgb(128, 128, 128);
        margin-top: 0.125rem;
    }


/*MODALS*/
.abs-window {
    min-width: 18.75rem;
    min-height: 18.75rem;
    display: flex;
    border: none;
}

    .abs-window .k-window-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }


    .abs-window .inner-content {
        flex: 1;
        height: 100%;
        width: 100%;
        padding: 1rem 0;
        overflow: auto; /* fix for Firefox */
        max-height: calc(100vh - 10.75rem);
    }

    .abs-window .bottom-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-self: flex-end;
        justify-content: right;
        height: 3.75rem;
        border-top: 1px solid var(--bgcolor);
        width: 100%;
        gap: 1.25rem;
    }

        .abs-window .bottom-bar button:last-child {
            /*          margin-left: 1.25rem;*/
        }

    .abs-window .k-window-titlebar .k-window-content {
        padding: 0 1.875rem;
    }

.k-window-titlebar {
    height: 1.875rem;
    padding: 0.625rem 1.25rem;
    border-color: var(--borders);
}

.k-window-title {
    font-size: 1.5rem;
    line-height: 2rem;
}

.k-dialog {
    max-width: 31.25rem;
    min-width: 31.25rem !important;
}

    .k-dialog.k-alert .k-dialog-titlebar {
    }

.k-dialog-content {
    width: 90%;
    min-height: 5rem;
    height: auto;
    word-wrap: break-word;
    white-space: pre-line;
}


/*CHIPS IN INPUTSs*/
.k-chip-list {
    flex-wrap: initial;
    display: flex;
}


/*Icons*/
.k-i-more-vertical {
    color: var(--black);
}


.validation-message {
    font-size: 0.875rem;
    color: red;
    margin-top: 0.15rem;
    line-height: 0.9rem;
}


.section-item-container {
    display: flex;
    margin-left: -0.5rem;
}

/*========================================  FIN RESETS  ========================================*/

/*======================================  DRAG & DROP PANEL =================================*/

.abs-drop-panel {
    display: flex;
    width: 100%;
}

    .abs-drop-panel.drop-zone-ok {
        background-color: var(--primary);
        opacity: .3;
        border: 1px dashed #B5B5CF;
        border-radius: 0.1875rem;
    }

    .abs-drop-panel.drop-zone-ko {
        background-color: orangered;
        opacity: .5;
    }


.bar-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-color: var(--bgcolor);
    align-items: center;
    padding-top: 1.25rem;
}


    .bar-container .k-button-icon {
        font-size: 1.5rem !important;
        color: darkgray !important;
    }

/*========================================  FIN DE DRAG & DROP  ========================================*/


/*========================================  TREE NAVIGATOR  ========================================*/

.abs-nav-treeview {
    overflow: auto;
}

    .abs-nav-treeview .k-treelist .k-grid-header {
        visibility: collapse;
    }

    .abs-nav-treeview .k-treelist.k-grid {
        border: none;
    }

    .abs-nav-treeview .k-table-td {
        padding: 0;
        cursor: pointer;
        border: none;
        background-color: white;
        font-size: 0.9375rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .abs-nav-treeview.wrapping .k-table-td {
        text-overflow: clip;
    
    }

	.abs-nav-treeview .k-table-td:hover {
		background-color: white;
	}

    .abs-nav-treeview .k-table-alt-row:hover {
        background-color: white;
    }

    .abs-nav-treeview .k-table-row {
        background-color: white;
    }

	.abs-nav-treeview .k-table-row:not(:first-child) {
		
	}

    .abs-nav-treeview .k-treelist.k-grid .k-table-alt-row {
        background-color: white;
    }

    .abs-nav-treeview .k-grid .k-table-row.k-selected > td, .k-grid .k-table-row.k-selected > .k-table-td {
        background-color: white;
        font-family: Gilroy;
        font-weight: 800;
    }

    .abs-nav-treeview .edit-section {
        background-color: transparent;
        color: #262B32;
        border: none;
        margin: 0 0 0 0.125rem;
    }

	.abena-section-navigator .section-lvl-1 .k-table-td.with-wrapping{
		padding-left: .5rem;
		border-left:5px solid var(--secondary);
	}

	.abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping{
		background: url(/images/treeview.svg) no-repeat 1.25rem -8px;
		padding-left: 3rem;
	}
	
	.abena-section-navigator .section-lvl-3 .k-table-td.with-wrapping{
		background: url(/images/treeview.svg) no-repeat 3.5rem -8px;
		padding-left: 5.25rem;
	}

	.abena-section-navigator .section-lvl-4 .k-table-td.with-wrapping{
		background: url(/images/treeview.svg) no-repeat 5.75rem -8px;
		padding-left: 7.5rem;
	}

	.abena-section-navigator .section-lvl-5 .k-table-td.with-wrapping{
		background: url(/images/treeview.svg) no-repeat 8rem -8px;
		padding-left: 9.75rem;
	}

    @media (-webkit-device-pixel-ratio: 2) {
        .abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping {
            background: url(/images/treeview.svg) no-repeat 1.4rem -0.5rem;
        }
    }

@media (-webkit-device-pixel-ratio: 1.25) {
    .abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 1.4rem -0.3em;
    }


    .abena-section-navigator .section-lvl-3 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 3.5rem -0.3rem;
        padding-left: 5.25rem;
    }

    .abena-section-navigator .section-lvl-4 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 5.75rem -0.3rem;
        padding-left: 7.5rem;
    }

    .abena-section-navigator .section-lvl-5 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 8rem -0.3rem;
        padding-left: 9.75rem;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 1.4rem -0.5em;
    }


    .abena-section-navigator .section-lvl-3 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 3.5rem -0.5rem;
        padding-left: 5.25rem;
    }

    .abena-section-navigator .section-lvl-4 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 5.75rem -0.5rem;
        padding-left: 7.5rem;
    }

    .abena-section-navigator .section-lvl-5 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 8rem -0.5rem;
        padding-left: 9.75rem;
    }
}


    .abs-nav-treeview .k-button:hover {
        background-color: transparent;
        border: none;
    }

    .abs-nav-treeview .section-lvl-1 {
        position: relative;
    }

	.abs-nav-treeview .section-lvl-1:hover,.abs-nav-treeview .section-lvl-1:after:hover{
		background: none !important;
	}

    .abs-nav-treeview.wrapping .k-table-td .k-icon.k-cursor-pointer.k-i-caret-alt-down, .abs-nav-treeview.wrapping .k-table-td .k-icon.k-cursor-pointer.k-i-caret-alt-right,
    .cat-details-left .abs-nav-treeview .k-i-caret-alt-down, .cat-details-left .abs-nav-treeview .k-i-caret-alt-right{
        height: auto;
    }


.grey-border {
    border-color: #dee2e6
}


.abs-modal-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

    .abs-modal-content .form-group {
        display: flex;
        gap: 1.25rem;
        flex-direction: row;
    }

        .abs-modal-content .form-group .title {
            width: 15%;
            text-align: right;
            margin-top: auto;
            margin-bottom: auto;
        }

    .abs-modal-content .k-loader-container-inner {
        background: white;
        border-radius: 0.25rem;
    }

        .abs-modal-content .k-loader-container-inner span {
            color: #303778;
            font-weight: 700;
            font-size: 1.125rem;
        }
        
.abs-glow,.abs-glow-hover:hover {
    border-color: var(--focus-border-color);
    border-radius: 0.3125rem;
    outline: 0.25rem solid var(--focus-outline-color);
}


@keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0.5; }
    100% { opacity:1; }
}
.abs-dropzone-icon-animate {
    animation: flickerAnimation 500ms infinite;
}

.bold-text {
    font-family: Gilroy-Semibold;
}

.bg-orange {
    background-color: orange;
}

@media (-webkit-device-pixel-ratio: 1.25){
    html:not(.no-breakpoints){
        font-size: 13px;
    }
}

@media (-webkit-device-pixel-ratio: 1.5){
    html:not(.no-breakpoints){
        font-size: 11px;
    }
}

@media (-webkit-device-pixel-ratio: 1.75){
    html:not(.no-breakpoints){
        font-size: 9px;
    }
}

.dummy-button {
    border-color: var(--primary);
    color: white;
    background-color: var(--primary);
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    font-family: Gilroy-Medium, Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    vertical-align: middle;
    position: relative;
    border-radius: 0.375rem;
}

.dark-selected button.k-selected {
    border-color: var(--primary);
    color: white;
    background-color: var(--primary);
}
.netsoins-sync-tag {
    padding: 0.375rem 0.75rem;
    color: white;
    font-size: 0.9375rem !important;
    line-height: 1.5;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
}

.netsoins-sync-tag.netsoins-in-progress {
    background-color: #5bc0de;
}

.netsoins-sync-tag.netsoins-failed {
    background-color: #d9534f;
}

.netsoins-sync-tag.netsoins-complete {
    background-color: #23A995;
}

.dotation-screen .abs-page {
    padding-left: 4px !important;
    padding-right: 0.3rem !important;
    margin: 0;
}

.dotation-screen .k-drawer-push .bar-container.expanded {
    padding-left: 0.25rem !important;
}

.dotation-screen .rail.k-drawer-expanded > .k-drawer .k-drawer-wrapper:has(.dotation-catalogue-panel){
    width: 23rem !important;
}

.dotation-catalogue-panel {
    padding: 0.25rem !important;
}

.dotation-grid .k-table-td:not(:first-child):not(:nth-child(2)) {
    padding-left: 0.1rem !important;
    padding-right: 0.1rem !important;
}

.drawer-push-mode .rail.k-drawer-expanded .dotation-grid .tranche-horaire-panel{
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.drawer-push-mode .rail.k-drawer-expanded .dotation-grid .tranche-horaire-panel .stick{
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.drawer-push-mode .rail.k-drawer-expanded .resident-panel .top .pdts{
    min-width: unset !important;
    gap: 0.4rem !important;
}

.drawer-push-mode .rail.k-drawer-expanded .resident-panel .top .pdts .k-menu.k-menu-horizontal:not(.k-context-menu){
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.drawer-push-mode .rail.k-drawer-expanded .resident-panel .top .pdts .k-menu.k-menu-horizontal:not(.k-context-menu) span{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.drawer-push-mode .rail.k-drawer-expanded .dotation-grid.small-columns table > colgroup > col:not(:first-child):not(:nth-child(2)){
    width: 7.8rem !important;
}



/* Tree */

.abena-section-navigator td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.abena-section-navigator td div {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.5rem;
}

.abena-section-navigator .k-table-td.with-wrapping {
    display: flex;
    align-items: center;
}

.abena-section-navigator .k-table-td.with-wrapping:not(:first-child) {
    text-indent: 1rem;
}

/*NAVIGATOR EN TV GENERALISER ?   */

.abena-section-navigator .k-table-row:not(.section-lvl-1):hover, .abena-section-navigator .section-lvl-1 .k-table-td:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/*Sidenav Hierarchy*/

.abena-section-navigator .section-lvl-1:not(.closed) > td:after,
.abena-section-navigator .section-lvl-2:not(.closed) > td:after,
.abena-section-navigator .section-lvl-3:not(.closed) > td:after,
.abena-section-navigator .section-lvl-4:not(.closed) > td:after,
.abena-section-navigator .section-lvl-5:not(.closed) > td:after{
    content: "";
    position: absolute;
    top: 1.75rem;
    left: 0.25rem;
    display: block;
    width: 1rem;
    height: 0.75rem;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-left: none;
    border-top: none;
}
.abena-section-navigator .section-lvl-1:not(.closed):hover > td:after,
.abena-section-navigator .section-lvl-2:not(.closed):hover > td:after,
.abena-section-navigator .section-lvl-3:not(.closed):hover > td:after,
.abena-section-navigator .section-lvl-4:not(.closed):hover > td:after,
.abena-section-navigator .section-lvl-5:not(.closed):hover > td:after {
    border-color: var(--scroll);
}

.abena-section-navigator .abs-nav-treeview.wrapping tr{
    position: relative;
}

.abena-section-navigator .abs-nav-treeview.wrapping tr > td > div{
    word-break: break-all;
}

.abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping {
    position: relative;
}

.abena-section-navigator .section-lvl-1:has(.k-i-caret-alt-down) div,
.abena-section-navigator .section-lvl-2:has(.k-i-caret-alt-down) div,
.abena-section-navigator .section-lvl-3:has(.k-i-caret-alt-down) div,
.abena-section-navigator .section-lvl-4:has(.k-i-caret-alt-down) div,
.abena-section-navigator .section-lvl-5:has(.k-i-caret-alt-down) div,
.abena-section-navigator .section-lvl-1:has(.k-i-caret-alt-right) div,
.abena-section-navigator .section-lvl-2:has(.k-i-caret-alt-right) div,
.abena-section-navigator .section-lvl-3:has(.k-i-caret-alt-right) div,
.abena-section-navigator .section-lvl-4:has(.k-i-caret-alt-right) div,
.abena-section-navigator .section-lvl-5:has(.k-i-caret-alt-right) div {
    margin-left: 1rem;
}


.abena-section-navigator .section-lvl-2 .has-next-sibling:before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    display: block;
    width: 1rem;
    height: 100%;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-right: none;
    border-top: none;
}
.abena-section-navigator .section-lvl-2:hover .has-next-sibling:before {
    border-color: var(--scroll);
}

.abena-section-navigator .section-lvl-2:not(.closed) > td:after{
    left: 2.5rem;
    height: 100%;
}

.abena-section-navigator .section-lvl-3 .k-table-td.with-wrapping {
    position: relative;
}

.abena-section-navigator .section-lvl-3 .has-next-sibling:before {
    content: "";
    position: absolute;
    top: 0;
    left: 3.5rem;
    display: block;
    width: 1rem;
    height: 100%;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-right: none;
    border-top: none;
}
.abena-section-navigator .section-lvl-3:hover .has-next-sibling:before {
    border-color: var(--scroll);
}

.abena-section-navigator .section-lvl-3 .has-next-parent-sibling:after, .abena-section-navigator .n-parent-sibling-1 td span:nth-child(1) {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    display: block;
    width: 1rem;
    height: 100%;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-right: none;
    border-top: none;
}

.abena-section-navigator .section-lvl-3:hover .has-next-parent-sibling:after, .abena-section-navigator .n-parent-sibling-1:hover td span:nth-child(1) {
    border-color: var(--scroll);
}

.abena-section-navigator .section-lvl-3:not(.closed) > td:after{
    left: 4.75rem;
}


.abena-section-navigator .section-lvl-4 .k-table-td.with-wrapping {
    position: relative;
}


.abena-section-navigator .section-lvl-4 .has-next-sibling:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5.75rem;
    display: block;
    width: 1rem;
    height: 100%;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-right: none;
    border-top: none;
}

.abena-section-navigator .section-lvl-4:hover .has-next-sibling:before {
    border-color: var(--scroll);
}

.abena-section-navigator .section-lvl-4 .has-next-parent-sibling:after, .abena-section-navigator .n-parent-sibling-2 td span:nth-child(2) {
    content: "";
    position: absolute;
    top: 0;
    left: 3.5rem;
    display: block;
    width: 1rem;
    height: 100%;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-right: none;
    border-top: none;
}
.abena-section-navigator .section-lvl-4:hover .has-next-parent-sibling:after, .abena-section-navigator .n-parent-sibling-2:hover td span:nth-child(2) {
    border-color: var(--scroll);
}

.abena-section-navigator .section-lvl-4:not(.closed) > td:after{
    left: 7rem;
}


.abena-section-navigator .section-lvl-5 .k-table-td.with-wrapping {
    position: relative;
}


.abena-section-navigator .section-lvl-5 .has-next-sibling:before {
    content: "";
    position: absolute;
    top: 0;
    left: 8rem;
    display: block;
    width: 1rem;
    height: 100%;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-right: none;
    border-top: none;
}
.abena-section-navigator .section-lvl-5:hover .has-next-sibling:before {
    border-color: var(--scroll);
}


.abena-section-navigator .section-lvl-5 .has-next-parent-sibling:after, .abena-section-navigator .n-parent-sibling-3 td span:nth-child(3) {
    content: "";
    position: absolute;
    top: 0;
    left: 5.75rem;
    display: block;
    width: 1rem;
    height: 100%;
    border: var(--tree-line-width) solid var(--tree-line-color);
    border-bottom: none;
    border-right: none;
    border-top: none;
}

.abena-section-navigator .section-lvl-5:hover .has-next-parent-sibling:after, .abena-section-navigator .n-parent-sibling-3:hover td span:nth-child(3) {
    border-color: var(--borders);
}

@media (-webkit-device-pixel-ratio: 1.5), (-webkit-device-pixel-ratio: 1.25), (-webkit-device-pixel-ratio: 1.75), (-webkit-device-pixel-ratio: 2), (max-width: 1366px) {
    .abena-section-navigator .section-lvl-2 .has-next-sibling:before, .abena-section-navigator .section-lvl-3 .has-next-parent-sibling:after, .abena-section-navigator .n-parent-sibling-1 td span:nth-child(1) {
        left: 1.4rem;
    }

    .abena-section-navigator .section-lvl-1:not(.closed) > td:after{
        left: 0.4rem;
    }
}

@media (max-width: 1513px) {
    html:not(.no-breakpoints) {
        font-size: 75%;
    }

    .abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping {
        background: url(/images/treeview20x20.svg) no-repeat 1.25rem -0.5rem;
    }
    
    @media (-webkit-device-pixel-ratio: 2), (-webkit-device-pixel-ratio: 1.25), (-webkit-device-pixel-ratio: 1.5), (-webkit-device-pixel-ratio: 1.75) {
        .abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping {
            background: url(/images/treeview20x20.svg) no-repeat 1.4rem -0.5rem;
        }
    }

    .abena-section-navigator .section-lvl-3 .k-table-td.with-wrapping{
        background: url(/images/treeview20x20.svg) no-repeat 3.5rem -0.5rem;
    }

    .abena-section-navigator .section-lvl-4 .k-table-td.with-wrapping{
        background: url(/images/treeview20x20.svg) no-repeat 5.75rem -0.5rem;
        padding-left: 7.5rem;
    }

    .abena-section-navigator .section-lvl-5 .k-table-td.with-wrapping{
        background: url(/images/treeview20x20.svg) no-repeat 8rem -0.5rem;
    }

    :root {
        --tree-line-width: 1px;
    }

    .drawer-push-mode .rail.k-drawer-expanded .resident-panel .dispositif-container {
        position: relative;
    }
    .drawer-push-mode .rail.k-drawer-expanded .resident-panel .dispositif-container .reco-container{
        position: absolute;
        right: 0;
        top: -1.5rem;
    }
}

@media (max-width: 1366px) {
    html:not(.no-breakpoints) {
        font-size: 70%;
    }

    .abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping{
        background: url(/images/treeview20x20.svg) no-repeat 1.4rem -0.5rem;
    }

    .abena-section-navigator .section-lvl-3 .k-table-td.with-wrapping{
        background: url(/images/treeview20x20.svg) no-repeat 3.5rem -0.5rem;
    }

    .abena-section-navigator .section-lvl-4 .k-table-td.with-wrapping{
        background: url(/images/treeview20x20.svg) no-repeat 5.75rem -0.5rem;
        padding-left: 7.5rem;
    }

    .abena-section-navigator .section-lvl-5 .k-table-td.with-wrapping{
        background: url(/images/treeview20x20.svg) no-repeat 8rem -0.5rem;
    }

    :root {
        --tree-line-width: 1px;
    }


    .drawer-push-mode .rail.k-drawer-expanded .resident-panel .dispositif-container {
        position: relative;
    }
    .drawer-push-mode .rail.k-drawer-expanded .resident-panel .dispositif-container .reco-container{
        position: absolute;
        right: 0;
        top: -1.5rem;
    }

}

@media (max-width: 1080px) {
    html:not(.no-breakpoints) {
        font-size: 62.5%;
    }
    
    .abena-section-navigator .section-lvl-2 .k-table-td.with-wrapping{
        background: url(/images/treeview15x15.svg) no-repeat 1.4rem -0.25rem;
    }

    .abena-section-navigator .section-lvl-3 .k-table-td.with-wrapping{
        background: url(/images/treeview15x15.svg) no-repeat 3.5rem -0.25rem;
    }

    .abena-section-navigator .section-lvl-4 .k-table-td.with-wrapping{
        background: url(/images/treeview15x15.svg) no-repeat 5.75rem -0.25rem;
        padding-left: 7.5rem;
    }

    .abena-section-navigator .section-lvl-5 .k-table-td.with-wrapping{
        background: url(/images/treeview15x15.svg) no-repeat 8rem -0.25rem;
    }

    :root {
        --tree-line-width: 1px;
    }


    .drawer-push-mode .rail.k-drawer-expanded .dotation-grid, .rail.k-drawer-expanded .dotation-grid > div  {
        height: calc(100vh - var(--top-bar-height) - 12.875rem);
    }


    .abs-page {
        padding-left: 0 !important;
        padding-right: 0.3rem !important;
        margin: 0;
    }

    .abs-page:has(.homepage-header) {
        padding-left: 32px !important;
        padding-right: 32px !important;
        margin: 0;
    }

    .resident-panel {
        min-width: 23.625rem !important;
    }

    .dotation-catalogue-panel {
        padding: 0.25rem !important;
    }

    .dotation-grid .k-table-td:not(:first-child):not(:nth-child(2)) {
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }

    .article-panel .catalogue .article-item {
        flex-wrap: wrap;
        width: 20rem !important;
        row-gap: 0;
        padding-bottom: 0;
    }

    .article-panel .catalogue .article-item .article-right-part {
        flex-direction: row !important;
        gap: 1.5rem !important;
        padding-left: 0.5rem;
        height: 2.5rem !important;
    }
    .cde-edit-page{
        gap: 0.5rem !important;
    }
    .cde-edit-page .left-part + .right-part{
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .cde-edit-page .left-part{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 30rem !important;
        min-width: unset !important;
    }

    .cde-edit-page .article-panel .catalogue .article-item {
        width: 21rem !important;
    }

    .article-panel .catalogue .article-item .article-right-part .favorite {
        height: 1.6rem !important;
    }
    
    /*.rail.k-drawer-expanded > .k-drawer .k-drawer-wrapper{*/
    /*    width: 21.625rem !important;*/
    /*}*/

    .dotation-grid .k-grid thead th:not(:nth-child(2)):not(:first-child){
        font-size: 0.85rem;
    }

    .drawer-push-mode .rail.k-drawer-expanded .dotation-grid .tranche-horaire-panel{
        gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .drawer-push-mode .rail.k-drawer-expanded .dotation-grid .tranche-horaire-panel .stick{
        margin-left: 1px !important;
        margin-right: 1px !important;
    }

    .drawer-push-mode .rail.k-drawer-expanded .resident-panel .top .pdts{
        min-width: unset !important;
        gap: 0.4rem !important;
    }

    .drawer-push-mode .rail.k-drawer-expanded .resident-panel .top .pdts .k-menu.k-menu-horizontal:not(.k-context-menu){
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .drawer-push-mode .rail.k-drawer-expanded .resident-panel .top .pdts .k-menu.k-menu-horizontal:not(.k-context-menu) span{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .drawer-push-mode .rail.k-drawer-expanded .dotation-grid.small-columns table > colgroup > col:not(:first-child):not(:nth-child(2)){
        width: 7.8rem !important;
    }
}

.k-command-cell .k-button.k-icon-button {
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

.k-align-items-baseline {
    align-items: baseline;
}

.\!k-align-items-baseline {
    align-items: baseline;
}

.input-content-right input{
    text-align: right;
}

.grid-headers-wrap .k-grid-header .k-table-th, .grid-headers-wrap .k-grid-header .k-column-title{
    white-space: inherit !important;
    text-align: center;
    vertical-align: baseline;
    justify-content: center;
}

.code-wrapper {
    max-height: 100%;
    overflow-y: auto;
    background-color: #f1efef;
    padding: 0.5rem 1rem;
    border: grey 2px solid;
    border-radius: 0.5rem;
}
.code-wrapper code{
    white-space: break-spaces;
}


:root:has(.dotation-screen .rail.k-drawer-expanded .dotation-catalogue-panel){
    --rail-width: 23rem;
}

.abs-form-section {
    background-color: #f5f5f5;
    border-radius: 0.3125rem;
    padding: 1rem !important;
}

.abs-form-section-dark {
    background-color: #8f8f8f;
    border-radius: 0.3125rem;
    padding: 1rem !important;
}

.abs-form-section-verification {
    background-color: #bccefb;
    border-radius: 0.3125rem;
    padding: 1rem !important;
}


.form-section {
    background-color: #f5f5f5;
    border-radius: 0.3125rem;
}

.form-section-dark {
    background-color: #8f8f8f;
    border-radius: 0.3125rem;
}

.form-section-verification {
    background-color: #bccefb;
    border-radius: 0.3125rem;
}

.export-menu {
    max-height: 2.5rem;
    background-color: white;
    border: 1.5px solid var(--primary);
    font: var(--Gilroy-Medium);
    border-radius: 0.375rem;
}

.export-menu * .k-menu-link {
    color: var(--primary);
    padding: 0;
}

.breadcumb-container {
    font-size: 0.9375rem;
    color: var(--black);
    display: flex;
    gap: 0.3125rem;
    flex-direction: row;
}
    
    .breadcumb-container .breadcumb {
        font-size: 0.9375rem;
        color: var(--secondary);
        cursor: pointer;
    }

/* Change input box style when disabled + dropdown to match combobox ui */
.k-drawer-content span.k-input-inner {
    background-color: #ffffff;
}

.k-drawer-content .k-picker-outline:hover, .k-drawer-content .k-picker-outline.k-hover, .k-drawer-content .k-picker:hover span.k-input-inner, .k-drawer-content .k-picker.k-hover span.k-input-inner {
    background-color: #fcfcfc;
}

.k-drawer-content .k-disabled span.k-input-inner, .abs-modal-form .k-input.k-disabled, .user-modal .k-input.k-disabled, .k-drawer-content .k-input.k-disabled, .k-drawer-content .k-disabled.k-picker .k-input-button, .k-drawer-content input[disabled] {
    background-color: #e4e7eb !important;
}

.establishment-add-user-modal .k-input.k-disabled,
.establishment-add-user-modal .k-picker-solid.k-disabled{
    background-color: #7B7B7B !important;
    opacity: 1;
    color: white;
}

.abena-v2-combo-box .k-disabled span.k-input-inner, .abena-v2-combo-box .k-disabled.k-picker .k-input-button{
    background-color: var(--abena-v2-primary) !important;
    color: white;
}

/* END - Change input box style when disabled + dropdown to match combobox ui */

.abs-dropdown-clear {
    position: absolute;
    cursor: pointer;
    right: 2.5rem;
    top: 1.75rem;
    z-index: 1;
}

.abs-combobox .abs-dropdown-clear {
    top: 2.125rem;
}

.k-hidden ~ .abs-dropdown-clear {
    position: absolute;
    cursor: pointer;
    right: 2.5rem;
    top: 0.75rem;
    z-index: 1;
}

.selected-email-tree-item td div{
    font-weight: bold;
    font-family: Gilroy-Extrabold;
}

.editor-tag {
    background-color: var(--primary);
    color: white;
}

.abs-text-box-buttons {
    position: absolute !important;
    right: 0;
    top: 0;
    z-index: 1;
    display: flex;
}

.abs-text-box-buttons button {
    box-shadow: unset !important;
}

.abs-numeric-box-buttons{
    position: absolute !important;
    right: 0;
    top: 0;
    z-index: 1;
    display: flex;
}

.abs-numeric-box-buttons button {
    box-shadow: unset !important;
}

.textarea-wrapper:has(.abs-text-area-buttons) .k-textarea,
.textarea-wrapper:has(.abs-numeric-box-buttons) .k-textarea,
.textarea-wrapper:has(.abs-text-box-buttons) .k-textarea,
.abena-v2-text-input:has(.abs-text-box-buttons) input,
.abena-v2-text-area:has(.abs-text-area-buttons) input,
.abena-v2-numeric-input:has(.abs-numeric-box-buttons) input{
    padding-right: 2.5rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.abs-text-area-buttons {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    z-index: 1;
    display: flex;
}

.abs-text-area-buttons button {
    box-shadow: unset !important;
}


.abs-textarea-large {
    overflow-y: auto !important; 
}
.abs-textarea-large textarea,
.abs-textarea-large .k-textarea {
    max-height: unset;
    min-height: 10rem !important;
    height: 100%;
}

.abs-textarea-extra-large {
    overflow-y: auto !important;
    height: 16rem !important;
}

.abs-textarea-extra-large textarea,
.abs-textarea-extra-large .k-textarea {
    max-height: unset;
    min-height: 15rem !important;
    height: 100%;
}

/* Read-only AbsTextArea renders as a .k-disabled span, and Kendo sets
   pointer-events: none on .k-disabled. That blocks wheel/scrollbar scrolling on the
   large variants, whose overflow-y is auto on purpose, so long content stays clipped.
   The element is a span (never editable), so re-enabling pointer events only restores
   scrolling and text selection. */
.abs-textarea-large.k-disabled,
.abs-textarea-extra-large.k-disabled {
    pointer-events: auto !important;
}

.k-list-group-item,
.k-list-group-sticky-header {
    font-family: Gilroy-Bold;
}

.abs-modal-form form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.abs-modal-form form .inner-content {
    flex-grow: 1;
}

.role-indicators {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.role-indicator {
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: black;
}

.role-indicator-green {
    background-color: #74B667;
    color: white;
}

.role-indicator-red {
    background-color: #d9534f;
    color: white;
}


/* textbox force uppercase */
.k-text-uppercase .k-input-inner {
    text-transform: uppercase;
}

.clickable-row tbody tr{
    cursor: pointer !important;
}

.clickable-row tbody tr.k-grouping-row, .clickable-row tbody tr.k-group-footer{
    cursor: default !important;
}


.scrollable-textarea textarea {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
}

.confirmation-modal .k-window-titlebar-actions {
    display: none;
}
.confirmation-modal .inner-content {
    height: 5rem;
}
.confirmation-modal .bottom-bar {
    display: flex;
    gap: 0.25rem;
    justify-content: end;
}

.tooltip-flex-content .k-tooltip-content {
    display: flex;
}

.establishments-backup-grid .k-selected td, .establishments-backup-grid tr.k-selected, .establishments-backup-grid .k-selected td:hover, .establishments-backup-grid .k-selected:hover td, .establishments-backup-grid tr.k-selected:hover{
    background-color: var(--secondary) !important;
    color: white !important;
}

.\!k-white-space-normal .k-column-title {
    white-space: normal !important;
}

.tooltip-with-table .k-tooltip{
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.conditions-main-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: calc(100vh - var(--top-bar-height) - 3.375rem);
}

.conditions-main-page .abena-v2-tab-content .k-tabstrip-items {
    justify-content: normal;
}
th:has(.k-checkbox-wrap),
td:has(.k-checkbox-wrap){
    text-overflow: unset !important;
}

.unbreakable-validation-message .validation-message {
    white-space: nowrap;
}

.text-color-secondary {
    color: var(--secondary);
}