/* VARIABLES */
:root {
  --header-color: #43718c;
  --header-background-image: none;
  --color-background-primary: #ffffffdb;
  --color-background-primary-content: #ffffffdb;
  --color-text-primary: rgb(51 51 51);
  --color-text-primary-content: rgb(51 51 51);
  --color-contrasted-elements: #43718c;
  --color-contrasted-elements-light: #c3dceb;
  --color-contrasted-text: white;
  --color-dark-gray-elements: rgb(51 51 51);
}

/* BODY */
body {
  background-color : var(--color-background-primary);
}

/* BUTTONS */
button.btn, a.btn, input.btn, label.btn {
  background-image: none;
  border: 1px solid transparent;
  background-color: var(--color-contrasted-elements-light);
  color: var(--color-text-primary);
  box-shadow: none;
  text-shadow: none;
}

button.btn:focus, a.btn:focus, input.btn:focus {
  background-color: var(--color-contrasted-elements-light);
  color: var(--color-text-primary);
}

button.btn:hover,
button.btn.active,
a.btn:hover,
a.btn.active,
input.btn:hover,
input.btn.active {
  background-color: var(--color-contrasted-elements);
  color: var(--color-contrasted-text);
}

/* button types (bootstrap) */

/* button types */
.btn.btn-primary, .btn.btn-primary:focus {
  background-color: #43718c;
  color: white;
}

.btn.btn-info, .btn.btn-info:focus {
  background-color: #57bcda;
  color: white;
}

.btn.btn-success, .btn.btn-success:focus {
  background-color: #95c02a;
  color: white;
}

.btn.btn-warning, .btn.btn-warning:focus {
  background-color: #f9a227;
  color: white;
}

.btn.btn-danger, .btn.btn-danger:focus {
  background-color: #da4f49;
  color: white;
}

/* hover & active */
.btn.btn-primary:hover, .btn.btn-primary.active {
  background-color: #43718c;
    filter:brightness(110%);
}

.btn.btn-info:hover, .btn.btn-info.active {
  background-color: #57bcda;
    filter:brightness(110%);
}

.btn.btn-success:hover, .btn.btn-success.active {
  background-color: #95c02a;
    filter:brightness(110%);
}

.btn.btn-warning:hover, .btn.btn-warning.active {
  background-color: #f9a227;
    filter:brightness(110%);
}

.btn.btn-danger:hover, .btn.btn-danger.active {
  background-color: #da4f49;
    filter:brightness(110%);
}

/* DROP-DOWN LISTS */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  background-image: none;
  background-color: var(--color-contrasted-elements);
  color: var(--color-contrasted-text);
}

.btn-group.open .btn.dropdown-toggle {
  background-color: var(--color-contrasted-elements);
  color: var(--color-contrasted-text);
}

/* FORMS */

/* Form submit button container */
div.jforms-submit-buttons {
  padding: 5px;
  padding-top: 20px;
  background: none;
  border: none;
}

/* Form submit buttons */
div.jforms-submit-buttons.form-actions .btn{
  transition: none;
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none;
}

div.jforms-submit-buttons.form-actions .btn:hover,
div.jforms-submit-buttons.form-actions .btn:focus
{
  filter: brightness(0.95);
  color: black;
}

div.jforms-submit-buttons.form-actions .btn.jforms-ctrl-reset {
  background-color: lightgrey;
}

div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_cancel {
  background-color: #fd8c62;
}

div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_submit {
  background-color: #aedb6a;
}

/* HEADER */

#header {
  background-color: var(--header-color);
  background-image : var(--header-background-image);
  background-repeat: repeat;
  color: var(--color-contrasted-text);
}

#logo {
  background : url("img/logo.png") no-repeat;
  background-size:contain;
}

#headermenu {
  background-color:transparent;
}

#auth {
  background: transparent;
}

.navbar .nav > a,
.navbar .nav > li > a ,
.navbar .nav > li > a {
  color: var(--color-contrasted-text);
}

.navbar .nav .active > a,
.navbar .nav > li > a:focus ,
.navbar .nav > li > a:hover {
  background-color: var(--color-background-primary);
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color : var(--color-text-primary);
  background-color: var(--color-background-primary);
}

.navbar .nav > li > .dropdown-menu::after {
  border-bottom: 6px solid var(--color-background-primary);
}

.dropdown-menu {
  background-color: var(--color-background-primary);
}

.navbar .navbar-inner .icon {
  background-image:url("images/sprite_20_tools.png");
}

.navbar .nav .dashboard-item .icon {
    background-position: -975px 0;
}

.navbar .nav .dashboard-item a:hover .icon,
.navbar .nav .dashboard-item.active a .icon {
    background-position: -950px 0;
}

.navbar .nav .login .icon {
  background-position: -225px 0;
}

.navbar .nav .login a:hover .icon,
.navbar .nav .login.active a .icon {
  background-position: -200px 0;
}

.navbar .nav .registered .icon {
  background-position: -825px 0;
}

.navbar .nav .registered a:hover .icon,
.navbar .nav .registered.active a .icon {
  background-position: -800px 0;
}

.navbar .nav .user .icon {
  background-position: -575px 0;
}

.navbar .nav .user a:hover .icon,
.navbar .nav .user.active a .icon,
.navbar .nav .user.open a .icon    {
  background-position: -550px 0;
}

.navbar .nav .home .icon {
  background-position: -25px 0;
}

.navbar .nav .home a:hover .icon,
.navbar .nav .home.active a .icon {
  background-position: 0 0;
}
/* =============================================================
   LIZPACK - Thème Custom
   Police Roboto | Couleurs #083D44 / #0f9148
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --font-base: "Roboto", sans-serif;
    --font-size-base: 0.9375rem;
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.125rem;
    --font-size-h4: 1rem;
    --line-height-base: 1.55;
    --line-height-heading: 1.2;
    --color-primary: #083D44;
    --color-accent: #0f9148;
}

/* === Police globale === */

*,
*::before,
*::after {
    font-family: var(--font-base) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base) !important;
}

/* === Titres === */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    line-height: var(--line-height-heading);
    margin: 0 0 0.4em 0;
}

h1 { font-size: var(--font-size-h1) !important; }
h2 { font-size: var(--font-size-h2) !important; }
h3 { font-size: var(--font-size-h3) !important; }
h4 { font-size: var(--font-size-h4) !important; }

/* === Header === */

#header {
    background: var(--color-primary);
}

/* === Boutons et menus === */

#navbar button.btn,
#mapmenu .nav-list > li > a,
.btn,
.navbar .nav > li > a {
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

/* === Titres des panneaux === */

#toolbar h3,
#menu h3,
#dock h3,
#sub-dock h3,
#mini-dock h3,
#right-dock h3,
.dock-subtitle {
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* === Popups et contenus === */

.lizmapPopupContent,
.lizmapPopup .popup-content,
#popupcontent div.menu-content,
#dock div.menu-content,
#sub-dock div.menu-content,
#mini-dock div.menu-content,
#right-dock div.menu-content {
    font-size: 0.875rem !important;
}

/* === Texte technique === */

#overview-box,
lizmap-mouse-position > div.mouse-position {
    font-size: 0.75rem !important;
}

/* =============================================================
   Menu latéral
   ============================================================= */

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    color: white;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

#menu .nav-list > li > a {
    background-repeat: no-repeat;
    background-position: left center;
    padding: 3px 15px 3px 20px;
    margin-right: -15px;
    margin-left: -15px;
    display: block;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

#menu .nav-list > li > a:hover,
#menu .nav-list > li > a:focus {
    color: white;
    background-color: var(--color-accent);
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
    color: white;
    background-color: var(--color-accent);
}

.nav-header {
    display: block;
    padding: 3px 15px;
    margin-right: -15px;
    margin-left: -15px;
    font-weight: bold;
    color: #f5f5f5;
    text-transform: uppercase;
}

.nav li + .nav-header {
    margin-top: 9px;
}

/* =============================================================
   Utilitaires
   ============================================================= */

footer.footer > p.pull-right {
    display: none !important;
}

/* =============================================================
   Boutons
   ============================================================= */

button.btn,
a.btn,
input.btn,
label.btn {
    background-image: none;
    background-color: var(--color-primary);
    color: #fdfdfd;
    border: 1px solid transparent;
    box-shadow: none;
    text-shadow: none;
}

button.btn:hover,
button.btn:focus,
button.btn.active,
a.btn:hover,
a.btn:focus,
a.btn.active,
input.btn:hover,
input.btn:focus,
input.btn.active {
    background-color: var(--color-accent);
    color: white;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn.disabled,
.btn[disabled] {
    background-color: var(--color-primary);
    color: #fdfdfd;
    opacity: 0.6;
}

#mapmenu {
    background: #083D44;
}