@media (min-width: 0px) and (max-width: 199px) {
    html {
        font-size : 11px
    }
}

@media (min-width: 200px) and (max-width: 399px){
    html {
        font-size : 12px
    }
}

@media (min-width: 400px) and (max-width: 599px){
    html {
        font-size : 13px
    }
}

@media (min-width: 600px) and (max-width: 799px){
    html {
        font-size : 14px
    }
}

@media (min-width: 800px) and (max-width: 999px){
    html {
        font-size : 15px
    }
}

@media (min-width: 1230px) {
    .connex
    {
        height: calc(100% - 100px); 
        background-image: url('../images/log-background-lg.png');
        background-size: cover;
        background-position: left bottom;
    }
    
    #mapdiv
    {
        height: 100%;
    }
    
    #MapSensor
    {
        height: 185px;
    }
    
    .sm-text-center
    {
        text-align: left;
    }
    
    .sm-text-center-right{
        text-align: right;
    }
    
    .sm-text-right-left
    {
        text-align:left;
    }
    
    .sm-text-center-left
    {
        text-align: left;
    }
    
    .sm-mt-20
    {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .sm-mt-10
    {
        margin-top: 5px;
    }
    
    .sm-mt-20px
    {
        margin-top: 15px;
    }
    
    .font-40
    {
        font-size: 40px;
    }
    
    .font-30
    {
        font-size: 28px;
    }
    
    .font-15
    {
        font-size : 15px;
    }
    
    .font-13
    {
        font-size : 13px;
    }
    
    .font-10
    {
        font-size : 10px;
    }
    
    .font-20
    {
        font-size : 20px;
    }

    .font-32
    {
        font-size: 32px;
    }
    
    .font-23
    {
        font-size: 23px;
    }

    .p-101
    {
        padding: 0px !important;
    }
    
    .height-105px
    {
        height: 105px;
    }
    
    .font-30-btn
    {
        font-size: 30px !important;
    }
    
    #ajoutCapteur
    {
        background-color: white;
        position: relative;
        margin-top: 10%;
        width: 30%;
        margin-left: 35%;
        text-align: center;
        padding: 50px;
        box-shadow: rgba(0,0,0,0.8);
    }
    
    .lg-pr-0
    {
        padding-right: 15px !important;
    }
    
}

@media (min-width: 921px) and (max-width: 1230px) {
    
    .connex
    {
        height: calc(100% - 100px); 
        background-image: url('../images/log-background-lg.png');
        background-size: cover;
        background-position: left bottom;
    }

    
    #mapdiv
    {
        height: 100%;
    }
    
    #MapSensor
    {
        height: 188px;
    }
    
    #ajoutCapteur
    {
        background-color: white;
        position: relative;
        margin-top: 10%;
        width: 50%;
        margin-left: 25%;
        text-align: center;
        padding: 50px;
        box-shadow: rgba(0,0,0,0.8);
    }
    
    .sm-text-center
    {
        text-align: left !important;
    }
    
    .sm-text-center-right{
        text-align: right !important;
    }
    
    .sm-text-right-left
    {
        text-align:left !important;
    }
    
    .sm-text-center-left
    {
        text-align: left !important;
    }
    
    .sm-mt-20
    {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .sm-mt-10
    {
        margin-top: 8px !important;
    }
    
    .sm-mt-20px
    {
        margin-top: 10px !important;
    }
    
    .font-40
    {
        font-size: 40px !important;
    }
    
    .font-30
    {
        font-size: 20px !important;
    }
    
    .font-15
    {
        font-size : 11px !important;
    }
    
    .font-10
    {
        font-size : 8px !important;
    }
    
    .font-20
    {
        font-size : 13px !important;
    }

    .font-32
    {
        font-size: 32px !important;
    }
    
    .font-13
    {
        font-size : 13px !important;
    }
    
    .font-23
    {
        font-size: 18px !important;
    }
    
    .height-105px
    {
        height: 70px !important;
    }
    
    .height-210px
    {
        height: 132px !important;
    }
    
    .font-30-btn
    {
        font-size: 11px !important;
    }

    .p-101
    {
        padding: 0px !important;
    }
    
    .lg-pr-0
    {
        padding-right: 15px !important;
    }
}



@media (min-width: 640px) and (max-width: 920px) {
    #content-wrap {
        padding: 0px 30px 70px 30px;
    }
    
    .view.sensors #content-wrap, .alerts24 #content-wrap {
        padding: 0;
    }

    .p-101
    {
        padding: 0px !important;
    }
    
    #mapdiv
    {
        height: 100%;
    }
    
    #MapSensor
    {
        height: 188px;
    }
    
    .height-210px
    {
        height: 130px !important;
    }
    
    #ajoutCapteur
    {
        background-color: white;
        position: relative;
        margin-top: 10%;
        width: 70%;
        margin-left: 15%;
        text-align: center;
        padding: 50px;
        box-shadow: rgba(0,0,0,0.8);
    }
    
    .sm-text-center-right
    {
        text-align: center;
    }

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

    .sm-text-center-s-left
    {
        text-align: left;
    }
    
    .sm-text-right-left
    {
        text-align:right;
    }
    
    .sm-mt-20
    {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .sm-mt-10
    {
        margin-top: 10px;
    }
    
    .sm-mt-20px
    {
        margin-top: 5px;
    }
    
    
    .font-40
    {
        font-size: 30px;
    }
    
    .font-30
    {
        font-size: 20px;
    }
    
    .font-30-btn
    {
        font-size: 15px;
    }
    
    .lg-pr-0
    {
        padding-right: 15px !important;
    }
}

@media screen and (max-width: 768px){
    .connex
    {
        height: calc(100% - 50px); 
        background-image: url('../images/log-background-sm.png');
        background-size: cover;
        background-position: left bottom;
    }
}

@media (max-width: 599px) {
    
    header .header-content-medium {
        display: none;
    }
    header .header-content-small {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    header #logoRium {
        margin: 0;
    }
    .board-card.normal, .board-card.warn{
        box-shadow: 1px 2px 15px #0000001A;
        border: 1px #EBEBEB;
        background-color: white;
        border-radius: .25rem;
    }
    body:not(.user-info-collapsed) header {
        position: fixed;
    }
    body:not(.user-info-collapsed) #user-info {
        display: flex;
        position: fixed;
        top: 70px;
        padding-bottom: 5rem;
    }
    body:not(.user-info-collapsed) .view-content {
        position: fixed;
        top: 70px;
    }
}

@media (max-width: 991px) {
    .view {
        display: initial;
    }
    .view-content {
        padding: 1rem 0;
        width: 100%;
    }

    #sidebar {
        flex: none;
        position: absolute;
        width: 100%;
        height: calc(100vh - 60px);
        opacity: 0.95;
        z-index: 2;
    }

    body.menu-collapsed #sidebar {
        display: none;
    }
    body:not(.menu-collapsed) header {
        position: fixed;
    }
    body:not(.menu-collapsed) #sidebar {
        position: fixed;
        top: 70px;
        padding-bottom: 5rem;
    }
    body:not(.menu-collapsed) .view-content {
        position: fixed;
        top: 70px;
    }

    #content-wrap {
        padding: 10px 15px 70px 15px;
    }
    
    .view.sensors #content-wrap, .alerts24 #content-wrap {
        padding: 0;
    }
}

@media screen 
and (max-width: 768px) {
    .personal-dosimetry .board-cards{
        padding: 10px 55px 0px 55px;
    }
    
    .personal-dosimetry .username{
        padding-bottom: 8px;
        font-size: 20px;
    }

    .board-dosimetry .board-cards{
        padding: 15px 55px 0px 55px;
    }
}


@media screen and (min-width: 1200px){
    #left-section.border-section{
        border-right: 1.5px solid #ebebeb;
    }
}

@media screen and (max-width: 1199px){
    #left-section.border-section{
        border-bottom: 1.5px solid #ebebeb;
    }
}

@media screen and (max-width: 392px){
    #buttons{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 575.98px){ 
    #alerts-top-section #filter-input{
        width: 100%;
    }
}

@media screen and (max-width: 860px){ 

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

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

    #alerts-top-section .filter-name{
        margin-bottom: 0.8rem;
    }

    #staff-top-section-settings {
        display: flex;
        flex-direction: column;
        align-items: initial;
    }
    #staff-top-section-settings .page-title {
        order: 1;
        margin-bottom: 1rem;
    } 

    #staff-top-section-settings .grid-switch, #staff-top-section-settings .list-grid-switch {
        order: 2;
        margin-bottom: 1rem;
    } 

    #staff-top-section-settings .search-container {
        order: 3;
        margin-bottom: 1rem;
    } 
 
    #staff-top-section-settings .personalAdd {
        order: 4;   
    }

    #group-thresholds-form .dose-thresholds.group-thresholds-form-item:first-child {
        padding-left: 1.9rem;
    }

    #group-thresholds-form .with-apply-button.group-thresholds-form-item:last-child {
        padding-right: 1.9rem;
    }

    #group-thresholds-form .dose-thresholds.group-thresholds-form-item{
        padding-top: 0.5rem ;
        padding-bottom: 0.5rem ;
    }

    #link-ajouter-travailleur{
        text-align: center;
    }

    #group-thresholds-form .group-thresholds-form-item{
        width: 100% !important; /* l'élément !important est mis car pas de selecteur plus précis */
    }
    
    #group-thresholds-form{
        display: flex;
        flex-direction: column;
    }

    #group-thresholds-form .group-thresholds-form-item.with-apply-button {
        border-left-style : none !important;
    }
    .accordion-content .data-table tbody tr td:last-child.actions{
        text-align: left;
    }
    .accordion-content .data-table tbody tr td:last-child.actions .btn{
        width: 100%;
        margin-bottom: 0.5rem;
    }

} 

/* paramétrage captures */
@media screen and (max-width: 767px){
    #seuils{
        border: 0px solid transparent;
        padding: 0 15px !important;
    }

    #options{
        padding: 0 0 !important;
        padding-bottom: 15px;
    }
}



/*! Board responsive */

@media screen and (max-width: 767px){
    .cardData{
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 991px){
    #ambient-dosimetry-board{
        background-color: white;
        padding: 0;
    }

    #operational-dosimetry-board{
        padding: 0;
    }

    #full-dosimetry-board .titles,
    #full-dosimetry-board-responsive .titles{
        margin-top: 15px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1530px){
    #full-dosimetry-board .card .label,
    #full-dosimetry-board-responsive .card .labe{
        font-size: 15px;
    }
}


@media screen and (min-width: 992px) and (max-width: 1170px){
    #full-dosimetry-board .card[empty="true"] .board-card-content .data span, 
    #full-dosimetry-board-responsive .card[empty="true"] .board-card-content .data span{
        font-size: 1.8rem;
    }
}


/* Ces deux contraintes sont ici pour être associées à ce board (full) */
@media screen and (max-width: 800px){
    #full-dosimetry-board .title-text,
    #full-dosimetry-board-responsive .title-text, #txtListe, #txtAlerte{
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 666px){
    #full-dosimetry-board .title-text,
    #full-dosimetry-board-responsive .title-text{
        font-size: 1rem;
        display: block;
        line-height: 20px;
    }

    #txtListe, #txtAlerte{
        font-size: 1rem;
    }

    #full-dosimetry-board .title i,
    #full-dosimetry-board-responsive .title i{
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 450px) {
    .accordion .input-new-group-name {
        width: 120px;
    }

    #live-data-label {
        text-align: right;
    }
}

@media screen and (max-width: 550px) {
    #personal-top-section-settings {
        flex-direction: column;
        margin-bottom: 0.5rem;
        align-items: flex-start;
    }

    #personal-top-section-settings .form-group {
        margin-top: 1rem;
        width: 100%;
    }
}



/*! Responsive table */
@media screen and (max-width: 860px){
    /*! Start responsive table */
    .data-table thead{
        display: none !important;
    }
    .data-table thead{
        display: none !important;
    }
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table th,
    .data-table td,
    .data-table tr {
        display: block;
    }
    .data-table td {
        border: none;
        position: relative;
        padding-left: 55% !important;
        background-color: #FDFDFD;
        border-left: 3px solid initial;
    }

    .data-table tbody tr td.td-text-center {
        text-align: left;
    }
    .data-table td:before {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        padding-left: 10px;
        width: 50%;
        content: attr(data-row-name);
        background-color: #F9F9F9;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .data-table tr.odd td:before {
        background-color: #F5F5F5;
    }
    .data-table td.highlight-cell {
        display: none;
    }
    .data-table tr.alert-level-2 td.alert-label {
        border-left-color: #D81F27;
    }
    .data-table tr.alert-level-1 td.alert-label {
        border-left-color: #FE5400;
    }
    .data-table tbody tr.tr-open {
        border-bottom-style: solid;
    }
    /*! End responsive table*/

    #personal-dosimetry #shifts-list,
    #personal-dosimetry #alerts-list{
        padding: 1.5rem 0rem;
    }

    #personal-dosimetry .highlight-cell{
        display: none;
    }

    .data-table td div.d-flex.justify-content-center {
        justify-content: flex-start !important;
    }
    .data-table td div.d-flex.justify-content-center.flex-column .align-self-center {
        align-self: flex-start !important;
    }
    #sensors-table td:not(.first-data-cell), #alerts-table:not(.data-table) td{
        text-align: left;
    }
    #shifts-alerts-table td.considered, #shifts-alerts-table td.alerts {
        width: auto;
        text-align: left;
    }
    #shifts-alerts-table tr.shift-alerts-details > td {
        padding-left: 0 !important;
    }
    #shifts-alerts-list td.first-data-cell .fas {
        display: none;
    }
    #shifts-alerts-list tr.tr-open {
        border-left: 1px dashed #34495E;
        border-bottom: 1px solid #E7E8EB;
    }
    #shifts-alerts-list tr.shift-alerts-details{
        border-radius: 3px;
        box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
        border-left: 1px dashed #34495E;
        margin-bottom: 1rem;
    }
}

/*! graph intervention responsive */
@media screen and (max-width: 768px){
    .board-dosimetry .chart, #personal-dosimetry .chart{
        padding: 0;
        height: 100% !important;
    }
}

@media (max-width: 1200px) {
    #dataMap #map-container, #dataMap #liste {
        width: 100%;
    }

    #imgMap img {
        display: block;
        max-width: 100%;
        max-height: calc(100vh - 150px);
        height: auto;
        width: auto;
        margin: 0 auto;
    }
}
@media (max-width: 992px) {
    #imgMap img {
        max-height: calc(100vh - 70px);
    }
    #map {
        height: calc(100vh - 47.6px);
    }
}
@media (min-width: 0px) and (max-width: 920px) { 
    #operational-dosimetry-board .row {
        margin-left: 0;
        margin-right: 0;
    }
 }
 @media (min-width: 0px) and (max-width: 991px) { 
    #staff-top-section {
        display: flex;
        flex-direction: column;
        align-items: initial;
    }
    
    #staff-top-section .search-container {
        width: 50%;
    }

    #staff-table td.alerts{
        text-align: left;
    }
 }

 
 @media (max-width: 1400px){
    #shift-details #spectrum-chart-container {
        height: 400px;
    }
 }


/* Boutons d'export détails d'un capteurs */
@media screen and (min-width: 992px) {
    .export-button-sensors{
        width: 100%;
        min-width: 135px;
        max-width: 250px;
        font-size: 12px;
    }
}
@media screen and (min-width: 1200px) {
    .export-button-sensors{
        width: 100%;
        min-width: 150px;
        max-width: 250px;
        font-size: 16px;
    }
}
@media screen and (max-width: 992px) {
    .export-button-sensors:first-child{
        margin-right: 20px;
    }
    #buttonCreateMeasurement {
        margin-left: 20px;
    }
}
@media screen and (max-width: 336px) {
    
    .export-button-sensors:first-child{
        margin-bottom: 15px;
    }

    .export-button-sensors {
        display: block !important;
        width: 100%;
        padding: 5px;
    }

    .graphic-data-buttons button{
        width: 100%;
    }

    #buttonCreateMeasurement {
        margin-left: unset;
        margin-top: 10px;
    }
}


/* Explication navigation graph mensuel */
@media screen and (max-width: 680px) {
    #image-swipe {
        width: 110px;
        height: 110spx;
    }
}