@import "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,500";

/* Color Palette */
/* 
  Keet Blue:      #14213D  rgb(20,33,61)
  Keet Red:       #C1292E  rgb(193,41,46)
  Yellow:         #FCA311  rgb(252,163,17)
  Green:          #29C251  rgb(41,194,81)
  Background:     #F1F2F4  rgb(241,242,244)   [Keet Blue with 94% transparency]
*/

/* General Styles */

.hover-enlarge, .card, .add-car, .add-driver{
  transition: all 0.2s ease-in-out;
}

/* Add smooth transition when scrolling */
html {
  scroll-behavior: smooth;
}

::-moz-selection {background-color: #F3D5D6;}
::selection {background-color: #F3D5D6;}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 16px;
  background-color: #F1F2F4;
  color: #14213D;
}

.navbar{
  box-shadow: 0 0.1rem 0.5rem 0 rgba(20,33,61,0.1);
}

.navbar-content {
  background-color: white;
  height: 60px;
  color: #14213D;
}

.navbar-brand>img{
  width: auto;
  height: 1.75rem;
}

.container {
  min-width: 20rem !important; /* To preserve view and container size in smaller devices when sidebar menu is open*/
}

p {
  margin-bottom: 0;
}

.loading-animation{
  width: 7.5rem;
  height: auto;
  display: block;
  margin: 0 auto;
  visibility: hidden; /* Then made "visible" by on-page js after a small delay */
}

.loading-animation-visible{
  width: 7.5rem;
  height: auto;
  display: block;
  margin: 0 auto;
}

.loading-animation-mini{
  width: 4rem;
  height: auto;
  display: block;
  margin: 0 auto;
  visibility: hidden; /* Then made "visible" by on-page js after a small delay */
}

.loading-animation-mini-visible{
  width: 4rem;
  height: auto;
  display: block;
  margin: 0 auto;
}

footer{
  background-color: white;
  color: #14213D;
  box-shadow: 0 -0.1rem 0.5rem 0 rgba(20,33,61,0.1);
  padding: 1rem;
  text-align: center;
}

/* Button styles */
button>a.hover-enlarge{
  color:white;
}

a.hover-enlarge:hover{
  text-decoration: none;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(20,33,61,0.1);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
  -webkit-transform: scale(1.04);
  transform: scale(1.04);

}

a.button, .datepicker-button{
  display: inline-block;
  background-color: #C1292E;
  color: white!important;
  font-weight: bolder;
  font-size: 0.85rem;
  border-radius: .5rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}

a.button.button-disabled{
  background-color: #D0D3D8 !important;
  pointer-events: none;
  cursor: default;
}

/* Live Page map - making it smaller on mobile devices*/
.live-page-map{
  width:100%;
  height:calc(100vh - 146.375px);
}

@media only screen and (max-width: 767px) {
  .live-page-map{
    height:calc(67vh - 60px);
  }
}
/* Live Page map / End */


/* Sidebar */
#sidebar-wrapper{
  background-color: #14213D;
  box-shadow: 0 0 1rem 0 rgba(20,33,61,0.05);
  color: white;
}

#profile{
  border: none;
}

.profile-picture{
  object-fit: cover;
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  border: 1px solid white;
}

.profile-name{
  font-size: 1.2rem;
  font-weight: bold;
}

.list-group-item{
  background-color: transparent;
  color: white;
  font-weight: 400;
  padding: 0.625rem 0.875rem;
  border: none; /* Overwrite default */
  border-radius: 10px !important;
  transition: all 0.25s ease-in-out;
  margin: 1px 0;
}

.list-group-item.selected{
  background-color: #D0D3D8;
  color: #C1292E;
  font-weight: 700;
}

.list-group-item:hover{
  color: #14213D;
  text-decoration: none;
  transform: scale(1.02);
  background-color: #E7E8EB;
}

.list-group-item.selected:hover{
  color: #C1292E;
}

/* Dashboard - General */
.section-header{
  margin-bottom: 0.5rem;
}

.section-header > span{
  border-bottom: 2px solid #A1A6B1;
  border-radius: 2px;
  padding: 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.dashboard-section,
.card,
.card-fixed,
.monitoring-section,
.keet-safe-section,
.locate-section,
.car-management-section,
.sessions-section,
.my-profile-section {
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(20,33,61,0.05);
  color: #14213D !important;
  min-width: 10rem;
}

.card{
  box-shadow: 0 0.25rem 0.5rem 0 rgba(20,33,61,0.1); /* Keep stronger shadow for cards to suggest that cards are interactive */
}

.card, .add-car, .add-driver{
  max-width: 18rem;  /* max-width, together with "mx-auto" class for cards allows for cards to be smaller and centered in mobile screens */
}

.card:hover,
.add-car:hover,
.add-driver:hover,
.card-fixed:hover {
  cursor: pointer;
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

.driver-row,
.user-row{
  border-radius: 1rem;
  cursor: pointer;
  margin: 1px 0;
}

.driver-row:hover,
.user-row:hover{
  background-color: #F8E9EA;
}

.driver-row-picture,
.user-row-picture{
  width:3rem;
  height:3rem;
  border-radius: 50%;
  border: 2px solid #14213D;
  object-fit: cover;
}

.driver-selected, .user-selected,
.driver-selected:hover, .user-selected:hover{
  background-color: #CD5458;
  color: white;
}

.car-menu-option,
.person-menu-option,
.company-menu-option,
.submenu-option {
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.25rem 0.625rem;
  font-weight: 500;
  display: inline-block;
}

.car-menu-option:hover,
.person-menu-option:hover,
.company-menu-option:hover,
.submenu-option:hover{
  background-color: #D0D3D8;
  transition: all 0.5s ease-in-out;
}

.car-menu-option.selected,
.person-menu-option.selected,
.company-menu-option.selected,
.submenu-option.selected{
  font-weight: bold;
  /* border-bottom: 2px solid #C1292E; */
  background-color: #14213D;
  color: white;
}

.car-menu-option.selected:hover,
.person-menu-option.selected:hover,
.company-menu-option.selected:hover,
.submenu-option.selected:hover{
  color: white;
  transition: none;
}

/* Form and label styling */
.form-control{
  /* Overwriting default Bootstrap styles */
  color: #14213D !important;
  border: 1px solid #D0D3D8 !important;
  padding: 1.5rem 1.25rem 1.25rem 1.25rem;
}

.form-control:disabled,
.form-control[readonly]{
  background-color: #F1F2F4 !important; /* Making it white to improve label positioning */
}

.form-group{
  margin-bottom: 0.25rem !important; /* To prevent excessive spacing between two form inputs when moving the label into relative position */
}

.form-group>label {
  top: 0.625rem;
  left: 0.3125rem;
  position: relative;
  background-color: #A1A6B1;
  border: 1px solid #727A8B;
  color: white;
  font-weight: bold;
  padding: 0px 5px;
  font-size: 0.8em;
  border-radius: 0.375rem;
}

#select-car-container>.form-control{
  border: none !important; /* Remove border from selectpicker .form-control class */
}

/* Form and label styling / End */


/* (OLD) Locate Toggle */
/* .locate-toggle{
	width: 2.4rem;
	height: 1.2rem;
	background-color: #29C251;
	border-radius: 1.2rem;
	padding: 0.065rem;
	border: 0.05rem solid #313030;
	transition: all 250ms ease-in-out;
	display: inline-block;
	vertical-align: center;
}

.locate-toggle > .inner-circle{
	width: 1rem;
	height: 1rem;
	background-color: white;
	border-radius: 50%;
	transition: all 250ms ease-in-out;
}

.locate-toggle.active{
	background-color: #FF9808;
}

.locate-toggle.active > .inner-circle{
	margin-left: 1.2rem;
	background-color: white;
}

#locate{
	transition: all 250ms ease-in-out;
} */

/* Table and DataTable custom styles */
table > thead > tr > th{
  border-top: none !important;
  border-bottom: 1px solid #D0D3D8 !important;
  padding-top: 0.5rem !important;
}

table > tbody > tr:hover{
  background-color: #F8E9EA !important;
}

table > tbody > tr > td:first-of-type{
  border-radius: 1rem 0 0 1rem; /* Set round border radius for element on the left of each row */
}

table > tbody > tr > td:last-of-type{
  border-radius: 0 1rem 1rem 0; /* Set round border radius for element on the right of each row */
}

table > tbody > tr > td{
  border-top: none !important;
}

/* .table-data:hover{
  transform: scale(1.04);
} */

.dataTables_length, .dataTables_info{
  text-align: left;
  padding-left: 0.5rem;
}

.dataTables_filter, .dataTables_paginate {
  padding-right: 0.5rem;
}

.dataTables_length>label>.dropdown{
  width: auto !important;
}

.page-item > .page-link{
  color: #CD5458;
  font-weight: 400;
}

.page-item > .page-link:hover{
  background-color: #F8E9EA !important;
}

.active > .page-link{
  background-color: #CD5458 !important;
  border-color: #CD5458 !important;
  color: white !important;
}

.active > .page-link:hover{
  background-color: #CD5458 !important;
}

.dataTables_paginate>ul>li>a:focus{
	outline: #C1292E;
	box-shadow: 0 0 0rem 0 #C1292E;
}

.dataTables_filter>label>input:focus{
  outline: none !important;
  border: none !important;
	box-shadow: 0 0 0rem 0 #C1292E !important;
}

/* Remove annoying margin that creates annoying scrolling on x-axis overflow */
.dataTables_wrapper>.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.dataTables_wrapper>.row:nth-of-type(2)>.col-sm-12{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Remove annoying margin that creates annoying scrolling on x-axis overflow / End*/


/* =========================================================
Custom Bootstrap Select styles consistent with website theme
========================================================= */

.bootstrap-select > .btn {
	border: 1px solid #D0D3D8;
}

.bootstrap-select:hover{
	background-color: #F1F2F4;
}

.form-control>.btn-light.dropdown-toggle {
  background-color: white !important;
}

.form-control>.btn-light.dropdown-toggle:hover {
  background-color: white !important;
}

/* Change style of selected item*/
.bootstrap-select .dropdown-menu > .selected > a{
	background-color: #CD5458;
	color: white;
	font-weight: bold;
}

/* Change color when there are chosen other select options when select menu is closed */
.bootstrap-select .dropdown-toggle .filter-option {
	color: #14213D;
}

/* Set the color of all options when the dropdown menu is opened */
.bootstrap-select .dropdown-menu>li>a {
	color: #14213D;
}

/* Change color when hovering on an option while dropdown menu is opened */
.bootstrap-select .dropdown-menu>li>a:hover:not(:focus) {
	background-color: #F8E9EA;
}

/* Keep same color when hovering on the selected option while dropdown menu is opened */
.bootstrap-select .dropdown-menu>.selected>a:hover:not(:focus) {
	background-color: #CD5458;
}

/* Very important to remove :focus effects on display */
.bootstrap-select .dropdown-menu>li>a:focus{
  outline: #CD5458;
	box-shadow: 0 0 0rem 0 #CD5458;
	background-color: transparent;
}
.bootstrap-select .btn:focus {
  outline: none !important;
	box-shadow: 0 0 0rem 0 #CD5458 !important;
}

/* =========================================================
Custom Bootstrap Select styles // End
========================================================= */


/* Report Buttons */
.report-buttons{
  box-shadow: 0 0.25rem 0.5rem 0 rgba(20,33,61,0.1);
  border-radius: 0.5rem;
  border: none
}

.btn.report-option{
  background-color: white;
  border-radius: 0.5rem; /* Overwrite Bootstrap default */
}

input[type=text]:focus{
  outline-width: 0;
}

.report-option.active{
  background-color: #CD5458;
  color: white;
}

.btn.focus{
  box-shadow: /*0 0 0 0.2rem #DA8082*/none !important;
}

/* Overwrite Daterangepicker style */
.daterangepicker{
  font-family: Lato !important;
}

.daterangepicker .ranges>ul {
  min-width: 10rem;
}

.daterangepicker .ranges li.active {
  background-color: #CD5458 !important;
}

.daterangepicker td.in-range {
  background-color: #F8E9EA !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #CD5458 !important;
}

/* Plate info */
.plate-background{
  display:table;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(20,33,61,0.05);
  border-radius: 0.25rem;
  background-image: url('/static/dashboard/images/Plate_IT.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size: cover;
  width: 200px;
  height: 42.5px; /* Width and height are necessary to keep Plate div in the right size*/
}

.plate-background:hover{
  text-decoration: none;
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

.plate-number{
  display:table-cell; /* To keep it aligned in the middle */
  vertical-align: middle;
  font-size: 1.75rem;
  letter-spacing: 0.2rem;
}


/* ====================
  OLD -- Flip card 
*/
.data-scene {
  perspective: 1500px;
}

.data-card {
  transition: transform 1s;
  transform-style: preserve-3d;
  position: relative;
  min-height: 300px;
}

.data-card.flipped {
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.data-card-content {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.data-card-back {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.data-card-chart{
  height: 300px !important;
  width: auto;
}

/* ====================
  Flip card / End 
*/


/* Monitoring advices */
#monitoring-overview .advice{
  font-size: 0.9rem;
}

/* (OLD) Available Keet devices to be displayed in car-management and my-profile */
/* .available-keet-device,
.active-keet-device,
.active-car,
.paused-keet-device,
.paused-car{
  border-radius: 0.5rem;
  border: 0.2px solid #14213D;
}

.available-keet-device:hover{
  transform: scale(1.04);
  background-color: #f0f0f0;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(20,33,61,0.2);
  cursor: pointer;
}

.active-keet-device:hover,
.active-car:hover,
.paused-keet-device:hover,
.paused-car:hover {
  transform: scale(1.04);
  color: white;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(20,33,61,0.2);
  cursor: pointer;
}

.active-keet-device:hover,
.active-car:hover {
  background-color: #29C251;
}

.paused-keet-device:hover,
.paused-car:hover {
  background-color: #C1292E;
} */

/* (OLD) Vehicle card add-ins --> Modificare in cards */
/* .vc-ic-info, .vc-ic-action{
  font-size: 0.8rem;
  background-color:white;
  color: #14213D !important;
  border-radius: 0.25rem;
  box-shadow: 0px 5px 10px 0px rgba(20,33,61,0.2);
}

.vc-buttons > button,
.vc-buttons > a {
  display: block;
  text-align: center;
  background-color: #313030;
  color: white;
  font-weight: bolder;
  border: none;
  margin: 0.25rem auto;
  border-radius: .25rem;
} */

/* Animation for  blinking icon */
@keyframes record-blink {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0.33;
  }

  60% {
    transform: scale(1);
    opacity: 1;
  }
  95% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation for  blinking icon */
@keyframes intermittent-blink {
  0% {
    transform: scale(1);
    opacity: 0.33;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.33;
  }
}


.red-circle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  opacity: .25;
  background-color: #C1292E;
}

.blinking {
  -webkit-animation: record-blink 5s infinite;
  -moz-animation: record-blink 5s infinite;
  -o-animation: record-blink 5s infinite;
  animation: record-blink 5s infinite;
}

.blinking-balanced {
  -webkit-animation: intermittent-blink 2s infinite;
  -moz-animation: intermittent-blink 2s infinite;
  -o-animation: intermittent-blink 2s infinite;
  animation: intermittent-blink 2s infinite;
}
/* ---------------- */