/*********** THEME **********/
:root{
	--header: #f9f9f9;
	--footer: #112233;
	--link: #1199ee;
	--prominent: #f7ab10;
	
	--primary: #c0000c;
	--white: #ffffff;		
	--body: #faf9f8;
	--light: #f1f2f3;
	--border: #dddddd;
	--silver: #acacac;
	--gray: #797979;
	--dark: #393939;
	--black: #111111;

	scrollbar-color: none;
}

.title{
	font-family: 'font',Helvetica,Arial,sans-serif;
}

/********* Primary ***********/
.btn-primary {
	color:var(--white);
	background-color: var(--primary);	
	border-color:var(--primary);	
  }
  
  .btn-primary:hover {
	color:var(--white);
	background-color: var(--primary);	
	border-color:var(--primary);	
	box-shadow: 0 2px 3px #33333344;
  }
  
  .btn-primary:focus{
	box-shadow: 0 0 0 0.2rem #33333300;	
  }
  
  .btn-primary.disabled{
	color:var(--white);
	background-color: var(--header);	
	border-color:var(--header);
	opacity: .5;
  }
  
  .btn-primary:active,.btn-primary.active{
	color:var(--white);
	background-color: var(--primary);	
	border-color: var(--primary);	
  }

  
  .btn-primary:not(:disabled):active:focus,
  .show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem #33333344;	
  }

  /********* Outline-Primary ***********/
  .btn-outline-primary {
	color:var(--header);
	border-color:var(--header);	
  }
  
  .btn-outline-primary:hover {
	color:var(--white);
	background-color: var(--header);	
	border-color: var(--header);	
  }
  
  .btn-outline-primary:focus, .btn-outline-primary.focus {
	box-shadow: 0 0 0 0.2rem #33333344;
  }
  
  .btn-outline-primary.disabled, .btn-outline-primary:disabled {
	color:var(--white);
	background-color: transparent;
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
  .show > .btn-outline-primary.dropdown-toggle {
	color:var(--white);
	background-color: var(--header);
	border-color: var(--header);	
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem #33333355;
  }

  /********* Secondary ***********/
  .btn-secondary {
	color: var(--color-2c);
	background-color: var(--color-2a);
	border-color: var(--color-2a);
  }
  
  .btn-secondary:hover {
	color: var(--color-2c);
	background-color: var(--color-2a);
	border-color: var(--color-2a);
	box-shadow: 0 0 0 0.2rem #33333344;
  }
  
  .btn-secondary:focus, .btn-secondary.focus {
	box-shadow: 0 0 0 0.2rem #33333344;
  }
  
  .btn-secondary.disabled, .btn-secondary:disabled {
	color: var(--color-2c);
	background-color: var(--color-2a);
	border-color: var(--color-2a);
  }
  
  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
  .show > .btn-secondary.dropdown-toggle {
	color: var(--color-2c);
	background-color: var(--color-2a);
	border-color: var(--color-2a);
  }
  
  .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
  .show > .btn-secondary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem #33333333;
  }
  
  /********* Link **********/

  .btn-link {
	font-weight: 400;
	color:var(--link);
  }
  
  .btn-link:hover {
	color:var(--color-2a);
	text-decoration: underline;
  }
  
  .btn-link:focus, .btn-link.focus {
	text-decoration: underline;
	box-shadow: none;
  }
  
  .btn-link:disabled, .btn-link.disabled {
	color: #6c757d;
	pointer-events: none;
  }
  

/********* GENERAL **********/
main{
	min-height: 100vh;
}

header{	
	position: relative;
	top: 0;
	/*height: 50px;*/
	box-sizing: content-box;
	z-index: 15;
	background: var(--body);
}

header #sec_cover{
	height:100%;
}

.container-fluid{
	padding: 0;
}

.container{
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: auto;
	margin-left: auto;
}


/********** DESDE AQUI DASHBOARD **********/
#super_container{
	height: 100%;
	width: 100%;
	position: absolute;
}

/********* HEADER **********/
#super_container #header{	
	height: 65px;
	width: 100%;
	position: absolute;
  	z-index: 5;
  	display: none;	  
	padding: 0;
}

/********* BODY ***********/
#super_container #body{
	background: #f7f7f7;
	height: 100%;
	right:0px;
	bottom: 0px;
	overflow:hidden;
	overflow-y: auto;
	text-align: center;
	display: none;
	transition: .3s;
	padding: 65px 0 0 0;
}

@media (max-width: 600px){
	#super_container #header{
		height: 55px;
	}

	#super_container #body{
		padding: 55px 0 0 0;
	}
}

/*********** Bootstrap modal-content ***********/
.modal .modal-dialog .modal-content{
	border-radius: 15px;
	overflow:hidden;
}

/*********** JQuery-confirm ***********/
.jconfirm .jconfirm-box{
	border-radius: 15px;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane{
	margin-bottom: 10px;
}

.jconfirm.jconfirm-modern .jconfirm-bg{
	background-color: #000;
	opacity: .4;
}

.jconfirm .jconfirm-box.jconfirm-type-red{
	border-color: var(--header);
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{
	margin-bottom: 5px;
	margin-top: 10px;
}

.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button{
	border-radius: 20px;
	padding: 5px 20px;
	font-size: 16px;
	text-transform: capitalize;
	font-weight: normal;
}

/*********** Tipografía ***********/
@font-face { 
	font-family: 'font';
	src: url('../../@storage/resources/font/Comforta.ttf') format('truetype');
 } 
 
 @font-face { 
	font-family: 'Jasmine';
	src: url('../../@storage/resources/font/Jasmine.ttf') format('truetype');
 }
 
 @font-face { 
	font-family: 'Proxima-Nova';
	src: url('../../@storage/resources/font/Proxima-Nova-Regular.otf') format('truetype');
 }
 
 html{
	background: var(--body) fixed url(../../@storage/resources/trama/0.png) center center repeat;	
 }
 
body{	
	font-family: Helvetica,Arial,sans-serif;
	font-size: 16px;

	background-repeat: repeat;
	background-attachment:fixed;
	background:  inherit;
	color: var(--gray);
	/*max-width: 450px;*/
	margin: auto;
	box-sizing: content-box;
	padding: 0;
}

body main{
	background: var(--body);
	box-sizing: content-box;
	position: relative;
	margin: 0;
}	

body main section{
	height:auto;
	overflow: hidden;
}

body footer{
	height: auto;
    width: 100%;
	/*max-width: 450px;*/
	background: var(--body);
	/*padding: 15px 20px;*/
    color: #aaa;
    transition: bottom .4s;
	position: absolute;
	/*border-top: 1px solid var(--border);*/
}

.blur{
	filter: blur(3px);
}

.btn-light{
	border-color:var(--border);
	
}

/*******************************************************/

.alert{
	padding: 10px 12px;
	text-align: center;
	font-size: 15px;
	border-radius: 8px;	
	line-height: 18px;
}

.alert.alert-info{
	background-color:var(--body);
	border:1px solid var(--border);
	color: var(--gray);
	font-size: 14px;
	line-height: 18px;
}

p{
	font-size: 16px;
}

.modal .modal-dialog{
	/*margin: auto auto;*/
}

.modal .modal-dialog .modal-content{
	background-color: var(--body);
	overflow: hidden;
}

.modal.fullscreen .modal-dialog{
	height: 100%;
	width: 100% !important;
	max-width: 450px;
	margin-top: 0;
	margin-bottom: 0;
}	

.modal.fullscreen .modal-dialog .modal-content{
	border-radius:0;
	height: 100%;
	width: 100%;
	margin: 0;
	border-width:0;	
	overflow: scroll;
}

.modal.fullscreen .modal-dialog .modal-content .modal-body{
	padding-bottom: 90px;
}

.modal.fullscreen .modal-dialog .modal-content .modal-footer{
	position: fixed;
	width: 100%;
	bottom: 0px;
	background: var(--body);
	box-shadow: 0 -6px 6px var(--body);
	border-color: var(--body);
	max-width: 450px;
}

#nav_menu ul#big li{
	border-bottom:2px solid rgba(0,0,0,0);	
	box-sizing: border-box;
}

#nav_menu ul#big li label{
	border: 1px solid rgba(0,0,0,0);
	border-radius:4px;
	box-sizing: border-box;
}

#go_up{
	color:#eee;
	padding:15px;
	position:fixed;
	bottom:15px;
	right:20px;
	background:#111;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.3);
	cursor:pointer;
	display:none;
	opacity:.1;
}

#go_up:hover{
	box-shadow:0 0 5px #000;
	border-color:#fff;
	text-shadow:0 0 3px #fff;
	background:#111;
	color:#fff;
	opacity:1;	
}


/*************************** AJAX LOADER **************************/

#ajax_loader{
	 width:100%;
	 height: 100%;
	 position: fixed;
	 bottom: 0;
	 right: 0;
	 text-align: center;
	 background: rgba(0,0,0,0);
	 z-index: 4444;
	 display: flex;
	 align-items: center;
}

#ajax_loader #inner_ajax_loader{
 	position:relative;
 	margin:0;	
 	border-radius: 5%;
 	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	background: #ffffff33;
	/*background:fixed url(../../@storage/resources/trama/0.png) center center repeat;*/
	border-radius: 50%;
	display: flex;
	align-items: center;
	align-content: center;
	box-shadow: 0 0 15px var(--body);
	padding: 15px;
}

@keyframes spinner-grow {
	0% {
	  -webkit-transform: scale(0);
	  transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
  }

 #ajax_loader #inner_ajax_loader #spinner{
	width: 50px;
	height: 50px;
 }

#ajax_loader #inner_ajax_loader .spinner-grow{	
	animation-direction: alternate;
	animation-timing-function: linear;
	border-radius: 50%;	
	opacity: 1;
	margin: 0;
	width: 100%;
	height: 100%;
	animation-duration: 1s;
	background-color: transparent;
	border: 3px solid #fff;
	position: absolute;
	left: 0;
	top: 0;
}

#ajax_loader #inner_ajax_loader .spinner-grow.sg-1{	
	animation-delay: 0s;
	border-color: var(--header);
	background-color: var(--header);
	box-shadow: 0 0 8px 1px var(--header);
}

#ajax_loader #inner_ajax_loader .spinner-grow.sg-2{
	animation-delay: 0.2s;
	border-color: var(--body);
	box-shadow: 0 0 8px 1px var(--body);
}

#ajax_loader #inner_ajax_loader .spinner-grow.sg-3{
	animation-delay: .9s;
	border-color: var(--body);
	box-shadow: 0 0 8px 1px var(--body);
}

#ajax_loader #inner_ajax_loader #store_name{
	color: var(--white);
	display: none;
	font-weight: bold;
}

#ajax_loader #inner_ajax_loader #logo{
	border-radius: 0px;
	margin-bottom: 10px;
	max-width: 44%;
	display: none;
}

@keyframes zoom {
	0% {
	opacity: 0.5;
	transform: scale(0.5,0.5);
	}
	
	100%{
		opacity: 1;	
		transform: scale(1,1);
	}	
}

@media(max-width:480px){
	@keyframes zoom {
		0% {
		opacity: 0.5;
		transform: scale(0.4,0.4);
		}
		
		100%{
			opacity: 1;	
			transform: scale(.8,.8);
		}	
	}

	body{
		padding: 0;
	}
}

#ajax_loader #inner_ajax_loader p{
	display: block;
	margin:0;
	text-shadow: 1px 1px 3px #000;	
	color: #fff;
	width: auto;
	border-radius:5px; 	
	padding: 5px;
	line-height: 20px;
} 

#message_box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/*max-width: 450px;*/
	position: fixed;
	z-index: 2000;
	top: 65px;
}

#message_box #inner_message_box{
	background-color:#229933;
	padding: 13px 50px;
	margin: 0 20px;
	text-align: center;
	border-radius: 30px;
	max-width: 450px;
}

@media(max-width:450px){
	#message_box #inner_message_box{
		width: 100%;
	}
}

#message_box #inner_message_box label{
	margin:0;
	padding: 0;
	color:#fff;
}

#message_box #inner_message_box label i{
	color: green;
	margin-right: 10px;

}

.animate__animated.bounceInDown,.animate__animated.bounceInUp{
	animation-duration: .5s;
}