@import "bootcards-mobile-shared.scss";

$navbar-height: 44px;
$navbar-height-phone-landscape: 32px;
$footer-height: 50px;
$footer-height-phone-landscape: 44px;

html, body {
  height: 100%;
  /*overflow-y: scroll;*/
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body {
	background-color: #efeff4;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding-top: $navbar-height;
	color: black;
	background: #efeff4;
	
	@media (orientation:landscape) and (max-width:767px) {
		padding-top: $navbar-height-phone-landscape;	
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
}

a {
	color: #007aff;
}

.col-sm-6 {
	min-height:100%; /* needed on iOS for the disabled rubberband */
}


/* OFFCANVAS LIST FOR TABLET PORTRAIT MODE */

.offcanvas-list-title {
	background: rgba(247,247,247,.98);
	height: 45px;
	text-align: center;
}


/* BUTTONS */

.btn,
.btn:hover,
.btn:active,
.btn:focus,
.btn-group.open .dropdown-toggle, 
.open>.dropdown-toggle.btn {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	font-size: 15px;	
	color: #007aff;
	padding-left: 5px;
	padding-right: 5px;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	margin: 0;
	text-decoration: none;

  &:hover,
  &.active {
  	opacity: 0.5;
  }	
}

.btn-xs {
	font-size: 10px;
	line-height: 20px;
}

.btn-link {
	border: 0;
}

.btn-primary,
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
  color: #007aff;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
	color: #d43f3a;
}

.btn-success,
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
	color: #4cae4c;
}

.btn[disabled] {
	background-color: transparent;
	border-color: transparent;
}


/* NAVBAR */

.navbar-fixed-top {
	right: 0;
	left: 0;
	z-index: 10;
	height: $navbar-height;
	min-height: $navbar-height;
	padding:0;
	border-bottom: 0; 
	box-shadow: none;
	
	@media (orientation:landscape) and (max-width:767px) {
		height: $navbar-height-phone-landscape;
		min-height: $navbar-height-phone-landscape;		
	}
  
  > .container,
  > .container-fluid {
  	padding: 0;
  	/*display: -webkit-flex;
  	display: flex;
  	-webkit-justify-content: center;
  	justify-content: center;
  	-webkit-align-items: center;
  	align-items: center;*/

	  .navbar-header {
	  	float: none;
	  }
	
	  .navbar-brand,
	  .navbar-brand:hover {
	  	padding: 0;
	  	font-size: 17px;
	  	font-weight: 500;
	  	line-height: $navbar-height;
	  	text-align: center;
	  	white-space: nowrap;
	  	height: $navbar-height;
	  	float: none !important;
	  	display: block;
	  	margin: 0;
	  	
	  	@media (orientation:landscape) and (max-width:767px) {
				line-height: $navbar-height-phone-landscape;
				height: $navbar-height-phone-landscape;	  	
		  }
	  }

		.navbar-nav {
			margin: 0;	
		}
	  
	  .navbar-left {
		  position: absolute;
		  left: 0;
	  }
	  
	  .navbar-right {
		  position: absolute;
		  right: 0;
	  }
    
    .navbar-nav>li>a,
	  .btn,
	  .btn:hover {
	  	font-size: 16px;
	  	z-index: 20;
	  	padding: 0 15px;
	  	line-height: $navbar-height;
	  	border: 0;
	  	font-weight: 400;
	  	opacity: 1;
	  	
	  	@media (orientation:landscape) and (max-width:767px) {
				line-height: $navbar-height-phone-landscape;		  	
		  }
	  	
	  	i {
		  	vertical-align: 0;
	  	}
	  }
	  
	  .navbar-text {
			font-size: 12px;
			line-height: $navbar-height;
			margin-top: 0;
			margin-bottom: 0;

	  	@media (orientation:landscape) and (max-width:767px) {
				line-height: $navbar-height-phone-landscape;	  	
		  }			
			
	  }
  }
}

/* Navbar Default Color Scheme */

.navbar-default {
	background-color: rgba(247,247,247,.98);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);

  .navbar-brand {
    color: black;
  }
	
	.navbar-nav>li>a {
		color: #007aff;
	}
}

/* Navbar Inverse Color Scheme */

.navbar-inverse {
  background-color: rgba(50,50,50,.95);
  
  .navbar-brand,
  .navbar-text {
    color: white;
  }
  .navbar-nav>li>a {
    color: white;
  }
}



/* SIDE MENU */

.offcanvas {
  margin-top:45px;
}




/* CARDS */

.panel {
	box-shadow: none;
	border-radius: 0;
	border: 0;
}

.bootcards-cards .panel {
	margin-bottom: 15px;
}

.panel-default > .panel-heading,
.panel-default .panel-heading {
	background: transparent;
	padding-top: 3px;
	padding-bottom: 3px;
}

.panel-title {
	font-size: 14px;
	text-transform: uppercase;
	color: #8f8f94;
	font-weight: 400;
	margin: 0;
	padding: 8px 0;
	line-height: 20px;
}

.panel-heading .btn,
.panel-heading .btn-group .btn {
	height: 29px;
	font-size: 15px;
	text-shadow: none;
	padding-right: 0;
	padding-left: 0;
	margin-left: 15px;
}



/* CALENDAR */

.bootcards-calendar .fc-header .fc-button {
	color: #007aff;
}



/* MODALS */

@media (max-width:767px) {
	.modal-dialog {
		min-height: 100%;
	}
	.modal-dialog {
		margin: 0;
	}
	.modal-content {
		height: 100%;
	}
}

.modal-content {
	box-shadow: none;
	border-radius: 0;
	border: 0;
	height: 100%;
}

.modal-header {
	height: 44px;
	min-height: 44px;
	padding-right: 10px;
	padding-left: 10px;
	border-bottom: 0;
	background-color: rgba(247,247,247,.98);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);
	box-shadow: 0 0 1px rgba(0,0,0,.85);	
	padding: 0 10px;
}

.modal-header .btn {
	line-height: 32px;
	font-size: 16px;
	border: 0;
	z-index: 1;
}

.modal-title {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: block;
	padding: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 44px;
	color: #000;
	text-align: center;
	white-space: nowrap;
	z-index: 0;
}

.modal-body {
	padding: 15px;
}

.modal-footer {
	padding: 10px 15px;
	border-top: 1px solid #ddd;	
	margin-top: -1px;
}



/* LISTS */

.list-group {
	box-shadow: none;

  .list-group-item {
  	border-left: 0;
  	border-right: 0;
  	line-height: 24px;

    &:first-child {
    	border-top: 0;
    }

    label {
    	color: #007aff;
    	display: block;
    	font-size: 14px;
    	line-height: 14px;
    	font-weight: normal;	
    }
    
    .list-group-item-heading {
    	font-size: 17px;
    	font-weight: normal;
    	display: block;
    	color: black;
    } 

    .list-group-item-text,
    &.active .list-group-item-text, 
    &.active:hover .list-group-item-text, 
    &.active:focus .list-group-item-text {
    	color: #999;
    	font-size: 14px;
    	font-weight: normal;	
    }     
  }

  a.list-group-item {
  	font-size: 17px;
  	font-weight: normal;
  	color: black;
  	line-height: 24px;
  	padding-right: 25px;

    &.active, 
    &.active:hover, 
    &.active:focus {
    	background: #e5e5e5;
    	border-color: #DDD;	
    	text-shadow: none;
    	color: black;
    }
    
    &:hover {
    	background: white;
    }  
  }
}


/* List - Search Form */

.bootcards-list form, 
.bootcards-list .search-form {
	margin-left: 0;

  .form-group {
    padding: 0;
  }

  input {
  	border: 0;
  }
  
  i.fa-search {
  	top: 10px;
  }
  
  @media (min-width:768px) {
  	input {
  		height: 34px;
  	}
  	i.fa-search {
  		top: 9px;
  	}
  }	
}





/* FORMS */

.form-group {
	border-bottom: 1px solid #ddd;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	
	&:last-of-type {
  	border-bottom: 0;
	}

  .form-control {
    padding-left: 0;
    padding-right: 0;
  }  
}

 

.form-horizontal {
  .form-group {
    &:first-of-type {
    	margin-top: -15px;
    }
    
    &:last-child {
    	margin-bottom: -15px;
    }    

    div {
    	padding: 0;
    }

    .control-label {
    	color: #007aff;
    	font-weight: normal;
    	font-size: 13px;
    	margin-top: 2px;
    	white-space: nowrap;
    	padding-right: 15px;
    	padding-top: 7px;

      &:first-child {
      	padding-left: 0;
      }
    }
    
    .btn {
      padding-left: 0;
      padding-right: 0;
      font-size: 14px;
    }
  }
}

select, 
textarea,
input[type="text"], 
input[type="search"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="tel"], 
input[type="color"], 
.input-group,
.form-control {
	box-shadow: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	border-color: transparent;
	-webkit-appearance:none;
	color: black;
}

form .btn label {
	font-size: 14px;
	padding-left: 6px;
	font-weight: normal;
	text-align: left;
	display: block;
}

.bootcards-clearinput {
	top: 9px;
}

/* Radio Buttons */

.bootcards-radio-buttons {
	.btn {
		border-color: #007aff;
		padding-left: 10px !important;
		padding-right: 10px !important;
		opacity: 1;
		
		&:hover,
		&:active,
		&.active {
			background: #007aff;
			color: white;
			-webkit-box-shadow: none;
		}
	}
}

/* Toggle – based on Ratchet.css */

.bootcards-toggle {
  margin-top: 1px;
  float: right;
  width: 47px;
  border: 2px solid #e6e6e6;
  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
  -webkit-transition-duration: .2s;
  -webkit-transition-property: box-shadow, border;

  .bootcards-toggle-handle {
    border: 1px solid rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
    -webkit-transition-property: -webkit-transform, border, width;
  }
  
  &:before {
    display: none;
  }
  
  &.active {
    background-color: transparent;
    border: 2px solid #4cd964;
    -webkit-box-shadow: inset 0 0 0 13px #4cd964;

    .bootcards-toggle-handle {
      -webkit-transform: translate3d(17px, 0, 0);
    }
    .bootcards-toggle-handle {
      border-color: #4cd964;
    }
  }
}



/* FOOTER */

.navbar-fixed-bottom {
	box-shadow: 0 -1px rgba(0,0,0,0.2);
	height: $footer-height;
	text-align: center;
	border: 0;
	background-color: #f9f9f9;
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);
	box-shadow: 0 0 1px rgba(0,0,0,.85);	

  .btn-group {
  	max-width: 320px;
  	width: 320px;
  	font-size: 0;

    @media (min-width:401px) {
  		display: block;
  		width: auto;
  		max-width: none;
    }
    
    .btn,
    .btn:hover,
    .btn:active,
    .btn:focus {
    	float: none;
    	height: $footer-height;
    	text-align: center;	
    	line-height: 1;
    	font-size: 10px;
    	font-weight: 400;
    	padding-top: 7px;
    }

    .btn-default {
    	color: #929292;

      &:active,
      &:hover {
      	color: #007aff;
      }
    }

    .btn i {
    	display: block;
    	margin: 0;
    	margin-bottom: 2px;
    	font-size: 24px;
    }   
  }
}



/* Fixed buttons */

.navbar-fixed-bottom .btn.pull-left,
.navbar-fixed-bottom .btn.pull-left:hover,
.navbar-fixed-bottom .btn.pull-right,
.navbar-fixed-bottom .btn.pull-right:hover {
	font-size: 16px;
	position: relative;
	z-index: 20;
	padding: 0;
	line-height: $footer-height;
	border: 0;
	font-weight: 400;
}

/* iPhone Landscape */
@media (orientation:landscape) and (max-width:767px) {
	.navbar-fixed-bottom {
		height: $footer-height-phone-landscape;
	}
	.navbar-fixed-bottom .btn-group .btn,
	.navbar-fixed-bottom .btn-group .btn:hover,
	.navbar-fixed-bottom .btn-group .btn:active,
	.navbar-fixed-bottom .btn-group .btn:focus {
		height: $footer-height-phone-landscape;
		padding-top: 5px;
	}
	.navbar-fixed-bottom .btn.pull-left,
	.navbar-fixed-bottom .btn.pull-left:hover,
	.navbar-fixed-bottom .btn.pull-right,
	.navbar-fixed-bottom .btn.pull-right:hover {
		line-height: $footer-height-phone-landscape;
	}
	.bootcards-wrapper, body > .container > .row {
		padding-bottom: $footer-height-phone-landscape;
	}
	.bootcards-az-picker {
		padding-bottom: $footer-height-phone-landscape;
	}
}