:root { /* Default theme */
  --msg-bg: #007bff;
  --brand-color: #007bff;
  --body-font: 'Arial', sans-serif;
}

@font-face {
  font-family: 'Gilroy'; /*a name to be used later*/
  src: url('/inc/font/Gilroy-Medium.ttf'); /*URL to font*/
}

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

.bgLogo {
  position: absolute;
  right: 0px;
  bottom: 50px;
  opacity: 0.1;
}

.grow {
  animation: grow 1s ease;
}
@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.fade-in {
  animation: fade-in 1s linear;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 0.1; }
}

@media print {
  .no-print, .no-print * {
    display: none !important;
  }
  .flex-container {
    width: calc(100% - 45px) !important;
    margin-left: 25px !important;
  }
  @page {
    margin-left: 0.5in;
    margin-right: 0.5in;
    margin-top: 0;
    margin-bottom: 0;
  }
  header, footer {
    display: none !important;
  }
}

/*****************/
/* TOP MENU ******/
/*****************/

.navbarTop {
  overflow: hidden;
  background-color: #19222A;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  left: 272px;
  width: 100%; /* Full width */
  z-index: 2;
}

/* Links inside the navbar */
.navbarTop a {
  float: left;
  display: block;
  height: 20px;
  color: #f2f2f2 !important;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbarTop a:hover {
  background: #ddd;
  color: black;
}

/* FOOTER */
.footer {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  bottom: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 2;
}
.footer a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  font-size: 0.7em;
  padding: 14px 16px;
  text-decoration: none;
}
.footer a:hover {
  background: #ddd;
  color: black;
}

/* IMAGES */
img.face {
  border: 1px solid black;
  border-radius: 10px;
  max-width:200px;
  max-height:200px;
  height: auto;
  width:auto;
  /* on hover hrayscale */
  filter: none;
  -webkit-filter: grayscale(0%);
}
img.face:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

/* MAIN PAGE BOX */
.flex-container {
  position: relative;
  
  /*width: calc(100% - 290px);*/
  margin-top: 0px;
  margin-bottom: 20px;
  /*margin-left: 265px;*/
  margin-left: 0px;
  margin-right: 0px;
  padding: 10px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-login {
  width: calc(100% - 20px);
  margin-left: 0px !important;
}

.flex-item {
  justify-content: start;
  color: #010101;
  padding: 10px;
  margin: 10px;
  flex: 20%;
  border-radius: 10px;

  -webkit-box-shadow: 5px 5px 21px -8px rgba(0,0,0,0.85);
  -moz-box-shadow: 5px 5px 21px -8px rgba(0,0,0,0.85);
  box-shadow: 5px 5px 21px -8px rgba(0,0,0,0.85);
}

.banner { 
  flex: 100% !important;
}

.flex-item:first-child {
}
.flex-item:last-child {
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-item {
    margin-right: 20px;
  }
  .flex-item:last-child {
    margin-right: 20px;
  }
}

.pageTitle {
  color: #0C4171;
  font-family: Gilroy;
  font-size: 3em;
  opacity: 0.5;
}

.pageSubTitle {
  color: #0C4171; 
  font-family: Gilroy;
  font-size: 2em;
  opacity: 0.5;
  margin-left: 0px;
  margin-bottom: 10px;
} 

.topCorner::after {
  clear: both;
}

h1 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: underline;
}

ol {
   padding-left: 10px;;
   list-style: inside decimal;
}

.nowrap {
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 1px;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.security {
  color: red;
}

.break {
  flex-basis: 100%;
  height: 0;
}

.red {
  color: red;
}

a.red:link, a.red:visited, a.red:hover, a.red:active {
  color: red;
}



.bold {
  font-weight: bold;
}

.orange {
  color: darkorange;
}

.green {
  color: green;
}

.largeText {
  font-weight: bold;
  font-size: 2em;
}

.containerCertificato {
  width: 400px;
}
.containerCertificato.small {
  width: 200px;
}

.imageCertificato {
  max-width:100%;
  max-height:100%;
  height: auto;
  width:auto;

  border-width:3px;
  border-style:solid;
  border-color:#0C4171;
  padding: 0em;
}

.imageCertificato.noBorder {
  border-width:0px;
}

.warning {
  color: red;
  font-weight: bold;
  font-size: 1.1em;
  animation: blinker 2s linear infinite;
  padding-bottom: 20px;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* FADE OUT TEXT */
.animate-fadeout {
  background-color: var(--msg-bg);
  border: 1px;
  border-radius: 10px;
  font-size: 16px;
  position: absolute;
  top:20px;
  right:15px;
  padding: 10px;
  z-index:100;
  animation: fadeOutAnimation ease 12s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.animate-fadeout.red {
  background-color: red;
  color: black;
  font-weight: normal;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 0.9;
  }

  100%  {
    opacity: 0;
  }
}

.vertical {
  display: table-cell;
  vertical-align: top !important;
  text-align: center !important;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform: scale(-1, -1);
  padding: 5px;
  margin: 5px;
}

ol.changesList, 
ul.changesList {
  margin-left: 30px;
}



/*******************/
/*** STAR RATING ***/
/*******************/
.starChecked {
  color: orange;
}

/*******************/
/******* MAP *******/
/*******************/
#map {
  height: 80%;
  min-height: 200px;
  min-width: 300px;
}

.flag-icon {
  position: relative;
  left: 10px;
  width: 17px;
  height: 30px;
}

/*******************/
/****** TABLE ******/
/*******************/
/***************************/
table { 
  /*border-collapse:separate;*/
  border-collapse: collapse;
  display:table-cell;
  empty-cells: show;
  z-index: 1;
}
th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
th:last-of-type.vertical {
  border-top-right-radius: 0px;
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
/*
tr:nth-of-type(odd) { 
  background: #ccc; 
}
tr { 
  background: #eee;
}
*/

tr.strikeout, td.strikeout, tr.strikeout td {
  background: transparent url('http://davidrhysthomas.co.uk/linked/strike.png') 0 50% repeat-x;
}

tr.highlight, td.highlight, tr.highlight td {
  background-color: #ffa;
}

th { 
  background: #0C4171;
  color: white;
  font-weight: bold;
}
a.whiteLink:link,a.whiteLink:visited,a.whiteLink:hover,a.whiteLink:active {
  color: white;
  font-weight: bold;
}

td, th { 
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: left;
  white-space: nowrap;
  font-size: 0.9em;
}
tr {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

td {
  background: #FAFAFA;
}
.et {
  font-size: 0.8em;
  max-width: 200px;
  white-space: normal !important;
}

td.currency {
  text-align: right;
}

td.center {
  text-align: center;
}

/* sticky first col */
.tscroll {
  width: calc(100vw - 150px)!important;;
  overflow-x: scroll;
  margin-bottom: 10px;
}

.tscroll table td:first-child, .tscroll th:first-child {
  position: sticky;
  left: 0;
  border-right: dashed #888 1px;
  z-index: 1;
}

.tscroll td, .tscroll th {
  border-bottom: dashed #888 1px;
}



/*******************************/
/***** SIDE-BY-SIDE TABLES *****/
/********** BILANCIO ***********/
/*******************************/
.tableRow {
  display: flex;
  margin-left:-5px;
  margin-right:-5px;
}

.tableColumn {
  flex: 50%;
  padding: 5px;
}

/********************/
/***** LINKS ********/
/********************/

a.noUnderline {
  text-decoration: none;
}

a:link {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: black;
}

a:active {
  color: black;
}

/********************/
/* SITE-WIDE FORMS */
/********************/
textarea { 
  margin-top: 20px;
  padding: 9px; 
  border: solid 1px #E5E5E5; 
  outline: 0; 
  font: normal 13px/100% Verdana, Tahoma, sans-serif; 
  width: 200px; 
  background: #FFFFFF url('bg_form.png') left top repeat-x; 
  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
}
 
textarea { 
  width: 400px; 
  max-width: 400px; 
  height: 150px; 
  line-height: 150%; 
} 
  
input:hover, textarea:hover, 
input:focus, textarea:focus { 
  border-color: #C9C9C9; 
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
} 

/*
label { 
  margin-left: 10px; 
  color: #999999; 
} 
*/

select, input[type=text],input[type=password], input[type=tel], input[type=email], input[type=number] {
  width: 300px;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 5px 15px;
  line-height: 1em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  background-color: #E5EEFB;
  border-style: none;
  border-width: thin;
  border-radius: 5px;
  border-color: lightgrey;
}

input[type=text]:read-only {
  font-size: 12px;
  color: darkgray;
}

select.small, input[type=text].small,input[type=password].small, input[type=tel].small, input[type=email].small, input[type=number].small {
  width: 150px;
  padding: 3px 5px;
}

input[type=date],input[type=time] {
  width: auto;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 5px 15px;
  line-height: 1em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  background-color: #E5EEFB;
  border-style: none;
  border-width: thin;
  border-radius: 5px;
  border-color: lightgrey;
}

button, input[type=button], input[type=submit], input[type=reset] {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-right: 10px;
  width: auto; 
  padding: 9px 15px; 
  background: #0C4171; 
  border: 0; 
  font-size: 14px; 
  color: #FFFFFF; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}

input[type=submit]:disabled {
  background: #cccccc;
  color: #666666;
}

input[type=button].small, input[type=submit].small, input[type=reset].small {
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 4px 10px; 
  font-size: 12px; 
}

.smallButton {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 4px 7px; 
}

/* CHECKBOXES */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.form-control + .form-control {
  margin-top: 1em;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type=checkbox][disabled]{
  outline:1px solid red; // or whatever
}

/* labels after checkbox */
label {
  display:flex;
  align-items: baseline;
}

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


/**********************/
/* TOP RIGHT MENU *****/
/**********************/
.topRight {
  overflow: hidden;
  white-space: nowrap;
  background-color: #19222A;
  position: fixed;
  top: 0;
  right: 0;
  height: 20px;
  padding: 10px 5px 18px 5px;
  width: 150px;
  z-index: 2;
}
.form-switch {
  /*padding: 9.5px 14px;*/
  color: #f2f2f2;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}
.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}
.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #4BD763; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }