:root{
	--primary-color: #EC5C20;
	--secondary-color: #1A478B;
	--third-color: #2c323a;
	--fourth-color: #23282E;
	--fifth-color: #1B2026;	
}

@font-face{
	font-family: 'sanfrancisco-regular';
	src:url('sanfrancisco-regular.woff');
}

/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
	padding:0px;
	margin:0px;
}

html,
body{
	font-family: 'sanfrancisco-regular' !important;
	height:100%;
	padding:0px;
	margin:0px;
}

h1 {
	font-family: 'Anton' !important;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
	font-family: 'Anton' !important;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h3 {
	font-family: 'Anton' !important;
  font-size: clamp(1.2rem, 3vw, 2rem);
}

h4 {
	font-family: 'Anton' !important;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

h5 {
	font-family: 'Anton' !important;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
}

h6 {
	font-family: 'Anton' !important;
  font-size: clamp(0.8rem, 1vw, 1rem);
}

.dropdown-menu{
	width:150px;
}

.nav-tabs{
	background: #20292E;
	border: 0px;
}
.nav-tabs .nav-item a,
.nav-tabs .nav-link{
	font-size: 12px;
	color:#FFF !important;
	border:0px !important;
	border-radius: 0px;
}	
.nav-tabs .nav-link:hover,
.nav-tabs .active{
	border:0px !important;
	background: #8D3A1A !important;
}


.form-control{
	color:#EEE !important;
}

.claro .form-control{
	color:#666 !important;
}

.form-floating > label {
		font-family: 'Anton' !important;
    background: transparent !important;
    color: #ffffff !important;
}

.claro .form-floating > label {
	color:#666 !important;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background: transparent !important;
}

.form-floating > input:not(:focus):placeholder-shown + label {
    color:#FFF !important;
}

.form-floating > input + label:after {
   color:#FFF !important;
}

.claro .form-floating > input:not(:focus):placeholder-shown + label,
.claro .form-floating > input + label:after {
	color:#666 !important;
}

.table th{
	background-color: var(--secondary-color);
	color:#FFF;
}

.oscuro .table tbody td,
.oscuro .table tbody th,
.oscuro .table tfoot td,
.oscuro .table tfoot th{
	background-color: var(--fourth-color) !important;
	color:#FFF !important;
}

.claro .table tbody td,
.claro .table tbody th,
.claro .table tfoot td,
.claro .table tfoot th{
	background-color: #FFF !important;
	color: var(--fourth-color) !important;
}

.table td,
.table th{	
	border-bottom:1px solid #666;		
	font-size: 13px;
}

::placeholder {
  font-size:10px;
}

a{
	color:var(--secondary-color);
}

.img_grilla{
	width:40px;
	border-radius: 50px;
	border:1px solid #EEE;
}

.consecutivo {
  font-size: 20px;
  color: red;
  background-color: #E9EFFA;
}

[data-toggle="money"]{
	text-align:right;
}

[data-toggle="datepicker"]{
	cursor: pointer;
}

.bg-success{
	color:#FFF;
	background-color: var(--primary-color) !important;
}

.bg-primary{
	color:#FFF;
	background-color: var(--secondary-color) !important;
}

.input-group-text.bg-success,
.input-group-text.bg-primary{
	color: #FFF;
}


.btn{
	font-size: 12px;
}

.btn-xs{
	font-size:13px;
	padding:2px 10px;
}

.link{
	color: #FFF;
	cursor: pointer;
}

.link:hover{
	color: var(--primary-color);
}

.claro .link{
	color: var(--third-color);
}

.bg-grey{
	background-color: #EEE !important;
	font-weight: bold;
}

.btn-primary{
	color:#FFF;
	cursor:pointer;
	background-color:var(--secondary-color);
	border:1px solid var(--secondary-color);	
}

.btn-success{
	color:#FFF;
	cursor:pointer;
	background-color: var(--primary-color);
	border:1px solid var(--primary-color);
}

.btn-success:hover,
.btn-success:active,
.btn-success:focus{
	background-color: #D5770D !important;
	border:1px solid #D5770D !important;
}

.btn-outline-secondary{
	color:#FFF;
	background-color: var(--fourth-color);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus{
	background-color: #FFFF !important;
	border:1px solid #FFFF !important;
	color:var(--fourth-color) !important;
}

.btn-danger{
	color:#FFF;
	cursor:pointer;
	background-color:#E30007;
}

.btn-warning{
	color:#FFF;
	cursor:pointer;
	background-color:#F0AD4E;
}

.estatus{
	font-weight: bold;
	font-size: 12px;
	display: inline-block;
	text-align: center;
	border-radius: 30px;
	padding:5px 10px;	
}

.estatus-success{
	background-color:#39c639;
}

.estatus-warning{
	background-color:#ea8c48;
}

.estatus-secondary{
	background-color:#737373;
}

.estatus-danger{
	background-color: #ed1224;
}

.thead-sticky{	
	overflow-y:auto;
}

.thead-sticky table{
	border-collapse: collapse;
}

.thead-sticky table thead{
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0;
	z-index: 1;
	background-color:#FAFAFA;
	border-bottom:1px solid #E9EFFA;
}

.thead-sticky table thead th{
	border-top:1px solid #E9EFFA;
	border-left:0px;
	border-right:0px;
}

.grilla{
	margin-top:10px;
	min-height: 200px;
}

.modal{
	overflow-y:scroll;
}

.modal-header{
	padding:10px 15px;
	background-color: var(--secondary-color);
	color:#FFF;
	border-radius: 2px;
}

.modal-title{
	font-size:17px;
}

.modal-body{
	color:#FFF;
	background-color: var(--fifth-color);
	margin:0px !important;
	/*border:0px !important;*/
}

.modal-footer{
	color:#FFF;
	margin:0px !important;
	background-color: var(--fifth-color);
	/*border:0px !important;*/
}

.claro .modal-body,
.claro .modal-footer{
	color: var(--fifth-color);
	background-color: #FFF;
}

label{
	margin: 0px;
	padding: 0px;
	display: inline-block;
}

select{
	color:#000;
}

textarea{
	resize:none;
}

#contenedor{
	min-height:100%;
	margin-bottom: -80px;
}

#contenedor:after{
	content:'';
	display: block;
	height:80px;
}

footer{
	height:80px;
}

.form-control,
.form-control:focus{
	border-radius: 20px;
  padding: 5px 10px;
  outline: none;	
  background-color: #3f515a;
  border:1px solid #3f515a;
}

.input-group-text{
	cursor: pointer;
	border-radius: 20px;
	background-color: #3f515a;
	border: 0px;
}


.claro .form-control,
.claro .form-control:focus,
.claro .input-group-text{
	background-color: #FFF;
	border:1px solid #CCC;
}

[placeholder]:focus::-webkit-input-placeholder{
    transition: text-indent 0.4s 0.4s ease; 
    text-indent: -100%;
    opacity: 1;
 }

.form-s{
	width:100%;
	max-width:400px;
}

.form-m{
	width:100%;
	max-width:600px;
}

.form-l{
	width:100%;
	max-width:800px;
}

.form-xl{
	width:100%;
	max-width:980px;
}

.modal-body{
	padding:15px 25px;
}

.titulos-form{
	padding:5px 10px;
	border-bottom:1px solid #CCC;
}

.contenido-form{
	padding:5px 10px;	
}

.footer-form{
	margin-top:5px;
	padding:10px 10px;
	border-top:1px solid #CCC;
}

.dropdown ul{
	margin:0px;
	padding:0px;
}

.dropdown li{
	cursor: pointer;
	padding:3px 8px;
	border-bottom:1px solid #CCC;
}

.dropdown li:hover{
	background-color:#666;
	color:#FFF;
}

.dropdown-title{
	text-align: center;
	background: var(--secondary-color);
	color:#FFF;
	cursor: none;
}

.dropdown-title:hover{
	background: var(--secondary-color) !important;
	color:#FFF !important;
}

.inline-block{
	font-size:0px;
}

.inline-block > div,
.inline-block > li{
	font-size:13px;
	display: inline-block;
}

.vertical-align-top > div,
.vertical-align-top > li{
	vertical-align:top;
}

.vertical-align-middle > div,
.vertical-align-middle > li{
	vertical-align:middle;
}

.vertical-align-bottom > div,
.vertical-align-bottom > li{
	vertical-align:bottom;
}

.tr-td-1,
.tr-td-2,
.tr-td-3{
	padding:5px;
}

.tr-td-1{
	width:100%;
}

.tr-td-2{
	width:50%;
}

.tr-td-3{
	width:33.33%;
}

#msj_php{
	display: none;
	z-index: 99999;
	position: fixed;
	top:0px;right:0px;
	width: 300px;
	padding:8px 10px;
	box-shadow: 0px 0px 10px #666;
}

#msj_php i{
	margin-right:3px;
}

.success{
	border:1px solid #009E37;
	background-color:#009E37;
	color:#FFF;
}

.info{
	border:1px solid #00A8EF;
	background-color:#00A8EF;
	color:#FFF;
}

.error{
	border:1px solid #DD0024;
	background-color:#DD0024;
	color:#FFF;
}

#cargando{
	display: none;
	height: 100%;
	min-height: 100%;
	width:100%;
	background-color:rgba(0,0,0,0.3);
}

#cargando,
#cargando img{
	position: fixed;
	top:0;bottom:0;left:0;right:0;
	z-index: 9999;
	text-align: center;
}

#cargando img{
	margin: auto;	
	width:150px;	
	border-radius: 10px;
}

.accordion,
.accordion-item,
.accordion-header{
	background-color: var(--fourth-color) !important;
	color:#FFF !important;
}

.paginado{
	display: block;
	width:100%;
	text-align: center;
}

.paginado > div{
}

.col-md-12,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-2,
.col-md-3{
	margin-bottom:10px;
	padding:0px 5px;
}

.nav-tabs{
	margin-bottom:10px;
}

.ck-editor__editable {
    min-height: 300px;
}

/* CHECKBOX */

 /* Customize the label (the container) */
.container_checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container_checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container_checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container_checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container_checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container_checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}