/**
 -----> Couleur de base
 */

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
    src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
    src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

:root {
    --main-colors-1: #EE9F68;
    --main-colors-2: #FFEFD3;
    --main-colors-3: #294C60;
    --main-colors-4: #D4EBF7;

    --shades-colors-1: #001B2E;
    --shades-colors-2: #ADB6C4;
    --shades-colors-3: #DEE2E7;
    --shades-colors-4: #F6F7F9;

    --states-colors-1: #EE7068;
    --states-colors-2: #EEC868;
    --states-colors-3: #68EE9E;

    --color-f-gray: #ECECEC;

    --main-colors-trans-1: rgba(238, 159, 104, 0.1);
    --main-colors-trans-2: rgba(255, 239, 211, 0.1);
    --main-colors-trans-3: rgba(41, 76, 96, 0.1);
    --main-colors-trans-4: rgba(212, 235, 247, 0.1);

    --shades-colors-trans-1: rgba(0, 27, 46, 0.1);
    --shades-colors-trans-2: rgba(173, 182, 196, 0.1);
    --shades-colors-trans-3: rgba(222, 226, 231, 0.1 );
    --shades-colors-trans-4: rgba(246, 247, 249, 0.1 );

    --states-colors-trans-1: rgba(238, 112, 104, 0.1 );
    --states-colors-trans-2: rgba(238, 200, 104, 0.1);
    --states-colors-trans-3: rgba(104, 238, 158, 0.1);

    --navbarLeft-color: #EBEBEB;
    --table-color: #F8F8F8;

    --font-family-default: Roboto, Arial, serif !important;

    --text-grey-color: rgba(0, 0, 0, 0.6);
    --select-border: #777;
    --select-focus: blue;
    --select-arrow: var(--select-border);


    --color-header-table: #f1f1f1;
    --color-header-body: #f8f8f8;
    --size-h1--: 36px;
    --size-h2--: 32px;
    --size-h3--: 28px;
    --size-h4--: 24px;
    --size-h5--: 18px;
    --size-h6--: 16px;
    --size-p--: 15px;
}

/**
-------> font
 */
/*h1, h2, h3, h4, h5, p, a {*/
/*    font-family: var(--font-family-default);*/
/*}*/

h1 {
    font-size:36px;
    font-style: normal;
    font-weight: bold;
    line-height: 42px;
}

h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 37px;
}

h3 {
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 33px;
}

h4 {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

h5 {
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    line-height: 18px;
}

/*p {*/
/*    font-size: 15px;*/
/*    font-style: normal;*/
/*    font-weight: normal;*/
/*    line-height: 18px;*/
/*}*/

/*a {*/
/*    font-size: 16px;*/
/*    font-style: normal;*/
/*    font-weight: normal;*/
/*    line-height: 19px;*/
/*}*/

label {
    font-family: var(--font-family-default);
    font-weight: 400;
    font-size: 17px;

}

.h-80 {
    height: 83% !important;
}

/**
------> couleur de fond
 */

.bg-main-trans-1 {
    background: var(--main-colors-trans-1) !important;
}

.bg-main-trans-3 {
    background: var(--main-colors-trans-3) !important;
}

.bg-main-trans-2 {
    background: var(--main-colors-trans-2) !important;
}

.bg-main-trans-4 {
    background: var(--main-colors-trans-4) !important;
}

.bg-states-trans-1 {
    background: var(--states-colors-trans-1) !important;
}

.bg-states-trans-2 {
    background: var(--states-colors-trans-2) !important;
}

.bg-states-trans-3 {
    background: var(--states-colors-trans-3) !important;
}


.bg-main-1 {
    background: var(--main-colors-1) !important;
}

.bg-main-1.active
{
    background: var(--states-colors-1) !important;
}

.bg-main-2 {
    background: var(--main-colors-2) !important;
}

.bg-main-3 {
    background: var(--main-colors-3) !important;
}

.bg-main-4 {
    background: var(--main-colors-4) !important;
}

.bg-shades-1 {
    background: var(--shades-colors-1) !important;
}

.bg-shades-2 {
    background: var(--shades-colors-2) !important;
}

.bg-shades-3 {
    background: var(--shades-colors-3) !important;
}

.bg-shades-4 {
    background: var(--shades-colors-4) !important;
}

.bg-states-1 {
    background: var(--states-colors-1) !important;
}
.bg-states-2 {
    background: var(--states-colors-2) !important;
}
.bg-states-3 {
    background: var(--states-colors-3) !important;
}

.bg-light-gray {
    background: var( --color-f-gray) !important;
}
.bg-navbar-left {
    background: var(--navbarLeft-color) !important;
}

.bg-table {
    background: var(--table-color) !important;
}

.bg-table-header {
    background: var(--color-header-table) !important;
}
.bg-table-body {
    background: var(--color-header-body) !important;
}

/**
------ couleur text
 */
.color-main-1 {
    color: var(--main-colors-1) !important;
}

.color-main-2 {
    color: var(--main-colors-2) !important;
}

.color-main-3 {
    color: var(--main-colors-3) !important;
}

.color-main-4 {
    color: var(--main-colors-4) !important;
}

.color-shades-1 {
    color: var(--shades-colors-1) !important;
}

.color-shades-2 {
    color: var(--shades-colors-2) !important;
}

.color-shades-3 {
    color: var(--shades-colors-3) !important;
}

.color-shades-4 {
    color: var(--shades-colors-4) !important;
}

.color-states-1 {
    color: var(--states-colors-1) !important;
}
.color-states-2 {
    color: var(--states-colors-2) !important;
}
.color-states-3 {
    color: var(--states-colors-3) !important;
}

.color-grey {
    color: var(--text-grey-color) !important;
}

/**
------> font sizing
 */
.font-size-10 {
    font-size: 10px !important;
}
.font-size-11 {
    font-size: 11px !important;
}
.font-size-12 {
    font-size: 12px !important;
}
.font-size-13 {
    font-size: 13px !important;
}
.font-size-14 {
    font-size: 14px !important;
}
.font-size-15 {
    font-size: 15px !important;
}
.font-size-9 {
    font-size: 9px !important;
}
.font-size-24 {
    font-size: 24px !important;
}
.font-size-23 {
    font-size: 23px !important;
}
.font-size-22 {
    font-size: 22px !important;
}
.font-size-25 {
    font-size: 25px !important;
}
.font-size-8 {
    font-size: 8px !important;
}

/**
------> padding
 */
.p-6 {
    padding: 4rem !important;
}

.p-8 {
    padding: 5rem !important;
}

.p-9 {
    padding: 6rem !important;
}

.px-6 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}

.px-8 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}

.px-9 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.py-8 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-9 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.px-0-5 {
    padding-left: 0.1rem!important;
    padding-right: 0.1rem!important;
}
.pt-2-2 {
    padding-top: .7rem !important;
}

.pr-8 {
    padding-right: 5rem !important;
}

.px-1rem {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}
.pl-2-5 {
    padding-left: 0.7rem !important;
}

/**
------> width
 */
.w-px-45 {
    width: 45px !important;
}

.max-w-100 {
    max-width: 100% !important;
}


/**
------> button
 */

.btn {
    border-radius: 30px !important;
    /*background: transparent;*/
    border: none !important;
    /*padding: 10px 26px;*/
    font-weight: bold !important;
    font-size: 1em;
}

.btn-circle {
   width:50px;
    height:50px;
    padding: 0px 0px !important;
}

/*  full color */
.btn-main-full-1 {
     background: var( --main-colors-1) !important;
     color: #ffffff !important;
}

.btn-main-full-1:hover:not(:disabled)
{
    color: #0056b3 !important;
}

.btn-main-full-2 {
    background: var( --main-colors-2) !important;
    color: #ffffff !important;
}

.btn-main-full-3 {
    background: var( --main-colors-3) !important;
    color: #ffffff !important;
}

.btn-main-full-4 {
    background: var( --main-colors-4) !important;
    color: #ffffff !important;
}

.btn-shades-full-1 {
    background: var( --shades-colors-1) !important;
    color: #ffffff !important;
}

.btn-shades-full-2 {
    background: var( --shades-colors-2) !important;
    color: #ffffff !important;
}

.btn-shades-full-3 {
    background: var( --shades-colors-3) !important;
    color: #ffffff !important;
}

.btn-shades-full-4 {
    background: var( --shades-colors-4) !important;
    color: #ffffff !important;
}

.btn-states-full-1 {
    background: var( --states-colors-1) !important;
    color: #ffffff !important;
}

.btn-states-full-2 {
    background: var( --states-colors-2) !important;
    color: #ffffff !important;
}

.btn-states-full-3 {
    background: var( --states-colors-3) !important;
    color: #ffffff !important;
}




/* trans color */
.btn-main-trans-1 {
    background: var( --main-colors-trans-1) !important;
    color: var( --main-colors-1) !important;
}

.btn-main-trans-2 {
    background: var( --main-colors-trans-2) !important;
    color: var( --main-colors-2) !important;
}

.btn-main-trans-3 {
    background: var( --main-colors-trans-3) !important;
    color: var( --main-colors-3) !important;
}

.btn-main-trans-4 {
    background: var( --main-colors-trans-4) !important;
    color: var( --main-colors-4) !important;
}

.btn-shades-trans-1 {
    background: var( --shades-colors-trans-1) !important;
    color: var( --shades-colors-1) !important;
}

.btn-shades-trans-2 {
    background: var( --shades-colors-trans-2) !important;
    color: var( --shades-colors-2) !important;
}

.btn-shades-trans-3 {
    background: var( --shades-colors-trans-3) !important;
    color: var( --shades-colors-3) !important;
}

.btn-shades-trans-4 {
    background: var( --shades-colors-trans-4) !important;
    color: var( --shades-colors-4) !important;
}

.btn-states-trans-1 {
    background: var( --states-colors-trans-1) !important;
    color: var( --states-colors-1) !important;
}

.btn-states-trans-2 {
    background: var( --states-colors-trans-2) !important;
    color: var( --states-colors-2) !important;
}

.btn-states-trans-3 {
    background: var( --states-colors-trans-3) !important;
    color: var( --states-colors-3) !important;
}

/* boutton outline */

.btn-main-outline-1 {
    border: 2px solid var( --main-colors-1) !important;
    color: var( --main-colors-1) !important;
    box-sizing: border-box;
}

.btn-main-outline-2 {
    border: 2px solid var( --main-colors-2) !important;
    color: var( --main-colors-2) !important;
    box-sizing: border-box;
}

.btn-main-outline-3 {
    border: 2px solid var( --main-colors-3) !important;
    color: var( --main-colors-3) !important;
    box-sizing: border-box;
}

.btn-main-outline-4 {
    border: 2px solid var( --main-colors-4) !important;
    color: var( --main-colors-4) !important;
    box-sizing: border-box;
}

.btn-shades-outline-1 {
    border: 2px solid var( --shades-colors-1) !important;
    color: var( --shades-colors-1) !important;
    box-sizing: border-box;
}

.btn-shades-outline-2 {
    border: 2px solid var( --shades-colors-2) !important;
    color: var( --shades-colors-2) !important;
    box-sizing: border-box;
}

.btn-shades-outline-3 {
    border: 2px solid var( --shades-colors-3) !important;
    color: var( --shades-colors-3) !important;
    box-sizing: border-box;
}

.btn-shades-outline-4 {
    border: 2px solid var( --shades-colors-4) !important;
    color: var( --shades-colors-4) !important;
    box-sizing: border-box;
}

.btn-states-outline-1 {
    border: 2px solid var( --states-colors-1) !important;
    color: var( --states-colors-1) !important;
    box-sizing: border-box;
}

.btn-states-outline-2 {
    border: 2px solid var( --states-colors-2) !important;
    color: var( --states-colors-2) !important;
    box-sizing: border-box;
}

.btn-states-outline-3 {
    border: 2px solid var( --states-colors-3) !important;
    color: var( --states-colors-3) !important;
    box-sizing: border-box;
}

/**
-----> boutton Radio
 */

.radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 23px;
    height: 23px;
    border: 2px solid;
    transition: 0.2s all linear;
    margin-right: 5px;
    box-sizing: border-box;
    border-radius: 11.5px;
    margin-top :auto;
    margin-bottom: auto;
}
.radio:checked {
    border-width: 7px !important;
    background: #ffffff !important;
}

.radio-box {
    display: flex !important;
    margin-top:5px;
    margin-bottom:5px;
    padding:0px;

}

.radio-box label {
    margin-top :auto;
    margin-bottom: auto;
    margin-left: 8px;
    color: var( --shades-colors-2) !important;
}

.radio-box .radio:checked + label {
    color: var( --shades-colors-1) !important;
}


.radio-main-1 {
    border-color: var( --main-colors-1) !important;
    background: var( --main-colors-trans-1) !important;
}

.radio-main-2 {
    border-color: var( --main-colors-2) !important;
    background: var( --main-colors-trans-2) !important;
}

.radio-main-3 {
    border-color: var( --main-colors-3) !important;
    background: var( --main-colors-trans-3) !important;
}

.radio-main-4 {
    border-color: var( --main-colors-4) !important;
    background: var( --main-colors-trans-4) !important;
}

.radio-shades-1 {
    border-color: var( --shades-colors-1) !important;
    background: var( --shades-colors-trans-1) !important;
}

.radio-shades-2 {
    border-color: var( --shades-colors-2) !important;
    background: var( --shades-colors-trans-2) !important;
}

.radio-shades-3 {
    border-color: var( --shades-colors-3) !important;
    background: var( --shades-colors-trans-3) !important;
}
.radio-shades-4 {
    border-color: var( --shades-colors-4) !important;
    background: var( --shades-colors-trans-4) !important;
}

.radio-states-1 {
    border-color: var( --states-colors-1) !important;
    background: var( --states-colors-trans-1) !important;
}

.radio-states-2 {
    border-color: var( --states-colors-2) !important;
    background: var( --states-colors-trans-2) !important;
}

.radio-states-3 {
    border-color: var( --states-colors-3) !important;
    background: var( --states-colors-trans-3) !important;
}


/*
-----> checkbox
 */
.checkbox-slider-container {
    position: relative;
    display: inline-flex;
}

.checkbox-slider-container label {
    margin-left: 15px !important;
    margin-top:auto;
    margin-bottom:auto;
    color: var( --shades-colors-3);
    font-weight: bold;
    font-size: 15px;
}

.checkbox-slider {
    width:100% !important;
    height: 100% !important;
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    z-index:3
}

.checkbox-slider:checked + div + label {
    color: var(--shades-colors-1) !important;
}

.checkbox-slider-sub {
    width: 37px !important;
    height:23px !important;
    display: block;
    position:relative;
    padding: 2px;
    overflow: hidden;
    border-radius: 11.5px !important;
    background: var( --shades-colors-3);
}
.checkbox-slider-move {
    margin-left:0px;
    width:50%;
    height:100%;
    background: #ffffff;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    border-radius: 45% !important;
}

.checkbox-slider-container .checkbox-slider:checked + .checkbox-slider-sub .checkbox-slider-move
{
    margin-left: 50% !important;
    content: 'OUI';
}


.checkbox-slider-main-1:checked  ~ .checkbox-slider-sub {
    background: var( --main-colors-1) !important;
    color: #ffffff;
}

.checkbox-slider-main-2:checked   ~ .checkbox-slider-sub {
    background: var( --main-colors-2) !important;
    color: #ffffff;
}

.checkbox-slider-main-3:checked   ~ .checkbox-slider-sub {
    background: var( --main-colors-3) !important;
    color: #ffffff;
}

.checkbox-slider-main-4:checked   ~ .checkbox-slider-sub {
    background: var( --main-colors-4) !important;
    color: #ffffff;
}

.checkbox-slider-shades-1:checked  ~ .checkbox-slider-sub {
    background: var( --shades-colors-1) !important;
    color: #ffffff;
}

.checkbox-slider-shades-2:checked   ~ .checkbox-slider-sub {
    background: var( --shades-colors-2) !important;
    color: #ffffff;
}

.checkbox-slider-shades-3:checked   ~ .checkbox-slider-sub{
    background: var( --shades-colors-3) !important;
    color: #ffffff;
}

.checkbox-slider-shades-4:checked   ~ .checkbox-slider-sub{
    background: var( --shades-colors-4) !important;
    color: #ffffff;
}

.checkbox-slider-states-1:checked   ~ .checkbox-slider-sub{
    background: var( --states-colors-1) !important;
    color: #ffffff;
}

.checkbox-slider-states-2:checked   ~ .checkbox-slider-sub{
    background: var( --states-colors-2) !important;
    color: #ffffff;
}

.checkbox-slider-states-3:checked   ~ .checkbox-slider-sub{
    background: var( --states-colors-3) !important;
    color: #ffffff;
}

/**
----- input text
 */

.input-text {
    border: 0px !important;
    background: var(--shades-colors-4) !important;
    border-radius: 5px !important;
    font-family: var(--font-family-default) !important;
    padding:15px !important;
    padding-left:14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 18px !important;
    color: var(--main-colors-3) !important;
    width:100% !important;
}

.input-text::placeholder {
    color: var(--shades-colors-2)
}

.input-text:disabled,
select.form-control:disabled
{
    background: var(--shades-colors-3) !important;
}


/**
-------- alert + bootstrap
 */

.alert-states-1  {
    background: var(--states-colors-trans-1) !important;
    color: var(--states-colors-1) !important;
    border-left: 5px solid var(--states-colors-1) !important;
}

.alert-states-2  {
    background: var(--states-colors-trans-2) !important;
    color: var(--states-colors-2) !important;
    border-left: 5px solid var(--states-colors-2) !important;
}

.alert-states-3  {
    background: var(--states-colors-trans-3) !important;
    color: var(--states-colors-3) !important;
    border-left: 5px solid var(--states-colors-3) !important;
}

/**
------ radius
 */

.border-top-radius-30 {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}
.border-bottom-radius-30 {
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.border-radius-30 {
    border-radius: 30px !important;
}

.border-top-radius-20 {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}
.border-bottom-radius-20 {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}
.border-radius-5 {
    border-radius: 5px !important;
}
.border-radius-20 {
    border-radius: 20px !important;
}

.border-bottom-left-radius-20{
    border-bottom-left-radius: 20px !important;
}

.border-bottom-right-radius-20{
    border-bottom-right-radius: 20px !important;
}

.border-top-left-radius-20{
    border-top-left-radius: 20px !important;
}

.border-top-right-radius-20{
    border-top-right-radius: 20px !important;
}
.border-bottom-left-radius-30{
    border-bottom-left-radius: 30px !important;
}

.border-bottom-right-radius-30{
    border-bottom-right-radius: 30px !important;
}

.border-top-left-radius-30{
    border-top-left-radius: 30px !important;
}

.border-top-right-radius-30{
    border-top-right-radius: 30px !important;
}

.border-color-main-1 {
    border-color: var(--main-colors-1) !important;
}

.border-color-states-2 {
    border-color: var(--states-colors-2) !important;
}

.border-type-dashed {
    border-right-style: dashed !important;
}

.border-width-2 {
    border-width: 2px !important;
}
.border-width-5 {
    border-width: 5px !important;
}


/**
--- col
 */
.col-md-10-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 88.333333%;
    flex: 0 0 88.333333%;
    max-width: 88.333333%;
    padding-right: 15px;
    padding-left: 15px
}
.col-md-1-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 11.666667%;
    flex: 0 0 11.666667%;
    max-width: 11.666667%;
    padding-right: 15px;
    padding-left: 15px
}

/**
---form error
*/
.invalid-feedback {
    margin-bottom: 10px !important;
}

/**
----- select
 */
select {
    appearance: none;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
    position: relative;
}
/*select::-ms-expand {*/
/*    display: none;*/
/*}*/

.select-default span {
    position: absolute;
    top: 0px;
    right:30px;
    pointer-events:none;
}

.select-default {
    position:relative;
}

.lien-acces-bibli-media {
    text-decoration: underline;
    text-decoration-color: var(--main-colors-1);
}

.cursor-pointer {
    cursor: pointer !important;
}

.r-0 {
    right: 0px!important;
}
.r-1 {
    right: 10px!important;
}
.r-2 {
    right: 20px!important;
}
.r-3 {
    right: 30px!important;
}

.line-height-1 {
    line-height: 14px;
}

.griser{
   color : var(--shades-colors-2) !important;
}

.caret-20 {
    width: 100%;
    border: 1px solid var(--shades-colors-3);
    border-radius: 5px;
}

.caret-20:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/* ID media DAM */
.grille
{
    position: relative;
}

.grille > .id-media
{
    position: absolute;
    background-color: white;
    border-radius: .2em;
    padding: 2px 4px;
    top: 5px;
    left: 20px;

    font-size: 12px;
}

/* ID media ConsoMedia */
.imagePreview
{
    position: relative;
}

.imagePreview > .id-media
{
    position: absolute;
    background-color: white;
    border-radius: .2em;
    padding: 2px 4px;
    top: 10px;
    left: 10px;

    font-size: 12px;
}