/* The root selector defines variables (custom properties) */
:root
{
  /* Base */
  --ps-blue-color: #003b71;
  --ps-green-color: #00ae42;
  --ps-gray-color: #9ea2a2;
  --ps-teal-color: #26a98d;


  /* Stetamalo */
  --steta-primary-blue-color: #2b87c5;
  --steta-primary-green-color: #00ae4c;
  --steta-primary-red-color: #da2433;
  --steta-primary-gray-color: #9ea2a2;
  --steta-secondary-blue-color: #2289dd;
  --steta-hover-blue-color: #AED3F1;
  --steta-hover-blue-light-color: #e5ecf3;

  --steta-text-dark-color: #434343;
  --steta-text-blue-color: #063f64;

  --steta-bg-white-color: white;
  --steta-bg-gray-color: #f2f2f2;
  --steta-bg-blue-color: #e9f8fe;
  --steta-bg-blue-light-color: #eff3f9;
  --steta-bg-success-color: #d9fce9;


  /* Variants */
  --ps-blue-focus-color: #275EFE;
  --ps-blue-focus-color-2: #2a44a0;
  --ps-blue-dim-color: #2c5585;
  --ps-blue-dark-color: #243d59;
  --ps-blue-light-color: #1f71ae;

  --ps-green-focus-color: LightSeaGreen;
  --ps-green-focus-color-2: #7dd8a2;

  --ps-gray-light-color: #d0d3d4;
  --ps-gray-dark-color: #54585a;
  
  --ps-teal-light-color: #66d3b9;
}


.text--ps-blue{ color: var(--ps-blue-color)!important; }
.text--ps-green{ color: var(--ps-green-color)!important; }
.text--ps-gray{ color: var(--ps-gray-color)!important; }
.text--ps-gray--dark{ color: var(--ps-gray-dark-color)!important; }
.text--ps-blue-focus{ color: var(--ps-blue-focus-color)!important; }

.text--steta-black{ color: var(--steta-text-dark-color)!important; }
.text--steta-blue{ color: var(--steta-text-blue-color)!important; }


.bg--ps-blue{ background-color: var(--ps-blue-color)!important; }
.bg--ps-green{ background-color: var(--ps-green-color)!important; }
.bg--ps-blue--focus{ background-color: var(--ps-blue-focus-color)!important; }
.bg--ps-gray{ background-color: var(--ps-gray-color)!important; }

.bg--ps-blue-gradient{ background: linear-gradient(to right,var(--ps-blue-color),var(--ps-blue-focus-color)); }
.bg--ps-green-gradient{ background: linear-gradient(to right,var(--ps-teal-color),var(--ps-green-color)); }

.bg--steta-white{ background-color: var(--steta-bg-white-color)!important; }
.bg--steta-gray{ background-color: var(--steta-bg-gray-color)!important; }
.bg--steta-blue{ background-color: var(--steta-bg-blue-color)!important; }
.bg--steta-blue-light{ background-color: var(--steta-bg-blue-light-color)!important; }
.bg--steta-gradient{ background: linear-gradient(to right,var(--steta-bg-blue-color),var(--steta-bg-gray-color)); }

.bg--steta-primary-blue{ background-color: var(--steta-primary-blue-color)!important; }
.bg--steta-primary-green{ background-color: var(--steta-primary-green-color)!important; }


.border--ps-blue{ border: 1px solid var(--ps-blue-color)!important; }
.border--ps-green{ border: 1px solid var(--ps-green-color)!important; }
.border--ps-blue--focus{ border: 1px solid var(--ps-blue-focus-color)!important; }
.border--ps-gray{ border: 1px solid var(--ps-gray-color)!important; }

.border--ps-blue--right{ border-right: 1px solid var(--ps-blue-color)!important; }
.border--ps-blue--right--2px{ border-right: 2px solid var(--ps-blue-color)!important; }
.border--ps-green--right{ border-right: 1px solid var(--ps-green-color)!important; }
.border--ps-green--right--2px{ border-right: 2px solid var(--ps-green-color)!important; }


.alert--ps-clear--blue
{
  /*background-color: White!important;*/
	border-color: var(--ps-gray-dark-color)!important;
	border-radius: 10px;
	color: black!important;
}
.alert--ps-clear--blue:hover
{
	color: var(--ps-blue-focus-color)!important;
}


.alert--ps-blue,
.alert--ps-green,
.alert--ps-blue--focus,
.alert--ps-clear
{
	/*text-align: justify!important;*/
	border: 1px solid;
	border-radius: 6px!important;
  padding: 6px;
}
.alert--steta-secondary-blue
{
	/*text-align: justify!important;*/
	border: 1px solid;
	border-radius: 10px!important;
  padding: 10px;
}
.alert--ps-blue,
.alert--ps-green
{
	color: White!important;
}
.alert--ps-blue
{
	background-color: var(--ps-blue-color)!important;
	border-color: var(--ps-blue-color)!important;
}
.alert--ps-green
{
	background-color: var(--ps-green-color)!important;
	border-color: var(--ps-green-color)!important;
}
.alert--ps-blue--focus
{
	color: White!important;
  background-color: var(--ps-blue-focus-color)!important;
	border-color: var(--ps-blue-focus-color)!important;
}
.alert--ps-clear
{
	/*color: var(--ps-blue-color)!important;*/
  background-color: White!important;
	border-color: LightGray!important;
}
.alert--ps-clear:hover
{
  background-color: White!important;
	border-color: Gray!important;
}


.alert--steta-success
{
  color: var(--steta-primary-green-color)!important;
  background-color: var(--steta-bg-success-color)!important;
	border-color: var(--steta-bg-gray-color)!important;
  font-weight: bold!important;
}
.alert--steta-info
{
  color: var(--steta-primary-blue-color)!important;
  background-color: var(--steta-bg-blue-color)!important;
	border-color: var(--steta-bg-gray-color)!important;
  font-weight: bold!important;
}
.alert--steta-white
{
  color: var(--steta-text-blue-color)!important;
  background-color: var(--steta-bg-white-color)!important;
	border-color: var(--steta-bg-white-color)!important;
  font-weight: bold!important;
}
.alert--steta-primary-blue
{
  color: var(--steta-text-dark-color)!important;
  background-color: var(--steta-bg-white-color)!important;
	border-color: var(--steta-bg-white-color)!important;
}
.alert--steta-primary-blue:hover
{
  color: white!important;
  background-color: var(--steta-primary-blue-color)!important;
	border-color: var(--steta-primary-blue-color)!important;
}

.alert--steta-secondary-blue
{
  color: var(--app-secondary-blue-color)!important;
  background-color: var(--steta-bg-white-color)!important;
  border-color: var(--steta-bg-white-color)!important;
}
.alert--steta-secondary-blue:hover
{
  color: white!important;
  background-color: var(--app-secondary-blue-color)!important;
	border-color: var(--steta-secondary-blue-color)!important;
}



.button--ps-blue-focus,
.button--ps-blue,
.button--ps-green,
.button--ps-gray,
.button--steta-primary-blue,
.button--steta-primary-green,
.button--steta-primary-red,
.button--steta-primary-gray,
.button--steta-secondary-blue,
.button--steta-primary-blue--transparent,
.button--steta-primary-green--transparent,
.button--steta-primary-red--transparent,
.button--steta-primary-gray--transparent,
.button--steta-secondary-blue--transparent
{
  cursor: pointer!important;
	/*transition: all 0.7s ease;
	border-radius: 6px!important;
  height: 38px!important;*/
}

.button--ps-blue-focus
{
	color: var(--ps-blue-color)!important;
}
.button--ps-blue,
.button--ps-green,
.button--ps-gray,
.button--steta-primary-blue,
.button--steta-primary-green,
.button--steta-primary-red,
.button--steta-primary-gray,
.button--steta-secondary-blue
{
	color: White!important;
}

.button--steta-primary-blue--transparent
{
  color: var(--steta-primary-blue-color)!important;
  border: 1px solid var(--steta-primary-blue-color)!important;
}
.button--steta-primary-green--transparent
{
  color: var(--steta-primary-green-color)!important;
  border: 1px solid var(--steta-primary-green-color)!important;
}
.button--steta-primary-red--transparent
{
  color: var(--steta-primary-red-color)!important;
  border: 1px solid var(--steta-primary-red-color)!important;
}
.button--steta-primary-gray--transparent
{
  color: var(--steta-primary-gray-color)!important;
  border: 1px solid var(--steta-primary-gray-color)!important;
}
.button--steta-secondary-blue--transparent
{
  color: var(--steta-secondary-blue-color)!important;
  border: 1px solid var(--steta-secondary-blue-color)!important;
}

.button--steta-primary-blue--transparent,
.button--steta-primary-green--transparent,
.button--steta-primary-red--transparent,
.button--steta-primary-gray--transparent,
.button--steta-secondary-blue--transparent
{
  background-color: transparent;
}


.button--ps-gray
{
	background-color: var(--ps-gray-color);
	border: 1px solid var(--ps-gray-color)!important;
}
.button--ps-blue-focus
{
	background-color: GhostWhite;
	border: 1px solid var(--ps-blue-focus-color)!important;
}
.button--ps-blue
{
	background-color: var(--ps-blue-color);
	border: 1px solid var(--ps-blue-color)!important;
}
.button--ps-green
{
	background-color: var(--ps-green-color);
	border: 1px solid var(--ps-green-color)!important;
}
.button--steta-primary-blue
{
  background-color: var(--steta-primary-blue-color);
	border: 1px solid var(--steta-primary-blue-color)!important;
}
.button--steta-primary-green
{
  background-color: var(--steta-primary-green-color);
	border: 1px solid var(--steta-primary-green-color)!important;
}
.button--steta-primary-red
{
  background-color: var(--steta-primary-red-color);
	border: 1px solid var(--steta-primary-red-color)!important;
}
.button--steta-primary-gray
{
  background-color: var(--steta-primary-gray-color);
	border: 1px solid var(--steta-primary-gray-color)!important;
}
.button--steta-secondary-blue
{
  background-color: var(--steta-secondary-blue-color);
	border: 1px solid var(--steta-secondary-blue-color)!important;
}

.button--ps-gray:hover
{
	background-color: SteelBlue;
}
.button--ps-blue-focus:hover
{
	background-color: var(--ps-blue-focus-color);
	color: White!important;
}
.button--ps-blue:hover
{
	background-color: var(--ps-blue-focus-color)!important;
	border-color: var(--ps-blue-focus-color)!important;
}
.button--ps-green:hover
{
	background-color: var(--ps-green-focus-color)!important;
	border-color: var(--ps-green-focus-color)!important;
}

.button--steta-primary-blue:hover,
.button--steta-primary-green:hover,
.button--steta-primary-red:hover,
.button--steta-primary-gray:hover,
.button--steta-secondary-blue:hover,
.button--steta-primary-blue--transparent:hover,
.button--steta-primary-green--transparent:hover,
.button--steta-primary-red--transparent:hover,
.button--steta-primary-gray--transparent:hover,
.button--steta-secondary-blue--transparent:hover
{
  color: var(--steta-text-dark-color)!important;
  background-color: var(--steta-hover-blue-color)!important;
  border: 1px solid var(--steta-hover-blue-color)!important;
}


.photo--thumbnail--rounded--ps-blue
{
  width: 54px!important;
  height: 54px!important;
  max-height: auto;
	border-radius: 50%;
  border: 6px solid var(--ps-blue-color);
  background-color: White;
  margin: 0 24px;
}
.photo--thumbnail--rounded--ps-green
{
  width: 54px!important;
  height: 54px!important;
  max-height: auto;
	border-radius: 50%;
  border: 6px solid var(--ps-blue-color);
  background-color: var(--ps-green-color);
  margin: 0 24px;
}

.image--icon--grid
{
	max-width: 80px!important;
	max-height: auto!important;
}

.image--ps--logo--xs
{
	max-width: 140px!important;
	max-height: auto!important;
}