@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

body {
  font-family: "Lato", sans-serif;
  background-color: gainsboro;
  /*background-color: #ECEAE4;*/
}

.navbar { background-color: gainsboro; }
.navbar .navbar-brand { margin:6px 2em 6px 0!important; }
ul.navbar-nav li a.nav-link { background:#244ca4; color:#FFF; border-radius:8px; padding:8px 1em; margin-top:-6px; }
ul.navbar-nav li a.nav-link:hover { background:#747474; }
ul.navbar-nav ul.navbar-right { float:right!important; }
.navbar-toggler { color:#244ca4; }
ul.dropdown-menu li.active a, ul.dropdown-menu li.active a:hover { background:#ECEAE4!important; color:#244ca4; }

h2.titulo { font-size:20px; font-weight:bold; text-transform:uppercase; color:#244ca4; }
h2 { width:100%; text-align:center; border-bottom:4px solid #244ca4; line-height:0.005em; margin:12px 0 24px; } 
h2 span { background:gainsboro; padding:0 1em; }

fieldset h4 {
	font-size:15px;
	text-transform:uppercase;
	background:#244ca4;
	color:#ECEAE4;
	border-bottom:solid 1px rgba(0,0,0,.05);
	padding:8px 1em;
	/*text-align:center;*/
}
fieldset .info {
	padding:1px 1em;
}
fieldset .footer {
	text-align:center;
	padding:1em 2em 3em;
}
div.progress-bar {
  transition: width 0.3s ease;
}
div.progress-icon {
  transition: all 0.25s ease;
  user-select: none;
}
@keyframes bounce {
  0% { transform: scale(1); }
  45% { transform: scale(0.8); }
  55% { transform: scale(0.8); }
  100% { transform: scale(1); }
}
div.progress-icon.active {
	transition: all 0.25s ease;
	/*background-color: var(--info) !important;*/
	background-color:#244ca4!important;
	color: white !important;
}
div.progress-icon.active:hover {
	/*background-color: var(--info) !important;*/
	background-color:#244ca4!important;
}
div.progress-icon:hover {
  transition: all 0.25s ease;
  background-color: var(--secondary) !important;
  color: white !important;
}
.multi-step-form {
  border-radius:6px;
  margin:5px auto 32px;
  max-width:900px;
}
fieldset button { text-align:center; }
.form-container {
  border-radius:6px;
  margin: auto;
  background-color: #FAFAFA;
  overflow:hidden;
}
.form-control {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #CDCDCD;
  border-radius: 0px;
}
.form-control:focus {
  border-bottom:solid 1px var(--secondary);
  background-color: transparent !important;
  box-shadow: none !important;
}
.floating-label-container {
  margin-top: 20px;
}
.floating-label {
  pointer-events: none;
  position: absolute;
  transform: translateX(-0%);
  margin-top: 8px;
  z-index: 1;
  color: gray;
  transition: all 0.15s ease-out;
}
.floating-label.active {
  margin-top: 0px;
  font-size: smaller;
  transform: translate(0%, -60%);
}
input {
  text-align:left;
}
.multi-step-form .progress {
  overflow: visible;
  background-color: rgba(0,0,0,.1);
}
.multi-step-form .progress.seen {
  transition: all 0ms ease 300ms;
  background-color: var(--secondary)!important;
}
.multi-step-form .progress .progress-bar {
  overflow: visible;
  background-color:#244ca4!important;
}
.multi-step-form .form-container {
  transform: scale(1);
}

input[type="file"] {
 border:1px solid #CDCDCD;
 display:inline-block;
 padding:3px;
 cursor:pointer;
 margin:2px 0;
  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}
[data-href] { cursor:pointer; }

.botones-inicio { display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:2em; }
@media screen and (max-width:600px) { .botones-inicio {  grid-template-columns:1fr 1fr; grid-gap:1em; } } 
.botones-inicio a .fondo { padding:1em; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.25); -webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.25); }
.botones-inicio a.importante .fondo { background:#FFF; }
.botones-inicio a.normal .fondo { background:#EEE; }
.botones-inicio a { color:#244ca4; }
.botones-inicio a b { text-transform:uppercase; color:#f60; }
.botones-inicio a i { display:block; margin-top:10px; }
.botones-inicio a:hover { color:#FFF; text-decoration:none; }
.botones-inicio a:hover b { color:#FFF; }
.botones-inicio a:hover .fondo img { filter:brightness(0) invert(1); }
.botones-inicio a:hover .fondo { background:#244ca4; }

.sin-control {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #CDCDCD;
  border-radius: 0px;
  width:100%;
  padding:5px 1em;
  outline: none;
}
.sin-control:focus {
  border-bottom:solid 1px var(--secondary);
  background-color: transparent!important;
  box-shadow: none!important;
  outline: none;
}
.sin-control:active {
  border-bottom:solid 1px var(--secondary);
  background-color: transparent!important;
  box-shadow: none!important;
  outline: none;
}

.btn .material-icons {
  vertical-align: middle;
  line-height: 0 !important;
  position: relative;
  top: -1px;
  padding:0 2px;
}

.form-floating > label {
	padding: 30px 30px;
	transition: opacity 0.1s ease-in, transform 4s ease-in;
}
.form-floating > .form-select {
	padding-top: 4rem;
	padding-bottom: 4rem;
}
.form-floating > .form-select {
	height: 100px;
	line-height: 1.25;
}
.form-floating > .form-control-plaintext {
	padding: 30px 30px;
}
.form-floating > .form-select ~ label {
	opacity: 0.9;
	transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.info, .info ul li, .info ol li { text-align:justify; }
.info h4 { font-size:18px; margin-top:1em; font-weight:900; color:#244ca4; }
.info a, #exampleModalLongTitle { color:#244ca4; }
.info a:hover { color:#000; text-decoration:none; }
.info table { font-size:0.8em; }

.accordion .card-header { font-weight:bold; }