/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

#main-contents {
   overflow: scroll !important;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito" , serif;
  /*font-family: 'IBM Plex Mono', monospace;*/
}


.logo-details{
  padding-left:10px;
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}

.logo-details .logo_name{
  color: #fff;
  font-weight: 600;
  padding-top:8px;
}

.nsection .text{
  display: inline-block;
  color: #11101d;
  font-size: 25px;
  font-weight: 500;
  margin: 18px
}


:root {
  --bg-global: #092762;
  --text-global: #ffffff;
}

.text-global
{
  color: var(--bg-global) !important;
}

.bg-global
{
  background-color: var(--bg-global) !important;
  color:white !important;
}
.bg-globalsec {
  background-color: #6b7da1 !important;
  color:white !important;
}

.bg-globalsuccess {
  background-color: #198754 !important;
  color:white !important;
}

.btn-global{
  border: solid 1px white;
  color: white;
}

.btn-outline-global {
  --bs-btn-color: var(--bg-global);
  --bs-btn-border-color: var(--bg-global);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bg-global);
  --bs-btn-hover-border-color: var(--bg-global);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bg-global);
  --bs-btn-active-border-color: var(--bg-global);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bg-global);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bg-global);
  --bs-gradient: none;
}

.jconfirm-buttons > button {
  width: 100px;
  height: 40px;
  background-color: #092762 !important;
  color:white !important;
}

.buttons-confirm {
  width: 100px;
  height: 40px;
  background-color: #6b7da1 !important;
  color:white !important;
}

/* Add a black background color to the top navigation */
.topnav {
  background-image: linear-gradient(to bottom, #F5F4F9 0%, #ECEAF3 100%);
  height: 50px;
  border-bottom: solid 1px #cccc;
  vertical-align: middle;
  overflow: hidden;
}

.topnav-button {
    width: 40px;
    height: 40px;
    padding: 0px;
}


.text-client {
  color: #665611 !important;
}

.text-bg-client {
  color: #fff !important;
  background-color: #665611ab !important;
}

.text-request {
  color: #176977 !important;
}

.text-bg-request {
  color: #fff !important;
  background-color: #176977ab !important;
}

.text-bg-quote {
  color: #fff !important;
  background-color: #143181ab !important;
}

.text-quote {
  color: #143181 !important;
}

.text-bg-job {
  color: #fff !important;
  background-color: #106b1cab !important;
}

.text-job {
  color: #106b1c !important;
}

.text-bg-invoice {
  color: #fff !important;
  background-color: #661111ab !important;
}

.text-invoice {
  color: #661111 !important;
}

.btn-footer {
  padding: 0px 6px; 
  border-color: gray !important; 
  box-shadow: 2px 2px lightgray;
}

.btn-clients {
  padding: 0px 6px; 
  border-color: #988e5f !important; 
  box-shadow: 2px 2px #6f6846;
}


.mobile-nav {
  background: #F1F1F1;
  position: fixed;
  bottom: 0;
  height: auto;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.bloc-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bloc-icon img {
  width: 30px;
}

.mobile-nav .rec {
  padding:5px;

}


.db-card-left {
  padding-right: 0.25rem !important;
  flex: 0 0 auto;
  width: 50%;
}

.db-card-right {
  padding-left: 0.25rem !important;
  flex: 0 0 auto;
  width: 50%;
}

.db-card {
  margin-bottom: 1rem !important;
  height: 325px;
  border-radius: 5px;
  overflow: hidden;
}

.db-card-header {
  padding: 0.25rem !important;
  height:42px; 
  padding-top:4px; 
  font-size: x-large;

}

.db-card-header span {
  margin-top: 1px;
  font-weight: 700 !important;
  font-size: 1.25rem;
}

.db-card div.card-body {
  height: 200px;
  font-size:1rem !important;
}

.card-body hr {
  margin: 0px;
}

.requestdiv {
  background-color: #5a93a117 !important;
}

.requestdiv:hover{
  background-color: #5a93a167 !important;
}


.form-control {
  box-shadow:none !important;
}

.form-select {
  box-shadow:none !important;
}

.form-switch .form-check-input {
  height: 1.5rem !important;
  width: calc(1.4rem + 1.4rem) !important;
}

.btn-checked-quotes {
  background-color: #143181ab !important;
  color: white !important;
  border:solid 1px #143181 !important;
}


.btn-checked-request {
  background-color: #176977ab !important;
  color: white !important;
  border: solid 1px #176977 !important;
}

.btn-outline-client {
  border:solid 1px #665611 !important;
  color:#665611 !important;
}

.btn-outline-client:hover {
  background-color: #665611ab !important;
  color: white !important;
}

.btn-outline-route {
  border:solid 1px #000000 !important;
  color:#000000 !important;
}

.btn-outline-route:hover {
  background-color: #a1a3a4ab !important;
}

.btn-checked-jobs {
  background-color: #57945f !important;
  color: white !important;
  border:solid 1px #198754 !important;
}

.clock {
  
  font-size: 30px;
  letter-spacing: 7px;
}




.btn-outline-quotes {
  --bs-btn-color: #596da3;
  --bs-btn-border-color: #143181;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #596da3;
  --bs-btn-hover-border-color: #143181;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #596da3;
  --bs-btn-active-border-color: #143181;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #596da3;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #143181;
  --bs-gradient: none;
}


.btn-outline-jobs {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754cf;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754cf;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754cf;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

.btn-outline-invoices {
  --bs-btn-color: #661111;
  --bs-btn-border-color: #661111;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #661111cf;
  --bs-btn-hover-border-color: #661111;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #661111cf;
  --bs-btn-active-border-color: #661111;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #661111cf;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #661111;
  --bs-gradient: none;
}

.btn-outline-request {
  --bs-btn-color: #176977;
  --bs-btn-border-color: #176977;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #176977ab;
  --bs-btn-hover-border-color: #176977;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #176977ab;
  --bs-btn-active-border-color: #176977;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #176977ab;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #176977;
  --bs-gradient: none;
}

.btn-big {
  height: 45px !important;
  border: solid 1px #ccc !important;
  width: 90px !important;
}


.form-control {
    height:40px;
    font-size: 18px !important;
    font-weight:bold !important;
}
.form-select {
    height:40px;
    font-size: 18px !important;
    font-weight:bold !important;
}

.form-control::placeholder {
    font-weight: normal !important;
    color: #bbb !important;
}


.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines to show */
  -webkit-box-orient: vertical;
}



/**
  * follow-the-leader
  *
  * @author jh3y - jheytompkins.com
*/
@-webkit-keyframes follow-the-leader {
  0% {
    -webkit-transform: rotate(0deg) translateY(-200%);
            transform: rotate(0deg) translateY(-200%); }
  60%,
  100% {
    -webkit-transform: rotate(360deg) translateY(-200%);
            transform: rotate(360deg) translateY(-200%); } }
@keyframes follow-the-leader {
  0% {
    -webkit-transform: rotate(0deg) translateY(-200%);
            transform: rotate(0deg) translateY(-200%); }
  60%,
  100% {
    -webkit-transform: rotate(360deg) translateY(-200%);
            transform: rotate(360deg) translateY(-200%); } }

.follow-the-leader {
  height: 20px;
  position: relative;
  width: 20px; 
  left: 50%;
  top: 30vh;
  z-index: 9999;
}

.follow-the-leader div {
    -webkit-animation: follow-the-leader 1.875s infinite backwards;
            animation: follow-the-leader 1.875s infinite backwards;
    background-color: #ffffff;
    border-radius: 100%;
    height: 100%;
    position: absolute;
    width: 100%; 
}

    .follow-the-leader div:nth-child(1) {
      -webkit-animation-delay: 0.15s;
              animation-delay: 0.15s;
      background-color: rgba(23, 105, 119, 0.9); }
    .follow-the-leader div:nth-child(2) {
      -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
      background-color: rgba(23, 105, 119, 0.8); }
    .follow-the-leader div:nth-child(3) {
      -webkit-animation-delay: 0.45s;
              animation-delay: 0.45s;
      background-color: rgba(23, 105, 119, 0.7); }
    .follow-the-leader div:nth-child(4) {
      -webkit-animation-delay: 0.6s;
              animation-delay: 0.6s;
      background-color: rgba(23, 105, 119, 0.6); }
    .follow-the-leader div:nth-child(5) {
      -webkit-animation-delay: 0.75s;
              animation-delay: 0.75s;
      background-color: rgba(23, 105, 119, 0.5); }


/* ****************  */

.fw-800
{
  font-weight: 800;
}
.fw-900
{
  font-weight: 900;
}

.list-group-item
{
    background-color:white;
    border-radius:12px !important;
}

.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #8f9bb2;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
}

.circle2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 42px;
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
    background-color:limegreen; 
    color:white;
}