/*
#  ·················
#  ··_______________
#  ·/·___/·___/·___/
#  /·/__(__··|__··)·
#  \___/____/____/··
#  ·················
*/
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
/* -------------------------------------------  */
html, body{
  margin:0;
  padding: 0;
	font-family: 'Titillium Web', sans-serif;
	color: var(--black-color);
	scroll-behavior: smooth;
	scrollbar-color: grey var(--black-color);

}

.bg-gray{
	background-color: #2B2B2B;
}

.bg-header-blue{
	background-color: #003560;
}

.bg-footer-blue{
	background-color: #214396;
}

.input-color{
	background-color: #c3c3ce;
}

.bg-app-blue{
	background: linear-gradient(#cac8d4 0%,#dedeeb 50%, #fbfcff 100%);
}/* 
	
	azul marino. #214396;
	it 0. background: linear-gradient(rgb(28, 91, 153) 0%, rgb(93, 136, 255) 48%, rgb(37, 164, 243) 100%);
	it 3. background: linear-gradient(rgb(23, 95, 168) 0%, rgb(79, 124, 246) 48%, #9a9aff);
*/

.bg-blue{
	background: #263d7c;
}

.bg-lightgray{
	background-color: #9797a1;
}

.text-shadow{
	text-shadow: 1px 1px 2px black;
}

.text-shadow-sm{
	text-shadow: 1px 1px 1px black;
}

.text-green{
	color: #2594BC;
}

.text-blue{
	color: #003560;

}

.hide-input-cursor{
	caret-color: transparent;
}

.border-green{
	border-color: #2594BC;
}

.focus-border-green:focus{
	border-color: #2594BC;
}

.hover-border-green:hover{
	border-color: #2594BC;
}

.hover-text-green:hover{
	color: #2594BC;
}

.hover-bg-green:hover{
	background-color:#2594BC;

}

.bg-green{
	background-color:#2594BC ;
}

.hover-press-animation:hover{
	transform: translateY(4px);
	transition: all 0.1s ease-out;
}

.press-animation:active{
	transform: translateY(4px);
	transition: all 0.1s ease-out;
}

input[type="number"] {
	-moz-appearance: textfield;
}
.glass{
	background-color: rgba(255, 255, 255, 0.63);
}

.titillium-font{
	font-family: 'Titillium Web', sans-serif;
}

.card-shadow{
	box-shadow: 0 4px 8px 0 rgba(0, 53, 96, 0.2), 0 6px 20px 0 rgba(34, 148, 188, 0.19)
	/*box-shadow: 0 4px 8px 0 rgba(34, 148, 188, 0.2), 0 6px 20px 0 rgba(0, 53, 96, 0.19)*/

	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}




.lds-dual-ring {

  width: 24px;
  height: 24px;
  border-radius: 99%;
  border: 4px solid;
  border-color: #e9e9e9  #e9e9e9 transparent;
  animation: lds-dual-ring 0.7s linear infinite;
	
}

.lds-dual-ring-blue {

  width: 36px;
  height: 36px;
  border-radius: 99%;
  border: 4px solid;
  border-color: #003560  #003560 transparent;
  animation: lds-dual-ring 0.7s linear infinite;
	
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

input:checked ~ .dot {
  transform: translateX(100%);
}