@import "fields.css";

:root {
    /* Le header du dashboard n'est pas le même que le header du site */
    --header_height: 3.4rem;
    --header_bg_clr: white;
    --header_z_index: 12;
    --sidebar_width: 16rem;
    --sidebar_z-index: 15;
    --breadcrumb_z_index: 10;
    --breadcrumb_info_z_index: 100;
}

/*******************************************
    HEADER
********************************************/
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header_height);
    
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: var(--header_bg_clr);
    box-shadow: 0 .2rem 2rem 0 var(--header_shadow);
    
    transition: 0.2s ease-in-out;

    z-index: var(--header_z_index);
}


/*==================================
    SIDEBAR - SHOW BUTTON
===================================*/
#sidebar_show_button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    background-color: transparent;
    border: none;
    outline: none;
    border-right: 1px solid var(--border_clr);
    z-index: 10;
    cursor: pointer;
}

#sidebar_show_button span {
    width: 28px;
    height: 28px;
    color: var(--burger_clr);
    transition: 0.2s;
}

#sidebar_show_button:hover span {
    color: var(--burger_hover_clr);
}

/*==================================
    HEADER LOGO
===================================*/
.header_left {
    display: flex;
}

.header_logo {
    padding: .7rem 1rem .7rem 1.4rem;
    height: calc(var(--header_height));
}

.header_logo a {
    display: flex;
    align-items: center;
    height: 100%;
}

.header_logo a img {
    height: 100%;
    margin-right: .8rem;
    transition: transform .2s;
}

.header_logo a:hover img {
    transform: translateX(0.2rem);
}

.header_organisation {
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--border_clr);
    padding-left: 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: hsl(20, 1%, 47%);
}

@media screen and (max-width: 500px) {
    .header_organisation {
        display: none;
    }
}

.header_call_center {
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 0px solid var(--border_clr);
    padding-left: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #F27D16;
}

@media screen and (max-width: 500px) {
    .header_call_center {
        display: none;
    }
}

/*==================================
    HEADER ORGANISATION
===================================*/

/*==================================
    HEADER PROFILE
===================================*/
.header_right {
    padding-right: 2.5rem;
}

.header_profile {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.header_profile a {
    display: flex;
    align-items: center;
    color: var(--clr_first);
    border: 1px solid var(--clr_first);
    border-radius: 4rem;
    padding: .25rem 1.2rem;
    transition: 0.3s;
}

.header_profile a:hover {
    background-color: var(--clr_first);
    color: #fff;
}

.header_profile a span {
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 400;
}

@media screen and (max-width: 500px) {
    .header_right {
        padding-right: 1rem;
    }
}

/*******************************************
    SIDEBAR
/*******************************************
    isolation: isolate; -> C'est un outil puissant pour contrôler l'empilement des éléments.
    sidebar est traité comme si il était dans un container séparé.
    Les effets d'ombre sont isolés et n'entrent pas en conflits avec les autres éléments.
    Le z-index est géré de manière plus précise
    A utiliser avec les popups
********************************************/
.sidebar {
    position: fixed;
    isolation: isolate;
    top: var(--header_height);
    left: 0;
    bottom: 0;
    width: var(--sidebar_width);

    border-top-right-radius: .8rem;
    border-bottom-right-radius: .8rem;
    /* box-shadow: 17px 0px 11px -13px hsla(232, 65%, 75%, 0.4); */
    /* box-shadow: inset -4px 0px 7px -3px rgba(150, 161, 233, 0.4); */

    display: flex;
    flex-direction: column;

    background-color: var(--sidebar_bg_clr);
    padding: 1.4rem 0 1rem 0;
    transition: 0.3s ease-in-out;
    overflow-y: auto;
    z-index: var(--sidebar_z-index);
}

.sidebar.hidden {
    transform: translateX(-100%);
}

.sidebar.no_transition {
    /* Pour éviter l'effet de transition en mode smartphone au démarrage (hidden) */
    transition: none;
}

/*==================================
    SIDEBAR - SECTIONS
===================================*/
.sidebar_section {
    margin-bottom: 1rem;
    /* border: 1px solid lightgreen; */
}

.sidebar_section_title {
    white-space: nowrap;
    font-size: .85rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6rem;
    color: var(--sidebar_title_clr);
    padding-left: 1rem;
}

/*==================================
    SIDEBAR - MENUS
===================================*/
.sidebar_menu {
    padding: 0 0.5rem 0 0.7rem;
}

.sidebar_menu_li {
    display: flex;
    align-items: center;
    padding: 0 .4rem;
    border-radius: .3rem;
    transition: 0.2s ease;
}

/*==================================
    LINK <a>
===================================*/
.sidebar_link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.1rem;
    padding-left: .6rem;
    position: relative;
    transition: 0.2s ease;
}


.sidebar_link_icon {
    display: flex;
    align-items: center;
    width: 1.2rem;
    font-size: 1.1rem;
    color: var(--sidebar_icon_clr);
    margin-right: 0.6rem;
}

.sidebar_link:hover .sidebar_link_icon {
    color: var(--sidebar_icon_clr_hover);
}

.sidebar_link p {
    font-size: .85rem;
    font-weight: 400;
    color: var(--sidebar_font_clr);
}

.sidebar_link .chevron {
    position: absolute;
    display: flex;
    align-items: center;
    right: 0.2rem;
    transition: .2s ease;
}

.sidebar_link .chevron {
    width: 1.6rem;
    font-size: 1.8rem;
    color: var(--sidebar_chevron_clr);
}

/*==================================
    BADGE
===================================*/
.sidebar_menu_badge {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 1.7rem;
    padding: 0.1rem .6rem;

    font-size: 0.75rem;
    font-weight: 400;
    /* font-style: italic; */
    color: var(--sidebar_badge_clr);
    background-color: var(--sidebar_badge_bg_clr);
    border-radius: .4rem;
}

/* .sidebar_link .badge {
    position: absolute;    
    right: .6rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .4rem;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 0.75rem;
    font-weight: 400;
    font-style: italic;
    color: var(--sidebar_badge_clr);
    background-color: var(--sidebar_badge_bg_clr);
    border-radius: .4rem;
} */

/*==================================
    MENU HOVER
===================================*/
.sidebar_menu_li:hover {
    background-color: var(--sidebar_menu_hover_clr);
}

/*==================================
    MENU ACTIF
===================================*/
.sidebar_menu_li.active {
    background-color: var(--sidebar_menu_active_bg_clr);
}

.sidebar_menu_li.active .sidebar_link p {
    color: white;
}

.sidebar_menu_li.active .sidebar_link .sidebar_link_icon {
    color: white;
}


/*==================================
    SOUS_MENU (DEROULANT)
===================================*/
.sidebar_sub_menu {
    padding: 0 .4rem;
}

.sidebar_sub_menu_wrap {
    display: grid;
    position: relative;
    padding-left: 1.1rem;
    padding-right: 0;
    overflow: hidden;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s;
}

.sidebar_sub_menu_wrap::before {
    position: absolute;
    content: '';
    width: 1px;
    top: .2rem;
    bottom: .4rem;
    left: 1.6rem;
    border-left: 2px dotted var(--sidebar_menu_active_bg_clr);
}

.sidebar_sub_menu_wrap > div {
    overflow: hidden;
}

.sidebar_sub_menu_wrap div li {
    padding-left: .9rem;
}

.sidebar_sub_menu_wrap div li .sidebar_link {
    padding-left: 1rem;
    /* height: 2rem; */
}

.sidebar_sub_menu.show .sidebar_sub_menu_wrap {
    grid-template-rows: 1fr;
}

.sidebar_sub_menu.show .chevron {
    transform: rotate(90deg);
}

/*******************************************
    BREADCRUMB
********************************************/   
.breadcrumb {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    margin-bottom: .6rem;
    z-index: var(--breadcrumb_z_index);
}

.breadcrumb ul {
    display: flex;
}

.breadcrumb ul li {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--breadcrumb_text_clr);
}

.breadcrumb ul li:not(:last-of-type)::after {
    content: ">";
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 .5rem;
}

.breadcrumb ul li a {
    transition: 0.2s;
}

.breadcrumb ul li a:hover {
    text-decoration: underline;
}

.breadcrumb ul li span {
    color: var(--clr_first);
    font-weight: 600;
}

.breadcrumb_info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-left: 1rem;
    z-index: var(--breadcrumb_info_z_index);
}

.breadcrumb_info span {
    font-size: 1.3rem;
    color: var(--clr_first);
    cursor: pointer;
}

.breadcrumb_info p {
    position: absolute;
    top: 2.3rem;
    left: 0;
    width: 500px;

    font-size: 0.9rem;
    font-weight: 400;
    color: white;
    background-color: var(--breadcrumb_info_bg_clr);
    border-radius: .5rem;
    padding: .8rem 1rem;
    box-shadow: 0 4px 20px rgba(9, 22, 31, 0.4);

    opacity: 0;
    visibility: none;
    transition: all 0.4s ease;
    pointer-events: none;
}

.breadcrumb_info span:hover + p {
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 500px) {
    .breadcrumb {
        position: absolute;
        justify-content: flex-end;
        margin-bottom: 0;
        right: 1rem;
    }
    .breadcrumb nav {
        display: none;
    }
    .breadcrumb_info span {
        font-size: 1.5rem;
    }
    .breadcrumb_info p {
        margin-left: 0;
        right: 0rem;
        left: initial;
    }
}

/*******************************************
    COLOR SWITCHER
********************************************/   
.color_switcher {
    position: fixed;
    right: 0rem;
    bottom: 1.6rem;
    z-index: 10;
    display: flex;
    align-items: center;
    z-index: 12;
    overflow: hidden;

    /* display: none; */
}

.color_switcher_wheel {
    padding: 0 1rem;
    z-index: 12;
}

.color_switcher_wheel span {
    color: var(--color_switcher_clr);
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.color_switcher_theme {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .8rem;
    padding: .6rem 1rem;
    background-color: white;
    box-shadow: -0.5px 0.5px 4px hsla(0, 0%, 15%, .1);
    border-radius: .6rem;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.color_switcher_theme.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.color_switcher_theme button {
    height: 2rem;
    width: 2rem;
    border: none;
    outline: none;
    border-radius: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color_switcher_theme button span {
    color: white;
    display: none;
}

.color_switcher_theme button.active span {
    display: block;
}

.color_switcher_theme button[data-theme="color_theme_1"] {
    background-color: hsl(23, 100%, 60%);
}

.color_switcher_theme button[data-theme="color_theme_2"] {
    background-color: rgb(54, 55, 57);
}

.color_switcher_theme button[data-theme="color_theme_3"] {
    background-color: hsla(30, 34%, 58%);
}

.color_switcher_theme button[data-theme="color_theme_4"] {
    background-color: hsl(169, 21%, 56%);
}

/*******************************************
    MAIN
********************************************/
.main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    color: var(--clr_text);
    background-color: inherit;  /* Body background color*/

    margin-top: var(--header_height);
    margin-left: var(--sidebar_width);
    
    min-height: calc(100vh - var(--header_height));
    padding: 1rem 2rem 1rem 2rem;
    transition: 0.3s ease-in-out;
}

.main.sidebar_hidden {
    margin-left: 0;
}

@media screen and (max-width: 800px) {
    .main {
        margin-left: 0;
    }
}

@media screen and (max-width: 500px) {
    .main {
        padding: 1rem 1rem;
    }
}

@media screen and (max-width: 350px) {
    .main {
        padding: 1rem .5rem;
    }
}


/*******************************************
    AUTH PAGES : login, register, password
********************************************/
.main.auth {
    margin-top: 0;
    margin-left: 0;
    align-items: center;
}

.page_content.signin,
.main_wrapper.signin {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    width: 500px;
    padding: 6rem .5rem 2rem .5rem;
}

.auth_logo {
    width: 12rem;
    margin-bottom: 2rem;
}

.auth_logo img {
    width: 100%;
}

.auth_form {
    width: 100%;
    background-color: white;
    padding: 1.8rem 2rem 3rem 2rem;
    border-radius: 0.9rem;
    box-shadow: 0.2rem 0.4rem 1.2rem 0.2rem hsla(23, 75%, 42%, .1);
}

.auth_form_title {
    margin-bottom: 1.8rem;
}

.auth_form .input_field {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    margin-bottom: 1.4rem;
}

.auth_form_submit {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1.4rem;
}

.auth_form_submit button {
    width: 12rem;
}

.auth_password_forgotten {
    display: flex;
    justify-content: flex-end;
}

.auth_password_forgotten a {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--clr_text);
    text-decoration: underline;
    transition: 0.3s;
}

.auth_password_forgotten a:hover {
    color: var(--clr_second);
}

@media screen and (max-width: 800px) {
    .main.auth {
        justify-content: center;
    }
    .page_content.signin,
    .main_wrapper.signin {
        width: 100%;
        padding: 0 .5rem;
    }
}

@media screen and (max-width: 540px) {
    .page_content.signin,
    .main_wrapper.signin {
        width: 100%;
    }
}

/*******************************************
    Open Action Message
********************************************/
.open_action_message {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: hsl(45, 94%, 31%);
    color: var(--clr_first);
    background-color: hsl(45, 100%, 90%);
    background-color: hsl(23, 100%, 93%);
    border-left: 6px solid hsl(45, 89%, 63%);
    border-left: 6px solid var(--clr_first);
    border-radius: .35rem;
    width: fit-content;
    min-width: 400px;
    padding: 0.8rem 1.6rem .8rem 1rem;
    margin-bottom: 1rem;
}

.open_action_message a {
    text-decoration: underline;
    font-size: 0.85rem;
    font-weight: 500;
}

@media screen and (max-width: 500px) {
    .open_action_message {
        width: 100%;
        min-width: 100%;
    }
}

/*******************************************
    PAGE CONTENT / MAIN WRAPPER
********************************************/
.page_content_2 {
    display: flex;
    flex-direction: column;
}

.page_section_2 {
    /*Adapte la largeur au contenu, sauf si une largeur explicite est définie.*/
    /* display: inline-block; */
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    background-color: white;
    border-radius: .6rem;
    padding: 1rem 1.2rem 1.4rem 1.2rem;
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
    font-weight: 400;
    box-shadow: 0px 2px 4px hsla(0, 0%, 15%, .2);
}

.page_content,
.main_wrapper {
    padding-bottom: 1.4rem;
}

.page_title {
    margin-bottom: 1.2rem;
}

.page_title .short_title {
    display: none;
}

.page_section {
    border-radius: .6rem;
    padding: 1rem 1.2rem 1.4rem 1.2rem;
    margin-bottom: 1.2rem;
    width: fit-content;
    font-size: 0.85rem;
    font-weight: 400;
}

.page_section.white {
    box-shadow: 0px 2px 4px hsla(0, 0%, 15%, .2);
    background-color: white;
}

.page_section.w_auto {
    width: auto;
}

.page_section_title {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr_second);
    margin-bottom: 1rem;
}

.page_section_title.border_bottom {
    /* padding-bottom: .3rem; */
    border-bottom: 1px solid var(--border_clr);
}

@media screen and (max-width: 500px) {
    .page_title .long_title {
        display: none;
    }
    .page_title .short_title {
        display: block;
    }
}

/* Page précédente */
.section_previous_page a {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.section_previous_page a span {
    font-size: 1rem;
    margin-right: 0.4rem;
    transition: 0.2s;
}

.section_previous_page a p {
    font-size: 0.8rem;
    font-weight: 400;
}

.section_previous_page a:hover span {
    color: var(--clr_first);
}

/* Actions au début d'une section (input search, buttons,... */
.section_actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section_actions.flexstart{
    justify-content: flex-start;
    gap: 1rem;
}

.section_actions_title {
    display: flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 600;
    color: var(--clr_second);
    margin-bottom: 1rem;
}

.section_actions_title.large {
    font-size: 1.2rem;
}

.section_actions_buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section_actions_buttons a {
    font-size: .85rem;
    letter-spacing: 0px;
}

.section_actions_buttons a.pdf_button {
    display: flex;
    align-items: center;
    border: 1px solid var(--border_clr);
    border-radius: .8rem;
    padding: .4rem 1.2rem .4rem .4rem;
    transition: 0.3s;
}

.section_actions_buttons a.pdf_button:hover {
    background-color: var(--clr_second);
    color: white;
}

.section_actions_buttons a.pdf_button img {
    width: 3.2rem;
}

.section_actions_buttons a.pdf_button p {
    font-size: .85rem;
    font-weight: 500;
    padding-left: .6rem;
}

/* Instructions au début d'une section */
.section_instruction {
    margin-bottom: 1rem;
}

.section_instruction_title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr_first);
    margin-bottom: 0.25rem;
}

.section_instruction_content {
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border_clr);
    border-left: 4px solid var(--clr_first);
    border-radius: .4rem;
    padding: 0.5rem 1rem;
}

/* Section contenant une table */
.section_table {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.section_data {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

/*******************************************
    MENU PAGE ACCUEIL
********************************************/
.home_page_menu .menu_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    gap: 1.4rem;
}

.home_page_menu .menu_item {
    border-radius: .4rem;
    box-shadow: 0px 2px 4px hsla(0, 0%, 15%, .2);
    background-color: white;
    transition: 0.3s;
}

.home_page_menu .menu_item:hover {
    box-shadow: var(--input_shadow);
}

.home_page_menu .menu_item a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
    padding: 1rem 1rem 1.2rem 1rem;
}

.home_page_menu .menu_item_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home_page_menu .menu_item_top span {
    font-size: 2rem;
    transition: 0.3s;
}

.home_page_menu .menu_item:hover .menu_item_top span {
    transform: translateX(.4rem);
}

.home_page_menu .menu_item_actions_nb {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 0.75rem;
    font-weight: 400;
    /* font-style: italic; */
    color: var(--sidebar_badge_clr);
    background-color: var(--sidebar_badge_bg_clr);
    border-radius: .4rem;

    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .4rem;
}

.home_page_menu .menu_item_title {
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    color: hsl(26, 4%, 33%);
}

@media screen and (max-width: 1000px) {
    .home_page_menu .menu_wrapper {
        grid-template-columns: repeat(2, 200px);
    }
}

@media screen and (max-width: 500px) {
    .home_page_menu .menu_wrapper {
        justify-content: center;
    }
}

@media screen and (max-width: 450px) {
    .home_page_menu .menu_wrapper {
        grid-template-columns: repeat(2, 180px);
        gap: 1.2rem;
    }
}

@media screen and (max-width: 400px) {
    .home_page_menu .menu_wrapper {
        grid-template-columns: repeat(1, 90%);
    }
    .home_page_menu .menu_item a {
        height: 100px;
        padding: 1rem 1rem 1rem 1rem;
    }
}

/*******************************************
    PRODUCT PAGE
********************************************/
.product_description {
    display: flex;
    flex-direction: column;
    width: 600px;
}

/* Producty name */
.product_name {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.product_name p {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--clr_second);
    margin-right: 0.8rem;
}

.product_name div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product_name div span {
    font-size: 1.2rem;
    color: var(--clr_first);
    cursor: pointer;
    transition: 0.2s;
}

.product_name div span:hover {
    transform: translatey(-.2rem);
}

/* table grid */
.product_page .section_table .table_grid_row {
    grid-template-columns: 260px minmax(300px, auto) 40px;
}

.product_page .section_table .table_grid_row div[data-label] {
    font-style: italic;
    color: hsl(0, 0%, 44%);
}

.product_page .section_table .table_grid_row div[data-value] ul {
    padding: 0.2rem 0;
}

.product_page .section_table .table_grid_row div[data-value] ul li {
    display: flex;
    align-items: center;
    height: 1.4rem;
    padding-left: 1rem;
    position: relative;
}

.product_page .section_table .table_grid_row div[data-value] ul li:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-55%);
    width: .45rem;
    height: .45rem;
    background-color: var(--clr_second);
    border-radius: 50%;
}

.product_page .section_table .table_grid_row div[data-value] ul li div:first-child {
    width: 150px;
}

/* Product Modal */
.product_page ~ .overlay .overlay_content {
    width: 400px;
    height: 250px;
}

.product_page ~ .overlay .overlay_content .overlay_content_title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--clr_second);
    margin-bottom: 2rem;
}

.product_page ~ .overlay .overlay_content form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.product_page ~ .overlay .overlay_content .input_field {
    width: 100%;
    margin-bottom: 2.5rem;
}

.product_page ~ .overlay .overlay_content .overlay_content_btns {
    display: flex;
    justify-content: center;
    width: 100%;
}

.product_page ~ .overlay .overlay_content .overlay_content_btns button {
    width: 200px;
}

@media screen and (max-width: 660px) {
    .product_description {
        width: 100%;
    }
}

@media screen and (max-width: 520px) {
    .product_page ~ .overlay .overlay_modal {
        width: 95%;
    }
}

/*******************************************
    PRODUCT PAGE EDIT
********************************************/
.product_page_edit .section_table .table_grid_row {
    grid-template-columns: 220px 300px 300px;
}

.product_page_edit .section_data {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 0 1rem;
}

.product_page_edit .section_data_row {
    border-bottom: 1px dashed hsla(23, 100%, 60%, 0.411);
    padding-bottom: .7rem;
}

.section_data_content_wrapper {
    display: flex;
    align-items: center;
}

.product_page_edit .section_data_row div[data-label] {
    margin-bottom: .2rem;
}

.product_page_edit .section_data_row div[data-value] {
    margin-bottom: .4rem;
}

.product_page_edit .section_data_row div[data-value] select,
.product_page_edit .section_data_row div[data-value] input {
    border: 1px solid var(--border_clr);
    padding: 0.3rem .6rem;
    min-width: 350px;
}

.product_page_edit .section_data_row div[data-value] select {
    padding: 0.4rem .6rem;
}

.product_page_edit .section_data_row div[data-value] select:focus,
.product_page_edit .section_data_row div[data-value] input:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem hsla(225, 28%, 39%, 0.438);
}

.product_page_edit .section_data_row div[data-value] input[type="number"] {
    min-width: 0;
    width: 90px;
    text-align: center;
}

.product_page_edit div[data-label] {
    font-size: 0.8rem;
    font-weight: 500;
    font-style: italic;
    color: hsl(23, 3%, 49%);
    color: var(--clr_second);
}

.product_page_edit div[data-action] {
    font-size: 0.8rem;
    font-weight: 400;
    font-style: italic;
    color: var(--clr_second);
    color: hsl(23, 3%, 49%);
    padding: 0 .5rem;
}

.product_page_edit .section_data_row .toggle_field {
    margin: .3rem 0 .4rem 0;
}

@media screen and (max-width: 500px) {
    .product_page_edit .section_data_row div[data-value] select,
    .product_page_edit .section_data_row div[data-value] input {
        min-width: 100%;
    }
}

/*******************************************
    DELIVERY PREPARATION
********************************************/
.delivery_preparation_page .page_section {
    width: 900px;
}

.delivery_preparation_page .calendar_day_no_delivery {
    background-color: hsl(23, 27%, 94%);
}

@media screen and (max-width: 1250px) {
    .delivery_preparation_page .page_section {
        width: 100%
    }
}

/*******************************************
    DELIVERY PREPARATION AGGREGATED
********************************************/
.delivery_preparation_aggr_page .page_section {
    width: fit-content;
}

.delivery_preparation_aggr_page .section_table .table_grid_row_first,
.delivery_preparation_aggr_page .section_table .table_grid_row {
    grid-template-columns: 250px 200px 80px;
}

@media screen and (max-width: 520px) {
    .my_page {
        grid-template-columns: 120px 1fr 50px;
    }
}

/*******************************************
    DELIVERY ORDER EDIT PAGE
********************************************/
.delivery_order_edit_page .section_table .table_grid_row_first,
.delivery_order_edit_page .section_table .table_grid_row {
    grid-template-columns: minmax(420px, auto) 170px 120px
}

.delivery_order_edit_page .section_table .table_grid_row_first {
    min-height: 2rem;
}

.delivery_order_edit_page .section_table .table_grid_row {
    min-height: 2.1rem;
}

.delivery_order_edit_page .section_table .table_grid_row div[data-name] p {
    margin-right: .8rem;
}

.delivery_order_edit_page .section_table .table_grid_row div[data-name] span {
    font-size: 0.75rem;
    font-weight: 400;
    /* font-style: italic; */
    color: hsl(23, 3%, 49%);
}

.delivery_order_edit_page .section_table .table_grid_row_first div[data-asked] {
    justify-content: center;
}

.delivery_order_edit_page .section_table .table_grid_row div[data-asked] input {
    width: 80px;
    font-size: .85rem;
    font-weight: 500;
    text-align: center;
    padding: 0.15rem 0.2rem;
    color: var(--input_font_clr);
    border: 1px solid var(--border_clr);
    border-radius: 0.3rem;
    outline: none;
    margin: 0 .5rem;
}

.delivery_order_edit_page .section_table .table_grid_row div[data-asked] span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: hsl(0, 0%, 54%);
    background-color: var(--border_clr);
    border-radius: 20%;
    width: 1.4rem;
    height: 1.4rem;
    transition: 0.2s;
    cursor: pointer;
}

.delivery_order_edit_page .section_table .table_grid_row div[data-asked] span:hover {
    background-color: var(--clr_second);
    color: white;
}