* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    
}
.login {
    width: 400px;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 100px auto;
}
.login h1 {
    text-align: center;
    color: #5b6574;
    font-size: 24px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dee0e4;
}
.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}
.login form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: darkblue;
    color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
    width: 310px;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}
.login form input[type="submit"] {
    width: 100%;
    padding: 15px;
   margin-top: 20px;
    background-color: darkblue;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
  background-color: darkblue;
    transition: background-color 0.2s;
}

.navtop {
	background-color: #000000;
    background-image: url('../images/logo_kkaf_fondo_negro_91x105.png');
    background-repeat: no-repeat;
    height: 105px;
	width: 100%;
	border: 0;
}
.navtop div {
	display: flex;
	margin: 0 auto;
	width: 1000px;
	height: 100%;
}
.navtop div h1, .navtop div a {
	display: inline-flex;
	align-items: right;
}
.navtop div h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: #eaebed;
	font-weight: normal;
}
.navtop div a {
	padding: 0 20px;
	text-decoration: none;
	color: #c1c4c8;
	font-weight: bold;
}
.navtop div a i {
	padding: 2px 8px 0 0;
}
.navtop div a:hover {
	color: #eaebed;
}
body.loggedin {
	background-color: #f3f4f7;
}
.content {
	width: 1000px;
	margin: 0 auto;
}
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}
.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 0px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}


table.default {
    padding: .2em .8em;
    border: 1px solid rgba(20, 50, 90, .25);
    background: #ffffff;
    text-align: center
}

table.default th {
    padding: .2em .8em;
    border: 1px solid rgba(20,50,90,.25);
    background: rgba(0,102,255,.25);
    text-align: center
}

table.default td {
    padding: .2em .8em;
    border: 1px solid rgba(16,76,167,.25);
    background: rgba(90,156,255,.25);
    text-align: left
}



.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: #40e0d0;
}
.option-input:checked::before {
  width: 40px;
  height: 40px;
  display:flex;
  content: '\f00c';
  font-size: 25px;
  font-weight:bold;
  position: absolute;
  align-items:center;
  justify-content:center;
  font-family:'Font Awesome 5 Free';
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
  padding: 0;
}
.option-input.radio::after {
  border-radius: 50%;
}



html {
	height: 100%;
	/*Image only BG fallback*/
	
	/*background = gradient + image pattern combo*/
	background: 
		linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
	background-attachment: fixed;
}

.button {
  background-color: #d6e6ff;
  border: none;
  color: #0c4c96;
  padding: 7px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  transition: all 0.3s;
}

.nomenclatura {
	flex: 1;
	font-size: 17px;
	padding: 0;
	margin: 0;
	color: #000000;
	font-weight: normal;
}

.nomenclatura strong {
	flex: 1;
	font-size: 17px;
	padding: 0;
	margin: 0;
	color: #ff0027;
	font-weight: bold;
}

.mensaje {
	flex: 1;
	font-size: 17px;
	padding: 0;
	margin: 0;
	color: #000000;
	background-color:yellow;
	font-weight: normal;
}

/* Para pre-altas */
.form {
  width: 340px;
  height: 1070px;
  background: #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 0 40px -10px #000;
  padding: 20px 30px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  position: relative;
}
input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: none;
  outline: none;
  resize: none;
  border: 0;
  font-family: "Montserrat", sans-serif;
  transition: all 0.3s;
  border-bottom: 2px solid #bebed2;
}
input:focus {
  border-bottom: 2px solid #78788c;
}
p:before {
  content: attr(type);
  display: block;
  margin: 28px 0 0;
  font-size: 14px;
  color: #5a5a5a;
}
button:hover {
  background: #78788c;
  color: #fff;
}
span {
  margin: 0 5px 0 15px;
}
.alerta {
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

.error {
    background-color: rgb(255, 0, 93);
}

.footer {
  height: 4rem;
    bottom: 0;
    width: 100%;
    height: 20px;
    font-size: min(14px, max(5vw, 13px));
}


/* Para menu de hamburguesa */

.respmenu a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 10px 20px;
  border-bottom: 2px solid #456789;
  max-width: 400px;
  background: #000000;
  font-variant: small-caps;
  text-shadow: 1px 1px black;
}

.respmenu input[type="checkbox"], .respmenu .fa-bars, .respmenu .fa-times {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
}

.respmenu .fa-bars, .respmenu .fa-times {
  font-size: 38px;
  pointer-events: none;
}

.respmenu input[type="checkbox"] {
  opacity: 0;
}

.respmenu {
  color: white;
  position: relative;
  background: #000000;
  min-height: 48px;
}

.respmenu nav {
  display: none;
}

.respmenu input:checked ~ nav {
  display: block;
}

.respmenu input:checked ~ .fa-bars {
  display: none;
}

.respmenu input:not(:checked) ~ .fa-times {
  display: none;
}

/* eliminar bullet */
ul {
    list-style: none;
}