@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('../font/roboto-black.ttf') format('truetype');
}
@font-face {
	font-family: 'Proxima Nova';
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url('../font/montserrat-light.ttf') format('truetype');
}
@font-face {
	font-family: 'Proxima Nova';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('../font/montserrat-regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Proxima Nova';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('../font/montserrat-bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Proxima Nova';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('../font/montserrat-semibold.ttf ') format('truetype');
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/iconos.ttf) format('woff2');
}

html{
  scrollbar-color: var(--edit_caption) var(--bk_gral);
  scrollbar-width: thin;

  /*
    scroll-snap-type: y proximity;
  scrollbar-face-color: #fff;
  scrollbar-shadow-color: #fff;
  scrollbar-highlight-color:blue;
  scrollbar-3dlight-color: red;
  scrollbar-darkshadow-color: #fff;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: #c0c0c0;*/
}
html:has(.dialog[open]){overflow:hidden; filter: brightness(0.5);}
/* body{background-color: var(--body-back); border:1px solid green; border-bottom:2px solid green; } */
* {box-sizing: border-box; font-family: 'Proxima Nova', sans-serif;}
div, input, select, td, button{outline: none;}
input:-webkit-autofill, input:-webkit-autofill:focus {transition: background-color 0s 600000s, color 0s 600000s !important;}
select:-webkit-autofill, select:-webkit-autofill:focus {transition: background-color 0s 600000s, color 0s 600000s !important;}
.dn{display:none!important;}


.button{
  margin-top:1rem; height:3rem;  width:100%;
  display:flex; justify-content:center; align-items:center;
  font-family: 'Roboto'; font-size:1.1rem;
  & button{
    height: 2.5rem;
    width: auto;
    font-size: 0.9rem; 
    /* color:var(--btn_fr); background:var(--btn_bk); */
    border: 0px solid gray;
    border-radius: 30px;
    transition: 0.25s;
    cursor: pointer;
    &:hover{transform: scale(1.05);}
  }  
}
._dt{
  position:relative; display:inline-block;  float:left;
  border: 1px var(--edit-borde) solid;
	font-size: 1rem;
  height:2.5rem;
  margin-bottom:0.3rem;
  background-color:var(--edit-back);
  align-items:center;
  justify-content:center;
}
._dt:hover{border: 1px var(--edit-borde-hover) solid; }
._dt * {box-sizing: border-box; position:absolute;}
._dt *:focus{border-bottom: 1px var(--edit-foco) solid;}
._dt *:focus + label{color:var(--edit-lbl-hover-fore); background-color:var(--edit-lbl-hover-back);}

._dt ._dtcheck{
  width:auto!important; height:1.2rem!important;
  left:1%!important;  top:0.9rem!important;
  color:var(--edit-fore)!important; background-color:var(--edit-back)!important;
}
._dt input[type=date]{
  width:85%!important; padding-left:5px; padding-right:5px;
  height:1.2rem; padding-top:0rem; padding-bottom:0rem; 
	border:0;
	font-size: 0.9rem; letter-spacing: 0.05rem; text-align:center;
  top:1.1rem; left:14%;
  background-color:var(--edit-back);
  color:var(--edit-fore);
}
._dt label{
  padding-left:5px; padding-right:5px; padding-top:0.1rem;
  height:1rem; width:100%;
	font-size: 0.75rem; /* letter-spacing: 0.03rem; */
  text-align:left;
  top:0rem; left:0;
  background-color:var(--edit-lbl-back);
  color:var(--edit-lbl-fore);
}
._load{animation: loading 1s linear infinite alternate;}
@keyframes loading {
  /*
  0% { background: radial-gradient(90.07% 90.07% at 22.04% 7.13%, #62636D 0%, #181A1E 100%);}
  100% {background: radial-gradient(90.07% 90.07% at 22.04% 7.13%, #181A1E 0%, #62636D 100%);}
  */
  0% { background: #62636D;}
  100% {  background: #181A1E;}
}

.uw05{ width: 4.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw06{ width: 5.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw07{ width: 6.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw08{ width: 7.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw09{ width: 8.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw10{ width: 9.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw11{ width: 10.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw12{ width: 11.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw13{ width: 12.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw14{ width: 13.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw15{ width: 14.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw20{ width: 19.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw25{ width: 24.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw30{ width: 29.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw35{ width: 34.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw40{ width: 39.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw45{ width: 44.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw50{ width: 49.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw55{ width: 54.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw60{ width: 59.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw65{ width: 64.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw70{ width: 69.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw75{ width: 74.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw80{ width: 79.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw85{ width: 84.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw90{ width: 89.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw95{ width: 94.5% !important;margin-right:0.5% !important; margin-left:0% !important; }
.uw100{ width: 99.5% !important;margin-right:0.5% !important; margin-left:0% !important; }

.fs20{ font-size:	1.25rem !important;}
.fs19{ font-size:1.1875rem !important;}
.fs18{ font-size:1.125rem !important;}
.fs17{ font-size:1.0625rem !important;}
.fs16{ font-size:1rem !important;}
.fs15{ font-size:0.9375rem !important;}
.fs14{ font-size:0.875rem !important;}
.fs13{ font-size:0.8125rem !important;}
.fs12{ font-size:0.75rem !important;}
.fs11{ font-size:0.6875rem !important;}
.fs10{ font-size:0.625rem !important;}
.fs9{ font-size:0.5625rem !important;}
.fs8{ font-size:0.5rem !important;}

.uh15 {height: 0.93rem !important;}
.uh20 {height: 1.25rem !important;}
.uh25 {height: 1.56rem !important;}
.uh40 {height:2.5rem !important;}	
.uh50 {height:3.125rem !important;}	
.uh60 {height:3.75rem !important;}	
.uh80 {height:5rem !important;}	
.uh100{height:6.25rem !important;}	
.uh120{height:7.5rem !important;}	
.uh140{height:8.75rem !important;}	
.uh160{height:10rem !important;}	
.uh180{height:11.25rem !important;}	
.uh200{height:12.5rem !important;}	
.uh300{height:18.75rem !important;}	







.ib{ display:inline-block; }
.fr{ float:right !important;}
.fl{ float:left; }
.fb{ font-weight:bold;}
.tl{ text-align:left !important;}
.tc{ text-align:center !important;}
.tr{ text-align:right !important;}

.mt05{margin-top:0.5rem !important;}
.mt10{margin-top:1rem !important;}
.mb05{margin-bottom:0.5rem !important;}
.mb10{margin-bottom:1rem !important;}

._swa_{color:gray;}
._swa_::before{content:"toggle_off";}
.sw_act{color:green!important;}
.sw_act::before{content:"toggle_on";}
._pop{
  position:fixed; display:none; width:auto; height:2.5rem; bottom:1rem; left:2%; background-color:#000; color:#fff;
  border:1px solid var(--btn-borde); 
	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
	box-shadow: 0px 0px 1px #C0C0C0;  -webkit-box-shadow: 0px 0px 1px #C0C0C0;  -moz-box-shadow: 0px 0px 1px #C0C0C0; 
  padding:0.5rem 3% 0.2rem 3%; z-index:9999;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.dialog{
  /* background-color:var(--dlg_back); */
  position-area: center; margin:auto;
  background: var(--bk_strong);
  color:var(--fr_strong); padding:8px;
  border:0px; border-radius:8px; min-width:250px;
  transition: scale .5s ease, display .5s ease allow-discrete;
  scale:0;
  &[open]{
    scale:1.5;
    transition: scale .5s ease-in-out;
    @starting-style{scale:0;}  
  }
}
.dialog button{
  background:var(--btn_bk);color:var(--btn_fr);border: 0px solid #fff;border-radius:5px; float:right; cursor:pointer; margin-right:10px;
  font-size:0.7rem; padding:3px 8px 3px;
}
.dialog div{color:var(--fr_strong); min-height:40px;  height:auto; padding:10px 10px 20px; color:#000;}
.modal_hr hr{
  height: 10px; background-color: green; border: 0;
  animation: procesing 1s linear infinite alternate;
}
@keyframes procesing {
  0% { background: green;}
  100% {  background: #181A1E;}
}


.w_05{ width: 5%  !important;}
.w_06{ width: 6%  !important;}
.w_07{ width: 7%  !important;}
.w_08{ width: 8%  !important;}
.w_09{ width: 9%  !important;}
.w_10{ width: 10% !important;}
.w_11{ width: 11% !important;}
.w_12{ width: 12% !important;}
.w_13{ width: 13% !important;}
.w_14{ width: 14% !important;}
.w_15{ width: 15% !important;}
.w_20{ width: 20% !important;}
.w_25{ width: 25% !important;}
.w_30{ width: 30% !important;}
.w_35{ width: 35% !important;}
.w_40{ width: 40% !important;}
.w_45{ width: 45% !important;}
.w_50{ width: 50% !important;}
.w_55{ width: 55% !important;}
.w_60{ width: 60% !important;}
.w_65{ width: 66% !important;}
.w_70{ width: 70% !important;}
.w_75{ width: 76% !important;}
.w_80{ width: 80% !important;}
.w_85{ width: 86% !important;}
.w_90{ width: 90% !important;}
.w_95{ width: 96% !important;}
.w_100{width: 100%!important;}


@media only screen and (min-width : 300px) and (max-width : 580px){

.msgbox{
  box-sizing: border-box; position:absolute; z-index:8010;
  width:98%; height:14rem; padding:0.5rem;
  top:5rem; left:1%;
  
} 
.msgbox label{
  box-sizing: border-box; display:block; float:left; text-align:center;
  width:90%; height:8rem; margin-top:2rem; margin-left:5%;
}
.msgbox input{
  box-sizing: border-box; display:block; float:left; 
  width:39%; height:2.4rem; margin-left:7%;
  cursor:pointer;
  /* border:1px solid gray; */
}
.msgbox #msgbox_aceptar{background-color:#b3e0ff;}
.msgbox #msgbox_cancelar{background-color:#fff;} 

.msgbox input:hover{
  background-color:#0099ff!important; color:#fff; font-weight:bold;
}
}