@charset "UTF-8";
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
}

a {
  background: 0 0;
}

a:focus {
  outline: thin dotted;
}

a:active, a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  display: none;
}

mark {
  background: #ff0;
  color: #000;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

button {
  pointer: cursor;
}

p {
  margin: 0;
  padding: 0;
}

ol, ul {
  padding: 0;
  margin: 0;
}

input, button, textarea, select, a {
  outline: none !important;
}

@font-face {
  font-family: "roboto-regular";
  src: url("../fonts/roboto-regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/roboto-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-regular.woff") format("woff"), url("../fonts/roboto-regular.ttf") format("truetype");
  /* Safari, Android, iOS */
}
@font-face {
  font-family: "roboto-light";
  src: url("../fonts/roboto-light.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/roboto-light.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-light.woff") format("woff"), url("../fonts/roboto-light.ttf") format("truetype");
  /* Safari, Android, iOS */
}
@font-face {
  font-family: "roboto-bold";
  src: url("../fonts/roboto-bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/roboto-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/robowto-bold.woff") format("woff"), url("../fonts/roboto-bold.ttf") format("truetype");
  /* Safari, Android, iOS */
}
.red {
  color: tomato;
}

.green {
  color: #20BA5B;
}

.blue {
  color: #006BAE;
}

.ecarnetResident input[type=checkbox]:not(:checked) + label span:before, .ecarnetResident input[type=checkbox]:checked + label span:before, .ecarnetResident input[type=checkbox]:not(:checked) + label:after, .ecarnetResident input[type=checkbox]:checked + label:after, .ecarnetResident input[type=checkbox]:not(:checked) + label:before, .ecarnetResident input[type=checkbox]:checked + label:before {
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -ms-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-property: all;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  -o-transition-property: all;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
}

.showSection {
  -moz-animation-name: show-section;
  -webkit-animation-name: show-section;
  -ms-animation-name: show-section;
  -o-animation-name: show-section;
  animation-name: show-section;
  -moz-animation-duration: 0.9s;
  -webkit-animation-duration: 0.9s;
  -ms-animation-duration: 0.9s;
  -o-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.showSection:before, .showSection.about img, .showSection.about article {
  -moz-animation-name: show-section-before;
  -webkit-animation-name: show-section-before;
  -ms-animation-name: show-section-before;
  -o-animation-name: show-section-before;
  animation-name: show-section-before;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.hideSection {
  -moz-animation-name: hide-section;
  -webkit-animation-name: hide-section;
  -ms-animation-name: hide-section;
  -o-animation-name: hide-section;
  animation-name: hide-section;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.hideSection:before, .hideSection.about img, .hideSection.about article {
  -moz-animation-name: hide-section-before;
  -webkit-animation-name: hide-section-before;
  -ms-animation-name: hide-section-before;
  -o-animation-name: hide-section-before;
  animation-name: hide-section-before;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.opening {
  -moz-animation-name: opening-menu;
  -webkit-animation-name: opening-menu;
  -ms-animation-name: opening-menu;
  -o-animation-name: opening-menu;
  animation-name: opening-menu;
  -moz-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  -ms-animation-duration: 0.4s;
  -o-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.closing {
  -moz-animation-name: closing-menu;
  -webkit-animation-name: closing-menu;
  -ms-animation-name: closing-menu;
  -o-animation-name: closing-menu;
  animation-name: closing-menu;
  -moz-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  -ms-animation-duration: 0.4s;
  -o-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-moz-keyframes show-section {
  0% {
    top: -100%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-webkit-keyframes show-section {
  0% {
    top: -100%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-ms-keyframes show-section {
  0% {
    top: -100%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-o-keyframes show-section {
  0% {
    top: -100%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@keyframes show-section {
  0% {
    top: -100%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-moz-keyframes show-section-before {
  0% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@-webkit-keyframes show-section-before {
  0% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@-ms-keyframes show-section-before {
  0% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@-o-keyframes show-section-before {
  0% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@keyframes show-section-before {
  0% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@-moz-keyframes hide-section {
  0% {
    top: 0%;
    opacity: 1;
  }
  50% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-webkit-keyframes hide-section {
  0% {
    top: 0%;
    opacity: 1;
  }
  50% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-ms-keyframes hide-section {
  0% {
    top: 0%;
    opacity: 1;
  }
  50% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-o-keyframes hide-section {
  0% {
    top: 0%;
    opacity: 1;
  }
  50% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@keyframes hide-section {
  0% {
    top: 0%;
    opacity: 1;
  }
  50% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-moz-keyframes hide-section-before {
  0% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@-webkit-keyframes hide-section-before {
  0% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@-ms-keyframes hide-section-before {
  0% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@-o-keyframes hide-section-before {
  0% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes hide-section-before {
  0% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@-moz-keyframes opening-menu {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-webkit-keyframes opening-menu {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-ms-keyframes opening-menu {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-o-keyframes opening-menu {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@keyframes opening-menu {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }
}
@-moz-keyframes closing-menu {
  0% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}
@-webkit-keyframes closing-menu {
  0% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}
@-ms-keyframes closing-menu {
  0% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}
@-o-keyframes closing-menu {
  0% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}
@keyframes closing-menu {
  0% {
    top: 0%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}
#sidebar.closed {
  -moz-animation-name: closedSidebar;
  -webkit-animation-name: closedSidebar;
  -ms-animation-name: closedSidebar;
  -o-animation-name: closedSidebar;
  animation-name: closedSidebar;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes closedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -260px;
  }
}
@-webkit-keyframes closedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -260px;
  }
}
@-ms-keyframes closedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -260px;
  }
}
@-o-keyframes closedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -260px;
  }
}
@keyframes closedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -260px;
  }
}
.condensed #sidebar.closed {
  -moz-animation-name: closedCondensedSidebar;
  -webkit-animation-name: closedCondensedSidebar;
  -ms-animation-name: closedCondensedSidebar;
  -o-animation-name: closedCondensedSidebar;
  animation-name: closedCondensedSidebar;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes closedCondensedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@-webkit-keyframes closedCondensedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@-ms-keyframes closedCondensedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@-o-keyframes closedCondensedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@keyframes closedCondensedSidebar {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
#sidebar.open {
  -moz-animation-name: openSidebar;
  -webkit-animation-name: openSidebar;
  -ms-animation-name: openSidebar;
  -o-animation-name: openSidebar;
  animation-name: openSidebar;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes openSidebar {
  0% {
    left: -260px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes openSidebar {
  0% {
    left: -260px;
  }
  100% {
    left: 0;
  }
}
@-ms-keyframes openSidebar {
  0% {
    left: -260px;
  }
  100% {
    left: 0;
  }
}
@-o-keyframes openSidebar {
  0% {
    left: -260px;
  }
  100% {
    left: 0;
  }
}
@keyframes openSidebar {
  0% {
    left: -260px;
  }
  100% {
    left: 0;
  }
}
main.extended {
  -moz-animation-name: extendMain;
  -webkit-animation-name: extendMain;
  -ms-animation-name: extendMain;
  -o-animation-name: extendMain;
  animation-name: extendMain;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes extendMain {
  0% {
    padding-left: 280px;
  }
  100% {
    padding-left: 20px;
  }
}
@-webkit-keyframes extendMain {
  0% {
    padding-left: 280px;
  }
  100% {
    padding-left: 20px;
  }
}
@-ms-keyframes extendMain {
  0% {
    padding-left: 280px;
  }
  100% {
    padding-left: 20px;
  }
}
@-o-keyframes extendMain {
  0% {
    padding-left: 280px;
  }
  100% {
    padding-left: 20px;
  }
}
@keyframes extendMain {
  0% {
    padding-left: 280px;
  }
  100% {
    padding-left: 20px;
  }
}
main.minimised {
  -moz-animation-name: minimiseMain;
  -webkit-animation-name: minimiseMain;
  -ms-animation-name: minimiseMain;
  -o-animation-name: minimiseMain;
  animation-name: minimiseMain;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes minimiseMain {
  0% {
    padding-left: 20px;
  }
  100% {
    padding-left: 280px;
  }
}
@-webkit-keyframes minimiseMain {
  0% {
    padding-left: 20px;
  }
  100% {
    padding-left: 280px;
  }
}
@-ms-keyframes minimiseMain {
  0% {
    padding-left: 20px;
  }
  100% {
    padding-left: 280px;
  }
}
@-o-keyframes minimiseMain {
  0% {
    padding-left: 20px;
  }
  100% {
    padding-left: 280px;
  }
}
@keyframes minimiseMain {
  0% {
    padding-left: 20px;
  }
  100% {
    padding-left: 280px;
  }
}
#sidebar.closed #open-close-sidebar a:before {
  -moz-animation-name: turnButton;
  -webkit-animation-name: turnButton;
  -ms-animation-name: turnButton;
  -o-animation-name: turnButton;
  animation-name: turnButton;
  -moz-animation-duration: 600ms;
  -webkit-animation-duration: 600ms;
  -ms-animation-duration: 600ms;
  -o-animation-duration: 600ms;
  animation-duration: 600ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes turnButton {
  0% {
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 5px;
  }
  100% {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 1px;
  }
}
@-webkit-keyframes turnButton {
  0% {
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 5px;
  }
  100% {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 1px;
  }
}
@-ms-keyframes turnButton {
  0% {
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 5px;
  }
  100% {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 1px;
  }
}
@-o-keyframes turnButton {
  0% {
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 5px;
  }
  100% {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 1px;
  }
}
@keyframes turnButton {
  0% {
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 5px;
  }
  100% {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 1px;
  }
}
#login form {
  opacity: 0;
  animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -webkit-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  -o-animation-delay: 300ms;
  -moz-animation-name: showLogin;
  -webkit-animation-name: showLogin;
  -ms-animation-name: showLogin;
  -o-animation-name: showLogin;
  animation-name: showLogin;
  -moz-animation-duration: 800ms;
  -webkit-animation-duration: 800ms;
  -ms-animation-duration: 800ms;
  -o-animation-duration: 800ms;
  animation-duration: 800ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes showLogin {
  0% {
    opacity: 0;
    margin-top: -320px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@-webkit-keyframes showLogin {
  0% {
    opacity: 0;
    margin-top: -320px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@-ms-keyframes showLogin {
  0% {
    opacity: 0;
    margin-top: -320px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@-o-keyframes showLogin {
  0% {
    opacity: 0;
    margin-top: -320px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes showLogin {
  0% {
    opacity: 0;
    margin-top: -320px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
#speaker p:before {
  -moz-animation-duration: 2000ms;
  -webkit-animation-duration: 2000ms;
  -ms-animation-duration: 2000ms;
  -o-animation-duration: 2000ms;
  animation-duration: 2000ms;
  -moz-animation-name: showAlert;
  -webkit-animation-name: showAlert;
  -ms-animation-name: showAlert;
  -o-animation-name: showAlert;
  animation-name: showAlert;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes showAlert {
  0%, 100% {
    background-position: bottom left;
  }
  50% {
    background-position: top left;
  }
}
@-webkit-keyframes showAlert {
  0%, 100% {
    background-position: bottom left;
  }
  50% {
    background-position: top left;
  }
}
@-ms-keyframes showAlert {
  0%, 100% {
    background-position: bottom left;
  }
  50% {
    background-position: top left;
  }
}
@-o-keyframes showAlert {
  0%, 100% {
    background-position: bottom left;
  }
  50% {
    background-position: top left;
  }
}
@keyframes showAlert {
  0%, 100% {
    background-position: bottom left;
  }
  50% {
    background-position: top left;
  }
}
.pophover {
  -moz-animation-name: showPopHover;
  -webkit-animation-name: showPopHover;
  -ms-animation-name: showPopHover;
  -o-animation-name: showPopHover;
  animation-name: showPopHover;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes showPopHover {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes showPopHover {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes showPopHover {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes showPopHover {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showPopHover {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.speaker {
  -moz-animation-name: showSpeaker;
  -webkit-animation-name: showSpeaker;
  -ms-animation-name: showSpeaker;
  -o-animation-name: showSpeaker;
  animation-name: showSpeaker;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes showSpeaker {
  0% {
    opacity: 0;
    right: 20px;
  }
  100% {
    opacity: 1;
    right: 30px;
  }
}
@-webkit-keyframes showSpeaker {
  0% {
    opacity: 0;
    right: 20px;
  }
  100% {
    opacity: 1;
    right: 30px;
  }
}
@-ms-keyframes showSpeaker {
  0% {
    opacity: 0;
    right: 20px;
  }
  100% {
    opacity: 1;
    right: 30px;
  }
}
@-o-keyframes showSpeaker {
  0% {
    opacity: 0;
    right: 20px;
  }
  100% {
    opacity: 1;
    right: 30px;
  }
}
@keyframes showSpeaker {
  0% {
    opacity: 0;
    right: 20px;
  }
  100% {
    opacity: 1;
    right: 30px;
  }
}
.hide {
  -moz-animation-name: hideSpeaker;
  -webkit-animation-name: hideSpeaker;
  -ms-animation-name: hideSpeaker;
  -o-animation-name: hideSpeaker;
  animation-name: hideSpeaker;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes hideSpeaker {
  0% {
    opacity: 1;
    right: 30px;
  }
  100% {
    opacity: 0;
    right: 20px;
  }
}
@-webkit-keyframes hideSpeaker {
  0% {
    opacity: 1;
    right: 30px;
  }
  100% {
    opacity: 0;
    right: 20px;
  }
}
@-ms-keyframes hideSpeaker {
  0% {
    opacity: 1;
    right: 30px;
  }
  100% {
    opacity: 0;
    right: 20px;
  }
}
@-o-keyframes hideSpeaker {
  0% {
    opacity: 1;
    right: 30px;
  }
  100% {
    opacity: 0;
    right: 20px;
  }
}
@keyframes hideSpeaker {
  0% {
    opacity: 1;
    right: 30px;
  }
  100% {
    opacity: 0;
    right: 20px;
  }
}
.message {
  -moz-animation-name: showError;
  -webkit-animation-name: showError;
  -ms-animation-name: showError;
  -o-animation-name: showError;
  animation-name: showError;
  -moz-animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  -ms-animation-duration: 400ms;
  -o-animation-duration: 400ms;
  animation-duration: 400ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes showError {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes showError {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes showError {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes showError {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showError {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.message div {
  animation-delay: 500ms;
  -moz-animation-delay: 500ms;
  -webkit-animation-delay: 500ms;
  -ms-animation-delay: 500ms;
  -o-animation-delay: 500ms;
  -moz-animation-name: showMessage;
  -webkit-animation-name: showMessage;
  -ms-animation-name: showMessage;
  -o-animation-name: showMessage;
  animation-name: showMessage;
  -moz-animation-duration: 200ms;
  -webkit-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-moz-keyframes showMessage {
  0% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 0;
    top: -300px;
  }
  10% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1;
    top: -300px;
  }
  100% {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
    top: 200px;
  }
}
@-webkit-keyframes showMessage {
  0% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 0;
    top: -300px;
  }
  10% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1;
    top: -300px;
  }
  100% {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
    top: 200px;
  }
}
@-ms-keyframes showMessage {
  0% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 0;
    top: -300px;
  }
  10% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1;
    top: -300px;
  }
  100% {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
    top: 200px;
  }
}
@-o-keyframes showMessage {
  0% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 0;
    top: -300px;
  }
  10% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1;
    top: -300px;
  }
  100% {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
    top: 200px;
  }
}
@keyframes showMessage {
  0% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 0;
    top: -300px;
  }
  10% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1;
    top: -300px;
  }
  100% {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
    top: 200px;
  }
}
.detailsResident .loading {
  animation-duration: 800ms;
  animation-name: searchTool;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes searchTool {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.surveyDetails.show {
  animation-duration: 450ms;
  animation-name: showSurveyDetails;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

@keyframes showSurveyDetails {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.popupTimetable {
  -moz-animation-duration: 750ms;
  -webkit-animation-duration: 750ms;
  -ms-animation-duration: 750ms;
  -o-animation-duration: 750ms;
  animation-duration: 750ms;
  -moz-animation-name: showPop;
  -webkit-animation-name: showPop;
  -ms-animation-name: showPop;
  -o-animation-name: showPop;
  animation-name: showPop;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

@-moz-keyframes showPop {
  0% {
    left: -200px;
    opacity: 0;
    transform: perspective(10em) rotateY(-90deg);
  }
  100% {
    right: 0;
    opacity: 1;
    transform: perspective(900em) rotateY(0deg);
  }
}
@-webkit-keyframes showPop {
  0% {
    left: -200px;
    opacity: 0;
    transform: perspective(10em) rotateY(-90deg);
  }
  100% {
    right: 0;
    opacity: 1;
    transform: perspective(900em) rotateY(0deg);
  }
}
@-ms-keyframes showPop {
  0% {
    left: -200px;
    opacity: 0;
    transform: perspective(10em) rotateY(-90deg);
  }
  100% {
    right: 0;
    opacity: 1;
    transform: perspective(900em) rotateY(0deg);
  }
}
@-o-keyframes showPop {
  0% {
    left: -200px;
    opacity: 0;
    transform: perspective(10em) rotateY(-90deg);
  }
  100% {
    right: 0;
    opacity: 1;
    transform: perspective(900em) rotateY(0deg);
  }
}
@keyframes showPop {
  0% {
    left: -200px;
    opacity: 0;
    transform: perspective(10em) rotateY(-90deg);
  }
  100% {
    right: 0;
    opacity: 1;
    transform: perspective(900em) rotateY(0deg);
  }
}
#planningList th:last-child, #planningList td:last-child {
  text-align: right;
}

.pophover.delete main {
  text-align: center;
}

body {
  font-family: "roboto-regular", sans-serif;
  background-color: #F8F8F8;
  padding-bottom: 80px;
}

.progress, .progress span {
  display: block;
  width: 100%;
  height: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #E7E7E7;
}
.progress span, .progress span span {
  background-color: #20BA5B;
}

#login main {
  padding: 0;
}
#login main h1 {
  padding: 0;
  border: none;
  margin: 0 0 30px 0;
}
#login main form {
  margin: 0 auto;
  -moz-border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
  border: 1px solid #E7E7E7;
  border-width: 0 1px 1px 1px;
  width: 320px;
  padding: 30px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
}
#login main button {
  width: 260px;
  text-align: center !important;
}
#login main input {
  width: 100%;
  border: 2px solid #006BAE;
  padding: 15px;
  color: #006BAE;
  margin-right: 0px !important;
}
#login main input + input {
  margin-top: 20px;
}
#login main label {
  display: none;
}

#login main .login-image-left {
  position:fixed;
  bottom:0px;
  max-width:50%;
}
#login main .login-image-right {
  position:fixed;
  bottom:60px;
  right:5%;
  max-width:50%;
}

@media screen and (max-width: 1024px)
{
  #login main {
    background-color:#009C97 ;
  }
  #login main .login-image-left {
    display: none;
  }

  #login main .login-image-right {
    position: relative;
    text-align: center;
    padding-top:50px;
    margin: auto;
    right:0%;
    max-width:60%;
    bottom:0px;
  }
}

#sidebar {
  position: fixed;
  top: 0;
  z-index: 3;
  padding: 0 30px 30px;
  width: 280px;
  height: 100%;
  color: #FFFFFF;
  background-color: #004c7b;
  overflow-x: hidden;
  overflow-y: auto;
}
#sidebar::-webkit-scrollbar {
  width: 1em;
}
#sidebar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(35, 31, 32, 0.3);
}
#sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(35, 31, 32, 0.4);
}
#sidebar header h1 a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 14px 30px 20px 30px;
  background-color: #FFFFFF;
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -ms-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-property: all;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  -o-transition-property: all;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
}
#sidebar header h1 a:before {
  opacity: 0;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 5px);
  top: -webkit-calc(50% - 5px);
  top: -moz-calc(50% - 5px);
  left: 20px;
  display: block;
  border: 0 solid #004c7b;
  border-width: 0 0 2px 2px;
  content: "";
  width: 10px;
  height: 10px;
}
#sidebar header h1 a:hover {
  padding-left: 50px;
  background-color: #E7E7E7;
}
#sidebar header h1 a:hover:before {
  opacity: 0.9;
  left: 30px;
}
#sidebar header h1 a svg {
  position: relative;
  top: 5px;
  padding-right: 10%;
}
#sidebar #menu {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
}
#sidebar #menu li {
  z-index: 1;
  position: relative;
  border-top: 1px solid #006BAE;
}
#sidebar ol {
  list-style: none;
  font-size: 1.15em;
  /*  li {
      span {
        z-index: 4;
        position: absolute;
        right: $d3;
        display: block;
        @include border-radius(2px);
        @include roboto-light;
        text-align: center;
        font-size: .7em;
        color: $yellow-lighten;
        padding: 1px 6px;
        background-color: $red;
      }
    }
      */
}
#sidebar ol a {
  display: block;
  padding: 12px 30px;
  position: relative;
  text-decoration: none;
  color: #20BA5B;
}
#sidebar ol a:hover {
  color: #FFFFFF;
  background-color: #003657;
}
#sidebar ol a:hover:after {
  border: none;
}
#sidebar ol a.active {
  border: 1px solid #20BA5B;
  border-width: 0 0 0 4px;
  padding: 12px 26px;
  color: #004c7b;
  background-color: #F8F8F8;
}
#sidebar ol .button-dropdown ul {
  display: none;
  font-family: "roboto-light", sans-serif;
  font-size: 0.9em;
  background-color: rgba(0, 107, 174, 0.4);
}
#sidebar ol .button-dropdown ul a {
  padding: 12px 45px;
  color: #FFFFFF;
}
#sidebar ol .button-dropdown ul a.active {
  padding: 12px 45px;
  color: #006BAE;
}
#sidebar ol .button-dropdown > .active {
  padding: 12px 30px;
  color: #FFFFFF;
  background-color: #003657;
}
#sidebar ol .dropdownActive {
  padding: 12px 30px;
  color: #FFFFFF;
  background-color: #003657;
}
#sidebar ol li.notifications {
  background-color: tomato;
}
#sidebar ol li.notifications a {
  color: white;
}
#sidebar ol li.notifications a span {
  background-color: #FFFFFF;
  padding: 1% 3%;
  color: tomato;
  font-size: 1em;
  border-radius: 10%;
  float: right;
  display: inline-block;
}
#sidebar ol li.notifications a:hover {
  background-color: #ff3814;
}
#sidebar span.organization-name {
  position: absolute;
  left: 0;
  bottom: 3%;
  width: 90%;
  z-index: 300;
  color: #E7E7E7;
  opacity: 0.8;
  text-align: center;
}
#sidebar footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #006BAE;
}
#sidebar footer figure {
  line-height: 0.75em;
}
#sidebar footer figure img {
  vertical-align: middle;
  display: inline-block;
  margin-right: 15px;
  border: 2px solid #003657;
  width: 30px;
  height: 30px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}
#sidebar footer figure figcaption {
  position: relative;
  display: inline-block;
}
#sidebar footer figure figcaption a {
  color: inherit;
  text-decoration: none;
}
#sidebar footer figure figcaption a:hover {
  text-decoration: underline;
}
#sidebar footer ul {
  list-style: none;
  width: 100%;
  position: absolute;
  top: -30px;
  left: 0;
  background-color: red;
}
#sidebar footer ul li {
  font-size: 0.5;
}
#sidebar footer ul a {
  padding: 10px;
}
#sidebar footer #open-close-sidebar {
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  height: 48px;
  background-color: #004c7b;
}
#sidebar footer #open-close-sidebar a {
  position: absolute;
  right: 0;
  top: 10px;
  display: block;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  width: 16px;
  height: 28px;
  background-color: #F8F8F8;
  cursor: pointer;
}
#sidebar footer #open-close-sidebar a:before {
  position: absolute;
  left: 5px;
  top: 9px;
  display: block;
  border: 2px solid rgba(35, 31, 32, 0.3);
  border-width: 2px 2px 0 0;
  content: "";
  width: 8px;
  height: 8px;
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#sidebar footer #open-close-sidebar a:hover:before {
  border-color: #003657;
}

span.pulse {
  background-color: #FFFFFF;
  padding: 1% 3%;
  color: tomato;
  font-size: 1em;
  border-radius: 10%;
  float: right;
  display: inline-block;
}

html {
  height: 100%;
}

body {
  padding-bottom: 10px;
  height: 100%;
  overflow-x: hidden;
  font-size: 0.9em !important;
}

a {
  color: #004c7b;
}
a:hover {
  color: #E2C08D;
}

article {
  border-bottom: 0px solid transparent !important;
}

main {
  padding-left: 280px;
  height: 100%;
}
main header {
  border: 1px solid #E7E7E7;
  border-width: 0 0 1px 0;
  padding: 0 30px;
  height: 65px;
  background-color: #004c7b;
}
main header h1 {
  color: #FFFFFF;
}
main header button {
  top: 15%;
}
main header button.alarm {
  position: absolute;
  right: 45%;
  padding: 1%;
  background-color: tomato;
  color: #FFFFFF;
  width: 13%;
  border: 1px solid #ff3814;
}
main header button.alarm span {
  display: inline-block;
  color: tomato;
  background-color: #FFFFFF;
  border-radius: 10%;
  padding: 0.2% 5%;
  font-size: 0.9em;
  margin-left: 11%;
}
main header button.alarm:hover {
  background-color: #ff4d2e;
}
main header form {
  margin: 0;
  width: 60%;
  float: left;
}
main header form input {
  margin-top: 1.3%;
  background-color: #FFFFFF;
  width: 100%;
}
main header form nav {
  visibility: visible;
}
main header form nav ul {
  width: 34.5%;
  margin: 0;
  position: absolute;
  list-style-type: none;
}
main header form nav ul li {
  margin-top: 0;
}
main header form nav ul li a {
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  color: #686868;
  background-color: rgba(255, 255, 255, 0.95);
  width: 100%;
  padding: 3%;
  margin: 0;
  border: 1px solid #E7E7E7;
  cursor: pointer;
  display: block;
}
main header form nav ul li a:before {
  opacity: 0;
  position: relative;
  left: -1%;
  content: "";
  width: 7px;
  height: 7px;
  border: 2px solid #006BAE;
  border-width: 0 2px 2px 0;
  display: inline-block;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  -webkit-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}
main header form nav ul li a:after {
  opacity: 0;
  position: relative;
  left: 7%;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/search.svg) no-repeat;
  background-size: cover;
  float: right;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
main header form nav ul li a:hover {
  background-color: #F8F8F8;
  padding-left: 5%;
  color: #006BAE;
}
main header form nav ul li a:hover:before {
  opacity: 1;
  margin-right: 2%;
  left: 0;
}
main header form nav ul li a:hover:after {
  opacity: 1;
  left: 0;
}
main header span.header-items {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
main header span.header-items .admin-photo {
  width: 25px;
  height: 25px;
  background: url(../images/placeholder.png) no-repeat top left;
  margin-left: 5%;
  margin-right: 4%;
}
main header span.header-items .admin-photo:hover {
  background-position: bottom left;
}
main header span.header-items span.name-admin {
  color: white;
  text-align: left;
}
main header ~ div:first-of-type {
  height: 93%;
}
main div header:nth-child(1) {
  background-color: transparent;
  border-bottom: transparent;
}
main div header:nth-child(1) h1 {
  color: #004c7b;
}
main section {
  height: 93%;
  margin-top: 0;
  padding: 0 30px 30px 30px;
  font-size: 0.9em;
  color: #3A3B3B;
  line-height: 2em;
}
main section form textarea {
  min-height: 100px;
  max-height: 300px;
}
main h1 {
  display: inline-block;
  margin-bottom: 6px;
  border: 1px solid #20BA5B;
  border-width: 0 0 2px 0;
  padding: 15px 0 10px;
  font-size: 1.3em;
  color: #004c7b;
}
main h1 + h1 {
  margin-left: 30px;
}
main h2 {
  position: relative;
  margin: 30px 0;
  padding-bottom: 10px;
  font-size: 1.1em;
  color: #004c7b;
  border: 1px solid #E7E7E7;
  border-width: 0 0 1px 0;
}
main h2 a {
  position: absolute;
  right: 0;
}
main h2 .badge {
  margin-left: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 0 5px;
  font-family: "roboto-light", sans-serif;
  color: #FFFFFF;
  background-color: tomato;
}
main section > p:first-child {
  margin-top: 30px;
}
main p + p {
  margin-top: 10px;
}
main ol, main ul {
  margin: 30px;
}
main ol li + li, main ul li + li {
  margin-top: 10px;
}
main .alert {
  position: relative;
  margin: 30px 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 20px 50px;
}
main .alert:before {
  position: absolute;
  top: 0;
  left: 0;
  -moz-border-radius: 2px 0 0 2px;
  -webkit-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px;
  width: 30px;
  height: 100%;
  content: "";
  display: block;
}
main .alert strong {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  padding: 0 3px;
  color: tomato;
  background-color: rgba(255, 255, 255, 0.4);
}
main .alert.blue {
  color: #003657;
  background-color: rgba(0, 107, 174, 0.2);
}
main .alert.blue:before {
  background: #006BAE url(../images/alert.svg) no-repeat center center;
}
main .alert.red {
  color: #7a1300;
  background-color: rgba(255, 99, 71, 0.2);
}
main .alert.red:before {
  background: tomato url(../images/alert.svg) no-repeat center center;
}
main .alert.green {
  color: #137037;
  background-color: rgba(32, 186, 91, 0.2);
}
main .alert.green:before {
  background: #20BA5B url(../images/alert.svg) no-repeat center center;
}
main .topMenu {
  margin: 30px 30px 0 0;
  overflow: hidden;
}
main .topMenu ol {
  float: left;
  margin: 0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #DDDDDD;
}
main .topMenu li {
  margin: 0;
  float: left;
  list-style: none;
}
main .topMenu li + li a {
  border: 1px solid #DDDDDD;
  border-width: 0 0 0 1px;
}
main .topMenu a {
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -ms-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-property: all;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  -o-transition-property: all;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  display: inline-block;
  padding: 10px 20px;
  color: rgba(35, 31, 32, 0.7);
  text-decoration: none;
}
main .topMenu a:hover {
  color: #231F20;
  background-color: #e5e5e5;
}
main .topMenu a.active {
  color: #006BAE;
}
main .topMenu p {
  padding: 5px 10px;
  color: #004c7b;
}
main .topMenu.tabMode {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  margin: 0;
}
main .topMenu.tabMode ol {
  border-width: 0 0 0 1px;
}
main .topMenu.tabMode a {
  padding: 32px 30px 24px;
}
main .topMenu.tabMode .active {
  background-color: #FFFFFF;
}
main .pagination {
  text-align: center;
}
main .pagination ol {
  margin: 0;
  list-style: none;
}
main .pagination li {
  display: inline-block;
}
main .pagination a {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 6px 10px;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #006BAE;
}
main .pagination a:hover {
  color: #825b21;
  background-color: #E2C08D;
}
main .pagination a.active {
  cursor: default;
  opacity: 0.5;
  color: #FFFFFF;
  background-color: #006BAE;
}
main footer {
  position: relative;
}
main footer p {
  position: absolute;
  padding: 20px 0 0 20px;
  border: 1px solid #E7E7E7;
  border-width: 1px 0 0 0;
  right: 30px;
  font-size: 0.8em;
  text-align: right;
  color: #CCCCCC;
}
main .go-down {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 30px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #E2C08D;
}
main .go-down:before {
  display: block;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 2px solid #FFFFFF;
  border-width: 0 2px 2px 0;
  content: "";
  margin: 4px 10px 14px 10px;
  width: 14px;
  height: 14px;
}
main p:last-child {
  text-align: right;
}
main p:last-child button {
  margin-right: 15px;
}
main form {
  width: 100%;
}

main .topMenu {
  margin: 30px 0 0 0;
}
main .topMenu ol {
  float: initial;
  overflow: hidden;
}
main .topMenu .searchTab {
  width: 50%;
}
main .topMenu input[type=search] {
  width: 100%;
  border-radius: 0;
  border-width: 0 0 0 1px;
  padding: 15px 10px;
  font-size: inherit;
  color: #006BAE;
  padding-left: 40px;
  background: url(../images/search.svg) no-repeat 15px center;
}
main .topMenu input[type=search]:focus {
  border-color: #DDDDDD;
  background-color: none;
  box-shadow: none;
}

.message {
  opacity: 0;
  z-index: 4;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 76, 123, 0.3);
}
.message div {
  opacity: 0;
  position: absolute;
  top: -300px;
  margin: 0 20px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: -webkit-calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
  padding: 80px 60px;
  color: #EEF0DA;
  background: #006BAE url(../images/speaker-alert.png) repeat-y left top;
  background-size: 15px;
}
.message h1 {
  font-size: 1.4em;
}
.message h2 {
  margin-bottom: 20px;
  font-size: 1.4em;
}

section header {
  background-color: transparent;
}
section header h1 {
  color: #004c7b;
}
section header button {
  float: right;
}

.callSpeaker {
  width: 25px;
  height: 25px;
  background: url(../images/speaker.svg) no-repeat top left;
  background-size: cover;
}
.callSpeaker:hover {
  background-position: bottom left;
}

.speaker p {
  display: inline-block;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-right: 22px;
  border: 1px solid #CCCCCC;
  padding: 15px 15px 14px 30px;
  color: #231F20;
  background-color: #E7E7E7;
  box-shadow: 0 2px 10px 0 rgba(35, 31, 32, 0.2);
  -webkit-box-shadow: 0 2px 10px 0 rgba(35, 31, 32, 0.2);
  -moz-box-shadow: 0 2px 10px 0 rgba(35, 31, 32, 0.2);
  -o-box-shadow: 0 2px 10px 0 rgba(35, 31, 32, 0.2);
  -ms-box-shadow: 0 2px 10px 0 rgba(35, 31, 32, 0.2);
}
.speaker p:before {
  position: absolute;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  top: 20px;
  margin-left: -20px;
  display: block;
  content: "";
  width: 10px;
  /*       height: -webkit-calc(100% - 2px);
        height: -moz-calc(100% - 2px); */
  height: 40px;
  background: url(../images/speaker-alert.png) repeat-y;
  background-position: bottom left;
  background-size: 10px 11px;
}
.speaker p:after {
  display: none !important;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 35px !important;
  right: 12.2%;
  top: -webkit-calc(50% - 6px);
  top: -moz-calc(50% - 6px);
  top: calc(50% - 6px);
  display: block;
  -moz-border-radius: 0 3px 0 0;
  -webkit-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
  border: 1px solid #CCCCCC;
  border-width: 1px 1px 0 0;
  height: 10px;
  width: 10px;
  content: "";
  background-color: #E7E7E7;
}
.speaker.confirmation p {
  border-color: #1ca450;
  color: #0a371b;
  background-color: #20BA5B;
}
.speaker.confirmation p:after {
  display: none !important;
  border-color: #1ca450;
  background-color: #20BA5B;
}
.speaker.error p {
  border-color: #ff4d2e;
  color: #FFFFFF;
  background-color: tomato;
}
.speaker.error p:after {
  display: none !important;
  top: 35%;
  border-color: #ff4d2e;
  background-color: tomato;
}
.speaker.info p {
  border-color: #d8aa64;
  color: #825b21;
  background-color: #E2C08D;
}
.speaker.info p:after {
  display: none !important;
  border-color: #d8aa64;
  background-color: #E2C08D;
}

.wizard {
  margin-top: 30px;
  font-size: 0.9em;
  text-align: center;
}
.wizard ol {
  margin: 0;
}
.wizard li {
  position: relative;
  list-style: none;
  display: inline-block;
}
.wizard li:first-child a:after, .wizard li:last-child a:after {
  z-index: 1;
  position: absolute;
  top: 0;
  display: block;
  content: "";
  width: 50%;
  height: 4px;
}
.wizard li:first-child a:after {
  left: 0;
}
.wizard li:last-child a:after {
  right: 0;
}
.wizard a {
  display: block;
  padding: 20px 30px 0 30px;
  border: 0 solid #E7E7E7;
  border-width: 4px 0 0 0;
  text-decoration: none;
  color: #E7E7E7;
}
.wizard a:before {
  z-index: 2;
  position: absolute;
  top: -8px;
  left: -webkit-calc(50% - 7px);
  left: -moz-calc(50% - 7px);
  left: calc(50% - 7px);
  display: block;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  content: "";
  color: #FFFFFF;
  width: 20px;
  height: 20px;
  line-height: 1.4;
  vertical-align: center;
  background-color: #E7E7E7;
}
.wizard .active a {
  cursor: default;
  border-color: #20BA5B;
  color: #20BA5B;
  text-decoration: none;
}
.wizard .active a:before {
  color: #20BA5B;
  background-color: #20BA5B;
}
.wizard .done a {
  border-color: #20BA5B;
  color: #20BA5B;
  text-decoration: underline;
}
.wizard .done a:before {
  color: #20BA5B;
  background-color: #20BA5B;
}
.wizard .done a:hover {
  color: #004c7b;
  border-color: #004c7b;
}
.wizard .done a:hover:before {
  background-color: #004c7b;
}
.wizard.planningAdd h3 {
  display: block;
  margin: 25px 0 15px 0;
  padding: 5px 10px;
  font-size: 1.2em;
  font-weight: bold;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-align: left;
  width: 30% !important;
  background-color: #006BAE;
  color: #FFFFFF;
}
.wizard.planningAdd h3 span.labelNumber {
  color: #FFFFFF;
  display: inline-block !important;
}
.wizard.planningAdd ol {
  width: 100%;
  text-align: left;
}
.wizard.planningAdd ol li {
  width: 33%;
}
.wizard.planningAdd label {
  width: 150px;
}
.wizard.planningAdd input {
  width: -webkit-calc(100% - 224px) !important;
  width: -moz-calc(100% - 224px) !important;
  width: calc(100% - 224px) !important;
}
.wizard.planningAdd .one-area li {
  margin: 1% 0;
  width: 100%;
}
.wizard.planningAdd .one-area input, .wizard.planningAdd .one-area textarea {
  width: 75%;
  max-width: 75%;
  min-width: 75%;
}
.wizard.planningAdd .one-area input[type=checkbox] {
  width: auto !important;
  max-width: auto !important;
  min-width: auto !important;
}
.wizard.planningAdd .three-area li {
  width: 100%;
}
.wizard.planningAdd .three-area label {
  width: 100px;
}
.wizard.planningAdd .three-area .mandatory input, .wizard.planningAdd .three-area .mandatory select {
  margin-right: 0px;
}
.wizard.planningAdd .three-area .mandatory input ~ .required, .wizard.planningAdd .three-area .mandatory select ~ .required {
  margin-left: 15px;
}
.wizard.planningAdd .three-area .mandatory input.small, .wizard.planningAdd .three-area .mandatory select.small {
  width: 18% !important;
  min-width: 18% !important;
  max-width: 18% !important;
}
.wizard.planningAdd .three-area .mandatory label {
  margin-left: 30px;
}
.wizard.planningAdd .three-area .mandatory label:first-child {
  margin-left: 0;
}
.wizard.planningAdd .three-area .mandatory input[type=checkbox] ~ label {
  width: 50px;
}
.wizard.planningAdd #cb {
  display: none;
}
.wizard.planningAdd #cb:checked + #cb-label #cb-help {
  background: #20BA5B;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.wizard.planningAdd #cb-label {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.wizard.planningAdd #cb-help {
  box-shadow: 2px 2px 8px transparent;
  width: 20px;
  height: 20px;
  background: #E7E7E7;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #006BAE;
  display: inline-block;
  margin: 0;
  padding: 0;
  float: right;
  position: relative;
  left: 45px;
}
.wizard.planningAdd .ui {
  display: block !important;
}

ol.wizard {
  text-align: left;
}
ol.wizard li {
  width: 33%;
}
ol.wizard li select {
  width: 35% !important;
}
ol.wizard li input, ol.wizard li label {
  display: inline-block;
}
ol.wizard.one-area li {
  margin: 1% 0;
  width: 100%;
  display: block;
}
ol.wizard.one-area input, ol.wizard.one-area textarea {
  width: 45%;
  max-width: 45%;
  min-width: 45%;
}
ol.wizard.one-area input[type=checkbox] {
  width: auto !important;
  max-width: auto !important;
  min-width: auto !important;
}
ol.wizard.planningAdd h3 {
  display: block;
  margin: 35px 0 15px 0;
  text-align: left;
  width: 100%;
}
ol.wizard.planningAdd h4 {
  margin-top: 15px;
  margin-left: 30px;
  font-size: 1.2em;
  font-weight: bold;
  color: #006BAE;
  border-bottom: 1px solid #E7E7E7;
}
ol.wizard.planningAdd ol {
  width: 100%;
  text-align: left;
}
ol.wizard.planningAdd ol li {
  width: 33%;
}
ol.wizard.planningAdd label {
  width: 150px;
}
ol.wizard.planningAdd input {
  margin: 0 5% 0 0;
  width: -webkit-calc(100% - 224px) !important;
  width: -moz-calc(100% - 224px) !important;
  width: calc(100% - 224px) !important;
}
ol.wizard.planningAdd .ui {
  display: block !important;
}
ol.wizard.planningAdd input, ol.wizard.planningAdd textarea {
  font-size: 1.1em;
}
.wizard .note-content span {
  width: 3%;
}

.plusNumber ~ label {
  width: auto !important;
  margin-left: 10px;
}

.plusNumber ~ input[type=number]::-webkit-inner-spin-button,
.plusNumber ~ input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wizardFollow {
  text-align: right;
  width: 50%;
  display: inline-block;
  float: right;
  padding: 23px 0 21px;
}
.wizardFollow a {
  border: 0px solid transparent;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  margin-right: 5px;
  text-decoration: none;
  color: #FFFFFF;
  background-color: #20BA5B;
  vertical-align: middle;
}
.wizardFollow a:after {
  position: absolute;
  z-index: 11;
  top: 8px;
  right: -10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #20BA5B;
}
.wizardFollow a:before {
  top: 8px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: transparent;
  position: absolute;
  z-index: 10;
  left: 0;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #FFFFFF;
}
.wizardFollow a:first-child:before {
  display: none;
}
.wizardFollow a:last-child:after {
  display: none;
}
.wizardFollow a:hover {
  background-color: #137037;
}
.wizardFollow a:hover:after {
  border-color: transparent transparent transparent #137037;
}
.wizardFollow a.activeFollowing {
  background-color: #137037;
}
.wizardFollow a.activeFollowing:after {
  border-color: transparent transparent transparent #137037;
}

form {
  margin: 10px 0;
}
form p {
  display: flex;
  align-items: center;
}
form p select, form p input {
  margin-right: 15px;
}
form p button {
  margin-top: 0;
  top: auto !important;
}
form p + p {
  margin-top: 15px;
}
form .wrap-radio-button {
  display: inline-block;
  margin-top: -2px;
  background-color: #F8F8F8;
}
form hr {
  width: 75%;
  display: block;
  margin-bottom: 20px;
  margin-top: 20px;
}

fieldset {
  margin: 30px 0;
  padding: 0;
  border: none;
}
fieldset + p {
  margin-top: 20px;
}

label {
  display: inline-block;
  margin-right: 20px;
  width: 200px;
  padding: 11px 0;
  color: #3A3B3B;
  border: 1px solid #E7E7E7;
  border-width: 0 0 1px 0;
  text-align: left;
}
label span {
  text-align: left !important;
  width: 100% !important;
  display: inline-block !important;
}

input, textarea {
  margin: 5px 0;
  width: -webkit-calc(100% - 224px);
  width: -moz-calc(100% - 224px);
  width: calc(100% - 224px);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 10px 10px;
  border: 1px solid #CCCCCC;
  color: inherit;
  font-size: 0.9em;
}
input:focus, textarea:focus {
  color: #006BAE;
  border-color: #006BAE;
  background-color: #F2F7FB;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.search label {
  display: none;
}
.search input {
  width: -webkit-calc(100% - 62px);
  width: -moz-calc(100% - 62px);
  width: calc(100% - 62px);
  padding-left: 40px;
  background: url(../images/search.svg) no-repeat 15px center;
}

input.search {
  padding-left: 30px;
  background: url(../images/search.svg) no-repeat 10px center;
  background-size: 10%;
}

textarea {
  min-height: 100px;
}

input[type=checkbox] {
  margin-left: 10px;
  width: auto;
}

input[type=radio] {
  width: auto;
  margin: 0 8px 0 10px;
  color: #006BAE !important;
}
input[type=radio]:active {
  outline: none;
}
input[type=radio] + label {
  width: auto;
  border: none;
}

select {
  height: 35px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 5px 5px;
  color: inherit;
  font-size: 0.9em;
}

p.error label {
  color: tomato;
  background: url(../images/error.svg) no-repeat right center;
}
p.error input {
  border-color: tomato;
  color: #e02200;
  background-color: rgba(255, 99, 71, 0.09);
}
p.error select {
  border-color: tomato;
}
p.edited label {
  color: #20BA5B;
}
p.edited input {
  border-color: #20BA5B;
  color: #116330;
  background-color: rgba(32, 186, 91, 0.09);
}

button {
  position: relative;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #006BAE;
  padding: 12px 24px;
  margin-top: 10px;
  text-align: right;
  color: #006BAE;
  font-size: 1.3em;
  background: none;
}
button[type=submit] {
  padding: 12px 24px 12px 48px;
}
button[type=submit]:before {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 18px;
  top: -webkit-calc(50% - 6px);
  top: -moz-calc(50% - 6px);
  top: calc(50% - 6px);
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid #006BAE;
  border-width: 2px 2px 0 0;
}
button[type=submit].small {
  padding: 5px 10px;
  font-size: 0.9em;
}
button[type=submit].small:before {
  display: none;
}
button[type=submit].white {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
button[type=submit].white:before {
  border-color: #FFFFFF;
}
button[type=submit].white:hover {
  color: tomato;
  background-color: #FFFFFF;
}
button[type=submit].white:hover:before {
  border-color: tomato;
}
button[type=submit].white:active {
  border-color: tomato;
}
button[type=reset].small {
  padding: 5px 10px;
  font-size: 0.9em;
}
button[type=reset].small:before {
  display: none;
}
button.addNewEntry {
  color: #FFFFFF;
  background-color: #20BA5B;
  border-color: #20BA5B;
}
button.addNewEntry:hover {
  color: #20BA5B;
  border-color: #20BA5B;
  background-color: #FFFFFF;
}
button.delete {
  border-color: tomato;
  color: tomato;
  background: none;
}
button.delete:hover {
  color: #FFFFFF;
  border-color: tomato;
  background-color: tomato;
}
button[type=reset] {
  margin-right: 20px;
  border: 1px solid #F8F8F8;
  color: rgba(58, 59, 59, 0.5);
  background: none;
}
button[type=reset]:hover {
  border: 1px solid tomato;
  color: #FFFFFF;
  background-color: tomato;
}
button:hover {
  border: 1px solid #006BAE;
  color: #FFFFFF;
  background-color: #006BAE;
}
button:hover:before {
  border-color: #FFFFFF;
}
button:active {
  opacity: 0.8;
}
button.confirm, button.confirm:hover {
  border-color: #20BA5B;
  color: #FFFFFF;
  background-color: #20BA5B;
}
button.confirm:before, button.confirm:hover:before {
  border-color: #116330;
}
button[disabled] {
  opacity: 0.2;
}
button[disabled]:before {
  opacity: 0;
}
button[disabled]:hover {
  border-color: #006BAE;
  color: #006BAE;
  background: none;
}

.prev {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: none;
  height: 48px;
  width: 40px;
  color: #FFFFFF;
}
.prev:after {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 12px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #000d15;
  border-width: 2px 2px 0 0;
  content: "";
}
.prev:hover {
  border-width: 0;
  background: none;
}
.prev:hover:after {
  border-color: #006BAE;
}

.condensed label {
  padding: 5px 0;
}
.condensed input {
  padding: 11px 8px;
}
.condensed p + p {
  margin-top: 14px;
}

.columns-2 p:not(:last-child) {
  display: inline-block;
  width: 50%;
}
.columns-2 p:nth-child(even) {
  margin-left: 20px;
  width: -webkit-calc(50% - 20px);
  width: -moz-calc(50% - 20px);
  width: calc(50% - 20px);
}

.merge {
  display: inline-block;
  width: 50%;
}

.merge + p {
  display: inline-block;
  width: -webkit-calc(50% - 20px);
  width: -moz-calc(50% - 20px);
  width: calc(50% - 20px);
  margin-left: 20px;
}

#login input, #login textarea, #login select {
  width: 100%;
}

input.smaller, select.smaller, textarea.smaller {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
  margin-right: 20px;
}
input.small, select.small, textarea.small {
  width: 20% !important;
  min-width: 20% !important;
  max-width: 20% !important;
  margin-right: 20px;
}
input.medium, select.medium, textarea.medium {
  width: 40% !important;
  min-width: 40% !important;
  max-width: 40% !important;
  margin-right: 20px;
}
input.large, select.large, textarea.large {
  width: 80% !important;
  min-width: 80% !important;
  max-width: 80% !important;
  margin-right: 20px;
}
input.larger, select.larger, textarea.larger {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.numberInput {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  margin: 0 !important;
  position: relative;
  bottom: 2px;
}

.plusNumber {
  margin: 0 5px;
}

.lessNumber {
  margin: 0 5px 0 0;
}

input[type=checkbox] {
  position: relative;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  padding: 7px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #cecece;
  display: inline-block;
  width: 20px !important;
  max-width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  vertical-align: middle;
  cursor: pointer;
  border: 0;
}
input[type=checkbox]:checked:after {
  position: absolute;
  top: 3px;
  left: 3px;
  color: #20BA5B;
  content: url(../images/ok.svg);
}

label input[type=checkbox] {
  margin-right: 15px;
}

.required {
  color: tomato;
}

.flexbox {
  display: flex !important;
  align-items: center;
}
.flexbox.right {
  justify-content: flex-end;
}
.flexbox.left {
  justify-content: flex-start;
}
.flexbox.center {
  justify-content: center;
}
.flexbox.top {
  align-items: flex-start;
}
.flexbox.bottom {
  align-items: flex-end;
}
.flexbox.space-between {
  justify-content: space-between;
}
.flexbox.space-around {
  justify-content: space-around;
}
.flexbox.wrap {
  flex-wrap: wrap;
}
.flexbox.full span, .flexbox.full div {
  width: 100%;
}
.flexbox.medium span, .flexbox.medium div {
  width: 30%;
}
.flexbox.column {
  flex-direction: column;
}
.flexbox.column.start {
  align-items: flex-start;
}
.flexbox.column.end {
  align-items: flex-end;
}
.flexbox.column.center {
  align-items: center;
}
.flexbox button:first-child {
  margin-top: 0;
}
.flexbox button:last-child {
  margin-right: 0;
}
.flexbox button {
  margin: 0 7px;
}

ol {
  width: 100%;
}

.auto {
  width: auto !important;
}

.alarmingLimit li {
  background-color: #F0F0F0;
  display: inline-block;
  margin: 0 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  width: calc(50% - 40px);
}
.alarmingLimit li h1 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.alarmingLimit li h3 {
  font-weight: bold;
  margin-bottom: 20px;
  color: #3A3B3B;
}
.alarmingLimit li + li {
  margin-top: 10px;
}
.alarmingLimit li span {
  margin: 5px;
  padding: 5px;
  background-color: #FFFFFF;
  box-shadow: 1px 1px 5px rgba(35, 31, 32, 0.2);
  width: calc(50% - 20px);
  text-align: left;
  display: inline-block;
}
.alarmingLimit li span p label {
  text-align: center;
  width: 20px;
  border-bottom: transparent;
  margin-right: 0;
}
.alarmingLimit li .limitMin {
  position: relative;
  box-shadow: 0 0 0 transparent;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
}
.alarmingLimit li .limitMin input, .alarmingLimit li .limitMin label {
  width: 100%;
}
.alarmingLimit li .limitMin:before {
  content: "Min.";
  display: block;
  width: 25px;
  height: 15px;
  position: absolute;
  top: -20px;
  left: 0;
  color: #006BAE;
}
.alarmingLimit li .limitMax {
  position: relative;
  box-shadow: 0 0 0 transparent;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
}
.alarmingLimit li .limitMax input, .alarmingLimit li .limitMax label {
  width: 100%;
}
.alarmingLimit li .limitMax:before {
  content: "Max.";
  display: block;
  width: 25px;
  height: 15px;
  position: absolute;
  top: -20px;
  left: 0;
  color: #006BAE;
}
.alarmingLimit form {
  margin-top: 5px;
  margin-bottom: 5px;
}

table {
  width: 100%;
  margin: 20px 0;
  /* font-size: .9em; */
}
table td {
  padding: 5px;
}
table td + td {
  border: none;
}
table td.tableButtons {
  text-align: right;
}
table td:last-child {
  text-align: right;
}
table tbody tr button {
  margin-right: 2%;
  padding: 8px;
}
table.selectable tr:hover {
  cursor: pointer;
}

thead {
  border: 2px solid #E7E7E7;
  border-width: 0 0 2px 0;
  font-weight: bold;
}
thead tr {
  padding: 10px;
  text-align: left;
  color: black;
}
thead tr th a {
  color: #231F20;
  text-decoration: none;
}
thead tr th a span {
  color: #231F20;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  border: 2px solid transparent;
  display: inline-block;
  line-height: 15px;
  text-align: center;
}
thead tr th a:hover ~ span span {
  color: #FFFFFF;
  background-color: rgba(35, 31, 32, 0.3);
  border-color: transparent;
}
thead tr th span span {
  margin-left: 10px;
  color: rgba(35, 31, 32, 0.3);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(35, 31, 32, 0.3);
  display: inline-block;
  line-height: 15px;
  text-align: center;
}
thead tr th:not(.fc-day-header):last-child {
  text-align: right;
}

tbody {
  border: none;
  background-color: #FFFFFF;
}
tbody tr:nth-child(odd) {
  background-color: #F8F8F8;
}
tbody tr:hover, tbody tr.active {
  color: #004571;
  background-color: rgba(0, 107, 174, 0.2);
}

tfoot td {
  text-align: left;
}

table form {
  padding: 0;
  margin: 0;
}
table button {
  margin: 0;
}

.evaluation td + td + td, .evaluation th + th + th {
  text-align: center;
}
.evaluation + p {
  text-align: center;
}

.done, .todo {
  display: inline-block;
  padding: 0 10px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

.done {
  color: #20BA5B;
  background-color: rgba(32, 186, 91, 0.1);
}

.todo {
  color: tomato;
  background-color: rgba(255, 99, 71, 0.1);
}

.item-list {
  font-size: 0.95em;
}

.emptyList {
  position: absolute;
  margin: 15px 0;
  font-weight: bold;
  font-size: 1.2em;
}

.pophover {
  opacity: 0;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 69, 113, 0.9);
}
.pophover #close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
  padding-right: 40px;
  color: #FFFFFF;
  text-decoration: none;
  text-indent: -9993px;
}
.pophover #close:before {
  z-index: 11;
  position: absolute;
  right: 0;
  top: -2px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  content: "";
  width: 30px;
  height: 30px;
  background: #FFFFFF url(../images/close.svg) no-repeat center center;
}
.pophover #close:hover {
  color: #FFFFFF;
  text-indent: 0;
}
.pophover #close:hover:before {
  background-color: tomato;
}
.pophover main {
  overflow: auto;
  padding: 0;
  position: absolute;
  margin: auto;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 0px solid #003657;
  background-color: #FFFFFF;
  width: 90%;
  height: 82%;
  box-shadow: 0 0 40px 0 rgba(35, 31, 32, 0.4);
  -webkit-box-shadow: 0 0 40px 0 rgba(35, 31, 32, 0.4);
  -moz-box-shadow: 0 0 40px 0 rgba(35, 31, 32, 0.4);
  -o-box-shadow: 0 0 40px 0 rgba(35, 31, 32, 0.4);
  -ms-box-shadow: 0 0 40px 0 rgba(35, 31, 32, 0.4);
}
.pophover main header {
  background-color: #F8F8F8;
  padding: 30px;
}
.pophover form {
  padding: 30px;
}
.pophover form ol {
  margin: 0;
  list-style-type: none;
}
.pophover form ol li.flexbox {
  background: #E7E7E7;
  padding: 5px;
  margin: 5px;
  box-shadow: 1px 1px 4px rgba(35, 31, 32, 0.3);
  width: 100%;
}
.pophover form ol li.flexbox.flexbox {
  margin: 0;
}
.pophover form ol li.flexbox.flexbox label {
  width: auto;
  margin-right: 5px;
}
.pophover form ol li.flexbox.flexbox label + input {
  margin-right: 5px;
}
.pophover form ol li.flexbox.flexbox label + select {
  width: calc(80% - 25px);
}
.pophover form ol li.flexbox.flexbox span {
  width: 100%;
}
.pophover form ol li.flexbox a.close-item {
  margin: 5px;
  display: flex;
  text-align: center;
  justify-content: center;
  border: 1px solid #FFFFFF;
  background-color: tomato;
  text-decoration: none;
  padding: 5px;
  color: #FFFFFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.pophover form ol li.flexbox a.close-item svg path {
  fill: #FFFFFF;
}
.pophover form ol li.flexbox a.close-item:hover {
  border: 1px solid tomato;
  background-color: #FFFFFF;
}
.pophover form ol li.flexbox a.close-item:hover svg path {
  fill: tomato;
}
.pophover form ol + p {
  margin-top: 10px;
}
.pophover form + p:last-child {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #FFFFFF;
  padding-bottom: 10px;
  padding-right: 30px;
}
.pophover form + p:last-child button:last-child {
  margin-right: 0;
}
.pophover.small {
  text-align: left;
}
.pophover.small main {
  width: 50%;
  height: 30%;
}
.pophover.small h2 {
  border: none;
}
.pophover.medium {
  text-align: left;
}
.pophover.medium main {
  width: 50%;
  height: 45%;
}
.pophover.medium h2 {
  border: none;
}
.pophover .task-type {
  width: 40%;
  height: 70%;
}
.pophover .task-type form {
  margin-top: 0px;
  padding-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.pophover .task-type p:last-child {
  position: absolute;
  bottom: 20px;
}

.pophover:not(.account) main {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.pophover.delete {
  background-color: rgba(35, 31, 32, 0.4);
}
.pophover.delete main {
  border-color: #7a1300;
  border-width: 0;
  width: 440px;
  height: 240px;
}
.pophover.delete main h1 {
  color: tomato;
  border-color: tomato;
}

.pophover.account {
  background: none;
}
.pophover.account:before {
  position: absolute;
  top: 58px;
  right: 80px;
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  content: "";
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #FFFFFF;
}
.pophover.account main {
  overflow: initial;
  border: none;
  position: absolute;
  width: 260px;
  height: auto;
  right: 30px;
  top: 76px;
}
.pophover.account section {
  padding: 10px;
}
.pophover.account ul {
  margin: 0;
  list-style: none;
}
.pophover.account ul a {
  display: block;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 2px 4px;
  text-decoration: none;
}
.pophover.account ul a:hover {
  color: #FFFFFF;
  background-color: #006BAE;
}
.pophover.account li + li {
  margin-top: 1px;
}

#close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
  padding-right: 40px;
  color: #FFFFFF;
  text-decoration: none;
  text-indent: -9993px;
}
#close:before {
  z-index: 11;
  position: absolute;
  right: 0;
  top: -2px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid tomato;
  content: "";
  width: 30px;
  height: 30px;
  background: #FFFFFF url(../images/close.svg) no-repeat center center;
}
#close:hover {
  color: #FFFFFF;
  text-indent: 0;
}
#close:hover:before {
  background-color: tomato;
}
#close.cornerBox {
  top: 26%;
  right: 24%;
}

.planningInfo {
  position: absolute;
  z-index: 20;
  padding: 5px;
  width: 350px;
  background-color: #FFFFFF;
  box-shadow: 1px 1px 6px rgba(35, 31, 32, 0.5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.planningInfo h2 {
  margin: 5px 0;
  padding: 5px;
}
.planningInfo p {
  padding: 0 5px;
  text-align: left !important;
}
.planningInfo p.buttonsItem {
  display: flex;
  justify-content: space-between;
}

.context-menu {
  padding: 10px;
  z-index: 1000;
  background-color: #E7E7E7;
  color: #FFFFFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 150px;
  text-align: center;
  vertical-align: middle;
  border-left: 5px solid #20BA5B;
}
.context-menu button {
  text-align: center;
  width: 90%;
}

.context-menu-large {
  padding: 10px;
  z-index: 1000;
  background-color: #E7E7E7;
  color: #FFFFFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 220px;
  text-align: center;
  vertical-align: middle;
  border-left: 5px solid #20BA5B;
}
.context-menu-large button {
  text-align: center;
  width: 90%;
}

.tile {
  list-style: none;
  margin: 0 -5px;
  width: 100% !important;
}
.tile h1 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.tile li {
  width: -webkit-calc(25% - 14px);
  width: -moz-calc(25% - 14px);
  width: calc(25% - 14px);
  display: inline-block;
  margin: 5px;
  vertical-align: text-top;
}
.tile a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  width: 100%;
}
.tile a h3 {
  display: table;
  width: 100%;
  height: 80px;
  font-size: 1.2em;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  padding: 5px 15px;
  color: #FFFFFF;
  background-color: #006BAE;
}
.tile a h3 span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.tile a h3 svg {
  position: relative;
  top: 5px;
  left: 10px;
  width: 24px;
  height: 24px;
}
.tile a p {
  -moz-border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
  padding: 15px;
  background-color: #E7E7E7;
  text-align: center !important;
  display: block !important;
}
.tile a p img {
  width: 80px;
}
.tile a:after {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 1;
  transition: right 0.1s ease-in-out;
  position: absolute;
  right: 18px;
  top: -webkit-calc(50% + 35px);
  top: -moz-calc(50% + 35px);
  top: calc(50% + 35px);
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid #FFFFFF;
  border-width: 2px 2px 0 0;
}
.tile a:hover:after {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 1;
  transition: right 0.1s ease-in-out;
  position: absolute;
  right: 18px;
  top: -webkit-calc(50% + 35px);
  top: -moz-calc(50% + 35px);
  top: calc(50% + 35px);
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid #FFFFFF;
  border-width: 2px 2px 0 0;
}
.tile a:hover h3 {
  color: #FFFFFF;
  background-color: #003657;
}
.tile a:hover p {
  color: #003657;
  background-color: #dadada;
}

.item-view nav {
  display: inline-block;
  width: 100%;
  margin-bottom: 15px;
}
.item-view nav h1 {
  margin: 0 0 0 3%;
}
.item-view .dropdown ul li:first-child a {
  background-color: #20BA5B;
  border-bottom: 4px solid #20BA5B;
}
.item-view .dropdown ul li:first-child a:hover {
  border-bottom: 4px solid #198e46;
}

.detailsResident > nav {
  position: relative;
  margin: 0;
  text-align: left;
}
.detailsResident > nav form {
  margin-bottom: 0;
}
.detailsResident div {
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  /*border-left: 2px solid #006BAE;*/
  /*padding: 10px 20px 20px;*/
}
.detailsResident div + div {
  margin-top: 20px;
}
.detailsResident div:nth-child(odd) {
  /*background-color: rgba(0, 107, 174, 0.06);*/
}
.detailsResident h1 {
  margin-bottom: 5px;
  border: none;
  padding: 0;
  font-size: 0.8em;
  color: rgba(0, 107, 174, 0.5);
}
.detailsResident p {
  line-height: 1.6em;
}
.detailsResident p.task {
  font-family: "roboto-bold", sans-serif;
}
.detailsResident p + p {
  margin: 20px 0 0 10px;
}
.detailsResident p span {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 0 5px;
  color: #FFFFFF;
  background-color: #20BA5B;
}
.detailsResident p:last-child {
  text-align: left;
}
.detailsResident footer {
  position: relative;
  margin-top: 40px;
  height: 80px;
}
.detailsResident footer .loading {
  top: 0;
  left: 20px;
  border-color: rgba(0, 107, 174, 0.2);
  border-top-color: #000d15;
}

.ecarnetResident {
  display: block;
  padding: 30px;
}
.ecarnetResident header {
  display: block;
}
.ecarnetResident header h2 svg {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-left: 10px;
  vertical-align: middle;
}
.ecarnetResident header button {
  margin-left: 15px;
}
.ecarnetResident nav {
  display: flex;
  justify-content: flex-end;
}
.ecarnetResident nav button {
  margin: 0 10px;
}
.ecarnetResident nav button.add {
  position: inherit;
}
.ecarnetResident ol li.scrollable {
  overflow-x: hidden;
}
.ecarnetResident div {
  display: flex;
  padding: 10px !important;
  width: 100%;
  margin: 5px 0;
  position: relative;
  border-left: 2px solid #FFFFFF;
  background-color: rgba(0, 107, 174, 0.2) !important;
  /* &:nth-child(odd) {
    background-color: transparentize($white, .80);
  } */
}
.ecarnetResident div span.icons-groupe {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  position: absolute;
  top: calc(50% - 20px);
  left: 10px;
  height: 40px;
  width: 40px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
.ecarnetResident div span.icons-groupe svg {
  width: 65% !important;
  height: 65% !important;
}
.ecarnetResident div span.icons-groupe svg path {
  fill: #006BAE;
}
.ecarnetResident div span.icons-groupe img {
  width: 100%;
  height: 100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.ecarnetResident div span.icons-groupe ~ span.content {
  margin-left: 50px;
}
.ecarnetResident div h1 {
  display: block;
  border-bottom: transparent;
  padding: initial !important;
  position: relative;
  font-size: 1.1em;
  color: #006BAE;
  margin-bottom: 0px;
  font-weight: bold;
  background: transparent;
}
.ecarnetResident div h1 strong {
  position: absolute;
  right: 0px;
  margin-left: 10px;
  padding-left: 10px;
  color: #006BAE;
}
.ecarnetResident div span.content {
  width: 100%;
  margin-left: 0px;
  margin-right: 70px;
  text-align: left;
}
.ecarnetResident div span.content span.textBook {
  width: 100%;
  display: block;
}
.ecarnetResident div span.content span.textBook p {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.ecarnetResident div span.content span.textBook p:first-child {
  font-weight: bold;
  color: #3A3B3B;
}
.ecarnetResident div .textBook {
  display: block;
}
.ecarnetResident div .textBook p {
  display: block;
  padding: 0;
  width: 100%;
  margin: 0;
}
.ecarnetResident div .textBook p:first-child {
  font-weight: bold;
  color: #3A3B3B;
}
.ecarnetResident div p {
  align-self: flex-start;
  justify-content: flex-start !important;
  width: calc(75% - 60px);
  margin: 0 0px 0px 50px;
  display: block;
  display: inline-block;
}
.ecarnetResident div p.task {
  text-indent: initial;
  right: 80px;
  top: 10px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 7px 15px;
  background: #006BAE;
  line-height: initial;
  width: calc(20% - 20px);
  height: auto;
}
.ecarnetResident div p.task svg {
  height: 35px;
  width: 35px;
}
.ecarnetResident div p.task svg path:not(.moodPath) {
  fill: #FFFFFF;
}
.ecarnetResident div .note-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  top: 0;
  height: 100%;
  width: 70px;
  background-color: transparent !important;
  border-left: 0px solid transparent;
  right: 0;
  margin: 0;
  padding: 0;
}
.ecarnetResident div .note-control button, .ecarnetResident div .note-control span {
  margin: 10px 0;
  font-weight: bold;
}
.ecarnetResident div .note-control button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: transparent;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding: initial !important;
}
.ecarnetResident div .note-control button svg path {
  fill: #006BAE;
}
.ecarnetResident div .note-control button:hover {
  background: transparent;
}
.ecarnetResident div .note-control .read {
  position: relative;
  text-align: center;
}
.ecarnetResident div .note-control .read label {
  display: block;
  margin: initial;
  width: auto;
  padding: initial !important;
  left: 5px;
}
.ecarnetResident div.important {
  background-color: tomato !important;
  color: #FFFFFF;
  font-weight: bold;
}
.ecarnetResident div.important h1 {
  color: #FFFFFF;
}
.ecarnetResident div.important h1 strong {
  color: #FFFFFF;
}
.ecarnetResident div.important p.task {
  background-color: #FFFFFF;
  color: #006BAE;
}
.ecarnetResident div.important p.task svg path {
  fill: #006BAE;
}
.ecarnetResident div.important .note-control button svg path {
  fill: #FFFFFF;
}

@keyframes rotate-delete {
  0% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(-30deg);
  }
  10% {
    transform: rotate(5deg);
  }
  15% {
    transform: rotate(-30deg);
  }
  20% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-30deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.loading {
  position: absolute;
  z-index: 10;
  margin: auto;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #000d15;
}
.loading.hide {
  display: none;
}

.surveyDetails {
  overflow: scroll;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  background-color: #FFFFFF;
  box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -webkit-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -moz-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -o-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -ms-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
}
.surveyDetails header button {
  margin: 14px 0 15px;
}
.surveyDetails .wrapTable {
  padding: 0 30px;
  border: none;
}
.surveyDetails th + th {
  width: 30%;
}

@media screen {
  .print div {
    padding: 0 30px 30px 30px;
    font-size: 1em;
    color: #3A3B3B;
    line-height: 2em;
  }
  .print div ~ p {
    display: none;
  }
  .print li + li {
    margin-top: 0;
  }
  .print header {
    margin-bottom: 30px;
  }
  .print header button {
    position: absolute;
    top: 7px;
    right: 30px;
    padding: 6px 10px;
  }
  .print h3 {
    font-size: 1.3em;
    margin-bottom: 50px;
  }
  .print h3 span {
    display: inline-block;
    border-radius: 3px;
    border: 2px solid #000;
    padding: 10px;
  }
  .print footer {
    display: none;
  }
  .pophover.print header {
    margin: 0 0 20px 0;
    padding: 0 18px;
  }
  .pophover.print header h1 {
    color: #000;
  }
  .pophover.print button {
    position: absolute;
    top: 15px;
    right: 18px;
    margin: 0;
  }
  .pophover.print div {
    margin: 0;
    padding: 0 15px;
  }
  .pophover.print div p {
    padding: 0;
    margin: 0;
    line-height: 18px;
    text-align: left;
  }
  .pophover.print h2 {
    margin: 15px 0 10px 0;
  }
  .pophover.print ol,
  .pophover.print ul {
    margin: 0 0 0 15px;
  }

  .pophover.print ol li,
  .pophover.print ul li {
    margin: 0 0 2px 5px;
  }
}
@media print {
  @page {
    size: A4;
    margin: 1cm;
  }
  html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
  }
  html, body, *,
  .pophover.print,
  .pophover.print * {
    margin: 0;
    padding: 0;
    color: #000;
    opacity: 1;
    font: normal 20px roboto-regular, sans-serif;
  }

  body:after,
  #sidebar,
  main[role=main],
  #close,
  button,
  .print button {
    display: none;
  }

  .pophover.print main {
    box-shadow: none;
    overflow: initial;
    position: initial;
  }
  .pophover.print header {
    margin: 20px 0 10px 0;
    background: none;
    border: none;
  }
  .pophover.print h1,
  .pophover.print h2,
  .pophover.print h3 {
    margin: 0;
    padding: 0;
    color: #000;
    border: none;
    display: block;
  }
  .pophover.print h1 {
    font-size: 30px;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 20px;
    padding-bottom: 5px;
  }
  .pophover.print h2 {
    margin: 15px 0 10px 0;
  }
  .pophover.print h2,
  .pophover.print h2 span {
    font-size: 26px;
    font-weight: bold;
  }
  .pophover.print h3,
  .pophover.print h3 span {
    font-size: 22px;
    font-weight: bold;
  }
  .pophover.print ol {
    list-style: decimal;
    margin-left: 30px;
  }
  .pophover.print ol li {
    padding: 8px 0 4px 0;
  }
  .pophover.print p,
  .pophover.print main div p:last-child {
    all: unset;
  }
  .pophover.print code {
    font-family: monospace, serif;
    background-color: #eeeeee;
  }

  .pophover.print .signature,
  .pophover.print .signature p,
  .pophover.print .signature span {
    font-style: italic;
    font-size: 18px;
    color: #004c7b;
  }

  .pophover.print footer {
    display: block;
    line-height: 20px;
    font-size: 14px;
    border-top: 1px solid #999999;
    text-align: center;
    padding-top: 4px;
    margin-top: 5px;
  }
  .pophover.print footer p,
  .pophover.print footer em,
  .pophover.print footer span {
    color: #999999;
    font-size: 14px;
  }
}
@media screen and (max-width: 1024px) {
  table tbody tr button {
    visibility: initial;
  }
}
.detailsResident > nav {
  position: relative;
  margin: 0;
  text-align: left;
  /* button {
  	padding: 4px 8px;
  	&.current {
  		border-color: $blue;
  		color: $white;
  		background-color: $blue;
  	}
  	&.add {
  		position: absolute;
  		right: 0;
  	}
  } */
}
.detailsResident > nav form {
  margin-bottom: 0;
}
.detailsResident div {
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  /*border-left: 2px solid #006BAE;*/
  /*padding: 10px 20px 20px;*/
}
.detailsResident div + div {
  margin-top: 20px;
}
.detailsResident div:nth-child(odd) {
  /*background-color: rgba(0, 107, 174, 0.06);*/
}
.detailsResident h1 {
  margin-bottom: 5px;
  border: none;
  padding: 0;
  font-size: 0.8em;
  color: rgba(0, 107, 174, 0.5);
}
.detailsResident p {
  line-height: 1.6em;
}
.detailsResident p.task {
  font-family: "roboto-bold", sans-serif;
}
.detailsResident p + p {
  margin: 20px 0 0 10px;
}
.detailsResident p span {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 0 5px;
  color: #FFFFFF;
  background-color: #20BA5B;
}
.detailsResident p:last-child {
  text-align: left;
}
.detailsResident footer {
  position: relative;
  margin-top: 40px;
  height: 80px;
}
.detailsResident footer .loading {
  top: 0;
  left: 20px;
  border-color: rgba(0, 107, 174, 0.2);
  border-top-color: #000d15;
}

.loading {
  position: absolute;
  z-index: 10;
  margin: auto;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #000d15;
}
.loading.hide {
  display: none;
}

.surveyDetails {
  overflow: scroll;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  background-color: #FFFFFF;
  box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -webkit-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -moz-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -o-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
  -ms-box-shadow: 0 0 40px 10px rgba(35, 31, 32, 0.2);
}
.surveyDetails header button {
  margin: 14px 0 15px;
}
.surveyDetails .wrapTable {
  padding: 0 30px;
  border: none;
}
.surveyDetails th + th {
  width: 30%;
}

section nav {
  display: inline-block;
  width: 100%;
}
section nav h1 {
  margin: 0 !important;
  z-index: 950;
  position: relative;
}
section nav button {
  top: 0;
  padding: 0;
  z-index: 950;
}
section nav button svg {
  height: 53px;
  width: 53px;
}
section nav img {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-right: 3%;
  width: 3%;
  height: 3%;
  position: relative;
  top: 10px;
  left: 1%;
}

/*.oneperson-only {
	padding: 0;
	// NAME - BUTTONS
	 nav {
		display: inline-block;
		width: 100%;
		margin-bottom: 2%;
		h1 {
			margin: 0 0 0 3%;
			z-index: 950;
			position: relative;
		}
		button {
			top: 13px;
			border-color: transparent;
			padding: 0;
			z-index: 950;
			&:hover {
				border-color: transparent;
				background-color: transparent;
			}
			svg {
				height: 53px;
				width: 53px;
			}
		}
		img {
			@include border-radius(10px);
			margin-right: 3%;
			width: 3%;
			height: 3%;
			position: relative;
	    top: 10px;
	    left: 1%;
		}
	} */
aside.notifs-aside {
  display: none;
  margin: 1% 3%;
  padding: 1% 3%;
  background-color: tomato;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: white;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
aside.notifs-aside header {
  display: flex;
  border-bottom: 0px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
aside.notifs-aside header h2 {
  width: 15%;
}
aside.notifs-aside header h2 span {
  display: inline-block;
  padding: 1% 2%;
  color: tomato;
  background-color: #FFFFFF;
  margin-left: 3%;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
aside.notifs-aside header button {
  border: 1px solid #FFFFFF;
}
aside.notifs-aside tbody, aside.notifs-aside h2, aside.notifs-aside tr, aside.notifs-aside td {
  background-color: transparent;
  color: #FFFFFF;
}
aside.notifs-aside tbody tr:hover, aside.notifs-aside tbody tr.active {
  background-color: rgba(0, 107, 174, 0.2);
}
aside.notifs-aside td button {
  border: 1px solid #FFFFFF;
  padding: 5px 10px;
  float: right;
  color: white;
  font-size: 0.9em;
}

article {
  background-color: #FFFFFF;
  display: flex;
  padding: 1% 1%;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid rgba(0, 107, 174, 0.34);
  border-width: 0 0 1px 0;
}
article header {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
article header form {
  float: right;
  text-align: right;
}
article header form button {
  float: none !important;
  margin-left: 2%;
}
article header button {
  top: 0;
  margin: 0;
}
article h2 {
  position: initial;
  display: inline-block;
  margin: 20px 0 10px 0;
  background-color: #006BAE;
  padding: 10px 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #FFFFFF;
}
article span {
  width: 50%;
  text-align: right;
}
article span:last-child {
  width: 100%;
}
article ol:not(.tile) {
  margin: 0 5% 0 0;
  list-style-type: none;
}
article ol:not(.tile) p {
  border-width: 0 0 2px 0;
  text-align: left !important;
}
article ol:not(.tile) input {
  width: 50%;
}
article button {
  align-self: center;
  margin-left: 2%;
}
article p:last-child {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
article p:last-child button {
  margin-left: 20px;
}

article#contact-people {
  width: 100%;
  display: block;
}
article#contact-people ol {
  width: 100%;
}
article#contact-people ol li span {
  width: 20%;
  display: inline-block;
  text-align: left;
}
article#contact-people ol li input {
  margin-right: 5%;
  width: 20%;
  display: inline-block;
  height: 20px;
}
article#contact-people ol li input:first-child {
  font-weight: bold;
  color: #006BAE;
}
article#contact-people ol li.list-button {
  text-align: right;
}

article#notes {
  background: #FFFFFF;
  padding-bottom: 4%;
}
article#notes span {
  background-color: #FFFFFF;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-color: transparent;
}
article#notes ol {
  margin-top: 2%;
  width: 100%;
}
article#notes button {
  padding: 8px;
  float: right;
}

article#survey {
  /* div ol li input {
  	margin-right: 0%;
  	width: calc(100% - 227px)
  } */
}
article#survey a {
  display: block;
  margin-top: 2%;
  color: #006BAE;
  text-decoration: none;
  width: 100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1%;
}
article#survey button {
  padding: 8px;
  float: right;
}

article#planification {
  background-color: #FFFFFF;
  /* div {
  	ol {
  		li {
  			display: inline-block;
  			width: 40%;
  			select {
  				margin-right: 2%;
  				width: 38%;
  			}
  			input {
  				width: 38%;
  			}
  			&:last-child {
  				width: 100%;
  			}
  			button {
  				margin-left: 0;
  			}
  		}
  	}
  } */
}
article#planification header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
article#planification header form {
  display: flex;
  align-items: center;
  width: 60%;
  float: none;
}
article#planification header form label {
  width: 60px;
}
article#planification header form input {
  width: 20%;
  margin-top: 0 !important;
  margin-right: 5%;
}
article#planification header button {
  padding: 8px;
  top: 0;
  margin: 0;
}
article#planification table tbody tr td:last-child {
  display: flex;
  justify-content: flex-end;
}

article.informationForm form {
  width: 100%;
}
article.informationForm ol {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  line-height: 60px;
  border: 4px solid #20BA5B;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 5px;
  width: 100%;
  margin: 0;
  background-color: #FFFFFF;
}
article.informationForm ol:before {
  position: relative;
  top: -35px;
  left: 30px;
  content: "";
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #20BA5B;
  border-width: 30px 0 0 30px;
  border-style: solid;
}
article.informationForm ol li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 8);
  height: 60px;
  margin: 0;
  text-align: center;
  border: 2px solid #20BA5B;
  border-width: 0 2px 0 0;
  background-color: #FFFFFF;
}
article.informationForm ol li:last-child {
  border-color: transparent;
}
article.informationForm ol li input {
  width: 90%;
}
article.informationForm ol li input::-webkit-input-placeholder {
  color: rgba(0, 107, 174, 0.6) !important;
}
article.informationForm ol li input::-moz-placeholder {
  color: rgba(0, 107, 174, 0.6) !important;
}
article.informationForm ol li button {
  display: block;
  margin: 0;
  position: inherit;
  text-align: center;
}
article.informationForm ol li button:before {
  display: none;
}
article.informationForm ol li button:after {
  display: none;
}
article.informationForm ol li.tenPercent {
  width: 10%;
}
article.informationForm ol li.twentyPercent {
  width: 20%;
}
article.informationForm ol li.thirtyPercent {
  width: 30%;
}
article.informationForm ol li.fourtyPercent {
  width: 40%;
}
article.informationForm ol li.fiftyPercent {
  width: 50%;
}
article.informationForm ol li.sixtyPercent {
  width: 60%;
}
article.informationForm ol li.seventyPercent {
  width: 70%;
}
article.informationForm ol li.heightyPercent {
  width: 80%;
}
article.informationForm ol li.ninetyPercent {
  width: 90%;
}
article.informationForm ol li.hundredPercent {
  width: 100%;
}

.devices-page {
  margin-top: 0;
}
.devices-page ol {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content: space-between;
}
.devices-page ol li {
  margin: 1%;
  width: 15%;
  border-radius: 10px;
  background-color: #006BAE;
}
.devices-page ol li a {
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.devices-page ol li a svg {
  display: block;
  width: 65%;
}
.devices-page ol li a svg path {
  fill: #FFFFFF;
}
.devices-page ol li a p {
  color: #FFFFFF;
  text-align: center;
  display: block;
  font-size: 1.3em;
  width: 100%;
}
.devices-page ol li a p:last-child {
  margin: 0;
}
.devices-page ol li:hover {
  background-color: #20BA5B;
}
.devices-page ol li button {
  background-color: white;
  text-align: center;
  width: 100%;
}
.devices-page ol li button:hover {
  background-color: #006BAE;
}
.devices-page ol li p {
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
}
.devices-page ol li p:last-child {
  margin: 6% 0 6% 0;
  font-size: 1.2em;
}

.intervenants {
  margin-top: 0;
}
.intervenants ol {
  display: flex;
  justify-content: center;
  list-style-type: none;
  flex-wrap: wrap;
}
.intervenants ol li {
  margin: 1% 2% 5% 0;
  padding: 1% 0 1% 0;
  width: 16%;
}
.intervenants ol li a {
  text-decoration: none;
}
.intervenants ol li a img {
  width: 50%;
  border-radius: 5%;
}

.planification header {
  background-color: transparent;
}
.planification tbody tr:hover, .planification tbody tr.active {
  background-color: inherit;
}
.planification table td {
  padding: 0;
}
.planification button {
  margin: 2% 0 5% 0;
}
.planification .calendar {
  text-align: center;
}
.planification .calendar header {
  position: relative;
}
.planification .calendar header h2 {
  top: 35%;
  font-size: 2em;
  text-transform: uppercase;
  border: none;
  color: #006BAE;
}
.planification .calendar header .btn-prev, .planification .calendar header .btn-next {
  border: 2px solid #006BAE;
  border-radius: 50%;
  color: #006BAE;
  height: 3em;
  font-size: 0.75em;
  line-height: 3em;
  margin: -1em;
  position: absolute;
  top: 50%;
  width: 3em;
  cursor: pointer;
}
.planification .calendar header .btn-prev svg path, .planification .calendar header .btn-next svg path {
  fill: #006BAE;
}
.planification .calendar header .btn-prev:hover, .planification .calendar header .btn-next:hover {
  background: #006BAE;
  color: #FFFFFF;
}
.planification .calendar header .btn-prev:hover svg path, .planification .calendar header .btn-next:hover svg path {
  fill: #FFFFFF;
}
.planification .calendar header .btn-prev {
  left: 6em;
}
.planification .calendar header .btn-next {
  right: 6em;
}
.planification .calendar thead {
  font-weight: 600;
  text-transform: uppercase;
}
.planification .calendar thead tr {
  text-align: center;
}
.planification .calendar thead tr td {
  padding: 1.2%;
  display: inline-block;
  width: 10%;
}
.planification .calendar tbody {
  color: #7c8a95;
}
.planification .calendar tbody a {
  text-decoration: none;
}
.planification .calendar tbody td:hover {
  border: 2px solid #006BAE;
}
.planification .calendar tbody td {
  border: 2px solid transparent;
  border-radius: 5%;
  display: inline-block;
  line-height: 4em;
  text-align: center;
  width: 10%;
  cursor: pointer;
}
.planification .calendar tbody .prev-month, .planification .calendar tbody .next-month {
  color: #cbd1d2;
}
.planification .calendar tbody .prev-month:hover, .planification .calendar tbody .next-month:hover {
  border: 2px solid #cbd1d2;
}
.planification .calendar tbody .current-day {
  background: #006BAE;
  color: #FFFFFF;
}
.planification .calendar tbody .current-day a {
  color: #FFFFFF;
}
.planification .calendar tbody .event {
  cursor: pointer;
  position: relative;
}
.planification .calendar tbody .event:after {
  background: #006BAE;
  border-radius: 50%;
  bottom: 0.5em;
  display: block;
  content: "";
  height: 0.5em;
  left: 50%;
  margin: -0.25em 0 0 -0.25em;
  position: absolute;
  width: 0.5em;
}
.planification .calendar tbody .event.current-day:after {
  background: #f9f9f9;
}

.item-add ol {
  list-style-type: none;
}
.item-add ol li button {
  float: right;
}

.tasks-page article {
  display: flex;
}
.tasks-page article ol {
  width: 50%;
  list-style-type: none;
  border: 1px solid grey;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 3%;
  padding-top: 0;
}
.tasks-page article ol li {
  padding: 1%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: #ededed;
}
.tasks-page article ol li a {
  text-decoration: none;
}
.tasks-page article ol:first-child:before {
  display: block;
  content: "";
  border: 1px solid grey;
  border-width: 0 1px 1px 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
  position: relative;
  left: 106%;
  top: 310px;
  background-color: #FFFFFF;
}

.tasks-review header {
  justify-content: flex-start;
  border-bottom: transparent;
}
.tasks-review header button {
  padding: 10px 20px;
  font-size: initial;
}
.tasks-review header h1 {
  margin-right: 15px;
}
.tasks-review ol {
  list-style-type: decimal !important;
  padding: 10px 0;
}
.tasks-review ol li {
  margin-left: 15px;
}
.tasks-review ol li h3 {
  color: #006BAE;
  padding-bottom: 10px;
  border-bottom: 1px solid #E7E7E7;
  display: inline-block;
}
.tasks-review ol li table {
  margin-top: 10px;
}

.followUp {
  color: #FFFFFF;
}

.tasks-collapse {
  padding: 10px;
  display: block;
  background-color: #F8F8F8;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
  text-align: left !important;
}
.tasks-collapse span.flexbox {
  margin-bottom: 5px;
}
.tasks-collapse span.flexbox h1 {
  background-color: #FFFFFF;
  margin-bottom: 0;
  padding: 5px;
  border: 1px solid #006BAE;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.tasks-collapse span.flexbox button {
  background-color: #FFFFFF;
  padding: 10px 20px;
  vertical-align: top;
  margin-left: 0;
  position: relative;
}
.tasks-collapse span.flexbox button:hover {
  background-color: #006BAE;
}

span.tasksCollumn {
  display: flex;
  width: 100% !important;
  height: 70vh;
  text-align: center;
}

div.tasks {
  vertical-align: top;
  padding: 10px;
  position: static;
  width: 40%;
  display: inline-block;
  box-shadow: 0 0 0 rgba(35, 31, 32, 0);
  border: 4px solid #E7E7E7;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
div.tasks table {
  text-align: left;
}
div.tasks table tbody td {
  position: relative;
}
div.tasks .detalsTask {
  position: absolute;
  right: 0px;
  top: 50px;
  padding: 10px;
  z-index: 155;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
  background-color: #FFFFFF;
  width: 250%;
  height: auto;
}
div.tasks .detalsTask a#close {
  top: 15px;
  padding: 0 15px 0 0;
  border: transparent;
}
div.tasks .detalsTask a#close:before {
  width: 20px;
  height: 20px;
  background-size: 60% 60%;
}
div.tasks .detalsTask p {
  display: block;
  width: 100%;
  position: static;
}
div.tasks .detalsTask p label, div.tasks .detalsTask p input, div.tasks .detalsTask p textarea {
  display: block;
  width: 100% !important;
}
div.tasks .detalsTask:after {
  position: absolute;
  top: -15px;
  right: 15px;
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-width: 0px 15px 15px 15px;
  border-color: transparent transparent #FFFFFF transparent;
}

div.arrow {
  vertical-align: top;
  padding: 0;
  margin: 0 10px;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
  box-shadow: 0 0 0 rgba(35, 31, 32, 0);
  border: 4px solid rgba(35, 31, 32, 0);
  height: 100%;
}
div.arrow a {
  padding: 0;
  border: transparent;
}
div.arrow a:before {
  display: none;
}
div.arrow img {
  opacity: 0.5;
}
div.arrow img:hover {
  cursor: pointer;
}

ol.wizard.planningAdd span:last-child:not(.tasksCollumn) {
  display: block;
}
ol.wizard.planningAdd span:last-child:not(.tasksCollumn) button.small {
  font-size: 1.1em;
}

.read-messages li {
  display: flex;
  justify-content: space-between;
  background-color: #F8F8F8;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.2);
}
.read-messages li .text {
  width: calc(100% - 70px);
  text-align: left;
  padding: 5px;
}
.read-messages li .text h1 {
  padding: 2.5px 0;
  border-bottom: 0;
  font-size: 1.2em;
  text-align: left;
}
.read-messages li .text h1 ~ p {
  display: block;
  text-align: left;
}
.read-messages li .buttons {
  width: 70px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.read-messages li .buttons button {
  text-align: center;
  padding: 5px;
  border: 0;
  margin: 0;
  width: 100%;
  height: 50%;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.read-messages li .buttons button:first-child {
  background-color: #20BA5B;
  color: #FFFFFF;
}
.read-messages li .buttons button:last-child {
  background-color: #006BAE;
  color: #FFFFFF;
}

.intervenant-only h1 {
  margin-bottom: 5%;
}
.intervenant-only img {
  border-radius: 5%;
  margin-right: 5%;
  width: 50px;
  height: 50px;
  position: relative;
  top: 10px;
  left: 1%;
}
.intervenant-only nav {
  height: 110px;
  margin-bottom: 0;
}
.intervenant-only article form label {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  line-height: 30%;
  padding: 1%;
}
.intervenant-only article form input {
  width: 70%;
}
.intervenant-only article#identifiants ol {
  width: 100%;
}
.intervenant-only article#identifiants ol li {
  display: inline-block;
  margin-right: 10%;
}
.intervenant-only article#identifiants ol li select {
  margin-right: 5%;
}
.intervenant-only article#identifiants ol li input {
  width: 70%;
}
.intervenant-only article#identifiants ol li input[type=checkbox] {
  width: 2%;
}
.intervenant-only article#planning {
  background-color: #FFFFFF;
  /* div {
  	ol {
  		li {
  			display: inline-block;
  			width: 40%;
  			input {
  				width: 50%;
  			}
  			select.days-select {
  				width: 18.2% !important;
  			}
  			&:first-of-type, &:last-of-type {
  				width: 100%;
  			}
  		}
  	}
  } */
}
.intervenant-only article#tracabilite {
  background-color: #FFFFFF;
}
.intervenant-only article#tracabilite header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.intervenant-only article#tracabilite header form {
  display: flex;
  align-items: center;
  width: 60%;
  float: none;
}
.intervenant-only article#tracabilite header form label {
  width: 60px;
  color: inherit;
  border: transparent;
}
.intervenant-only article#tracabilite header form input {
  margin-top: 0;
}

p span.g4s {
  width: 100% !important;
  position: static;
}
p span.g4s svg {
  width: 100px !important;
}
p span.g4s label {
  cursor: pointer !important;
  border-bottom: transparent !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
p span.g4s input[type=checkbox] {
  width: 20px !important;
  max-width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin-left: 85px !important;
}

td span.g4s {
  position: absolute;
  right: 20%;
  width: 30px !important;
}
td span.g4s svg {
  width: 50px !important;
  height: 30px;
}

.account-form h1 {
  margin-left: 3%;
}
.account-form article ul {
  flex-basis: 100%;
}
.account-form article ul li {
  font-weight: bold;
}
.account-form article ul li button {
  margin-left: 5%;
}
.account-form article table button {
  float: right;
}
.account-form article label, .account-form article input {
  margin-bottom: 2%;
}
.account-form article button {
  float: right;
  margin-top: 0;
  padding: 8px 18px;
}

.groupe-page ol {
  list-style-type: none;
}
.groupe-page ol li {
  display: inline-block;
  margin: 2%;
  border-radius: 5px;
  border: 2px solid #006BAE;
  padding-top: 1%;
  width: 20%;
  height: 60px;
  text-align: center;
}
.groupe-page ol li a {
  text-decoration: none;
  font-size: 1.2em;
}

.groupe-only ol li {
  font-weight: bold;
  font-size: 1.1em;
}
.groupe-only table tr td button {
  float: right;
  padding: 0.5% 2%;
}

.survey-page {
  margin-left: 5%;
  width: 75%;
  height: 80%;
  padding: 3%;
  border-radius: 10px;
  top: 15%;
  position: fixed;
  z-index: 300;
  background-color: #FFFFFF;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
.survey-page header header button:hover svg g {
  fill: #FFFFFF;
}

.surveyTemplate h2 {
  margin: 10px 0 0 0;
  background-color: transparent;
  color: rgba(35, 31, 32, 0.8);
  width: 100%;
}
.surveyTemplate h2 ~ input, .surveyTemplate h2 ~ textarea {
  width: 100%;
}
.surveyTemplate textarea:last-of-type {
  width: 100% !important;
  margin-bottom: 30px;
}
.surveyTemplate label ~ input, .surveyTemplate label ~ textarea {
  width: 85%;
}

.labelNumber {
  width: auto !important;
  font-style: italic;
  color: #006BAE;
}

.newSection {
  margin: 10px 0;
}
.newSection svg {
  margin-right: 10px;
  vertical-align: middle;
}
.newSection svg path {
  fill: #FFFFFF;
}
.newSection:hover svg path {
  fill: #20BA5B;
}

.numbersQuestions {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: #20BA5B;
  border: 2px solid #20BA5B;
  padding: 5px;
  font-size: 20px;
  line-height: 20px;
  width: 35px !important;
  height: 35px;
  text-align: center !important;
  margin-right: 15px;
}

.sectionSurvey {
  margin: 30px 0;
  display: block;
  padding: 15px;
  width: 95%;
  position: relative;
  right: -5%;
  background-color: rgba(248, 248, 248, 0.7);
  border: 2px solid #E7E7E7;
  box-shadow: 2px 2px 8px rgba(231, 231, 231, 0.5);
}
.sectionSurvey:first-of-type {
  margin-top: 55px;
}
.sectionSurvey .title {
  width: 100%;
  border-color: transparent;
  font-size: 1em;
}
.sectionSurvey .title .developSection {
  left: -5%;
  position: absolute;
  margin: 2px 0 0 0;
  text-align: center;
}
.sectionSurvey .title .titleInput {
  width: 100%;
}
.sectionSurvey .title button.delete {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  padding: 5px;
  top: -30px;
  right: -10px;
  background-color: tomato;
  text-align: center;
}
.sectionSurvey .title button.delete svg {
  vertical-align: middle;
  width: 40px;
  height: 40px;
}
.sectionSurvey .title button.delete svg path {
  fill: #FFFFFF;
}
.sectionSurvey .title button.delete:hover svg path {
  fill: #FFFFFF;
}
.sectionSurvey .title button.delete:hover span {
  display: block;
}
.sectionSurvey .title button.delete span {
  display: none;
  position: absolute;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: tomato;
  color: #FFFFFF;
  padding: 2px;
  width: 100px;
  left: -50%;
  text-align: center;
}
.sectionSurvey button {
  margin: 0;
}
.sectionSurvey input {
  width: calc(100% - 350px);
  /*
  width: calc(85% - 220px);
  */
}
.sectionSurvey input[type=number]::-webkit-inner-spin-button,
.sectionSurvey input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sectionSurvey .questionTemplate {
  position: relative;
  margin: 15px 0;
  display: block;
  width: 100%;
  padding: 15px;
  border: 2px solid #E7E7E7;
  background-color: #F8F8F8;
  box-shadow: 2px 2px 8px rgba(231, 231, 231, 0.7);
  text-align: left;
}
.sectionSurvey .questionTemplate .close.delete {
  position: absolute;
  top: -15px !important;
  background-color: tomato;
  padding: 0px !important;
  width: 35px !important;
  height: 35px !important;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
}
.sectionSurvey .questionTemplate .close.delete svg {
  vertical-align: middle;
  width: 25px;
  height: 25px;
}
.sectionSurvey .questionTemplate .close.delete svg path {
  fill: #FFFFFF;
}
.sectionSurvey .questionTemplate .close.delete:hover span {
  display: block;
}
.sectionSurvey .questionTemplate .close.delete span {
  display: none;
  position: absolute;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: tomato;
  color: #FFFFFF;
  padding: 2px;
  width: 100px;
  left: 0;
  text-align: center;
}
.sectionSurvey .questionTemplate .ref {
  width: calc(10% - 15px);
  margin-left: 15px;
}
.sectionSurvey .questionTemplate p {
  display: block;
  text-align: left;
}

.sectionSurvey .questionTemplate + .questionTemplate {
  margin-top: 40px;
}
.sectionSurvey .addNewEntry {
  margin-top: 10px;
}
.sectionSurvey .addNewEntry svg {
  vertical-align: middle;
  margin-right: 10px;
}
.sectionSurvey .addNewEntry svg path {
  fill: #FFFFFF;
}
.sectionSurvey .addNewEntry:hover svg path {
  fill: #20BA5B;
}

.sectionSurvey button.surveyDeleteAnswers{
  background-color: #FF6347;
  padding: 7px 7px 7px 7px!important;
  width: 39px; height: 39px;
  margin: 5px 5px 5px 15px;
  border:0px!important;
  position:absolute!important;
}

.sectionSurvey span div input.freeTextCheckbox{
  margin-left: 130px!important;
  width: calc(100% - 480px)!important;
}

button.answer {
  margin-bottom: 5px;
}
button.answer svg {
  margin-right: 10px;
  vertical-align: middle;
}
button.answer svg path {
  fill: #FFFFFF;
}
button.answer:hover svg path {
  fill: #20BA5B;
}

.surveyDetails {
  display: block;
  width: 60%;
  height: 80%;
  top: 10%;
  position: absolute;
  z-index: 950;
  right: 0;
  box-shadow: -2px 2px 8px rgba(35, 31, 32, 0.2);
}
.surveyDetails header {
  justify-content: flex-end;
}
.surveyDetails table {
  vertical-align: top;
}

section.notifs-section a:hover:after {
  display: none;
}
section.notifs-section h1 {
  width: 23%;
}
section.notifs-section select {
  display: block;
  margin-top: 2%;
}

button.notifs-button {
  margin-top: 5%;
  position: relative;
  z-index: 300;
  display: block;
  top: 10px;
  margin: auto;
  border-color: #20BA5B;
  color: #20BA5B;
}
button.notifs-button:hover {
  background-color: #20BA5B;
  color: #FFFFFF;
}

section h1 span.pulse {
  display: inline-block;
  border-radius: 5px;
  padding: 0 1.5%;
  color: #FFFFFF;
  background-color: tomato;
}
section ol.retards li a p {
  color: tomato;
}
section ol.retards li a p:before {
  content: "";
  border-radius: 50%;
  display: inline-block;
  width: 15px;
  margin: 1% 2% 0 0;
  height: 15px;
  background-color: tomato;
}

ol.urgence li {
  font-size: 0.9em;
  width: -webkit-calc(15% - 14px);
  width: -moz-calc(15% - 14px);
  width: calc(15% - 14px);
}
ol.urgence li a h3 {
  background-color: tomato;
}
ol.urgence li a:hover h3 {
  background-color: #ff3814;
}
ol.urgence li a:hover:hover:after {
  display: none;
}

article.rapport form {
  width: 85%;
}
article.rapport form label {
  color: #006BAE;
  border: 1px solid #006BAE;
  padding: 1%;
  text-align: center;
  width: 5%;
  line-height: inherit;
}
article.rapport form select {
  margin-right: 5%;
}
article.rapport form input {
  width: 20%;
}
article.rapport form button {
  float: right;
  margin-top: 0;
}
article.rapport form button:last-child {
  border-color: #20BA5B;
  color: #20BA5B;
}
article.rapport form button:last-child:hover {
  background-color: #20BA5B;
  color: #FFFFFF;
}

.ecarnetResident ol {
  padding-right: 0;
  margin-right: 0 !important;
  width: 100%;
}

.scrollable {
  width: 100%;
  overflow-y: auto;
}

li.scrollable {
  height: 65vh;
}

.task-only-page form input, .task-only-page form select {
  width: 80%;
}

@media only screen and (max-width: 1600px) {
  .dashboard nav button svg {
    height: 43px;
    width: 43px;
  }

  .oneperson-only nav button svg {
    height: 43px;
    width: 43px;
  }
  .oneperson-only div:before {
    top: -2.2em !important;
  }
}
@media only screen and (max-width: 1400px) {
  .ecarnetResident ol li div h1 {
    font-size: 1em !important;
  }
}
@media only screen and (max-width: 1280px) {
  .oneperson-only nav img {
    width: 4.2%;
    height: 4.2%;
  }

  .dashboard nav img {
    width: 4.2%;
    height: 4.2%;
  }
}
@media only screen and (max-width: 1200px) {
  /* body {
  	font-size: .8em;
  } */
  .oneperson-only nav ul {
    width: 65%;
  }
}
@media only screen and (max-width: 990px) {
  #sidebar {
    width: 100%;
    height: auto;
    top: 0;
    padding: 0;
  }
  #sidebar nav ol {
    display: none;
  }
  #sidebar nav ol li {
    background-color: #006BAE;
  }
  #sidebar nav ol li.notifications a span {
    padding: 0 1%;
  }

  main {
    width: 100%;
    padding-left: 0;
    /*margin-top: 6%;*/
  }
  main .dashboard nav .dropdown ul,
main .oneperson-only nav .dropdown ul {
    left: -3% !important;
    width: 100% !important;
    top: 225px;
  }
  main .dashboard nav .dropdown ul li a,
main .oneperson-only nav .dropdown ul li a {
    width: 150px !important;
  }
  main header form {
    margin-top: 2%;
    width: 50%;
  }
  main header form input {
    width: 100%;
  }
  main header form nav ul {
    z-index: 300;
    width: 48.5%;
  }
  main header .header-items a.callSpeaker {
    height: 17px;
  }
  main article.informationForm ol {
    display: block;
    top: 30px;
  }
  main article.informationForm ol:before {
    top: -46px;
  }
  main article.informationForm ol li {
    width: 100% !important;
    border-width: 0px 0px 0px 0px;
  }
  main button {
    margin-top: 0;
    padding: 8px 18px;
  }
  main button mods .tile li {
    width: -webkit-calc(50% - 14px);
    width: -moz-calc(50% - 14px);
    width: calc(50% - 14px);
  }
  main button table {
    /* font-size: .8em; */
  }
  main button table thead {
    display: none;
  }
  main button .dropdown ul li {
    padding: 0 !important;
    background-color: #FFFFFF !important;
  }
  main .oneperson-only nav img {
    width: 4.5%;
    height: 4.5%;
  }
  main .oneperson-only nav ul {
    width: 100%;
  }
  main .oneperson-only nav ul li {
    padding: 2%;
    background-color: #E7E7E7;
    width: 40%;
    margin-bottom: 2%;
  }
  main .oneperson-only article table thead {
    top: -8px;
    display: block;
  }
  main .oneperson-only article div ol li label:first-child {
    width: 100%;
    padding: 2%;
    text-align: center;
  }
  main .oneperson-only article div ol li input {
    width: 100%;
    padding: 5%;
    text-align: center;
  }
  main .oneperson-only article div:before {
    top: -1em;
  }
  main .tasks-page article {
    flex-wrap: wrap;
  }
  main .tasks-page article ol {
    width: 100%;
  }
}
/*@media only screen and (max-width: 990px) and (max-width: 850px) {
!*  main {
    margin-top: 8%;
  }*!
}*/
@media only screen and (max-width: 990px) and (max-width: 750px) {
/*  main {
    margin-top: 10%;
  }*/
  main article.informationForm ol {
    display: block;
    top: 30px;
  }
  main article.informationForm ol:before {
    top: -46px;
  }
  main article.informationForm ol li {
    width: 100% !important;
    border-width: 0px 0px 0px 0px;
  }
}
@media only screen and (max-width: 990px) and (max-width: 330px) and (min-width: 0px) {
  #sidebar #menu {
    top: 68px;
  }
  #sidebar ol a {
    padding: 4px 30px;
  }

  main {
    margin-top: 24%;
  }
  main header {
    padding: 0 0 0 15px;
  }
  main header span.header-items {
    flex-wrap: wrap;
    height: 75%;
  }
  main header span.header-items a.callSpeaker {
    height: 20px;
  }
  main header span.header-items a.admin-photo {
    margin-right: 15%;
  }
  main header button {
    top: 15%;
    margin-right: 25%;
  }
  main .oneperson-only article + article ol li span {
    width: 100%;
  }
  main .oneperson-only article + article + article#notes button {
    padding: 8px;
    top: 0;
    float: right;
    width: 27%;
    margin-right: 10%;
    align-self: auto;
  }
  main .oneperson-only article table thead {
    display: none;
  }
  main .oneperson-only article table td {
    display: block;
  }
  main form textarea {
    width: 100%;
  }
  main form input {
    width: 100%;
  }
  main .tasks-page article {
    width: 100%;
  }
  main .tasks-page article ol {
    margin: 30px 0 0 0;
  }
  main .groupe-page ol {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0;
  }
  main .groupe-page ol li {
    width: 100%;
  }
  main .survey-page {
    position: initial;
    width: 100%;
    overflow-x: hidden;
  }
}
div.modifications {
  border: 5px solid #006BAE;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  width: 90%;
  background-color: #FFFFFF;
  padding: 1% 3% 3% 5%;
  margin: auto;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 300;
  top: 4em;
}
div.modifications form {
  margin: 0;
}
div.modifications ol {
  margin: 0;
  width: 100%;
  list-style-type: none;
}
div.modifications ol li label:first-child {
  color: #FFFFFF;
  background-color: #20BA5B;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 30%;
  padding: 10px;
}
div.modifications ol li label.photo-input {
  position: relative;
  top: -0.6em;
}
div.modifications ol li input {
  padding: 16px;
  height: 32px;
  border-color: rgba(0, 107, 174, 0.6);
  color: #006BAE;
  /* &::-webkit-input-placeholder {
  	color: $blue !important;
  }
  &::-moz-placeholder {
  	color: $blue !important;
  } */
}
div.modifications ol li input:first-child {
  font-weight: bold;
  font-size: 1.2em;
  color: #006BAE;
}
div.modifications ol li input[type=checkbox] {
  width: initial;
}
div.modifications ol li input[type=time]::-webkit-inner-spin-button, div.modifications ol li input[type=date]::-webkit-inner-spin-button {
  display: none;
}
div.modifications ol li input[type=time]::-webkit-outer-spin-button, div.modifications ol li input[type=date]::-webkit-outer-spin-button {
  display: none;
}
div.modifications ol li select.days-select {
  height: 80px;
  position: absolute;
}
div.modifications ol.days-select-reccuring {
  display: flex;
  flex-wrap: wrap;
  margin-top: 3%;
  padding: 2%;
  width: 100% !important;
  background-color: #b4f2cc;
}
div.modifications ol.days-select-reccuring li {
  justify-content: flex-start;
  margin-top: 5px !important;
  width: 25% !important;
}
div.modifications ol.days-select-reccuring li label {
  width: 150px;
  background-color: #006BAE;
}
div.modifications:before {
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  border: 5px solid #006BAE;
  border-width: 5px 5px 0 0;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
  display: block;
  position: relative;
  left: 45%;
  top: -2.5em;
}
div.modifications button {
  float: none !important;
}
div.modifications button:hover {
  background-color: #006BAE;
  color: #FFFFFF;
}
div.modifications input[type=checkbox]:not(:checked), div.modifications input[type=checkbox]:checked {
  width: 2% !important;
  position: absolute;
  margin: 0;
}

div.modifications aside {
  border: 1px solid #20BA5B;
  border-width: 0 0 1px 0;
  padding: 10px 0;
}
div.modifications aside ol:first-child {
  margin-top: 0 !important;
}
div.modifications aside ol.collumnThree {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
div.modifications aside ol.collumnThree li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 10px 0 0 !important;
  width: 30%;
}
div.modifications aside ol.collumnThree li label {
  width: 30%;
  line-height: 1.3em;
}
div.modifications aside ol.collumnThree li input {
  width: 60% !important;
}
div.modifications aside ol.collumnThree li input[type=checkbox] {
  position: inherit !important;
  width: 20% !important;
}
div.modifications aside ol.collumnThree li.checkboxTask {
  justify-content: flex-start;
}
div.modifications aside ol.collumnTwo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
div.modifications aside ol.collumnTwo li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 10px 0 0 !important;
  width: 45%;
}
div.modifications aside ol.collumnTwo li label {
  line-height: 1.3em;
  width: 30%;
}
div.modifications aside ol.collumnTwo li input {
  width: 60% !important;
}
div.modifications aside ol.collumnTwo li input[type=checkbox] {
  position: inherit !important;
  width: 20% !important;
}
div.modifications aside ol.collumnTwo li select {
  width: 60% !important;
}
div.modifications aside ol.collumnTwo li button {
  width: 60% !important;
  text-align: center;
}
div.modifications aside ol.collumnTwo li.checkboxTask {
  justify-content: flex-start;
}
div.modifications aside ol.collumnOne {
  display: block;
  margin-top: 20px;
}
div.modifications aside ol.collumnOne li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.modifications aside ol.collumnOne li.checkboxTask {
  justify-content: flex-start;
}
div.modifications aside ol.collumnOne li label {
  line-height: 1.3em;
  width: 20% !important;
}
div.modifications aside ol.collumnOne li input {
  width: 75% !important;
}
div.modifications aside ol.collumnOne li input[type=checkbox] {
  position: relative;
  width: 4% !important;
}
div.modifications aside ol.collumnOne li select {
  width: 35%;
}
div.modifications ol.majButton {
  margin-top: 30px;
}
div.modifications ol.majButton li {
  width: 100%;
  text-align: right;
}

aside.popUpPlanning {
  display: none;
  position: fixed;
  z-index: 320;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 0 3% 3% 3%;
  width: 90%;
  height: 90%;
  overflow: auto;
  top: 5%;
  left: 5%;
  background-color: #FFFFFF;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
aside.popUpPlanning header button svg g {
  fill: tomato;
}
aside.popUpPlanning header button:hover svg g {
  fill: #FFFFFF;
}
aside.popUpPlanning input {
  display: block;
  margin-top: 2%;
  width: 100%;
}
aside.popUpPlanning div {
  display: flex;
  flex-wrap: wrap;
}
aside.popUpPlanning div ol {
  list-style-type: none;
  width: 45%;
  border: 5px solid rgba(0, 107, 174, 0.6);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 1%;
}
aside.popUpPlanning div ol li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1%;
}
aside.popUpPlanning div ol li:hover {
  background-color: #E7E7E7;
}
aside.popUpPlanning div ol li:nth-child(2n+2) {
  background-color: rgba(32, 186, 91, 0.05);
}
aside.popUpPlanning div ol li:nth-child(2n+2):hover {
  background-color: #E7E7E7;
}
aside.popUpPlanning div ol li button {
  margin-top: 0;
  padding: 5px 15px;
}
aside.popUpPlanning div:before {
  display: none;
}

.popupArticle {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background: rgba(0, 76, 123, 0.9);
  height: 100%;
  width: 100%;
}
.popupArticle .closePopup {
  position: absolute;
  z-index: 10000;
  padding: 5px;
  text-align: center;
  font-weight: 700;
  font-size: 1.2em;
  top: 5%;
  right: 5%;
  background: #FFFFFF;
  width: 40px;
  height: 40px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #004c7b;
}
.popupArticle .closePopup[type=submit]:before {
  display: none;
}
.popupArticle .closePopup:before {
  display: none;
}
.popupArticle .closePopup:hover {
  border: 2px solid tomato;
  color: tomato;
}
.popupArticle div {
  overflow-y: auto;
  padding: 30px 60px;
  width: 90%;
  height: 80%;
  margin: auto;
  display: block;
  background-color: #FFFFFF;
  box-shadow: 5px 4px 11px rgba(35, 31, 32, 0.5);
}

.message-to-user {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10000;
  height: 100%;
  width: 100%;
  background-color: rgba(35, 31, 32, 0.2);
}
.message-to-user div {
  position: absolute;
  top: 0;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  left: 24%;
  width: 40%;
  height: 30vh;
  text-align: center;
}
.message-to-user div h1 {
  margin-top: 15px;
  width: 100%;
  text-align: center;
  padding: 15px 30px;
  color: #FFFFFF;
  border-width: 0 0 0 0;
  height: 20vh;
  word-wrap: break-word;
}
.message-to-user div button {
  background-color: #FFFFFF;
  border-width: 0 0 0 0;
}
.message-to-user.errorAlert div {
  background-color: tomato;
}
.message-to-user.errorAlert div button {
  color: tomato;
}
.message-to-user.infoAlert div {
  background-color: #fd6928;
}
.message-to-user.infoAlert div button {
  color: #fd6928;
}
.message-to-user.successAlert div {
  background-color: #20BA5B;
}
.message-to-user.successAlert div button {
  color: #20BA5B;
}

.helpHover div {
  display: none;
  position: absolute;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #FFFFFF;
  max-width: 150px;
  height: auto;
  color: #006BAE;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
  line-height: 17px;
}
.helpHover div svg {
  position: relative;
  top: 7px;
  width: 25px;
  height: 25px;
}
.helpHover div svg path {
  fill: #20BA5B;
}
.helpHover div:before {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #FFFFFF;
}
.helpHover:hover {
  cursor: help;
}
.helpHover:hover div {
  display: block;
}

.dashboardPopup div {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #FFFFFF;
  position: absolute;
  z-index: 500;
  width: calc(20% - 14px);
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
}
.dashboardPopup div:before {
  position: absolute;
  top: -20px;
  left: calc(50% - 20px);
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #FFFFFF;
}
.dashboardPopup div h1 {
  font-size: 1.2em;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.dashboardPopup div input {
  width: 100%;
  margin-left: 10px;
}
.dashboardPopup div button {
  width: 45%;
  text-align: center;
}
.dashboardPopup div p:last-child {
  margin-top: 10px;
}
.dashboardPopup div p:last-child button {
  width: auto;
  margin-left: 0;
}

.delayAdvance div p:first-of-type button {
  padding: 0;
  margin-left: 15%;
  display: block;
  width: 20%;
}
.delayAdvance div p:first-of-type button:first-child {
  margin-bottom: 10px;
}
.delayAdvance div p:first-of-type input {
  display: inline-block;
  width: 100%;
  margin-left: 10px;
}
.delayAdvance div p:first-of-type span {
  text-align: left;
  padding: 0 10px;
  font-size: 1.2em;
  width: 90%;
  display: inline-block;
}

.popupCalendar {
  position: fixed;
  margin-top: 0 !important;
  z-index: 950;
  display: block;
  background-color: rgba(35, 31, 32, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}
.popupCalendar div {
  position: absolute;
  padding: 15px 30px;
  overflow-y: auto;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
  background-color: #FFFFFF;
  width: 70%;
  height: 80%;
  right: 10%;
  top: 5%;
  animation: none;
}
.popupCalendar div span.tasksCollumn {
  display: flex;
  width: 100% !important;
  height: 75%;
  text-align: center;
}
.popupCalendar div div.tasks {
  vertical-align: top;
  padding: 10px;
  position: static;
  margin-top: 2%;
  display: inline-block;
  box-shadow: 0 0 0 rgba(35, 31, 32, 0);
  border: 4px solid #E7E7E7;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.popupCalendar div div.tasks table {
  text-align: left;
}
.popupCalendar div div.tasks table tbody td {
  position: relative;
}
.popupCalendar div div.tasks .detalsTask {
  position: absolute;
  right: 0px;
  top: 50px;
  padding: 10px;
  z-index: 155;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
  background-color: #FFFFFF;
  width: 250%;
  height: auto;
}
.popupCalendar div div.tasks .detalsTask a#close {
  top: 15px;
  padding: 0 15px 0 0;
  border: transparent;
}
.popupCalendar div div.tasks .detalsTask a#close:before {
  width: 20px;
  height: 20px;
  background-size: 60% 60%;
}
.popupCalendar div div.tasks .detalsTask p {
  display: block;
  width: 100%;
  position: static;
}
.popupCalendar div div.tasks .detalsTask p label, .popupCalendar div div.tasks .detalsTask p input, .popupCalendar div div.tasks .detalsTask p textarea {
  display: block;
  width: 100% !important;
}
.popupCalendar div div.tasks .detalsTask:after {
  position: absolute;
  top: -15px;
  right: 15px;
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-width: 0px 15px 15px 15px;
  border-color: transparent transparent #FFFFFF transparent;
}
.popupCalendar div div.arrow {
  align-self: center;
  vertical-align: top;
  padding: 0;
  margin: 0 10px;
  overflow: hidden;
  position: static;
  margin-top: 2%;
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 rgba(35, 31, 32, 0);
  border: 4px solid rgba(35, 31, 32, 0);
  height: 100%;
}
.popupCalendar div div.arrow a {
  padding: 0;
  border: transparent;
}
.popupCalendar div div.arrow a:before {
  display: none;
}
.popupCalendar div div.arrow img {
  opacity: 0.5;
}
.popupCalendar div div.arrow img:hover {
  cursor: pointer;
}
.popupCalendar div form input, .popupCalendar div form select {
  width: 80%;
}
.popupCalendar div form p:last-child {
  position: static;
}
.popupCalendar div form p span:last-child {
  width: 5%;
}
.popupCalendar div p:last-child {
  background-color: #FFFFFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: fixed;
  bottom: 17%;
  right: 12%;
  width: auto;
  z-index: 951;
}
.popupCalendar div p:last-child button {
  margin-right: 0;
}

.popup-notebook {
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 50px;
  display: block;
  background: #FFFFFF;
  width: 200px !important;
  padding: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.popup-notebook h2 {
  padding: 5px;
  display: block;
  text-align: left;
  margin: 0;
}
.popup-notebook ol {
  padding-left: 30px;
  list-style-position: inside;
  list-style: disc !important;
  text-align: left;
}
.popup-notebook ol li {
  color: #006BAE;
  text-align: left;
}
.popup-notebook ol li + li {
  margin-top: 2px;
}

.close {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.close:hover {
  color: #006BAE;
  background-color: #FFFFFF;
  border: transparent;
}

.dropdown {
  display: inline-block;
  width: 5%;
  margin-left: 2%;
}
.dropdown:hover ul {
  display: flex !important;
}
.dropdown:hover .nav-icon1 span:nth-child(1) {
  background: #20BA5B;
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.dropdown:hover .nav-icon1 span:nth-child(2) {
  background: #20BA5B;
  opacity: 0;
  left: -60px;
}
.dropdown:hover .nav-icon1 span:nth-child(3) {
  background: #20BA5B;
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown button.menu-button {
  padding: 5px 10px;
  top: auto;
  font-size: 1.5em;
  left: 2%;
  z-index: 180;
  background-color: #006BAE;
  border: 1px solid #006BAE;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #FFFFFF;
}
.dropdown button.menu-button:hover {
  color: #006BAE;
  background-color: #FFFFFF;
}
.dropdown ul {
  display: none;
  position: absolute;
  left: 280px;
  margin: 0;
  justify-content: flex-start;
  padding: 10px 10px 0 10px;
  width: 86%;
  flex-wrap: wrap;
  overflow-x: auto;
  list-style-type: none;
  background-color: white;
  z-index: 1000;
  border: 1px solid #E7E7E7;
  box-shadow: 4px 4px 10px rgba(35, 31, 32, 0.4);
}
.dropdown ul li {
  margin: 1% 0.3%;
}
.dropdown ul li a.blue-link {
  background-color: #006BAE !important;
  border-bottom: 4px solid #006BAE !important;
}
.dropdown ul li a.blue-link:hover {
  border-bottom: 4px solid #004c7b !important;
}
.dropdown ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  font-size: 1em;
  line-height: 1em;
  background-color: #20BA5B;
  border-bottom: 4px solid #20BA5B;
  width: 120px;
  height: 60px;
  border-radius: 5px;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.1s linear;
}
.dropdown ul li a:hover {
  border: 4px solid #198e46;
  border-width: 0 0 4px 0;
}
.dropdown ul li a svg {
  position: relative;
  left: 10px;
  width: 24px;
  height: 24px;
}
.dropdown ul::-webkit-scrollbar {
  width: 1em;
}
.dropdown ul::-webkit-scrollbar-track {
  border: 1px solid #E7E7E7;
}
.dropdown ul::-webkit-scrollbar-thumb {
  background-color: rgba(0, 107, 174, 0.4);
}

.showdropdown {
  display: flex !important;
}

.extended .dropdown ul {
  left: 0;
  width: 100%;
}

.dropdown-block {
  position: relative;
  display: inline-block;
}
.dropdown-block .dropdown-trigger {
  position: relative;
  margin: 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.dropdown-block .dropdown-trigger:after {
  position: relative;
  left: 10px;
  top: -2px;
  vertical-align: middle;
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #006BAE transparent transparent transparent;
}
.dropdown-block .dropdown-trigger:hover:after {
  border-color: #FFFFFF transparent transparent transparent;
}
.dropdown-block .dropdown-trigger.small:after {
  border-width: 5px 5px 0 5px;
  left: 5px;
}
.dropdown-block button {
  padding: 12px 24px;
}

.dropdown-content {
  position: absolute;
  z-index: 180;
  left: 0;
  top: 100%;
  list-style-type: none;
  margin: 0;
  width: 100%;
}
.dropdown-content li {
  width: 100%;
}
.dropdown-content li + li {
  margin-top: 0;
}
.dropdown-content li a {
  display: block;
  text-align: left;
  font-size: 1em;
  margin: 0;
  background-color: #FFFFFF;
  width: 100%;
  border: 0px solid transparent;
  border-bottom: 1px solid #E7E7E7;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}
.dropdown-content li a:hover {
  background-color: #006BAE;
  color: #FFFFFF;
}

.nav-icon1 {
  display: block;
  width: 45px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

.nav-icon1 span {
  display: block;
  position: absolute;
  height: 7px;
  width: 100%;
  background: #006BAE;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.nav-icon1 span:nth-child(1) {
  top: 3px;
}

.nav-icon1 span:nth-child(2) {
  top: 17px;
}

.nav-icon1 span:nth-child(3) {
  top: 31px;
}

.item-add form.one-area {
  margin: 0 !important;
  padding: 30px 0;
  width: 100%;
}
.item-add form.one-area p {
  display: flex;
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  margin: 0 !important;
}
.item-add form.one-area p label {
  margin: 0 10px 0 0 !important;
  color: #231F20;
  width: calc(10% - 10px);
  text-align: left !important;
}
.item-add form.one-area p label span {
  float: left;
  text-align: left;
  width: 100%;
  display: inline-block;
}
.item-add form.one-area p input,
.item-add form.one-area p textarea {
  margin: 0 !important;
  width: 80%;
  max-width: 80%;
  min-width: 80%;
}
.item-add form.two-area {
  margin: 0 !important;
  padding: 30px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item-add form.two-area p {
  display: flex;
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  align-items: center;
  width: 50%;
  margin: 0 !important;
}
.item-add form.two-area p label {
  margin: 0 10px 0 0 !important;
  color: #231F20;
  width: calc(10% - 10px);
  text-align: left !important;
}
.item-add form.two-area p label span {
  float: left;
  text-align: left;
  width: 100%;
  display: inline-block;
}
.item-add form.two-area p input,
.item-add form.two-area p textarea {
  margin: 0 !important;
  width: 80%;
  max-width: 80%;
  min-width: 80%;
}
.item-add form.four-area {
  margin: 0 !important;
  padding: 30px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item-add form.four-area p {
  display: flex;
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  align-items: center;
  width: 25%;
  margin: 0 !important;
}
.item-add form.four-area p label {
  margin: 0 10px 0 0 !important;
  color: #231F20;
  width: calc(10% - 10px);
  text-align: left !important;
}
.item-add form.four-area p label span {
  float: left;
  text-align: left;
  width: 100%;
  display: inline-block;
}
.item-add form.four-area p input,
.item-add form.four-area p textarea {
  margin: 0 !important;
  width: 80%;
  max-width: 80%;
  min-width: 80%;
}
.item-add p:last-child {
  text-align: right;
  justify-content: flex-end;
}

.exception_date span {
  display: flex;
  align-items: center;
  width: 100%;
}
.exception_date span table {
  margin-right: 5%;
  padding: 2%;
  width: 40%;
  border: 1px solid #E7E7E7;
}
.exception_date span input {
  width: 15%;
}
.exception_date span button {
  margin-top: 0;
  padding: 7px 15px;
  font-size: 0.9em;
  position: absolute;
  right: 2%;
}

.form-detail label {
  width: 30%;
}
.form-detail input {
  width: 60%;
}
.form-detail div {
  width: 45%;
}
.form-detail .double-left {
  float: left;
}
.form-detail .double-right {
  float: left;
  margin-left: 10px;
}
.form-detail .ng-invalid {
  border: solid 1px tomato;
}
div.form-detail .wide-label{
  width:13.5% !important;
}
div.form-detail .wide-text-area{
  width:72% !important;
  resize: vertical !important;
}


div.tooltip {
  width: 80% !important;
}
div.tooltip input {
  width: calc(100% - 20px) !important;
}

.mandatory {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mandatory .ng-invalid {
  border: solid 1px tomato;
}
.mandatory label {
  display: inline-block;
  margin-right: 20px;
  width: 200px;
  padding: 11px 0;
  color: #3a3b3b;
  border: 1px solid #e7e7e7;
  border-width: 0 0 1px 0;
  text-align: left;
}
.mandatory label span {
  color: #231F20;
  margin: auto !important;
}
.mandatory label ~ input, .mandatory label ~ select, .mandatory label ~ textarea {
  margin-right: 15px !important;
}
.mandatory span {
  color: tomato;
  width: auto !important;
  text-align: center;
  display: inline-block !important;
}
.mandatory span span {
  color: tomato;
  display: inline-block !important;
}
.mandatory select {
  width: -webkit-calc(100% - 224px);
  width: -moz-calc(100% - 224px);
  width: calc(100% - 224px);
}

form.three-area {
  display: flex;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 30px 0;
  width: 100%;
}
form.three-area p {
  display: flex;
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  align-items: center;
  width: calc(100% / 3);
  margin: 0 !important;
}
form.three-area p label {
  margin: 0 10px 0 0 !important;
  color: #231F20;
  width: calc(10% - 10px);
  text-align: left !important;
}
form.three-area p label span {
  float: left;
  text-align: left;
  width: 100%;
  display: inline-block;
}
form.three-area p input,
form.three-area p textarea {
  margin: 0 !important;
  width: 80%;
  max-width: 80%;
  min-width: 80%;
}

.tooltip {
  position: relative;
  display: inline-block;
  /* Tooltip text */
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: fit-content !important;
  background-color: white;
  color: tomato;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 105%;
  left: 50px;
  margin-left: -60px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
  border-width: 1px;
  border-style: solid;
  border-color: tomato;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: tomato transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.detailTab main {
  padding: 0;
  width: 100%;
}
.detailTab main header {
  justify-content: flex-start;
  background-color: transparent;
}
.detailTab main header h1 {
  color: #004c7b;
}
.detailTab main header h1 + h1 {
  margin-left: 50px;
}
.detailTab main header nav {
  margin: 0 0 0 auto !important;
  justify-self: flex-end;
  width: 50%;
  float: right;
  position: static !important;
}
.detailTab main header nav ol {
  display: flex;
  justify-content: flex-end;
  border: 0px !important;
}

.templateTimetable {
  display: block !important;
}
.templateTimetable .timetableCalendar {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: transparent !important;
  border: 1px solid transparent;
}
.templateTimetable table:first-child thead {
  background-color: #E7E7E7;
}
.templateTimetable table:first-child thead th {
  padding: 10px 15px !important;
}
.templateTimetable table:first-child thead th:first-child {
  color: #FFFFFF;
  background-color: #006BAE;
}
.templateTimetable table:first-child thead th:nth-child(7), .templateTimetable table:first-child thead th:nth-child(8) {
  color: #20BA5B;
}
.templateTimetable table:first-child tbody tr td {
  padding: 0;
  border: 1px solid #E7E7E7;
  border-width: 1px 1px 1px 0;
  width: calc(93% / 7);
  vertical-align: top;
}
.templateTimetable table:first-child tbody tr td.timetableHours {
  vertical-align: middle;
  height: 70px;
  width: 7%;
  padding-left: 10px;
  color: #FFFFFF;
  background-color: #006BAE;
}
.templateTimetable table:first-child tbody tr td span {
  position: relative;
  display: block;
  width: 100%;
  height: 35px;
}
.templateTimetable table:first-child tbody tr td span a {
  position: absolute;
  display: block;
  padding: 5px;
  width: 100%;
  height: 35px;
  border: 3px solid #20BA5B;
  border-width: 0 0 0 3px;
  text-decoration: none;
  background-color: #E7E7E7;
  color: #006BAE;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.templateTimetable table:first-child tbody tr td span a:hover {
  background-color: #20BA5B;
  color: #FFFFFF;
}
.templateTimetable table:first-child tbody tr td span a.m30 {
  height: 35px;
}
.templateTimetable table:first-child tbody tr td span a.m60 {
  height: 70px;
}
.templateTimetable table:first-child tbody tr td span a.m90 {
  height: 105px;
}
.templateTimetable table:first-child tbody tr td span a.m120 {
  height: 140px;
}
.templateTimetable table:first-child tbody tr td span a.m150 {
  height: 175px;
}
.templateTimetable table:first-child tbody tr td span a.m180 {
  height: 210px;
}
.templateTimetable table:first-child tbody tr:hover {
  background-color: transparent;
}
.templateTimetable p:last-child {
  wisth: 100%;
  text-align: right;
}

.popupTimetable {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
}
.popupTimetable div {
  position: fixed;
  z-index: 1000;
  width: 50%;
  background-color: #FFFFFF !important;
  right: 0;
  top: 10%;
  height: 80%;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  border-left: 2px solid #006BAE;
  padding: 10px 20px 20px;
}
.popupTimetable div form select {
  width: calc(90% - 224px);
}
.popupTimetable div form input {
  width: calc(90% - 224px);
}
.popupTimetable div form span {
  color: tomato;
  padding-left: 10px;
}
.popupTimetable div table td button {
  float: right;
}
.popupTimetable div h3 {
  padding: 10px 0;
  color: #006BAE;
}

header button, header h2 {
  display: inline-block;
  margin: 0 15px;
}

.timetableBasket {
  display: block !important;
}
.timetableBasket .timetableCalendar {
  height: 70vh;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: transparent !important;
  border: 1px solid transparent;
}
.timetableBasket table:first-child thead {
  background-color: #E7E7E7;
}
.timetableBasket table:first-child thead th {
  padding: 10px 15px !important;
}
.timetableBasket table:first-child thead th:first-child {
  color: #FFFFFF;
  background-color: #006BAE;
}
.timetableBasket table:first-child thead th:nth-child(7), .timetableBasket table:first-child thead th:nth-child(8) {
  color: #20BA5B;
}
.timetableBasket table:first-child tbody tr td {
  padding: 0;
  border: 1px solid #E7E7E7;
  border-width: 1px 1px 1px 0;
  width: calc(93% / 7);
  vertical-align: top;
}
.timetableBasket table:first-child tbody tr td.timetableHours {
  vertical-align: middle;
  height: 70px;
  width: 7%;
  padding-left: 10px;
  color: #FFFFFF;
  background-color: #006BAE;
}
.timetableBasket table:first-child tbody tr td span {
  position: relative;
  display: block;
  width: 100%;
  height: 35px;
}
.timetableBasket table:first-child tbody tr td span a {
  position: absolute;
  display: block;
  padding: 5px;
  width: 100%;
  height: 35px;
  border: 3px solid #20BA5B;
  border-width: 0 0 0 3px;
  text-decoration: none;
  background-color: #E7E7E7;
  color: #006BAE;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.timetableBasket table:first-child tbody tr td span a:hover {
  background-color: #20BA5B;
  color: #FFFFFF;
}
.timetableBasket table:first-child tbody tr td span a.m30 {
  height: 35px;
}
.timetableBasket table:first-child tbody tr td span a.m60 {
  height: 70px;
}
.timetableBasket table:first-child tbody tr td span a.m90 {
  height: 105px;
}
.timetableBasket table:first-child tbody tr td span a.m120 {
  height: 140px;
}
.timetableBasket table:first-child tbody tr td span a.m150 {
  height: 175px;
}
.timetableBasket table:first-child tbody tr td span a.m180 {
  height: 210px;
}
.timetableBasket table:first-child tbody tr:hover {
  background-color: transparent;
}
.timetableBasket p:last-child {
  wisth: 100%;
  text-align: right;
}
.timetableBasket .basket {
  margin-top: 30px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #20BA5B;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
}
.timetableBasket .basket tr {
  cursor: pointer;
}
.timetableBasket .basket h2 {
  background-color: transparent !important;
  color: #006BAE;
}

.popupTimetable {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
}
.popupTimetable div {
  position: fixed;
  z-index: 1000;
  width: 50%;
  background-color: #FFFFFF !important;
  right: 0;
  top: 10%;
  height: 80%;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  border-left: 2px solid #006BAE;
  padding: 10px 20px 20px;
}
.popupTimetable div form select {
  width: calc(90% - 224px);
}
.popupTimetable div form input {
  width: calc(90% - 224px);
}
.popupTimetable div form span {
  color: tomato;
  padding-left: 10px;
}
.popupTimetable div table td button {
  float: right;
}
.popupTimetable div h3 {
  padding: 10px 0;
  color: #006BAE;
}

/* @media only screen and (max-width: 1020px) {
	.timetableCalendar, .timetableBasket {
		span a {
			font-size: 0.8em;
		}
	}
} */
/*!
 * FullCalendar v2.7.3 Stylesheet
 * Docs & License: http://fullcalendar.io/
 * (c) 2016 Adam Shaw
 */
.fc {
  direction: ltr;
  text-align: left;
}

.fc-rtl {
  text-align: right;
}

body .fc {
  /* extra precedence to overcome jqui */
  font-size: 1em;
}

/* Colors
--------------------------------------------------------------------------------------------------*/
.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-content,
.fc-unthemed .fc-popover {
  border-color: #ddd;
}

.fc-unthemed .fc-popover {
  background-color: #fff;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header {
  background: #eee;
}

.fc-unthemed .fc-popover .fc-header .fc-close {
  color: #666;
}

.fc-unthemed .fc-today {
  background: #fcf8e3;
}

.fc-highlight {
  /* when user is selecting cells */
  background: #bce8f1;
  opacity: 0.3;
  filter: alpha(opacity=30);
  /* for IE */
}

.fc-bgevent {
  /* default look for background events */
  background: #8fdf82;
  opacity: 0.3;
  filter: alpha(opacity=30);
  /* for IE */
}

.fc-nonbusiness {
  /* default look for non-business-hours areas */
  /* will inherit .fc-bgevent's styles */
  background: #d7d7d7;
}

/* Icons (inline elements with styled text that mock arrow icons)
--------------------------------------------------------------------------------------------------*/
.fc-icon {
  display: inline-block;
  height: 1em;
  line-height: 1em;
  font-size: 1em;
  text-align: center;
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
  /* don't allow browser text-selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*
Acceptable font-family overrides for individual icons:
	"Arial", sans-serif
	"Times New Roman", serif

NOTE: use percentage font sizes or else old IE chokes
*/
.fc-icon:after {
  position: relative;
}

.fc-icon-left-single-arrow:after {
  content: "‹";
  font-weight: bold;
  font-size: 200%;
  top: -7%;
}

.fc-icon-right-single-arrow:after {
  content: "›";
  font-weight: bold;
  font-size: 200%;
  top: -7%;
}

.fc-icon-left-double-arrow:after {
  content: "«";
  font-size: 160%;
  top: -7%;
}

.fc-icon-right-double-arrow:after {
  content: "»";
  font-size: 160%;
  top: -7%;
}

.fc-icon-left-triangle:after {
  content: "◄";
  font-size: 125%;
  top: 3%;
}

.fc-icon-right-triangle:after {
  content: "►";
  font-size: 125%;
  top: 3%;
}

.fc-icon-down-triangle:after {
  content: "▼";
  font-size: 125%;
  top: 2%;
}

.fc-icon-x:after {
  content: "×";
  font-size: 200%;
  top: 6%;
}

/* Buttons (styled <button> tags, normalized to work cross-browser)
--------------------------------------------------------------------------------------------------*/
.fc button {
  /* force height to include the border and padding */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* dimensions */
  margin: 0;
  height: 2.1em;
  padding: 0 0.6em;
  /* text & cursor */
  font-size: 1em;
  /* normalize */
  white-space: nowrap;
  cursor: pointer;
}

/* Firefox has an annoying inner border */
.fc button::-moz-focus-inner {
  margin: 0;
  padding: 0;
}

.fc-state-default {
  /* non-theme */
  border: 1px solid;
}

.fc-state-default.fc-corner-left {
  /* non-theme */
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.fc-state-default.fc-corner-right {
  /* non-theme */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* icons in buttons */
.fc button .fc-icon {
  /* non-theme */
  position: relative;
  top: -0.05em;
  /* seems to be a good adjustment across browsers */
  margin: 0 0.2em;
  vertical-align: middle;
}

/*
  button states
  borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
*/
.fc-state-default {
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fc-state-hover,
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
  color: #333333;
  background-color: #e6e6e6;
}

.fc-state-hover {
  color: #333333;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

.fc-state-down,
.fc-state-active {
  background-color: #cccccc;
  background-image: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fc-state-disabled {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  box-shadow: none;
}

/* Buttons Groups
--------------------------------------------------------------------------------------------------*/
.fc-button-group {
  display: inline-block;
}

/*
every button that is not first in a button group should scootch over one pixel and cover the
previous button's border...
*/
.fc .fc-button-group > * {
  /* extra precedence b/c buttons have margin set to zero */
  float: left;
  margin: 0 0 0 -1px;
}

.fc .fc-button-group > :first-child {
  /* same */
  margin-left: 0;
}

/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-popover {
  position: absolute;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.fc-popover .fc-header {
  /* TODO: be more consistent with fc-head/fc-body */
  padding: 2px 4px;
}

.fc-popover .fc-header .fc-title {
  margin: 0 2px;
}

.fc-popover .fc-header .fc-close {
  cursor: pointer;
}

.fc-ltr .fc-popover .fc-header .fc-title,
.fc-rtl .fc-popover .fc-header .fc-close {
  float: left;
}

.fc-rtl .fc-popover .fc-header .fc-title,
.fc-ltr .fc-popover .fc-header .fc-close {
  float: right;
}

/* unthemed */
.fc-unthemed .fc-popover {
  border-width: 1px;
  border-style: solid;
}

.fc-unthemed .fc-popover .fc-header .fc-close {
  font-size: 0.9em;
  margin-top: 2px;
}

/* jqui themed */
.fc-popover > .ui-widget-header + .ui-widget-content {
  border-top: 0;
  /* where they meet, let the header have the border */
}

/* Misc Reusable Components
--------------------------------------------------------------------------------------------------*/
.fc-divider {
  border-style: solid;
  border-width: 1px;
}

hr.fc-divider {
  height: 0;
  margin: 0;
  padding: 0 0 2px;
  /* height is unreliable across browsers, so use padding */
  border-width: 1px 0;
}

.fc-clear {
  clear: both;
}

.fc-bg,
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-helper-skeleton {
  /* these element should always cling to top-left/right corners */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.fc-bg {
  bottom: 0;
  /* strech bg to bottom edge */
}

.fc-bg table {
  height: 100%;
  /* strech bg to bottom edge */
}

/* Tables
--------------------------------------------------------------------------------------------------*/
.fc table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
  /* normalize cross-browser */
}

.fc th {
  text-align: center;
}

.fc th,
.fc td {
  border-style: solid;
  border-width: 1px;
  padding: 0;
  vertical-align: top;
}

.fc td.fc-today {
  border-style: double;
  /* overcome neighboring borders */
}

/* Fake Table Rows
--------------------------------------------------------------------------------------------------*/
.fc .fc-row {
  /* extra precedence to overcome themes w/ .ui-widget-content forcing a 1px border */
  /* no visible border by default. but make available if need be (scrollbar width compensation) */
  border-style: solid;
  border-width: 0;
}

.fc-row table {
  /* don't put left/right border on anything within a fake row.
    the outer tbody will worry about this */
  border-left: 0 hidden transparent;
  border-right: 0 hidden transparent;
  /* no bottom borders on rows */
  border-bottom: 0 hidden transparent;
}

.fc-row:first-child table {
  border-top: 0 hidden transparent;
  /* no top border on first row */
}

/* Day Row (used within the header and the DayGrid)
--------------------------------------------------------------------------------------------------*/
.fc-row {
  position: relative;
}

.fc-row .fc-bg {
  z-index: 1;
}

/* highlighting cells & background event skeleton */
.fc-row .fc-bgevent-skeleton,
.fc-row .fc-highlight-skeleton {
  bottom: 0;
  /* stretch skeleton to bottom of row */
}

.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
  height: 100%;
  /* stretch skeleton to bottom of row */
}

.fc-row .fc-highlight-skeleton td,
.fc-row .fc-bgevent-skeleton td {
  border-color: transparent;
}

.fc-row .fc-bgevent-skeleton {
  z-index: 2;
}

.fc-row .fc-highlight-skeleton {
  z-index: 3;
}

/*
row content (which contains day/week numbers and events) as well as "helper" (which contains
temporary rendered events).
*/
.fc-row .fc-content-skeleton {
  position: relative;
  z-index: 4;
  padding-bottom: 2px;
  /* matches the space above the events */
}

.fc-row .fc-helper-skeleton {
  z-index: 5;
}

.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td {
  /* see-through to the background below */
  background: none;
  /* in case <td>s are globally styled */
  border-color: transparent;
  /* don't put a border between events and/or the day number */
  border-bottom: 0;
}

.fc-row .fc-content-skeleton tbody td,
.fc-row .fc-helper-skeleton tbody td {
  /* don't put a border between event cells */
  border-top: 0;
}

/* Scrolling Container
--------------------------------------------------------------------------------------------------*/
.fc-scroller {
  -webkit-overflow-scrolling: touch;
}

/* TODO: move to agenda/basic */
.fc-scroller > .fc-day-grid,
.fc-scroller > .fc-time-grid {
  position: relative;
  /* re-scope all positions */
  width: 100%;
  /* hack to force re-sizing this inner element when scrollbars appear/disappear */
}

/* Global Event Styles
--------------------------------------------------------------------------------------------------*/
.fc-event {
  position: relative;
  /* for resize handle and other inner positioning */
  display: block;
  /* make the <a> tag block */
  font-size: 0.85em;
  line-height: 1.3;
  border-radius: 3px;
  border: 1px solid #3a87ad;
  /* default BORDER color */
  background-color: #3a87ad;
  /* default BACKGROUND color */
  font-weight: normal;
  /* undo jqui's ui-widget-header bold */
}

/* overpower some of bootstrap's and jqui's styles on <a> tags */
.fc-event,
.fc-event:hover,
.ui-widget .fc-event {
  color: #fff;
  /* default TEXT color */
  text-decoration: none;
  /* if <a> has an href */
}

.fc-event[href],
.fc-event.fc-draggable {
  cursor: pointer;
  /* give events with links and draggable events a hand mouse pointer */
}

.fc-not-allowed,
.fc-not-allowed .fc-event {
  /* to override an event's custom cursor */
  cursor: not-allowed;
}

.fc-event .fc-bg {
  /* the generic .fc-bg already does position */
  z-index: 1;
  background: #fff;
  opacity: 0.25;
  filter: alpha(opacity=25);
  /* for IE */
}

.fc-event .fc-content {
  position: relative;
  z-index: 2;
}

/* resizer (cursor AND touch devices) */
.fc-event .fc-resizer {
  position: absolute;
  z-index: 4;
}

/* resizer (touch devices) */
.fc-event .fc-resizer {
  display: none;
}

.fc-event.fc-allow-mouse-resize .fc-resizer,
.fc-event.fc-selected .fc-resizer {
  /* only show when hovering or selected (with touch) */
  display: block;
}

/* hit area */
.fc-event.fc-selected .fc-resizer:before {
  /* 40x40 touch area */
  content: "";
  position: absolute;
  z-index: 9999;
  /* user of this util can scope within a lower z-index */
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
}

/* Event Selection (only for touch devices)
--------------------------------------------------------------------------------------------------*/
.fc-event.fc-selected {
  z-index: 9999 !important;
  /* overcomes inline z-index */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.fc-event.fc-selected.fc-dragging {
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}

/* Horizontal Events
--------------------------------------------------------------------------------------------------*/
/* bigger touch area when selected */
.fc-h-event.fc-selected:before {
  content: "";
  position: absolute;
  z-index: 3;
  /* below resizers */
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}

/* events that are continuing to/from another week. kill rounded corners and butt up against edge */
.fc-ltr .fc-h-event.fc-not-start,
.fc-rtl .fc-h-event.fc-not-end {
  margin-left: 0;
  border-left-width: 0;
  padding-left: 1px;
  /* replace the border with padding */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.fc-ltr .fc-h-event.fc-not-end,
.fc-rtl .fc-h-event.fc-not-start {
  margin-right: 0;
  border-right-width: 0;
  padding-right: 1px;
  /* replace the border with padding */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* resizer (cursor AND touch devices) */
/* left resizer  */
.fc-ltr .fc-h-event .fc-start-resizer,
.fc-rtl .fc-h-event .fc-end-resizer {
  cursor: w-resize;
  left: -1px;
  /* overcome border */
}

/* right resizer */
.fc-ltr .fc-h-event .fc-end-resizer,
.fc-rtl .fc-h-event .fc-start-resizer {
  cursor: e-resize;
  right: -1px;
  /* overcome border */
}

/* resizer (mouse devices) */
.fc-h-event.fc-allow-mouse-resize .fc-resizer {
  width: 7px;
  top: -1px;
  /* overcome top border */
  bottom: -1px;
  /* overcome bottom border */
}

/* resizer (touch devices) */
.fc-h-event.fc-selected .fc-resizer {
  /* 8x8 little dot */
  border-radius: 4px;
  border-width: 1px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-color: inherit;
  background: #fff;
  /* vertically center */
  top: 50%;
  margin-top: -4px;
}

/* left resizer  */
.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
  margin-left: -4px;
  /* centers the 8x8 dot on the left edge */
}

/* right resizer */
.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
  margin-right: -4px;
  /* centers the 8x8 dot on the right edge */
}

/* DayGrid events
----------------------------------------------------------------------------------------------------
We use the full "fc-day-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-day-grid-event {
  margin: 1px 2px 0;
  /* spacing between events and edges */
  padding: 0 1px;
}

.fc-day-grid-event.fc-selected:after {
  content: "";
  position: absolute;
  z-index: 1;
  /* same z-index as fc-bg, behind text */
  /* overcome the borders */
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  /* darkening effect */
  background: #000;
  opacity: 0.25;
  filter: alpha(opacity=25);
  /* for IE */
}

.fc-day-grid-event .fc-content {
  /* force events to be one-line tall */
  white-space: nowrap;
  overflow: hidden;
}

.fc-day-grid-event .fc-time {
  font-weight: bold;
}

/* resizer (cursor devices) */
/* left resizer  */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
  margin-left: -2px;
  /* to the day cell's edge */
}

/* right resizer */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
  margin-right: -2px;
  /* to the day cell's edge */
}

/* Event Limiting
--------------------------------------------------------------------------------------------------*/
/* "more" link that represents hidden events */
a.fc-more {
  margin: 1px 3px;
  font-size: 0.85em;
  cursor: pointer;
  text-decoration: none;
}

a.fc-more:hover {
  text-decoration: underline;
}

.fc-limited {
  /* rows and cells that are hidden because of a "more" link */
  display: none;
}

/* popover that appears when "more" link is clicked */
.fc-day-grid .fc-row {
  z-index: 1;
  /* make the "more" popover one higher than this */
}

.fc-more-popover {
  z-index: 2;
  width: 220px;
}

.fc-more-popover .fc-event-container {
  padding: 10px;
}

/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-now-indicator {
  position: absolute;
  border: 0 solid red;
}

/* Utilities
--------------------------------------------------------------------------------------------------*/
.fc-unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Toolbar
--------------------------------------------------------------------------------------------------*/
.fc-toolbar {
  text-align: center;
  margin-bottom: 1em;
}

.fc-toolbar .fc-left {
  float: left;
}

.fc-toolbar .fc-right {
  float: right;
}

.fc-toolbar .fc-center {
  display: inline-block;
}

/* the things within each left/right/center section */
.fc .fc-toolbar > * > * {
  /* extra precedence to override button border margins */
  float: left;
  margin-left: 0.75em;
}

/* the first thing within each left/center/right section */
.fc .fc-toolbar > * > :first-child {
  /* extra precedence to override button border margins */
  margin-left: 0;
}

/* title text */
.fc-toolbar h2 {
  margin: 0;
}

/* button layering (for border precedence) */
.fc-toolbar button {
  position: relative;
}

.fc-toolbar .fc-state-hover,
.fc-toolbar .ui-state-hover {
  z-index: 2;
}

.fc-toolbar .fc-state-down {
  z-index: 3;
}

.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active {
  z-index: 4;
}

.fc-toolbar button:focus {
  z-index: 5;
}

/* View Structure
--------------------------------------------------------------------------------------------------*/
/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
.fc-view-container *,
.fc-view-container *:before,
.fc-view-container *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.fc-view,
.fc-view > table {
  /* so dragged elements can be above the view's main element */
  position: relative;
  z-index: 1;
}

/* BasicView
--------------------------------------------------------------------------------------------------*/
/* day row structure */
.fc-basicWeek-view .fc-content-skeleton,
.fc-basicDay-view .fc-content-skeleton {
  /* we are sure there are no day numbers in these views, so... */
  padding-top: 1px;
  /* add a pixel to make sure there are 2px padding above events */
  padding-bottom: 1em;
  /* ensure a space at bottom of cell for user selecting/clicking */
}

.fc-basic-view .fc-body .fc-row {
  min-height: 4em;
  /* ensure that all rows are at least this tall */
}

/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
.fc-row.fc-rigid {
  overflow: hidden;
}

.fc-row.fc-rigid .fc-content-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* week and day number styling */
.fc-basic-view .fc-week-number,
.fc-basic-view .fc-day-number {
  padding: 0 2px;
}

.fc-basic-view td.fc-week-number span,
.fc-basic-view td.fc-day-number {
  padding-top: 2px;
  padding-bottom: 2px;
}

.fc-basic-view .fc-week-number {
  text-align: center;
}

.fc-basic-view .fc-week-number span {
  /* work around the way we do column resizing and ensure a minimum width */
  display: inline-block;
  min-width: 1.25em;
}

.fc-ltr .fc-basic-view .fc-day-number {
  text-align: right;
}

.fc-rtl .fc-basic-view .fc-day-number {
  text-align: left;
}

.fc-day-number.fc-other-month {
  opacity: 0.3;
  filter: alpha(opacity=30);
  /* for IE */
  /* opacity with small font can sometimes look too faded
    might want to set the 'color' property instead
    making day-numbers bold also fixes the problem */
}

/* AgendaView all-day area
--------------------------------------------------------------------------------------------------*/
.fc-agenda-view .fc-day-grid {
  position: relative;
  z-index: 2;
  /* so the "more.." popover will be over the time grid */
}

.fc-agenda-view .fc-day-grid .fc-row {
  min-height: 3em;
  /* all-day section will never get shorter than this */
}

.fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
  padding-top: 1px;
  /* add a pixel to make sure there are 2px padding above events */
  padding-bottom: 1em;
  /* give space underneath events for clicking/selecting days */
}

/* TimeGrid axis running down the side (for both the all-day area and the slot area)
--------------------------------------------------------------------------------------------------*/
.fc .fc-axis {
  /* .fc to overcome default cell styles */
  vertical-align: middle;
  padding: 0 4px;
  white-space: nowrap;
}

.fc-ltr .fc-axis {
  text-align: right;
}

.fc-rtl .fc-axis {
  text-align: left;
}

.ui-widget td.fc-axis {
  font-weight: normal;
  /* overcome jqui theme making it bold */
}

/* TimeGrid Structure
--------------------------------------------------------------------------------------------------*/
.fc-time-grid-container,
.fc-time-grid {
  /* so slats/bg/content/etc positions get scoped within here */
  position: relative;
  z-index: 1;
}

.fc-time-grid {
  min-height: 100%;
  /* so if height setting is 'auto', .fc-bg stretches to fill height */
}

.fc-time-grid table {
  /* don't put outer borders on slats/bg/content/etc */
  border: 0 hidden transparent;
}

.fc-time-grid > .fc-bg {
  z-index: 1;
}

.fc-time-grid .fc-slats,
.fc-time-grid > hr {
  /* the <hr> AgendaView injects when grid is shorter than scroller */
  position: relative;
  z-index: 2;
}

.fc-time-grid .fc-content-col {
  position: relative;
  /* because now-indicator lives directly inside */
}

.fc-time-grid .fc-content-skeleton {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
}

/* divs within a cell within the fc-content-skeleton */
.fc-time-grid .fc-business-container {
  position: relative;
  z-index: 1;
}

.fc-time-grid .fc-bgevent-container {
  position: relative;
  z-index: 2;
}

.fc-time-grid .fc-highlight-container {
  position: relative;
  z-index: 3;
}

.fc-time-grid .fc-event-container {
  position: relative;
  z-index: 4;
}

.fc-time-grid .fc-now-indicator-line {
  z-index: 5;
}

.fc-time-grid .fc-helper-container {
  /* also is fc-event-container */
  position: relative;
  z-index: 6;
}

/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-slats td {
  height: 1.5em;
  border-bottom: 0;
  /* each cell is responsible for its top border */
}

.fc-time-grid .fc-slats .fc-minor td {
  border-top-style: dotted;
}

.fc-time {
  background-color: #006BAE;
  color: #FFFFFF;
}

.fc-time-grid .fc-slats .ui-widget-content {
  /* for jqui theme */
  background: none;
  /* see through to fc-bg */
}

/* TimeGrid Highlighting Slots
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-highlight-container {
  /* a div within a cell within the fc-highlight-skeleton */
  position: relative;
  /* scopes the left/right of the fc-highlight to be in the column */
}

.fc-time-grid .fc-highlight {
  position: absolute;
  left: 0;
  right: 0;
  /* top and bottom will be in by JS */
}

/* TimeGrid Event Containment
--------------------------------------------------------------------------------------------------*/
.fc-ltr .fc-time-grid .fc-event-container {
  /* space on the sides of events for LTR (default) */
  margin: 0 2.5% 0 2px;
}

.fc-rtl .fc-time-grid .fc-event-container {
  /* space on the sides of events for RTL */
  margin: 0 2px 0 2.5%;
}

.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
  position: absolute;
  z-index: 1;
  /* scope inner z-index's */
}

.fc-time-grid .fc-bgevent {
  /* background events always span full width */
  left: 0;
  right: 0;
}

/* Generic Vertical Event
--------------------------------------------------------------------------------------------------*/
.fc-v-event.fc-not-start {
  /* events that are continuing from another day */
  /* replace space made by the top border with padding */
  border-top-width: 0;
  padding-top: 1px;
  /* remove top rounded corners */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.fc-v-event.fc-not-end {
  /* replace space made by the top border with padding */
  border-bottom-width: 0;
  padding-bottom: 1px;
  /* remove bottom rounded corners */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* TimeGrid Event Styling
----------------------------------------------------------------------------------------------------
We use the full "fc-time-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-time-grid-event {
  overflow: hidden;
  /* don't let the bg flow over rounded corners */
}

.fc-time-grid-event.fc-selected {
  /* need to allow touch resizers to extend outside event's bounding box */
  /* common fc-selected styles hide the fc-bg, so don't need this anyway */
  overflow: visible;
}

.fc-time-grid-event.fc-selected .fc-bg {
  display: none;
  /* hide semi-white background, to appear darker */
}

.fc-time-grid-event .fc-content {
  overflow: hidden;
  /* for when .fc-selected */
}

.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
  padding: 0 1px;
}

.fc-time-grid-event .fc-time {
  font-size: 0.85em;
  white-space: nowrap;
}

/* short mode, where time and title are on the same line */
.fc-time-grid-event.fc-short .fc-content {
  /* don't wrap to second line (now that contents will be inline) */
  white-space: nowrap;
}

.fc-time-grid-event.fc-short .fc-time,
.fc-time-grid-event.fc-short .fc-title {
  /* put the time and title on the same line */
  display: inline-block;
  vertical-align: top;
}

.fc-time-grid-event.fc-short .fc-time span {
  display: none;
  /* don't display the full time text... */
}

.fc-time-grid-event.fc-short .fc-time:before {
  content: attr(data-start);
  /* ...instead, display only the start time */
}

.fc-time-grid-event.fc-short .fc-time:after {
  content: " - ";
  /* seperate with a dash, wrapped in nbsp's */
}

.fc-time-grid-event.fc-short .fc-title {
  font-size: 0.85em;
  /* make the title text the same size as the time */
  padding: 0;
  /* undo padding from above */
}

/* resizer (cursor device) */
.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  overflow: hidden;
  line-height: 8px;
  font-size: 11px;
  font-family: monospace;
  text-align: center;
  cursor: s-resize;
}

.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
  content: "=";
}

/* resizer (touch device) */
.fc-time-grid-event.fc-selected .fc-resizer {
  /* 10x10 dot */
  border-radius: 5px;
  border-width: 1px;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-color: inherit;
  background: #fff;
  /* horizontally center */
  left: 50%;
  margin-left: -5px;
  /* center on the bottom edge */
  bottom: -5px;
}

/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-now-indicator-line {
  border-top-width: 1px;
  left: 0;
  right: 0;
}

/* arrow on axis */
.fc-time-grid .fc-now-indicator-arrow {
  margin-top: -5px;
  /* vertically center on top coordinate */
}

.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
  left: 0;
  /* triangle pointing right... */
  border-width: 5px 0 5px 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
  right: 0;
  /* triangle pointing left... */
  border-width: 5px 6px 5px 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

button.fc-next-button {
  position: absolute;
  right: 5%;
  background-color: transparent;
  background-image: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #006BAE;
  color: #006BAE;
}
button.fc-next-button:hover {
  background-color: #006BAE;
  color: #FFFFFF;
}

button.fc-prev-button {
  background-color: transparent;
  background-image: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #006BAE;
  color: #006BAE;
}
button.fc-prev-button:hover {
  background-color: #006BAE;
  color: #FFFFFF;
}

.fc-time-grid .fc-slats .fc-minor td.fc-axis {
  border-top-color: transparent;
}

.fc-axis.fc-time.fc-widget-content span {
  position: relative;
  top: 10px;
}

td.fc-day.fc-mon,
td.fc-day.fc-tue,
td.fc-day.fc-wed,
td.fc-day.fc-thu,
td.fc-day.fc-fri,
td.fc-day.fc-sat,
td.fc-day.fc-sun {
  width: 100px;
  border-color: rgba(35, 31, 32, 0.2);
}

th.fc-day-header.fc-widget-header.fc-mon,
th.fc-day-header.fc-widget-header.fc-tue,
th.fc-day-header.fc-widget-header.fc-wed,
th.fc-day-header.fc-widget-header.fc-thu,
th.fc-day-header.fc-widget-header.fc-fri,
th.fc-day-header.fc-widget-header.fc-sat,
th.fc-day-header.fc-widget-header.fc-sun {
  width: 100px;
  height: 3em;
  line-height: 3em;
  background-color: #E7E7E7;
  border-color: rgba(35, 31, 32, 0.2);
}

td.fc-axis.fc-time.fc-widget-content {
  width: 3vw;
}

button.fc-today-button {
  border: 2px solid #20BA5B;
  color: #20BA5B;
  background-color: transparent;
  background-image: none;
}
button.fc-today-button:hover {
  background-color: #20BA5B;
  color: #FFFFFF;
  border: 2px solid #20BA5B;
}

.fc-event {
  background-color: #E7E7E7;
  border: 5px solid #20BA5B;
  border-width: 0px 0px 0px 5px;
  color: #006BAE;
  font-size: 1.2em;
}
.fc-event:hover {
  background-color: #20BA5B;
}

.fc-event-container a {
  overflow-y: auto !important;
}

.fc-v-event .fc-bg {
  background-color: #E7E7E7;
}

.fc-time span {
  padding: 5px;
  font-size: 1.1em;
}

.fc-content-skeleton td {
  width: 100px;
}

.fc-content-skeleton td.fc-axis {
  width: auto;
}

.alert-info {
  border-color: #006BAE;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  color: #231F20;
  background-color: #F8F8F8;
}
.alert-info .close {
  position: absolute;
  right: 15px;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
  color: tomato;
  border: 1px solid tomato;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 27px;
}
.alert-info .close:after {
  content: "Delete";
  display: inline-block;
  width: 100px;
  height: 30px;
}
.alert-info .close:hover {
  color: #FFFFFF;
  background-color: tomato;
}

.fc table {
  margin: 0 0 !important;
}
.fc button[disabled] {
  opacity: 1;
}
.fc .fc-title {
  padding: 5px;
}
.fc h2 {
  font-size: 2em;
}

.fc-slats tbody {
  background-color: transparent;
}
.fc-slats tbody tr {
  background-color: transparent;
}

@media only screen and (max-width: 1340px) {
  .fc-axis.fc-widget-header {
    width: 27px;
    padding: 0 2.5px !important;
  }

  th.fc-day-header.fc-widget-header.fc-mon,
th.fc-day-header.fc-widget-header.fc-tue,
th.fc-day-header.fc-widget-header.fc-wed,
th.fc-day-header.fc-widget-header.fc-thu,
th.fc-day-header.fc-widget-header.fc-fri,
th.fc-day-header.fc-widget-header.fc-sat,
th.fc-day-header.fc-widget-header.fc-sun {
    width: auto;
  }
}
/* .well {
  margin-top: 30px;
} */
.calTools {
  text-align: right;
  width: 100%;
}

.SMchoice {
  margin: 10px 0;
  padding: 0;
}
.SMchoice select {
  margin-right: 30px;
}
.SMchoice a {
  margin: 0 15px;
  padding: 1px 10px;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #E7E7E7;
  text-align: center;
}
.SMchoice a + span {
  white-space: nowrap;
}
.SMchoice button {
  top: auto;
  padding: 5px 10px;
  font-size: 0.9em;
  text-align: center;
}
.SMchoice.flexbox span.flexbox label {
  width: auto !important;
}
.SMchoice.flexbox .dropdown-block .dropdown-trigger:after {
  border-width: 6px 6px 0 6px;
}

.basketCalendar {
  border: 1px solid rgba(0, 107, 174, 0.5);
  border-width: 0 0 1px 0;
  width: 66.6666666667%;
  height: 75vh;
  display: inline-block;
}
.basketCalendar td.fc-axis.fc-time.fc-widget-content {
  padding: 0 11px;
}
.basketCalendar .fc-toolbar {
  display: none;
}
.basketCalendar .fc-view-container {
  overflow-y: hidden;
  height: 75vh;
}
.basketCalendar .fc-view,
.basketCalendar .fc-view > table {
  height: 75vh;
}
.basketCalendar .fc-scroller.fc-time-grid-container {
  height: 100% !important;
  overflow-y: scroll !important;
}

.basket {
  display: block;
  float: right;
  margin: 0;
  padding: 10px 15px 15px 15px;
  border: 2px solid #E7E7E7;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
  box-shadow: -2px 2px 8px rgba(35, 31, 32, 0.4);
  width: calc(100% / 3);
  height: 75vh;
}
.basket p.flexbox {
  flex-wrap: nowrap;
}
.basket .developBatch {
  margin-right: 0px;
  border-radius: 3px 0px 0px 3px;
  height: 40px;
  width: 40px !important;
  padding: 5px;
  text-align: center;
}
.basket .developBatch ~ .topItem {
  width: 100%;
  margin-left: 0px;
  border-left-width: 0;
  border-radius: 0px 3px 3px 0px;
  height: 40px;
}
.basket .topItem {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: calc(85% - 5px);
  margin-left: 5px;
  padding: 5px;
  text-align: left;
  text-decoration: none;
  position: relative;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #006BAE;
  color: #006BAE;
  font-size: 1em;
  background: none;
}
.basket .topItem button {
  text-align: center;
  margin: auto 5px !important;
}
.basket .topItem span {
  margin: auto 5px;
  padding: 1px 5px;
  background-color: #006BAE;
  color: #FFFFFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.basket .topItem span.pulse {
  float: initial;
}
.basket .basketItem {
  font-size: 1em;
  cursor: pointer;
  margin: 5px 0px 5px 40px;
  display: block !important;
  border: 3px solid #20BA5B;
  border-width: 0 0 0 3px;
}
.basket .basketItem .fc-time {
  padding: 5px;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.basket .basketItem .fc-time span {
  width: 60%;
  word-wrap: break-word;
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
}
.basket .basketItem .fc-time button {
  margin-top: 0px;
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  text-align: center;
  padding: 5px;
}

.unstyled {
  margin: 30px 0;
  list-style-type: none;
}
.unstyled li div {
  padding: 20px 0;
}
.unstyled li div input {
  margin-right: 2%;
  width: 70%;
}

.smUsed {
  opacity: 0.4;
  background: repeating-linear-gradient(45deg, rgba(35, 31, 32, 0.3), rgba(35, 31, 32, 0.3) 10px, rgba(35, 31, 32, 0.1) 10px, rgba(35, 31, 32, 0.1) 20px);
  border: 5px solid rgba(35, 31, 32, 0.5);
  border-width: 0 0 0 5px;
}
.smUsed .fc-content .fc-time {
  background-color: rgba(35, 31, 32, 0.5);
}

.residentUsed {
  opacity: 0.8;
  border: 5px solid rgba(255, 99, 71, 0.5);
  border-width: 0 0 0 5px;
}
.residentUsed .fc-content .fc-time {
  background-color: rgba(255, 99, 71, 0.5);
}
.residentUsed .fc-content .fc-title {
  color: tomato;
}
.residentUsed .fc-bg {
  opacity: 0.7;
}

.calInfoPopup {
  position: absolute;
  z-index: 980;
  display: block;
  width: 200px;
  background-color: #006BAE;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
}
.calInfoPopup button {
  background-color: #FFFFFF;
  width: 100%;
  text-align: center;
}
.calInfoPopup button.delete {
  background-color: tomato;
  color: #FFFFFF;
}
.calInfoPopup button.addNewEntry {
  background-color: #20BA5B;
}
.calInfoPopup button:hover {
  color: #FFFFFF;
}

.assign-batch thead tr th:first-child {
  background-color: #006BAE;
  color: #FFFFFF;
  border: transparent;
}
.assign-batch thead tr th {
  padding: 10px;
  width: calc(100% / 8);
  background-color: #E7E7E7;
  border-right: 2px solid #FFFFFF;
}
.assign-batch thead tr th:last-child {
  text-align: left;
}
.assign-batch tbody tr {
  border-bottom: 2px solid #E7E7E7;
}
.assign-batch tbody tr:last-child {
  border: transparent;
}
.assign-batch tbody tr td:first-child {
  background-color: #006BAE;
  color: #FFFFFF;
  border-right: transparent;
  border-bottom: 2px solid #E7E7E7;
  font-weight: bold;
  text-align: left;
  padding: 5px 5px 5px 10px;
}
.assign-batch tbody tr td {
  padding: 5px;
  position: relative;
  border-right: 2px solid #E7E7E7;
  text-align: center;
}
.assign-batch tbody tr td:last-child {
  text-align: center;
  border: transparent;
}
.assign-batch tbody tr td select {
  width: calc(100% - 5px);
  height: auto;
  padding: 7px 5px;
}
.assign-batch tbody tr td button {
  width: 80%;
  text-align: left;
  -moz-border-radius: 5px 0 0 0px;
  -webkit-border-radius: 5px 0 0 0px;
  border-radius: 5px 0 0 0px;
}
.assign-batch tbody tr td button:after {
  content: "v";
  font-size: 1.2em;
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 100%;
  top: -1px;
  right: -30px;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  background-color: #006BAE;
  border: 1px solid #006BAE;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}
.assign-batch tbody tr td button ~ .list_batch {
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  z-index: 5;
  list-style-type: none;
  width: 75%;
  left: 5px;
  top: 2px;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
}
.assign-batch tbody tr td button ~ .list_batch li {
  left: 0;
  background-color: #FFFFFF;
  margin-top: 0;
}
.assign-batch tbody tr td button ~ .list_batch li:not(:first-child) {
  border-top: 1px solid #E7E7E7;
}
.assign-batch tbody tr td button ~ .list_batch li input {
  margin-right: 10px;
}
.assign-batch tbody tr td button ~ .list_batch li label {
  cursor: pointer;
  width: auto;
  border: transparent;
  padding: 5px;
}
.assign-batch .disableCell {
  background-color: #E7E7E7;
  background: repeating-linear-gradient(-45deg, #E7E7E7, #E7E7E7 10px, #cecece 10px, #cecece 20px);
}

.taskInfo {
  display: block;
  position: absolute;
  padding: 15px;
  width: 250px;
  box-shadow: 2px 2px 8px rgba(35, 31, 32, 0.4);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 10;
  background-color: #F8F8F8;
}
.taskInfo:before {
  position: absolute;
  top: -20px;
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent #F8F8F8 transparent;
}
.taskInfo h2 {
  padding-top: 0;
  margin: auto;
}
.taskInfo ul {
  margin: 0 30px;
}
.taskInfo ul li {
  margin-top: 5px;
}

div.chartControl {
  display: flex;
  flex-wrap: nowrap;
  width: 85%;
  margin-bottom: 15px;
}
div.chartControl button {
  padding: 5px;
  width: calc(100% / 7);
  text-align: center;
  margin: 0 2.5px;
}

@media only screen and (max-width: 1400px) {
  .basket .topItem,
.basketItem {
    font-size: 1em !important;
  }

  .basketCalendar td.fc-axis.fc-time.fc-widget-content {
    padding: 0 2.5px !important;
  }
}
.fill.blue {
  background-color: #006BAE;
  border-color: #006BAE;
  color: #FFFFFF;
}
.fill.blue:hover {
  background-color: transparent;
  color: #006BAE;
  border-color: #006BAE;
}
.fill.blue:hover svg path {
  fill: #006BAE;
}
.fill.red {
  background-color: tomato;
  border-color: tomato;
  color: #FFFFFF;
}
.fill.red:hover {
  color: tomato;
  background-color: transparent;
  border-color: tomato;
}
.fill.red:hover svg path {
  fill: tomato;
}
.fill.green {
  background-color: #20BA5B;
  border-color: #20BA5B;
  color: #FFFFFF;
}
.fill.green:hover {
  background-color: transparent;
  color: #20BA5B;
  border-color: #20BA5B;
}
.fill.green:hover svg path {
  fill: #20BA5B;
}
.fill.white {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #006BAE;
}
.fill.white:hover {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.fill.white:hover svg path {
  fill: #FFFFFF;
}

.outline.blue {
  background-color: transparent;
  border-color: #006BAE;
  color: #006BAE;
}
.outline.blue:hover {
  background-color: #006BAE;
  color: #FFFFFF;
  border-color: #006BAE;
}
.outline.blue:hover svg path {
  fill: #FFFFFF;
}
.outline.red {
  background-color: transparent;
  border-color: tomato;
  color: tomato;
}
.outline.red:hover {
  color: #FFFFFF;
  background-color: tomato;
  border-color: tomato;
}
.outline.red:hover svg path {
  fill: #FFFFFF;
}
.outline.green {
  background-color: transparent;
  border-color: #20BA5B;
  color: #20BA5B;
}
.outline.green:hover {
  background-color: #20BA5B;
  color: #FFFFFF;
  border-color: #20BA5B;
}
.outline.green:hover svg path {
  fill: #FFFFFF;
}

button.small {
  padding: 5px 10px;
  font-size: 0.9em;
}
button.generate {
  float: left;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1005;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 31, 32, 0.2);
  overflow-y: hidden;
}

.loading {
  position: absolute;
  z-index: 10;
  margin: auto;
  top: calc(50% - 70px);
  left: calc(50%);
  width: 70px !important;
  height: 70px !important;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #006BAE;
}
.loading.hide {
  display: none;
}

.on, .off {
  position: relative;
  padding-left: 20px;
}

.on:before, .off:before {
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 18px;
  height: 18px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  content: "";
  background-color: tomato;
}

.on:before {
  background-color: #20BA5B;
}

.loading {
  -moz-animation-duration: 900ms;
  -webkit-animation-duration: 900ms;
  -ms-animation-duration: 900ms;
  -o-animation-duration: 900ms;
  animation-duration: 900ms;
  -moz-animation-name: wheel;
  -webkit-animation-name: wheel;
  -ms-animation-name: wheel;
  -o-animation-name: wheel;
  animation-name: wheel;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

@-moz-keyframes wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-ms-keyframes wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-o-keyframes wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.buttonsChart {
  margin-bottom: 15px;
  height: 55px;
}
.buttonsChart button {
  margin-top: 0;
}
.buttonsChart div.flexbox {
  height: 100%;
}
.buttonsChart div.flexbox button, .buttonsChart div.flexbox a {
  height: 100%;
  text-align: center;
}
.buttonsChart div.flexbox a {
  display: flex;
  align-items: center;
}
.buttonsChart .flexbox.right a:not(#export) {
  margin-left: 5px;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.amcharts-export-menu.amcharts-export-menu-top-right.amExportButton {
  position: static !important;
}

.ecarnetResident input[type=checkbox]:not(:checked), .ecarnetResident input[type=checkbox]:checked {
  position: absolute;
  left: -9999px;
}
.ecarnetResident input[type=checkbox]:not(:checked) + label, .ecarnetResident input[type=checkbox]:checked + label {
  cursor: pointer;
  padding-left: 60px;
  border-bottom: transparent;
}
.ecarnetResident input[type=checkbox]:not(:checked) + label:before, .ecarnetResident input[type=checkbox]:not(:checked) + label:after, .ecarnetResident input[type=checkbox]:checked + label:before, .ecarnetResident input[type=checkbox]:checked + label:after {
  content: "";
  position: absolute;
}
.ecarnetResident input[type=checkbox]:not(:checked) + label:before, .ecarnetResident input[type=checkbox]:checked + label:before {
  top: 3px;
  left: 0;
  display: inline-block;
  width: 46px;
  height: 26px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
}
.ecarnetResident input[type=checkbox]:not(:checked) + label:after, .ecarnetResident input[type=checkbox]:checked + label:after {
  display: block !important;
  z-index: 3;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: rgba(0, 107, 174, 0.8);
}
.ecarnetResident input[type=checkbox]:not(:checked) + label span:before, .ecarnetResident input[type=checkbox]:checked + label span:before {
  opacity: 0;
  position: absolute;
  left: 14px;
  top: 4px;
  height: 20px;
  width: 20px;
  font-size: 0.8em;
  content: "";
  background: url(../images/icons/check.svg) 0 4px no-repeat;
  background-size: 14px 14px;
}
.ecarnetResident input[type=checkbox]:checked + label:before {
  background-color: #20BA5B;
}
.ecarnetResident input[type=checkbox]:checked + label:after {
  left: 23px;
  background-color: #116330;
}
.ecarnetResident input[type=checkbox]:checked + label span:before {
  opacity: 1;
  left: 7px;
}
.ecarnetResident input[type=checkbox]:disabled + label {
  opacity: 0.8;
}
.ecarnetResident input[type=checkbox]:disabled + label:before {
  background-color: rgba(0, 107, 174, 0.1);
}
.ecarnetResident input[type=checkbox]:disabled + label:after {
  background-color: rgba(255, 255, 255, 0.5);
}
.ecarnetResident input[type=checkbox]:disabled.checked + label {
  opacity: 1;
}
.ecarnetResident input[type=checkbox]:disabled.checked + label:before {
  background-color: #20BA5B;
}
.ecarnetResident input[type=checkbox]:disabled.checked + label:after {
  left: 23px;
  background-color: #116330;
}
.ecarnetResident input[type=checkbox]:disabled.checked + label span:before {
  opacity: 1;
  left: 7px;
}

.nowrap {
  white-space: nowrap;
}

/* Teleconsultations
 * List and video pages
 */
 .teleconsultation .popup-overlay,
 .teleconsultations .popup-overlay {
  background-color: rgba(255, 255, 255, 0.473);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.teleconsultation .popup,
.teleconsultations .popup {
  position: fixed;
  width: 40%;
  right: 20%;
  top: 30%;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #000;
  color: rgb(0, 107, 174);
  z-index: 1100;
  text-align: left;
}
.teleconsultation *:fullscreen .popup {
  margin-left: 0;
  right: 30%;
  left: 30%;
}
.teleconsultation .popup .title,
.teleconsultations .popup .title {
  all: unset;
  display: block;
  padding: 12px;
  font-weight: bold;
  font-size: 18px;
  border-bottom: 1px solid #808080;
}
.teleconsultation .popup .content,
.teleconsultations .popup .content {
  all: unset;
  display: block;
  padding: 12px;
}
.teleconsultation .popup .content p,
.teleconsultations .popup .content p {
  text-align: left;
  margin: 12px;
}
.teleconsultation .popup .buttons,
.teleconsultations .popup .buttons {
  display: block;
  text-align: right;
  padding: 12px;
}
.teleconsultation .popup .buttons button,
.teleconsultation .popup .buttons .button,
.teleconsultations .popup .buttons button,
.teleconsultations .popup .buttons .button {
  margin-left: 6px;
}

.teleconsultation .popup button,
.teleconsultation .popup .button,
.teleconsultations .popup button,
.teleconsultations .popup .button {
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
  padding: 3px 6px;

  color: rgb(0, 107, 174);
  background-color: rgb(255, 255, 255);
  border-color: rgb(0, 107, 174);
}
.teleconsultation .popup button:hover,
.teleconsultation .popup .button:hover,
.teleconsultations .popup button:hover,
.teleconsultations .popup .button:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 107, 174);
}
.teleconsultation .popup button.warning,
.teleconsultation .popup .button.warning,
.teleconsultations .popup button.warning,
.teleconsultations .popup .button.warning {
  background-color: #EFAA4F;
  border-color: rgb(245, 180, 95);
  color: #FFFFFF;
}

.teleconsultation {
  text-align: center;
  color: rgb(0, 107, 174);
}
.teleconsultation .participants {
  list-style: none;
}
.teleconsultation .participant {
  display: inline-block;
  margin: 0 30px;
  width: 20%;
  text-align: center;
}
.teleconsultation .participant .status-icon {
  display: block;
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 25px;
  background-color: green;
}
.teleconsultation .disconnected.participant .status-icon {
  background-color: red;
}
.teleconsultation .video-container {
  margin-bottom: 25px;
  display: block;
  text-align: center;
  width: 64%;
  height: 48%;
  margin: auto;
}
.teleconsultation .video {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  position: relative;
  background-color: rgb(22, 22, 22);
}
.teleconsultation .video .video-status {
  display: block;
  width: 100%;
  position: absolute;
  top: 40%;
  text-align: center;
  color: #fff;
}
.teleconsultation .video .video-remote {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.teleconsultation .video .video-local {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20%;
}
.teleconsultation .video .video-controls {
  list-style: none;
  position: absolute;
  bottom: 8px;
  margin: 0;
  padding: 0;
  width: 100%;
}
.teleconsultation .video .video-controls li {
  display: inline;
  visibility: hidden; /* shown on :hover */
}
.teleconsultation .video:hover .video-controls button,
.teleconsultation .video .video-controls:hover button,
.teleconsultation .video .video-controls.is-hover button,
.teleconsultation .video:fullscreen .video-controls button {
  /* :hover and child visibility does not work on Safari; JavaScript is used in
   * `teleconsultation.html` to achieve the same effect */
  visibility: visible;
}
.teleconsultation .video .video-controls button {
  display: inline-block;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  padding: 0;
  margin: 0 8px;
  background-color: black;
  border-color: black;
  background-size: 18px;
  color: white;
}
.teleconsultation .video .video-controls button:hover {
  background-color: rgb(0, 107, 174) !important;
  border-color: rgb(0, 107, 174) !important;
}
.video-controls button.micro {
  background: transparent url('../images/icons/mic_white_off.svg') no-repeat center;
}
.video-controls button.micro.is-muted {
  background-color: #FB3E3B;
  border-color: #FB3E3B;
}
.video-controls button.camera {
  background: transparent url('../images/icons/video-camera_white_off.svg') no-repeat center;
  background-color: #FB3E3B;
  border-color: #FB3E3B;
}
.video-controls button.camera.is-muted {
  background-color: #FB3E3B;
  border-color: #FB3E3B;
}
.video-controls button.fullscreen {
  background: transparent url('../images/icons/screen-full_white.svg') no-repeat center;
  background-size: 32px;
}

.teleconsultation .video:fullscreen .video-controls button.fullscreen {
  background-image: url('../images/icons/screen-full_white_off.svg');
  background-color: #FB3E3B;
  border-color: #FB3E3B;
}
.teleconsultation .video-controls button.fullscreen.is-active {
  /* We can rely on CSS to change the .fullscreen button style when the video is
   * maximized. However this does not work in Safari and we have to use JavaScript.
   * Sadly we also have to duplicate the styles because Safari does not seems to
   * apply css groups dynamically */
  background-image: url('../images/icons/screen-full_white_off.svg');
  background-color: #FB3E3B;
  border-color: #FB3E3B;
}

.teleconsultation .video .video-controls button.quit {
  background: #FB3E3B url('../images/icons/sm-phone_off.svg') no-repeat center;
  border-color: rgb(233, 92, 89);
  background-size: 28px;
  display: none;
}
.teleconsultation .video:fullscreen .video-controls button.quit {
  /* This is also implemented with JavaScript for Safari */
  display: inline-block;
}

.teleconsultation .actions button {
  background: #54D668 url('../images/icons/sm-phone.svg') no-repeat 20% center;
  border-color: #54D668;
  padding: 10px 48px;
  color: #fff;
  fill: #fff;
  width: 20%;
  font-weight: bold;
  text-align: center;
}
.teleconsultation .actions button.quit {
  background: #FB3E3B url('../images/icons/sm-phone_off.svg') no-repeat 20% center;
  border-color: #FB3E3B;
  padding: 10px 48px;
  color: #fff;
}
.teleconsultation .footer {
  margin-top: 30px;
}


/**
 * Semantic styling for messages
 * Use html body selector to override the previous ones (most selective is better)
 */
 html body .inline.message {
  all: unset;
  display: block;
  border: 2px solid silver;
  text-align: left;
  padding: 8px;
  font-size: 1.1em;
  cursor: default;
}
html body .inline.message h3, html body .inline.message p {
  all: unset;
  color: #888;
  border: none;
  background-color: #fff;
}
html body .inline.message h3 {
  font-size: 1.2em;
  display: inline-block;
  margin: 0 0 8px 0;
}
html body .inline.message p {
  display: block;
  line-height: 1.5em;
  position: relative;
  top: inherit;
  left: inherit;
  right: inherit;
}
/* - Info messages */
html body .message.info {
  border-color: rgba(0, 76, 123, 0.3);
}
html body .message.info h3, html body .message.info p {
  color: #006BAE;
}


/*iso--dashboard --alarms*/
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  width: 270px;
  height: fit-content;
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
}

.item h2{
  margin-top:-6px;
  display: block;
}

.item h2 .name{
  display:inline-block;
  font-weight:bold;
}

.close-cross{
  float: right;
  /* background-color: #dd8787; */
  /* background-color: #004571; */
  /* background-color: #025589; */
  color:tomato;
  font-weight: bolder;
  width: 40px;
  height: 40px;
  font-size: 1em;
  border-style: hidden;
}

.item .deltaTime {
  display:inline-block;
  text-align: right;
  font-size: 0.87em;
  border-color: #004571;
}

.item .no-measure{
  font-style: italic;
  font-size: smaller;
  color:wheat
}
.item .measure{
  font-weight: bold;
}

.no-alert{
  background-color: #458e48;
  color: whitesmoke;
}
.no-alert h2{
  color: whitesmoke;
}

.current-alert{
  background-color: #f26060;
  color: whitesmoke;
  /* color: #fff6ce; */
}
.current-alert h2{
  color: whitesmoke;
  /* color:#fff6ce; */
}

.passed-alert{
  background-color: orange;
  color: #156ca3;
}

.dashboard .alert-dashboard{
  float: right;
  width: 40px;
  height: 40px;
  margin:10px;
  padding-bottom: 5px;
}
#dashboard-legend{
  text-align:left;
  align-items:right;
}

#dasboard-legend div{
  text-align:left;
}

.dashboard svg,
.dashboard img{
  padding:4px;
  height: 23px;
  width: 23px;
  vertical-align: middle;
}

.dashboard .popup-overlay {
 background-color: rgba(255, 255, 255, 0.473);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1000;
}

.dashboard .popup {
 position: fixed;
 width: 40%;
 right: 20%;
 top: 30%;
 background-color: #fff;
 border-radius: 5px;
 border: 1px solid #000;
 color: rgb(0, 107, 174);
 z-index: 1100;
 text-align: left;
}
.dashboard *:fullscreen .popup {
 margin-left: 0;
 right: 30%;
 left: 30%;
}

.dashboard .popup .title {
 /* all: unset; */
 display: block;
 padding: 12px;
 font-weight: bold;
 font-size: 18px;
 border-bottom: 1px solid #808080;
}

.dashboard .popup .content {
 /* all: unset; */
 display: block;
 padding: 12px;
}

.dashboard .popup .content p {
 text-align: left;
 margin: 12px;
}

.dashboard .popup .buttons {
 /* all: unset; */
 display: block;
 text-align: right;
 padding: 12px;
}

.dashboard .popup .buttons button,
.dashboard .popup .buttons .button {
 margin-left: 6px;
}

.dashboard .popup button,
.dashboard .popup .button {
 display: inline-block;
 font-size: 16px;
 line-height: 22px;
 padding: 3px 6px;

 color: rgb(0, 107, 174);
 background-color: rgb(255, 255, 255);
 border-color: rgb(0, 107, 174);
}

.dashboard .popup button:hover,
.dashboard .popup .button:hover {
 color: rgb(255, 255, 255);
 background-color: rgb(0, 107, 174);
}

.dashboard .popup button.warning,
.dashboard .popup .button.warning {
 background-color: #EFAA4F;
 border-color: rgb(245, 180, 95);
 color: #FFFFFF;
}

.dashboard .simplecircle{
  background-color: whitesmoke;
  border-radius: 50%;
}

.dashboard .simplecircle:hover{
  /* background-color: #004c7b; */
  background-color: #abc6d6;
}

.dashboard .measure-icon{
  float: right;
}
/*# sourceMappingURL=output.css.map */