html,body { height: 100%; width: 100%; margin: 0px; padding: 0px;  }
.full { background-color: #ffffff; height: 100% }
.admin .main-content { min-height: calc(100% - 160px) }
.main-content {min-height: calc(100% - 80px) }

body { background-color: #ffffff; color:#030F40; font-family: "Arial" }
.top-bar { height: 80px; line-height: 80px; }
.top-bar-section { height: 80px; line-height: 80px; }
.top-bar-section .right { height: 80px !important; line-height: 80px; }
.top-bar-section li,
.top-bar-section li.divider { height: 80px; line-height: 80px; }
.top-bar-section li a { height: 80px; line-height: 80px !important; padding: 0 30px !important; }
.top-bar-section li:not(.has-form) a:not(.button) {  }
.title-area, .title-area .name, .title-area .name h1, .title-area .name h1 a, .title-area .subname { height: 80px; line-height: 80px; float: left }
.title-area .name h1 a { width: 100% }
.title-area .subname { margin-left: 20px; color: #FFF; }
.title-area .subname a { color: #FFF; }
.title-area .subname a:hover { text-decoration: underline; }
.title-area { margin-right: 40px !important; }

.real-time-top-bar.top-bar { background-color: #030F40; z-index: 101; }
.real-time-top-bar.top-bar .title-area { background-color: #030F40; }
.cms-top-bar.top-bar .title-area { background-color: #a1c617; }
.real-time-top-bar .top-bar-section li:not(.has-form) a:not(.button) { background-color: #030F40; }
.real-time-top-bar .top-bar-section li:not(.has-form) a:hover{ background-color: #03155b; }
.real-time-top-bar .top-bar-section li.active:not(.has-form) a:not(.button) { background-color: #a1c617; }
.cms-top-bar .top-bar-section li a:hover { background-color: #1a1d56 !important; }
.cms-top-bar .top-bar-section li.public-access a:hover { background-color: #a2c617 !important; }
.real-time-top-bar .top-bar-section li a { color: white; }
.real-time-top-bar .top-bar-section li a:hover { text-decoration: underline; }
.real-time-top-bar .top-bar-section li a.logo-seatown:hover { background-color: #030F40 !important; }
.real-time-top-bar .top-bar-section li.public-access a:hover { background-color: #1a1d56 !important; }

.cms-top-bar.top-bar { background-color: #a1c617; }
.cms-top-bar .top-bar-section li:not(.has-form) a:not(.button) { background-color: #a1c617; }
.cms-top-bar .top-bar-section li.active:not(.has-form) a:not(.button) { background-color: #030F40; }

.row-full-width { max-width: 100%; background-color: #FFF; }
.charts { margin-top: 20px; background-color: #f1f1f1 }
.realTime h1 { font-size: 1.25rem; line-height: 1; }
.realTime h2 { font-size: 1.25rem; line-height: 1; }
.map-view, .station-description, .cms-large-image { padding: 0; margin: 0; }
.cms-large-image img { width: 100%; height: 300px }
.main-map { width: 100%; }

.export-bloc { margin-top:20px; background-color: darkgray; }

.station-description { display: none; }
.station-description .all-data a.button { background-color: #a1c617; margin-bottom: 0px; }
.station-description .all-data { text-align: center; margin-top: 60px; }
.station-description ul { margin: 10px 0;}

.station-description h1,
.station-description h2,
.station-description li { color: #030F40; }
.station-description h1 { font-weight: bold; }

.station-description li { list-style-type: none; }

.station-description-header,
.station-description-content { padding: 0 40px; }

.station-description-header { padding-top: 20px; padding-bottom: 10px; background-color: #f1f1f1;}

.station-description-content { padding-top: 10px; background-color: #ffffff; }
.station-description-content a { text-transform: uppercase; }

.summary { text-align: center; padding: 10px 0; background-color: #030F40; color: #FFF;
    border:1px solid #b0a5c2; border-left: none; border-right: none; }

.charts table thead tr th { padding: 0.5rem 0.5rem 0.5rem; font-size: 0.8rem; line-height: 2.5rem}
.charts table thead tr td,
.charts table tbody tr td { padding: 0.1rem 0.5rem 0.1rem; font-size: 0.8rem; line-height: 1.5rem; }
.level { border:none; border-spacing: 0; width: 100% }
.level th, .level td { font-weight:normal; color: #030F40; }
.level input { display: inline-block; margin: 0 10px 0 0; }
.level table label { font-weight: normal }
.level .logo-type { width: 20%; }
.level .indicator-name { width: 42%; }
.level .indicator-name label { padding-left: 0; margin-left: 0; }
.level .indicator-progress { width: 20%; }
.level .indicator-value, .level .indicator-percent { width: 18%; text-align: left; }
.level .type { background-repeat:no-repeat; background-position: center center; vertical-align: middle;
    text-align: center; }
.progress.progress-bioclics .meter,
.type-bioclics,
.type-mobile-bioclics { color: #FFF; background-color: #b1c17b; }
.type-bioclics { background-image: url('/images/real-time/type/icone-bioclics-txt.png'); }
.progress.progress-anthropophonie .meter,
.type-anthropophonie,
.type-mobile-anthropophonie { background-color: #c5734f; }
.type-anthropophonie { background-image: url('/images/real-time/type/icone-anthropophonie-txt.png'); }
.progress.progress-geophonie .meter,
.type-geophonie,
.type-mobile-geophonie { background-color: #7b98c1; }
.type-geophonie { background-image: url('/images/real-time/type/icone-geophonie-txt.png'); }
.progress.progress-vocalise .meter,
.type-vocalise,
.type-mobile-vocalise { background-color: #7bc0c1; }
.type-vocalise { background-image: url('/images/real-time/type/icone-vocalise-txt.png'); }
.progress.progress .meter { background-color: #a1c617; }
.progress.progress-alert .meter { background-color: #DA1212; }
.charts .button { background-color: #a1c617; text-transform: uppercase; }
.map-legend img { margin: 0 20px; }
.map-legend { line-height: 45px; }
.map-legend .probe-status { font-size: 0.9rem; }
.indicatorTooltip {opacity: 0.3; font-weight: normal; cursor:default; border-bottom: none; color: #7f7f7f;}
.indicatorTooltip:hover {opacity: 0.3; font-weight: normal; cursor:default; border-bottom: none; color: #7f7f7f;}

.title-indicators { padding:10px 0; }
.bg-white { background-color: #FFF; }
.indicator-value { text-align: center; }

.bck-type-2, .bck-type-4, .bck-type-6, .bck-type-8, .bck-type-10, .bck-type-12, .bck-type-14 { background-color: #f3f9e1; }
.bck-type-16, .bck-type-18, .bck-type-20, .bck-type-22, .bck-type-24, .bck-type-26 { background-color: #e5f6f6; }
.bck-type-28, .bck-type-30, .bck-type-32, .bck-type-34 { background-color: #e3eefc; }
.bck-type-36, .bck-type-38, .bck-type-40, .bck-type-42, .bck-type-44, .bck-type-46, .bck-type-48 { background-color: #f3e3dc; }
.progress { height: 0.8rem; margin-top:0.2rem; margin-bottom:0.2rem; }
.level thead tr { background-color: #ffffff; text-align: center; }
.level thead tr th { text-align: center; }
.indicator-type-mobile-title { color: #FFF; text-transform: capitalize; display: block;
    padding: 0.5rem 0.5rem 0.5rem; font-size: 0.8rem; line-height: 0.8rem; }

/** CMS */
.breadcrumb { padding: 20px 0; font-style: italic; }
body .row .row.cms-articles { margin-top:0;}
.cms-articles { padding: 0 0 20px; }
.cms-article { padding: 20px; }
.cms-article p { font-size: 0.9rem; line-height: 1rem; color: #7b7b7b; }
.cms-article a.more { text-decoration: underline; color: #a1c617; }
.cms-article h2, .cms-edu h2, .cms-article h3 { color: #1a1d56; font-size: 1.3125rem; line-height: 1.3125rem; font-weight: bold;}
.cms-article-image { width: 100%; }
.cms-article-image img { width: 100%; }

.cms-articles .cms-article { background-color: #f1f1f1; }
body .row .row.cms-edu { margin-top:20px; }
.cms-edu h2 { color: #a1c617; margin: 0 0 10px; }

.right-column a.button { background-color: #a1c617; padding-right: 1.5rem; padding-left: 1.5rem; width: 100%; text-align: left; }
.right-column a.button:hover { background-color: #1a1d56; }
.expo { width: 100%}
.expo img { width: 100%}

/** Download */
.download-page { margin-top: 40px; }
.download-page h1 { margin-bottom: 40px; color: #a1c617; font-size: 1.3125rem; line-height: 1.3125rem; }
.download-page h2 { color: #7b7b7b; font-size: 1.25rem; line-height: 1.25rem; }
.download-page h2 span { color: #1a1d56; }
.download-page .download-picto { background-size: 35px auto;width:35px; height: 35px; margin: 0 10px; }

.download-page table { width: 100%; color: #1a1d56; }
.download-page table tr th,
.download-page table tr td { color: #1a1d56; font-size: 1.15rem; line-height: 1.15rem; }
.download-page table span { display: block; color: #7b7b7b; margin-top: 10px; }

.bottom-left-button { position:absolute; bottom:0; right:0; margin: 10px;}
.button-marker-map { background: url("/images/real-time/probe-picto.png") center center no-repeat; display: block;
    height: 55px; width:55px; z-index: 1000;}
.button-marker-map-highlight { height: 55px; width:55px; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px;
    border:5px solid #a0c3ff }
.button-marker-map.probe1 { position:absolute; bottom:80%; right:80%; margin: 10px;}
.button-marker-map.probe2 { position:absolute; bottom:10%; right:50%; margin: 10px;}
.button-marker-map.probe3 { position:absolute; bottom:75%; right:15%; margin: 10px;}

.bubble-info-probe { visibility:hidden; position:absolute; bottom:50%; right:50%; margin: 10px; width:260px; height:180px; z-index:0;}
.bubble-info-title { background: #ffffff; height:20%; position: relative;}
.bubble-info-title h1 { color: #56507e; font-size: 0.7rem; font-weight:bold; text-align:center; padding-top:10px;}
.bubble-info-content { background: #f1f1f1; height:80%; font-size: 0.7rem; padding: 10px;}
.bubble-info-content ul { list-style: none; padding: 20px;}
.bubble-info-content li { color: #56507e; font-size: 0.7rem; text-align:center; padding-top:10px;}

.bubble-info-content .probeInput { background-color: #ffffff; display: block; height: 30px; width:40px; line-height: 30px;
    text-align: right; padding-right: 5px; color: #56507e; }
.probe_decibel_popup_status{ display: block; height: 30px; width:30px;}
.probe_decibel_alert{ display: block; height: 30px; width:30px;}

.probe_bioclics_popup_status{ display: block; height: 30px; width:30px;}
.probe_bioclics_alert{ display: block; height: 30px; width:30px;}

.bubble-info-content .row { margin:0; padding-top: 10px; }
.bubble-info-content .bubble-label { text-align: right; line-height: 30px; color: #56507e; }

.probe_general_popup_status{ background: url("/images/real-time/general-state-ok.png"); display: block; height: 30px; width:40px;}

.circleborder { background-color: #0078a0;width: 50px; height: 50px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.general-state-ok {background: url("/images/real-time/general-state-ok.png") no-repeat center center; color: #f1f1f1; display: block; width: 40px; height: 30px; line-height: 30px; padding-left: 40px;}
.general-state-medium {background: url("/images/real-time/genral-state-medium.png") no-repeat center center; color: #f1f1f1; display: block; width: 40px; height: 30px; line-height: 30px; padding-left: 40px;}
.general-state-not-ok {background: url("/images/real-time/general-state-not-ok.png") no-repeat center center; color: #f1f1f1;display: block; width: 40px; height: 30px; line-height: 30px; padding-left: 40px;}

.probe-state-ok {background: url("/images/real-time/green-dot.png") no-repeat center center; color: #f1f1f1; display: block; width: 30px; height: 30px; line-height: 30px;}
.probe-state-medium {background: url("/images/real-time/orange-dot.png") no-repeat center center; color: #f1f1f1; display: block; width: 30px; height: 30px; line-height: 30px;}
.probe-state-not-ok {background: url("/images/real-time/red-dot.png") no-repeat center center; color: #f1f1f1; display: block; width: 30px; height: 30px; line-height: 30px;}

.alert {background: url("/images/real-time/alert.png") no-repeat center center; color: #f1f1f1; display: block; width: 25px; height: 25px; line-height: 30px;}

#decibelChart, #indicatorReportChart, .bgIndicatorReportChart { margin: auto; display: block;}
#decibelChart { margin-bottom: 10px; margin-top: 10px; padding: 10px; }
#indicatorReportChart { padding-top: 20px; display: none; }
.decibel-bloc { background-color: #FFF; margin-bottom: 10px; }
#decibel-datepicker { padding-left: 15px; background-color: #f3f3f3; border: none; height: 2.0rem; }
.decibel-datepicker-bg { display: block; background: url('/images/real-time/bg-decibel-datepicker.png') center right no-repeat;  height: 1.6rem; width: 1.6rem;}
.table-datepicker-bg { display: block; background: url('/images/real-time/bg-decibel-datepicker.png') center right no-repeat;  height: 1.6rem; width: 1.6rem;}
.decibel-datepicker-input-block { padding-right: 2px; color: #7b7b7b; }
.decibel-datepicker-bg-block { padding-left: 0; }
.decibel-bloc .row { margin-left: 0; font-size: 90%; color: #7b7b7b; padding-top: 10px;}
.decibel-bloc a { color: #a1c617; text-decoration: underline; }
.decibel-legend { background: url("/images/real-time/decibel-legend.png") no-repeat center right; width: 180px; height:20px;}

.picto-zoom { display: inline-block; width: 28px; height: 28px; margin-left: 5px; }
.picto-less { background: url("/images/real-time/picto-less.png") no-repeat center center; }
.picto-more { background: url("/images/real-time/picto-more.png") no-repeat center center; }
.bgIndicatorReportChart { width: 400px; height:250px; }

.legend-date { text-align: center; font-size: 0.8rem !important; padding-top:0 !important; margin-top: -10px !important;}
.indicatorChartLegend { margin-left: 10px; margin-bottom: 5px; }
.indicatorLegendColor {display: block; float: left; width: 50%; font-size: 0.8rem; line-height: 0.8rem; margin-bottom: 5px;}
.indicatorLegendColor span {display: inline-block; width: 8px; height:8px; margin-right: 5px;}


/** Download */
.download-table { background: #FFFFFF none repeat scroll 0 0; border: none; margin-bottom: 3.0rem; table-layout: auto;}
.download-table tr th, table tr td {padding: 0px; font-size: 1.05rem;}
table tr.even, table tr.alt, table tr:nth-of-type(even) {background: #FFFFFF; }
tr.download-table {border-spacing:5em}
.download-picto-excel{ background: url("/images/real-time/xls.png") no-repeat; }
.download-picto-pdf{ background: url("/images/real-time/pdf.png") no-repeat; }
.download-picto-green{ background: url("/images/real-time/download-green.png") no-repeat; }
.download-picto-red{ background: url("/images/real-time/download-red.png") no-repeat; }

.download-page-title {padding: 10px 120px 10px 10px; background-color: #f1f1f1;}
.download-page-icons {margin-left: 1px; background-color: #f1f1f1;}
.download-page-tr {margin-top: 20px;}

.empty-space {height: 15px; background-color:#FFFFFF;}

/** Global */
.sea-grey { color: #7b7b7b; }
footer.row { max-width: 1200px; }
footer a,
footer p { font-size: 0.8rem; }

.close-bubble { color: #AAAAAA; cursor: pointer; font-size: 1.22222rem; font-weight: bold;
    line-height: 1; position: absolute; top: 0.25rem; right: 0.5rem; }


@media screen and (max-width: 1075px) {
    .top-bar-section .right { height: auto !important; }
    .hidden-under-1075 {display: none;}
}
@media screen and (max-width: 640px) {
    .all_data_button {display: none;}
    .level .indicator-name { width: 100%;}
    body .custom-show-for-small-only { display: grid !important; }
    .export_button { width: 100%; }
}
@media screen and (min-width: 640px) {
    .custom-show-for-small-only { display: none; }
    .close-bubble { display: none; }
}
@media screen and (max-width: 400px) {
    .mobile-ellipsis { text-overflow: ellipsis; width: 30px; white-space: nowrap;
        overflow: hidden; display: block; }
}
@media screen and (min-width: 640px) and (max-width: 1025px) {
    .all_data_button {display: none;}
    .expo img { width:50%; }
}

/** Map */
#map { height: 100%; z-index: 100 }
.leaflet-popup-content-wrapper { /*border: 2px solid #030F40;*/ }
.leaflet-popup-content-wrapper h1 { font-weight: bold; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 0.2rem }

/** Filter bar */
.filterBar { background-color: #FFF; font-size: 1rem; margin-bottom: 10px; }
.filterBar .sub-nav { padding: 10px 0; }
.filterBar .non-active a,
.actionButton a { background-color: #e4e8ef; color: #030F40; border-radius: 3px; font-size: 0.7rem; padding: 0.1875rem 0.5rem; }
.filterBar .non-active a {  }
.filterBar .active a { background-color: #030F40 !important; color: #e4e8ef !important; font-size: 0.7rem }
.filterBar .sub-nav dt,
.filterBar .sub-nav dd,
.filterBar .sub-nav li { margin-left: 0.7rem}
.filterBar .sub-nav {margin-bottom: 0}
.filter-range-picker { float: right !important; }
.filter-range-picker { margin-right: 0.7rem; }
.button-download a { cursor: pointer !important; }
.filter-range-last { margin-right: 0.7rem !important }
.actionButton .buttonBlue { background-color: #030F40 !important; color: #e4e8ef !important; font-size: 0.8rem }
.actionButton .buttonGreen { background-color: #a1c617 !important; color: #e4e8ef !important; font-size: 0.8rem }
.actionButton dd { margin: 0 2px; }
.actionButton .sub-nav { margin: 10px 0; }

/** Header probe */
.probe_cityName { text-transform: uppercase; color: #030F40 }
.probe_stationName { color: #030F40 }
.station-description-content h2 { font-size: 1.05rem }

.no-data { color: #DA1212; opacity: 0.7; margin: 0 20px; text-align: center; padding: 10px; display: none; }

/** Admin */
.admin-login { margin:auto; width: 400px; }
.admin-login-content { padding: 100px 0; }
.admin-login-header { text-align: center; font-size: 1.25rem; font-weight: bold; margin-bottom: 40px; }
.admin-login-input input { border:none; border-radius: 5px; background-color: #e4e8ef; font-size: 1.05rem; padding: 5px 20px; }
.admin-login-button input { display: block; margin: auto; border-radius: 5px; background-color: #030F40; color: #e4e8ef;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-top: 40px; cursor: pointer; } 
.admin-login-button { padding-bottom: 20px ; margin-left: 20% }
.admin-login-button .button-add-probe { display: inline-block; border-radius: 5px; background-color: #030F40; color: #e4e8ef;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-top: 20px }

@media only screen and (min-width: 800px) {
	.admin-probe { margin:auto; width: 1200px; }
	.admin-probe-form { margin:auto; width: 1200px; }
	.admin-probe table { width: 100%; }
}
.admin-probe-content h1 { font-size: 1.5rem; padding: 2rem 0; margin: 0 !important; }
.admin-probe table td { padding: 0.2rem 1rem; }
.admin-probe label:first-of-type { text-align: right; width: 20%; padding-right: 20px; display: inline-block } 
.admin-probe label { text-align: left; display: inline-block }
.admin-probe input { display: inline-block }
.admin-probe .admin-login-input { margin: 10px 0 }
.admin-probe .admin-login-input input { width: 60% }
.admin-probe td.admin-login-input  input { width: 100% ; text-align:right}
.admin-probe .admin-login-input select {
    width: 60%;
	margin-bottom: 0;
}

#sondes-mesures-tbody label:first-of-type { text-align: left; width: 100%; padding-right: 0px; display: inline-block }

@media only screen and (min-width: 800px) {
	.admin-client { margin:auto; width: 800px; }
	.admin-client-form { margin:auto; width: 1200px; }
	.admin-client table { width: 800px; }
}
.admin-client-content h1 { font-size: 1.5rem; padding: 2rem 0; margin: 0 !important; }
.admin-client table td { padding: 0.2rem 1rem; }
.admin-client :not(.switch) > label:first-of-type { text-align: right; width: 20%; padding-right: 20px; display: inline-block } 
.admin-client :not(.switch) > label { text-align: left; display: inline-block }
.admin-client input { display: inline-block }
.admin-client .admin-login-input { margin: 10px 0 }
.admin-client .admin-login-input input { width: 60% }
.admin-client-button { padding-bottom: 20px ; margin-left: 20% }
.button-add-client { display: inline-block; border-radius: 5px; background-color: #030F40; color: #e4e8ef;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-top: 20px }

@media only screen and (min-width: 800px) {
	.admin-user { margin:auto; width: 800px; }
	.admin-user-form { margin:auto; width: 1200px; }
	.admin-user table { width: 800px; }
}
.admin-user-content h1 { font-size: 1.5rem; padding: 2rem 0; margin: 0 !important; }
.admin-user table td { padding: 0.2rem 1rem; }
.admin-user label:first-of-type { text-align: right; width: 20%; padding-right: 20px; display: inline-block } 
.admin-user label { text-align: left; display: inline-block }
.admin-user input { display: inline-block }
.admin-user select { display: inline-block }
.admin-user .admin-login-input { margin: 10px 0 }
.admin-user .admin-login-input input { width: 60% }
.admin-user .admin-login-input select { width: 60% }
.admin-user-button { padding-bottom: 20px ; margin-left: 20% }
.button-add-user { display: inline-block; border-radius: 5px; background-color: #030F40; color: #e4e8ef;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-top: 20px }

@media only screen and (min-width: 800px) {
	admin-client-sonde { margin:auto; width: 800px; }
	.admin-client-sonde-form { margin:auto; width: 1200px; }
	.admin-client-sonde table { width: 800px; }
}
.admin-client-sonde-content h1 { font-size: 1.5rem; padding: 2rem 0; margin: 0 !important; }
.admin-client-sonde table td { padding: 0.2rem 1rem; }
.admin-client-sonde label:first-of-type { text-align: right; width: 20%; padding-right: 20px; display: inline-block } 
.admin-client-sonde label { text-align: left; display: inline-block }
.admin-client-sonde input { display: inline-block }
.admin-client-sonde select { display: inline-block }
.admin-client-sonde .admin-login-input { margin: 10px 0 }
.admin-client-sonde .admin-login-input input { width: 60% }
.admin-client-sonde .admin-login-input select { width: 60% }
.admin-client-sonde-button { padding-bottom: 20px ; margin-left: 20% }
.button-add-client-sonde { display: inline-block; border-radius: 5px; background-color: #030F40; color: #e4e8ef;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-top: 20px }

.measurement-threshold .admin-login-input input { width: 160px; margin-right: 60px; }

.button-back { padding-left: 20px }
.error-message { color: #DA1212 }
.description_unit { font-size: 0.6rem; }
    

.modal-loading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/images/spinner.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
    modal element will be visible */
body.loading .modal-loading {
    display: block;
}


@media screen and (max-width: 1040px) {
    .row .small-12 { padding: 0; }
    
}


footer { background-color: #030F40; color: #FFF; height: 80px;  }
.footer-content { height:100%; position: relative; }
footer p { padding: 0 40px; position: absolute; right: 0; margin: 0 !important;
    line-height: 80px; }
footer a { color: #FFF; }
footer a:hover { color: #FFF; text-decoration: underline }



.filter-range-picker .date-picker-start,
.filter-range-picker .date-picker-end { border: none; border-radius: 3px; font-weight: normal; padding: 0.1875rem 1rem;
    display: inline-block; width: 90px; font-size: 0.7rem; margin: 0; line-height: 0.7rem; background-color: #e4e8ef;
    color: #030F40; box-shadow: none; height: 1.4rem; cursor: pointer !important; }
.filter-range-picker.active .date-picker-start,
.filter-range-picker.active .date-picker-end{background-color: #030F40 !important; color: #e4e8ef !important; }

.not_seen_yet { background-color: #DA1212; color: #EEE; }
.already_seen { background-color: #EEE; color: #AAA; }

.map-popin p,
.map-popin span { margin:0 !important; padding: 0 !important; font-size: 0.75rem; }
.map-popin hr { margin:5px 0 !important; padding: 0 !important; }
.leaflet-popup-close-button { display: none !important; }
.leaflet-popup-content { margin: 15px 20px !important; }

.main-content { position: relative; height: calc(80% - 10px) }
.admin .main-content { height: auto !important; }
.table-measurement { position: absolute; top: 0; right:0; z-index: 999; height: 100%; 
     display: none; width: 33%; overflow: scroll; padding-left: 32px; }
.table-measurement-container { background-color: #F1F1F1; padding: 10px; height: 100%;  }
.table-measurement-content { background-color: #FFF; padding: 10px; }
.table-measurement .probe-name { text-transform: uppercase; padding: 0; margin: 0; font-weight: bold; line-height: 1; }
.table-measurement .last-statement { padding: 0; margin: 0; font-weight: bold; line-height: 1; font-size: 0.8rem }
.table-measurement .column { margin: 0; padding: 0 5px; }
.table-measurement .family-name { text-transform: uppercase; font-size: 0.8rem; padding: 5px; font-weight: bold; }
.table-measurement input[type="file"], input[type="checkbox"] { margin: 0; }
.table-measurement-values {  border: 2px solid #F1F1F1; margin:0; padding: 1px }
.table-measurement .tm-family-icon { width: 20px; padding-top: 5px; }
.table-measurement .button-close-measurement { position: absolute;  z-index: 200; display: block; left: 0; top: 0;
    width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 24px;
    color: #FFF; background-color: #030F40; border: 1px solid #030F40; border-bottom-left-radius: 5px; }

.top-bar-section li a.with-icon { padding: 0 10px !important; }
.top-bar-section li a.with-icon.small { padding: 0 5px !important; }
a.with-icon:hover { text-decoration: none !important; }
.with-icon i { display: block; padding-top: 20px; text-align: center; font-size: 1.3em; }
.with-icon span { display: block; line-height: 40px; text-align: center }
.dropdown li a { height: 30px; line-height: 30px !important; }
.top-bar-section li.fake-button { line-height: 80px; background-color: #030F40 !important; width: 260px; }
.top-bar-section li.fake-button div { display: block; color: #FFF; font-size: 0.8125rem; padding: 0 20px; }
.top-bar-section li.fake-button div .probe-name { text-transform: uppercase; padding-top: 27px; font-size: 1rem; }
.top-bar-section li.fake-button div span { text-align: right; display: block; line-height: 20px; }

.top-bar-section .dropdown li { line-height: 40px ; height: 40px ; }
.top-bar-section .dropdown li.divider { line-height: 2px ; height: 2px ; background-color:white ;}
.top-bar-section .dropdown li a { background-color: #030F40 !important;line-height: 40px !important; height: 40px !important; }
.top-bar-section .dropdown li a:hover { background-color: #03155b !important; text-decoration: none; }
.top-bar-section .dropdown li a.active { background-color: #051b63 !important; }
.top-bar-section li a.with-icon.active { background-color: #051b63 !important; }
.top-bar-section .dropdown li a.active:hover { background-color: #03155b !important; }
.top-bar-section li a.with-icon.active:hover { background-color: #03155b !important; }
.top-bar-section .dropdown li .with-icon i { text-align: left; padding-left: 2px; }
.top-bar-section .dropdown li .with-icon > span { text-align: left; color: white; }


table tr th { text-align:center}

html .ui-widget-header { background-color: #FFF; border: none; }
.ui-widget.ui-widget-content { border-color: #030F40; }
.ui-widget-header { color: #030F40; }

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 15px !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 15px !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 15px !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 15px !important;
}
.custom-closethick { display: block; position: absolute; width: 20px; height: 20px; right: 10px; top: 10px; 
    color: #030F40; line-height: 20px; }
.custom-expand { display: block; position: absolute; width: 20px; height: 20px; right: 35px; top: 10px; 
    color: #030F40; line-height: 20px; }
.custom-drag { display: block; position: absolute; width: 20px; height: 20px; right: 60px; top: 10px; 
    color: #030F40; line-height: 20px; }
.custom-data { display: block; position: absolute; width: 20px; height: 20px; right: 85px; top: 10px; 
    color: #030F40; line-height: 20px; }
.ui-dialog-titlebar-close { display: none !important; }
.dialog-title-edit-button {cursor: pointer !important;}
.ui-draggable .ui-dialog-titlebar {
    cursor: default !important;
}
.ui-dialog .ui-dialog-title { overflow: unset !important;}
.custom-drag { cursor: move !important; }

.custom-closethick i,
.custom-expand i,
.custom-pen i { font-size: 1.2rem }
.ui-dialog-title { line-height: 0.5 }
.title-area { z-index: 10 }
.popup-title { z-index: 110 }
.range-selection { z-index: 110 }
.range-selection p { text-align: center }
.range-button-close { display: block; margin: auto; border-radius: 5px; background-color: #030F40; color: #e4e8ef !important;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-bottom: 20px; text-align: center; }
.title-button-close { display: block; margin: auto; border-radius: 5px; background-color: #030F40; color: #e4e8ef !important;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-bottom: 20px; text-align: center; }
.popup-no-data-button-close { display: block; margin: auto; border-radius: 5px; background-color: #030F40; color: #e4e8ef !important;
    padding: 10px 40px; border:none;  font-size: 1.05rem; margin-bottom: 20px; text-align: center; }
.top-bar-section .dropdown { z-index: 150 !important;}
.has-dropdown:hover, .has-dropdown:hover .dropdown {
	z-index: 150 !important;
} 

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 12px; /*Desired width*/
    height: 12px; /*Desired height*/
    cursor: pointer;
    border: 1px solid #CCC;
    border-radius: 2px;
    background-color: #fcfbfb;
    display: inline-block;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    color: black;
    box-sizing: content-box;
    margin-right: 10px;
}
input[type="checkbox"]:checked {
    position: relative;
    background-color: #FFF;
    border-radius: 2px;
    border: 1px solid #CCC;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    color: black;
    cursor: pointer;
}
input[type="checkbox"]:checked:before {
    content: '';
    background: #AAA;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
input[type="checkbox"]:focus {
    outline: 0 none;
    border-radius: 2px;
    box-shadow: none;
}
.dialog-container-chart1, .dialog-container-chart2, .dialog-container-chart3, .dialog-container-chart4, .dialog-container-chart5, .dialog-container-chart6, .dialog-container-chart7, .dialog-container-chart8 { position: relative; width:100%; height: 100%; }


@media screen and (max-width: 1150px) {
    /* .top-bar-section ul { display: none; } */
    .table-measurement { position: relative; width: 100%; padding-left: 0 !important; overflow: inherit !important; }
    .button-close-measurement { display: none !important; }
    .main-content { }
    .top-bar,
    .top-bar .subname,
    .top-bar .title-area,
    .top-bar .title-area .name,
    .top-bar .title-area .name h1,
    .top-bar .title-area .name h1 a,
    .top-bar .top-bar-section { height: 80px !important; line-height: 80px !important; }
	#app-logo-area > h1 > a > img { height: 20px !important; }
    /* .title-area { width: 100% } */
	.title-area { margin-right: 0px !important; }
	#app-name-area  { display: none; }
	.mobile-hide {display: none; visibility: hidden; }
	.top-bar-section ul { width: auto; }
	.top-bar-section ul li { float: left !important; }
	.top-bar-section .divider {clear:none !important; width: auto; }
	.top-bar { overflow: visible;}
    /* .top-bar .subname { float: right; margin-right: 20px } */
    .main-content { min-height: calc(100% - 140px); height: calc(100% - 140px); }
    /*.top-bar { height: 160px; line-height: 80px; } */
    /* .top-bar-section ul { width: auto; height: auto !important; display: inline; }*/
    .table-measurement-period  { border-bottom: 1px solid #F1F1F1; margin: 5px 10px; }
	.table-measurement-period ul { margin-left: 0px; }
    .table-measurement-period li { list-style-type: none; display: inline-block;
        background-color: #e4e8ef; color: #030F40; border-radius: 3px; font-size: 0.7rem; padding: 0.1875rem 0.5rem; }
    .table-measurement-period-title { margin: 0 auto; /* float: left; */ font-size: 14px; line-height: 2; }
    .map-page .main-content { position:initial; }
    .map-page .full { height: auto; }
    .map-page #map { height: 400px; }
}
@media screen and (min-width: 1150px) {
    .mobile-probe-info { display: none; }
    .table-measurement-period { display: none; }
	.desktop-hide { display: none;}
}

@media screen and (max-width: 970px) and (min-width: 851px) {
    .subname { display: none; }
}

.mobile-info-name, .mobile-info-date { margin: 0 10px; font-size: 0.875rem; text-align: center }
.mobile-info-name { font-weight: bold; text-transform: uppercase; margin-top: 5px; }
.mobile-info-date { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #F1F1F1 }

@media only screen and (min-width : 1500px) {
    /* Styles */
    html, body { font-size: 115% }
    .table-measurement { width: 500px }
    .top-bar-section li.fake-button { width: 300px }
    .tm-family { margin: 10px 0 5px; }
    .desktop-hide { display: none;}
}
.dropdown .parent-link { display:none !important; }

.editing { background-color:#F1F1F1 !important; }
.editing .ui-dialog-titlebar { background-color:#F1F1F1 !important; }
.editing-title { display: none; }
.editing .editing-title { display: block; position: absolute; width: 200px; height: 20px; right: 110px; top: 10px; 
    color: #DA1212; font-size: 0.8rem; line-height: 20px; }

.dialog-content-admin { display: none; font-size: 75%; }
.admin-end-action { display: inline-block; font-size: 75%; margin-right:10px;}
.form-admin-front .admin-start,
.form-admin-front .admin-end { height: 30px; }
.form-admin-front .admin-start,
.form-admin-front .admin-end,
.form-admin-front .admin-delete { width:70px; text-align: center; display: inline-block; font-size: 90%; margin-right:10px; padding:2px 5px; border: 1px solid #CCC }
.form-admin-front .admin-measurementListName {display: none;}
.form-admin-front .admin-delete { background-color: #051b63; color: #FFF; cursor: pointer;}
#acquit {  }
#acquit .button-check-alerts { background-color: #051b63; color: #FFF; cursor: pointer; width:200px; 
    text-align: center; display: inline-block; font-size: 90%; margin-right:10px; padding:2px 5px; 
    border: 1px solid #CCC; margin-top: 20px; }
.dialog-content-admin form { display: inline; }

.probe-info { position: relative }
.badge-alert {  display:none; position: absolute; width: 32px; height: 32px; left: 10px; top: 10px; cursor: pointer;}
.w3-badge { display:block; position: absolute; width: 100%; height: 100%; line-height: 100%; padding-top: 10px; 
    font-size: 12px; padding-left:0px !important; padding-right: 0px !important; }
.acquit table { width: 100%; }
.acquit table td { padding: 5px 8px; font-size: 1rem !important }
.acquit-container { height: 300px; overflow: scroll; }


.mesure-select {
   background: url(/images/real-time/select-button.png) no-repeat 96% 40%;
   height: 19px;
   overflow: hidden;
   width: 30px;
}

.mesure-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 19px;
   padding: 0px; /* If you add too much padding here, the options won't show in IE */
   padding-left: 4px;
   width: 68px;
}

.rounded {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }

/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #fff; }
.yellow select  { color: #000; }
.black select   { color: #fff; }

.nopadding { padding: 0px }