/* The root selector defines variables (custom properties) */
:root
{
  --primary-color: #003b71;
  --secondary-color: #9ea2a2;
  --tertiary-color: white;
  --focus-color: #00ae42;
  --other-focus-color: rgb(60, 158, 255);
  --maxfocus-color: RoyalBlue;
  --gradient-color: rgb(0, 15, 60);
  --text-color: blaCK;

  --esencial-color: #2ed9c3;
  --avanzado-color: #e65300;

  /* PS */
  --ps-blue-color: #003b71;
  --ps-green-color: #009d44;
  --ps-gray-color: #9ea2a2;
  --ps-teal-color: #26a98d;

  /* Stetamalo */
  --steta-primary-blue-color: #2b87c5;
  --steta-primary-green-color: #009d44;
  --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;
}

body
{
  /*background: linear-gradient(to right,var(--primary-color),var(--gradient-color));*/
  background-color: var(--tertiary-color);
  min-height: 100vh; /* Hole viewport */
  /*min-height: 100%;*/
}

html,
body,
header,
nav,
article,
section,
aside,
div,
table,
form,
input,
button,
textarea,
select,
a,
p
{
	font-family: 'EncodeSans-Regular';
	font-size: 1rem!important; /* Base font size depends on web browser. Usually, 16px */
	font-weight: normal!important;
  color: var(--text-color);
}

a:hover,
a:active,
a:visited,
a:focus,
a:link
{
	text-decoration: none;
	color: inherit;
}

h1, h2, h3, h4, h5, h6
{
  font-family: 'EncodeSans_Condensed-Bold', sans-serif;
}
h1
{
  /* text-shadow: h-shadow v-shadow blur-radius color; */
	text-shadow: 3px 3px 4px lightcyan;
}

small
{
  font-size: 0.7rem!important;
}


/* Colors */
.text--primary{ color: var(--primary-color)!important; }
.text--secondary{ color: var(--secondary-color)!important; }
.text--focus{ color: var(--focus-color)!important; }
.text--esencial{ color: var(--esencial-color)!important; }
.text--avanzado{ color: var(--avanzado-color)!important; }

.border--primary{ border-color: var(--primary-color)!important; }
.border--secondary{ border-color: var(--secondary-color)!important; }
.border--focus{ border-color: var(--focus-color)!important; }
.border--esencial{ border-color: var(--esencial-color)!important; }
.border--avanzado{ border-color: var(--avanzado-color)!important; }

.bg--primary{ background-color: var(--primary-color)!important; }
.bg--secondary{ background-color: var(--secondary-color)!important; }
.bg--focus{ background-color: var(--focus-color)!important; }
.bg--esencial{ background-color: var(--esencial-color)!important; }
.bg--avanzado{ background-color: var(--avanzado-color)!important; }


/* Buttons */
.button
{
  position: relative;
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  /*background-color: transparent;*/
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
}
.button--lg
{
  position: relative;
  /*width: 100%;*/
  padding: 16px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  /*background-color: transparent;*/
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
}
.button--sm
{
  position: relative;
  width: 100%;
  padding: 4px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  /*background-color: transparent;*/
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
  font-size: 0.94rem!important;
}
.button--xs
{
  position: relative;
  width: 100%;
  padding: 2px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  /*background-color: transparent;*/
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
  font-size: 0.92rem!important;
}

.button--primary
{
  color: var(--tertiary-color)!important;
  border-color: var(--primary-color)!important;
  background-color: var(--primary-color)!important;
}
.button--secondary
{
  color: white!important;
  border-color: var(--secondary-color)!important;
  background-color: mediumslateblue!important;
}
.button--alt--focus
{
  color: white!important;
  border-color: var(--secondary-color)!important;
  background-color: mediumslateblue!important;
}
.button--focus
{
  color: white!important;
  border-color: var(--focus-color)!important;
  background-color: var(--focus-color)!important;
}
.button--maxfocus
{
  color: white!important;
  border-color: var(--maxfocus-color)!important;
  background-color: var(--maxfocus-color)!important;
}
.button--whatsapp
{
  color: white!important;
  border-color: mediumseagreen!important;
  background-color: mediumseagreen!important;
}
.button--esencial
{
  color: var(--tertiary-color)!important;
  border-color: var(--esencial-color)!important;
  background-color: var(--esencial-color)!important;
}
.button--avanzado
{
  color: var(--tertiary-color)!important;
  border-color: var(--avanzado-color)!important;
  background-color: var(--avanzado-color)!important;
}

.button--primary:hover, .button--secondary:hover, .button--maxfocus:hover, .button--whatsapp:hover, .button--avanzado:hover
{
  filter: brightness(125%);
}
.button--focus:hover, .button--esencial:hover
{
  filter: brightness(108%);
}


.button--primary--transparent
{
  color: var(--primary-color)!important;
  border-color: var(--primary-color)!important;
  background-color: transparent;
}
.button--primary--transparent:hover
{
  color: var(--tertiary-color)!important;
  border-color: var(--primary-color)!important;
  background-color: var(--primary-color)!important;
}

.button--focus--transparent
{
  color: var(--focus-color)!important;
  border-color: var(--focus-color)!important;
  background-color: transparent;
}
.button--focus--transparent:hover
{
  color: white!important;
  border-color: var(--focus-color)!important;
  background-color: var(--focus-color)!important;
}

.button--secondary--transparent
{
  color: var(--secondary-color)!important;
  border-color: var(--secondary-color)!important;
  background-color: transparent;
}
.button--secondary--transparent:hover
{
  color: var(--tertiary-color)!important;
  border-color: var(--secondary-color)!important;
  background-color: var(--secondary-color)!important;
}


/* Forms */
.input--container
{
  position: relative;
  margin-top: 16px;
}

.label
{
  position: absolute;
  left: 10px;
  top: -10px;
  padding: 0 2px;
  z-index: 1;
  font-size: 13px;
  color: dimgray;
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
}

.label::before
{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 100%;
  z-index: -1;
}

.form--control
{
  background-color: white!important;
  padding: 8px!important;
  width: 100%!important;
  height: 100%!important;
  color: black!important;
  border: 1px solid lightgray!important;
  border-radius: 4px!important;
  outline: none!important;
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
}

.form--control:focus
{
  border-bottom: 3px solid var(--primary-color);
}

.form--control::placeholder
{
  /*font-size: 16px;*/
  opacity: 0;
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
}

.form--control:focus+.label
{
  top: -18px;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: bold;
}

.form--control:focus::placeholder
{
  opacity: 1;
  animation-delay: 0.3s;
  color: gray;
}


.div--col--icon--circle
{
  display: flex;
  justify-content: center;
  align-items: center;
}
.div--icon--circle
{
  display: inline-block;
  margin: 0 8px;
}
.span--icon--circle
{
  padding: 3px 12px;
  background-color: var(--focus-color);
  color: var(--primary-color);
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
  font-family: 'EncodeSans-Bold', sans-serif;
  font-size: 30px;
  cursor: pointer;
}
.small--icon--circle
{
  font-weight: bold;
}


.div--card--amounts
{
  border-radius: 1em;
  border: 0.2em solid;
  /*border-color: lightgray;*/
  background-color: var(--tertiary-color);
  padding: 1em 0.8em;
  margin-bottom: 2em;
  margin-top: 1em;
  -webkit-transition: all 0.3s ease!important;
  -moz-transition: all 0.3s ease!important;
  -o-transition: all 0.3s ease!important;
  transition: all 0.3s ease!important;
}
.div--card--amounts:hover
{
  background-color: white;
}


.photo--thumbnail
{
  max-width: 200px!important;
  height: auto!important;
  border: 2px solid var(--secondary-color);
  border-radius: 10px;
}
.photo--thumbnail--rounded
{
  max-width: 200px!important;
  height: auto!important;
	border-radius: 50%;
  border: 2px solid White;
  background-color: White;
  /*margin: 0 24px;*/
}

/* Datepicker */
.input-group{ display:block!important; }
.datepicker{ padding: 0!important; }



/* Specific styles for identifiers */
#imageLogo
{
  display: block;
  max-width: 90px;
  height: auto;
}

#imageJolguLogo
{
  width: auto;
  max-height: 75px;
  /*border: 1vh solid var(--steta-bg-gray-color)!important;*/
}

#imagePsLogo
{
  width: auto;
  max-height: 40px;
}

#divDocumentContainer
{
  min-height: 100vh; /* Hole viewport */
  background: linear-gradient(to right,var(--ps-gray-color),var(--steta-bg-gray-color));
  /*background-color: white;*/
  /*display: flex;
  justify-content: center;*/
}

#divMainContent
{
  min-height: 100vh; /* Hole viewport */
  background-color: whitesmoke;
}

#divContent
{
  color: var(--text-color);
  margin: 1vh auto 0 auto; /* top right bottom left */
  padding: 5vh;
}


/*#divQuestionnaire
{

}*/


/* Responsive media queries */

/* Smartphones */
@media only screen and (min-width: 300px)
{

}

/* Tablets */
@media only screen and (min-width: 768px)
{
  #divButtonToRightColumn{ display: none; }
}

/* Desktops */
@media only screen and (min-width: 1024px)
{
  
}