/* CSS for send_mail SMTP form */
:root{
--background-form-cf: #e6e6e69c;
--background-head-cf: #257ec7;
--font-color-head-cf:white;
--input-field-background:#ffffff;
--input-field-border:none;
--input-field-outline:none;
--input-field-outline-focus:2px solid #00000033;
--button-background-color:#257ec7;
--button-font-color:#ffffff;
--button-background-color-hover:#3f86c0;
--button-font-color-hover:#ffffff;
--invalid-outline-mark:2px solid rgba(255, 0, 0, 0.568);
}
#form_send_mail{
  background-color: var(--background-form-cf);
  border-radius: 5px;
  padding-bottom: 10px;
  font-family: "Open Sans", sans-serif;
  -webkit-box-shadow: 7px 7px 23px -10px rgba(0,0,0,0.68);
  -moz-box-shadow: 7px 7px 23px -10px rgba(0,0,0,0.68);
  box-shadow: 7px 7px 23px -10px rgba(0,0,0,0.68);
}
#div_head_contact_form{
  background-color: var(--background-head-cf);
  border-radius: 5px 5px 0 0;
  margin-bottom: 10px;
}
#head_contact_form{
  font-weight: bold;
  color: var(--font-color-head-cf);
  text-transform: uppercase;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
}
input, textarea{
  width: 100%;
  background-color: var(--input-field-background);
  border: var(--input-field-border);
  outline: var(--input-field-outline);
  padding: 5px;
  border-radius: 3px;
  margin-bottom: 5px;
}
input:focus{
  outline: var(--input-field-outline-focus);
}
textarea:focus{
  outline: var(--input-field-outline-focus);
}
#submitSector{
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  text-align: center;
}
#submit_email{
  margin: auto;
  padding: 10px 15px;
  background-color: var(--button-background-color);
  color: var(--button-font-color);
  outline: none;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 13px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 13px -8px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 13px -8px rgba(0,0,0,0.75);
}
#submit_email:hover{
  background-color: var(--button-background-color-hover);
  -webkit-box-shadow: 5px 5px 9px -11px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 9px -11px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 10px -9px rgba(0,0,0,0.75);
}
@media screen and (max-width: 576px) {
  input, textarea{
    width: 94%;
  }
}
.invalid-input{
  outline: var(--invalid-outline-mark);
}
/* # Spinner */
.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
  margin: auto;
}
.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}
.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: var(--button-background-color);
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}
@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}
@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}
/* # End Spinner */