/* ================================================= */
/* This file created by Aivah                        */
/* Dated: 3rd Feb 2009	                             */
/* Copyright : 2009 Aivah.com                        */
/* Stylesheet: common.css                            */
/* ================================================= */

/*
html, body, div, span, small, object, iframe, h1, h2, h3, h4, h5, h6, pre, a, abbr, blockquote, acronym, address, code, del, dfn, dl, dt, dd, em, img, q, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, b, p {
border : 0;
font-size : 100%;
font-family : inherit;
}
*/

:root {
    --c-orange: #f39912;
    --c-orange--light: #f7ead7;
    --c-white: #fff;
    --c-blue: #4663ac;
    --c-blue--dark: #2e4da0;
    --c-blue--light: #eef1fa;
    --c-black: #1d1e19;
    --c-grey: #868686;
    --c-grey--light: #F8F7F1;
    --c-red: #f14545;

    /* Stupid dashboard colors */
    --c-dash-blue: #5447A7;
    --c-dash-blue--light: #4877f5;
    --c-dash-blue--lighter: #84A7FF;
    --c-dash-green: #15966f;
    --c-dash-green--light: #1dc390;
    --c-dash-green--lighter: #28f0b2;
    --c-dash-orange: #d17f03;
    --c-dash-orange--light: #faa523;
    --c-dash-orange--lighter: #f8b650;
    --c-dash-pink: #cc10a0;
    --c-dash-pink--light: #d983c5;
    --c-dash-pink--lighter: #eda7dc;
}

html {
    font-family: Arial, sans-serif;
    color: var(--c-black);
    overflow: auto;
}

body.login {
    margin: 0;
    padding: 0;
    background: url('img/login-bg-bds.png') no-repeat center center fixed;
    background-size: cover;

    display: grid;
    grid-template-columns: 3fr 2fr;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

@media (max-width: 768px) {
    body.login {
        grid-template-columns: 1fr;
    }
}

.login__wrapper {
    grid-column: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6rem;
    isolation: isolate;
    padding-block: 15% 3%;
    padding-right: 8%;
}

@media (max-width: 768px) {
    .login__wrapper {
        grid-column: 1;
        padding-left: 8%;
    }
}

#login-form {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login__card {
    padding: 1rem 5rem 0.5rem;
    background: var(--c-white);
    background: hsla(0, 0%, 100%, 0.5);
    border-radius: 2rem;
}

.login__logo {
    margin-bottom: 1.5rem;
    background: url('img/logo-bds.svg') no-repeat left center;
    aspect-ratio: 300/33;
}

.login__error {
    background: hsl(0, 50%, 50%);
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--c-white);
    animation: error 0.5s ease-in-out;
    animation-delay: 1s;
}

@keyframes error {

    /* shake animation */
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

.login__error p {
    margin: 0;
}

.login__error :is(.alaligne, br) {
    display: none;
}

.login__card__logo {
    text-align: center;
    margin-bottom: 1rem;
}

.login__card__input {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.login__card__input label {
    color: var(--c-black);
    text-transform: uppercase;
    font-size: 1.2rem;
    display: block;
    cursor: auto;
    font-weight: bold;
    margin-left: 1rem;
}

.login__card__input input {
    display: block;
    width: 100%;
    border: none;
    border-bottom: transparent 2px solid;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    background: #f1f1f1;
    color: var(--c-black);
    margin-bottom: 2rem;
    transition: border-bottom 0.2s ease-in-out;
}

.login__card__input input:focus-visible {
    outline: none;
    border-bottom: var(--c-orange) 2px solid;
}

.login__card__submit {
    display: block;
    border: none;
    background: var(--c-orange);
    color: var(--c-white);
    font-weight: 600;
    font-size: 1.1rem;
    width: max-content;
    margin-inline: auto;
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    transition: background 0.2s ease-in-out;
    border-radius: 10px;
}

.login__card__submit:hover {
    background: hsl(30, 100%, 50%);
}

.login__card__forgot {
    margin-top: 2.5rem;
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: hsl(0, 0%, 50%);
    transition: color 0.2s ease-in-out;
}

.login__powered {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login__powered>span {
    font-size: 0.8rem;
    color: var(--c-black);
}

.login__powered img {
    width: 6rem;
}

.c-orange {
    color: var(--c-orange);
}

.c-blue {
    color: var(--c-blue);
}

.bloc-authentification {
    background: #ffffff;
    width: 80%;
    height: 200px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid brown;
}

.btn-connexion {
    background: #21b139;
    color: #ffffff;
    border: none;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    border-bottom: 5px solid #21b139;
    /*text-transform : capitalize;*/
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 13pt;
    padding: 10px 10px 5px 10px !important;
    width: 170px !important;
    outline: none;
    cursor: pointer;
}

.btn-connexion:hover {
    text-decoration: underline;
    /*	background-color : #66CAFF;
        border-bottom : 5px solid #66CAFF;*/
}

.btn-connexion:active {
    margin-top: 5px;
    border-bottom: 2px solid #0087cd;
    border-bottom: 5px solid #0087cd;
}


.both {
    clear: both;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

#wrapper {
    width: 100%;
    height: auto;
    margin: auto;
}

#toppart {
    width: 100%;
    height: auto;
    margin: auto;
}

#footer {
    width: 100%;
    height: 100px;
    margin: auto;
    background: #414141;
}

p.copyright {
    color: #cecece;
    font: 1em Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 10px 20px;
}

#header {
    /*    background: url("../admin/img/header.gif") repeat-x scroll left bottom #ffffff;*/
    background-color: #ffffff;
    min-height: 95px;
    height: 95px;
    width: 100%;
}

.logo {
    margin-left: 1rem;
    width: auto;
}

.logo-specifique {
    margin-top: 20px;
}


.logo_powered {
    vertical-align: middle;

}

#header span {
    padding: 30px 30px;
    font: bold 1em Arial, Helvetica, sans-serif;
    color: #484848;
    position: absolute;
}

#header span small {
    font: 11px Arial, Helvetica, sans-serif;
    color: #E9BA00;
}

.logo a:link {
    color: #484848;
}

.logo a:hover {
    color: #ffffff;
}

/* ================================================= */
/* 	 COLUMN CSS                               */
/* ================================================= */
#middlepart {
    overflow: hidden;
    height: 100%;
    /*background : #d5d5d5;*/
    margin: auto;
    padding: 20px 20px;
}

#leftcolumn {
    width: 46%;
    /*padding : 10px 10px;*/
    background: #ffffff;
    float: left;
}

#rightcolumn {
    width: 48%;
    padding: 10px;
    background: #ffffff;
    float: right;
}

/* ================================================= */
/* 	 ToP MENU CSS                               */
/* ================================================= */

#menu .topmenu {
    width: 900px;
    margin: auto;
}

/* ================================================= */
/* 	 Settings MENU   CSS                               */
/* ================================================= */
.settingsblock {
    width: auto;
    background: #414141 url(../admin/img/settingsbg.gif) top left repeat-x;
    padding: 0px 10px 5px 10px;
    height: 70px;
    margin: auto 0 0px 0;
    clear: both;
}

.settingsblock div {
    float: left;
    font: normal 2em Arial, Helvetica, sans-serif;
    color: #CCCCCC;
    padding: 20px 0 0 10px;
}

.settingsblock div a:visited,
.settingsblock div a:active,
.settingsblock div a:link {
    background: url(../admin/img/arrow.gif) 0% 50% no-repeat;
    padding: 10px 10px;
    float: left;
}

.settingsblock img {
    vertical-align: middle;
}

.settingsblock a:link,
.settingsblock a:visited,
.settingsblock a:active {
    border: 0px solid #d9d9d9;
    display: inline-block;
    margin: 0 5px 0 0;
    float: right;
    padding: 5px;
    color: #fff;
    font: normal 10px tahoma, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
}

.settingsblock a:hover {
    color: #E9BA00;
}

/* ================================================= */
/* 	 SUB MENU   CSS                               */
/* ================================================= */
#submenu {
    background-color: var(--c-grey);
    padding: 0.3rem 1rem;
    text-transform: uppercase;
}

#submenu>div {
    display: flex;
    justify-content: space-between;
}

#submenu>div>form {
    order: 1;
}

#submenu ul {
    order: 0;
    margin: unset;
    padding: unset;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    list-style: none;
}

#submenu li {
    font-size: 0.7rem;
    color: var(--c-white);
}

#submenu li:first-of-type {
    pointer-events: none;
    margin-right: 2.5rem;
}

#submenu li:not(:first-of-type) {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#submenu li a {
    color: var(--c-white);
    transition: color 0.2s ease-in-out;
}

#submenu li a:hover {
    color: var(--c-orange--light);
}

#submenu img {
    vertical-align: middle;
}

#submenu img[src$='contact-consultation.png'] {
    filter: grayscale(1) brightness(0);
}

/* ================================================= */
/* 	 SIDEBAR MENU CSS                              */
/* ================================================= */
#sidebarmenu {
    background: #fff;
    padding: 1px 0px;
    overflow: visible;
}

#sidebarmenu ul {
    margin: 0;
    list-style: none;
    padding: 0px;
}

#sidebarmenu li {
    list-style: none;
    font-weight: bold;
    line-height: 25px;
    margin: 0 0px 1px 0;
    padding: 4px 10px;
    border-left: 5px solid #414141;
    background: #ededed;
}

#sidebarmenu li a {
    color: #414141;
}

#sidebarmenu li:hover {
    color: #E9BA00;
}

#sidebarmenu li a:hover {
    color: #E9BA00;
}

#sidebarmenu .activesub {
    color: #E9BA00;
}

/* ================================================= */
/* 	 SEARCH BAR CSS ITEMS                          */
/* ================================================= */
.searchbar {
    display: flex;
    color: #fff;
}

.searchbar input {
    padding: 0 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.searchbar__search {
    font-size: 1rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    background: var(--c-blue);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    transition: transform 0.2s ease-in-out !important;

    &:hover {
        transform: scale(1.1);
    }
}

/* ================================================= */
/* 	 Login Box CSS ITEMS                              */
/* ================================================= */
.loginform {
    border-top: 0px solid #414141;
    padding: 10px;
}

#login form .remember {
    float: left;
}

form.loginform label {
    float: left;
}

form.loginform input {
    clear: left;
}

#login .forgot {
    clear: both;
    float: left;
}

#login .powered {
    clear: both;
    float: right;
    font-size: 13px;
    color: #ffffff;

}

#login form .submit input {
    padding: 3px 8px;
    border: none;
    background: #39b54a;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

#login form .submit input:hover {
    padding: 3px 8px;
    border: none;
    color: #ffffff;
    background: #007236;
    text-decoration: none;
    text-transform: uppercase;
}

form .submit {
    float: right;
}

#login {
    width: 100%;
    margin: 1em auto;
}

#userpass,
#userlogin,
#useremail {
    font-size: 12px;
    width: 97%;
    padding: 3px;
}

.vmiddle {
    vertical-align: middle;
}

/* ================================================= */
/* 	 COMMON CSS ITEMS                              */
/* ================================================= */
a:link,
a:visited,
a:active {
    color: #333333;
    text-decoration: none;
}

a:hover {
    color: #E9BA00;
    text-decoration: none;
}



h4 {
    font-size: 140%;
    margin: 5px 0;
    font-weight: normal;
}

h5 {
    font-size: 110%;
    margin: 5px 0;
    font-weight: normal;
}

h6 {
    font-size: 92.5%;
    margin: 5px 0;
    font-weight: normal;
}

pre,
code {
    font: 1em/1.4em "Courier News", monospace;
    color: #484848;
    line-height: 1.5em;
}

/* ================================================= */
/* 	 MESSAGE BOX CSS                               */
/* ================================================= */
.success {
    background: #e0ecd1 url(../admin/img/success.gif) no-repeat 12px 50%;
    border: 1px solid #60a400;
    border-width: 5px 0 0 0;
    color: #60a400;
}

.error {
    background: transparent url(../admin/img/error.png) no-repeat 12px 50%;
    font-size: 16pt;
    font-weight: lighter;
    text-transform: uppercase;
    color: #ffffff;
    /*border : 1px solid #f14545;
border-width : 5px 0 0 0;
color : #f14545;*/
}

.notice {
    background: #fff0db url(../admin/img/warning.gif) no-repeat 12px 50%;
    border: 1px solid #e7a74c;
    border-width: 5px 0 0 0;
    color: #e7a74c;
}

.notice,
.success,
.error {
    padding: 10px;
    width: auto;
    margin: auto;
    text-align: left;
}

.notice span,
.success span,
.error span {
    font-weight: bold;
    font-size: 18px;
    padding: 2px 40px;
}

.success p,
.error p,
.notice p {
    margin: 0;
    padding: 0 40px;
    color: #ffffff;
}

/* ================================================= */
/* 	 LIST ITEMS CSS                                   */
/* ================================================= */
.nums ul {
    margin: 0;
    padding: 0 10px;
}

.nums li {
    list-style: decimal;
}

.squares ul {
    margin: 0;
    padding: 0 10px;
}

.squares li {
    list-style: square;
    padding: 0;
}

.circles ul {
    margin: 0 10px;
    padding: 0 10px;
    float: right;
}

.circles li {
    list-style: circle;
    vertical-align: top;
}

/* ================================================= */
/* 	 RIGHTCOLUMN BOX CSS                               */
/* ================================================= */
.notes {
    /*background : #e8e8e8;
border : 1px solid #c5c5c5;
border-top : 7px solid #414141;*/
}

.notes {
    font-size: 100%;
    color: #484848;
    padding: 20px;
    width: auto;
    margin: 0 0 10px 0;
    text-align: left;
}

.notes p {
    margin: 0;
    padding: 0;
    clear: both;
}

.notes span {
    font-weight: bold;
    font-size: 1.2em;
    padding-bottom: 2px;
    margin-bottom: 10px;
}

/* ================================================= */
/* 	 PAGINATION CSS                               */
/* ================================================= */
.pagelink {
    width: 10px;
    background: #e7e8e8 url(../admin/img/page.gif) repeat-x bottom left;
    border: 1px solid #b2b2b2;
    color: #787878;
    clear: both;
    line-height: 35px;
    text-decoration: none;
}

a.pagelink:active,
a.pagelink:visited,
a.pagelink:link {
    width: 10px;
    background: url(../admin/img/page.gif) repeat-x bottom left;
    border: 1px solid #b2b2b2;
    color: #787878;
    padding: 6px;
}

a.pagelink:hover {
    width: 10px;
    background: #fff url(../admin/img/page.gif) repeat-x bottom left;
    border: 1px solid #b2b2b2;
    color: #E9BA00;
    padding: 6px;
}

.pagecurrent {
    width: 10px;
    background: #fff url(../admin/img/page.gif) repeat-x bottom left;
    border: 1px solid #b2b2b2;
    color: #E9BA00;
    padding: 6px;
}

/* ================================================= */
/* 	 Small Box CSS                               */
/* ================================================= */
.mainbox {
    width: auto;
}

div.boxcontainer {
    color: #888;
    width: 30%;
    float: left;
    min-height: 100px;
    font: normal 10px Tahoma, Arial, Helvetica, sans-serif;
    background: #ffffff url(../admin/img/boxb.gif) repeat-x top left;
    padding: 5px;
    margin: 0 0 1% 1%;
    border: 1px solid #c6c6c6;
}

.boxcontainer h4 {
    float: none;
    font-size: 18px;
    margin: 0;
    font-family: Arial, Tahoma, Verdana, Sans-serif;
    padding-bottom: 2px;
}

.boxcontainer h4 {
    padding: 5px 0 5px 0;
}

a img.box_thumb,
a:visited img.box_thumb {
    float: left;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #7a7a7a;
    background: #7a7a7a;
}

a:hover img.box_thumb {
    background: #fff;
}



/* ================================================= */
/* 	 TABLE BUTTONS CSS                               */
/* ================================================= */

a.submit:visited,
a.submit:active,
a.submit:link,
a.add:visited,
a.add:active,
a.add:link,
a.publish:visited,
a.publish:active,
a.publish:link,
a.edit:visited,
a.edit:active,
a.edit:link,
a.delete:visited,
a.delete:active,
a.delete:link,
a.reset:visited,
a.reset:active,
a.reset:link {
    width: auto;
    margin: 0 2px 0 0;
    padding: 2px 8px;
    text-transform: uppercase;
    font: bold 10px "Lucida Grande", Arial, Helvetica, sans-serif;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}

a.publish {
    background: #afd2ea;
    color: #ffffff;
}

a.publish:hover {
    background: #0072bc;
    color: #ffffff;
}

a.edit {
    background: #949ca1;
    color: #000000;
}

a.edit:hover {
    background: #727c82;
    color: #ffffff;
}

a.delete {
    background: #ffb5b5;
    color: #ffffff;
}

a.delete:hover {
    background: #d80047;
    color: #ffffff;
}

a.add {
    background: #99d177;
    color: #ffffff;
}

a.add:hover {
    background: #00a651;
    color: #ffffff;
}

a.reset {
    background: #96aabf;
    color: #ffffff;
}

a.reset:hover {
    background: #6f7f90;
    color: #ffffff;
}

a.submit {
    background: #12486b;
    color: #ffffff;
}

a.submit:hover {
    background: #000000;
    color: #ffffff;
}

/* ================================================= */
/* 	 TABLE BUTTONS CSS                           */
/* ================================================= */


.iconBox {

    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    box-shadow: 1px 1px 2px #D5D5D5;
    cursor: pointer;
    display: inline-block;
    margin: 10px 5px;
    padding: 7px 10px;
    position: relative;
    transition: background-color 0.2s ease-out 0s;
    vertical-align: top;

}

.iconBox:hover {
    background-color: #EEEEEE;
    border: 1px solid #D0D0D0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #F2F2F2 inset;
}

.iconBox strong {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-right: 5px;
    text-transform: uppercase;
}

.dataTables_header {
    display: none;
}


/* ================================================= */
.cube-button {
    display: inline-block;
    background-color: #bdd1ee;
    /* changez la couleur d'arrière-plan ici */
    color: white;
    /* changez la couleur du texte ici */
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition-duration: 0.4s;
}

.cube-button:hover {
    background-color: white;
    color: black;
}