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

    .site_title{
        display: none!important;
    }

    .icon-sga, .icon-borneeteaulogin{
        width:55px;
        height:50px;
        vertical-align:top;
    }

    .toggle{
        display: inline;
    }
    
    #sidebar-menu {
        position:fixed;
        z-index:1000; 
        background-color: #2c60ac;
    }
    #navbar {
        overflow-y:auto;
        height: calc(100vh - 230px);
    }
}

@media screen and (min-width: 991px){
    .icon-borneeteaulogin{
        width:110px;
        height:130px;
    }

    .icon-sga{
        width:40px;
        height:40px;
    }

    .toggle{
        display: none;
    }

    .menu_section{
        width:230px
    }
}

body { background:#2c60ac; }

.gras{
    font-weight : bold!important;
}

.modal-backdrop {
  z-index: -1;
}

select[readonly] {
    color: #888;
}

input[value^="Choisir"],
input[value^="Show"],
input[value^="Voir"],
input[value^="Choose"]{
    background-color: #d7d7d7 !important;
    border : solid 1px #a5a5a5 !important;
    color: #434343;
}

input[value^="Choisir"]:hover,
input[value^="Show"]:hover,
input[value^="Voir"]:hover,
input[value^="Choose"]:hover{
    color:#1a1a1a;
    background-color: #acacac !important;
}

.label-phone {
    padding-top: 10px;
}

.phone-group {
    padding-top: 10px;
}

a.site_title {
    display: flex;
    align-items: center;
    margin: 5px;
}

span.icon-sga {
    margin-right: 10px;
    background-size:contain;
    background-image: url('../img/sgamobility.jpg');
}

span.icon-sga-header {
    display: block;
    height: 32px;
    width: 32px;
    background-size: contain;
    background-image: url('../img/sgamobility.jpg');
}

div.icon-haropa { vertical-align:middle;width:80%;padding-bottom:19.34%;background-image:url('../img/haropa.jpg');background-size:contain;background-repeat:no-repeat;margin:10px auto auto auto; }
div.icon-menu { vertical-align:middle;width:100%;background-size:contain;background-repeat:no-repeat;height:15%; }

span.icon-borneeteau{
    display: inline-block;
    vertical-align: middle;
    background-image: url('../img/borneeteau.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align:top;
}

span.icon-borneeteaulogin{
    display: inline-block;
    vertical-align: middle;
    background-image: url('../img/borneeteaulogin.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align:top;
}


.divTextNav{
    margin-left: 20%;
}

.textNav{
    font-size: 22px;
    font-weight: 400;
    color: #ECF0F1!important;
}

.textNavAnd{
    margin-left: 30%;
}

.required::before{
    content: ' *';
    color : red;
}

.col-md-offset-4_5 { margin-left:37.5%; }

.alert { margin-bottom:30px;font-size:1.2em;text-shadow:none; }

i.fa.faTd { font-size:1.2em; }

.bg-primary {background-color: #5278ab !important;}

a.btn {font-size: 16px; font-weight: bold;}
a.btn-primary, button.btn-primary, input.btn-primary {background-color: #5278ab; border-color: #496bab;}
a.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover {background-color: #2b4a78; border-color: #1a3566;}
a.btn-primary:focus, button.btn-primary:focus, input.btn-primary:focus {background-color: #2b4a78; border-color: #1a3566;}
a.btn-primary:active, button.btn-primary:active, input.btn-primary:active {background-color: #2b4a78; border-color: #1a3566;}
a.btn-primary.active, button.btn-primary.active, input.btn-primary.active {background-color: #2b4a78; border-color: #1a3566;}

section.register_content a:hover { text-decoration:none !important; }
div.form_wizard div { text-align:left; }

span.chargePointSuperTitle {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Roboto', Bold;
    font-size: 20px;
    color: #444;
}

span.chargePointNB {
    font-size: 35px;
    width: 100%;
    color: black;
    font-family: 'Roboto', sans-serif
}

span.chargePointTitle {
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    vertical-align: top;
}

div.chargePointTitleLast {
    border-right: 2px solid #ddd;
}

@media screen and (max-width: 990px){
    div.chargePointTitleLast {
        border-right: none;
    }
}

.vAlign {
    vertical-align: middle !important;
}

.contentnews{
    font-size: 15px;
}

.entity-select{
    border: 1px #e5e5e5 solid;
    max-height: 500px;
    box-sizing: inherit;
    overflow: auto;
    float: initial;
}

.entity-select p{
    cursor: pointer;
    margin: 5px;
}

.left_col { background:#2c60ac; }
.nav_title { background:transparent; }
.nav.child_menu>li>a, .nav.side-menu>li>a { color:#eee; }
#sidebar-menu li a:hover { background: #4b79ba; }
#sidebar-menu li button:hover, #sidebar-menu li li:hover { background:#3968ac; }
#sidebar-menu li.active, #sidebar-menu li.current-page a { border-right:5px solid #63b956; }
#sidebar-menu>li.active>a,#sidebar-menu>li.active>button { background:linear-gradient(#244d8b,#1D4A8C),#16478D;box-shadow:rgba(0,0,0,.25) 0 1px 0, inset rgba(255,255,255,.16) 0 1px 0; }
.nav li.current-page { background:rgba(255,255,255,.1); }
.main_menu .fa { opacity:1; }
#sidebar-menu li { width: 100%; position: relative;}
#sidebar-menu li:before { background:#ddd; }
#sidebar-menu li:after { border-left:1px solid #aaa; }
#sidebar-menu h3 { margin-top: .5rem; text-shadow:1px 1px #555; font-size: 23px; padding-left: 1rem; }
#sidebar-menu a { font-size: 14px; font-weight: bold; }
#sidebar-menu ul ul a { padding-left: 40px; }
#sidebar-menu a i:not(.fa-chevron-down) {width: 30px;}

.fixed { position: fixed; }

div.alert[class^="type-"] { margin-top:40px;font-size:1em;padding:10px; }

div#autocomplete {position: absolute; border-radius: 5px ;z-index:5;background-color:#fff;box-shadow:0 0 10px #888; }
div#autocomplete.city {margin-top: 39px;}
div#autocomplete span:not(.loading) { cursor:pointer;display:block;padding:5px 10px;font-size:1.1em; }
div#autocomplete span:not(.loading):hover { background:#2c60ac;color:#fff; }
div#autocomplete span.loading { padding:5px 10px; }

img.statusTerminal { transform:scale(1.2); }

table.terminalsList { color:#111; }
table.terminalsList tr.active td { background-color:#A9CCE3 !important;border-top:1px solid #A9CCE3 !important;border-bottom:1px solid #A9CCE3 !important; }
table tr.space td { background-color:#fff !important;border:none !important;height:15px; }
table tr.connector td:nth-child(1) { font-weight:bold;width:50px;border-left:2px solid #1e3799; }
table tr.connector td:nth-child(2) { width:100px; }
table tr.connector td:nth-child(3) { color:#fff; }
table tr.connector td.state { text-transform:uppercase;letter-spacing:2px;text-align:center; }
table tr.connector td.state.available { background-color:#22b14c; }
table tr.connector td.state.occupied { background-color:#00a2e8; }
table tr.connector td.state.unavailable { background-color:#ed1c24; }
table tr.connector td.state.unknown { background-color:#ccc;color:#333; }
table tr.connector td.state.offline { background:repeating-linear-gradient(45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), linear-gradient(to bottom, #aaa, #aaa);color:#333;font-weight:bold; }
table tr.connector td.state.faulted { background:repeating-linear-gradient(45deg, transparent, transparent 10px, #d63031 10px, #d63031 20px), linear-gradient(to bottom, #ff7675, #ff7675);font-weight:bold; }
table tr.connector td.state.preparing { background-color:#00a2e8; }
table tr.connector td.state.charging { background-color:#00a2e8; }
table tr.connector td.state.suspendedevse { background-color:#00a2e8; }
table tr.connector td.state.suspendedev { background-color:#00a2e8; }
table tr.connector td.state.finishing { background:repeating-linear-gradient(45deg, transparent, transparent 10px, #00a2e8 10px, #00a2e8 20px), linear-gradient(to bottom, #016d9b, #016d9b);font-weight:bold; }

div.panelNoPadding { padding:0; }

div.error_difference {background-color: #dc3545;color: white;}

label:not(.swal2-input-label) {font-size:15.5px;font-weight:700;}
.form-control::placeholder {font-size:17px;}

span.badge:not(.rounded-pill) {font-size:14px;font-weight:700;}
span.badge-primary {background-color: #007bff;color:white;}
span.badge-secondary {background-color: #6c757d;color:white;}
span.badge-success {background-color: #28a745;color:white;}
span.badge-danger {background-color: #dc3545;color:white;}
span.badge-warning {background-color: #ffc107;color:black;}
span.badge-info {background-color: #5bc0de;color:white;}
span.badge-light {background-color: #f8f9fa;color:black;}
span.badge-dark {background-color: #343a40;color:white;}
span.badge-orange {background-color: #e08711;color: white;}

span.label-purple {background-color: #510df0; color: white;}
span.label-darkblue {background-color: #173eee; color: white;}
span.label-orange {background-color: #e08711; color: white;}

.toast-container {
    z-index: 10000;
    position: fixed;
    width: auto;
    padding: 0 5px;
}

.toast-container-modal {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 1000;
}


.toast-message {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: #f1f1f1;
    border: #e5e5e5 1px solid;
    color: #080808;
    padding: 15px 35px 15px 22px;
    min-width: 20rem;
    border-radius: 5px;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(50px); /* Initial position for sliding effect */
    font-weight: 600;
    font-size: 0.9rem;
    animation: slideFadeIn 0.4s forwards;
    pointer-events: all;
}

.message-container {
    display: flex;
    align-items: center;
    gap: 10px;
}


.toast-message .toast-icon {
    font-size: 17px; /* Taille de l'icône */
}


.toast-success {
    color: #1c8835;
    border: #28a7462a 1px solid;
}


.toast-error {
    color: #a30b0b;
    border: #a728282a 1px solid;
}

.toast-warning {
    color: #a35c0b;
    border: #a765282a 1px solid;
}


.toast-info {
    color: #181818;
    border: #4646462a 1px solid;
}   

.toast-description {
    font-size: 0.8rem;
    color: #181818;
    margin-top: 5px;
}

.content-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.close-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 15px !important;
    background: none;
    border: none;
    cursor: pointer;
}

@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slideFadeInStatic {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(50px);
    }
}

.toast-container.top {
    top: 20px;
    right: 50%;
    transform: translateX(50%);
}

.toast-container.bottom-right {
    bottom: 30px;
    right: 2rem;
}

.toast-container.bottom-left {
    bottom: 30px;
    left: 2rem;
}

.toast-message .action-btn {
    margin-left: 10px;
    padding: 5px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.7rem;
}

@media (max-width: 600px) {
    .content-container {
        flex-direction: column;
    }

    
.toast-container.top {
    top: 20px;
    right: 50%;
    transform: translateX(50%);
}

.toast-container.bottom-right {
    top: 20px;
    right: 50%;
    transform: translateX(50%);
}

.toast-container.bottom-left {
    top: 20px;
    right: 50%;
    transform: translateX(50%);
}
}

.toast-message .action-btn {
    margin-left: 5px;
    padding: 5px 15px;
    border: none;
    border-radius: 3px;
    display: flex; 
    align-items: center;
    gap:0.5rem;
    cursor: pointer;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.7rem;
}

.toast-message .action-btn-success {
    background-color: #1c8835;
}

.toast-message table {
color:#5c5c5c !important ;
}


.toast-message .action-btn-error {
    background-color: #a30b0b;
}

.duration-bar-auto {
    position: absolute;
    bottom: -1px;
    left: -1px;
    visibility: visible;
    height: 5px;
    width: 100%;
}

.toast-message .action-btn-info {
    background-color: #181818;
}

.toast-message .action-btn-warning {
    background-color: #a35c0b;
}

.toast-message .action-btn:hover {
    opacity: 0.8;
}

.toast-container-modal .spinner-border {
    content: '';
    display: block;
    padding: 5px 2px;
    width: 20px;
    height:  20px;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}


@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}