html{-webkit-tap-highlight-color: transparent;height: 100%;font-family: "Open Sans", sans-serif;height: 100%;}
body{font-family: "Open Sans", sans-serif;font-size: 1em;line-height: 1.2;color: #424242;background-color: #F1F1F1;font-weight:300;overflow-x:hidden;overflow-y:scroll;height: 100%;}

h1{font-weight: 300;margin:0 0 20px 0;}
h2{font-weight: 300;}
h3{font-weight: 300;margin:0 0 10px 0;}
h4{font-weight: 300;}
h5{font-weight: 300;}
h6{font-weight: 300;}
p{font-weight: 300;}
li{font-weight: 300;}
a{text-decoration: none;}

.full-label{padding: 2px 5px;border-radius: 3px;font-size: 12px;text-transform: uppercase;display: inline-block;}
.full-label.danger-label{background-color: #EF4836;color: #FFF;}

.row-tpl .full-label{display: table-cell;}

.row.display-flex:before,.row.display-flex:after{content: normal;}

.row-tpl.hide{background: repeating-linear-gradient(
	-45deg,
	rgba(64,55,47,0.2),
	rgba(64,55,47,0.2) 4px,
	rgba(185, 54, 239,0.1) 4px,
	rgba(185, 54, 239,0.1) 8px);
}
.order-row-tpl.border-left{border-left: 2px solid #EF4836;}

.no-margin{margin:0;}
.margin-right{margin-right: 5px;}
.margin-left{margin-left: 5px;}
.margin-top{margin-top: 5px;}
.margin-bottom{margin-bottom: 5px;}

/* filter */
.filter-box{padding: 15px;background-color: #FFF;margin-top: 10px;overflow: hidden;margin-bottom: 20px;clear: both;position: relative;top: 15px;}
.filter-box > h3{margin: 0 0 10px 0;}
.filter-box > div{display: block;margin-bottom: 10px;}

/*
COLOR
.blue-light{clor:#559FE3;}
.blue-dark{clor:#14548F;}
*/

.green{color:#009049;}
.red{color:#EF4836;}
.gray{color:#95A5A6;}

/* CARD */
.card {background-color: #FFF;border: 1px solid #FFF;border-radius: 0;display: block;margin-bottom: 10px;position: relative;flex:1;-webkit-flex: 1;width:100%;}
.card .table {margin-bottom: 0;}
.card .list-group {margin-bottom: 0;}

.card-title {margin-bottom: 5px;margin-top: 0;}
.card-subtitle {margin-bottom: 5px;margin-top: -2px;}
.card-text:last-child {margin-bottom: 0;}
.card-header {border-bottom: 1px solid #FFF;padding: 10px 15px;font-weight: 300;position: relative;}
.card-header:first-child {border-top-right-radius: 0;border-top-left-radius: 0;}
.card-header:after {clear: both;}

.card-values{}
.card-values .p-x{padding-left: 10px!important;padding-right: 10px!important;}
.card-values .p-x .card-title{font-weight: 300;font-size: 24px;}

.card-body {padding: 15px;position: relative;}
.card-body:after {clear: both;}

.card-body h2{margin: 0;}

.card-footer {border-top: 1px solid #FFF;padding: 10px 15px;}
.card-footer:last-child {border-bottom-right-radius: 0;border-bottom-left-radius: 0;}
.card-footer:after {clear: both;}

.card-img {border-radius: 0;}
.card-img-top {border-top-right-radius: 0;border-top-left-radius: 0;}
.card-img-bottom {border-bottom-right-radius: 0;border-bottom-left-radius: 0;}

.card-thumbnail {background-color: #FFF;border: 3px solid #FFF;display: inline-block;height: auto;max-width: 100%;position: relative;z-index: 15;}
.card-thumbnail[class*="sq-"] {display: block;margin-left: auto;margin-right: auto;margin-top: -1em;}

.card .table {margin-bottom: 0;}
.card canvas {position: relative;display: block;width: 100%;height: 100%;}

.card.no-background{background-color: transparent;border:none;}
.card.no-background > .card-header{background-color: transparent;border:none;}
.card.no-background > .card-body{background-color: transparent;padding:0;}

/*GENERAL*/
#container{min-height:100%;position:relative;padding-bottom: 60px;}
#container > section{height:100%;padding-bottom: 60px;}
#container footer{bottom:0;width:100%;padding:20px 0;}

.footer-help-icon{position: relative;top: 1px;}
footer{padding:20px 0;text-align: center;color: #858b86;font-size: 11px;line-height: 1.2;position: absolute;bottom: 0;}
body.login-body footer{bottom: 0;position: fixed;width: 100%;padding:10px 0;}
.login body.login-body .login-box{margin-bottom: 80px;}
.login body.login-body.register-body footer{position: relative;}
.login body.login-body.register-body .login-box{margin-bottom: 20px;}

.mys-logo{max-width: 250px;}

section{min-height:500px;overflow: hidden;margin:20px 0;padding:0;}
.header:before{content: "";display: none;padding:0;}
header,section,footer{width:auto;}
header{height:56px;overflow: hidden;position: relative;z-index: 100;background: #FFF;display: block;box-shadow: 0 0 4px rgba(51,51,51,0.3);}
#logo{float:left;width:130px;height: 20px;position: relative;margin: 18px 0 18px 20px;background: url('../img/logo-s.png') no-repeat center center;background-size:cover;}

#admin-nav .topbar-right-box .topbar-client-name-container{display: none;}
#admin-nav.level-0 .topbar-right-box .topbar-client-name-container{display: block;}

#admin-nav .topbar-right-box{display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;margin-right: 0;}
#admin-nav .topbar-right-box #admin-nav-logout{order: 2;flex: 1 0 100%;}
#admin-nav .topbar-right-box .topbar-client-name-container{order: 1;flex: 1 0 100%;}

#admin-nav .topbar-client-name-container,
#admin-nav .topbar-client-name-container .icon-user,
#admin-nav .topbar-client-name-container .topbar-client-name{cursor: default;}
#admin-nav .topbar-client-name-container:hover,
#admin-nav .topbar-client-name-container:hover .icon-user,
#admin-nav .topbar-client-name-container:hover .topbar-client-name{color: #999;}

#admin-nav .topbar-client-name-container .topbar-client-name{float: none;}

@media screen and (min-width: 768px) {
	/* #admin-nav .topbar-right-box #admin-nav-logout{order: 2;} */
	/* #admin-nav .topbar-right-box .topbar-client-name-container{order: 1;} */
	#admin-nav .topbar-right-box{float:right;flex: none;width: auto;}
	#admin-nav .topbar-right-box #admin-nav-logout,
	#admin-nav .topbar-right-box .topbar-client-name-container{flex: none;border-left: 0;}
	#admin-nav .topbar-client-name-container{float:right;font-size: 16px;line-height: 16px;border: 0;padding: 24px 5px 24px 5px;color: #999;margin-right: 10px;}
	#admin-nav .topbar-client-name-container{float:right;font-size: 16px;line-height: 16px;border: 0;padding: 24px 5px 24px 5px;color: #999;margin-right: 10px;}
	#admin-nav .topbar-client-name-container .icon-user{font-size: 14px;}
	#admin-nav .topbar-client-name-container .topbar-client-name{float: left;}
	
	.login body.login-body.register-body footer{position: fixed;}
	.login body.login-body.register-body .login-box{margin-bottom: 80px;max-width: 500px;}
}

header #mobile-topbar-menu{margin:10px;display:block;float:right;color:#FFF;}


/* OVERLAY BTN */
#mobile-topbar-menu{position: absolute;top:5px;right:10px;display:block;cursor: pointer;width: 26px;height: 26px;
-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;}
#mobile-topbar-menu span{display: block; position: absolute; height: 4px; width: 100%; background: #999; border-radius: 2px; opacity: 1; left: 0;
-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#mobile-topbar-menu.open span{background: #999;}
#mobile-topbar-menu span:nth-child(1) { top: 2px; }
#mobile-topbar-menu span:nth-child(2),#mobile-topbar-menu span:nth-child(3) {  top: 10px;}
#mobile-topbar-menu span:nth-child(4) {  top: 18px;}
#mobile-topbar-menu.open span:nth-child(1) {  top: 10px;  width: 0%;left: 50%;}
#mobile-topbar-menu.open span:nth-child(2) {  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);}
#mobile-topbar-menu.open span:nth-child(3) {  -webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg);  -o-transform: rotate(-45deg);  transform: rotate(-45deg);}
#mobile-topbar-menu.open span:nth-child(4) {  top: 10px;  width: 0%;  left: 50%;}

#admin-nav{background:#FFF;margin:0;height:0;overflow: hidden;width:100%;box-shadow: 0 0 4px rgba(51,51,51,0.3);position: relative;z-index: 90;text-align:left;
-webkit-transition: height 0.3s cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: height 0.3s cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: height 0.3s cubic-bezier(0.86, 0, 0.07, 1);
transition: height 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

#admin-nav #logo-nav{display: none;}
#admin-nav a{text-decoration:none;display:block;font-size:14px;line-height: 20px;padding:20px 0 20px 18px;color:#858b86;border-bottom:1px solid #f1f1f1;margin:0;}
#admin-nav span{float:left;margin-right:10px;font-size:14px;line-height: 20px;font-weight: 300;text-transform:none;}
#admin-nav button:before{float:left;font-size: 14px;line-height: 20px;padding-top: 4px;margin-right: 10px;}
#admin-nav span.icon-truck{position: relative;top:-3px;}
#admin-nav a.selected, #admin-nav a.selected span{color:#27ae60;font-weight:400;}


/*VIEW*/
#page_base-view-box{padding:0 10px;}
.view-box{}
.view-nav{margin-bottom:20px;text-align: center;border-bottom: 1px solid #f1f1f1;padding:0 1px;}

.view-title{margin:10px 0 20px 0;text-align: left;border-bottom: 1px solid #f1f1f1;padding:0 1px;overflow: hidden;height: 36px;}
.view-title span.title{font-weight: 700;font-size: 20px;position: relative;top:5px;}
.view-title button{float:right;}


* {-webkit-box-sizing: border-box;box-sizing: border-box;}
*:before, *:after {-webkit-box-sizing: border-box;box-sizing: border-box;}


/* Login page */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.login{width: 100%;height: 100%;display: table;}
.login .login-body{display: table-cell;vertical-align: middle;background-color: #F1F1F1;}
.login .login-body .login-box{max-width: 320px;margin: 0 auto;padding: 0 20px;overflow: hidden;
	-webkit-animation-duration: 1s;
		animation-duration: 1s;
	-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	-webkit-animation-name: fadeInUp;
		animation-name: fadeInUp;
}

.login .login-body .login-box .title-center{margin-bottom:20px;}
.login .login-body .login-box .desc-check{font-size: 0.7em;line-height: 28px;}
.login .login-body .login-box #login-form .field.check{height: 36px;}

.login .login-body .login-box .title-center .navbar-brand{width: 200px;height: 110px;left:50%;position: relative;margin: 10px 0 15px;background-image: url('../img/logo.png');
	-webkit-transform: translate3d(-50%,0,0);
		-o-transform: translate3d(-50%,0,0);
			transform: translate3d(-50%,0,0);
}
.login .login-body .login-box #login-btn,.login .login-body .login-box #register-btn,.login .login-body .login-box #recovery-btn{width: 100%;}
.login .login-body .login-box #login-register{font-size: 13px;text-align: center;display: block;margin-top: 15px;}
.login .login-body .login-box #recovery-password{font-size: 13px;text-align: left;display: block;margin-top: 5px;}

/* MAIN VIEW */
#page_base-nav #p_campaigns-btn:before{content:"\e690";}
#page_base-nav #p_customers-btn:before{content:"\e71e";}
#page_base-nav #p_users-btn:before{content:"\e83a";}
#page_base-nav #settings-btn:before{content:"\e672";}


/* COMPANIES */
#company-pop-client_code input{text-transform: uppercase;}
.companies-data-table .header .client_code{width: 200px;}

.company-row-tpl{}
.company-row-tpl .name{}
.company-row-tpl .refresh{width:40px;}
.company-row-tpl .refresh span{cursor: pointer;}
/* .company-row-tpl.linked .name{text-decoration: underline;cursor: pointer;color:#559FE3} */

.company_groups-data-table{}
.company_groups-data-table .name{width: 200px;}
.company_groups-data-table .level{}
.company_groups-data-table .disabled{width: 100px;}

/* CARDS */
#card-pop-card_code input,
/* #card-pop-card_code_encoded input, */
#card-pop-card_control input{text-transform: uppercase;}
#card-pop-companyID button{width: 100%;}

#cards-search-box{display: flex;flex-direction: column;gap: 10px;}
.cards-data-table .header .card_code{width: 150px;}
.cards-data-table .header .card_control{width: 80px;}
.cards-data-table .header .card_expire{width: 150px;}
.cards-data-table .header .card_value{width: 120px;text-align: right;}
.cards-data-table .header .used_value{width: 150px;text-align: right;}
.cards-data-table .card_value{text-align: right;}
.cards-data-table .used_value{text-align: right;}
.cards-data-table .used_value .perc-value{display: block;margin-top: 5px;color:#999;font-size: 0.8em;}

@media screen and (max-width: 996px)  and (orientation: landscape) {
	body.login-body footer{position: static;width: 100%;padding:20px 0;}
}

@media screen and (min-width: 768px) {
	#cards-search-box{flex-direction: row;}
}

#import-pop-cards-uploader button{width: 250px !important;}



/* CARDS  ORDERS*/
#orders_cards-search-box{display: flex;flex-direction: column;gap: 10px;}
@media screen and (min-width: 768px) {
	#orders_cards-search-box{flex-direction: row;}
}

#import-pop-orders_cards-uploader button{width: 250px !important;}

/*  ORDERS*/
#orders-search-box{display: flex;flex-direction: column;gap: 10px;}
@media screen and (min-width: 768px) {
	#orders-search-box{flex-direction: row;}
}

#import-pop-orders-uploader button{width: 250px !important;}

.orders-data-table .header .order_code{width: 150px;}

#info_order-typeID{margin-top: 5px;font-size: 0.8em;}

/* ORDER CARD_ORDERS */
#import-compile-pop-orders-uploader button{width: 250px !important;}

.order_orders_cards-data-table{}
.order_orders_cards-data-table .header .note{width: 30px;}
.order_orders_cards-data-table .header .customer_code{width: 130px;}
.order_orders_cards-data-table .header .cardID{width: 250px;}
.order_orders_cards-data-table .header .card_value{width: 120px;text-align: right;}
.order_orders_cards-data-table .card_value{text-align: right;width: 120px;}

.order_orders_cards-data-table .note{color: #FFAA00;}

.buttons-container-container{display: flex;flex-direction: column;}
.buttons-container-container button{width: 100%;}
@media screen and (min-width: 768px) {
	.buttons-container-container{flex-direction: row;justify-content: space-between;}
	.buttons-container-container button{width: auto;}
}

#order_orders_cards-count-box{display: none;}

@media screen and (max-width: 767px) {
	#admin-nav.level-0.show{height:120px;}
	#admin-nav.level-1.show{height:240px;}
	#admin-nav.level-2.show,
	#admin-nav.level-3.show{height:180px;}
	#admin-nav.show{height:240px;}
	
	#page_base-nav{}
	#page_base-nav .std.buttonNav{display: block;border-bottom: 1px solid #d4d4d4;width: 100%;padding: 15px;}
	.cp-header-inner{overflow: hidden;}
}

@media screen and (min-width: 768px) {
	body {font-size:1.2em;} 
	h1{font-size:1.5em;}
	h2{font-size:1.2em;}
  	h3{font-size:1.2em;}
	p,li{font-size:1.0em;}
    
    header{display: none;}
	.field.field-left{float:left;width: 50%;}
    .noMobile{display: inherit;}
        
    #admin-nav, #admin-nav.show{display: block;height:60px;text-align:right;margin-top:0;-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;transition-duration:0;background: #FFF;box-shadow: 0 0 4px rgba(51,51,51,0.3);}
    #admin-nav-inner{width:750px;margin: 0 auto;position: relative;overflow: hidden;}
	#admin-nav-inner #page_base-nav{float: left;margin-top: 10px;}
    #admin-nav #logo-nav{display: block;width:130px;height: 20px;float:left;margin-right: 20px;background:url('../img/logo-s.png') no-repeat center center;background-size:cover;padding: 0;margin-top: 20px;}
    #admin-nav a{float:left;font-size:16px;line-height:16px;border:0;padding:24px 5px 24px 5px;color: #999;margin-right:10px;}
	#admin-nav a:nth-child(2){border-left:1px solid #434743;padding-left:20px;}
    #admin-nav a#admin-nav-logout{float:right;}
    #admin-nav span{float:left;margin-right:5px;font-size:16px;line-height:16px;}
	#admin-nav button:before{float:left;line-height: 20px;padding-top: 0;margin-right: 5px;}
    #admin-nav a:hover,#admin-nav a:hover span{color:#424242;}
    #admin-nav a.selected, #admin-nav a.selected span{color:#FFF;font-weight:400;}
    
    section{width:750px;margin:10px auto;}
    footer{padding:40px 0;}
	  

    /*VIEW*/
	#page_base-view-box{padding:20px 0 0 0;}
    .view-nav{text-align: left;}
	
}
@media screen and (min-width: 996px) { 
	header .cp-header-inner{width:960px;margin: 0 auto;}
	#admin-nav-inner{width:960px;margin: 0 auto;}
	
	section{width:960px;}
} 
@media screen and (min-width: 1240px) { 
	header .cp-header-inner{width:1200px;margin: 0 auto;}
	#admin-nav-inner{width:1200px;margin: 0 auto;}
	
	section{min-height:700px;width:1200px;}
}
@media screen and (min-width: 1360px) { 
	header .cp-header-inner{width:1340px;margin: 0 auto;}
	#admin-nav-inner{width:1340px;margin: 0 auto;}
	
	section{width:1340px;}
}
@media screen and (min-width: 1440px) { 
}
@media screen and (min-width: 1600px) { 
	header .cp-header-inner{width:1500px;margin: 0 auto;}
	#admin-nav-inner{width:1500px;margin: 0 auto;}
	
	section{width:1500px;}
}

.std.popup label{font-weight: 300;font-size: 14px;margin-bottom: 5px;}
.std.popup .full-width{}
.std.popup .full-width button{width: 100%;}

#import-pop-orders-anno-label{display: inline-block;margin-top: 5px;}

.info-cards-container p{margin-top: 0;margin-bottom: 10px;}
.info-cards-container p:last-child{margin-bottom: 0px;}