@import url('https://fonts.googleapis.com/css?family=Lobster+Two|Macondo');
@import url('https://fonts.googleapis.com/css?family=Passion+One');
@import url('https://fonts.googleapis.com/css?family=Bevan');
@import url('https://fonts.googleapis.com/css?family=Chewy');
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan');
@import url('https://fonts.googleapis.com/css?family=Patua+One');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url('https://fonts.googleapis.com/css?family=Dosis');
@import url('https://fonts.googleapis.com/css?family=ABeeZee');
@import url('https://fonts.googleapis.com/css?family=Bungee');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css?family=Londrina+Solid');
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro');
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');


/**********************************************GLOBAL*******************************************************/

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

html{
	width:100%;
	height:100%;
}

body{
	overflow:hidden;
	width:100%;
	height:100%;
	font-family: 'Comfortaa' , cursive;
	position:relative;
}

ul li{
	list-style:none;
}

.section-title{
	color:#000;
	margin-top:100px;
	margin-bottom:20px;
	text-align:center;
	width:100%;
	text-transform:uppercase;
	font-size:1.4em;
	font-weight:bold;
	letter-spacing:2px;
}

#order-action .fa,
#delete-order-action .fa{
    z-index:100;
}

#search{
    margin:10px auto 20px auto;
}

#search form .col{
    padding-right:2px;
}

#search form .col:last-child{
    padding-left:2px;
}

table{
	font-size:0.9em;
}

table .btn{
	padding:2px 5px;
}

.modal-body{
    overflow-x:hidden;
}

.company{
	height:45px;
	background:#17202A;
	padding:10px 5px;
	border-bottom:2px solid #F7F7F7;
	border-right:2px solid #F7F7F7;
	margin:0;
	text-align:center;
}

.company .name{
	text-align:center;
	margin:0px;
	color:#FFF;
	padding-top:10px;
	font-size:1.1em;
	font-weight: bold;
	display:inline;
}

.add-entity{
	margin-left: 15px;
	font-size: 1.2em;
	margin-top:5px;
	color:#17202A;
}

  div.top-scrollbars {
    transform: rotateX(180deg);
  }
  div.top-scrollbars * {
    transform: rotateX(180deg);
  }

.bootstrap-table .fixed-table-body::-webkit-scrollbar {
    width:0.1em !important;
    height:1em !important;
	appearance: scrollbartrack-vertical !important;
	 
}
 
.bootstrap-table .fixed-table-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0,0,0,0.1) !important;
}
 
.bootstrap-table .fixed-table-body::-webkit-scrollbar-thumb {
  background-color: darkgrey !important;
  outline: 0.1px solid slategrey !important;
}

/*
.bootstrap-table .fixed-table-container .fixed-table-body::scrollbar {
    width: 1em !important;
	appearance: scrollbartrack-vertical !important;
	 
}
 
.bootstrap-table .fixed-table-container .fixed-table-body::scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0,0,0,0.1) !important;
}
 
.bootstrap-table .fixed-table-container .fixed-table-body::scrollbar-thumb {
  background-color: darkgrey !important;
  outline: 0.2px solid slategrey !important;
}
*/

.company .fa{
	float:right;
	margin-right:10px;
	color:#FFF;
	font-size:1.5em;
}

.modal-title{
	font-size:1em;
	text-transform:uppercase;
	font-weight:bold;
}

.modal .forgot{
	font-size:0.9em;
}

.modal form button[type="submit"]{
	background:#17202A;
	color:#FFF;
}

.tab-pane{
	padding:10px 30px;
}

/************LOGIN USER*****/

#login-user{
	padding:20px 0px;
}

#login-user #logo{
	font-size: 3em;
}

#login-user #name{
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
}

#login-user button[type=submit]{
	background:#17202A;
	color:#FFF;
	text-transform: uppercase;
	font-weight: bold;
}

/************DISPLAY*********/

#show{
	padding:10px 3px;
}

#show .info{
	border-radius: 5px;
	padding:15px 15px;
	vertical-align: top;
	margin:10px 0px;
	background: #F7F7F7;
	min-height: 150px;
	text-align: left;
	border:1px groove;
}

#show .info .fa-user{
	margin:10px auto;
	display:block;
	font-weight: bold;
	font-size: 5em;
}

#show .info .info-title{
	font-size:1.2em;
	text-transform: uppercase;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom:1px dotted #1720AD;
}


#show .info .data{
	min-width: 100px;
	display:inline-block;
	margin-right:30px;
}

#show .info .data .text,
#show .info .data .title{
	display:inline-block;
}

#show .info .data .title{
	font-size:1em;
	font-weight: bold;
	margin-right: 5px;
	text-decoration: underline;
}

#show .no-data{
	font-weight: bold;
	font-size:1em;
	margin:20px 0px;
}

/***************MESSAGE*************/

.has-error{
	border:1.5px solid red;
	border-radius:5px;
	
}

.error-help-block{
	color:red;
	margin-top:5px;
	font-weight: bold;	
	font-size:0.9em;
}

span.alert-success,
span.alert-error,
span.alert-danger{
	display:table;
	margin:10px auto;
	padding-left:20px;
	padding-right:20px;
	font-size:1.2em;
	font-weight: bold;
}

.message{
	position:fixed;
	left:0;
	right:0;	
	margin:0 auto;
	top:-100px;
	z-index:200;
	pointer-events: none
}

.message span.alert-success{
	background:#17202A;
	color:#FFF;
}

.message span.alert-danger{
	background:#CD5C5C;
	color:#FFF;
}

/*** ADD GROUP***/

.group .form-group{
	margin-top: 5px;
}

.group input{
	margin-bottom:10px;
}

.group .col{
	padding-left: 2px;
	padding-right: 5px;
}

.group .remove{
	font-size:1.2em;
	vertical-align: middle;
	padding:5px 5px;
	margin-top:4px;
	border-radius: 4px;
}

.add-group-btn{
	font-size:1.3em;
	margin-left: 10px;
	margin-right: 5px;
	vertical-align: middle;
}

.add-group-btn span{
	font-family: 'Comfortaa';
	font-size:0.8em;
}

/** NAV TOGGLE***/
#toggle-nav{
	cursor:pointer;
}




/**** SETTING ****/
div#content{
	overflow:hidden;
	position:relative;
	width:100%;
	height:100%;
}

div#content div#sidebar{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:200px;
	background:#17202A;
	color:#FFF;
}

div#content div#main{
	position:absolute;
	top:0;
	left:200px;
	right:0;
	bottom:0;
	transition: width 0.3s ease;
	height:100%;
	padding:0;
	background:#FFF;
}

.action-btns{
	text-align:right;
	padding-right:10px;
	margin-top:10px;
}

.action-btns .btn{
	background-color:#17202A;
	color:#FFF;
	margin:5px 0px;
}

input[type="submit"],
button[type="submit"]{
	background-color:#17202A;
	color:#FFF;
}

form{
	padding:10px 10px;
}

form .action{
	text-align:center;
}

form .action button[type="submit"]{
	background:#17202A;
	color:#FFF;
	font-weight:bold;
	text-transform:uppercase;
}

form .form-section-title{
	display:block;
	font-size:1em;
	font-weight:bold;
	margin:10px 0px 20px 0px;
	clear:both;
	text-transform:uppercase;
	padding:10px 5px;
	text-decoration:underline;
}

form .form-sub-section-title{
	display:block;
	font-size:0.95em;
	font-weight:bold;
	margin:10px 0px 10px 0px;
	clear:both;
	text-transform:uppercase;
	padding:5px 5px;
	text-decoration:underline;
}

form .col .col .col {
	padding:0;
}


.action-btns .btn .fa{
	width:10px;
	text-align:center;
	margin-right:4px;
}

/****SIDEBAR***/

#sidebar.collapsed{
	left:0px;
	width:80px !important;
	text-align:center;
}

#sidebar.collapsed .company{
	margin-top:10px;
	margin-bottom:15px;
	border-bottom: 0px;
}

#sidebar.collapsed .company .name{
	display:none;
}

#sidebar.collapsed .company i.fa{
	font-size: 2.4em !important;
	display:block !important;
	margin:2px auto !important;
	text-align: center;
	width:auto !important;
}


#sidebar.collapsed  ul#nav{
	width:100%;
}

#sidebar.collapsed ul#nav li{
	display:block;
	width:100%;
	margin:0;
	margin-bottom: 10px;
	text-align:center;
	padding:8px 2px;
}


#sidebar.collapsed ul#nav li a{
	width:100%;
	display:block;
	font-size:0.8em;
	text-align:center;
	padding:0;
}


#sidebar.collapsed ul#nav li a i.fa{
	display: block !important;
	font-size:2.4em !important;
	margin:5px auto 10px auto !important;
}


#main.collapsed{
	left:80px !important;
}


/******NAV COLLAPSE******/
#sidebar.open
{
	transform:translateY(0) !important;
}





/*****ANALYTICS*****/

.analytics .row{
	margin-top:10px;
	margin-bottom:10px;
}

.analytics .row a{
	text-decoration: none;
}

.analytics .cell{
	background:#FFF;
	color:#17202A;	
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
	padding:10px 0px;
	margin:10px 0px;
	text-align: center;
}

.analytics .cell .fa{
	font-size:2em;
	font-weight: bold;
	margin:4px 0px;
}

.analytics .cell .text,
.analytics .cell .num{
	margin:2px 0px;
	text-align:center;
}

.analytics .cell .num{
	font-size:1.8em;
	font-weight:bold;
	margin-top:4px;
}

.analytics .cell .text{
	font-size:1em;
	margin-top:5px;
}

.analytics .chart{
	background:#FFF;
	color:#17202A;	
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
	padding:10px 0px;
	margin:10px 0px;
	text-align: center;
	border-radius: 5px;
	height:300px;	
}

.analytics .chart text tspan{
	font-family: 'Comfortaa';
}

/****SIDEBAR**/

div#content div#sidebar{
	overflow-x: hidden;
	overflow-y: auto;
}


div#content div#sidebar::-webkit-scrollbar {
    width: 0.1em;
	 -webkit-appearance: scrollbartrack-vertical;
	 
}
 
div#content div#sidebar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
div#content div#sidebar::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


div#content div#sidebar .company{
	text-align:left;
	font-weight:bold;
	font-size:1.4em;
	padding-left:10px;
	letter-spacing:0.5px;
}

div#content div#sidebar .company .fa{
	margin-right:10px;
	float:none;
	clear:both;
	font-size:1.2em;
}

div#content div#sidebar #user{
	text-align:center;
	color:#F2F3F4;
}

div#content div#sidebar #user .fa{
	font-size:4em;
	margin-top:10px;
}

div#content div#sidebar #user .welcome,
div#content div#sidebar #user .name{
	font-size:1.1em;
	margin:2px 0px;
	font-weight:bold;
}


div#content div#sidebar #user .welcome{
	margin-top:10px;
	margin-bottom:4px;
}


div#content div#sidebar ul#nav{
	padding:10px 10px;
}

div#content div#sidebar ul#nav li{
	display:block;
	text-align:left;
	padding:10px 4px;
}

div#content div#sidebar ul#nav li .fa{
	font-size:1.2em;
	margin-right:10px;
	text-align:center;
	width:30px;
}

div#content div#sidebar ul#nav li a{
	color:#FFF;
}

/****MAIN****/
div#content #main .placeholder{
	overflow-x:hidden;
	width:100%;
	height:100%;
	padding-bottom:100px;
}

div#content #main .placeholder::-webkit-scrollbar {
    width: 1em;
	 -webkit-appearance: scrollbartrack-vertical;
	 
}
 
div#content #main .placeholder::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
div#content #main .placeholder::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}





/***USERS****/

.users{
	margin-top:20px;
}

.users .user{
	min-height:110px;
	height:110px;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);	
	margin-bottom: 20px;	
	position: relative !important;
	padding:10px 0px;
	font-size:0.9em;
}

.users .user .col{
	min-height:100px;
	height:100px;
}

.users .user .col:first-child{
	text-align: center;
}

.users .user .col:first-child .fa{
	font-size:4.5em;
	vertical-align: middle;
	margin-top: 10px;
}

.users .user h3{
	margin-top:2px;
	margin-bottom:2px;
}

.users .user .name{
	font-size:1.1em;
	font-weight: bold;
	margin-bottom:5px;
}

.users .user .gst,
.users .user .email,
.users .user .contact{
	font-size:1em;
	margin-top: 6px;
	font-weight: bold;	
}

.users .user .action{
	position:absolute !important;
	bottom:5px;
	right:5px;
	text-align: right;
	margin-top:10px;
		
}

.users .user .action a{
	padding:2px 5px;
	font-size:1.1em;
	color:#FFF;
	width:25px;
	text-align: center;
}


/***INFO****/

 .tab-pane .info{
	min-height:100px;
	height:100px;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);	
	margin-top:10px;
	position: relative !important;
	padding:10px ;
	font-size:0.9em;
}

 .tab-pane  .info .name{
	font-size:1.1em;
	font-weight: bold;
	margin-bottom:5px;
}

.tab-pane  .info .date{
	font-size:1em;
	font-weight: bold;
	margin-bottom:5px;
}

 .tab-pane .info .action{
	position:absolute;
	right:10px;
	text-align: right;
	margin-top:5px;
		
}

 .tab-pane .info .action a{
	padding:2px 5px;
	font-size:1.1em;
	color:#FFF;
	width:25px;
	text-align: center;
}

/**LOCATIONS***/

#locations .tab-pane .info{
	min-height:50px;
	height:50px;
}

#locations .tab-pane  .info .name,
#locations .tab-pane  .info .action{
	display:inline-block;
}


/**SLOTS***/

.tab-pane .info.slot{
	min-height:110px;
	height:110px;
}

.tab-pane  .info.slot .name,
.tab-pane  .info.slot .date,
.tab-pane  .info.slot .action{
	display:block;
}

.tab-pane  .info.slot .date{
	font-family: 'Comfortaa';
	letter-spacing: 1px;
}

.tab-pane  .info.slot .action{
	margin-top:10px;
}


/**SLOT STATUS***/

.tab-pane .info.slot-status{
	min-height:50px;
	height:50px;
}

.tab-pane  .info.slot-status .name,
.tab-pane  .info.slot-status .action{
	display:inline-block;
}

/***TABLE****/
td.selected{
	background:#73797F !important;
	color:#FFF;
	font-size:bold;
}

#orders-table{
	margin-top:10px;

}

#orders-table th:nth-child(3),
#orders-table td:nth-child(3) {
  position: sticky;
  left: 0;
  background-color: #ddd;
}

#orders-table th:nth-child(3){
    background-color:#444;
    color:#FFF;
}

#order-data{
    overflow-x:scroll;
}

#print-order-action-modal .show-column{
	color:#17202A;
	background:#FFF;
	margin:2px 5px;
	border-radius:5px;
	display:inline-block;
	padding:3px 8px;
	text-align: center;
}

#print-order-action-modal .show-column.keep{
	background:#17202A;
	color:#FFF;
}

#order-action .fa{
	font-size:3em;
	margin-left:10px;
	position:fixed;
	bottom:10px;
	right:30px;
	color:#17202A;
	animation: bounce 1s infinite alternate;
  	-webkit-animation: bounce 1s infinite alternate;
}

#delete-order-action .fa{
	font-size:3em;
	margin-left:10px;
	position:fixed;
	bottom:10px;
	right:80px;
	color:#17202A;
	animation: bounce 1s infinite alternate;
  	-webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

/***** MESSAGES ******/

section#messages .info{	
	 width: 25.303%; /* 300px */
	 float: left; /* 15px 30px */
	 margin: 10px 10px; /* 15px 30px */
	 overflow:hidden;
	 color:#000;
	 padding-top:5px;
	 padding-bottom:5px;
	border:8px solid #FFF;
	box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .20);
	transition:all  0.5s;
}

section#messages .name{
	font-weight: 'Comfortaa';
}

section#messages .date{
	text-align: right;
	text-decoration: underline;
}

section#messages .info h3,
section#messages .info h2,
section#messages .info h4{	
	font-size:0.9em;
}

/**** SEND MESSAGE DIALOG *****/
#send-message-dialog{

}

#send-message-dialog form div#contacts{
	background:#F7F7F7;
	padding:5px 15px;
	border-radius:2px;
	margin-bottom:10px;
	font-size:1.1em;
}

#send-message-dialog form div#contacts .contact{
	display:inline-block;
}

#send-message-dialog label{
	border-radius: 4px;
	padding:4px 5px;
	border:0.2px solid #CCCC;
	background:#FFF;
	font-size:0.9em;
	color:#383838;
	margin:5px 5px;
}

#send-message-dialog label span{
	text-align: right;
}

#send-message-dialog label .fa{
	font-size:1em;
}

#send-message-dialog .tab-content .contact{
	display:inline-block;
}

#send-message-dialog .tab-content label{
	border-radius: 4px;
	padding:4px 5px;
	border:1px dotted #000;
	background:#FFF;
	font-size:0.9em;
	color:#383838;
	margin:5px 5px;
}

#send-message-dialog #contacts span.label{
	font-size:0.9em;
	color:#000;
	letter-spacing:1px;
	text-decoration: underline;
}

#send-message-dialog #contacts span.label::after{
	content:' :';
}

/**** VIEW MESSAGE *****/

#messages  .message-info .recipient {
	border-radius: 4px;
	padding:4px 5px;
	border:1px dotted #000;
	background:#FFF;
	font-size:0.9em;
	color:#383838;
	margin:5px 5px;
}

#messages  .message-info .recipients{
	margin-top:10px;
}

#messages  .message-info .head{
	text-decoration: underline;
	font-size:1em;
	font-weight: bold;
}

@media print{
	body *{
		visibility: hidden;
	}

	.print, .print *{
		visibility: visible;
	}
}

span[contenteditable="true"]{
	padding:5px 5px;
}