/*------------ Root variables ------------*/
:root{
	--footer-height:3.5rem;
	--header-height:2.5rem;
	--total-height:calc(var(--footer-height) + var(--header-height));
}

/*------------ HTML tags ------------*/

a {
	text-decoration: none!important;
}

body {
	background: #e4e4e4!important;
	font-family: Roboto,sans-serif;
	display: flex;
	flex-direction: column;
	height: 100vh;
	align-items: center
}

form{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}

footer{
	margin-top:auto;
	z-index:1
}

img{
	border-radius:.5rem
}

li{
	text-align:left
}

main{
	padding: 2rem;
	max-width: 50rem;
	margin: 1rem;
	background-color: #fff!important;
	border-radius: .5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

ul{
	list-style-type:none;
	margin:.5rem auto;
	padding:0
}

/*------------ Classes ------------*/

.btn{
	font-weight:700;
	font-size:80%;
	border-radius:20px;
	min-width:100px;
	max-width:500px;
	z-index:1
}

.btn-go{
	background-color:#45c8f6;
	color:#fff!important
}

.btn-go-alt{
	background-color:rgba(0,0,0,0.15);
}

#btn-start{
	position:absolute;
	left:50%;
	top:68vh;
	font-size:calc(.5rem + .2 * 10vw)!important;
	transform:translate(-50%)
}

.canjes-logo-partner{
	display:flex;
	width:100%;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

.corner{
	position:absolute;
	right:5px;
	top:5px;
}

.datepicker{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-end;
	gap:1rem;
}

.footer-inner{
	height:var(--inner-footer-height);
	background:#fff!important;
	border-radius:0 0 15px 15px;
	padding-bottom:1rem
}

.footer-outter{
	background:#00377b;
	color:#fff!important;
	font-size:.6rem;
	height:var(--outter-footer-height);
	padding:5px
}

.form-check{
	margin-bottom: 1rem;
}

.form-control{
	height:calc(1.5em + 1.2rem + 2px)!important;
	border:1px solid #999!important;
	border-radius:.25rem!important;
	z-index:0!important
}

.form-control[readonly]{
	background-color:transparent
}

.form-label{
	font-size:.75rem;
	position:absolute;
	top:-12px;
	left:9px;
	padding:3px;
	color:#666;
	background-color:#fff!important;
	z-index:1
}

[class*=grid-item]{
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center
}

.header-inner{
	height:var(--inner-header-height);
	box-shadow:rgba(0,0,0,.17) 0 0 10px;
	background-color:#fff;
	text-align:center;
	justify-content:center;
	align-items:center;
	display:flex
}

.nav-tabs{
	font-size:calc(.5rem + .1 * 5vw);
	justify-content:center
}

.nav-link{
	letter-spacing:.1rem
}

.header {
	background: #00377b;
	height: calc(var(--header-height));
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center
}

.header img {
	border-radius: 0;
	height: calc(100% - .5rem);
}

.obs{
	font-style:italic;
	font-size:.75rem;
	color:#a9a9a9
}

.tab-content{
	padding:1rem 0
}

.tab-title{
	color:#00377b;
	padding:.25rem 2rem;
	margin:auto;
	text-align:center
}

/*------------ Card Classes ------------*/

.card{
	margin:1rem auto;
	min-width:70%;
	border-radius:.5rem
}

.card-body{
	flex-direction:column;
	display:flex;
	gap:.5rem;
	align-items:center;
}

.card-footer{
	background-color:transparent;
	border:none;
	padding:1rem
}

.card-header{
	font-weight:600
}

.card-text{
	max-width:25rem
}

#modal-codigo .card-text{
	font-size:2rem;
	font-weight:600
}

.card-title{
	gap:.5rem;
	display:flex;
	flex-direction:column;
	align-items:center
}

.rounded-top{
	border-bottom-right-radius: 0!important;
	border-bottom-left-radius: 0!important;
}

.sub-card {
	background-color:white;
	padding:.5rem 1rem;
	width:100%;
	border-radius:.5rem;
}

/*------------ Modal ------------*/
.modal-body{
	display:flex;
	padding:1rem;
	flex-wrap:wrap;
	justify-content:center
}

#modal-submit .modal-body{
	display:flex;
	justify-content:space-between;
	padding:2.5rem
}

.modal-content{
	box-shadow:rgb(0 0 0 / 40%) 0 0 1.5rem;
	margin:0 auto;
	padding:2rem 2rem 0
}

.modal-footer{
	justify-content:center
}

.modal-header{
	border:none;
	padding:0;
	align-items:flex-start;
	position:relative;
	justify-content:center
}

.modal-title,.footer-title{
	background-color:transparent;
	font-weight:700;
	color:#00377d;
	justify-content:center
}

.form-control {
	height: calc(1.5em + 1.2rem + 2px) !important;
	border: 1px solid #999 !important;
	border-radius: .25rem !important;
	z-index: 0 !important;
	font-size: 1rem;
}

.form-group, .input-group {
	position: relative;
	margin: 0 auto 1.5rem;
	max-width: 15rem;
}

.form-label {
	font-size: 0.75rem;
	position: absolute;
	top: -12px;
	left: 9px;
	padding: 3px;
	color: #666;
	background-color: white;
	z-index: 1;
}

.input-group-text {
	font-size: 1.05rem;
	padding: 0.6rem 0.5rem 0.5rem;
	background: white;
	color: #45c8f6;
	font-weight: 600;
	border: 1px solid #999 !important;
}

/*------------ Logos & Icons ------------*/

.icon-container {
	display: inline-block;
	vertical-align: middle;
}

.text-content {
	vertical-align: middle;
}

.ic {
	margin-right: 10px;
	vertical-align: middle;
	display: inline-block;
	width: 2rem;
	height: 2rem;
}

.ic-device{
	background: url(../assets/img/ic-device.svg) center no-repeat;
	background-size: contain;
}

.ic-usim{
	background: url(../assets/img/ic-usim.svg) center no-repeat;
	background-size: contain;
}

.ic-coverage{
	background: url(../assets/img/ic-coverage.svg) center no-repeat;
	background-size: contain;
}

.ic-warning{
	background: url(../assets/img/ic-warning.svg) center no-repeat;
	background-size: contain;
}

.ic-error{
	background: url(../assets/img/ic-error.svg) center no-repeat;
	background-size: contain;
}

.ic-check{
	background: url(../assets/img/ic-check.svg) center no-repeat;
	background-size: contain;
}

.ic-reload{
	background: url(../assets/img/ic-reload.svg) center no-repeat;
	background-size: contain;
}

.logo{
	width:10rem;
	height:5rem;
	background-size:contain!important
}

.logo-small{
	width:3rem!important;
	height:2rem!important;
}

.logo-cines{
	background:url(../assets/img/cinepop/partner-icon.png) center no-repeat
}

.logo-bares{
	background:url(../assets/img/logo-g5pro.png) center no-repeat
}

.logo-sacramento{
	background:url(../assets/img/sacramento/partner-icon.png) center no-repeat
}

.logo-kilkenny{
	background:url(../assets/img/kilkenny/partner-icon.png) center no-repeat
}

.logo-capitao{
	background:url(../assets/img/capitao/partner-icon.png) center no-repeat
}

.logo-elnacional{
	background:url(../assets/img/elnacional/partner-icon.png) center no-repeat
}

.logo-gitano{
	background:url(../assets/img/gitano/partner-icon.png) center no-repeat
}


/*------------ Fonts & Colors ------------*/

@font-face {
  font-family: 'Helvetica 97';
  src: url('../assets/fonts/Helvetica Neue 97 Black Condensed Oblique.otf') format('truetype');
}

.font-gran-turismo {
	font-family: 'Helvetica 97', sans-serif;
}

@import url('https://fonts.cdnfonts.com/css/cronospro');

.active .label{
	color:#565656!important
}

.blue{
	color:#00377b;
	font-weight:600
}

.bg-transparent{
	background-color: transparent;
}

.cronos{
	font-family: 'Cronos Pro';
	font-style: normal;
	font-weight: 400;
}

.darkgray-font{
	color:darkgray;
	background-color:rgba(0,0,0,.02);
}

.lightblue{
	color:#45c8f6!important;
	font-weight:600!important
}

.text-left{
	text-align:left!important;
}

.text-green{
	color:#37c846!important
}

.text-orangered{
	color:orangered;
}