html, body {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
  padding: 0;
  background: linear-gradient(to bottom, rgb(122, 190, 14), rgba(124, 191, 14, 0.2));
}

.container-xl {
  max-width: 1360px;
}

@media (max-width: 1200px) {
  .container {
    max-width: 100%;
  }
  .logo-pnr h3, .logo-pnr h4 {
    display: none;
  }
}

.footer {
  padding: 10px 20px;
}

#topnav {
  position: relative;
  background-image: url(/bundles/alksterne2/images/background-sterne2.jpg);
  background-position: center center;
  background-size: cover;
}

#topnav .topbar-main {
  background: linear-gradient(45deg,#00b19dc7,#ffffffd1);
  height: 90px;
  min-height: 90px;
  max-height: 90px;
}

#topnav .navbar-custom {
  background: linear-gradient(to right, rgba(30, 30, 47, .9), rgba(39, 41, 61, .7));
  border-image: linear-gradient(to right, #00b19d, white) 1;
  border-style: solid;
  border-width: 2px 0 0 0;
  z-index: 1;
}

#topnav .navigation-menu > li > a {
  padding: 10px!important;
  color: #f5f5f5;
}

#topnav .navigation-menu > li .submenu {
  background: #343a40;
  border: 0;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  margin: 0;
  padding: 0;
}

#topnav .navigation-menu > li .submenu li a {
  padding: 5px 15px;
}

#topnav .navigation-menu > li .submenu li a {
  color: #f5f5f5;
}

.topbar-custom .nav-link {
  line-height: 40px;
}

#topnav .topbar-main .logo {
  color: white;
  text-shadow: 0px 0px 2px #333333;
}

.tabs-bordered li a,
.tabs-bordered li a:hover,
.tabs-bordered li a:focus {
  padding: 10px 5px !important;
}

div.logo {
  margin: 5px 0;
}

div.logo > a {
  width: 120px;
  text-align: center;
}

.logo img {
  max-height: 80px;
}

.logo h1 {
  margin-left: 120px;
  margin-top: 5px;
  margin-bottom: 0;
  font-size: 2rem;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.logo h2 {
  margin-left: 120px;
  margin-bottom: 0px;
  font-size: 1.2rem;
  max-width: 900px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .logo h2 {
    max-width: 600px!important;
  }
}

.logo-pnr {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}

.logo-pnr .img {
  padding: 5px;
}

.logo-pnr .img > img {
  height: 80px;
}

.logo-pnr h3, .logo-pnr h4 {
  color: #fafafa;
  background: transparent!important;
  padding: 6px 20px;
  margin: 0;
  margin-top: 2px;
  z-index: 0;
}

.logo-pnr h4 {
  display: inline-block;
}

.wrapper {
  padding-top: 0px;
}

.btn > i.material-icons {
  vertical-align: bottom;
}

/* FORMS */

.input-group-sm>.input-group-append>select.btn:not([size]):not([multiple]),
.input-group-sm>.input-group-append>select.input-group-text:not([size]):not([multiple]),
.input-group-sm>.input-group-prepend>select.btn:not([size]):not([multiple]),
.input-group-sm>.input-group-prepend>select.input-group-text:not([size]):not([multiple]),
.input-group-sm>select.form-control:not([size]):not([multiple]),
select.form-control-sm:not([size]):not([multiple]) {
  height: calc(1.8125rem + 2px);
}

.form-control-sm, .input-group-sm>.form-control,
.input-group-sm>.input-group-append>.btn,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-prepend>.input-group-text {
  font-size: .8rem;
}

/* CARTO */

.form-control::placeholder {
  color: rgba(0, 0, 0, 0.4)
}

.card-header i.mdi-arrow-up::before, .card-header i.mdi-arrow-down::before {
  transition: .3s transform ease-in-out;
}

.card-header .collapsed i.mdi-arrow-up::before, .card-header .collapsed i.mdi-arrow-down::before {
  transform: rotate(180deg);
}

#map {
  width: 100%;
  height: calc(100vh - 136px); /* header height */
  position: relative;
  background-color: white;
}

.ol-control.ol-overviewmap-custom {
  height: 120px;
  position: relative;
}

.ol-control.ol-overviewmap-custom .ol-viewport {
  height: 116px!important;
}

.ol-control.ol-overviewmap-custom button {
  display: none;
}

.ol-zoom-extent, .ol-full-screen, .ol-zoom{
  display: none;
}

.ol-scale-line {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.select2-selection__arrow{
  display: none;
}

#displayCoords{
  right: 10px;
  z-index: 2;
  bottom: 4px;
  position: absolute;
  width: 200px;
}

#map-footer {
  padding-top: .5em;
  display: flex;
  justify-content: space-between;
}

.ol-mouse-position {
  position: relative;
  top: inherit;
  left: inherit;
  bottom: inherit;
  right: inherit;
  color: #333;
}

.carnet {
  position: absolute;
  right: 0px;
  top: 0;
  height: 100%;
}

.carnet > button.handle {
  position: absolute;
  top: calc(50% - 15px);
  left: -25px;
  z-index:1;
}
.carnet > button.handle.collapsed > i {
  right: 12px;
}

.carnet > .card {
  z-index:0;
  height: 100%;
  margin: 0;
}

#carnet-content {
  height: 100%;
}

#carnet-content > div {
  width: 365px;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

.sidebar-container {
  position: absolute;
  left: 0px;
  height: 100%;
  z-index: 1;
}

.sidebar-menu {
  float: left;
  height: 100%;
  position: relative;
}

.sidebar-menu > button.handle {
  position: absolute;
  top: calc(50% - 15px);
  right: -25px;
  z-index: 1;
}
.sidebar-menu > button.handle.collapsed > i {
  left: 12px;
}

#sidebar-menu-content {
  height: 100%;
  background: #FFFFFF;
}

#sidebar-menu-content > div {
  width: 365px;
  height: 100%;
}

#sidebar-menu-content .tab-content {
  max-height: calc(100% - 45px);
  height: calc(100% - 45px);
}

#sidebar-menu-content .tab-content .tab-pane {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  height: 100%;
}

button.handle, 
button.handle > i,
button.handle > i::before {
  position: relative;
  transition: .3s all linear, .15s color linear;
}

button.handle.collapsed i::before {
  transform: rotate(180deg);
}

.sidebar-menu > button.handle.collapsed:hover {
  transform: translateX(20px);
  background-color: #009886;
  border-color: #009886;
  color: #FFFFFF;
}
.sidebar-menu > button.handle.collapsed:hover > i {
  left: 0px;
}

.carnet > button.handle.collapsed:hover {
  transform: translateX(-20px);
  background-color: #009886;
  border-color: #009886;
  color: #FFFFFF;
}
.carnet > button.handle.collapsed:hover > i {
  right: 0px;
}

.jstree .layer-opacity-slider {
  margin-left: 55px;
  width: 200px;
}

#map-toolbar {
  float: right;
  margin-left: 30px;
  margin-top: 10px;
}

#map-toolbar > .btn-toolbar {
  background-color: rgba(0, 0, 0, 0.4);
  padding: .25rem;
  border-radius: 4px;
  flex-direction: column;
}

#map-toolbar > .btn-toolbar > .btn-toolbar {
  flex-direction: column;
}

#map-toolbar .btn-toolbar:hover {
  /*background-color: rgba(255,255,255,.6);*/
}

#map-toolbar .btn-group-vertical + .btn-group-vertical,
#map-toolbar > .btn-toolbar > .btn-toolbar + .btn-toolbar
{
  margin-top: .25rem!important;
}

@media (max-height: 780px) {
  #map-toolbar > .btn-toolbar {
    flex-direction: row;
  }
  #map-toolbar > .btn-toolbar > .btn-toolbar + .btn-toolbar
  {
    margin-top: 0!important;
    margin-left: .25rem!important;
  }
}

#map-toolbar button {
  background-color: rgba(0,60,136,.5);
  border: none;
  font-size: 1.14em;
  font-weight: 700;
  color: #ffffff;
}
#map-toolbar button:hover {
  background-color: rgba(0,60,136,.7);
}

#map-toolbar button.disabled {
  background-color: rgba(136,136,136,.5);
}
#map-toolbar button.disabled:hover {
  background-color: rgba(136,136,136,.5);
}

#map-toolbar button.edit {
  background-color: rgba(0,136,0,.5);
}
#map-toolbar button.edit:hover {
  background-color: rgba(0,136,0,.7);
}

#map-toolbar button.pristine {
  background-color: rgba(136,0,0,.5);
}
#map-toolbar button.pristine:hover {
  background-color: rgba(136,0,0,.7);
}

#map-toolbar .btn {
  background-color: rgba(255,255,255,.9);
  border: none;
  font-size: 1.5em;
  font-weight: 700;
  color: #333;
  border: 1px solid #666;
  height: 38px;
  width: 38px;
}
#map-toolbar img{
  width: 100%;
}

#map-toolbar .btn:focus {
  box-shadow: none !important;
}

#map-toolbar .btn:hover {
  background-color: rgba(255,255,255,1);
}

#map-toolbar .btn.disabled {
  background-color: rgba(136,136,136,.8);
}
#map-toolbar .btn.disabled:hover {
  background-color: rgba(136,136,136,.8);
}

#map-toolbar .btn.edit {
  background-color: rgba(0,136,0,.8);
  color: #ffffff;
}
#map-toolbar .btn.edit.active, #map-toolbar .btn.edit:hover {
  background-color: rgba(0,136,0,1);
}

#map-toolbar .btn.danger {
  background-color: rgba(136,0,0,.8);
  color: #ffffff;
}
#map-toolbar .btn.danger:hover {
  background-color: rgba(136,0,0,1);
}

#map-toolbar .btn.warning {
  background-color: rgba(255,170,0,.8);
  color: #ffffff;
}
#map-toolbar .btn.warning:hover {
  background-color: rgba(255,170,0,1);
}

#map-toolbar .focus {
  box-shadow: none;
}

#map-toolbar .btn:disabled {
  pointer-events: none!important; /* disable mouse actions when button is disabled */
}

#map-toolbar button > .badge {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 9px;
}

.drag-zoom-box {
  border-style: dashed;
}

/* recherche obs ff */
.form_table .label {
  color: inherit!important;
}

.form-group {
  margin-bottom: .5rem;
}

/* select2 */

.select2-selection__placeholder{
  color: #808080 !important;
}

.select2-container .select2-selection--multiple, .select2-container .select2-selection--single{
  min-height: 30px;
  border: 1px solid #cfcfcf!important;
}
.form-group .select2-container .select2-selection--multiple .select2-search__field {
  margin: 1px 1px;
  /*width: auto!important;*/
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  padding: .25rem .5rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 1px 1px;
}
.select2-container .select2-search--inline {
  float: none!important;
}
.select2-search__field[placeholder] {
  /*width: 100%!important;*/
}
.select2-search__field[placeholder=""] {
  /*width: 0.75em!important;*/
}
.select2.input-group-text {
  text-align: left;
}

.select2-container .select2-selection--single {
  height: 36px;
}

.form-group .select2-container .select2-selection--single {
  height: 30px;
}
.form-group .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 30px;
}
.form-group .select2-container .select2-selection--single .select2-selection__arrow {
  height: 30px;
}

li.select2-selection__choice {
  max-width : 300px;
  text-overflow : ellipsis;
  overflow : hidden;
}

/* datepicker */
.datepicker {
  z-index: 9999;
}
.datepicker table tr td, .datepicker table tr th {
  padding: 0!important;
  margin-bottom: 2px!important;
  vertical-align: middle;
}

/* file input*/

.custom-file,
.custom-file-input,
.custom-file-label {
  height: calc(2rem + 0px);
}
.custom-file-label {
  padding: .275rem .75rem;
  margin-bottom: 0;
}
.custom-file-label::after {
  content: "Parcourir...";
  height: calc(calc(2rem + 0px) - 1px * 2);
  padding: .275rem .75rem;
}

/* JQUERY UI CUSTOM */

.ui-dialog .ui-dialog-buttonpane {
  margin-top: 0px !important;
}

.ui-dialog{
  z-index: 10000 !important;
}

/* Boutons actions activés */

.btn-action-active, .btn-draw-active{
  background-color: rgba(0, 177, 157, 0.9) !important;
  transition: 0.5s;
}

.btn-action:hover{
  background-color: rgba(0, 177, 157, 0.9) !important;
  transition: 0.5s;
}

.ui-tabs .ui-tabs-nav li {
  padding: 5px !important;
}

/* mode full carto */
#div-carto {
  clear: both;
  top: -2px;
  margin: 0!important;
  padding: 0!important;
  border: 0!important;
  border-radius: 0!important;
}

ul.ui-tabs-nav li > a {
  padding: .25em .5em!important;
}

fieldset.search {
  margin-bottom: .5em;
}

table > thead > tr > th {
  vertical-align: middle!important;
}

.table td, .table th {
  padding: .5rem;
}

.table-sm td, .table-sm th {
  padding: .3rem;
}

.ui-dialog .ui-dialog-titlebar-close:after {
  content: "x";
  font-size: 1rem;
  line-height: .9rem;
}

#topnav .navigation-menu > li > a:active,
#topnav .navigation-menu > li > a:focus {
  color: #f5f5f5;
}

.form_table td > label {
  margin: 0!important;
}

.card.form-toolbar {
  background: linear-gradient(3deg, #00b19d40, #f8f9fa 70%) #f8f9fa;
  border-bottom: 4px solid #00b19d;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.35)!important;
  margin-left: -10px;
  margin-right: -10px;
}

.card.form-toolbar .btn > i {
  line-height: 1rem;
  font-size: 24px;
}

.card.form-toolbar .btn > i::before {
  vertical-align: middle;
}


.input-group-append .select2-container .select2-selection--multiple, 
.input-group-append .select2-container .select2-selection--single {
  border: none!important;
}

.card-header-secondary {
  background: #ffee58!important;
  color: #495057!important;
}
.card-header-secondary a {
  color: #495057!important;
}

.card-header-ternary {
  background: #9ccc65!important;
  color: #495057!important;
}
.card-header-ternary a {
  color: #495057!important;
}

#jquery-overlay {
  z-index: 10000!important;
}

#jquery-lightbox {
  z-index: 10001!important;
}

.form-label-read {
  font-weight: normal!important;
}

.form-label-read::after {
  content: ""!important;
}

.mdi-spin:before {
  -webkit-animation: mdi-spin 1.2s infinite linear;
  animation: mdi-spin 1.2s infinite linear;
}

.notifyjs-metro-success {
  color: white;
}

#card-body-effectif table th.bg-success {
  font-weight: normal;
  color: #495057;
  background-color: #e9ecef!important;
  border-color: #dee2e6!important;
}

.pagination-top {
  margin-bottom: 8px;
}