* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root.mobile {
    /* font-size: calc( (10px + ( 16px - 10px ) * ( 100vw - 400px ) / ( 1920px - 400px ))); */
    font-size: 0.7rem;
}

html body {
    height: 100vh;
    overflow: hidden;
}
html body, button, input {
    font-weight: 300;
    font-size: 0.7rem;
    font-family: 'Open Sans', sans-serif;
}

:root.mobile, :root.mobile body, :root.mobile body .bodyframe {
    height: 100%;
}


html body .show-on-mobile {
    display: none;
}

html.mobile body .show-on-mobile {
    display: initial;
}

html.mobile body .hide-on-mobile {
    display: none;
}

#surveyButtons {
    position: fixed;
    left: -0.5rem;
    bottom: 2rem;
    background: whitesmoke;
    width: 100%;
    z-index: 500;
}
#surveyButtons .card-footer-buttons {
    margin: 0.5rem;
    justify-content: flex-end;
}
#surveyButtons .card-footer-buttons button {
    margin-top: 0;
    margin-bottom: 0;
}

:root.mobile #surveyButtons .card-footer-buttons {
    justify-content: center;
}

dialogcontent #surveyButtons {
    display: none;
}

.shortResponseBox {
    display: flex;
    flex-direction: row;
}
.shortResponseBox > *:first-child {
    max-width: 25vw;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[ellipsis] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 1rem;
}

input {
    outline: none;
    border: 1px solid #ddd;
}

input.ng-invalid {
    border-color: red;
}

/******************************/
/************ TABS ************/
/******************************/
.radiotabs {
    width: 90rem;
    position: relative;
    margin: 0 0 .7rem;
    height: 100%;
}

.radiotabs input {
    display: none;
}

.radiotabs label {
    display: inline-block;
    float: left;
    width: 14%;
    text-align: center;
    line-height: 4rem;
    /*border-bottom: 1px solid;*/
    justify-content: center;
    margin: 0;
    font-size: 1rem;
    cursor: pointer;
}

.radiotabs label a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.radiotabs label a:active,
.radiotabs label a:hover {
    color: inherit;
    text-decoration: none;
}

.radiotabs input[type="radio"]:checked + label {
    /*font-weight: bold;*/
}

.radiotabs .slide {
    position: absolute;
    width: 15%;
    height: .3rem;
    bottom: 0;
    background: #395479;
    left: -30%;
    transition: left .2s ease-in-out;
}

.radiotabs input[type="radio"]:nth-of-type(1):checked ~ .slide {
  left: 0%
}
.radiotabs input[type="radio"]:nth-of-type(2):checked ~ .slide {
  left: 14%;
}
.radiotabs input[type="radio"]:nth-of-type(3):checked ~ .slide {
  left: 28%
}
.radiotabs input[type="radio"]:nth-of-type(4):checked ~ .slide {
  left: 42%;
}
.radiotabs input[type="radio"]:nth-of-type(5):checked ~ .slide {
  left: 56%
}
.radiotabs input[type="radio"]:nth-of-type(6):checked ~ .slide {
  left: 70%
}
.radiotabs input[type="radio"]:nth-of-type(7):checked ~ .slide {
  left: 84%
}


/******************************/
/*********** LAYOUT ***********/
/******************************/

[layout="row"] {
    flex-direction:row;
    /*flex-wrap: nowrap | wrap | wrap-reverse;*/
    align-items: center;
}
[layout="column"] {
    flex-direction:column;
}

[layout] {
    display: flex;
}
[layout] > * {
    flex: 0 0 auto;
}

[space-between] {
    justify-content: space-between;
}
[space-around] {
    justify-content: space-around;
}

[stretch] {
    align-items: stretch;
}

[grow="1"] {
    flex-grow: 1;
}
[grow="2"] {
    flex-grow: 2;
}

[shrink="1"] {
    flex: 1 1 auto;
}
[shrink="2"] {
    flex: 2 2 auto;
}



/******************************/
/********* STRUTTURA **********/
/******************************/

.bodyframe {
    width: 100vw;
    height: 100vh;
    background: whitesmoke;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.headerframe {
    width: 100%;
    color: #395479;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.headerframe > * {
    flex-shrink: 0 !important;
}

.loader {
    position: relative;
}
.loader:after {
    content: '';
    position: absolute;
    display: block;
    height: .3rem;
    background-image: linear-gradient(to right, transparent 0%, white 66%);
    top: 0;
    left: 0;
    right: 100%;
    animation: loading 1.5s ease infinite;
    opacity: 0;
    transition: opacity .1s ease-out;
}
.loader.loading:after {
    opacity: 1;
    transition: opacity .3s ease-in;
}

@keyframes loading {
  0% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}

.headermainframe {
    position: relative;
    width: 100%;
    /*background: #1a9a8b;*/
    padding: 0 2rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 4rem;
}

.loginbuttons {
    position: absolute;
    top: 0;
    right: 0;
}

.headersecondaryframe {
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    background: #F49E31;
    padding: 0 2rem;
}

.projectname {
    font-size: 3rem;
}

.projectname img {
    display: inline;
    width: 100px;
    /*height: 6rem;*/
}

.middleframe {
    flex: 1 1 auto;
    overflow: auto;
    padding: 2rem;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

:root.mobile .middleframe {
    padding: 2rem 1rem;
}

div[ng-view] {
    width: 100%;
    height: auto;
    box-shadow: 0 .2rem .2rem black;
    border: 1px solid #aaa;
    background: white;
    position: relative;
    padding: 1rem 2rem;
    text-align: left;
    margin: 0 auto;
}
:root.mobile div[ng-view] {
    padding: .5rem;
}

div[ng-view] > h2 {
    margin: 3rem 2rem 2rem;
}

footer {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    flex: 0 0 2rem;
}

.card-footer-buttons {
    display: flex;
    width: 100%;
    justify-content: center;
    flex: 0 0 auto;
    margin: 2rem 0;
}






/* ammazza-bootstrap */
body label {
    font-weight: 300;
}

html body {
    padding: 0;
}

html .form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

.fakeform .form-group .control-label {
    position: relative;
}




/******************************/
/********** BOTTON ************/
/******************************/

button, .asButton {
    display: inline-block;
    min-width: 10rem;
    line-height: 2.6rem;
    background: #F49E31;
    color: whitesmoke;
    box-shadow: 0 .2rem .2rem black;
    margin: .7rem;
    text-align: center;
    border: none;
    opacity: 1;
    cursor: pointer;
    padding: 0 1rem;
    outline: none !important;
}

.asButton, .asButton:hover {
    text-decoration: none;
    color: #395479;
}

button:disabled {
    color: whitesmoke;
    background: #4d4d4d;
    opacity: 0.6;
    cursor: default;
}

button:active, .asButton:active {
    outline: none !important;
}

button.card-fab {
    width: 3.6rem;
    height: 3.6rem;
    line-height: 3.6rem;
    min-width: 3.6rem;
    background: #395479;
    color: white;
    border-radius: 50%;
    box-shadow: 0 .2rem .2rem black;
    position: absolute;
    top: 0;
    right: 3rem;
    transform: translateY(-50%);
}

.modal-footer button,
dialogactions button,
dialogactions button:disabled {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #15847b;
    width: auto;
    min-width: 0;
    font-weight: bold;
    text-transform: uppercase;
}
dialogactions button:disabled {
    opacity: .15;
}

.modal-footer button.warn:hover,
dialogactions button.orange:hover {
    color: hsl(33, 93%, 46%);
}

dialogactions button.red:hover {
    color: red;
}

.modal-footer {
    padding: 0 !important;
}

.modal-footer button:hover,
dialogactions button:hover {
    transform: scale(1.1);
}

.fab {
    width: 1.3rem;
    min-width: 1.3rem;
    height: 1.3rem;
    line-height: 1rem;
    border-radius: 50%;
    text-align: center;
    color: black;
    margin: 0.3rem;
    padding: 0;
}

.fab.transparent {
    background: transparent;
    box-shadow: none;
}








/******************************/
/*********** TABLE ************/
/******************************/

dialogg.withTable dialogcontent {
    overflow-x: hidden;
}

.flextable {
    width: calc(100% + 4rem);
    height: auto;
    margin: 0 -2rem;
}

dialogg .flexrow > div:nth-child(3) {
    flex: 0 0 9rem;
}

dialogg .flexrow > div:nth-child(3) button {
    margin: 0;
}

.flexhead {
    color: black;
}

.flexbody {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.flexDoubleRow {
    display: flex;
    flex-direction: column;
}

.flexrow,
.flexSecondRow {
    width: 100%;
    display: flex;
    flex: 1 0 auto;
}

.flexrow {
    /*height: 3rem;
    line-height: 3rem;*/
    flex-direction: row;
    align-items: center;
}

/* TEMPORANEO: nascondere checkbox */
.flexrow > div:nth-child(1) {
    opacity: 0;
}
.flextable.withCheckboxes .flexrow > div:nth-child(1) {
    opacity: 1;
}

.flexhead, .flexSecondRow .flexrow:nth-child(1) {
    font-weight: bold;
}

.flexDoubleRow.open > div:nth-child(1) {
    background: hsla(173, 71%, 35%, 0.15);
}
.flexDoubleRow .flexSecondRow {
    max-height: 0;
    overflow: hidden;
}
.flexDoubleRow.open .flexSecondRow {
    max-height: 10000rem;
}

.flexSecondRow {
    flex-direction: column;
    border-left: 2rem solid hsl(173, 71%, 35%);
}

.open .flexSecondRow {
    border-left: 1rem solid hsl(173, 71%, 35%);
}

.flexbody .flexrow {
    border-top: 1px solid #ddd;
}
.flexbody .flexrow:hover {
    background: hsla(173, 71%, 35%, 0.25);
}

.flexrow > div:nth-child(1) {
    flex: 0 0 5rem;
    text-align: center;
}

.flexrow > div:nth-child(2) {
    flex: 1 1 auto;
    flex-direction: row;
    display: flex;
    align-items: center;
}

.flexrow > div:nth-child(2) > div {
    flex: 1 1 2rem;
    flex-direction: row;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
    padding: .5rem;
    line-height: 1.3rem;
}
/*
.elems2 > * {
    width: 50%;
}
.elems3 > * {
    width: 33%;
}
.elems4 > * {
    width: 25%;
}
.elems5 > * {
    width: 20%;
}
.elems6 > * {
    width: 16.65%;
}*/

.flexrow > div:nth-child(3) {
    flex: 0 0 25rem;
    overflow: hidden;
    text-align: center;
}

.flextable .pagination {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    color: #4d4d4d;
    padding: 0 2rem;
}








html, body {
	height: 100%;
	min-height: 100%;
    overflow: hidden;
}
body {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.selector {
    display: inline-flex;
    width: 100%;
    align-items: stretch;
}

.selector > div {
    width: 49%;
}
.selector > div:nth-child(1) {
    margin-right: 2%;
}

.selector ul {
    border: 1px solid #ccc;
    list-style: none;
    padding: 0;
    border-radius: .3rem;
    min-width: 17vw;
    margin-top: .5rem;
}
.selector ul li {
    border-top: 1px solid #ccc;
    padding: .5rem;
}
.selector li[layout="row"] span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.selector ul li:nth-child(1) {
    border-top: none;
}

.selector .fa-trash,
.selector .fa-remove,
.selector .fa-chevron-circle-left {
    color: red;
}
.selector .fa-chevron-circle-right {
    color: #47a447;
}

.customFieldBox {
    align-items: flex-start;
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
}

.customFieldBox .form-group {/*.comboBoxOptions*/
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.customFieldBox > div:first-child {
    padding: .5rem;
}

.customFieldBox > div:last-child {
    flex: 1;
    border-left: 1px solid #ccc;
    padding-left: .5rem;
}

.customFieldBox i.fa-trash {
    color: red;
}



/******************************/
/********** CHECKBOX **********/
/******************************/

input[type="checkbox"] {
	position: relative;
	margin: .4rem;
}

input[type="checkbox"]:before {
	content: ' ';
	background: white;
	border: .15rem solid hsl(173, 71%, 35%);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 0.9rem;
	height: 0.9rem;
	transition: background .3s ease-in-out;
}

input[type="checkbox"]:checked:before {
	background: hsl(173, 71%, 35%);
}

input[type="checkbox"]:checked:after {
	content: ' ';
	background: transparent;
	border-left: .2rem solid white;
	border-bottom: .2rem solid white;
	position: absolute;
    top: 20%;
    left: 30%;
    width: 60%;
    height: 38%;
	z-index: 2;
	transform: rotate(-45deg);
}



/******************************/
/******* FORM COMPLETO ********/
/******************************/

.subquestion {
    padding-top: 2rem;
    padding-left: 2rem;
}

fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}

.form-radio,
.form-group {
  position: relative;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.form-group .form-radio,
.form-group .form-group {
  margin-top: 0;
  margin-bottom: 0;
}

.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}

.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 0.8rem;
}
.checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  position: absolute;
  width: 100%;
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input {
  height: 2rem;
  line-height: 2rem;
  outline: none;
}
.form-group textarea {
  resize: none;
}
.form-group select {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  font-size: 1rem;
  height: 2rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: none;
  line-height: 2rem;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

.form-group .control-label,
.form-group input.ng-empty ~ .control-label,
.form-group textarea.ng-empty ~ .control-label,
.form-group input.ng-empty:valid ~ .control-label,
.form-group textarea.ng-empty:valid ~ .control-label,
.form-group.ultracompact input.ng-empty:focus ~ .control-label {
  position: absolute;
  top: 0.5rem;
  left: .2rem;
  pointer-events: none;
  padding-left: 0.125rem;
  z-index: 1;
  color: #b3b3b3;
  font-size: 1rem;
  font-weight: normal;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  padding: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
}







.form-group.ultracompact {
    margin-top: 0;
    margin-bottom: 0;
}

.form-group.ultracompact input.ng-not-empty ~ .control-label,
.form-group.ultracompact input.ng-not-empty:focus ~ .control-label {
    opacity: 0;
}

.form-group.compact,
.checkbox.compact,
.form-radio.compact {
    margin-top: 1rem;
    margin-bottom: 0;
}






.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: hsl(173, 71%, 35%);
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}
.form-group input,
.form-group textarea {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  box-shadow: none;
}

.form-group input[type="file"] {
  line-height: 1;
}
.form-group input[type="file"] ~ .bar,
.form-group input[type="range"] ~ .bar {
  display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}
.form-group select.ng-not-empty ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input.ng-empty:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group input.ng-not-empty ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea.ng-empty:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label ,
.form-group textarea.ng-not-empty ~ .control-label {
  font-size: 0.8rem;
  color: gray;
  top: -1rem;
  left: 0;
  max-width: 100%;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  box-shadow: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: hsl(173, 71%, 35%);
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

.checkbox label,
.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
  display: block;
}
.checkbox input,
.form-radio input {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}

.radio {
  margin-bottom: 1rem;
}
.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #999;
}
.radio .helper::before, .radio .helper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}
.radio .helper::after {
  -webkit-transform: scale(0);
          transform: scale(0);
  background-color: hsl(173, 71%, 35%);
  border-color: hsl(173, 71%, 35%);
}
.radio label:hover .helper {
  color: hsl(173, 71%, 35%);
}
.radio input:checked ~ .helper::after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.radio input:checked ~ .helper::before {
  color: hsl(173, 71%, 35%);
}

.checkbox {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: hsl(173, 71%, 35%);
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: hsl(173, 71%, 35%);
}
.checkbox input:checked ~ .helper {
  color: hsl(173, 71%, 35%);
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: .4rem;
}

.has-error .legend.legend, .has-error.form-group .control-label.control-label {
  color: hsl(173, 71%, 35%);
}
.has-error.form-group .form-help,
.has-error.form-group .helper, .has-error.checkbox .form-help,
.has-error.checkbox .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: hsl(173, 71%, 35%);
}
.has-error .bar::before {
  background: red;
  left: 0;
  width: 100%;
}

.form-group i.fa-calendar {
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	cursor: pointer;
	transform: scale(1);
	transition: transform .2s ease-in-out, color .2s ease-in-out;
    color: inherit;
	transform-origin: 100% 50%;
}

.form-group i.fa-calendar:hover {
	transform: scale(1.3);
	color: hsl(173, 71%, 35%);
}

.form-group i.fa-exclamation-triangle {
  opacity: 0;
  position: absolute;
  top: 0.4rem;
  right: 0;
  color: red;
  transition: opacity .3s ease-in-out;
}
.form-group select ~ i.fa-exclamation-triangle,
.form-group input[type="number"] ~ i.fa-exclamation-triangle,
.form-group i.fa-calendar ~ i.fa-exclamation-triangle {
  right: 2rem;
}

.form-group.has-error i.fa-exclamation-triangle,
.form-group input.ng-invalid ~ i.fa-exclamation-triangle,
.form-group select.ng-invalid ~ i.fa-exclamation-triangle {
  opacity: 1;
}

.form-group.has-error input ~ i.bar::before,
.form-group input.ng-invalid ~ i.bar::before {
  background:red;
}

errors > div:nth-child(1) {
    bottom: 0rem;
    left: 1rem;
    color: red;
}

errors > div {
    opacity: 0;
    /* white-space: nowrap; */
}

errors > div:nth-child(1) {
    opacity: 1;
}

.form-group errors {
    /* position: absolute; */
    /* bottom: -1rem; */
    min-height: 1rem;
    line-height: 1rem;
}

[layout="row"] > .form-group {
    flex: 1;
}



/**************************/
/********* RANGE **********/
/**************************/

input[type=range] {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1;
  height: 2rem;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  background-color: white;
  border-radius: 1rem;
  border: 0.0625rem solid #999;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  background-color: white;
  border-radius: 1rem;
  border: 0.0625rem solid #999;
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  background-color: white;
  border-radius: 1rem;
  border: 0.0625rem solid #999;
  cursor: pointer;
}
input[type=range]:focus::-webkit-slider-thumb,
input[type=range]:hover::-webkit-slider-thumb {
  border-color: #52c7b9;
  background-color: #52c7b9;
}
input[type=range]:focus::-moz-range-thumb,
input[type=range]:hover::-moz-range-thumb {
  border-color: #52c7b9;
  background-color: #52c7b9;
}
input[type=range]:focus::-ms-thumb,
input[type=range]:hover::-ms-thumb {
  border-color: #52c7b9;
  background-color: #52c7b9;
}
input[type=range]:active::-webkit-slider-thumb {
  border-color: #1a998a;
  background-color: #1a998a;
}
input[type=range]:active::-moz-range-thumb {
  border-color: #1a998a;
  background-color: #1a998a;
}
input[type=range]:active::-ms-thumb {
  border-color: #1a998a;
  background-color: #1a998a;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  cursor: pointer;
  height: 1rem;
  border-bottom: 0.0625rem solid #999;
  background-color: transparent;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  color: #52c7b9;
  border-color: #52c7b9;
}
input[type=range]::-moz-range-track {
  width: 100%;
  cursor: pointer;
  height: 1rem;
  border-bottom: 0.0625rem solid #999;
  background-color: transparent;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}



.leftContextBox {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	box-shadow: 0 .2rem .4rem gray;
	padding: 1rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	z-index: 10001;
	background: white;
}

.leftContextBox.open {
	opacity: 1;
	pointer-events: initial;
}

contextmenuglass {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	background: hsla(0,0%,0%,0.2);
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	z-index: 10000;
}

.leftContextBox.open + contextmenuglass {
	opacity: 1;
	pointer-events: initial;
}





/*******************************************************/
/********************** DIALOGS ************************/
/*******************************************************/
modalbackdrop {
  z-index: 999;
  background: #ddd;
  background: rgba(0,0,0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: transform .3s ease-in-out, opacity .2s ease-in-out;
  pointer-events: none;
}
modalbackdrop.in {
    opacity: 1;
    pointer-events: initial;
}

dialogg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  max-width: 80%;
  min-width: 30%;
  z-index: 999;
  text-align: left;
  border: 2px solid hsl(173, 71%, 35%);
  border-radius: .5rem;
  background: white;
  box-shadow: 0 .2rem 0.6rem black;
  transition: transform .3s ease-out, opacity .2s ease-in-out;
}

.notransition {
    transition: none !important;
}

dialogg.in {
  transform: translate(-50%, -50%);
  opacity: 1;
}

dialogtitle {
  width: 100%;
  display: block;
  padding: .6rem;
  font-size: 150%;
  line-height: 150%;
  cursor: move;
}

dialogcontent {
  width: 100%;
  display: block;
  padding: .6rem;
  overflow: auto;
  max-height: 80vh;
}

dialogactions {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: .2rem;
  border-top: 1px solid #ddd;
}

dialogactions button {
  margin: 0 .2rem;
}





/*******************************************************/
/****************** CALENDAR DIALOG ********************/
/*******************************************************/

.calendar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 35rem;
  padding: 0;
  margin: 0.5rem auto;
}

.calendarHeader {
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.calendarHeader i {
  width: 1rem;
  text-align: center;
  font-size: .7rem;
  line-height: 1.5rem;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
.calendarHeader > span:hover i {
  opacity: 1;
}
.calendarHeader i:hover {
  transform: scale(1.4);
}

.calendar .calendarHeaderDay {
  width: 3rem;
  margin: 0 1rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  border: 1px solid transparent;
}

.calendar .calendarDay {
  width: 3rem;
  margin: 1rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0.5;
  pointer-events: none;
}
.calendar .calendarDay.selectable {
  opacity: 1;
  pointer-events: initial;
}
.calendar .calendarDay.today {
  border-color: #1a998a;
}
.calendar .calendarDay:hover {
  background: #4c4c4c;
  color: whitesmoke;
}





/*******************************************************/
/********************* SCROLLBAR ***********************/
/*******************************************************/

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.15);
	border-radius: .2rem;
}

::-webkit-scrollbar
{
	width: .5rem;
    height: .5rem;
	background-color: #f9f9f9;
}

::-webkit-scrollbar-thumb
{
	background-color: rgba(50,50,50, .5);
	border-radius: .2rem;
}

*:hover::-webkit-scrollbar-thumb {
    background-color: rgb(50,50,50);
}

.upButton {
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    width: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    height: 2rem;
    padding: 0;
    line-height: 2rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
}

.upButton.visible {
    opacity: 1;
    pointer-events: initial;
}

.headerQuestion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #aaa;
}

.bodyQuestion,
.collapsable {
    max-height: 0;
    opacity: 0;
    transition: all .5s ease-in-out;
    overflow: hidden;
}

.bodyQuestion.open,
.collapsable.open {
    max-height: 200rem;
    opacity: 1;
}

.deleting {
    opacity: 0.2;
}

.deleting i.fa-repeat {
    color: green;
}



/*
.graphBox {
  border: 1px solid #aaa;
  padding: 1rem;
  min-width: 40rem;
}
.graphBox path {
  stroke-linecap: round;
  stroke-width: 10px;
}
.graphBox path:nth-child(1) {
  stroke: cyan;
}
.graphBox path:nth-child(2) {
  stroke: #888;
}
.graphBox text {
  text-anchor: middle;
  font-size: 1.5rem;
}
.graphBox text:nth-child(3) {
  font-size: 2.5rem;
}
.graphBox .graphTitle {
  font-size: 150%;
  font-weight: bold;
  cursor: pointer;
}
.graphBox .gauges {
  display: flex;
  flex-direction: row;
}
.graphBox ul {
  list-style: none;
}
.graphBox ul.waveList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: #15847b;
  text-decoration: underline;
}
.graphBox ul.waveList li {
  padding: .5rem 1rem;
  cursor: pointer;
}
.graphBox ul.waveList li.selected {
  font-weight: bold;
}
.graphBox .grpResume {
  display: flex;
  flex-direction: row;
  margin-bottom: .5rem;
}
.graphBox .grpResume div:nth-child(1) {
  flex: 0 0 20rem;
}
.graphBox .grpResume div:nth-child(2) {
  flex: 1;
}
.graphBox .innerGroups > li:last-child {
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px dotted #aaa;
}
.graphBox .progressGraph {
  position: relative;
  width: 100%;
  height: 1.4rem;
  margin: .1rem;
  line-height: 1.4rem;
}
.graphBox .progressGraph div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  border-radius: .3rem;
  color: black;
  text-align: center;
}

.graphContainerType1 {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  width: auto;
  position: relative;
}
.graphContainerType1 ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}
.graphContainerType1 ul li {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 3rem;
  align-items: center;
  border-top: 1px solid #ddd;
}
.graphContainerType1 ul li:first-child {
  border: none;
}
.graphContainerType1 ul li > div:nth-child(1) {
  width: 5rem;
  padding: 0 .7rem;
}
.graphContainerType1 ul li > div:nth-child(2) {
  flex: 1 1 1rem;
  padding-left: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: visible;
}
.graphContainerType1 ul li > div:nth-child(2) div {
  height: 2rem;
}
.graphContainerType1 ul li > div:nth-child(2) label {
  font-weight: bold;
  padding-left: .5rem;
}
.graphContainerType1 ul li:nth-child(1) div:nth-child(2) div {
  background: #6592AA;
}
.graphContainerType1 ul li:nth-child(2) div:nth-child(2) div {
  background: #D2D8E5;
}
.graphContainerType1 ul li:nth-child(3) div:nth-child(2) div {
  background: #475B61;
}
.graphContainerType1 ul li:nth-child(4) div:nth-child(2) div {
  background: #65AA92;
}

.graphContainerType2 {
  display: flex;
  flex-direction: row;
  width: 300px;
  position: relative;
}
.graphContainerType2 path:nth-child(1) {
  stroke: #c4c4c4;
}
.graphContainerType2 path:nth-child(2) {
  stroke: #e6b9b8;
}
.graphContainerType2 text {
  text-anchor: middle;
  font-size: 1.1rem;
}
.graphContainerType2 .hovered1,
.graphContainerType2 .hovered0 {
  opacity: 0;
  transition: opacity .15s ease-in-out;
}
.graphContainerType2 .hovered_def {
  transition: opacity .15s .15s ease-in-out;
}
.graphContainerType2 .hover1:hover ~ .hovered1,
.graphContainerType2 .hover0:hover ~ .hovered0 {
  opacity: 1;
  transition: opacity .15s .15s ease-in-out;
}
.graphContainerType2 .hover1:hover ~ .hovered_def,
.graphContainerType2 .hover0:hover ~ .hovered_def {
  opacity: 0;
  transition: opacity .15s ease-in-out;
}

.graphContainerType3 {
  display: flex;
  flex-direction: row;
  height: 15rem;
  position: relative;
}
.graphContainerType3 ul {
  position: absolute;
  display: flex;
  list-style: none;
}
.graphContainerType3 ul.scale {
  top: 0;
  left: 0;
  bottom: 2rem;
  right: 0;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #ddd;
}
.graphContainerType3 ul.scale li {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  flex: 1 1 1rem;
}
.graphContainerType3 ul.scale li span {
  width: 7rem;
  text-align: right;
  padding-right: .5rem;
}
.graphContainerType3 ul.scale li .line {
  height: 1px;
  flex: 1 1 1rem;
  background: #ddd;
}
.graphContainerType3 ul.legend {
  bottom: 0;
  height: 2rem;
  left: 7rem;
  right: 0;
  flex-direction: row;
  justify-content: space-around;
}
.graphContainerType3 ul.legend li {
  flex: 1 1 1rem;
  text-align: center;
}
.graphContainerType3 ul.data {
  top: 0;
  bottom: 2rem;
  left: 7rem;
  right: 0;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
}
.graphContainerType3 ul.data li {
  flex: 0 0 2rem;
  text-align: center;
  background: #00945e;
  width: 2rem;
}

.blue.graphContainerType3 ul.data li {
  background: #6592AA;
}
*/

.mainLegend {
    display: flex;
    flex-direction: row;
}

.mainLegend div {
    margin: 1rem;
}

.mainLegend div:nth-child(1):before,
.mainLegend div:nth-child(2):before,
.mainLegend div:nth-child(3):before {
    content: '';
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .6rem;
    border-radius: 50%;
}
.mainLegend div:nth-child(1):before,
.graphGreen {
    background: #75ff68;
}
.mainLegend div:nth-child(2):before,
.graphYellow {
    background: #ffb041;
}
.mainLegend div:nth-child(3):before,
.graphRed {
    background: #ff4242;
}

.istogrammaContainer {
    position: relative;
    text-align: center;
}
.istogrammaContainer:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5rem;
    pointer-events: none;
    background: transparent; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, transparent , white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, transparent, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, transparent, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, transparent , white); /* Standard syntax */
}

.istogramma {
    display: inline-flex;
    flex-direction: row;
    max-width: 100%;
    overflow: auto;
    padding-right: 5rem;
}

.istogramma > div {
    width: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.istogramma > div:last-child {
    padding-right: 5rem;
    width: 8rem;
}
.istogramma > div > div:nth-child(1) {
    text-align: center;
}
.istogramma > div > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 10rem;
}
.istogramma > div > div:nth-child(2) div {
    display: inline-block;
    width: 2rem;
}
.istogramma > div > div:nth-child(3) {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    text-align: left;
    width: 10rem;
    margin-bottom: 7rem;
    margin-top: 5rem;
}



.graphBox .listClusters {
    list-style: none;
}
.graphBox .grpResume {
  display: flex;
  flex-direction: row;
  margin-bottom: .5rem;
}
.graphBox .grpResume div:nth-child(1) {
  flex: 0 0 20rem;
}
:root.mobile .graphBox .grpResume div:nth-child(1) {
  flex: 0 0 14rem;
}
.graphBox .grpResume div:nth-child(2) {
  flex: 1;
}
.graphBox .innerGroups > li:last-child {
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px dotted #aaa;
}
.graphBox .progressGraph {
  position: relative;
  width: 100%;
  height: 1.4rem;
  margin: .1rem;
  line-height: 1.4rem;
}
.graphBox .progressGraph div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  border-radius: .3rem;
  color: black;
  text-align: center;
}








.graph {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.graphTitle {
  font-size: 100%;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.graph .graphContainerType4 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.graph .graphContainerType4 ul {
  list-style: none;
  padding: 0.8rem 0 1.8rem;
}
.graph .graphContainerType4 ul li {
  height: 2rem;
}
.graph .graphContainerType4 ul:first-child {
  flex: 0 1 auto;
}
.graph .graphContainerType4 ul:first-child li {
  line-height: 2rem;
  padding: 0 1rem 0 0;
  text-align: right;
}
:root.mobile .graph .graphContainerType4 ul:first-child li {
  font-size: 0.8rem;
}
.graph .graphContainerType4 ul:last-child {
  flex: 1 1 auto;
  position: relative;
}
.graph .graphContainerType4 ul:last-child li.scale {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  border-left: 1px solid #aaa;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(1) {
  left: 0;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(2) {
  left: 10%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(3) {
  left: 20%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(4) {
  left: 30%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(5) {
  left: 40%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(6) {
  left: 50%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(7) {
  left: 60%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(8) {
  left: 70%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(9) {
  left: 80%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(10) {
  left: 90%;
}
.graph .graphContainerType4 ul:last-child li.scale:nth-child(11) {
  left: 100%;
}
.graph .graphContainerType4 ul:last-child li {
  position: relative;
}
.graph .graphContainerType4 ul:last-child li div.bar {
  height: 1.2rem;
  position: absolute;
  top: 0.4rem;
  left: 0;
  text-align: right;
  padding-right: 1rem;
}
.graph .graphContainerType4 ul:last-child li div.bar.red,
.progressGraph div.red {
  background: #ff4242;
}
.graph .graphContainerType4 ul:last-child li div.bar.yellow,
.progressGraph div.yellow {
  background: #ffd061;
}
.graph .graphContainerType4 ul:last-child li div.bar.green,
.progressGraph div.green {
  background: #75ff68;
}
.graph .graphContainerType5, .graph .graphContainerType2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}
.graph .graphContainerType2 svg {
    transform: scale(0.7) translateX(-30%);
}
.graph .graphContainerType5 path, .graph .graphContainerType2 path {
  stroke: #dedede;
}
.graph .graphContainerType5 path.red, .graph .graphContainerType2 path.red {
  stroke: #ff4242;
}
.graph .graphContainerType5 path.yellow, .graph .graphContainerType2 path.yellow {
  stroke: #ffb041;
}
.graph .graphContainerType5 path.green, .graph .graphContainerType2 path.green {
  stroke: #75ff68;
}
.graph .graphContainerType5 path.red + text, .graph .graphContainerType2 path.red + text {
  fill: #ff4242;
}
.graph .graphContainerType5 path.yellow + text, .graph .graphContainerType2 path.yellow + text {
  fill: #ffb041;
}
.graph .graphContainerType5 path.green + text, .graph .graphContainerType2 path.green + text {
  fill: #75ff68;
}
.graph .graphContainerType5 text, .graph .graphContainerType2 text {
  text-anchor: middle;
  font-size: 1.9rem;
}
.graph .graphContainerType5 .legend, .graph .graphContainerType2 .legend {
  padding-left: 2rem;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.graph .graphContainerType5 .legend li, .graph .graphContainerType2 .legend li {
  line-height: 2.5rem;
}
.graph .graphContainerType5 .legend li .color, .graph .graphContainerType2 .legend li .color {
  display: inline-block;
  border-radius: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.6rem;
}
.graph .graphContainerType5 .legend li:nth-child(3) .color, .graph .graphContainerType2 .legend li:nth-child(3) .color {
  background: #ff4242;
}
.graph .graphContainerType5 .legend li:nth-child(2) .color, .graph .graphContainerType2 .legend li:nth-child(2) .color {
  background: #ffb041;
}
.graph .graphContainerType5 .legend li:nth-child(1) .color, .graph .graphContainerType2 .legend li:nth-child(1) .color {
  background: #75ff68;
}
.graph .graphContainerType6 {
  display: flex;
  flex-direction: row;
  height: 15rem;
  position: relative;
}
.graph .graphContainerType6 ul {
  position: absolute;
  display: flex;
  list-style: none;
}
.graph .graphContainerType6 ul.scale {
  top: 0;
  left: 0;
  bottom: 2rem;
  right: 0;
  flex-direction: column;
  justify-content: space-between;
}
.graph .graphContainerType6 ul.scale li {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  flex: 1 1 1rem;
}
.graph .graphContainerType6 ul.scale li span {
  width: 5rem;
  text-align: right;
  padding-right: .5rem;
}
.graph .graphContainerType6 ul.scale li .line {
  height: 1px;
  flex: 1 1 1rem;
  background: #ddd;
}
.graph .graphContainerType6 ul.legend {
  bottom: 0;
  height: 2rem;
  left: 5rem;
  right: 0;
  flex-direction: row;
  justify-content: space-around;
}
.graph .graphContainerType6 ul.legend li {
  flex: 1 1 1rem;
  text-align: center;
}
.graph .graphContainerType6 ul.data {
  top: 1rem;
  bottom: 3rem;
  left: 5rem;
  right: 0;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
}
.graph .graphContainerType6 ul.data li {
  flex: 0 0 3.5rem;
  text-align: center;
  background: #00945e;
  width: 1rem;
  position: relative;
}
.graph .graphContainerType6 ul.data li.red {
  background: #ff4242;
}
.graph .graphContainerType6 ul.data li.yellow {
  background: #ffb041;
}
.graph .graphContainerType6 ul.data li.green {
  background: #75ff68;
}
.graph .graphContainerType6 ul.data li:after {
  content: attr(value) "%";
  position: absolute;
  top: -1.2rem;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0 0 .1rem white,  0 0 .2rem white,  0 0 .3rem white,  0 0 .4rem white,  0 0 .5rem white,  0 0 .6rem white;
}


.top-worst {
  display: flex;
  flex-direction: row;
}
:root.mobile .top-worst {
  flex-direction: column;
}
.top-worst > * {
  flex: 0 0 50%;
  padding: 0 2rem;
}
:root.mobile .top-worst > * {
  flex: 0 0 50%;
  padding: 0;
}
:root.mobile .top-worst > *:last-child {
  padding-top: 1.5rem;
}
.top-worst > * > div:first-child {
  font-size: 120%;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.top-worst > * li {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.top-worst > * li div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #777;
  margin-left: -1px;
  margin-bottom: -1px;
}
.top-worst > * li div:first-child {
    flex: 1;
    text-align: left;
    justify-content: flex-start;
    padding: .5rem;
}
.top-worst > * li div:last-child {
    flex: 0 0 5rem;
}
.top-worst > * li .red {
  background: #ff4242;
}
.top-worst > * li .yellow {
  background: #ffb041;
}
.top-worst > * li .green {
  background: #75ff68;
}

.cols {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.cols > * {
    flex: 0 0 auto;
}

@media only screen and (max-width: 1200px) {
    #dashboardGraph .cols {
        flex-direction: column;
    }

    #dashboardGraph .cols > * {
        width: 100%;
    }
}

.tree {
    list-style: none;
}

.tree > li > div {
    padding: 0;
}

.tree ul {
    list-style: none;
    padding-left: 4rem;

    overflow: auto;
    height: auto;
    max-height: 0;
}

.tree ul.expanded {
    max-height: 100vh;
}

.tree li > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    line-height: 1rem;
    padding: 0.3rem 1rem;
}

.tree li > div:hover {
    background: rgba(26,154,139, 0.1);
}

.tree button, .tree .asButton {
    background: transparent;
    color: black;
    box-shadow: 0 0.15rem 0.15rem lightgray;
    border: 1px solid lightgray;
    height: 2rem;
    line-height: 2rem;
    min-width: 7rem;
}


.register {
    width: 80%;
    height: auto;
    box-shadow: 0 .2rem .2rem black;
    border: 1px solid #aaa;
    background: white;
    position: relative;
    padding: 1rem 2rem;
    text-align: left;
    margin: 0 auto;
}

:root.mobile .register {
    width: calc(100% - 1rem);
    padding: 1rem;
}

.register > h2 {
    margin: 3rem 2rem 2rem;
}


/*AUTOCOMPLETE*/
.autocompleteList {
  opacity: 0;
  position: fixed;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity .3s ease-in-out;
	overflow: auto;
	border: 1px solid #ccc;
}
.autocompleteList.visible {
  pointer-events: initial;
  opacity: 1;
}
.autocompleteList li {
  height: 3rem;
  line-height: 2rem;
  margin: 0;
  padding: .5rem;
  width: 100%;
}
.autocompleteList li {
  border-top: 1px solid transparent;
  border-bottom: 1px solid #ccc;
}
.autocompleteList li:last-child {
  border-color: transparent;
}
.autocompleteList li.selected {
  font-weight: bold;
}

.form-group input[autocomplete] {
	opacity: 0;
}
.form-group .fakeinput {
	position: absolute;
	top: 0;
	z-index: 0;
	pointer-events: none;
	color: black !important;
}

.form-group .fakeinput:before {
	display: inline-block;
	opacity: 0.3;
	content: attr(data-suggestion-pre);
}
.form-group .fakeinput:after {
	display: inline-block;
	opacity: 0.3;
	content: attr(data-suggestion-post);
}

errors > .gray {
	color: gray !important;
}


.autocompleteList li {
	position: relative;
}
.autocompleteList li .miniglass {
	position: absolute;
	top: 0;
	bottom: 0;
	left:0;
	right: 0;
	background: transparent;
	z-index: 1000;
}

:root.mobile input[multiselect].open {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.9);
    height: 3rem;
    line-height: 3rem;
    padding-right: 6rem;
}

:root.mobile .autocompleteList.visible {
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
}

.autocompleteClose {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    min-width: 0;
    width: 6rem;
    height: 3rem;
    margin: 0;
    background: none;
    border: none;
    text-transform: uppercase;
    color: hsla(173, 71%, 35%, 1);
    font-weight: bold;
    box-shadow: none;
    border: 1px solid;
}

:root.mobile .autocompleteList.visible + .autocompleteClose {
    display: block;
}