:root {
   --main-bg: #0f1721;
	--bgoscuro: #003376;

	--cardshadow: 0 2px 4px 2px black;
	--cardouter: #003376;
	--shadowoscuro: 0px 0px 4px #000000;
	--azul1: #F8F8FF;
	--innercardshadow: 0px 2px 4px 1px black;

	--text-azul: #aaaaFF;

	--tabletitle: #005ad2;
   --tabletitle2: #003376;
   --tabletitlecolor: #F8F8FF;

	--bglight: #e8e8FF;


	/* NUEVO TEMA */

	--clarito: #FFFFeb;

	}

@font-face {
    font-family: 'SistemaFont';
    src: url('fonts/monserrat.ttf') format('truetype');
}


@keyframes vinculos {
  25%  {opacity: 0.9}
  50%   {opacity: 1}
}

.mostrarmodal {
	/* animation-name: vinculos; */
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	}

@font-face { font-family: "font1"; src: url('fonts/OpenSans-Light.ttf') format('truetype') }
@font-face { font-family: "font2"; src: url('fonts/OpenSans-Regular.ttf') format('truetype') }
@font-face { font-family: "font3"; src: url('fonts/OpenSans-Medium.ttf') format('truetype') }
@font-face { font-family: "font4"; src: url('fonts/OpenSans-SemiBold.ttf') format('truetype') }
@font-face { font-family: "font5"; src: url('fonts/OpenSans-Bold.ttf') format('truetype') }
@font-face { font-family: "font6"; src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype') }

.text-azul {color: var(--text-azul); }

.font1 { font-family: "font1"; }
.font2 { font-family: "font2"; }
.font3 { font-family: "font3"; }
.font4 { font-family: "font4"; }
.font5 { font-family: "font5"; }
.font6 { font-family: "font6"; }


html { margin:0; padding:0; height: 100%; overscroll-behavior: none !important;}
body { margin:0; padding:0; height: 100%; background: var(--main-bg); font-size: calc(0.5em + 1vmin); font-family: "font1", sans-serif; overscroll-behavior: none !important;}

@media only screen and (max-width: 600px) {
   body { font-size: calc(0.6em + 1vmin); }
	.buttonsalir {margin: 10px }
}

/*

.cardmain { border: 0px; box-shadow: var(--cardshadow); margin-top: 0px }
.margincardbody { padding: 5px; background-color: var(--cardouter);  }
.cardtitulo { text-shadow: var(--shadowoscuro); text-align: center; color: var(--azul1); font-weight: bold}
.innercardbody { padding: 0px; border: solid 0px #aaaaaa; border-top: 0; box-shadow: var(--innercardshadow); background-color: var(--azul1); border-radius: 5px }
*/

.bgoscuro { background: #262c31; }

.hidden { display: none; }
.bold { font-weight: bold; }

.puntero, .mostrarmodal { cursor: pointer;  }
.puntero:hover, .mostrarmodal:hover { background-color: #d0d0ff}

.tabletitle { background-color: var(--tabletitle); color: var(--tabletitlecolor); font-weight: bolder; border-radius: 5px 5px 0px 0px }
.tabletitle2 { background-color: var(--tabletitle); color: var(--tabletitlecolor); font-weight: bolder; border-radius: 0px 0px 5px 5px }
.bg-light2 { background-color: #ffffff); border-top: 1px solid #AAA }
.bg-light3 { background-color: var(--bglight); border-top: 1px solid #AAA }

.btn-verde, .btn-card  { background-color: var(--bgoscuro); color: white }
.btn-verde:hover  { background-color: var(--tabletitle); color: white }
.btn-verde:focus  { background-color: var(--tabletitle); color: white }
.btn-verde:active  { background-color: var(--tabletitle); color: white }
.btn-verde:disabled { background-color: #888888; color: white; border: solid 1px #000000; }


.hperfiltitulo {
	color: #336633;
	border-bottom: solid 1px #006600;
	}

.btn-hperfil {
	--bs-btn-bg: #080910;
	--bs-btn-border-color: #303030;
	--bs-btn-hover-bg: #001900;
	--bs-btn-hover-border-color: #477b29;
	--bs-btn-active-bg: #001100;
	--bs-btn-active-border-color: #003300;
	
  }


.form-label { margin:0; padding:0; font-size: 0.7em }
.form-check-label { margin:0; padding:0; font-size: 0.8em }

.perfil-inner { border: solid 0px #aaaaaa; border-top: 0; box-shadow: 0px 0px 5px #aaaaaa inset; border-radius: 5px }

.border-perfil-access { border: solid 0px #333333; border-radius: 5px; box-shadow: 0px 0px 0px #888888 }
.border-perfil-access:hover { border: solid 0px #333333; border-radius: 5px; box-shadow: 0px 0px 0px #888888; background-color: rgba(255,255,255,0.1); cursor: pointer; }

.text-justify {
   text-align: justify;
	text-justify: inter-word;
	}

/*
.about a  {
	text-decoration: underline;
	font-family: "font3";
	color: #008800;
	}

.about .titulo  {
   font-family: "font5";
   color: #008800;
	border-bottom: solid 1px #008800;
	margin-bottom: 1em
   }

b {
	text-decoration: underline;
	font-family: "font4";
	}
*/
.menu-rc {
  background: #fff;
  /*width: 60px;*/
  padding: 7px;
  box-shadow: 0 0 10px -3px rgba(0, 0, 0, .3);
  border: 1px solid #ccc;
  display: none;
  position: absolute;//this is important
}

.menu-rc .opcion-rc {
	cursor: pointer;
	padding:1px
	}

.menu-rc .opcion-rc:hover {
	background: #880000;
	color: #ffffff;
	}

/*
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus,
input:autofill, input:autofill:hover, input:autofill:active, input:autofill:focus {
   background-color: rgba(255,255,155,.01) !important;
   color: #aaaaaa !important;
   -webkit-box-shadow: 0 0 0 1000px #333333 inset !important;
   background-clip: content-box !important;
   -webkit-text-fill-color: #cccccc !important;
   border: 1px solid #555555;
	font-weight: bolder !important;
   }
*/

.form-select, .form-select-sm, .form-control, .form-control-sm, .form-check-input {
	background-color: #181e24;
	color: #dddddd;
	border: 1px solid #555555;
	box-shadow: none;
	}

.input-group-text {
	background-color: #2d3439;
	border: 1px solid #555555;
	color: #dddddd;
	}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill,
.form-select:focus, .form-select-sm:focus, .form-select:active, .form-select-sm:active, .form-control:focus, .form-control:active {
	-webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px #181e24 inset !important;
	background-color: #181e24;
	color: white;
	font-weight: bolder;	
   box-shadow: none;
	border: 1px solid #888888;
   }


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
	padding-left: 5px;
}

input[type=number] {
  -moz-appearance: textfield;
	padding-left: 5px;
	background-color: #181e24;
   color: #dddddd;
   border: 1px solid #555555;
   box-shadow: none;
}

#profileimg, .profileimg { 
	width: 200px;
	height:200px;
	object-fit: cover;
	border: solid 0px #000000;
	box-shadow: 0px 0px 10px 1px rgba(128,128,128,.5);
	border-radius: 50%;
	
	}

.letrap1 {
	font-size: 0.7em
	}

.navperfil.nav.nav-tabs {
	border-bottom: 0px solid black;
	}

.navperfil .nav-link {
	border-color: #666666;
	color: white;
	font-weight: bolder;
	margin-right: 1px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	}

.navperfil .nav-link.active {
   border-color: #ffffff;
	background-color: #111111;
	color: white;
	font-weight: bolder;
   }

.navperfil .nav-link:hover {
   border-color: #ffffff;
	background-color: #333333;
   }