:root {
    --main-bg-color: #366fb6;
    --main-bg-sec-color: #AEC5E1;
}

main {
    max-width: 1280px;
    margin-inline: auto;
}

.icon-bar .active {
    background-color: white;
}

.icon-bar {
    width: 100%;
    background-color: #555;
    overflow: auto;
}

.icon-bar a {
    float: left;
    text-align: center;
}

.accueil-icon {
    margin:10px;
	background-image: url("../images/icon_accueil.png");
    background-repeat: no-repeat;
	width: 27px;
	height: 25px;
}

.active .accueil-icon {
	background-image: url("../images/icon_accueil_selected.png");
    background-color: white;
}

.commune-icon {
    margin:10px;
	background-image: url("../images/icon_commune.png");
    background-repeat: no-repeat;
	width: 35px;
	height: 25px;
}

.active .commune-icon {
	background-image: url("../images/icon_commune_selected.png");
    background-color: white;
}

.professionnel-icon {
    margin: 10px;
    background-image: url('../images/icon_pros.png');
    background-repeat: no-repeat;
    width: 24px;
    height: 25px;
}

.active .professionnel-icon {
    background-image: url('../images/icon_pros_selected.png');
    background-color: white;
}

.burger-icon {
    margin:10px;
    background-image: url('../images/icon_burger_menu.png');
    background-repeat: no-repeat;
    width: 50px;
    height: 25px;
}

.burger-icon:hover {
    background-image: url('../images/icon_burger_menu_selected.png');
}

.espace-client-icon {
    margin:10px;
    background-image: url('../images/icon_espace_client.png');
    background-repeat: no-repeat;
    width: 50px;
    height: 25px;
}

/*.espace-client-icon:hover {
    background-image: url('../images/icon_espace_client_selected.png');
}*/

.container-fluid {
    max-width:1280px;
}

.navbar-header {
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

.navbar-collapse {
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

.row {
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

body {
    padding: 0;
    margin: 0;
}

html, #map {
    height: 100%;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left:30px;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
	white-space: normal;
}

/* No underline */
a:hover, a:focus {
    text-decoration: none;
    font-family: Roboto;
}

.bc-main{
    background-color: #366fb6;
}

.bc-main-pro{
    background-color: #775ba3;
}

.bc-main-dark{
    background-color: #2f5c95;
}

.bc-main-dark-pro{
    background-color: #684679;
}

div.navbar-collapse
{
	border:none;
	/*box-shadow:none;*/
}

h1, h2, h3, h4, h5, h6{
    color:#2f5c95;
    font-family: Roboto;
}

h3 {
    margin-top:0px;
    font-weight: 600;
	font-size:18px;
}

h4 {
    margin-top:0px;
    font-weight: 600;
	color:#366fb6;
	font-size:16px;
}

p{
    font-family:Roboto;
    font-size:16px;
}

.well{
    border:none;
    /*background-color:#f3f3f3*/
}

.logo-atlas{
    margin-left:17px;
}

.logo-atlas-small{
    height:34px;
    margin:7.5px 2px;
}

.logo-atlas-big{
    height:auto;
    margin:25px 0px;
}

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

li {
    font-family: Roboto;
}

a {
    font-family: Roboto;
    cursor: pointer;
}

.navbar-inverse {
    border-color: transparent; 
}

.nav > li > a:hover, .nav > li > a:focus {
    font-family: Roboto;
    background-color: transparent;
}

.nav > li > a:hover{
    font-family: Roboto;
	color: #366fb6;
    background-color: white;
    border-color: transparent;
}

.nav-tabs-authenticated
{
    margin-top:8px;
    margin-left:130px;
}

.nav-tabs-not-authenticated
{
    margin-top:105px;
    margin-left:140px;
}

.nav-tabs
{
    border-bottom: 0px;
}

.nav-tabs > li > a
{
    font-family: Roboto;
	color: white;
    border-color: transparent;
}

.navbar-nav > li > a:hover{
    font-family: Roboto;
	color: #366fb6;
    background-color: white;
    border-color: transparent;
}

.navbar-nav > li > a
{
    font-family: Roboto;
	color: white;
    border-color: transparent;
}

button{
    padding: 0;
    border: none;
    background: none;
}

.transparent-button{
	font-family:Roboto;
	margin:0px;
	border: none;
	background-color: transparent;
	outline: none;
	padding:0px;
}

input[type=checkbox], input[type=radio] {
	vertical-align: middle;
	position: relative;
	bottom: 2px;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    color: #366fb6;
    font-family:Roboto;
    font-weight:600;
	font-size:16px;
    text-decoration: none;
    background-color: #f3f3f3;
    outline: 0;
}

.dropdown-menu > li > a {
	font-family:Roboto;
    color: #242424;
	font-size:16px;
}

.dropdown-menu {
    
}

.text-gray-dark-11 {
    font-family:Roboto;
	color:#242424;
	font-size:11px;
}

.text-blue-11 {
    font-family:Roboto;
	color:#366fb6;
	font-size:11px;
}

.text-blue-12 {
    font-family:Roboto;
	color:#366fb6;
	font-size:12px;
}

.text-white-20 {
	font-family:Roboto;
	color:white;
	font-size:20px;
}

.text-white-22 {
	font-family:Roboto;
	color:white;
	font-size:22px;
}

.text-white-40 {
	color:white;
	font-size:40px;
}

.thematique-div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.col-video-sub{
    padding:0px;
    padding-top:10px;
}

.col-video-text-sub{
    padding:0px;
}

.text-video-sub {
	color:#5c5c5c;
	font-size:9px;
}

.color-blue-light{
    color:#85b5f0;
}
.color-blue-medium{
    color:#366fb6;
}
.color-blue-dark{
    color:#2f5c95;
}
.backcolor-gray-ultralight{
    background-color: #f4f4f4;
}
.color-gray-ultralight{
    color:#f4f4f4;
}
.color-gray-light{
    color:#d8d8d8;
}
.color-gray-medium{
    color:#bbbbbb;
}
.color-gray-dark{
    color:#5c5c5c;
}

.red {
    color: red;
}

.green {
    color: green;
}

.icon-mail{
    margin-right:5px;
}

.icon-link {
    margin-right:9px;
}

.icon-telecharger {
    margin-right:9px;
}

/* Permet d'adapter la taille des fenêtres modales bootstrap à leur contenu*/
.modal-dialog {
    position: relative;
    display: table;
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

.text {
    color:#242424;
    font-family: Roboto;
    font-size:14px;
}

.text-link {
    font-family: Roboto;
    font-size:14px;
    color: #6493d3;
    display: flex;
}

.div-boutons-carto {
    margin-top:10px;
}

.bouton-recherche {
    height: 35px;
    width: 35px;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-color: #366fb6;
    background-image: url('../images/icon_recherche.png');
    background-position-x: 5px;
    background-position-y: 5px;
    background-size: 25px 25px;
}

.espace-client{
    padding: 5px 25px; 
    height:145px; 
    margin: 0px;
}

.espace-client-mobile {
    height:70px; 
    margin: 0px;
    margin-top: 50px;
    z-index: 1045;
    background-color: white;
}

.espace-client-reduced{
    padding: 5px 25px; 
    height: 49px; 
    min-width:280px;
    margin: 0px;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.validation-summary-valid ul {
    margin-bottom: 0px;
}

.fill { 
    min-height: 100%;
    height: 100%;
}

.modal-etude{
    border-radius:0px;
}

.text-sous-etude{
    font-family: Roboto;
    color:#2f5c95;
    font-size:18px;
    margin:2px 12px;
}

.validation-box{
    margin:5px;
    font-family: Roboto;
    color:red;
    font-size:10px;
}

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pre-container-authenticated {
    height:60px;
}

.pre-container-not-authenticated {
    height:160px;
}

.pre-container-authenticated-xs {
    height:50px;
}

.pre-container-not-authenticated-xs {
    height:50px;
}

.container-authenticated {
    margin-top:0px;
    /*éviter que le contenu dans le body passe au dessus des dropdown menu qui viennent de la barre de menu principale*/
    position: relative; 
    /*z-index: 999;*/
}

.container-not-authenticated {
    margin-top:0px;
    /*éviter que le contenu dans le body passe au dessus des dropdown menu qui viennent de la barre de menu principale*/
    position: relative; 
    /*z-index: 999;*/
}

/* workaround pour faire apparaître un botuon permettant de supprimer la saisie dans les barres de recherche*/

/*input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}*/

/* Change cursor when over marker */
.leaflet-marker-icon {
  cursor: pointer;
}

/* Change cursor when over entire map */
.leaflet-container {
  cursor: default;
}

.flex-parent {
    display: flex; /* contexte sur le parent */
}

.flex-enfant {
    margin: auto; /* eh oui, tout bêtement */
}

.line {
    display: flex;
    gap: .5em;
    align-items: center;
}

.service-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.service-infos-container {
}

.carto-container {
}

.spinner-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: calc(30vh);
}

.html-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--main-bg-sec-color);
    border-top: 4px solid var(--main-bg-color);
    border-radius: 50%;
}

.html-spinner {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1.2s;
    -webkit-animation-name: rotate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-transition-property: -moz-transform;
    -moz-animation-name: rotate;
    -moz-animation-duration: 1.2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    transition-property: transform;
    animation-name: rotate;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

footer {
    margin-top: .5em;
    opacity: 1;
    background-color: white;
}