.dotation-main-page {
    user-select: none;
    height: calc(100vh - 7.25rem);
    display: flex;
    flex-direction: column;
}

    .dotation-main-page.compact {
        transition: padding 0.3s;
        padding: 0;
    }



/*TOP BAR*/
.dotation-top-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-left: 0.625rem;
    width: 98%;
    gap: 1rem;
}

.dotation-issues-wrapper{
	background-color: rgb(255,246,229) !important;
    padding: 0.5rem;
}

    .dotation-top-bar .left-part {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        height: inherit;
        flex-wrap: wrap;
        flex-shrink: 1;
    }

        .dotation-top-bar .left-part .section-titre {
            font-family: var(--Gilroy-Semibold);
            font-size: 2rem;
            line-height: 2.5rem;
            color: var(--black);
        }


    .dotation-top-bar .empty-space {
        flex-grow: 1;
        height: inherit;
    }

    .dotation-top-bar .right-part {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        height: inherit;
        flex-wrap: wrap;
        flex-shrink: 1;
    }

        .scenarios, .segmented-toggle-button {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 0.375rem 0.625rem;
            background: var(--bgcolor);
            border: 1px solid var(--bgcolor);
            border-radius: .5rem;
        }

            .scenarios button,  .segmented-toggle-button button{
                padding: .375rem .75rem;
            }

                .scenarios button.k-selected, .segmented-toggle-button button.k-selected {
                    background-color: white;
                    border: 1px solid var(--bgcolor);
                    color: #4264D0;
                    font: var(--Gilroy-Medium);
                }

        .dotation-top-bar .right-part .dotation-top-bar-menu {
            height: 3rem;
            background-color: transparent;
            border: none;
            padding: 0 !important;
        }

            .dotation-top-bar .right-part .dotation-top-bar-menu * .k-menu-expand-arrow {
                display: none;
            }

            .dotation-top-bar .right-part .dotation-top-bar-menu * .k-menu-link {
                gap: 0;
            }




/*GRID*/

/**/




.dotation-grid .dotation-header {
    height: 2.25rem;
    width: 100%;
    display: grid;
    grid-template-columns: auto 76.875rem;
    grid-template-rows: 2.25rem;
    grid-column-gap: 1.25rem;
    border-bottom: 1px solid #DADAE7;
}

    .dotation-grid .dotation-header .resident-header {
        grid-column-start: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 1rem 0.75rem;
        min-width: 31.25rem;
        font: var(--Gilroy-Medium);
        line-height: 1.3125rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #262B32;
        border-right: 1px solid #DADAE7;
        height: 1.375rem;
    }

    .dotation-grid .dotation-header .planning-header {
        grid-column-start: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

        .dotation-grid .dotation-header .planning-header > *:not(:last-child) {
            border-right: 1px solid #DADAE7;
        }

        .dotation-grid .dotation-header .planning-header .tranche-header {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 0.9375rem;
            width: 9.9375rem;
            font: var(--Gilroy-Medium);
            line-height: 1.3125rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #262B32;
        }


.dotation-grid .grid-content {
    overflow-y: scroll;
    height: 75vh;
    margin-top: 1.25rem;
}

    .dotation-grid .grid-content .dotation-row {
        display: grid;
        grid-template-columns: auto 76.875rem;
        grid-column-gap: 1.25rem;
        padding: 0.625rem;
        gap: 1.25rem;
        height: 10.125rem;
        border: 1px solid #DADAE7;
        border-radius: 0.375rem;
    }


        .dotation-grid .grid-content .dotation-row .resident {
            grid-column-start: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            min-width: 25.625rem;
            height: 8.875rem;
            background: var(--bgcolor);
            border: 1px solid var(--bgcolor);
            border-radius: 0.5rem;
        }

            .dotation-grid .grid-content .dotation-row .resident .check-box {
                height: 100%;
                display: flex;
                flex-direction: row;
                padding: 0.25rem;
                align-items: center;
                border-left: 0.3125rem solid transparent;
                border-radius: 0.5rem;
            }

            .dotation-grid .grid-content .dotation-row .resident .check-box-selected {
                height: 100%;
                display: flex;
                flex-direction: row;
                padding: 0.3125rem;
                align-items: center;
                border-left: 0.3125rem solid #4264D0;
                border-radius: 0.5rem;
            }

            .dotation-grid .grid-content .dotation-row .resident .right-part {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 0;
                width: 100%;
                height: 6.875rem;
            }

                .dotation-grid .grid-content .dotation-row .resident .right-part .top {
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;
                    padding: 0;
                    width: 100%;
                    height: 5.375rem;
                }

                    .dotation-grid .grid-content .dotation-row .resident .right-part .top .name {
                        display: flex;
                        flex-direction: row;
                        font: var(--abs-font);
                        align-items: flex-start;
                        flex-grow: 1;
                        padding: 0;
                        gap: 0.625rem;
                        height: 100%;
                    }

                        .dotation-grid .grid-content .dotation-row .resident .right-part .top .name .tag-chambre {
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;
                            width: 1.8125rem;
                            min-width: 1.8125rem;
                            height: 1.5rem;
                            background: #26BAA4;
                            border: 1px solid #26BAA4;
                            border-radius: 0.1875rem;
                            color: #FFFFFF;
                            font: var(--Gilroy-Medium);
                            font-size: 0.875rem;
                        }

                        .dotation-grid .grid-content .dotation-row .resident .right-part .top .name .display-name {
                            height: 3rem;
                            font: var(--Gilroy-Medium);
                            font-size: 0.9375rem;
                            line-height: 1.5rem;
                            color: #262B32;
                        }



                    .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts {
                        display: flex;
                        flex-direction: row;
                        align-items: flex-start;
                        flex-basis: 9.5625rem;
                        padding: 0;
                        gap: 0.75rem;
                        height: 100%;
                    }

                        .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .alese {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            padding: 0;
                            width: 3.125rem;
                            height: 3.125rem;
                            background: #FFFFFF;
                            border: 1.5px solid #8DA1E2;
                            border-radius: 5.625rem;
                            position: relative;
                        }

                        .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .alese-empty {
                            border: 1px dashed #B5B5CF;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            padding: 0;
                            width: 3.125rem;
                            height: 3.125rem;
                            background: #FFFFFF;
                            border-radius: 5.625rem;
                        }

                        .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .slip {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            padding: 0;
                            width: 3.125rem;
                            height: 3.125rem;
                            background: #FFFFFF;
                            border: 1.5px solid #8DA1E2;
                            border-radius: 5.625rem;
                        }

                        .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .slip-empty {
                            border: 1px dashed #B5B5CF;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            padding: 0;
                            width: 3.125rem;
                            height: 3.125rem;
                            background: #FFFFFF;
                            border-radius: 5.625rem;
                        }


                        .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .menu-resident {
                            height: 3rem;
                            background-color: var(--bgcolor);
                            border: none;
                            padding: 0 !important;
                        }

                            .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .menu-resident * .k-menu-expand-arrow {
                                display: none;
                            }

                            .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .menu-resident * .k-menu-link {
                                gap: 0;
                            }

                            .dotation-grid .grid-content .dotation-row .resident .right-part .top .pdts .menu-resident * .k-menu {
                                background-color: red !important;
                            }



                .dotation-grid .grid-content .dotation-row .resident .right-part .tag-zone {
                    justify-content: center;
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    flex-grow: 1;
                    padding: 0;
                    margin-right: 0.625rem;
                    gap: 0.5rem;
                    width: 100%;
                    height: 1.5rem;
                }

                    .dotation-grid .grid-content .dotation-row .resident .right-part .tag-zone .dispositifs {
                        align-items: flex-start;
                        flex-grow: 1;
                        height: 2.5rem;
                        font: var(--Gilroy-Medium);
                    }

                    .dotation-grid .grid-content .dotation-row .resident .right-part .tag-zone .gir {
                        width: 1.25rem;
                        height: 1.25rem;
                        background: #26BAA4;
                        justify-content: center;
                        display: flex;
                        align-items: center;
                        flex-basis: 1.25rem;
                        border-radius: 1.5rem;
                        font: var(--Gilroy-Medium);
                        font-size: 0.75rem;
                        line-height: 1rem;
                        color: #FFFFFF;
                    }


        .dotation-grid .grid-content .dotation-row .planning {
            grid-column-start: 2;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            padding: 0;
            gap: 1.25rem;
            height: 8.875rem;
        }


            .dotation-grid .grid-content .dotation-row .planning .tranche-horaire-panel {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 0.9375rem;
                gap: 0.9375rem;
                width: 9.9375rem;
                height: 8.875rem;
                background: var(--bgcolor);
                border: 1px solid var(--bgcolor);
                border-radius: 0.25rem;
            }

                .dotation-grid .grid-content .dotation-row .planning .tranche-horaire-panel .stick {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                    isolation: isolate;
                    width: 5rem;
                    height: 6.25rem;
                    border: 1px dashed #B5B5CF;
                    border-radius: 0.1875rem;
                }

                    .dotation-grid .grid-content .dotation-row .planning .tranche-horaire-panel .stick.picto {
                        border: none;
                    }

                .dotation-grid .grid-content .dotation-row .planning .tranche-horaire-panel .empty-stick {
                    font-family: 'Font Awesome 6 Pro';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 1rem;
                    line-height: 1.5rem;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    justify-content: center;
                    color: #9C9CBF;
                    width: 5rem;
                    height: 6.25rem;
                    border: 1px dashed #B5B5CF;
                    border-radius: 0.1875rem;
                    opacity: .5;
                }

                .dotation-grid .grid-content .dotation-row .planning .tranche-horaire-panel .soins-panel {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 0;
                    gap: 0.3125rem;
                    width: 2.125rem;
                    height: 7rem;
                }

                    .dotation-grid .grid-content .dotation-row .planning .tranche-horaire-panel .soins-panel .soin {
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        padding: 0.3125rem;
                        gap: 0.625rem;
                        width: 2.125rem;
                        height: 2.125rem;
                        border: 1px dashed #B5B5CF;
                        border-radius: 0.1875rem;
                    }

                    .dotation-grid .grid-content .dotation-row .planning .tranche-horaire-panel .soins-panel .empty-soin {
                        font-family: 'Font Awesome 6 Pro';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 1rem;
                        line-height: 1.5rem;
                        display: flex;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        color: #9C9CBF;
                        width: 2.125rem;
                        height: 2.125rem;
                        border: 1px dashed #B5B5CF;
                        border-radius: 0.1875rem;
                        opacity: .5;
                    }


.tranches-edit-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

    .tranches-edit-container .tranche {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

        .tranches-edit-container .tranche .label {
            margin-left: 1.25rem;
            width: 25%;
        }
.dotation-grid .k-table-tbody .first {
    position: sticky;
    vertical-align: bottom;
    bottom: 0; /* Don't forget this, required for the stickiness */
}
.dotation-grid .k-table-tbody .last {
    position: sticky;
    vertical-align: top;
    top: 0; /* Don't forget this, required for the stickiness */
}

.dotation-grid .loading-cell, .abs-grid .loading-cell {
    overflow-y: hidden;
    background: var(--bgcolor);
    border: 1px solid var(--bgcolor);
    border-radius: 0.5rem;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    -webkit-animation: shine 1s ease infinite;
    animation: shine 1s ease infinite;
}

.dotation-grid .loading-cell {
    position:sticky; 
}

@-webkit-keyframes shine {
    to {
        background-position: right -40px top 0;
    }
}

@keyframes shine {
    to {
        background-position: right -40px top 0;
    }
}


.invoice-lines-counter {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
    color: white;
    background-color: var(--secondary);
    font-size: 0.875rem !important;
    height: 2rem;
    border-radius: 1.75rem;
    min-width: 1rem;
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: center;
}
.alese-slip-quantity{
    border: solid #8c8c8c 0.125rem;
    background-color: #595959;
    color: white;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);

    min-width: 1.5rem;
    height: 1.6rem;
    border-radius: 0.8rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

.reco-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: Gilroy-Medium;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-bottom: 0.5rem;
}

.reco-info-grid .reco-info-label {
    font-family: Gilroy-Bold;
}