﻿@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

/*Set de couleurs :
https://mycolor.space/?hex=%23005B9B&sub=1
*/

:root {
    --nav-bg-color-1: #def2ff;
    --nav-bg-color-2: #f1faff;
    --nav-bg-color-3: #a3d5ff;
    --nav-color-1: #005b9b;
    /*--nav-color-disabled: #d3e6e4;*/
    /*--nav-color-disabled: #ffedcb;*/
    --nav-color-disabled: #f1faff;
    /*--nav-color-disabled: white;*/
    --nav-menu-color: #005b9b;
    --secondary-color: #f5f9ff;
    --z-fixed: 100
}

body {
    font-family: "Nunito";
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.dl-horizontal dt {
    white-space: normal;
}

input,
select,
textarea {
}

.fas {}

.navbar {
    height: 50px;
    margin: 0px 15px 0px 15px;
    background-color: var(--nav-bg-color-1);
}

.nav_logo-icon {
    font-size: 2.2rem;
    padding-left: 0px;
    padding-right: 15px;
    color: var(--nav-color-1);
}

.navbar-brand {
    color: var(--nav-color-1);
    padding-top:8px;
}

    .navbar-brand:hover {
        color: var(--nav-color-1);
    }

.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    background-color: var(--nav-color-1);
    border-radius: 5px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--nav-menu-color);
}

    .navbar-light .navbar-nav .nav-link:hover {
        background-color: var(--nav-menu-color);
        color: white;
        border-radius: 5px;
    }

    .navbar-light .navbar-nav .show > .nav-link,
    .navbar-light .navbar-nav .active > .nav-link,
    .navbar-light .navbar-nav .nav-link.show,
    .navbar-light .navbar-nav .nav-link.active {
        background-color: var(--nav-menu-color);
        color: white;
        border-radius: 5px;
    }

.form-check-label {
    color: var(--nav-menu-color);
}

.form-check-input {
    border-color: var(--nav-menu-color);
    font-size: x-large;
}

    .form-check-input:checked {
        background-color: var(--nav-menu-color);
    }

.custom-control-label {
    color: var(--nav-menu-color);
    border-color: var(--nav-menu-color);
    font-size: larger;
    padding-top: 5px;
    padding-left: 5px;
}


.form-control,
.form-select {
    font-size: larger;
    color: var(--nav-color-1);
    background-color: var(--nav-bg-color-1);
}
    .form-control:disabled,
    .form-select:disabled {
        font-size: larger;
        color: var(--nav-color-1);
        background-color: var(--nav-color-disabled);
    }

option, option:hover {
    color: var(--nav-color-1);
    background-color: var(--nav-bg-color-1);
}


.input-group-text {
    font-size: larger;
    color: var(--nav-color-1);
    background-color: var(--nav-bg-color-1);
}

h2 {
    color: var(--nav-color-1);
}

.btn
 {
    background-color: var(--nav-bg-color-1);
    border-color: var(--nav-menu-color);
    border-width: 2px;
    color: var(--nav-menu-color);
}

    .btn:hover,
    .btn.show,
    .btn:focus,
    .btn:first-child:active {
        background-color: var(--nav-menu-color);
        border-color: var(--nav-menu-color);
        border-width: 2px;
        color: var(--nav-bg-color-1);
    }

.btn-danger {
    background-color: var(--nav-bg-color-1);
    border-color: #943956;
    border-width: 2px;
    color: #943956;
}
    .btn-danger:hover {
        background-color: #943956;
        border-color: #943956;
        border-width: 2px;
        color: var(--nav-bg-color-1);
    }


button:focus {
    background-color: var(--nav-menu-color);
    border-color: var(--nav-menu-color);
    border-width: 2px;
    color: var(--nav-bg-color-1);
}

.dropdown-item {
    color: var(--nav-menu-color);
    background-color: var(--nav-bg-color-1);
}

    .dropdown-item:hover,
    .dropdown-item.active,
    .dropdown-item:active,
    .dropdown-item:focus {
        color: var(--nav-bg-color-1);
        background-color: var(--nav-menu-color);
    }


label {
    font-size: small;
    color: var(--nav-menu-color);
    color: black;
}

.modal-header {
    height: 50px;
    color: var(--nav-bg-color-1);
    background-color: var(--nav-menu-color);
}

.modal-footer {
    /*background-color: var(--secondary-color);*/
}

.btn-close {
    color:white;
}
*/
/*.btn-primary {
    color: black;
    background-color: lightsteel'blue;
    border-color: steelblue;
}

.btn-primary:hover {
    color: white;
    background-color: steelblue;
    border-color: steelblue;
}

.btn-primary:focus, .btn-primary.focus {
    color: white;
    background-color: steelblue;
    border-color: steelblue;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: white;
    background-color: steelblue;
    border-color: steelblue;
}
*/
/*.custom-file-label {
    color: darkblue;
    background-color: transparent;
}

.custom-file-label::after {
    content: "Browse";
    color: darkblue;
    background-color: transparent;
}
*/
/*:root {
    --header-height: 3rem;*/
/*    --nav-width: 68px;*/
/*--first-color: darkblue;
    --first-color-light: lightsteelblue;
    --white-color: #F7F6FB;
    --white-color: #519ab2;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100
}*/
/**, ::before, ::after {
    box-sizing: border-box
}
*/
/*body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s;
}

a {
    text-decoration: none;
}*/
.header {
    /*    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 1rem;
    background-color: var(--white-color);*/
    z-index: var(--z-fixed);
    transition: .5s
}

/*.navbar {
    width: 95%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 1rem;
    background-color: var(--white-color);
    z-index: var(--z-fixed);
    transition: .5s
}*/

/*.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer;
    margin-right: 20px;
}
*/

/*.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

    .header_img img {
        width: 40px
    }*/

/*.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}
*/

/*.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.nav_logo, .nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;*/
    /*padding: .5rem 0 .5rem 1.5rem;*/

/*}

.nav_logo {
    margin-bottom: 0.2rem
}

.nav_logo-icon {
    font-size: 2.2rem;
    padding-top: 0px;
    padding-left: 35px;
    color: var(--white-color);
    color: white;
}

.nav_logo-name {
    font-size: 2rem;
    padding-top: 7px;
    color: var(--white-color);
    color: white;
    font-weight: 700
}

.nav_link {*/
    /*padding-top:8px;*/
    /*position: relative;*/
    /*color: var(--first-color-light);*/
    /*color: white;*/
/*margin-bottom: 1.5rem;*/
    /*transition: .3s;
}

    .nav_link:hover {
        color: var(--white-color); 
        color: white;
    }

.nav_icon {
    font-size: 1.25rem
}

.show {
    left: 0
}*/

/*.body-pd {
    padding-left: calc(var(--nav-width) + 1rem)
}
*/
/*.active {
    color: var(--white-color); 
    color: white;
}

    .active::before {
        content: '';
        position: absolute;
        left: 0;
        width: 2px;
        height: 32px;
        background-color: var(--white-color)
    }

.height-100 {
    height: 100vh
}*/

/*@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }

    .navbar {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }

    .header_img {
        width: 40px;
        height: 40px
    }

        .header_img img {
            width: 45px
        }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }

    .show {*/
        /* Désactivation : incompatibilité avec Modal */
        /*width: calc(var(--nav-width) + 156px)*/
    /*}

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px)
    }
}*/

/*  Fin  Toolbar */



/*body {*/
    /*padding-top: 50px;
    padding-bottom: 20px;*/
/*}*/

/* Set padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*.dl-horizontal dt {
    white-space: normal;
}*/

/************************************************************** spur.css ******************************************/


/*.card-header {
    color: darkblue;
}

label {
    color:darkblue;
}*/


/*.navbar-brand:hover, .navbar-brand:focus {
        color: darkblue;
}

.navbar-dark {
    background-color:lightsteelblue;
}



.btn-dark:hover, .btn-dark:focus {
    color: darkorange;
    border-color: #bdd4fe;
}

    .btn:hover {
        color: darkblue;
        border-color: darkblue;
        border-width: 2px;
        background-color: lightsteelblue;
    }

    .btn:focus, .btn.focus {
        outline: 0;
        background-color: lightsteelblue;
        border-color: darkblue;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(63, 132, 252, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(63, 132, 252, 0.25);
    }

.dropdown-toggle {
    width:auto;
}

.dropdown-item {
    background-color:aliceblue;
}

.dropdown-item:hover {
    background-color: lightsteelblue;
}

.dropdown-item.active, .dropdown-item:active {
    color: white;
    text-decoration: none;
    background-color: darkblue;
}

.badge {
  display: inline-block;
  margin-top:-1px;
  padding: 0.10em 0.1em;
  font-size: 80%;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align:middle;
  border-radius: 2px; }

.background-dark {
    background-color: lightsteelblue !important;
}

.custom-checkbox {
    outline-color:darkblue;
}

body {
    background-color: #F7F6FB;
}*/
/**/
/************************************************************** spur.css ******************************************/

