body, html {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #f6f6f6;
  position: relative;
}

:root {
  --main-lynx-color: #009688;
  --main-lynx-color-light: #008090;
}

a {
  color: black;
}

/* mouse over link */
a:hover {
  color: hotpink;
}
button, a {
  outline: none;
}

.head-div {
  background-color: #009688;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 30px;
  color: #fff;
  font-size: 20px;
}
.btn-primary {
  color: #ffffff;
  background-color: #009688;
  border-color: #009688;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #ffffff;
  background-color: #00695c;
  border-color: #00695c;
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #00695c;
  border-color: #00695c;
}
.btn-primary:active,
.btn-primary.active,
.show > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #00695c;
  border-color: #b93e12;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.show > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.show > .dropdown-toggle.btn-primary.focus {
  color: #ffffff;
  background-color: #a23610;
  border-color: #7d2a0c;
}
.btn-primary:active,
.btn-primary.active,
.show > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #009688;
  border-color: #009688;
}
.btn-primary .badge {
  color: #009688;
  background-color: #ffffff;
}
.btn-default {
  color: #ffffff;
  background-color: #aea79f;
  border-color: #aea79f;
}
.btn-default:focus,
.btn-default.focus {
  color: #ffffff;
  background-color: #978e83;
  border-color: #6f675e;
}
.btn-default:hover {
  color: #ffffff;
  background-color: #978e83;
  border-color: #92897e;
}
.btn-default:active,
.btn-default.active,
.show > .dropdown-toggle.btn-default {
  color: #ffffff;
  background-color: #978e83;
  border-color: #92897e;
}
.btn-default:active:hover,
.btn-default.active:hover,
.show > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.show > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.show > .dropdown-toggle.btn-default.focus {
  color: #ffffff;
  background-color: #867c71;
  border-color: #6f675e;
}
.btn-default:active,
.btn-default.active,
.show > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: #aea79f;
  border-color: #aea79f;
}
.btn-default .badge {
  color: #aea79f;
  background-color: #ffffff;
}
.popover.bottom {
  margin-top: 15px;
}
.navbar-brand {
  color: #fff;
}
.navbar {
  background-color: #009688;
  border-radius: 0;
  border: 0;
}

.navbar-header {
  display: inline;
}

.navbar-nav > li > a {
  color: #fff;
}

.nav > li.disabled > a {
  color: #aea79f;
}

.navbar .navbar-nav li.active > a {
  background-color: #00776b;
}

.navbar .navbar-nav li.active > a:hover {
  background-color: #00776b;
}

.navbar .nav li > a:hover {
  background-color: #00776b;
}

.navbar .navbar-nav li > a:focus {
  background-color: #00776b;
}

.head-logo {
  margin-right: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.page-wrapper {
  background: #fff;
  box-shadow: 0 0 5px 2px #d6d6d6;
  margin: 30px;
  display: flex;
  flex-direction: column;
}

.create-cycle-page .page-wrapper {
  height: calc(100vh - 120px);
}

.page-inner {
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* or 1 0 auto */
  height: 0;
}

.page-inner.calendar-page {
  height: 100%;
}

.main_lynx_color {
  color: var(--main-lynx-color);
}

.error {
  color: red;
}

.success {
  color: blue;
}

input[type=text] {
  border: 0px;
  margin-left: 5px;
}

input[type=date] {
  border: 0px;
  margin-left: 5px;
}

.left-addon {
  margin-left: 5px;
}

.bordered {
  width: 250px;
  border: 1px solid var(--main-lynx-color);
}

.add-events-zone {
  background-color: lightblue;
  min-height: 30px !important;
  /* TODO for some reason it doesn't work without !important;
   this is not good! */
  border-radius: 5px;
  display: inline-block;
}

.common-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid #c3c3c3;
  height: 70px;
}

.common-header__img-container {
  width: 45px;
  height: 45px;
  background: #e1e1e1;
  overflow: hidden;
  margin-right: 30px;
}

.common-header__img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.common-header__text {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.common-header__text h1 {
  color: #292b2c;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.common-header__text h2 {
  color: #525252;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.common-header__text h3 {
  color: #292b2c;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.common-header__text h4 {
  color: #525252;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.climate-show {
  border: solid 1px;
  margin: 5px;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: gray;
  color: white;
}

.image-logo-class {
  border: solid 1px;
  width: 50px;
  height: 50px;
}

.btn-success {
  background-color: #009688;
  border-color: #009688;
}

.flashes {
 color: #D8000C;
 background-color: #FFBABA;
 list-style: none;
}