/* ===== Main Styles ==================================================
   Author: Michele Brocco
   ========================================================================== */

/* ==========================================================================
   Base Styles
   ========================================================================== */
html {
	font-size: 14px;
}

body {
    font: 100%/1.4 "Noto Sans", "Noto Sans SC", sans-serif;
    font-weight: 400;
    color: #444;
    background: #ffffff;
}

.wrapper {
    max-width: 1080px;
    width: 92%;
    margin: 0px auto;
    position: relative;
}

input,
button,
select,
a.button {
  outline: 0;
}

/* Normalize to appear as in other browsers */
::-moz-placeholder {
	opacity:1
}

a, .link{
  color: var(--primary-color-main);
  text-decoration: none;
  -webkit-transition: color 0.15s ease-in;
  -o-transition: color 0.15s ease-in;
  -moz-transition: color 0.15s ease-in;
  transition: color 0.15s ease-in;
  cursor: pointer;
}

a:hover,
a:focus {
  color: var(--p-button-link-hover-color);
}

ul {
  padding-left: 0;
  list-style-type: none;
}

ul.bulletlist {
	list-style-type: disc;
}

ul.bulletlist ul{
	padding-left: 2em;
}

ul.bulletlist ul li{
	list-style-type: circle;
	margin-left: 2em;
}

footer a {
  color: #444;
  text-decoration: none;
}

header {
	top: 0px;
}

/* TYPO */

p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Effects */

.pulsate {
    animation: pulse 0.35s 6;
    animation-direction: alternate;
    opacity: 1;
}

@keyframes pulse {
  0% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}


.loader-legacy {
	width: 48px;
	height: 48px;
	margin: auto;
	position: relative;
}

.loader-legacy:before {
	content: '';
	width: 48px;
	height: 5px;
	background: #000;
	opacity: 0.25;
	position: absolute;
	top: 60px;
	left: 0;
	border-radius: 50%;
	animation: shadow 0.5s linear infinite;
}

.loader-legacy:after {
	content: '';
	width: 100%;
	height: 100%;
	background: var(--primary-color-main);
	animation: bxSpin 0.5s linear infinite;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 4px;
}

@keyframes bxSpin {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}

@keyframes shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}

/* ==========================================================================
   Main colors
   ========================================================================== */
:root {
  --primary-color-main: #6366F1;
  --primary-color-outlined: #bcbdf9;
  --primary-color-alternate: #0363AA;
  --secondary-color-main: #009EDC;
  --panels-background-color: #EFF6FF
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-1halfvw {
  font-size: 1.5vw;
}


/* ==========================================================================
   Main styles
   ========================================================================== */

/*This is a convenience replacement for primevue4 that does not have p-error anymore */
.p-error {
	color:#d44b4b;
}

/*These are convenience styles to mimic primevue4-styles for static thymeleaf pages*/
.p-button-outlined {
  background: transparent;
  color: var(--primary-color-main);
  background-color: white;
}
.p-button {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--primary-color-outlined);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  font-feature-settings: inherit;
  border-radius: 6px;
  outline-color: transparent;
}

.max-w-400 {
	max-width: 400px;
}

.max-w-500 {
	max-width: 500px;
}

nav li, nav ul {
  float: right;
}

nav > ul {
  display: flex;
  align-items: center;
}

nav button {
	border-radius: 8px;
	padding: 8px 20px;
	background-color: white;

}

li a, .dropbtn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  color: var( --primary-color-main);
}

li.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 0px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

#clientLogo {
	max-height: 39px;
	max-width: 110px;
}

.checkmark {
	background-color: #10b981;
	color: white;
	border-radius: 10px;
	padding: 2px;
}

/* ==========================================================================
	Primeflex overrides
   =========================================================================== */

.field small {
  color: #98A2B3;
}

.field {
  margin-bottom: 1.5rem;
}

.col-12.field {
	padding: 0px;
}


/* ==========================================================================
   Grid & Media Queries
   ========================================================================== */

.grid-quarter {
  width: 100%;
}

@media only screen and (min-width: 530px) {
  .grid-quarter {
    float: left;
    /*margin: 0 1.515151515152% 0;*/
  }

  .grid-quarter {
    width: 46.969696969697%;
  }

  dt {
    float: left;
    width: 50%;
  }
  dd {
    float: left;
    width: 50%;
  }
}

@media only screen and (min-width: 500px) {

  .wrapper {
      width: 98%;
    }

  .grid-1,
  .grid-2,
  .grid-third,
  .grid-3,
  .grid-4small,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-half,
  .grid-full,
  .grid-unit {
    float: left;
    width: 96.969696969697%;
    /*margin: 0 1.515151515152% 0;*/
  }

  .gallery .grid-unit {
    width: 46.969696969697%;
    /*margin: 0 1.515151515152% 0;*/
  }

  .grid-flow-opposite {
    float: right
  }

  .grid-centered {
    float: none;
    margin: 0 auto;
  }

   h2 {
      display: block;
   }

}

@media only screen and (min-width: 800px) {

}

@media only screen and (min-width: 1024px) {
  .grid-1     { width: 13.636363636364%; }
  .grid-2     { width: 30.30303030303%; }
  .grid-third     { width: 33.30303030303%; }
  .grid-3     { width: 46.969696969697%; }
  .grid-4small { width: 60.636363636364%; }
  .grid-4,
  .grid-half  { width: 63.636363636364%; }
  .grid-5     { width: 80.30303030303%; }
  .grid-6,
  .grid-full  { width: 96.969696969697%; }
  .grid-quarter { width: 21.970%; }


}

@media only screen and (min-width: 1120px) {

  .grid-half    { width: 46.969696969697% }
}

@media only screen and (max-width: 680px) {
    .widget {
	    top: 0px !important;
	    left: 0px !important;
	    bottom: 0px !important;
	    width: 100% !important;
	    height: 87% !important;
    }
}


@-webkit-keyframes fadeinout {
  50% { opacity: 0; }
}

@keyframes fadeinout {
  50% { opacity: 0; }
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'),
       local('OpenSans-Light'),
	   url(/documents/OpenSans-Light-60c866748ff15f5b347fdba64596b1b1.woff2) format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'),
       local('OpenSans-Regular'),
	   url(/documents/OpenSans-Regular-cffb686d7d2f4682df8342bd4d276e09.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}