﻿
:root {
    /*blue*/
    --darkBlue: rgb(54, 87, 125);
    /*gray*/
    --gray: rgb(167, 167, 167 );
    /*green*/
    --green: rgb(89, 206, 77);
    /*primary*/
    --mud-palette-primary: #DB3223 !important;
    --mud-palette-primary-rgb: 219, 50, 35 !important;
    --mud-palette-primary-text: #ffffffff !important;
    --mud-palette-primary-darken: #0f1924 !important;
    --mud-palette-primary-lighten: #2e4a6b !important;
    --mud-palette-primary-hover: #0091EA !important;
    --mud-palette-primary-hover: rgba(0, 145, 234, 0.1) !important;
    /*secondary*/
    --mud-palette-secondary: #1E3146 !important;
    --mud-palette-secondary-rgb: 30, 49, 70 !important;
    --mud-palette-secondary-text: #ffffffff !important;
    --mud-palette-secondary-darken: #af291d !important;
    --mud-palette-secondary-lighten: #e25c50 !important;
    --mud-palette-secondary-hover: rgba(0, 191, 165, 0.1) !important;
    /*tertiary*/
    --mud-palette-tertiary: #ffffffff !important;
    --mud-palette-tertiary-rgb: 255,255,255 !important;
    --mud-palette-tertiary-text: #ffffffff !important;
    --mud-palette-tertiary-darken: #ffffffff !important;
    --mud-palette-tertiary-lighten: #ffffffff !important;
    --mud-palette-tertiary-hover: rgba(255, 255, 255, 0.1) !important;
}


/*Modif navbar */
@media (min-width: 1393px) {
    .page[b-egtr83fnxg] {
        flex-direction: row;
    }

    .sidebar[b-3xuoinibs8] {
        background-image: none; /* Gros bug pq on comprend pas, none permet de retirer le backgroud-image*/
        width: 220px !important;
        min-width: 250px;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }
}

/*Couleur des navlink*/
.mud-nav-link-text {
    color: var(--mud-palette-secondary);
    font-size: 16px;
    font-weight: bold;
}

/*Retirer le surlignement des nav menu*/
a {
    text-decoration: none !important;
}

.mud-nav-link {
    color: var(--mud-palette-primary) !important;
    font-size: 20px;
    font-weight: bold;
}

.mud-icon-size-medium {
    font-size: 2rem;
}

/*Element de la navbar*/
.nav-item[b-x940sn4s8d] {
    color: var(--mud-palette-primary);
    font-size: 16px;
    font-weight: bold;
}

/*SideBar avec logo */
.top-row[b-x940sn4s8d] {
    background-color: var(--mud-palette-primary);
    overflow-y: auto;
}
/*SlideBar */
.top-row[b-egtr83fnxg] {
    background-color: var(--mud-palette-primary);
    border-bottom: none;
}

/*Onglet avec les navlinks*/
.nav-scrollable[b-x940sn4s8d] {
    background-color: white;
    border-right: 2px solid #ccc;
}

.generalTitle {
    display: flex;
}

.title {
    color: var(--mud-palette-secondary);
    font-weight: bold;
    font-size: 55px;
    margin-bottom: 0;
}

.styleIcon {
    height: 60px;
    width: 60px;
    color: var(--mud-palette-secondary);
}




.contain {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 50px;
    align-items: center;
}

.p_style {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}




/*Block*/
.gauche {
    width: auto;
    display: inline-block
}

.left {
    width: auto;
    display: inline-block;
    float: left;
}

.droite {
    display: inline-block;
    float: right;
}

.right {
    display: inline-block;
    float: right;
}

.inline {
    display: inline-block;
    top: -10px;
    position: relative;
}

div.sep {
    display: inline-block;
    vertical-align: top;
    float: right;
    width: 4px;
}

div.sepHaut {
    display: inline-block;
    vertical-align: top;
    height: 50px;
    width: 4px;
}

div.Moitie {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

cadre {
    padding: 4px 8px 4px 8px;
    border-style: outset;
    border-width: medium;
    border-color: #ced4da;
}

div.Tl1 {
    width: 148px;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 5px;
    vertical-align: bottom;
}

div.CadSimple {
    width: 148px;
    height: 25.3px;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 5px;
    vertical-align: bottom;
    border-color: #ced4da;
    border-style: outset;
    border-width: thin;
    border-radius: 5px;
}

div.Tl2{
    width: 100%;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 5px;
    vertical-align: bottom;
}

div.CadDouble {
    /*width: 300px;*/
    height: 25px;
    /*display: inline-block;*/
    padding: 4px 8px 4px 8px;
    /*margin-top: 2px;*/
    /*margin-bottom: 5px;*/
    /*vertical-align: bottom;*/
    border-color: #ced4da;
    border-style: outset;
    border-width: thin;
    border-radius: 5px;
    font-size: 12px;
}

div.Tl3{
    width: 452px;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 5px;
    vertical-align: bottom;
}

div.CadTriple {
    /*width: 452px;*/
    height: 25px;
    /*display: inline-block;*/
    padding: 4px 8px 4px 8px;
    /* margin-top: 2px;*/
    /*margin-bottom: 5px;*/
    /*vertical-align: bottom;*/
    border-color: #ced4da;
    border-style: outset;
    border-width: thin;
    border-radius: 5px;
}

div.Tl4{
    width: 604px;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 5px;
    vertical-align: bottom;
}

div.CadQuad {
    /*width: 604px;*/
    height: 25px;
    /*display: inline-block;*/
    padding: 4px 8px 4px 8px;
    /*margin-top: 2px;*/
    /*margin-bottom: 5px;*/
    /*vertical-align: bottom;*/
    border-color: #ced4da;
    border-style: outset;
    border-width: thin;
    border-radius: 5px;
}

div.Tl5{
    width: 756px;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 5px;
    vertical-align: bottom;
}

div.CadQuint {
    /*width: 756px;*/
    height: 25px;
    /*display: inline-block;*/
    padding: 4px 8px 4px 8px;
    /*margin-top: 2px;*/
    /*margin-bottom: 5px;*/
    /*vertical-align: bottom;*/
    border-color: #ced4da;
    border-style: outset;
    border-width: thin;
    border-radius: 5px;
}

div.Bloc {
    display: flex;
    border: 2px solid var(--als_darkBlue);
    border-radius: 10px;
    padding: 10px;
    margin: 8px;
    width: 100%;
    justify-content:center;
}
div.Taille100 {
    display: inline-block;
    vertical-align: top;
    width: 99%;
}
div.Taille90 {
    display: inline-block;
    vertical-align: top;
    width: 89%;
}
div.Taille80 {
    display: inline-block;
    vertical-align: top;
    width: 79%;
}

div.Taille70 {
    display: inline-block;
    vertical-align: top;
    width: 69%;
}

div.Taille60 {
    display: inline-block;
    vertical-align: top;
    width: 59%;
}

div.Taille50 {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

div.Taille40 {
    display: block;
    vertical-align: top;
    width: 39%;
}

div.Taille30 {
    display: inline-block;
    vertical-align: top;
    width: 29%;
}

