/*
Author: Luís Miguel Rebelo
Author URI: https://luismrebelo.pt/

TABLE OF CONTENTS
01 - Reset
02 - Global
03 - General Layout
04 - Header
05 - Homepage
06 - Dashboard
07 - Login
08 - Profile
09 - Media Queries
*/

/* /////////////////////////////////////////////////////////////////////
//  01 - Reset
/////////////////////////////////////////////////////////////////////*/

/* /////////////////////////////////////////////////////////////////////
//  02 - Global
/////////////////////////////////////////////////////////////////////*/

.pace-progress {
  position: fixed;
  z-index: 2000;
  top:0;
  height: 5px;
  width: 0px;
  background: #007bff;
  animation-name: grow;
  animation-duration: 122s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes grow {
  100% { width: 100%; };
}

.text-success {
  color: #39DA8A!important;
}

.text-danger {
  color: #FF5B5C!important;
}

.text-primary {
  color: #5A8DEE!important;
}

.text-warning {
  color: #FDAC41!important;
}

#currentGroup { text-transform: capitalize; }
#currentSubGroup { text-transform: capitalize; }

/* /////////////////////////////////////////////////////////////////////
//  03 - General Layout
/////////////////////////////////////////////////////////////////////*/

/* /////////////////////////////////////////////////////////////////////
//  04 - Header
/////////////////////////////////////////////////////////////////////*/

/* /////////////////////////////////////////////////////////////////////
//  05 - Homepage
/////////////////////////////////////////////////////////////////////*/
.homepage .container {
    max-width: 960px;
}

.homepage .pricing-header {
    max-width: 700px;
}

.homepage .card-deck .card {
    min-width: 220px;
}

/* /////////////////////////////////////////////////////////////////////
//  06 - Dashboard
/////////////////////////////////////////////////////////////////////*/
html,
body.login {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body.login {
  padding-top: 56px;
}

@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.text-white-50 { color: rgba(255, 255, 255, .5); }

.bg-bomboleo { background-color: #004683; }

.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }

.datepicker {
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#getColabs .tile{
	width: 100%;
	background:#fff;
	border-radius:5px;
	box-shadow:0px 2px 3px -1px rgba(151, 171, 187, 0.7);
	float:left;
  transform-style: preserve-3d;
  margin: 10px 5px;
  color: #8A99B5;
  background-color: #272E48;
  border-color: #464D5C!important;
}

#getColabs .header{
	border-bottom:1px solid #ebeff2;
	padding:10px 0;
	text-align:center;
	color:#ffffff;
	font-size:600;
	font-size:20px;	
	position:relative;
}

#getColabs .banner-img {
	padding: 5px 5px 0;
}

#getColabs .banner-img img {
	width: 100%;
	border-radius: 5px;
}

#getColabs .dates{
	border:1px solid #ebeff2;
	border-radius:5px;
	padding:15px 0px;
	margin:10px 10px;
	font-size:16px;
	font-weight:600;	
  overflow:auto;
  background-color: #1A233A;
  color: #ffffff;
  font-size: 14px;
}

#getColabs .dates div{
	float:left;
	width:50%;
	text-align:center;
	position:relative;
}
#getColabs .dates strong,
#getColabs .stats strong{
	display:block;
	color:#adb8c2;
	font-size:11px;
	font-weight:700;
}
#getColabs .dates span{
	width:1px;
	height:40px;
	position:absolute;
	right:0;
	top:0;	
	background:#ebeff2;
}
#getColabs .stats{
  display: flex;
	border-bottom:1px solid #ffffff;
	color: #8A99B5;
  background-color: #272E48;
  border-color: #ffffff!important;
	overflow:auto;
	padding:10px 0;
	font-size:16px;
	font-weight:600;
}

#getColabs .stats div {
	flex: 1;
	text-align:center
}

#getColabs .stats div:first-child {
	border-right:1px solid #ebeff2;
}

#getColabs .stats div:nth-of-type(3){border:none;}

span.apexcharts-legend-text {
  font-size: 16px!important;
  line-height: 28px;
  color: #fff!important;
}

.apexcharts-xaxis-label, .apexcharts-yaxis-label {
  color: white!important;
  fill: white!important;
}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
  color: #FDAC41;
  font-weight: bolder;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.expired { color:#FF5B5C; font-weight: bolder; }

.dashboard {
  background-color: #1A233A;
}

.dashboard .card-body {
  color: #8A99B5;
  background-color: #272E48;
  border-color: #464D5C!important;
}

.dashboard .table {
  color: white;
  margin-bottom: 0;
}

.dashboard .table-striped tbody tr {
  background-color: #1A233A;
  color: #ffffff;
}

.dashboard .table-striped tbody tr:nth-of-type(odd) {
  background-color: #272E48;
  color: #ffff;
}

/* /////////////////////////////////////////////////////////////////////
//  07 - Login
/////////////////////////////////////////////////////////////////////*/
html,
body.login {
  height: 100%;
}

body.login {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.login .form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.login .form-signin .checkbox {
  font-weight: 400;
}
.login .form-signin .login .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.login .form-signin .login .form-control:focus {
  z-index: 2;
}
.login .form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.login .form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* /////////////////////////////////////////////////////////////////////
//  08 - Profile
/////////////////////////////////////////////////////////////////////*/

/* /////////////////////////////////////////////////////////////////////
//  09 - Media Queries
/////////////////////////////////////////////////////////////////////*/

@media (min-width: 1200px){
  .container, .container-lg, 
  .container-md, .container-sm, 
  .container-xl {
      max-width: 1200px;
  }
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #004683;
  color: white;
}

.btn-outline-primary {
  color: #004683;
  border-color: #004683;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #004683;
  border-color: #004683;
}

.btn-primary {
  color: #fff;
  background-color: #004683;
  border-color: #004683;
}

.btn-primary:hover {
  color: #fff;
  background-color: #004683;
  border-color: #004683;
}