html
{
    height:100%;
    background-color: #FAFAFA;
}

t-b-0
{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

a
{
    color: #747776;
}

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

a.titre:hover
{
    text-decoration: none;
}

.flash-Information
{
    background-color: #1EB4B9;
    color: white;
    padding: 20px;
}

.flash-Info
{
    padding: 100px;
}


#OpenLayers_Control_Attribution_7
{
    position: absolute;
    right: 0;
    bottom: 0;
}

.text-overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.flash-Error
{
    background-color: #D81F27;
    color: white;
    padding: 20px;
}

body
{
    height:100%;
    font-family: "Titillium Web" !important;
}

.container, .container-fluid
{
    background-color: #FAFAFA;
}

#copy
{
    position: absolute;
    top: calc(50%);
    right : 0;
    transform: translateY(-50%);
    color: #6F6F6E;
}

.board{
    height: calc(100% - 287px);
}

.top-50
{
    position: absolute;
    top: calc(50%);
    transform: translateY(-50%);
}

.p-0-10
{
    padding-left: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-top: 0px;
}

.imageDiv::before {
    content: attr(sensorName);
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 40%;
    font-size: 15px;
    color: white;
    z-index: 9999;
    font-family: 'bold';
}

.imageMesure::before {
    content: attr(mesureCount);
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 10%;
    font-size: 10px;
    color: white;
    z-index: 9999;
    font-family: 'bold';
}

.no-border
{
    border: none;
}

.fleche
{
    margin-right: 15px;
    cursor: pointer;
}

.flex
{
    display: flex;
    align-items: center;
}

.flex-center
{
    display: flex;
    justify-content: center;
}

.cursor-pointer{
    cursor: pointer;
}

#fos_user_change_password_form label
{
    width: 250px;
    text-align: left;
}

.admin label
{
    width: 150px;
}

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

.padding-top-8
{
    padding-top: 8px;
}

.padding-top-20
{
    padding-top: 20px;
}

.padding-top-29
{
    padding-top: 29px;
}

.padding-bottom-20
{
    padding-bottom: 20px;
}

.padding-bottom-10
{
    padding-bottom: 10px;
}

.padding-bottom-2
{
    padding-bottom: 2px;
}

.mt-3px
{
    margin-top: 3px;
}

.padding-right-10
{
    padding-right: 10px;
}

.pl-20px
{
    padding-left:17px;
}

.pl-10px
{
    padding-left:10px;
}

.btnP
{
    width: 130px;
}

.mesures
{
    margin-top:2px;
}

.activeRed
{
    border-left: 10px solid #00B3B9;;
}

p-15
{
    padding: 15px;
}

.sm-text-center-right
{
    text-align: center;
}

.sm-text-center-left
{
    text-align: center;
}

.sm-text-right-left
{
    text-align:right;
}

.lg-pl-0
{
    padding-left : 5px !important;
}

.lg-pl-0-15
{
    padding-left : 15px !important;
}

.lg-pr-0
{
    padding-right: 5px !important;
}

#dataChange {
    padding-bottom: 0;
}

.search-section {
    margin-top: 10px;
    margin-bottom: 5px;
}

.sensor-row.row {
    padding-bottom: 0;
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > span:focus, .pagination > span:hover {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > li:first-child > a, .pagination > span:first-child {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination > li > a, .pagination > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #1EB4B9;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer
}

.pagination > li:last-child > a, .pagination > span:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination > .current > a, .pagination > .current > a:focus, .pagination > .current > a:hover, .pagination > .current, .pagination > .current:focus, .pagination > .current:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #1EB4B9;
    border-color: #1EB4B9;
}

.pagination > span a {
    color: #1EB4B9;
    text-decoration: none;
}


.mab-5
{
    margin-bottom: 5px;
}

.cursor-pointer
{
    cursor: pointer;
}


.pt-10
{
    padding-top: 10px;
}

#load
{
    height: calc(100%);
    width: 100%;
    z-index: 3499;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(74, 76, 75, 0.6);
}


.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #1EB4B9; /* Blue */
    border-bottom: 16px solid #1EB4B9;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: calc(50% - 60px);
    left:calc(50% - 60px);
    z-index: 3500;
}

#bandeau
{
    font-family: "Titillium Web" !important;
    color: white;
    padding-left: 0px;
    padding-right: 0px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}









/*************************************
**************************************/
.position-absolute
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1999;
}

.col-12.md-padding-10
{
    padding-left: 2px;
}

.padding-10-0
{
    padding-left: 10px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
}

a.desactive
{
    color: black;
}

div.col-3.padding-5-bottom
{
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.hidden {
    display:none !important;
}

.olControlZoom.olControlNoSelect
{
    bottom: 10px;
    top: auto;
}

div.col-3.padding-5-left {
    padding-left: 5px;
    padding-right: 5px;
}

.padding-5
{
    padding: 5px;
}

.niveau1
{
    color: #FF6322;
}

.niveau2
{
    color: #FF402D;
}

.row
{
    padding-bottom: 5px;
}

#riumHead
{
    background-color: #1eb4b9;
    color: white;
}

.row #topRow
{
    margin-bottom: 0;
    padding-bottom: 0;
}

h1{
    color: #0c4a4d;
    font-size: 2rem;
    font-weight: 600;
}

.card-container{
    background-color: #FAFAFA;
    padding-bottom: 1.5rem;
}

#personal-dosimetry .headerCard{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}

#personal-dosimetry .username{
    color: #34495E;
    font-size: 1.85rem;
    text-align: center; 
}

#personal-dosimetry  #shifts-list, #personal-dosimetry #alerts-list, #ambient-dosimetry-board{
    padding: 1.5rem 3rem;
}
#personal-dosimetry  #shifts-list {
    padding-top: 3rem;
}

.board-dosimetry .chart-container, #personal-dosimetry .chart-container{
    position: relative;
    margin: auto;
}

.board-dosimetry .chart, #personal-dosimetry .chart{
    margin: auto;
    padding-left: 55px;
    padding-right: 55px;
 }

.card {
    border-radius:.53rem;
    box-shadow: 0.05rem 0.1rem 0.8rem #0000001A; 
    border: solid 0.05rem #EBEBEB;
    color:#34495E;
}
.card.grey-background {
    background-color:#F5F5F4;
}
.card.grey-background .data {
    color:#9D9D9D;
}
.card.dark-background {
    background-color: #34495E;
    border-color: #34495E;
}

#list-tabs .underline {
    border-radius: 10px;
    height: 0.1rem;
    margin-top: 0.2rem;
    background-color:  rgb(190, 190, 190);
}

#list-tabs {
    padding-top: 1.5rem
}

#list-tabs .current .underline {
    background-color:  #34495E;
    height: 0.2rem;
}

#list-tabs .current .titleText, #list-tabs .current .fas , #list-tabs .current .far{
    color:  #34495E;
}

#list-tabs .titleText, #list-tabs .fas, #list-tabs .far{
    color:  rgb(190, 190, 190);
}

#txtListe, #txtAlerte{
    font-size: 1.9rem;
    color: #34495E;
}

.card.dark-background .line-top, .card.dark-background .line-top {
    background-color: transparent;
}
.card.dark-background {
    color: white
}
.card .label {
    font-size: 1.3rem;
    padding-top: 0.4rem;
}
.card .data{
    font-size: 2.2rem;
    font-weight: bold;
}
.card .unit{
    font-size: 1.4rem;
}
.card .line-top {
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    height: 0.4rem;
}
.card.border[rwa-status~="alert"] .line-top, .card.status[rwa-status~="alert"], .card[rwa-status~="alert"][rwa-mode~="single-values"]{
    background-color: #D81F27;
    border-color: #D81F27;
}
.card.border[rwa-status~="normal"] .line-top,  .card.status[rwa-status~="normal"] .line-top{
    background-image:linear-gradient(270deg, #1EB4B9, #0DB2E3);
}

.card.border[rwa-status~="warn"][rwa-mode~="multiple-values"] .line-top  {
    background-image:linear-gradient(270deg, #FF7141, #D81F27);
}

.card[rwa-status~="warn"][rwa-mode~="single-values"]{
    background-color: #FF7141;
    border-color: #FF7141;
}

.board-card {
    text-align: center;
    /* height: 9.3rem; */
    border: solid 0.05rem #EBEBEB;
}
.board-card.grey-background .data{
    font-size: 2.13rem;
}

.board-card.dark-background {
    background-color: #34495E;
    border-color: #34495E;
}

.smallLabel {
    color: #34495E;
}

.board-card.status[rwa-status~="alert"] .label, .card[rwa-status~="warn"][rwa-mode~="single-values"] .label,
.card[rwa-status~="alert"][rwa-mode~="single-values"] .label{
    color: white;
}

.board-card .board-card-content {
    display: flex;
    height: 6.40rem;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 0.37rem;
}

.board-card .percent,.board-card .percent, .board-card .limit, .board-card .limit{
    font-size: 0.85rem;
    color:#707070; 
}

.board-card[rwa-status~="alert"] .percent, .board-card[rwa-status~="alert"] .limit,
.board-card[rwa-status~="warn"] .percent, .board-card[rwa-status~="warn"] .limit,
.board-card[rwa-status~="warn"] .fa-question-circle, .board-card[rwa-status~="alert"] .fa-question-circle{
    font-size: 0.85rem;
    color: white; 
}

.board-card .data-percent{
    margin-right: 0.48em;
}



/* Style popover */
.popover{
   border: 0px solid transparent;
}

/* if popover contains a header */
.popover .arrow + h3.popover-header {
    margin: 0px;
    color: white;
    background-color: #20303f;
    border: 0px solid transparent;
    border-radius: 0.3rem 0.3rem 0 0;
}
.popover h3.popover-header + div.popover-body {
    margin: 0px;
    color: white;
    background-color: #34495e;
    border-radius: 0 0 0.3rem 0.3rem;
    border: 0px solid transparent;
}
/* end if */

/* else */
.popover h3.popover-header:empty + div.popover-body {
    margin: 0px;
    color: white;
    background-color: #34495e;
    border-radius: 0.3rem;
    border: 0px solid transparent;
}
/* end else */

.bs-popover-bottom .arrow::after, .bs-popover-bottom .arrow::before{
    border-top: 0px solid transparent;
    border-bottom-color: #34495e;
    top: 1px;
}
.bs-popover-top .arrow::after, .bs-popover-top .arrow::before{
    border-bottom: 0px;
    border-top-color: #34495e;
    top: -2px;
}

h3.popover-header::before{
    display: none !important;
}
h3.popover-header:empty::before{
    display: block !important;
}



#content-wrap {
    height : 100%;
}

#full-dosimetry-board{
    height : 100%;
    display: flex;
    flex-direction: row;
}

#full-dosimetry-board #ambient-dosimetry-board{
    background-color:#FAFAFA;
}

#ambient-dosimetry-board .dot-content{
    padding-top : 0.85rem;
}

#ambient-dosimetry-board .dot {
    cursor: pointer;
    height: 0.65rem;
    width: 0.65rem;
    margin: 0 2px;
    background-color: rgba(52, 73, 94, 0.3);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
  
#ambient-dosimetry-board .active, .dot:hover {
    background-color:rgba(52, 73, 94, 1);
    cursor: pointer;
    height: 0.75rem;
    width: 0.75rem;
}

#ambient-dosimetry-board .flex-row, #operational-dosimetry-board .flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.title{
    font-size : 1.9rem; 
    color :#34495E;
}

.title .title-text {
    margin-left: 0.4em;
}



#bandeau .tool{
    position: relative;
    display: inline-block;
}
  
#bandeau .tool .tooltext{
    visibility: hidden;
    box-shadow: 0.068rem 0.14rem 1.06rem #0000001A;
    border: 0.068rem #EBEBEB;
    background-color: white;
    border-radius:.71rem;
    height : 4rem;
    width : 9.5rem;
    margin-left : -6em;
    margin-top : 1.6rem;
    position: fixed;
    z-index: 1;
}
  
.tool .tooltext::after {
    content: " ";
    position: absolute;
    bottom: 100%; 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #707070 transparent;
}
  
.board-card.border .data[rwa-status~="warn"]{
    font-size: 2.13rem;
    color:#FE5400;
}

.board-card.status[rwa-status~="alert"] .data[rwa-status~="alert"], .board-card.dark-background .data,
.card[rwa-status~="warn"][rwa-mode~="single-values"] .data, .card[rwa-status~="alert"][rwa-mode~="single-values"] .data{
    font-size: 2.13rem;
    color:white;
}

.board-card.border .data[rwa-status~="alert"]{
    font-size: 2.13rem;
    color: #D81F27;
}

header {
    position: sticky;
    width: 100%;
    height: 70px;
    z-index: 5;
    background-color: #1EB4B9;
    color: #FFFFFF;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}

header .header-content {
    height: 100%;
}

#user-info {
    background-color: #34495E;
    display: none;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: calc(100vh - 70px);
    opacity: 0.95;
    z-index: 4;
}

#user-info .info {
    flex-grow: 1;
}

#user-info .info-item.language .label {
    margin-right: 1rem;
}

header .header-content-medium {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

header .left-side {
    display: flex;
    align-items: center;
    user-select: none;
}

header .fas.fa-bars {
    font-size: 24px;
}
header .fas.fa-user {
    font-size: 20px;
}

header .right-side {
    flex: 1 0 auto;
    text-align: right;
    font-size: 0.9rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

header .right-side #change-locale-select {
    margin-right: 1rem;
}

.logout-link {
    text-decoration: none;
    color: #FFFFFF;
}

.logout-link:hover {
    color: #FFFFFF;
}

#user-info .logout-link {
    display: flex;
    align-items: center;
}

header .right-side .logout-link {
    margin: 0 1rem;
}

header .right-side .logout-link .fas {
    margin-left: 0.3rem;
    font-size: 1rem;
}

header .header-content-small {
    display: none;
}

.view {
    display: flex;
    height: calc( 100vh - 70px);
}

#sidebar {
    width: 250px;
    background-color: #34495E;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 4;
}

#sidebar .nav-links {
    flex-grow: 1;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.2rem;
}

footer .app-version {
    margin-top: 0.5rem;
    color: white;
}

#sidebar .sidebar-item, #user-info .info .info-item {
    height: 4rem;
    display: flex;
    align-items: center;
    padding: 0 0.7rem 0 0.9rem;
    font-size: 1.3rem;
    color: #FFFFFF;
    cursor: pointer;
    border-left: 0.4rem solid #34495E;
}

#user-info .info .info-item {
    cursor: initial;
}

#sidebar .sidebar-item.active {
    background-color: #2F4154;
    border-left-color: #1EB4B9;
    font-weight: bold;
}

#sidebar .sidebar-item .label, #user-info .info .info-item .label {
    margin-left: 0.9rem;
    font-size: 1.1rem;
}

body.menu-collapsed #sidebar {
    width: 65px;
}

body.menu-collapsed #sidebar .sidebar-item {
    border: none;
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 0;
}

body.menu-collapsed #sidebar .sidebar-item.active {
    background-color: #1EB4B9;
}

body.menu-collapsed #sidebar .sidebar-item .label {
    display: none;
}

.view-content {
    position: relative;
    flex: 1 0 auto;
    width: calc( 100% - 250px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 3rem;
}

.view.app_user_sensorstracking .view-content,
.view.app_user_ambientdosimetryalerts .view-content,
.view.app_user_board .view-content,
.view.app_user_personaltracking .view-content{
    padding: 0;
}

.map .active{
    background-color: transparent;
    color: white !important;
}

.view.app_user_sensorstracking .view-content #dataMap #map,
.view.app_user_ambientdosimetryalerts .view-content #dataMap #map {
    z-index: 0;
}

.map.leaflet-container .leaflet-tooltip-pane .leaflet-tooltip {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.map.leaflet-container .leaflet-tooltip-pane .leaflet-tooltip::before {
    display: none;
}

.map.leaflet-container .leaflet-tooltip-pane .leaflet-tooltip .popover {
    width: 150px;
}

.map.leaflet-container .leaflet-tooltip-pane .leaflet-tooltip .popover.marker-tooltip .popover-header {
    overflow: hidden;
    text-overflow: ellipsis;
}

#dataMap #map-container, #dataMap #liste {
    width: 50%;
}
#dataMap #liste {
    padding-top: 0.5rem;
}
#details-info {
    font-size: 0.8rem;
}

.font-13
{
    font-size:13px;
}

.colorVF
{
    color: #0c4a4d;
}

.colorB
{
    color:#1eb4b9;
}

.idSensor
{
    color: #0c4a4d;
    font-size: 25px;
    border: none;
    background: none;
}

.text-area
{
    border: none;
    background-color: white;
    resize: none;
    height: 48px;
}

.lvlVF
{
    color: #0c4a4d;
    font-size: 25px;
    border: none;
    background-color: white;
    width: 120px;
    padding: 5px;
    line-height: 38px;
}

.p-l-0
{
    padding-left: 0 !important;
}

.btnBleu{
    color: white;
    background-color: #1eb4b9;
    radius: 0;
    padding: 5px;
    margin: 5px;
    border: none;
}

a.btnBleu:hover
{
    text-decoration: none;
    color: white;
}

.btnDarkGreen{
    color: white;
    background-color: #01494C;
    text-align: center;
    border: 1px solid #01494C;
 }

.activ{
    background-color: #666;
}


.btnGrey, .btnGrey:hover{
    color: white;
    background-color: #9d9f9e;
    padding: 4px 27px;
    margin-left: 20px;
    border: none;
    text-align: center;
    text-decoration: none;
}

.btnVert{
    color: white;
    background-color: #91c453;
    radius: 0;
    padding: 5px;
    margin: 5px;
    /*border: none;*/
}

.nomGroupe
{
    color: white;
    background-color: #1eb4b9;
    font-size: 25px;
    padding-bottom: 10px;
    padding-top: 10px;
}

#ServeurTime
{
    background-color: #9d9f9e;
}

.nomGroupe .fa
{
    color: white;
    font-size: 25px;
    margin: 5px;
}

.customHead
{
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    overflow: visible !important;
}

.param
{
    background-color: #F2F2F2;
}

.v-align-50
{
    margin-top: 50%;
    transform: translateY(-50%);
}

.fa
{
    color: #1eb4b9;
    font-size: 25px;
}

.cpt
{
    color: #1eb4b9;
}

.col-10 a, .col-10 a:visited, .col-10 a:hover, .col-10 a:active
{
    color: white;
    text-decoration: none;
}

#popup
{
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display:none;
}

#ajoutCapteur
{
    background-color: white;
    position: relative;
    margin-top: 10%;
    width: 90%;
    margin-left: 5%;
    text-align: center;
    padding: 50px;
    box-shadow: rgba(0,0,0,0.8);
}

.pointer
{
    cursor: pointer;
}

.col-3 a:hover
{
    text-decoration: none;
}

#select
{
    display: inline-block;
    width: 70%;
}

#logoRium {
    max-width: 2rem;
    margin: 0 0.9rem 0 1.5rem;
}

.vcenter1 {
    margin-top: 50px;
}

.vcenter2 {
    position: absolute;
    margin-top: 25px;
    transform: translateY(-50%);
    left:60px;
}

.vcenter3 {
    position: absolute;
    margin-top: 25px;
    transform: translateY(-50%);
    right: 20px;
}

.height-105px
{
    height: 70px;
}



.sm-mt-20
{
    margin-top: 20px;
    margin-bottom: 20px;
}

.sm-mt-10
{
    margin-top: 10px;
}

.Warn
{
    padding : 20px;
    display: inline-block;
}

#Warning
{
    background-color: #FF6322;
}

#Alert
{
    background-color: #FF402D;
}


.margin-top-12
{
    margin-top: 10px;
}

.sm-text-center
{
    text-align: center;
}

.sm-text-s-center
{
    text-align: center;
}

#mapdiv
{
    min-height: 400px;
    height: calc(100vh - 70px - 47.6px) !important;
}

#MapSensor
{
    height: 150px;
}

hr.hrMap
{
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: white;
}

.row:not(.show-overflow)
{
    overflow: hidden;
}

.sensor-label
{
    font-size: 12px;
    position: absolute;
    color: white;
    font-weight: bold;
    top : 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}

.margin-5
{
    margin: 5px;
}

#imgMap {
    position: relative;
    height: calc(100vh - 70px);
    display: flex;
}

#imgMap img {
    width: 100%;
}


.leaflet-top
{
    bottom: 0;
}

.leaflet-control.leaflet-control-zoom
{
    position: absolute;
    bottom: 0;
    margin-bottom: 10px;
}

.rium-chart {
    height: 250px;
    overflow: hidden;
}

#chartSpectre
{
    height: 600px;
}

.seuil{
    width:50px;
}

.state{
    padding: 50px;
    background-color: #00B3B9;
    display: inline-block;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-bottom: 0;
}

.switchBoard{
    position: absolute;
    width: 50px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.switchEdit{
    width: 50px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(25%, 0%);
}


/* Hide default HTML checkbox */
.switch input {display:none;}

.changePass label
{
    width: 250px;
}

.lbl
{
    color: black;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
}

.activeLbl
{
    color: #1eb4b9;
    font-weight: bold;
}

#slid
{
    display: inline-block;
    vertical-align: middle;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border: 1px solid #1eb4b9;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: #1eb4b9;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: white;
    border: 1px solid #1eb4b9;
}

input:focus + .slider {
    box-shadow: 0 0 1px #1eb4b9;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#chartTemp[data-x-axis]::before {
    content: attr(data-x-axis);
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    font-size: 11px;
    color: #777;
}

#chartTemp[data-y-axis]::after {
    content: attr(data-y-axis);
    position: absolute;
    top: 85px;
    left: -40px;
    font-size: 11px;
    color: #777;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

#chartSpectre[data-x-axis]::before {
    content: attr(data-x-axis);
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    font-size: 11px;
    color: #777;
}

#chartSpectre[data-y-axis]::after {
    content: attr(data-y-axis);
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 11px;
    color: #777;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

#chartSpectre svg:not(:root), #chartCps svg:not(:root), #chartTemp svg:not(:root), #chartDose svg:not(:root)
{
    overflow:visible;
}

.ct-barlabel
{
    color: white;
    fill: white;
    font-size: 12px;
}


.row .ov
{
    overflow: visible;
}

.chart-container {
    margin-bottom: 1rem;
}

.rium-chart[data-x-axis]::before {
    content: attr(data-x-axis);
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    font-size: 11px;
    color: #777;
}

.rium-chart[data-x-axis]::after {
    content: attr(data-y-axis);
    position: absolute;
    top: 105px;
    left: 0;
    width: 100px;
    font-size: 11px;
    color: #777;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

.margin-bottom-10
{
    margin-bottom: -10px;
}

#logoclient
{
    height: 75px;
    margin-top: -20px;
}

.padding-10
{
    padding-top: 5px;
    padding-bottom: 10px;
}

.padding-15
{
    padding: 15px !important;
}

.padding-30-left
{
    padding-left: 30px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.padding-30-left-5
{
    padding-left: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 5px !important;
}

div.olMap.padding-15
{
    padding: 15px !important;
}

.width-100
{
    width: 100%;
}

.height-100
{
    height: 100%;
}

height-145px
{
    height: 145px;
}

.display-none
{
    display: none;
}

.row.margin-bottom-30
{
    margin-bottom: 30px;
}

g.ct-series-a .ct-bar, g.ct-series-a .ct-line, g.ct-series-a .ct-point, g.ct-series-a .ct-slice-donut
{
    stroke: #1eb4b9;
}

.doseMensuelle .ct-bar
{
    stroke: #1eb4b9;
    stroke-width: 50px;
}

g.ct-series-a .ct-bar
{
    stroke-width: 3px;
}

g.ct-series-a text.ct-label
{
    display: none;
}

g.moyenne path.ct-line
{
    stroke: black;
    stroke-width: 1px;
}

g.moyenne line.ct-point{
    display: none;
}

g.ovl line.ct-point{
    display: none;
}

g.moyenne text.ct-label{
    stroke: black;
}


g.ovl text.ct-label{
    stroke: red;
}

g.ovl path.ct-line
{
    stroke: red;
    stroke-width: 2px;
}



.nav{
    display: none;
    position: absolute;
    width: 100%;
    top: 45px;
    left: 0;
    z-index: 99999;
    background-color: #1EB4B9;
    text-align: center;
}

.nav li a
{
    text-decoration: none;
}

ul, li
{
    list-style-type: none;
    padding: 0;
}

nav li a:hover
{
    text-decoration: none;
}

.ct-line
{
    position: absolute;
    bottom: 0;
}

.top-8.icon
{
    line-height: 1.5;
}

.absolute
{
    position: absolute;
    right: 15px;
}

.bold
{
    text-decoration: bold;
}

.margin-left-10
 {
     margin-left: 10px;
 }

.margin-left-15
{
    margin-left: 15px;
}

.margin-left-20
{
    margin-left: 20px;
}

.margin-left-5
{
    margin-left: 5px;
}

.margin-left-40
{
    margin-left: 40px;
}

.margin-left-80
{
    margin-left: 80px;
}


.con input
{
    background-color: transparent;
    border: 1px solid white;
    color: white;
    width: 100%;
}

.form-input
{
    width: 100%;
    padding: 4px 9px;
    border: 1px solid #ced4da;
}


.con input[type="submit"]
{
    background-color: white;
    color: #1eb4b9;
}

.con input[type="password"]
{
    background-image: url('images/R.PNG');
}

::placeholder {
    color: white;
    opacity: 1;
}

#search {
    padding-left: 5px;
}

#search::placeholder {
    color: #747776;
    opacity: 1;
}

.rowInf
{
    border-bottom: 1px solid black;
}

.rowPrin
{
    padding-top: 10px;
    padding-left: -10px;
    padding-right: -10px;
}

.margin-top-25
{
    margin-top: 25px;
}

#Popup.olPopup
{
    width: 300px;
}

.margin-5
{
    margin-bottom: 5px;
}

.width-calc-100
{
    width: calc( 100% - 150px );
}


.ct-series-a .ct-line {
    stroke: red;
    stroke-width: 2px;
}

.ct-line.ct-threshold-0, .ct-point.ct-threshold-0, .ct-bar.ct-threshold-0 {
    stroke: #1EB4B9 !important;
    stroke-width: 1px;
}

.ct-line.ct-threshold-1, .ct-point.ct-threshold-1, .ct-bar.ct-threshold-1 {
    stroke: #1EB4B9 !important;
}

.ct-line.ct-threshold-2, .ct-point.ct-threshold-2, .ct-bar.ct-threshold-2 {
    stroke: #EA8B2B !important;
}

.ct-line.ct-threshold-3, .ct-point.ct-threshold-3, .ct-bar.ct-threshold-3 {
    stroke: #EA8B2B !important;
}

.ct-line.ct-threshold-4, .ct-point.ct-threshold-4, .ct-bar.ct-threshold-4 {
    stroke: #D81F27 !important;
}

span.ct-label.ct-horizontal.ct-end
{
    font-size: 13px;
}

span.ct-label.ct-vertical.ct-start
{
    font-size: 13px;
}

#chartSpectre span.ct-label.ct-horizontal.ct-end
{
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start;
}

.graphsuivi
{
    height: 250px;
}

line.ct-point
{
    stroke-width: 5px;
}

.trio
{
    display:inline-block;
    width: 20%;
    vertical-align: text-top;
}

.cal-calendar{
    width: 100%;
    text-align:center;
}

.cal-month
{
    margin-bottom: 30px;
}

.month-table
{
    width: 90%;
}

.month-table th, .month-table td
{
    width: 14.28%;
}


.cal-month
{
    height: 185px;
}

.use
{
    background-color: #1eb4b9;
}

.opac1
{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

#page-container {
  position: relative;
  min-height: 100vh;
}

.accordion.closed .refresh-button {
    display: none;
}

.undo-button {
    display: inline;
    background-color: transparent;
    border: 1px dashed #1eb4b9;
    color: #1eb4b9;
    padding: 0.2rem 0.6rem;
}

.refresh-button {
    background-color: transparent;
    border: 1px dashed #34495E;
    color: #34495E;
    border-radius: 5px;
    font-size: 1rem;
    padding: 0.3em 1rem;
    margin-left: 1rem;
    vertical-align: middle;
}

.export-button {
    background-color: transparent;
    border: 1px dashed #1eb4b9;
    color: #1eb4b9;
    border-radius: 5px;
    font-size: 1rem;
    padding: 0.3rem 1rem;
}

.refresh-button[disabled] {
    background-color: #efefef;
    border-color: #efefef;
}

.measure-comment {
    margin-left: 4rem;
    margin-top: 0;
    line-height: 1.5rem;
}

.switch-flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.5rem;
}

.switch-flex-container .label {
    margin-bottom: 5px;
}

.disabled-input-overlay {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

.preference-form {
    padding: 2rem;
}

.data-table {
    width: 100%;
    table-layout: fixed;
}

.data-table thead {
    background-color: #E8F7F8;
    color: #34495E;
    margin: 1rem 2rem;
}

.data-table thead tr th, .data-table tbody tr td {
    text-align: left;
}
.data-table thead tr th.first-data-cell,
.data-table tbody tr.table-link td.first-data-cell a.row-link,
.data-table tbody tr:not(.table-link) td.first-data-cell {
    padding-left: 1.2rem;
    text-align: left;
}

.data-table thead tr th {
    padding: 0.7rem 0;
    font-weight: normal;
    border-bottom: 1px solid #34495E;
    background-color: #E8F7F8;
    vertical-align: top;
}

#sensors-table, .view:not(.sensordata) #alerts-table {
    padding: 0 0.5rem;
}

#sensors-table .data-table thead tr th:not(.first-data-cell), #alerts-table .data-table thead tr th{
    text-align: center;
}

#sensors-table td:not(.first-data-cell), #alerts-table:not(.data-table) td{
    text-align: center;
}

#alerts-table {
    width: 100%;
}

#alerts-table .alert-item.selected {
    background-color: #E8F7F8;
}

.data-table thead tr th .table-sort-icon {
    margin-left: 0.5rem;
    color: #34495E;
}

.data-table thead tr th .active {
    background-color: transparent;
    color: #34495E;
}

.data-table thead tr th .active .table-sort-icon {
    color: #1eb4b9;
}

.data-table thead tr th .suffix {
    color: #5D5D5D;
    font-size: 0.8rem;
}

.sortable-table-header {
    cursor: pointer;
}

.data-table tbody tr:not(.table-link) > td, .data-table tbody tr.table-link > td a.row-link {
    /* Pour avoir les 48px par défaut */
    padding: 0.74rem 0.5rem 0.75rem 0;

    /* J'ai enlevé le height: 48px car le texte n'était plus centré verticalement. */
    /* De plus, les tableaux avec des td sur 2 lignes ne faisaient apparaitre que la première ligne */
    word-wrap: break-word;
}

.data-table tbody tr.table-link > td a.row-link, .row-link {
    display: block;
    color: unset;
    text-decoration: none;
}

.data-table tbody tr td:last-of-type {
    padding-right: 0;
}

.data-table tbody tr td.td-text-center {
    text-align: center;
}

.data-table tbody tr:not(:last-child) {
    border-bottom: 1px solid #E7E8EB;
}
.data-table tbody tr.tr-open {
    border-bottom: 1px dashed #34495E;
}

.data-table tbody tr {
    background-color: #FFF;
}

.data-table tbody tr.odd {
    background-color: #F5F5F5;
}

.data-table tbody tr.error {
    background-color: #ffa1a1;
}

.data-table tbody tr.active {
    background-color: rgba(30, 180, 185, 0.4);
    color: rgb(33, 37, 41);
}

.data-table:not(.not-clickable-rows) > tbody > tr:hover:not(.not-clickable-row) {
    background-color: rgba(30, 180, 185, 0.2);
}

.data-table .highlight-cell {
    width: 0.8rem;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.data-table:not(.not-clickable-rows) > tbody > tr:not(.not-clickable-row) {
    cursor: pointer;
}

.data-table tbody tr.alert-level-1 .highlight-cell {
    background-color: #FE5400;
}
.data-table tbody tr.alert-level-2 .highlight-cell {
    background-color: #D81F27;
}

.data-table tbody tr .alert-label {
    font-weight: bold;
}
.data-table tbody tr.alert-level-1 .alert-label {
    color: #FE5400;
}
.data-table tbody tr.alert-level-2 .alert-label {
    color: #D81F27;
}

#shift-details {
    position: relative;
    margin: 2rem 0;
}

#shift-details #dose-rate-chart-container {
    height: 400px;
}

#shift-details #spectrum-chart-container {
    height: 600px;
}

.pagination-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.pagination {
    margin: 1rem 0;
}

/* BOOTSTRAP OVERRIDE */
.btn.disabled, .btn:disabled, .btn.disabled:active, .btn:disabled:active, .btn.disabled:focus, .btn:disabled:focus, .btn.disabled:hover, .btn:disabled:hover {
    background-color: grey;
    border-color: grey;
}

.btn-primary {
    background-color: #1eb4b9;
    border-color: #1eb4b9;
}

.btn-outline-primary {
    border-color: #1eb4b9;
    color: #1eb4b9;
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:hover {
    background-color: #1eb4b9;
    border-color: #1eb4b9;
    color: #fff;
}

.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):focus {
    background-color: #38ced3;
    border-color: #38ced3;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #1eb4b9;
    border-color: #1eb4b9;
}

.custom-checkbox input, .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.custom-checkbox.disabled, .custom-radio.disabled {
    cursor: initial;
}
.custom-checkbox .label-key, .custom-radio .label-key {
    margin-left: 0.5rem;
}
.custom-checkbox, .custom-radio {
    display: flex;
    user-select: none;
    cursor: pointer;
    margin-bottom: 0;
    align-items: center;
}
.custom-checkbox .checkmark, .custom-radio .radiomark {
    height: 20px;
    width: 20px;
    border: 1px solid #34495E;
    border-radius: 3px;
}

.custom-radio .radiomark {
    border-radius: 50%;
}
.disabled .custom-checkbox, .disabled .custom-radio {
    pointer-events: none;
}
.disabled .custom-checkbox .checkmark, .disabled .custom-radio .radiomark,
.custom-checkbox input[disabled="disabled"] ~ .checkmark {
    border-color: #ced4da;
    background-color: #e9ecef;
}
.disabled .custom-checkbox input:checked ~ .checkmark, .disabled .custom-radio input:checked ~ .radiomark {
    border-color: #34495E;
    background-color: #34495E;
}
.custom-checkbox:hover input ~ .checkmark, .custom-radio:hover input ~ .radiomark {
    background-color: #e9ecef;
  }
.custom-checkbox input:checked ~ .checkmark, .custom-radio input:checked ~ .radiomark {
    border-color: #1eb4b9;
    background-color: #1eb4b9;
}
.custom-checkbox .checkmark:after, .custom-radio .radiomark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-checkbox input:checked ~ .checkmark:after, .custom-radio input:checked ~ .radiomark:after {
    display: block;
}
.custom-checkbox .checkmark:after {
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 5px;
    margin-top: 1px;
}
.custom-radio .radiomark:after {
    margin-top: 6px;
    margin-left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

.toast {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    border-left: 5px solid gray;
    background-color: rgba(255,255,255,.95);
}

.toast.success {
    border-left-color: #1EB4B9;
}
.toast.info {
    border-left-color: #0DB2E3;
}
.toast.warning {
    border-left-color: #FF7141;
}
.toast.error {
    border-left-color: #D81F27;
}

#staff-table .sortable-table-header .suffix {
    font-weight: bold;
    color: #34495E;
    font-size: 1rem;
}

#staff-table th.username {
    width: 30%;
}

#staff-table th.lastShift {
    width: 20%;
}

#staff-table th.dose {
    width: 20%;
}

#staff-table th.alerts {
    width: 20%;
    text-align: center;
}
#staff-table td.alerts {
    text-align: center;
}

.ongoing-shift-icon {
    color: #1EB4B9;
}

/* #staff-table .staff-item td a été remplacé par .data-table tbody tr td pour uniformiser les tableaux */


.alert-badge {
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 0.5rem 2rem;
    line-height: 1rem;
}

.alert-badge {
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 0.5rem 2rem;
    line-height: 1rem;
}

.status-alert.normal{
    color: #1eb4b9;
}

.status-alert.inactif{
    color: #747776;
}

.status-alert.warn{
    color: #FE5400;
    font-weight: bold;
}

.status-alert.danger{
    color: #D81F27;
    font-weight: bold;
}

.alert-badge.warn {
    background-color: #FE5400;
}
.alert-badge.danger {
    background-color: #D81F27;
}

#staff-top-section, #staff-top-section-settings,
#personal-top-section-settings {
    display: flex;
    margin-bottom: 2rem;
    justify-content: space-between;
    align-items: center;
}

#operational-dosimetry-board {
    padding: 1.5rem 3rem;
}

#operational-dosimetry-board.container {
    background-color: transparent;
}

.user-table-row {
    min-height: 30px;
}

#loading-overlay {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    height: 100vh;
    width: 100%;
    top:0;
    left: 0;
}

#loading-overlay #loading-icon {
    display: none;
}


#container-personal-settings{
    background-color: #FAFAFA;
}

#shared-account-help-container {
    overflow: hidden;
    height: 0px;
    padding-top: 6px;
    transition: height 0.25s ease-in-out;
}

.hideBeforeMail {
    display: none !important;
}

.button-form-delete,
.button-form-delete:disabled{
    padding: 5px 20px;
    border-radius: 4px;
    margin-right: 1rem;
}

.button-form-delete{
    border: 1px dashed #dc3545;
    color: #dc3545;
    background-color: transparent;
}

.button-form-delete:disabled{
    border: 1px dashed #dc354648;
    color: #dc354648;
    background-color: transparent;
}




.btn-style,
.btn-style:disabled{
    padding: 5px 20px;
    border-radius: 4px;
    border: 0px solid transparent;
    border: 0px;
    color: white;
}
.btn-style,
.btn-style{
    background-color: #13B7BB;
    
}

.btn-style:disabled,
.btn-style:disabled{
    background-color: #13b8bb3d;
}

a.btn-style:hover {
    color: white;
}


#link-ajouter-travailleur, #link-ajouter-travailleur-responsive{
    padding: 5px 20px;
    background-color: #13B7BB;
    color: white;
    border-radius: 4px;
    border: 0px;
}

.add-group-section {
    width: 100%;
    padding: 16px 32px;
    border-radius: 10px;
    border: 2px dotted #13B7BB;
    position: relative;
    color: #34495E;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.add-group-section .title {
    flex-grow: 1;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 1.5rem;
}


#ajouter-groupe{
    width: 100%;
    padding: 1rem 2rem;
    border-radius: 10px;
    border: 2px dotted #13B7BB;
    position: relative;
    color: #34495E;
}

#ajouter-groupe h1 {
    margin-bottom: 0;
}

.accordion .input-new-group-name {
    width: 180px;
}

#ajouter-groupe h1 span{
    position: absolute;
    right: 2rem;
    font-size: 3rem;
    height: 100%;
    top: 0px;
    vertical-align: baseline;
    color: #13B7BB;
    vertical-align: text-bottom;
}

#seuils{
    border-right: 1px solid rgba(0, 0, 0, .05);
}


/* ! Editable sensor name */

.groups-table-edit-name-parent {
    display: flex;
    align-items: center;
}

.groups-table-edit-name-parent .ellipsis-sensor-name {
    flex: 1;   
}

.groups-table-edit-name-button{
    color: #13B7BB;
    white-space: nowrap;
    margin-left: 10px;
    margin-right: 10px;
}


/* ! Sensor name component */
.ellipsis-sensor-name { 
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-sensor-name > span{
    white-space: nowrap;
    outline: none;
}


/* ? accordion with info */
.accordion-title{
    color: #34495E;
}

.icon-modify{
    color: #13B7BB;
}

.icon-cancel{
    padding: 3px;
    background-color: #D81F27;
    border-radius: 4px;
    color: white;
}

.btn-confirm, .btn-confirm:active, .btn-confirm:focus{
    background-color: transparent;
    border: transparent;
    outline: none;
}

.icon-confirm{
    padding: 3px;
    background-color: #13B7BB;
    border-radius: 4px;
    color: white;
}

.icon-bin{
    color: #707070;
}

.btn-bin, .btn-bin:active, .btn-bin:focus{
    background-color: transparent;
    border: transparent;
    outline:none;
}

#ajouter-groupe{
    cursor: pointer;
}

/* Hide arrows in input number - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide arrows in input number - Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

textarea {
    padding: 0.3rem 0.5rem 0 0.5rem;
    border-radius: 5px;
    min-height: 2.4rem;
}


/*! board style */
.firstRow{
    margin-bottom: 20px;
}

.titles h1{
    color: rgb(190, 190, 190);
}

.titles h1.current{
    color: #34495E;
}

.smallLabel{
    padding: 0px 10px;
}

/*! Interventions */
#personal-dosimetry .card, #personal-dosimetry .board-card-content{
    height: 100%;
}

.vsb-main .title {
    font-size: 1rem;
    margin-left: 0.8rem;
    padding-bottom: 0.5rem;
    background-color: transparent;
    color: rgb(51, 51, 51);
}

.multi .active{
    color: #34495E !important;
}

.vsb-main .caret{
    box-sizing: border-box;
    height: 0.8rem;
    width: 0.8rem;
    border-style: solid;
    border-color: #80807e;
    border-width: 0px 1px 1px 0px;
    transform: rotate(45deg);
    transition: border-width 150ms ease-in-out;
    margin-right: 0.8rem;
}

#bandeau .display{
    display: flex;
    align-items: center;
    background-color: rgba(115, 119, 119, 0.6);  
    padding: 0.30rem;
    justify-content: space-between;
}


#bandeau {
    font-size: 0.9rem;
}

#bandeau .vsb-main {
    width: 16rem;
}

.vsb-main{
    width: 100%;
}

.vsb-menu{
    width: 100%;
}


.vsb-main .customButton{
    border-radius: 0.5rem;
    background-color: rgba(255,255,255,0.7)!important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px;
    padding-top: 0.5rem;
}


.vsb-menu ul li {
    color: rgb(51, 51, 51);
}

.vsb-menu ul li[data-value].active::after{
    border-bottom: 3px solid   white;
    border-right: 3px solid   white;
    margin-top: 5px;
}

.vsb-menu ul li[data-value]:not(.grouped-option)::before, .vsb-menu ul li[data-value].active::before{
    font-size: 1rem;
    padding: 6px;
    margin-top: 5px;
    margin-left: -28px;
    margin-right: 0px;
    margin-top: 5px;
}
.vsb-menu :not(.multi) li[data-value].active::before {
    content: none;
}
.vsb-menu :not(.multi) li[data-value].active {
    font-weight: bold;
}

.vsb-menu .multi li[data-value].active::before{
    background-color: #13B7BB;
    color : #13B7BB;
}

.vsb-menu .multi li[data-value].active::after {
    margin-left: -24px;
    margin-top: 5px;
    height: 11px;
}

.vsb-menu ul li[data-value]{
    font-size: 1rem;
    padding-left: 2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.vsb-menu :not(.multi) li[data-value] {
    padding-left: 0.4rem;;
}
.vsb-js-search-zone input {
    height: 21px !important;
}


#load #loading-icon {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.display .displayTitle{
    padding-left: 1rem;
}

.display .zoomTitle{
    padding-right: 1rem;
}

.switch-option {
    border-radius: 0.25rem;
    border: 1px solid #ddd;
    padding: .6rem 1rem;
    margin-bottom: 0;
}
.switch-option.small-height {
    padding: .2rem 1rem;
}
.switch-option:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.switch-option:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.switch-option:not(.active):not(.disabled) {
    cursor: pointer;
}
.switch-option.active {
    background-color: #1EB4B9;
    color: #fff;
    border-color: #1EB4B9;
}
.switch-option.active.disabled {
    background-color: #545b62;
    border-color: #545b62;
}
.switch-option input[type="radio"] {
    display: none;
}

#staff-top-section-settings .grid-switch-responsive {
    display: none;
}



.accordion-header .quick-update-section {
    margin-left: 1rem;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.view.paramGroup td.level-1-thresholds:before {
    color: #FE5400;
}

.view.paramGroup td.level-2-thresholds:before {
    color: #D81F27;
}

#alerts-top-section{
    margin-bottom: 1rem;
}

#alerts-top-section .filter-container {
   display: flex;
   flex-direction: row;
   align-items: center; 
}

#alerts-top-section .filter-container {
    margin-bottom: 0.60rem ;
}

#alerts-top-section #filter-input{
    width: 19rem;
}

#alerts-top-section .filter-name{
    width: 8rem;
}

#alerts-top-section .filter-section{
    padding: 0.60rem;
    background-color: #F5F5F5;
    border-radius: 10px;
    margin-top: 1rem;
}

#alerts-top-section .filter-title h4{
    color: #34495e;
    font-size: 1.5rem;
    font-weight: 501;
}

#alerts-top-section .custom-checkbox{
    margin-left: 2rem;
}

#shift-details .chart-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#shift-details .chart-controls > .input-group {
    width: 10rem;
}

#shift-details #min-input-group {
    justify-content: right;
}

#shift-details #max-input-group {
    justify-content: center;
    margin-right: 1rem;
    margin-left: 1rem;
}

#shift-details .closeChartBtn {
    margin-top: 2rem;
}

#shift-details .chart-controls {
    margin-top: 3rem;
}

.form-errors {
    color: #D81F27;
    margin-top: 0.5rem;
}

/* Preloader font graph chartjs */
#preLoader-font-chartjs{
    position: fixed;
    font-family: "Titillium Web";
    top: -9999px;
    left: -9999px;
}

/* Explication navigation graphs mensuel */
@keyframes swipeAnimation {
    0% {
       transform: translateX(0); 
       opacity: 0%;
    }

    20% {
        transform: translateX(50px);
        opacity: 50%;
    }

    40% {
        transform: translateX(-50px);
        opacity: 50%;
    }

    60% {
        transform: translateX(0);
        opacity: 0%;
    }

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

.background-image-graph-swipe {
    position: absolute;
    width: 100%;
    height: 400px;
    top: 150px;
    left: 0;
    pointer-events:none;
}

#image-swipe {
    animation: 4s ease-in-out infinite swipeAnimation;
    width: 150px;
    height: 150px; 
}
#title-dose-mensuelle {
    color: #34495E; 
    font-size: 22px; 
    padding: 30px;
    font-weight:600;
    text-align: center;
    display: block;
}

#close-popover {
    cursor: pointer
}

#reset-animation {
    cursor: pointer;
    color: #00B3B9;
}
#reset-animation:hover {
    cursor: pointer;
    color: #006669;
}

.user-roles {
    margin-bottom: 0;
}


/* Sensor creation / modification */
.serialNumberInput {
    padding-right: 50px;
}

#resetButton {
    outline: none;
    position: absolute;
    top: 50%;
    right: 32px;
    z-index: 5;
    transform: translateY(-50%);
}

#invalid-time-range-message, .invalid-error {
    color: #D81F27;
}

#map-container .measurementPopupRaw {
    margin: 0.5rem;
}

#map-container .measurementPopupRaw .header {
    font-size: 1rem;
    font-weight: bold;
}

#map-container .measurementPopupRaw .data {
    display: flex;
    justify-content: space-between;
}

#map-container .measurementPopupRaw a{
    cursor: pointer;
    color: white ;
}

#map-container .measurementPopupRaw a:hover, #map-container .leaflet-container a.leaflet-popup-close-button:hover{
    color: #00B3B9;
}



#map-container .leaflet-popup-content{
    margin: 0;
    max-height: 9.5rem;
    width: 8rem;
    overflow: auto;
    scrollbar-width: thin;
}
#map-container #measurements {
    cursor: pointer;
}

#map-container .leaflet-popup-content::-webkit-scrollbar {
    width: 5px;
 }

 #map-container .leaflet-popup-content::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 4px;
 }

#map-container .leaflet-popup-content-wrapper{
    background: #34495e;
    color: white;
}

#map-container .popup-header{
    font-size: 1rem;
    font-weight: bold;
    background: #20303f;
    text-align: left;
    padding: 0.5rem 0rem 0.5rem 0.5rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#map-container .popup-body{
    margin: 0.5rem;
    font-size: 1rem;
}

#map-container .measurementMarker path {
 fill: #AAC5D6;
}

#map-container .leaflet-popup-content {
    width: 11rem !important;
}
.leaflet-container {
    font-family: "Titillium Web" !important;
}

#map-container .leaflet-container a.leaflet-popup-close-button {
    color: white;
    padding-right: 1.5rem;
}

#map-container .leaflet-popup-tip {
    background:#34495e;;
}

#map-container .popup-details{
    background: white;
    text-align: center;
    border-radius: 25px;
    margin-top: 0.5rem;
}

#map-container .popup-details a{
    color:#34495e; 
}

/* PEA feature */
#personal-exposure-analysis #fileName {
    margin-left: 1rem;
}
#personal-exposure-analysis #droparea {
    border: 1px dashed #334C65;
}
#personal-exposure-analysis .fileInvalid #droparea {
    background-color: #f8d7da;
    color: #D81F27;
}
#personal-exposure-analysis .fileInvalid .section-number {
    background-color: #D81F27;
}
#personal-exposure-analysis .fileValid .section-number {
    background-color: #1eb4b9;
}
#personal-exposure-analysis .fileValid #droparea {
    background-color: #b2e8e9;
}
#personal-exposure-analysis .drop-effect {
    background: repeating-linear-gradient(
            45deg,
            white,
            white 5%,
            #b2e8e9 5%,
            #b2e8e9 10%
    );
}
#personal-exposure-analysis .btn-info {
    background-color:  #334C65;
    border-color:  #334C65;
}
#personal-exposure-analysis .definition, #personal-exposure-analysis-settings .definition {
    color:  #334C65;
}
#personal-exposure-analysis .section-number {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 5px;
    background-color: #334C65;
    color: white;
}

#secondStep {
    display: none;
    padding-bottom: 50px;
}

#warning-summary {
    max-height: 50px;
    overflow-y: hidden;
    padding: 0;
    animation: max-height 0.2s ease-in-out;
    background-color: rgb(246, 235, 204);
    color: #856404;
    border-left: 5px solid rgb(240, 194, 71);
}

#warning-title {
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    margin: 12px 18px;
    cursor: pointer;
    user-select: none;
}

#warning-info {
    padding: 0 18px;
}

#title-icon-expand {
    transform: translateY(4px);
}

#warning-separator {
    margin-bottom: 0px;
}

#warning-list {
    padding: 12px 18px 12px 16px;
    max-height: 205px;
    overflow-y: auto;
}

#warning-list li {
    list-style-type: disc;
    margin-left: 20px;
}

#pea-generate-nodata {
    width: 100%;
    text-align: center;
}

#pea-table-content input {
     font-size: 12px;
}

#pea-table-content .row-attenuation input:nth-child(2n) {
     margin: 8px 0;
}

#pea-table-content .row-equipement {
    padding-left: 20px;
}

#pea-table-content .row-equipement .custom-checkbox:nth-child(2n) {
     margin: 15px 0;
}

#pea-table-content .row-equipement .custom-checkbox span {
     margin-right: 8px;
}

#pea-table-head thead {
    position: sticky;
    top: -48px;
    z-index: 4;
    box-shadow: 0 1px #34495E;
}

.row-distance {
    padding-right: 12px !important;
}

#generate-file .accordion-title > div {
    align-items: center;
    width: 100%;
}

#generate-file .accordion-title {
    display: block;
    width: 100%;
}

#generate-file .accordion-header > h1 {
    width: 100%;
}

#button-generate {
    margin-left: auto;
}

#personal-exposure-analysis #loading-overlay {
    width: 100%;
    height:  100%;
    position: fixed;
    top: 0;
}

#personal-exposure-analysis #loading-icon {
    position: fixed;
    display: block !important;
    top: 50%;
    left: 50%;
    transform-origin: center;
}

body[loading] .view-content {
    height: 100%;
    overflow-y: hidden;
}