:root {
    --font-color--: #000040;
    --bg-color-faint--: #D8EDFD;
    --bg-color-light--: #B2DAFB;
    --bg-color-medium--: #8bc8f8;
    --bg-color-dark--: #64b5f6;
    --bg-color-body--: white;
    --fs-text--: 0.875rem;
    --fs-input--: 0.8rem;
}


body {
    font-size: 1rem;
    background-color: var(--bg-color-body--);
}

tt {
    display: inline !important;
    color: white;
}
a#Footer{
    font-size:0.8rem;
}
.sidebar {
    position: fixed;
    top: 1rem;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 48px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  }
  
  .sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  }
  
  @supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
      position: -webkit-sticky;
      position: sticky;
    }
  }
  
  .sidebar .nav-link {
    font-weight: 500;
    color: #333;
  }
  
  .sidebar .nav-link .feather {
    margin-right: 4px;
    color: rgb(7, 118, 146);
  }
  
  .sidebar .nav-link.active {
    color: #007bff;
  }
  
  .sidebar .nav-link:hover .feather,
  .sidebar .nav-link.active .feather {
    color: inherit;
  }
  
  .sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
  }

  #mainNavbar.navbar.bg-dark{
      background-color:var(--bg-color-medium--)!important;
      box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .1);
  }
  #sideNav.sidebar.bg-light{
    padding-right: 1rem;
    background-color:var(--bg-color-light--)!important;
    border-top: rgba(171, 220, 248, 0.849),5rem!important;
}

.sidebar .nav-link{
  font-weight: 400;
  font-size: 1rem;
  color: var(--font-color--);
}

/* Brand Styles */
  #mainNavbar .navbar-brand {
    font-size: 1.3rem;
    color: var(--font-color--)!important;
    padding-left: 0px;
  }
  /* Navbar styles */
  .navbar-dark .navbar-nav .nav-link{
      color: var(--font-color--)!important;
      font-size: 1rem;
  }
.form-control.CustomerID {
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    font-size: 1rem !important;
    color: var(--font-color--) !important;
}
  .form-control.CustomerID:focus{
      outline:none!important;
  }
  /* Form Control Styles */
  .form-control{
      font-size:0.8rem !important;
  }
/* Messenger heading */
h1 {
    font-size: 1.5rem;
    color: var(--font-color--);
}

  textarea.form-control{
      height:150px !important;
  }
  /* Card spacing */
  @media screen and (min-width: 600px){
  .col-md-6.spacing{
    max-width: 48%;
  }
  }
  @media screen and (min-width: 600px){
  .col-md-4.spacing{
    max-width: 31%;
  }
  }
  .col-md-12.spacing{
    max-width: 100%;
  }
  /* Main body Line-up */
  h1.line-up{
    padding-bottom: 0.06rem!important;
  }
  /* Button styling */
  .btn-outline-info{
    color:var(--font-color--)!important;
    border-color: var(--font-color--)!important;
    font-size: 0.8rem;
  }
.btn-outline-info.big {
    font-size: 1rem;
}
/* button hover styles */
.btn-outline-info:hover{
background-color: rgba(171, 220, 248, 0.849)!important;
}

.btn-outline-info:disabled {
    color: darkslategrey !important;
    border-color: darkslategrey !important;
}

a{
    text-decoration:none!important;
}

.btn-outline-info:disabled:hover {
    background-color: rgb(250, 253, 255) !important;
}

/* Main text color */
#mainForm.mainForm{
    color: var(--font-color--)!important;
  }
/* Sidebar brand styles */
a.navbar-brand{ 
    font-size: 1rem;
    color: var(--font-color--)!important;
  }
  a{
    color: var(--font-color--)!important; 
  }
/* Homepage Styles */
  #LandingPage.LandingPage{
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  @media screen and (max-width: 500px){
    #LandingPage.LandingPage{
      padding-top: 5rem;
    }
  }
  input#inputName{
    max-width: 35%;
  }
  input#inputEmail{
    max-width: 35%;
  }

/* max width */
@media screen and (max-width: 1150px){
  #mainNavbar .navbar-brand {
    font-size: 1.2rem;
    padding-left: 0px;
  }
  img.resize{
    height: 35px;
    width: 35px;
  }

  .navbar-dark .navbar-nav .nav-link{
    font-size: 0.9rem;
} 
  div#contactDetails{
    font-size: 0.45rem !important;
  }
  input#inputName{
    max-width: 50%;
  }
  input#inputEmail{
    max-width: 50%;
  }
  h4#contactDetails{
    font-size:1.1rem; 
  }
}

/* Client pictures resisizing */
.img-thumbnail{
  /*background-color:rgb(250, 253, 255) !important;
  border: 0px !important;*/
  max-width: 75% !important;
  height: auto;
}

    .img-thumbnail.cardmatch {
        border: 1px solid #dee2e6 !important;
        min-height:0px!important;
        max-height:300px!important;
        width:auto!important;
    }
em{
    font-size: 1.2rem;
}
img.CardImage{
    height:3rem;
    width:auto;
}

/* Nav-links styles */
/*.navbar-dark .navbar-nav .nav-link:hover{
  background-color: var(--bg-color-dark--) !important;
  box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .1);
  transition: 0.6s;
}
.navbar-dark .navbar-nav .nav-link .logLink:hover {
    background-color: var(--bg-color-dark--) !important;
    transition: 0.6s;
}*/

/*DropDownStyles*/
#accDropdown{
    width:100%;
}
#sbDropdown {
    width: 90%;
    border: none;
    background-color: var(--bg-color-light--) !important;
}


.current {
    background-color: var(--bg-color-dark--) !important;
    box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .1);
}
/* Background color */
.jumbotron{
  background-color: rgb(250, 253, 255);
}

#Icon-error{
    color:red;
}

#Icon-success{
    color:limegreen;
}

#Icon-received {
    color: dodgerblue;
}

#Icon-pending{
    color:orange;
}

#arrow {
    color:var(--font-color--);
}

.Toggle {
    color: var(--font-color--);
    font-size: 1.2rem;
    cursor: pointer;
}

.Collapsable {
    font-size: 0.7rem;
    color: #6a7786;
}
#actionText {
    font-size: 1rem !important;
}
textarea.form-control.thin{
    height: 35px !important;
}
textarea.form-control.big {
    height: 500px !important;
}
td.Seperate {
    border-top: 1px solid #111!important;
}

.IEFix{
    line-height:0!important;
    padding:0.9rem!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background:none!important;
    background-color:white!important;
    display: inline-block !important;
    font-weight: 400 !important;
    text-align: center !important;
    vertical-align: middle !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    padding: .375rem .75rem;
    line-height: 1.5 !important;
    border-radius: .25rem !important;
    color: var(--font-color--) !important;
    border-color: var(--font-color--) !important;
    font-size: 0.8rem !important;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgba(171, 220, 248, 0.849) !important;
}

.dropdown-item.active {
    background-color: rgba(171, 220, 248, 0.849) !important;
}
.bootstrap-select .dropdown-menu li.active small {
    color: #6c757d !important;
}
.bootstrap-select > .dropdown-toggle {
    border: 1px solid #ced4da !important;
    background-color: white !important;
}
li.dropdown-header span.text:hover {
    background-color: white !important;
}
.bootstrap-select .dropdown-menu li :hover {
    background-color: var(--bg-color-light--) !important;
}
div.filter-option{
    font-size: 0.8rem!important;
}

.dropdown-menu{
    font-size: 0.8rem!important;
}

.card-header {
    background-color: rgb(250, 253, 255)!important;
}

#credits{
    width:40%!important;
    display: inline!important;
}

div.invalid-tooltip {
    top:auto!important;
}

.form-control#credits {
    background-color: #fff!important;
    color:black!important;
    font-size:1rem!important;
}

/*.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23044688' d='M0 2h4'/%3e%3c/svg%3e");
    border: 1px solid var(--font-color--) !important;
    background-color: #fff;
    border-radius: .25rem;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23044688'/%3e%3c/svg%3e") !important;
    border: 1px solid var(--font-color--) !important;
    background-color: #fff;
    border-radius: .25rem;
}*/

.bootstrap-tagsinput .badge {
    margin: 2px !important;
    background-color: var(--bg-color-light--) !important;
    color: var(--font-color--) !important;
    font-weight:500 !important;
}
.tooltip {
    pointer-events: none;
}

div.error-text-max{
    color:indianred;
    font-size:0.9rem;
}

::-webkit-input-placeholder { /* Edge */
    color: #999;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999;
}


.btn-outline-info.disabled {
    color: darkslategrey !important;
    border-color: darkslategrey !important;
}

.iti__flag {
    background-image: url("../imgs/Flags/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../imgs/Flags/flags@2x.png");
    }
}

.iti__selected-dial-code{
    font-size: 0.8rem;
}

input.invalid{
    border-color:red!important;
}
div.invalid{
    color:red;
    font-size:0.8rem!important;
}
input.invalid :focus {
    outline: red !important;
}

.iti{
    width:100%!important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bg-color-dark--) !important;
    border-color: var(--font-color--) !important;
}

#WhatsAppNumberLocal{
    padding-left:81px!important;
}

.table thead th.double {
    vertical-align: middle !important;
}

table.dataTable thead th.soft-border {
    border-bottom: 1px solid #cecccc !important;
}

.nowrap{
    white-space:nowrap;
}
div.overlay {
    margin: 0 auto;
    width: 25%;
}
.custom-loader-color{
    font-size:2rem;
}
div.custom-loader-background {
    background: none;
}
span > a.paginate_button.current {
    background-color: rgba(171, 220, 248, 0.849) !important;
}

p.m-0.p-0#messagewrap {
    word-break: break-word;
}

button.add {
    background-color: var(--bg-color-light--) !important;
}

button.add:disabled {
    background-color: white !important;
    color: darkslategrey !important;
    border-color: darkslategrey !important;
}
.btn-outline-info.success {
    color: #28a745 !important;
    border-color: #28a745 !important;
    font-size: 0.8rem;
}
.btn-outline-info.success :hover {
    background-color: #96faad !important;
}

.btn-outline-info.error {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    font-size: 0.8rem;
}

.btn-outline-info.error :hover {
    background-color: #ff8591 !important;
}

span.pending {
    color: var(--font-color--)!important;
}

/*#busy{
    background-color: black;
    backgr
}*/