/*!
 * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

/*Global */
/*@font-face {
    font-family: 'Varela Round';
    src: url('../Varela_Round/VarelaRound-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}*/

@font-face {
    font-family: 'Lato';
    /*src: url('../Comfortaa/Comfortaa-VariableFont_wght.ttf') format('truetype');*/
    /*src: url('../Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');*/
    src: url('../Lato/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

html, body {
    
    max-width: 100%;
    height: 100%;
    overflow-x: hidden;
    /*font-family: 'Varela Round';*/
    font-family: 'Lato';
    margin: 0;
    padding: 0;
    background-color: white;
    letter-spacing: 1px;
}

body {
 
    --side-nav-color: #337ab7;
    --modal-top-color: #337ab7;
    --text-color: #800080;
    --top-bar-color: #f8f8f8;
    --sub-text-color: #797979;
    --button-color: #ab467d;
    --table-color: white;
    /*--table-color: #ecf0f2;*/
    --colorMain: #c0c0c0;
    --brShadow: -6px 6px 15px rgba(0,0,0,0.5);
    --tlShadow: 6px -6px 15px rgba(255,255,255,0.8);
    background:  #f4f5f8;
    /*#f7f8fd*/
    /*#fafafa*/
}

a {

  color: black;
}

.Currency {

  font-size: 11px;
}

#customer-rpp {

  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 36%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.input-group-multi [class*='col-'] {
  margin: 0 !important;
  padding: 0 !important;
}

.input-group-multi [class*='col-'] input.form-control {
  border-radius: 0px 4px 4px 0px !important;
  border: 1px solid #ccc;
  background: white !important;
}

#account-tags-dropdown-div input::placeholder {

  letter-spacing: 1px;
  font-size: 12px;
  color: gray;
}

#docs-filter-mode-btn,
#suppliers-filter-mode-btn {

  text-decoration: none;
}

#docs-filter-mode-btn span,
#suppliers-filter-mode-btn span {

  letter-spacing: 1px;
  font-size: 12px;
  color: gray;
}

#docs-filter-mode-btn span:hover,
#suppliers-filter-mode-btn span:hover {

  text-decoration: none;
  cursor: pointer;
}

.attachment-tags-list-dropdown-div .input-group input.form-control {

  border-radius: 4px 0px 0px 4px !important;
}

.filterTags {

  position: absolute;
  margin-top: 6px;
  margin-right: 5px;
  z-index: 2000;
}

#individualSignUpForm input {

    /*border: 1px #ececec !important; 
    background: #ececec !important; */
    outline: 0 !important;
    box-shadow: none !important;
    color: black !important;
    /*border-radius: 0px !important;*/
}

#individualSignUpForm select {

    border: 1px #ececec !important; 
    background: #ececec !important;
}

input, textarea {

    /*background: var(--top-bar-color) !important; */
    outline: 0 !important;
    box-shadow: none !important;
    color: black !important;
    /*border-radius: 0px !important;*/
}

input.typeahead {

    /*border: 1px solid #ececec!important; */
    background: white !important; 
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--side-nav-color) !important;
    top: 100% !important;
}

input.typeahead::placeholder {

  letter-spacing: 1px;
  font-size: 12px;
  color: gray;
}

/*#content-area {

  background: var(--table-color);
}*/

.cc-FF9E88 .bar-progress {

  fill: #FF9E88 !important;
}

.cc-FFC966 .bar-progress {

  fill: #FFC966 !important;
}

.cc-FF99CC .bar-progress {

  fill: #FF99CC !important;
}

.cc-FFFF60 .bar-progress {

  fill: #FFFF60 !important;
}

.cc-6DD79A .bar-progress {

  fill: #6DD79A !important;
}

.cc-5195CA .bar-progress {

  fill: #5195CA !important;
}

.cc-7AAEC3 .bar-progress {

  fill: #7AAEC3 !important;
}

.cc-C8D4FF .bar-progress {

  fill: #C8D4FF !important;
}

.cc-gray .bar-progress {

  fill: gray !important;
}

.input-dropdown {

  position: relative;
  display: inline-block;
  width: 100%;
}

.input-dropdown::before {
    
      position: absolute;
      content: "";
      top: 15px;
      right: 10px;
      /*width: 0;
      height: 0;*/
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid var(--side-nav-color);

}

/*select {

  background-color: var(--table-color) !important;
  display: inline-block;
  font: inherit;
  line-height: 3.5em;
  padding: 0.2em 3.5em 0.5em 1em;
  text-decoration: none;
  outline: 0 !important;
  box-shadow: none !important;


  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0px !important;
  border: 1px solid #ececec !important; 
}*/

select.form-control {

  height: 32px !important;
}

select.minimal {

  background-image:
    linear-gradient(45deg, transparent 50%, #2a2a2a 50%),
    linear-gradient(135deg, #2a2a2a 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;

}

select.dpminimal {

    background-image:
    linear-gradient(45deg, transparent 50%, #2a2a2a 50%),
    linear-gradient(135deg, #2a2a2a 50%, transparent 50%),
    linear-gradient(to left, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(0.9em + 2px),
    calc(100% - 15px) calc(0.9em + 2px),
    calc(100% - 2.5em) 0.4em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  height: 32px;

}

label {

  font-weight: 700;
}

/*.search-box {

    display: inline-flex;
}*/

.triangle {
      
  position: absolute;
  bottom: 0;
  right: 0;
  clip-path: polygon(100% 100%, 100% 0, 0 100%, 100% 100%);
  /*background: #02151B;*/
  /*background-color: #310e68;
  background-image: linear-gradient(316deg, #310e68 0%, #5f0f40 74%);*/
  background-color: #663dff;
  background-image: linear-gradient(319deg, #663dff 0%, #aa00ff 37%, #cc4499 100%);
  width: 100%;
  height: 40%;
  
}

.triangleV {
      
  position: absolute;
  bottom: 0;
  right: 0;
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
   background: rgb(158,166,162);
background: linear-gradient(254deg, rgba(158,166,162,0.3015405991498161) 0%, rgba(189,196,250,0.27913163556438203) 100%); 
  width: 100%;
  height: 12.5%;
  
}

#welcomeDisplayName {

  font-weight: 700;
}

#welcomeDisplayMsg {

  font-size: 13px;
}

#viewUserNotificationForm .table-style .table {

  border: none !important;
}

.headLine {

  line-height: 1.7; 
  font-size: 13px;
  /*font-weight: 700;
  color: var(--side-nav-color);*/
}

.tab-pane {

  padding: 10px 15px;
}

.tab-content h4 img {

  width: 20px;
  height: 20px;
  margin-top: -4px;
  margin-right: 5px;

}

#view-customer-contacts-details-tab-contents .tab-pane,
#view-customer-addresses-details-tab-contents .tab-pane {

  padding: 0px 15px;
}

.introMsg {

  background-color: white; 
  border: 1px solid lightgray;
  border-radius: 5px; 
  padding: 13px 10px 5px 15px;
  color: black;
}

.introHelpCenter {

  background-color: var(--text-color); 
  border-radius: 5px; 
  padding: 0.2px 15px 5px 15px;
  color: var(--top-bar-color);
}

.hidden {
  
  display: none;
}

table {
    background: var(--table-color) !important;
    border: 1px solid lightgray;
    border-radius: 5px;
    width: 50%;
    border-spacing: 0px;
    border-collapse: separate;
}

.viewUserNotificationForm table {
    
    background: white !important;
}

.table thead tr th {

  border-bottom: none !important;
}

.table thead tr:first-child th:first-child {

  border-top-left-radius: 5px !important;
}

.table thead tr:first-child th:last-child  {

  border-top-right-radius: 5px !important;
}

.table tbody tr:last-child td:first-child {

  border-bottom-left-radius: 5px !important;
}

.table tbody tr:last-child td:last-child  {

  border-bottom-right-radius: 5px !important;
}

.table-responsive { 

  border: none !important;
  overflow-y: auto;
  /*min-height: 300px;*/
}

/*.ui-timepicker-input {

  width: 100% !important;
}*/

.table-bordered {

  border: 1px var(--top-bar-color) !important;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radio-checkmark {
  position: absolute;
  top: 25px;
  left: 23px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio-checkmark:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

/* Hide the browser's default radio button */
.radio-container-sp input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radio-checkmark-sp {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container-sp:hover input ~ .radio-checkmark-sp {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container-sp input:checked ~ .radio-checkmark-sp {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark-sp:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container-sp input:checked ~ .radio-checkmark-sp:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container-sp .radio-checkmark-sp:after {
    top: 7.5px;
    left: 7.5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

.toast {
    
    opacity: 1 !important;
    border: solid 1px white;
    border-radius: 2px;
    min-width: 25%;
}

.btn img {

    width: 17px;
    height: 17px;
    margin-top: -2.5px;
    margin-right: 5px;
}

.btn-default.btn-on.active {

  background-color: var(--button-color);
  color: white !important;
  border: 1px solid var(--button-color);
}

.btn-default.btn-off.active{
  
  background-color: var(--button-color); 
  color: white !important;
  border: 1px solid var(--button-color);
  
}

.customLabel {

  color: var(--side-nav-color);
}

.input-group-addon-sm .input-group-addon {

  width: 30% !important;
}

#my-profile-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    background: var(--button-color);
    color: var(--top-bar-color);
}

#my-profile-nav-tabs-div .nav-tabs > li > a {

    color: var(--button-color);
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: none !important;
    border-radius: 3px;
    padding: 10px !important;
    height: auto;
}

#my-profile-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

/** Optionally if you don't want word wrap **/
#my-profile-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#administration-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#administration-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#administration-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

/** Optionally if you don't want word wrap **/
#administration-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#main-nav-list {

  display: none;
}

.modal-body .infoBox {

  background-color: var(--top-bar-color);
}

.infoBox {

  padding: 10px 5px 5px;
  background-color: white;
  border-radius: 5px;
  text-align: center;
}

.infoBox i {

  font-size: 15px;
  color: var(--text-color);
  padding: 5px;

}

.infoBox label {

  font-size: 13px;
  color: black;

}

#proposal-assessment-finances-infoboxes-div {

  padding-top: 30px;
}

#manage-proposal-summary-nav-tab .infoBox,
#proposal-assessment-tasks-nav-div .infoBox,
#manage-assessment-summary-nav-tab .infoBox,
#manage-proposal-margins-nav-tab .infoBox,
#manage-assessment-nav-content-div .infoBox,
#user-project-task-details-task-bom-preview-stats .infoBox,
#user-project-task-details-task-bos-preview-stats .infoBox {

  border: 1px solid lightgray;
  border-radius: 5px;
  background: var(--top-bar-color);
  color: var(--side-nav-color);
}

.subBg {

  background: var(--top-bar-color); 
  border: 1px solid lightgray; 
  border-radius: 5px; 
  padding: 15px;
}

#manage-project-summary-nav-tab .infoBox {

  border: 1px solid lightgray;
  border-radius: 5px;
  background: var(--top-bar-color);
  color: var(--side-nav-color);

}

.summaryChartDiv {

  border: 1px solid lightgray; 
  border-radius: 5px; 
  background: var(--top-bar-color);
  padding: 15px;

}

.subDiv {

  background: var(--top-bar-color); 
  padding: 15px; 
  border-radius: 5px;
  border: 1px solid lightgray;
}

#manage-project-finances-div label, #manage-proposal-summary-nav-tab label {

  color: var(--side-nav-color);
}

#manage-project-finances-div label,
#manage-proposal-summary-nav-tab label,
#proposal-assessment-tasks-nav-div .infoBox label,
#manage-assessment-summary-nav-tab .infoBox label,
#manage-proposal-margins-nav-tab .infoBox label,
#manage-assessment-nav-content-div .infoBox label,
#user-project-task-details-task-bom-preview-stats .infoBox label,
#user-project-task-details-task-bos-preview-stats .infoBox label {

  color: black;
}

#manage-proposal-summary-nav-tab .infoBox p, 
#manage-project-summary-nav-tab .infoBox p,
#proposal-assessment-tasks-nav-div .tab-pane .infoBox p,
#manage-assessment-summary-nav-tab .infoBox p,
#manage-proposal-margins-nav-tab .infoBox p,
#manage-assessment-nav-content-div .infoBox p,
#user-project-task-details-task-bom-preview-stats .infoBox p,
#user-project-task-details-task-bos-preview-stats .infoBox p {

  color: gray;
}

.nav-head-title {

    display: inline-block;
    width: 250px;
}

.nav-head-title p {

    margin-left: 10px;
    margin-top: 11px;
    font-size: 18px;
    font-weight: 800;
    display: inline-flex;
    /*text-transform: lowercase;*/
 
}

.nav-head-title img {

    margin-left: 19px;
    margin-top: 12px;
    display: inline-flex;
    width: 25px;
    height: 25px;
}

.accountBrandName {

    /*margin-left: 105px;
    margin-top: -3px;*/
    margin-left: 10px !important;
    font-weight: 800;
    font-size: 13px;
    /*color: var(--button-color);*/
    /*text-transform: uppercase;*/
    /*text-shadow: 1.5px 1.5px #e6e3e3;*/
}

/*.accountBrandName {

  margin-left: 137px;
  margin-top: -7px;
  color: var(--button-color);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: var(--button-color), 
               var(--button-color);
  position: relative;
  
  &::before, &::after {
    position: absolute;
    background: var(--button-color);
    content: '';
    border-radius: 10%;
    
  }
  
    &::before {
      left: 0;
    width: 100px;
    height: 100px;
      top: -150px;
      z-index: 10;
      box-shadow: inset var(--button-color),
                inset var(--button-color);
      
    }
    &::after {
      left: -50px;
      width: 200px;
      height: 200px;
      top: -200px;
      box-shadow: var(--button-color),
                var(--button-color);
    }
}*/

.userDivisionName {

    /*position: absolute;
    top: 35px;
    left: 110px;*/
    margin-top: -10px;
    /*margin-left: 2.5px;*/
    font-size: 12px;
    max-width: 110px;
    font-weight: 100;
    /*font-family: 'Courier new';*/
    color: var(--button-color) !important;
}

#dashboard-events-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#dashboard-events-nav-tabs-div .nav-tabs > li > a {
    height: auto;
}

/** Optionally if you don't want word wrap **/
#dashboard-events-nav-tabs-div .nav-tabs > li {
    white-space: nowrap;
}

.has-search .form-control-feedback {
    right: initial;
    left: 0;
    color: lightgray;
}

.has-search .form-control {
    
    /*padding-right: 12px;*/
    padding-left: 34px;
    height: 33px;
}

.form-control, .form-control::placeholder {

    color: #909090;
}

.actions-btn {

    box-shadow: none !important;
    cursor: pointer; 
    text-decoration: none;
    font-size: 12.5px; 
    color: #2a2a2a !important;
}

.dropdown-menu {

    text-align: left !important;
    padding: 0 !important;
    border: 1px solid var(--table-color) !important;
    border-radius: 5px;
    /*box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.2);*/
    position: absolute;
    right: 0px;
    font-size: 13px;
    z-index: 10000;
    /*min-width: 80px;
    max-width: 100%;*/

}

.dropdown-menu li {

    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    /*border-radius: 5px;*/

}

.dropdown-menu li a {

    padding: 10px !important;

}

.dropdown .dropdown-menu li i {

  margin-right: 5px;
  width: 20px;
  font-size: 13px;
  text-align: center;

}

/*.dropdown .dropdown-menu li:hover, */
.dropdown .dropdown-menu li a:hover, 
.dropdown .dropdown-menu li a:hover > i {

  background-color: transparent !important;
  /*color: var(--text-color) !important;*/
  /*border-radius: 5px;*/

}

.dropdown-menu .divider {

    background-color: lightgray !important;
    padding: 0;
    margin: 0;
}

/* Sorting */

.add-btn-style {

  color: white !important;
  background: #34C759 !important;
  border: 1px solid #34C759 !important;
  margin-left: 5px;
  border-radius: 25px;
  padding: 6px 14px;
}

.delete-btn-style {

  color: white !important;
  background: #BC0526 !important;
  border: 1px solid #BC0526 !important;
  margin-left: 5px;
}

#project-tasks-bulk-actions img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

.add-btn-modal-style {

  color: white !important;
  background: #34C759 !important;
  border: 1px solid #34C759 !important;
}

.new-btn-style {

  color: white !important;
  background: var(--side-nav-color) !important;
  border: 1px solid var(--side-nav-color) !important;
  margin-left: 5px;
}

.sortOptions .btn-style {

  font-size: 13px;
}

.sortOptions .dropdown-menu li a {

  /*background-color: var(--button-color);
  color: var(--top-bar-color);
  text-align: left !important;*/

  color: var(--side-nav-color);
  text-align: left !important;
}

.sortOptions .dropdown-menu li a.btn-sm {

  border: none;
  border-radius: 0px;
  box-shadow: none;
}

.sortOptions .dropdown-menu li a:hover {

  background-color: var(--table-color);
}

.sortOptions .dropdown-menu li a.active {

  background-color: var(--table-color);
  color: var(--side-nav-color);
}

.sortOptions .dropdown-menu li i {

  margin-right: 5px;
  width: 15px;
  font-size: 13px;

}

.sortOptions .dropdown-menu li.divider {

  background-color: var(--table-color) !important;
  padding: 0 !important;
  margin: 0 !important;

}

.sortOptions .dropdown-menu {

  text-align: center !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0px;
  box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
  position: absolute;
  right: 0px;

}

/* Filters */

.filterOptions .btn-style {

  font-size: 13px;
}

/*.filterOptions .dropdown-menu {

  min-width: 100%;
}*/

/*.filterOptions .dropdown-menu li {

  min-width: 100%;
}*/

.filterOptions .dropdown-menu {

  text-align: left !important;
  padding: 0 !important;
  border: 1px solid #D0D5DD !important;
  border-radius: 5px;
  /*box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);*/
  position: absolute;
  right: 0px;

}

.filterOptions .dropdown-menu li a {

  /*background-color: var(--table-color);*/
  /*color: var(--side-nav-color);*/
  text-align: left !important;
  margin: 1px;
  padding: 7px !important;
  /*min-width: 200%;*/
}

.filterOptions .dropdown-menu li a.btn-sm {

  border: none;
  border-radius: 0px;
  box-shadow: none;
}

.filterOptions .dropdown-menu li a:hover {

  background-color: var(--table-color);
}

.filterOptions li.clearProjectFilter.active a, 
.filterOptions li.clearCustomerFilter.active a, 
.filterOptions li.projectsByStatusFilter.active a
.filterOptions li.projectsByDeliveryFilter.active a, 
.filterOptions li.projectsByCustomerFilter.active a, 
.filterOptions li.projectsByPaymentStatusFilter.active a,
.filterOptions li.customersByTypeFilter.active a,
.filterOptions li.clearProposalFilter.active a, 
.filterOptions li.proposalsByStatusFilter.active a,
.filterOptions li.proposalsByCustomerFilter.active a,
.filterOptions li.proposalsByDeliveryFilter.active a,
.filterOptions li.clearEngineerFilter.active a, 
.filterOptions li.engineersByStatusFilter.active a,
.filterOptions li.engineersByEntityFilter.active a,
.filterOptions li.engineersBySupplierFilter.active a,
.filterOptions li.engineersByTeamFilter.active a,
.filterOptions li.clearSupplierFilter.active a, 
.filterOptions li.suppliersByTypeFilter.active a,
.filterOptions .dropdown-menu li a.active,
.filterOptions .dropdown-menu li.active a {

  background-color: var(--table-color);
  color: var(--side-nav-color);
  border-radius: 2px;
}

.filterOptions .dropdown-menu li i {

  margin-right: 10px;
  width: 15px;
  font-size: 13px;
}

.filterOptions .dropdown-menu li.divider {

  background-color: var(--top-bar-color) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*.filterOptions .dropdown-menu li a:hover {

  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.filterOptions .dropdown-menu li a:hover {

  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}*/

#projects-by-customer-filter.dropdown-menu li.divider {

  min-width: 120% !important;
}

#proposals-by-customer-filter.dropdown-menu li.divider {

  min-width: 120% !important;
}

/*exports*/

.exportOptions .btn-style, .importOptions .btn-style {

  /*font-size: 13px;*/
}

.exportOptions img, .importOptions img {

  width: 17px;
  height: 17px;
  margin-top: -2.5px;
  margin-right: 5px;

}

.meta {

  color: black;
  font-size: 12px;
}

.addEntityBtn {

    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    cursor: pointer; 
    outline: none;
    /*border-radius: 20px;*/
    border-top-left-radius: 50px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;

    background: var(--button-color);
    text-align: center; 
    padding: 12px;
    color: var(--top-bar-color);

}

.addEntityBtn:hover {

    color: var(--top-bar-color);
}

.addEntityBtn img {

    width: 40px;
    height: 40px;
}

.viewField p {

    color: gray !important;
    margin-top: 5px;
    font-size: 13px;
}

.viewFieldConditional p, .approvalRelatedField p {

  color: gray !important;
}

.reassessRelatedField p {

  color: gray !important;
}


.assignedRelatedField p, .startedRelatedField p , .completedRelatedField p, .returnedRelatedField p {

    color: gray !important;
}

.startedRelatedField, .completedRelatedField, .returnedRelatedField {

    display: none;
}

.editField {

    display: none;
}

.cancel-btn {

    background: var(--top-bar-color);
    border: 1px solid lightgray;
    border-radius: 25px;
    padding: 6px 14px;
}

.sub-head-title {

    position: absolute;
    margin-top: -10px;
    margin-left: 8px;
    background: white;
    padding: 20px 7px;
    color: var(--side-nav-color);
}

.clear-space {

    padding: 5px;
}

.btn-i-style {

    color: #2a2a2a;
    padding: 6px 4px;
    font-size: 12px;
}

.btn.active {

    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.viewDocumentTagsRecordBtn {

    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

input[type="date"].form-control {

  line-height: 20px !important;
}

.dropdown-item {

  text-align: left !important;
}

.entityStatus {

  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  color: white;
}

.legendBox {

  display: table;
  float: left;
  margin-right: 12px;
  margin-bottom: 5px;
}

.statusLegend {

  height: 18px;
  width: 18px;
  border-radius: 10px;
  display: table-cell;
}

.textLegend {

  display: table-cell;
  padding-left: 5px;
}

.taskLegendBox {

  display: table;
  float: left;
  margin-right: 20px;
  /*margin-bottom: -10px;*/
}

.taskStatusLegend {

  height: 5px;
  width: 5px;
  border-radius: 5px;
  display: table-cell;
}

.taskTextLegend {

  /*display: table-cell;*/
  padding-left: 5px;
  font-size: 12px;
  margin-right: 2px;
}

.statusSideBar {

  border-radius: 3px;
  margin-right: 5px;
  color: white;
  /*width: 100%;*/
  font-size: 10px;
  padding: 4px;
  background: var(--text-color);
  white-space: nowrap;
}

.statusSideBar i {

  color: white !important;
}

.tagStyle {

  border-radius: 30px;
  margin-right: 5px;
  /*margin-bottom: 10px !important;*/
  color: var(--side-nav-color);
  border: 1px solid var(--side-nav-color);
  font-size: 12px;
  padding: 8px 12px;
  background: var(--table-color);
  white-space: nowrap;
}

.filterTagStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  /*margin-bottom: 10px !important;*/
  color: var(--side-nav-color);
  border: 1px solid var(--side-nav-color);
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;
}

.capsuleStyle {

  border-radius: 30px;
  color: var(--side-nav-color);
  /*font-size: 11.5px;*/
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;

}

.verticalAlignMiddle {

  vertical-align: middle !important;
}
.bluish {

  color: #026AA2;
  background: #F0F9FF;
  border: 0.1px solid #026AA2;
}

.purplish {

  color: #5925DC;
  background: #F4F3FF;
  border: 0.1px solid #5925DC;
}

.supplierPreviewRecord .filterTagStyle {

  margin-left: 0px;
}

li .counterStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  /*margin-bottom: 10px !important;*/
  color: var(--table-color);
  border: 1px solid var(--side-nav-color);
  font-size: 11.5px;
  padding: 3px 6px;
  background: var(--side-nav-color);
  white-space: nowrap;
}

li.active .counterStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  /*margin-bottom: 10px !important;*/
  color: var(--side-nav-color);
  border: 1px solid var(--side-nav-color);
  font-size: 11.5px;
  padding: 3px 6px;
  background: var(--table-color);
  white-space: nowrap;
}

.filteredBaseCount {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  margin-top: -10px !important;
  /*margin-bottom: 10px !important;*/
  color: var(--side-nav-color);
  border: 1px solid var(--side-nav-color);
  font-size: 10px;
  padding: 5px 10px;
  background: var(--top-bar-color);
  white-space: nowrap;
  display: inline-block;
  font-weight: 700;
}

.addAttachmentTag {

  border-radius: 30px;
  margin-left: 10px;
  /*margin-bottom: 10px !important;*/
  color: var(--top-bar-color);
  /*border: 1px solid var(--top-bar-color);*/
  font-size: 11px;
  padding: 4px 15px;
  background: var(--button-color);
  white-space: nowrap;
  /*position: absolute; 
  margin-top: 5px; */ 
  text-decoration: none;
  cursor: pointer;
  /*overflow-x: unset;
  overflow-y: unset;*/

}

.addAttachmentTag:hover {

  text-decoration: none;
  cursor: pointer;
  color: var(--top-bar-color);
  background: var(--button-color);
}

.tagDiv {

  display: inline-block;
  margin-bottom: 20px;
}

.tagsRail {


  /*margin-left: 40px;*/
  /*display: inline-block;*/
  /*display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: scroll;*/
}


.tagStyle i {

  color: var(--side-nav-color);
}

.proposalTasksPreview {

  background: var(--table-color) !important;
  color: var(--side-nav-color);
  font-size: 11.5px;
  padding: 6px;
  white-space: nowrap;
  border-radius: 25px;
  border: 1px solid var(--side-nav-color);
}

.proposalTasksPreview i {

  font-size: 13px !important;
  margin-right: 5px;
}

.statusSideCategory {

  border-radius: 3px;
  margin-right: 5px;
  color: white;
  width: 100%;
  font-size: 10px;
  padding: 4px;
  background: var(--button-color);
  text-transform: uppercase;
}

.taskColorDot {

  height: 10px;
  width: 10px;
  border-radius: 5px;
  display: inline-block;
  margin-right: 5px;
  /*padding: 0px 5px;*/
}

.kanbanColorDot {
  /*height: 10px;
  width: 30px;*/
  border-radius: 3px;
  color: white;
  display: inline-block;
  margin-right: 10px;
  padding: 0px 5px;
}

.kanbanDate {
  /*height: 10px;
  width: 30px;*/
  /*border-radius: 3px;*/
  color: black;
  font-size: 13px;
  /*display: inline-block;*/
  /*margin-right: 10px;*/
}

.gantt-container{

  min-height: 50px;
  max-height: 600px;
  overflow-x: scroll;
  overflow-y: scroll;
}

.textLegend {

  display: table-cell;
  padding-left: 5px;
  font-size: 12px;
}

.agendaAccordion {

  margin: 10px 0px 5px 0px;
  padding: 10px 10px;
  border-radius: 5px;
  border: 1px solid lightgray;
  background: var(--top-bar-color);
}

.agendaProject {

  color: black;
  text-decoration: none !important;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  /*padding: 8px 12px;
  border-radius: 5px;
  background: var(--table-color);*/
}

.new {

  background: #8fa6ac !important;
}

.assigned {

  background: gray !important;
}

.started {

  background: #795072 !important;
}

.returned {

  background: #ff8566 !important;
}

.accepted {

  background: purple !important;
}

.inprogress {

  background: #48668F !important;
}

.completed {

  background: #3C9664 !important;
}

.approved {

  background: #3fb081 !important;
}

.cancelled {

  background: #FA6D6A !important;
}

.On-Hold {

  background: #e31151 !important;
}

.archived {

  background: black !important;
}

.restarted {

  background: #227cf7 !important;
}

.activeState {

  background: #3C9664 !important;
}

.inactiveState {

  background: #FF2400 !important;
}

.disabled-btn {

    opacity: 0.5;
    /*color: lightgray !important;*/
    pointer-events: none;
    cursor: default;
}

.disabled {

    pointer-events: none;
    cursor: default;
}

.fastProposalAssessmentsEntryRecord input.form-control {

  /*border: none !important;*/
}

.fastProposalAssessmentsEntryRecord td {

  white-space: nowrap;

}

.fastProposalAssessmentsEntryRecord td input {

  font-size: 12.5px;
}

table > tbody > tr.compactProposalExportPriceItemRecord td input {

  /*vertical-align: top; 
  padding: 0px 0px 0px 0px !important;
  background: var(--top-bar-color) !important;*/
  /*white-space: nowrap !important;*/
}

.compactProposalExportPriceItemRecord input.form-control {

  /*border: none !important;
  height: 100px;*/
  border-radius: 5px !important;
}

.compactProposalExportPriceItemRecord textarea.form-control {

  /*border: none !important;
  max-width: 100%;
  min-width: 100%;
  min-height: 30px;
  resize: none;
  background: var(--top-bar-color) !important;
  border-radius: 0px;*/
}

.timeSheetEntryRecord input.form-control {

  border: none !important;
}

.disabled-btn i {

    color: lightgray !important;
    pointer-events: none;
    cursor: default;
}

.input-group-addon {

    /*width: 30% !important;*/
    background: var(--top-bar-color);
}

.tree-path .input-group-addon {

  font-size: 13px;
}

.tree-path h4 img {

  width: 20px;
  height: 20px;
  margin-top: -2.5px;
  margin-right: 5px;

}

.input-group-addon i { 

  color: black !important;
}

#user-settings-link {

  text-decoration: none;
}

#user-settings-link img {

  display: inline-block;
}

#user-nav-bar p {

  padding-top: 5px;
}

.userFullName {

  color: #3A383F;
  font-size: 13px;
  font-weight: bold;
}

.userSysRole {

  color: #667085;
  font-size: 12px;
}

#user-notifications-by-date-nav-tabs-div .nav-pills li a:hover {

  background: var(--table-color);
  border-bottom: 2px solid var(--table-color);
}

#user-notifications-by-date-nav-tabs-div .nav-pills li.active a:hover {

  background: var(--table-color);
}

#user-notifications-by-date-nav-tabs-div .nav-pills li a {

  border-radius: 0px;
  color: var(--side-nav-color);

}

#user-notifications-by-date-nav-tabs-div .nav-pills li.active a {

    background: none;
    border-radius: 0px;
    color: var(--side-nav-color);
    border-bottom: 2px solid var(--side-nav-color);
}

#user-notifications-by-date-nav-tabs-content-div img {

  margin-top: 20px;
  height: 30px;
  width: 30px;
}

/*#user-nav-bar.dropdown.dropdown-dflt ul.dropdown-menu {

    margin-right: 5px;
    width: 380px;
    background-color: white;
    border-radius: 5px;
    top: 100% !important;
    padding: 5px 15px !important;
}

#user-nav-bar.dropdown.dropdown-dflt ul.dropdown-menu li {

  width: 50%;
}

#user-nav-bar.dropdown.dropdown-dflt ul.dropdown-menu li a {

  padding: 8px !important;
}

#user-nav-bar.dropdown.dropdown-dflt ul.dropdown-menu li h5 {

  margin-top: 20px !important;
  margin-left: 12px !important;
  color: gray;
  font-size: 13.5px;
}

#user-nav-bar.dropdown.dropdown-dflt ul.dropdown-menu::before {
    
    content: '';
    border: none;
    z-index: 1000;
}

#user-nav-bar.dropdown.dropdown-dflt ul.dropdown-menu::after {
    
    content: '';
    border: none;
    z-index: 999;
}*/

#change-theme-dropdown-div.dropdown ul.dropdown-menu.change-theme-dropdown,
#set-language-dropdown-div.dropdown ul.dropdown-menu.set-language-dropdown {

    width: 30px !important;
    background-color: white;
    border-radius: 0px;
    /*top: 100% !important;*/
    /*right: -50px;*/
    padding: 0px !important;
}

#change-theme-dropdown-div.dropdown ul.dropdown-menu li,
#set-language-dropdown-div.dropdown ul.dropdown-menu li {

  width: 100% !important;
  padding: 0 !important;
}

/*#show-agents-dropdown-div.dropdown ul.dropdown-menu li {

  width: 100% !important;
  padding: 10px !important;
}*/

/*.dropdown ul.custom-dropdown li.rpp {

  width: 50% !important;
}*/

#project-rpp-div .dropdown-menu,
#proposal-rpp-div .dropdown-menu,
#customer-rpp-div .dropdown-menu,
#customer-interaction-rpp-div .dropdown-menu,
#engineer-rpp-div .dropdown-menu,
#supplier-rpp-div .dropdown-menu {

    text-align: left !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 5px;
    box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.2);
    position: absolute;
    right: 0px;
    font-size: 13px;
    z-index: 1000;
    min-width: 80px;
}

#view-projects-export-file-type-div .dropdown-menu,
#view-customers-export-file-type-div .dropdown-menu,
#view-project-export-file-type-div .dropdown-menu,
#view-proposals-export-file-type-div .dropdown-menu,
#view-proposal-export-file-type-div .dropdown-menu {

    text-align: left !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 5px;
    box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.2);
    position: absolute;
    right: 0px;
    font-size: 13px;
    z-index: 1000;
    min-width: 90px;
}


.dropdown ul.custom-dropdown {

    /*max-width: 50% !important;*/
    max-height: 120px !important;
    overflow: auto;
}

.dropdown ul.select-attachment-tags-list-dropdown.custom-dropdown {

    /*max-width: 50% !important;*/
    max-height: 80px !important;
    overflow: auto;
}

.custom-dropdown {

  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
}

.custom-dropdown ul {

  list-style: none;
}

.dropdown ul.custom-dropdown li {

    width: 100% !important;
    background-color: white;
    border-radius: 0px;
    padding: 10px !important;
    border-bottom: 1px solid var(--top-bar-color);
}

#show-agents-dropdown-div .dropdown ul.dropdown-menu.show-agents-dropdown li,
#customer-interaction-of-div .dropdown ul.dropdown-menu.show-interaction-subject-dropdown li,
#customer-interaction-method-div .dropdown ul.dropdown-menu.show-interaction-method-dropdown li {

    width: 100% !important;
    background-color: white;
    border-radius: 0px;
    padding: 10px !important;
    border-bottom: 1px solid var(--top-bar-color);
}

#show-agents-dropdown-div .dropdown ul.dropdown-menu.show-agents-dropdown,
#customer-interaction-of-div .dropdown ul.dropdown-menu.show-interaction-subject-dropdown,
#customer-interaction-method-div .dropdown ul.dropdown-menu.show-interaction-method-dropdown {

    max-height: 100px !important;
    overflow: auto;
}

#change-theme-dropdown-div.dropdown ul.dropdown-menu li a,
#set-language-dropdown-div.dropdown ul.dropdown-menu li a {

  padding: 0;
}

#change-theme-dropdown-div.dropdown ul.dropdown-menu li a span i,
#set-language-dropdown-div.dropdown ul.dropdown-menu li a span i {

  font-size: 10px;
}

.change-theme-dropdown,
.set-language-dropdown,
.show-agents-dropdown,
.show-interaction-subject-dropdown {

  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
}

.change-theme-dropdown ul,
.set-language-dropdown ul,
.show-agents-dropdown ul,
.show-interaction-subject-dropdown ul,
.show-interaction-method-dropdown ul {

  list-style: none;
}

/*modals*/

.form-intro {

    padding: 10px 0px 0px 0px;
}

.form-intro-statement {

    font-size: 14px; 
    font-weight: 300; 
    color: black;
    line-height: 1.7;
}

.modal-header {

    background-color: var(--top-bar-color);
    color: black;
    padding: 15px 15px !important; 
    border-bottom: none;
    border-top-right-radius: 5px !important;
    border-top-left-radius: 5px !important;
}

.modal-title {

    /*font-weight: 600;*/
    /*font-size: 15px;*/
}

.modal-footer {

    /*background-color: var(--top-bar-color);
    color: var(--text-color);
    padding: 10px 30px !important; */
    border-top: none;
}

.modal-divider {

    background: var(--table-color);
    height: 1.5px;
    margin-top: 20px;
    margin-bottom: 20px;
}


/*dashboard*/

.dashboard-overview-card-header .btn-style {

  background: var(--top-bar-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--text-color) !important;
  font-size: 12px;
  padding: 5px !important;
  cursor: pointer;

}

.dashboard-overview-card-header img {

  width: 20px;
  height: 20px;
  margin-top: -2.5px;
}

.dashboard-overview-card-header .btn-style.active {

  background: var(--text-color) !important;
  color: var(--top-bar-color) !important;
  font-size: 12px;
  padding: 5px !important;
  cursor: pointer;
  outline: 0;
  -webkit-box-shadow: unset;
  box-shadow: unset;

}

.viewSwitch .btn-style {

  background: var(--top-bar-color) !important;
  color: var(--button-color) !important;
  border: 1px solid var(--button-color) !important;
  font-size: 12px;
  padding: 5px !important;
  cursor: pointer;
}

.viewSwitch .btn-style.active {

  background: var(--button-color) !important;
  color: var(--top-bar-color) !important;
  font-size: 12px;
  padding: 5px !important;
  cursor: pointer;

}

/*projects*/

/*.accountProjectRecord i {

  color: var(--side-nav-color);
  font-size: 13px;
}*/

/*.projectTaskRecord i {*/

  /*color: var(--side-nav-color); */
  /*font-size: 13px;*/
/*}*/

.projectTaskRecord span.taskResourceTooltipster i {

  font-size: 15px;
}

#project-costs-preview-table-body i {

  font-size: 11px;
  color: var(--text-color);
  margin: 3px;
}

/*.view-project-manager-resource-details i {

  font-size: 11px;
  color: var(--text-color);
}

.view-project-budget-details i {

  font-size: 11px;
  color: var(--text-color);
}

.view-project-payment-details i {

  font-size: 11px;
  color: var(--text-color);
}*/

#viewProjectBudgetDetailsModal label,
#viewProjectPaymentsModal label,
#viewProjectTaskBudgetDetailsModal label {

  color: black;
}

.noEntityMsg {

  padding-top: 5px;
  color: var(--side-nav-color) !important;
}

#manage-project-tasks-views-nav-tabs a span {

  margin-right: 3px;
}

#manage-project-tasks-views-nav-tabs-div .nav-tabs {

  margin-top: 13px;
  border: none !important;
}

#manage-project-tasks-views-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;

}

#manage-project-tasks-views-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;

}

/** Optionally if you don't want word wrap **/
#manage-project-tasks-views-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#manage-project-tasks-views-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#manage-project-tasks-views-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#manage-project-tasks-views-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#view-customer-addresses-details-nav-tabs li.active a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;

}

#view-customer-addresses-details-nav-tabs li a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#view-customer-addresses-details-nav-tabs li {

  white-space: nowrap;
}

#view-customer-addresses-details-nav-tabs {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}



.projectTaskPaymentMilestoneRecord td .checkbox,
.projectPaymentMilestoneRecord td .checkbox {

  margin-top: -2.5px;
}

.projectTaskPaymentMilestoneRecord td .checkmark,
.projectPaymentMilestoneRecord td .checkmark {

  background-color: var(--side-nav-color) !important;
}

#viewProjectCustomerDetailsModal .nav-pills > li.active > a {

  background-color: var(--button-color);
  color: var(--top-bar-color);

}

.modal-intro img {

  width: 70px;
  height: 70px;
}

.modal-intro-statement {

  /*padding-top: 5px; */
  line-height: 1.6;
}

#viewProjectCustomerDetailsModal .nav-pills > li> a {

  color: var(--button-color);
  
}

#viewProjectCustomerDetailsModal .tab-pane {

  padding: 20px; 
  background: var(--top-bar-color); 
  border-radius: 5px;
} 

#manage-project-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#manage-project-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

/** Optionally if you don't want word wrap **/
#manage-project-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#manage-project-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#manage-project-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#manage-project-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#edit-project-task-details-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#edit-project-task-details-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

/** Optionally if you don't want word wrap **/
#edit-project-task-details-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#edit-project-task-details-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#edit-project-task-details-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#edit-project-task-details-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#dashboard-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;

}

#dashboard-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);

}

#dashboard-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;

}

#dashboard-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;

}

#dashboard-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;

}

#dashboard-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;

}

#dashboard-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;

}

#view-user-project-task-details-nav-tabs-div .nav-tabs > li > a {

    color: var(--button-color);
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--button-color) !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

/** Optionally if you don't want word wrap **/
#view-user-project-task-details-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#view-user-project-task-details-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#time-tracking-nav-tabs-div .nav-tabs > li > a {

    color: var(--button-color);
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 2px;
    border: 1px solid var(--button-color) !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

/** Optionally if you don't want word wrap **/
#time-tracking-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#time-tracking-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#admin-time-tracker-nav-tabs-div .nav-tabs > li > a {

    color: var(--button-color);
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 2px;
    border: 1px solid var(--button-color) !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

/** Optionally if you don't want word wrap **/
#admin-time-tracker-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#admin-time-tracker-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#admin-time-tracker-nav-tabs-div ul li a img, #time-tracking-nav-tabs-div ul li a img {

  width: 20px;
  height: 20px;
  margin-top: -2.5px;
  margin-right: 5px;
}

#admin-time-tracker-nav-tabs-div ul li.active a img, #time-tracking-nav-tabs-div ul li.active a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#admin-time-tracker-nav-tabs-div ul li a img {

  color: var(--side-nav-color);
}

#view-user-project-task-details-nav-content-div .tab-pane {

    background: white;
    border-radius: 5px;
}

#dashboard-project-kanban {

  padding: 0px 5px;
}

#dashboard-project-kanban img {

  width: 17px;
  height: 17px;
}

#project-kanban img {

  width: 17px;
  height: 17px;
}

#project-kanban .kanban-board, #dashboard-project-kanban .kanban-board {

  margin-top: 10px;
}

#project-kanban .kanban-board-header, #dashboard-project-kanban .kanban-board-header {

  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 12px;
}

.kanban-drag {

  padding: 10px !important;
  background-color: var(--top-bar-color) !important;
  border: 1px solid lightgray;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  min-height: 250px !important;

}

.kanban-item {

  /*background-color: var(--top-bar-color) !important;*/
  border: 1px solid #ececec;
}

#project-kanban .kanban-title-board, #dashboard-project-kanban .kanban-title-board {

  font-size: 13px;
}

#project-kanban .kanban-title-board, #dashboard-project-kanban .kanban-title-board { 

  color: white;
}

#project-kanban .kanban-item, #dashboard-project-kanban .kanban-item {

  border-radius: 2px;
  /*padding: 10px;*/
  font-size: 12.5px;
  color: gray;
  margin-bottom: 10px !important;
}

.gantt .bar {

  fill: white !important;
  stroke-width: 0.4 !important;
}

.gantt .bar .bar-label {

  fill: black !important;
  stroke-width: 0 !important;
}

.assignResourceDetails {

  padding: 15px;
  background: var(--top-bar-color);
  border-radius: 5px;
}

.assignResourceDetails label {

  font-size: 1.3rem;
  color: var(--side-nav-color);
}

.assignResourceDetails p {

  color: gray;
  font-size: 1.2rem;
}

.assignResourceDetails .headLabel {

  color: var(--button-color);
  font-size: 13.5px;
  font-weight: bold;
}

.assignResourceDetails h4 {

  color: var(--button-color);
  font-size: 13.5px;
  font-weight: bold;
}

.assignResourceDetails h5 {

  color: var(--button-color);
  font-size: 12px;
}

.ganttChartCard, .kanbanChartCard {

  background-color: white; 
  border-radius: 5px; 
  padding: 20px 10px;
}

.ganttChartCard .card-header, .kanbanChartCard .card-header {

  height: 30px;
}

.ganttChartCard a.ganttViewBtn.active, .kanbanChartCard a.ganttViewBtn.active {

  color: var(--side-nav-color) !important;
  background: white !important;
  border: 1px solid #D0D5DD !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.ganttChartCard .btn-group, .kanbanChartCard .btn-group {

  border-radius: 5px;
}

.gantt-chart-container .popup-wrapper {

    width: 200px;
    padding: 0px 10px !important;
    color: var(--top-bar-color) !important;
    background-color: var(--button-color) !important;
}

.agendaTask {

  padding: 10px 5px 5px 10px;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  background-color: white;
  /*color: var(--side-nav-color);*/
  border-radius: 5px;
}

.agendaTaskBox {

  padding: 5px 7.5px;
  background-color: var(--top-bar-color);
  color: var(--button-color);
  border-radius: 5px;
  margin-right: 10px;
  font-size: 12px;
  border: none;
}

#engineers-preview-table .agendaTaskCapsule {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  /*margin-bottom: 10px !important;*/
  color: white;
  border: none;
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;
}

/*#suppliers-preview-table .filterTagStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  color: white;
  border: none;
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;
}*/

#engineer-projects-tasks-preview-table .filterTagStyle,
#engineer-proposals-tasks-preview-table .filterTagStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  /*margin-bottom: 10px !important;*/
  color: white;
  border: none;
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;
}

#engineer-time-sheet-preview-table .filterTagStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  /*margin-bottom: 10px !important;*/
  color: white;
  border: none;
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;
}

.agendaTaskCapsule {

  border-radius: 30px;
  margin-right: 4px;
  color: black;
  border: 1px solid lightgray;
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--top-bar-color);
  white-space: nowrap;
}

.agendaTaskCapsule i {

  color: gray !important;
}

.agendaTask a {

  color: gray !important;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer; 
}

.agendaTaskCalendar {

  padding: 10px;
  /*background-color: white;*/
  color: var(--side-nav-color);
  border-radius: 5px;
}

.infoTooltipster i {

  color: black;
}

.table-style .infoTooltipster i {

  color: var(--top-bar-color);
}

.nav-tabs li.active .infoTooltipster i {

  color: var(--top-bar-color);
}

.nav-tabs li .infoTooltipster i {

  color: var(--side-nav-color);
}

#dashboard-tasks-todo-payments-body .infoTooltipster i {

  color: white;
}

.agendaPaymentsTab {

  padding: 10px;
  font-size: 12.5px;
  font-weight: bold;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  background-color: white !important;
  color: var(--side-nav-color) !important;
  border-radius: 5px;
}

.agendaReminder {

  padding: 10px 5px 5px 10px;
  /*border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;*/
  border: 1px solid lightgray !important;
  color: black;
  border-radius: 5px;
  margin-left: 3px;
}

.agendaReminder a {

  color: var(--side-nav-color) !important;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer; 
}

/*.agendaReminderDetails {

  padding: 15px;
  background-color: #fafafa;
  border-radius: 5px;
}*/

#dashboard-agenda-payments-nav-tab .nav-pills > li.active > a {

  background-color: var(--button-color) !important;
  color: var(--top-bar-color) !important;
  border-right-color: var(--button-color) !important;
  border-top-color: var(--button-color) !important;
  border-bottom-color: var(--button-color) !important;

}

#dashboard-agenda-events-nav-tab a.btn-style.eventsView.active {

  background: var(--side-nav-color) !important;
  color: white !important;
  border: 1px solid var(--side-nav-color) !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

#dashboard-agenda-events-nav-tab a.btn-style.eventsView.active img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);

}

#dashboard-agenda-events-nav-tab img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;

}

/*#dashboard-agenda-events-nav-tab a.btn-style.eventsView.active span {

  background: none !important;
  color: : blue !important;
  border: 1.5px solid var(--button-color) !important;

}*/

/*.gantt-container .popup-wrapper .pointer {

  border-color: var(--text-color) !important;
  border-top-color: var(--text-color) !important;
}*/
/*.projectProgress {

  padding: 10px 20px;
  border-radius: 5px;
  font-size: 13.5px;
  color: white;
}*/

.entityProgress {

  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  color: white;
}

.lowProgress {

  background: red;
}

.mediumProgress {

  background: #ff8566;
}

.highProgress {

  background: #3C9664;
}

#edit-project-task-details-nav-content-div .tab-pane {

    background: white;
    border-radius: 5px;
}

/*#edit-project-task-details-nav-content-div .tab-pane .editField {  

  padding: 20px 10px;
}
*/
.miniPadding {

  padding: 20px 10px;
}

.maxPadding {

  padding: 20px;
}

/*#edit-project-task-details-nav-content-div p {

  color: gray;
}*/

#manage-project-nav-content-div .tab-pane {

    background: white;
    border-radius: 5px;
}

#view-user-project-task-details-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
}

#time-tracking-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
}

#admin-time-tracker-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
}

/*proposals*/

/*.accountProposalRecord i {

  color: var(--side-nav-color); 
  font-size: 13px;
  margin-left: 5px;
}*/

.accountProposalRecord td span.infoTooltipster i {

  color: var(--side-nav-color);
}

#viewProposalCustomerDetailsModal .nav-pills > li.active > a {

  background-color: var(--button-color);
  color: var(--top-bar-color);

}

#viewProposalCustomerDetailsModal .nav-pills > li> a {

  color: var(--button-color);
  
}

#viewProposalCustomerDetailsModal .tab-pane {

  padding: 20px; 
  background: var(--top-bar-color); 
  border-radius: 5px;
}

/*.tab li.active {

    display: block;
}*/

#manage-proposal-nav-content-div .tab-pane {

    background: white;
    border-radius: 5px;
}

#proposal-assessment-tasks-nav-div .tab-pane {

    padding: 20px; 
    background: var(--table-color);
    border-radius: 5px;
}

/*#proposal-assessment-tasks-nav-div .tab-pane p { 

  color:  var(--button-color);
  font-size: 13.5px;
}*/

#proposal-assessment-tasks-nav-div .tab-pane .progress-bar { 

  background-color: var(--button-color);
  line-height: 20px;
}

#proposal-assessment-tasks-nav-div .tab-pane .progress { 
  
  background-color: var(--top-bar-color);
  height: 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.downloadAssessmentTaskAttachmentRecordBtn {

  color: var(--button-color);
}

#proposal-assessment-tasks-nav-div .nav-pills > li.active > a {

  background-color: var(--side-nav-color);
}

#proposal-assessment-tasks-nav-div .nav-pills > li {

  background-color: var(--table-color);
  border-radius: 4px;
}

#proposal-assessment-tasks-nav-div .dropdown-menu {

  min-width: 100px;
}

#proposal-assessment-tasks-nav-div .nav-pills > li.active p,  #proposal-assessment-tasks-nav-div .nav-pills > li.active h5 {

  color: var(--top-bar-color);
}

#proposal-assessment-tasks-nav-div .nav-pills > li h5 {

  color: var(--button-color);
}

#project-task-details-task-bom-preview-table-div .infoBox,
#project-task-details-task-bos-preview-table-div .infoBox,
#project-task-details-task-resources-preview-stats .infoBox,
#project-task-details-task-resources-preview-table-div .infoBox,
#project-task-details-task-payment-milestones-preview-table-div .infoBox,
#project-payment-milestones-preview-table-div .infoBox {

  background: var(--top-bar-color);
  border: 1px solid lightgray;
  color: var(--top-bar-color);
}

#project-task-details-task-bom-preview-table-div .infoBox p,
#project-task-details-task-bos-preview-table-div .infoBox p,
#project-task-details-task-resources-preview-stats .infoBox p,
#project-task-details-task-resources-preview-table-div .infoBox p,
#project-task-details-task-payment-milestones-preview-table-div .infoBox p {

  color: gray;

}

#project-payment-milestones-preview-table-div .infoBox p {

  font-size: 13px;
  color: gray;
}

#project-payment-milestones-preview-table-div .infoBox label {

  font-size: 14px;
  color: black;
}

/*#project-task-details-task-bom-preview-table table thead > tr > th,
#project-task-details-task-resources-preview-table table thead > tr > th,
#project-task-details-task-bos-preview-table table thead > tr > th {

    background: var(--side-nav-color) !important;
    color: var(--top-bar-color) !important;
    font-weight: 700;
    font-size: 13px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 12px !important;   
    vertical-align: middle !important;
}*/

/*#project-task-details-task-bom-preview-table table, 
#project-task-details-task-resources-preview-table table,
#project-task-details-task-bos-preview-table table {

  border: 1px solid var(--table-color) !important;
}*/

.chart-container {

  width: 100%; 
  min-height: 320px; 
  max-height: 320px; 

}

.coverBg {

  background-color: var(--button-color);
  color: var(--table-color);
  border-radius: 2px;
  margin-bottom: 10px;
}

.coverBg label {

  margin: 12px 12px 12px 7.5px;
}

#proposal-assessment-tasks-nav-div .badgeIcon {

    display: absolute;
    width: 20px;
    height: 20px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: white;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    float: right;
    border-radius: 50px;
}

.nav-tabs {

  border-bottom: none;
}

#manage-proposal-nav-tabs-div .nav-tabs > li.active > a, 
#importProposalsModal .nav-tabs > li.active > a,
#add-proposal-types-nav-tabs-div .nav-tabs > li.active > a,
#export-proposal-details-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#manage-proposal-nav-tabs-div img, #add-proposal-types-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#manage-proposal-nav-tabs-div .nav-tabs > li.active > a img, 
#add-proposal-types-nav-tabs-div .nav-tabs > li.active > a img,
#export-proposal-details-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#manage-proposal-nav-tabs-div .nav-tabs > li > a, 
#importProposalsModal .nav-tabs > li > a,
#add-proposal-types-nav-tabs-div .nav-tabs > li > a,
#export-proposal-details-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 25px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#manage-proposal-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#manage-proposal-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

#export-proposal-details-nav-tabs-content-div .tab-pane {

  padding: 10px 0px 0px 0px;

}

.inputSection {

  border: 1px solid lightgray; 
  border-radius: 5px; 
  padding: 5px 15px 5px 15px;
  background: var(--top-bar-color);

}

.inputSection .custom-control {
  
  max-width: 100% !important; 
  min-width: 80% !important; 
  min-height: 100px !important;
}

.alertBg {

  padding: 10px; 
  background: var(--top-bar-color); 
  border-radius: 5px;
  border: 1px solid lightgray;
}

/*.inputSection label {

  color: var(--side-nav-color);
}*/

/*.inputSection p {

  font-size: 13px;
}*/

.inputSection h4 {

  font-weight: bold;
}

.HelpCenterList {

  border: 1px solid var(--table-color); 
  border-radius: 5px; 
  padding: 0px 15px 0px 15px;
  background: white;
}

.HelpCenterList ul li {

  display: none;
}

.HelpCenterSection {

  border: 1px solid lightgray; 
  border-radius: 5px; 
  padding: 0px 15px 0px 15px;
  width: 100%;
  background: var(--top-bar-color);

}

.iframeWindow {

  border-radius: 10px; 
  border: 5px solid var(--table-color);
}

.navList ul li {

  padding: 7px 7px;
  /*background-color: #f6f6f6;*/
  border-radius: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  font-size: 13px;
  /*border: 1px solid #ececec;*/
  cursor: pointer;
  color: var(--side-nav-color);
  text-decoration: none;
}

.navList ul li.active {

  text-decoration: none;
  background-color: var(--table-color);
}

.navList ul li.active a {

  /*color: var(--side-nav-color);*/
}

.navList ul li i {

  width: 23px;
}

.navList ul li:hover {
  
  padding: 7px 7px;
  text-decoration: none;
  background-color: var(--table-color);
}

.navList ul li a:hover {

  text-decoration: none;
  /*background-color: var(--table-color);*/
}

.navList ul p {

  padding: 5px 0px 0px;
  font-weight: bold;
}

.navList ul p i {

  font-size: 12px;
  padding: 5px;
  background: var(--top-bar-color);
  border: 1px solid var(--table-color);
  border-radius: 5px;
  float: right;
}

/** Optionally if you don't want word wrap **/
#manage-proposal-nav-tabs-div .nav-tabs > li,
#add-proposal-types-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#manage-proposal-nav-tabs-div ul,
#add-proposal-types-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#manage-assessment-nav-content-div .tab-pane {

    background: white;
    border-radius: 5px;
}

#manage-assessment-nav-content-div .coverBg label {

  color: white;
}

#manage-assessment-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#manage-assessment-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#manage-assessment-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#manage-assessment-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 25px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#manage-assessment-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#manage-assessment-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

/** Optionally if you don't want word wrap **/
#manage-assessment-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#manage-assessment-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

/* Customers */

/*#add-customer-details-div {

  background: white;
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;

}*/

#add-customer-details-div h4 img, 
#add-customer-details-div h5 img,
#add-supplier-details-div h4 img, 
#add-supplier-details-div h5 img,
#add-project-details-div h4 img,
#add-project-details-div h5 img,
#add-engineer-details-div h4 img,
#add-engineer-details-div h5 img,
#add-proposal-details-div h5 img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#add-customer-details-div .h-divider,
#add-project-details-div .h-divider,
#add-proposal-types-nav-content-div .h-divider,
#add-engineer-details-div .h-divider,
#add-supplier-details-div .h-divider {

  background: lightgray;
}

#viewCustomerProjectDetailsModal .nav-pills > li.active > a,
#viewCustomerProposalDetailsModal .nav-pills > li.active > a {

  background-color: var(--button-color);
  color: var(--top-bar-color);

}

#viewCustomerProjectDetailsModal .nav-pills > li> a,
#viewCustomerProposalDetailsModal .nav-pills > li> a {

  color: var(--button-color);
  
}

#viewCustomerProposalDetailsModal .tab-pane {

  padding: 20px; 
  background: var(--top-bar-color); 
  border-radius: 5px;
}

#viewCustomerProjectDetailsModal .tab-pane {

  padding: 20px; 
  background: var(--top-bar-color); 
  border-radius: 5px;
}

#project-tasks-preview-table .progress-bar, 
#projects-preview-table .progress-bar, 
#view-project-tasks-preview-table .progress-bar,
#proposals-preview-table .progress-bar { 

  background-color: #34C759;
  color: black;
  /*margin-left: 2.5px;*/
  line-height: 18px;
}

#project-tasks-preview-table .progress, 
#projects-preview-table .progress, 
#view-project-tasks-preview-table .progress,
#proposals-preview-table .progress { 
  
  background-color: white;
  border: 1px solid #34C759;
  height: 21px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin-bottom: 0px !important;
  width: 100px;
  border-radius: 10px !important;
  text-align: center;
}

#project-tasks-preview-table .filterTagStyle, #view-project-tasks-preview-table .filterTagStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 4px;
  /*margin-bottom: 10px !important;*/
  color: white;
  border: none;
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;
}

#project-tasks-preview-table img, #view-project-tasks-preview-table img {

  width: 17px;
  height: 17px;
}

#projects-preview-table .filterTagStyle,
#proposals-preview-table .filterTagStyle {

  border-radius: 30px;
  margin-right: 4px;
  margin-left: 0px;
  /*margin-bottom: 10px !important;*/
  color: white;
  border: none;
  font-size: 10px;
  padding: 5px 10px;
  background: var(--table-color);
  white-space: nowrap;
}

#import-customers-data-nav-tabs img {

  width: 17px;
  height: 17px;
  margin-top: -2.5px;
  margin-right: 5px;
}

.interactionFileArea {

  font-size: 12px;
  color: #667085;
  border: 1px solid lightgray;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 10px 15px 0px 15px;

}

.interactionFileArea img {

  float: right;
  width: 17px;
  height: 17px;
}

.interactionFileDownloadArea {

  font-size: 12px;
  color: #667085;
  border: 1px solid lightgray;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 10px 10px 8px 10px;

}

.interactionFileDownloadArea p {

  color: #667085 !important;
}

/*.interactionFileDownloadArea a {

  float: right;
}*/

.interactionFileDownloadArea img {

  
  width: 17px;
  height: 17px;
  margin-top: -4px !important;
  margin-right: 10px;
  /*margin: 0px !important;*/
}

#customer-interactions-count-div img, #customer-exports-total-results img {

    width: 15px;
    height: 15px;
    margin-top: -2.5px;
}

#customer-interactions-nav-tabs-div .nav-tabs > li.active > a {

    color: var(--top-bar-color);
    background: var(--side-nav-color);
    border-radius: 5px;
    padding: 8px 13px !important;
    /*margin-bottom: 10px;*/
}

#customer-interactions-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 5px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;

}

#customer-interactions-nav-tabs-div .nav-tabs > li.active > a {

  border: 1px solid var(--button-color) !important;
}

#manage-customer-interactions-nav-tab .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#manage-customer-interactions-nav-tab .nav-tabs > li > a img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

/** Optionally if you don't want word wrap **/
#customer-interactions-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#customer-interactions-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#dashboard-agenda-nav-tab,
#dashboard-gantt-nav-tab,
#dashboard-kanban-nav-tab,
#dashboard-statistics-nav-tab {

  border: 1px solid lightgray;
  background-color: white; 
  border-radius: 5px;
}

/*#dashboard-agenda-nav-tabs-div .nav-pills > li.active > a {

    color: var(--top-bar-color);
    background: var(--side-nav-color);
    border-radius: 5px;
    padding: 8px 13px !important;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border: 1px solid var(--side-nav-color);

    margin-bottom: 5px;
}*/

/*#dashboard-agenda-nav-tabs-div .nav-pills > li > a {

    color: var(--side-nav-color);
    background: var(--top-bar-color);
    border: 1px solid var(--side-nav-color);
    margin-right: 10px;
    border-radius: 5px;
    padding: 8px 13px !important;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
    height: auto;

}*/

#dashboard-agenda-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;

}

#dashboard-agenda-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);

}

#dashboard-agenda-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;

}

#dashboard-agenda-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;

}

#dashboard-agenda-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;

}

#dashboard-agenda-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;

}

#dashboard-agenda-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;

}

#dashboard-tasks-todo-timeline-nav-tabs-div .nav-tabs > li.active > a {

    color: var(--top-bar-color);
    border: none !important;
    background: var(--side-nav-color);
    border-radius: 4px;
    padding: 8px !important;
}

#manage-customer-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#manage-customer-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#manage-customer-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#manage-customer-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

/** Optionally if you don't want word wrap **/
#manage-customer-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#manage-customer-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#manage-customer-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#manage-customer-nav-tabs-div .nav-tabs > li > a, 
#importCustomersModal .nav-tabs > li > a,
#importProjectsModal .nav-tabs > li > a,
#dashboard-agenda-nav-tabs-div .nav-tabs > li > a,
#dashboard-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#view-customer-contacts-details-nav-tabs > li.active > a {

  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--top-bar-color);
  background: var(--button-color);

}

#view-customer-contacts-details-nav-tabs > li.active > a {

  border: 1px solid var(--button-color) !important;
}

#view-customer-contacts-details-nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#view-customer-contacts-details-nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#view-customer-contacts-details-nav-tabs img {

  height: 20px;
  width: 20px;
  margin-top: -2px;
  margin-right: 5px;
}

#view-customer-contacts-details-nav-tabs > li {

    white-space: nowrap;
}

#view-customer-contacts-details-nav-tabs ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#view-customer-addresses-details-nav-tabs > li.active > a {

  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--top-bar-color);
  background: var(--button-color);

}

#view-customer-addresses-details-nav-tabs > li.active > a {

  border: 1px solid var(--button-color) !important;
}

#view-customer-addresses-details-nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#view-customer-addresses-details-nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#view-customer-addresses-details-nav-tabs img {

  height: 20px;
  width: 20px;
  margin-top: -2px;
  margin-right: 5px;
}

#view-customer-addresses-details-nav-tabs > li {

    white-space: nowrap;
}

#view-customer-addresses-details-nav-tabs ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#dashboard-tasks-todo-timeline-nav-tabs-div .nav-tabs > li > a {

    color: var(--top-bar-color);
    background: var(--button-color);
    font-size: 13px;
    border: none !important;
    border-radius: 4px;
    padding: 8px !important;
    margin-right: 5px;
    margin-bottom: 3px;
}

#manage-customer-nav-content-div .tab-pane {

    background: white;
    border-radius: 5px;
}

#manage-customer-nav-content-div h4 img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

/*#manage-customer-nav-content-div p img {

  height: 15px;
  width: 15px;
  margin-top: -4px;
  margin-right: 5px;
}*/



#filtered-customers-base-count {

    font-weight: 600;
}

.edit-customer-interaction-details {

  color: black;
  font-size: 13px;
  margin-left: 5px;
}

.timeline-header img {

  height: 15px !important;
  width: 15px !important;
  margin-top: -2px;
  margin-left: 5px;
}

.interactionMethod {

  padding: 4px 8px;
  background: #F9F5FF;
  color: var(--text-color);
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid lightgray;
}

.interactionMethod img {

  width: 17px !important;
  height: 17px !important;
  margin-top: -2.5px;
  margin-right: 5px;
}

#search-customer-interactions-filter-off .has-feedback .form-control {

  padding-right: 10px;
}

#customer-interactions-sort-options .sortOptions .dropdown-menu {

  top: 100% !important;
  left: 0px !important;
}

#search-customer-interactions-filter-off .dropdown-menu {

  display: none !important;
}

/*.typeahead {

  top: 100% !important;
}*/

#search-customer-interactions-filter-off .dropdown-menu > li > a {

  white-space: normal;
}

.table-style table {

    /*border: 1px solid var(--top-bar-color);*/
    /*margin-top: 10px;*/
}

.table-style table thead > tr > th {
    
    background: white;
    color: black;
    /*var(--top-bar-color)*/
    font-weight: 300;
    font-size: 13px;
    font-weight: bold;
    padding: 12px 20px !important;   
    vertical-align: middle !important;
    white-space: nowrap;
}

.table-style .table-bordered thead > tr > th {

    /*border-top: 1.5px solid var(--side-nav-color) !important;*/
    border-bottom: none !important;
    
    background: var(--side-nav-color);
    color: var(--top-bar-color);
    font-weight: 700;
    font-size: 13px;
    padding: 12px 20px !important;  
    vertical-align: middle !important;
}

.input-group .form-control:first-child {

  /*border-radius: 0px !important;*/
}

div.customerRepContacts, div.customerAffiliateContacts {

  padding: 10px 0px;
}

.table-style tbody > tr > td {

  font-size: 12.5px;
  vertical-align: baseline;
}

.table-style .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

.table-style .table-striped > tbody > tr:nth-of-type(2n) {

    background: white;
}

#supplier-resources-purchase-orders-preview-table .table.table-striped > tbody > tr:nth-of-type(2n) > td,
#supplier-materials-purchase-orders-preview-table .table.table-striped > tbody > tr:nth-of-type(2n) > td,
#supplier-services-purchase-orders-preview-table .table.table-striped > tbody > tr:nth-of-type(2n) > td,
#documents-preview-table .table.table-striped > tbody > tr:nth-of-type(2n) > td {

    border-top: none !important;
}

#documents-preview-table .table-striped > tbody > tr:nth-of-type(4n+1), 
#documents-preview-table .table-striped > tbody > tr:nth-of-type(4n+2) {

  background: var(--top-bar-color);
}

#documents-preview-table .table-striped > tbody > tr:nth-of-type(4n+3), 
#documents-preview-table .table-striped > tbody > tr:nth-of-type(4n+4) {

  background: white;
}

#supplier-resources-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+1),
#supplier-resources-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+2),
#supplier-materials-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+1),
#supplier-materials-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+2),
#supplier-services-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+1),
#supplier-services-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+2) {

    background: var(--top-bar-color);
}

#supplier-resources-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+3), 
#supplier-resources-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+4),
#supplier-materials-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+3), 
#supplier-materials-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+4),
#supplier-services-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+3), 
#supplier-services-purchase-orders-preview-table .table-striped > tbody > tr:nth-of-type(4n+4) {

    background: white;
}

.dashboard-charts-well .table-style .statusSideBar {

  margin-right: 5px;
}

#add-proposal-assessment-task-resource, #add-proposal-assessment-task-attachment {

  color: var(--button-color) !important;
}

#proposal-assessment-tasks-nav-content label span {

  color: var(--side-nav-color);
}

#proposal-assessment-tasks-nav-content table {

  border: 1px solid var(--top-bar-color);
}

.removeProposalAssessmentTaskResource, 
.removeProposalAssessmentTaskAttachment, 
.editProposalAssessmentTaskResource {

  color: var(--side-nav-color) !important;
  margin-top: 2px;
}

.viewPODetailsBtn {

  cursor: pointer;
}

/*#viewUserNotificationForm .table-style .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--table-color);
}

#viewUserNotificationForm .table-style .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--top-bar-color);
}*/

#viewUserNotificationForm .table-style {

  margin-top: 0px !important;
}

/* The actual timeline (the vertical ruler) */
.timeline {

  position: relative;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: #EEEEEE;
  top: 20px;
  bottom: 0;
  margin-left: 0px;
}

/* Container around content */
.timeline-container {

  position: relative;
  background-color: inherit;
}

.timeline-container .timeline-header {

  margin-top: 50px;
}

/* The circles on the timeline */
.timeline-container h4 {
  /*content: '';*/
  position: absolute;
  /*width: 15px;
  height: 15px;*/
  left: -14px;
  background-color: #F2F4F7;
  border: 1px solid #E0E0E0;
  top: -60px;
  border-radius: 30px;
  padding: 5px 8px;
  z-index: 1;
  font-size: 13px;
  color: #3A383F;
}

.timeline {

  padding: 10px 15px;

}

.timeline h4 {

  font-size: 14px;
}

.interactionAttachments .input-group-addon {

  width: 30px !important;
}

.interactionAttachments .input-group {

  width: 100% !important;
}

.interactionAttachments a {

  text-decoration: none;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  /*left: 50%;*/
}

/* Add arrows to the left container (pointing right) */
/*.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}*/

/* Add arrows to the right container (pointing left) */
/*.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}*/

/* Fix the circle for containers on the right side */
.right::after {
  left: 0px;
}

/* The actual content */
.timeline-content {
  
  padding: 0px 0px 10px 30px;
  position: relative;
  overflow-wrap: break-word;
}

.timeline-content p {

  color: #3A383F;
  font-size: 13px;
}

.timeline img {

  width: 20px;
  height: 20px;
  margin-top: -2.5px;
  margin-right: 5px;
}

.collapsableInteractionDetails {

  /*background: var(--top-bar-color);*/
  /*border: 0.5px solid lightgray;*/
  width: 100%;
  /*border-radius: 5px;*/
}

/*.collapsableInteractionDetails div {

  border-radius: 5px;
}*/

.collapsableInteractionDetails p {

  font-size: 13px;
  color: black;
}

.collapsableInteractionDetails label {

  font-size: 13px;
  color: black;
}

.collapsableInteractionDetails label i {

  color: black;
}

.collapsableInteractionDetails span {

  /*color: var(--side-nav-color);*/
  font-size: 13px;
  min-width: 25px;
}

.collapsableInteractionDetails i {

  min-width: 17px;
  font-size: 12px;
}

.expand-interaction-details {

  font-size: 10px;
  color: #3A383F;
  text-decoration: none; 
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid #E0E0E0;
  background: #F2F4F7;
}

.expand-interaction-details:hover {

  text-decoration: none;
}

.interactionEventViewDetails {

  color: #3A383F !important; 
  font-size: 10px !important; 
  text-decoration: none; 
  cursor: pointer;
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid #E0E0E0;
  background: #F2F4F7;
}

.interactionEventViewDetails:hover {

  text-decoration: none;
}

#customer-projects-total-results img, #customer-proposals-total-results img {

  width: 15px !important;
  height: 15px !important;
  margin-top: -2.5px;
}

/*suppliers*/

.issueSupplierPO, .downloadSupplierPO  {

  text-decoration: none !important;
  background: var(--side-nav-color) !important;
  color: var(--top-bar-color);
  /*margin-left: 5px;*/
  margin-right: 5px;
  /*float: right;*/
  font-size: 13px;
}

.issueSupplierPO img, .downloadSupplierPO img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
  width: 18px !important;
  height: 18px !important;
}

.setSupplierPOFullfilled, .setSupplierPONotFullfilled {

  text-decoration: none !important;
  background: var(--side-nav-color) !important;
  color: var(--top-bar-color);
  /*margin-left: 5px;*/
  margin-right: 5px;
  /*float: right;*/
  font-size: 13px;
}

.setSupplierPOFullfilled img, .setSupplierPONotFullfilled img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
  width: 18px !important;
  height: 18px !important;
}

.issueSupplierPO:hover, .setSupplierPOFullfilled:hover, .setSupplierPONotFullfilled:hover, .downloadSupplierPO:hover {

  text-decoration: none;
  cursor: pointer;
  color: var(--top-bar-color);
}

.issueSupplierPO:focus, .setSupplierPOFullfilled:focus, .setSupplierPONotFullfilled:focus, .downloadSupplierPO:focus {

  text-decoration: none;
  cursor: pointer;
  color: var(--top-bar-color);
}

#manage-supplier-nav-content-div .tab-pane {

    /*padding-top: 20px;*/
    background: white;
    border-radius: 5px;
}

.poResourceItemEntryRecord input.form-control,
.poMaterialItemEntryRecord input.form-control,
.poServiceItemEntryRecord input.form-control {

  border: none !important;
}

#supplier-purchase-orders-nav-tabs-div ul li.active a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#supplier-purchase-orders-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#supplier-purchase-orders-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#supplier-purchase-orders-nav-tabs-div .nav-tabs > li > a img {

  height: 20px;
  width: 20px;
  margin-top: -2.5px;
}

#supplier-purchase-orders-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#supplier-purchase-orders-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

#supplier-projects-nav-tabs-div ul li.active a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#supplier-projects-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#supplier-projects-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#supplier-projects-nav-tabs-div .nav-tabs > li > a img {

  height: 20px;
  width: 20px;
  margin-top: -2.5px;
}

#supplier-projects-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#supplier-projects-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

#supplier-profile-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#supplier-profile-nav-tabs-div .nav-tabs > li > a img {

  height: 20px;
  width: 20px;
  margin-top: -2.5px;
}

#supplier-profile-nav-tabs-div  ul li.active a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#supplier-profile-nav-tabs-div .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#supplier-profile-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#supplier-profile-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

#manage-supplier-nav-tabs-div .nav-tabs > li.active > a, #importSuppliersModal .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#manage-supplier-nav-tabs-div .nav-tabs > li > a img {

  height: 20px;
  width: 20px;
  margin-top: -2.5px;
}

#manage-supplier-nav-tabs-div  ul li.active a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#manage-supplier-nav-content-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

.table tbody > tr > td > a img {

  height: 17px !important;
  width: 17px !important;
  margin: 0px !important;
}

#manage-supplier-nav-tabs-div .nav-tabs > li > a, #importSuppliersModal .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#manage-supplier-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#manage-supplier-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

/** Optionally if you don't want word wrap **/
#manage-supplier-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#manage-supplier-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

/*engineers*/

#viewEngineerProjectDetailsModal .nav-pills > li.active > a {

  background-color: var(--button-color);
  color: var(--top-bar-color);

}

.engineerViewSupplierDiv p, .engineerEditSupplierDiv p {

    color: gray !important;
    margin-top: 5px;
}

#viewEngineerProjectDetailsModal .nav-pills > li> a {

  color: var(--button-color);
  
}

#viewEngineerProjectDetailsModal .tab-pane {

  padding: 20px; 
  background: var(--top-bar-color); 
  border-radius: 5px;
}

#manage-engineer-nav-content-div .tab-pane {

    /*padding: 20px 20px 10px 20px; */
    background: white;
    /*border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;*/
    border-radius: 5px;
}

#manage-engineer-tasks-nav-tabs-div .nav-tabs > li.active > a {

    color: var(--top-bar-color);
    background: var(--side-nav-color);
    border-radius: 3px;
    padding: 5px 12px !important;
    margin-bottom: 5px;
}

#manage-engineer-tasks-nav-tabs-div .nav-tabs > li > a {

    color: var(--side-nav-color);
    background: var(--top-bar-color);
    border: 1.5px solid var(--side-nav-color) !important;
    margin-right: 10px;
    border-radius: 3px;
    padding: 5px 12px !important;
    margin-bottom: 5px;
}

#manage-engineer-nav-tabs-div .nav-tabs > li.active > a, #importEngineersModal .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--top-bar-color);
    background: var(--button-color);
    border: 1px solid var(--button-color) !important;
}

#manage-engineer-nav-tabs-div img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#manage-engineer-nav-tabs-div .nav-tabs > li.active > a img {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

#manage-engineer-nav-tabs-div .nav-tabs > li > a, #importEngineersModal .nav-tabs > li > a {

    color: black;
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 13px !important;
}

#manage-engineer-nav-tabs-div .nav-tabs > li > a > span {

  margin-left: 2px;
}

#manage-engineer-nav-tabs-div .nav-tabs > li > a > span > i {

  font-size: 12px;
}

/** Optionally if you don't want word wrap **/
#manage-engineer-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

#manage-engineer-nav-tabs-div ul {

    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

.engineerUtilization {

  padding: 10px 20px;
  border-radius: 5px;
  font-size: 13.5px;
  color: white;
}

.lowUtilization {

  background: #3C9664;
}

.mediumUtilization {

  background: #ff8566;
}

.highUtilization {

  background: red;
}

/*login page*/

.featuresList p {

  font-size: 2.7vmin !important;
  padding-left: 10px;
}

.featureItem {

  margin-bottom: 30px;
}


#reg-main-div input, #reg-main-div textarea, #login-panel input, #reset-panel input  {

    /*border: 1px gray !important; 
    background: white !important; 
    outline: 0 !important;
    box-shadow: none !important;
    color: black !important;*/

    outline: 0 !important;
    box-shadow: none !important;
    color: black !important;
}

#new-password-panel input  {

  /*border: 1px gray !important; 
  background: #ececec !important;*/ 
  outline: 0 !important;
  box-shadow: none !important;
  color: black !important;
}

#reg-main-div select {

    border: 1px white !important; 
    background-color: #f6f6f6 !important; 
    outline: 0 !important;
    box-shadow: none !important;
}

.btn-style {

    background: var(--top-bar-color);
    color: black;
    border: 1px solid #D0D5DD;
    font-size: 13px;
    border-radius: 25px;
    padding: 6px 14px;
}

.option-btn-style {

  background: var(--top-bar-color) !important;
  color: var(--side-nav-color)  !important;
  border: 1px solid var(--table-color);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 2px;
  margin-right: 5px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;

}

#dashboard-agenda-tasks-view-options, #dashboard-agenda-payments-view-options {

  margin: 10px 0px;
}

.option-btn-style:hover {

    text-decoration: none;
    cursor: pointer;
}

.btn-style span i {

  margin-right: 2px; 
  font-size: 12px;
}

.fltr-btn-style {

    background: var(--top-bar-color) !important;
    color: var(--side-nav-color) !important;
    font-size: 12px;
    border: 1px solid var(--side-nav-color) !important;
    font-weight: bold;
    padding: 7px 10px;
}

.fltr-lane {

  font-size: 12px; 
  background: var(--side-nav-color) !important; 
  color: var(--top-bar-color) !important; 
  border-radius: 5px 0px 0px 5px; 
  padding: 7px 12px 8.5px;
}

.projectsByCustomerFilter,
.proposalsByCustomerFilter,
/*.clearProjectFilter,*/
.clearProposalFilter {

  min-width: 120%;
  /*white-space: nowrap;*/
}

#projects-by-customer-filter .clearProjectFilter {

  min-width: 120%;
}

/*.projectsByCustomerFilter a,
.proposalsByCustomerFilter a,
.engineersBySupplierFilter a {

  min-width: 100%;
}*/

.export-btn-style {

  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-right: 0px;
  /*margin-top: -1px !important;*/
  /*height: 35px !important;*/

}

table td input {
  
  top:0;
  left:0;
  margin: 0;
  height: 100% !important;
  width: 100%;
  border-radius: 0 !important;
  border: none;
  padding: 0;
  box-sizing: border-box;
  background: none !important;
}

.modal-xl {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  
}

.modal-content h4 img {

  height: 23px;
  width: 23px;
  margin-top: -4px;
  margin-right: 5px;
}

.modal-content h5 img {

  height: 17px;
  width: 17px;
  margin-top: -3px;
  margin-right: 5px;
}

.modal-content li img {

  height: 20px;
  width: 20px;
  margin-top: -3px;
  margin-right: 5px;
}

.modal-xl .modal-content {

  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0px !important;
  box-shadow: none;
}

.modal-xl .modal-header {

  border-radius: 0px !important;
}

#userNotificationCenterModal .modal-xl {

    width: 40%;
    height: 100%;
    margin: 0;
    padding: 0;
    left: 60%;
    top: 0;
  
}

.table > tbody > tr > td {
    
    padding: 12px 20px !important;
}

#importProjectsDataForm .table > tbody > tr > td {

  padding: 3px;
}

#importProjectsDataForm .input-sm {

  padding: 5px;
}

.input-style-sp {

    padding: 10px 15px 1px 15px; 
    border-radius: 3px;
    background-color: var(--table-color);
}

.input-style {

    padding: 10px 15px; 
    border-radius: 3px;
    background-color: var(--table-color);
}

.registeration-bg {

    position: relative;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    background: url("../images/dev-ops-bg.png");
    /*background: url("../images/registeration-bg.jpg");*/
    height: 100vh;
    background-size: cover;
}

.main-bg {

    position: relative;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    /*background: url("../images/dev-ops-bg.png");*/
    background: url("../images/registration-bg.jpg");
    height: 100vh;
    /*background-size: cover;*/
}

.overlay {

  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  mix-blend-mode: overlay;
  background-color: #205d75;  
}

.special-bg {

    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    /*background: url("../images/registeration-bg.jpg");*/
    /*background: linear-gradient(to bottom right, #1cb5e0, #000046);  */
    background: linear-gradient(to bottom right, #256D7D, #000046);  
    color: white;
    /*background-color: lightgray;*/
    height: 100vh;
    /*opacity: .25;*/
    /*width: 100%;*/
    background-size: cover;
}

.bgbgbg {

    position: absolute;
    /*z-index: 30;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    height: 100vh;
    /*background: url("../images/login-bgd.png");*/
    background:  background: rgb(154,45,190);
    background: linear-gradient(254deg, rgba(154,45,190,0.3015405991498161) 0%, rgba(189,245,250,0.27913163556438203) 100%);
    /*background: linear-gradient(to bottom right, #1cb5e0, #000046);  */
    /*opacity: .25;*/
    /*width: 100%;*/
    background-size: cover;
}

.bgbgsm {

    position: absolute;
    /*z-index: 30;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    height: 100vh;
    background:  background: rgb(154,45,190);
    background: linear-gradient(254deg, rgba(154,45,190,0.3015405991498161) 0%, rgba(189,245,250,0.27913163556438203) 100%);
    /*background: linear-gradient(to bottom right, #1cb5e0, #000046);  */
    /*opacity: .25;*/
    /*width: 100%;*/
    background-size: cover;
}

.signInForm {

  background: #3284FF; 
  padding: 30px 50px 10px 50px; 
  border-radius: 10px; 
  box-shadow: 2px 2px 5px 5px rgba(0.2,0.2,0.2,0.2);
  color: white;
  /*margin-top: 15%;*/
}

.signInForm label {

  /*color: white;*/
}

.signInHeader {

  position: fixed;
  left: 50%;
  top: 60px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
}

.signInFooter {

  /*position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, -50%);
  margin: 0 auto;*/
}

.socialLinksBg {

    background-color: #FAFAFA; 
    border: 1px solid #FAFAFA;
    border-radius: 1em;
}

.modal { 

    overflow: auto !important; 
}

/* tooltipster punk*/

.tooltipster-sidetip.tooltipster-punk.tooltipster-punk-customized .tooltipster-box {
    
    background: var(--side-nav-color) !important;
    border: 1px solid var(--side-nav-color) !important;
    border-radius: 5px;
    box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
    font-size: 12px;
}

.tooltipster-sidetip.tooltipster-punk.tooltipster-punk-customized .tooltipster-content {
    
    color: white !important;;
    padding: 7px;
}

.tooltipster-arrow-border{
  border-bottom-color: var(--side-nav-color) !important;
}
.tooltipster-sidetip.tooltipster-punk.tooltipster-left .tooltipster-arrow-border{
  border-left-color: var(--side-nav-color) !important; 
}
.tooltipster-sidetip.tooltipster-punk.tooltipster-right .tooltipster-arrow-border {border-right-color: var(--side-nav-color) !important;}
.tooltipster-sidetip.tooltipster-punk.tooltipster-top .tooltipster-arrow-border {border-top-color: var(--side-nav-color) !important;}
.tooltipster-sidetip.tooltipster-punk.tooltipster-bottom .tooltipster-arrow-border {border-bottom-color: var(--side-nav-color) !important;}

/*light*/

.tooltipster-sidetip.tooltipster-light.tooltipster-light-customized .tooltipster-box {
    
    background-color: white;
    /*border: 1px solid lightgray;*/
    border-radius: 5px;
    box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.4);
    /*min-height: 100% !important;
    overflow-y: hidden !important;*/
}

.tooltipster-sidetip.tooltipster-light.tooltipster-light-customized .tooltipster-content {
    
    color: #FAFAFA;
    /*background: white;*/
    padding: 0;
    /*min-height: 100% !important;
    overflow-y: hidden !important;*/
}

.tooltipster-arrow-border{border-bottom-color: #FAFAFA}
.tooltipster-sidetip.tooltipster-light.tooltipster-left .tooltipster-arrow-border{border-left-color: lightgray}
.tooltipster-sidetip.tooltipster-light.tooltipster-right .tooltipster-arrow-border{border-right-color: lightgray}
.tooltipster-sidetip.tooltipster-light.tooltipster-top .tooltipster-arrow-border{border-top-color: lightgray}
.tooltipster-sidetip.tooltipster-light.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color: lightgray}

.tooltipster-sidetip.tooltipster-light.tooltipster-left .tooltipster-arrow-background{border-left-color: white}
.tooltipster-sidetip.tooltipster-light.tooltipster-right .tooltipster-arrow-background{border-right-color: white}
.tooltipster-sidetip.tooltipster-light.tooltipster-top .tooltipster-arrow-background{border-top-color: white}
.tooltipster-sidetip.tooltipster-light.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color: white}

/*charts*/

.tooltipster-sidetip.tooltipster-charts.tooltipster-charts-customized .tooltipster-box {
    
    background: var(--side-nav-color);
    border: 1px solid var(--side-nav-color);
    border-radius: 2px;
    box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
}

.tooltipster-sidetip.tooltipster-charts.tooltipster-charts-customized .tooltipster-content {
    
    color: var(--top-bar-color);
    padding: 5px 20px;
}

.tooltipster-arrow-border{border-bottom-color: var(--side-nav-color)}
.tooltipster-sidetip.tooltipster-charts.tooltipster-left .tooltipster-arrow-border{border-left-color: var(--side-nav-color)}
.tooltipster-sidetip.tooltipster-charts.tooltipster-right .tooltipster-arrow-border{border-right-color: var(--side-nav-color)}
.tooltipster-sidetip.tooltipster-charts.tooltipster-top .tooltipster-arrow-border{border-top-color: var(--side-nav-color)}
.tooltipster-sidetip.tooltipster-charts.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color: var(--side-nav-color)}

.tooltipster-sidetip.tooltipster-charts.tooltipster-left .tooltipster-arrow-background{border-left-color: var(--side-nav-color)}
.tooltipster-sidetip.tooltipster-charts.tooltipster-right .tooltipster-arrow-background{border-right-color: var(--side-nav-color)}
.tooltipster-sidetip.tooltipster-charts.tooltipster-top .tooltipster-arrow-background{border-top-color: var(--side-nav-color)}
.tooltipster-sidetip.tooltipster-charts.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color: var(--side-nav-color)}

/*.loader img {

    width: 70px; 
    height: 70px;
}*/

.loader, .div-loader {

    position: absolute;
    z-index: 9999;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.map {
    
    height: 350px;
    width: 100%;
    /*padding: 0;*/
}

.map-subpanel {

    /*margin: 8px -19px;*/
}

#Gmap {
    
    height: 350px;
    width: 100%;
}

#NGmap {
    
    height: 350px;
    width: 100%;
}

/*.dropdown-menu .divider {

    background-color: var(--side-nav-color) !important;
}*/

#tooltip_content .h-divider {

    height: 1.5px;
    width: 100%;
    background-color: #FAFAFA;
}

.h-divider {

     height: 1px;
     width: 100%;
     background-color: var(--table-color);
     margin: 10px 0px 10px 0px;
}

/*.service-checkbox {
    
    margin-left: 10px;    
}*/

.popover {

    font-family: 'Kalam', cursive;;
    text-align: left;
    background-color: white;
    border: 1px solid lightgray;
    max-width: 280px;
    width: auto;
}

.popover-title {
    
    /*background-color: #337ab7;*/
    color: white;
    background-image: url('../images/subtle-grey.png');
    height: 100px;
    padding-top: 10px;
    border: none;
}

/*.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th {

    padding: 10px 12px 5px 8px !important;
    
}*/

#upcoming-events-body-div table tr, #upcoming-events-body-div table tr th {

    padding: 15px 5px 5px 15px;
    font-weight: 100;

}

#upcoming-events-body-div p {

    font-size: 1.375rem;
}

.upcomingEventsTableHead {

    background: var(--table-color);  
    color: var(--text-color);;
    font-weight: 200;
    font-size: 14px;

}

.widgetBottomRightStyle {

    color: var(--side-nav-color);
    border-bottom-right-radius: 0.3em;
    padding: 9px 10px;
}

.widgetBottomLeftStyle {

    background: var(--button-color);
    color: white;
    border-bottom-left-radius: 0.3em;
    padding: 9px 10px;
}

.weatherInfo {

    color: var(--top-bar-color);
}

.customerProfileRecordsTable thead {

    font-weight: 200;
    font-size: 14px;
    background: var(--side-nav-color);
    color: var(--top-bar-color);
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 15px !important;
    border-bottom: none !important;
}

.customerProfileRecordsTableDiv .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

.customerProfileRecordsTableDiv .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--table-color);
}

.clearCustomerSearchFilterBtnDiv {

    display: inline-block; 
    background: var(--side-nav-color); 
    border: 1px solid var(--side-nav-color); 
    border-radius: 0.2em; 
    text-align: center; 
    /*height: 40px; 
    width: 160px; */
    font-size: 15.5px; 
    font-weight: 200; 
    line-height: 2.5; 
    margin-left: 10px;
    padding: 0px 15px;
    
}

.clearProposalSearchFilterBtnDiv {

    display: inline-block; 
    background: var(--side-nav-color); 
    border: 1px solid var(--side-nav-color); 
    border-radius: 0.2em; 
    text-align: center; 
    /*height: 40px; 
    width: 160px; */
    font-size: 15.5px; 
    font-weight: 200; 
    line-height: 2.5; 
    margin-left: 10px;
    padding: 0px 15px;
    
}

.clearCustomerSearchFilterBtnDiv a {

    cursor: pointer; 
    text-decoration: none;
    color: var(--top-bar-color);
}

.clearProposalSearchFilterBtnDiv a {

    cursor: pointer; 
    text-decoration: none;
    color: var(--top-bar-color);
}

.searchCustomerSearchMatchBtnDiv {

    display: inline-block; 
    background: var(--top-bar-color); 
    color: var(--side-nav-color);
    border: 1px solid var(--top-bar-color);
    border-radius: 0.2em;
    text-align: center;
    /*height: 40px;*/
    font-size:15.5px;
    line-height: 2.5;
    padding: 0px 15px;
}

.searchProposalSearchMatchBtnDiv {

    display: inline-block; 
    background: var(--top-bar-color); 
    color: var(--side-nav-color);
    border: 1px solid var(--top-bar-color);
    border-radius: 0.2em;
    text-align: center;
    /*height: 40px;*/
    font-size:15.5px;
    line-height: 2.5;
    padding: 0px 15px;
}


/*.table > tbody > tr > td {

    vertical-align: middle !important;
}*/

#import-projects-data-table > tbody > tr > td,
#import-proposals-data-table > tbody > tr > td,
#import-customers-data-table > tbody > tr > td,
#import-engineers-data-table > tbody > tr > td,
#import-suppliers-data-table > tbody > tr > td {

  padding: 0px;
}

.customerProfileRecordsTableRow td a {

    color: var(--top-bar-color);
    font-size: 13px;
    font-weight: 700;
}

.customerProfileRecordsTableRow td a:hover {

    color: var(--top-bar-color);
}

.table-head {

    font-weight: 200;
    font-size: 14px;
    color: #f6f6f6;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 15px !important;
    border-bottom: none !important;
}

#dashboard-events-list .table-borderless > thead {

    background: var(--button-color);
    border: none;

}

#dashboard-events-list .table > thead > tr > th {

    border-bottom: none !important;
}



#customer-segments-preview-div .table-borderless > thead > tr > th {

    border-bottom: none !important;
    background: var(--side-nav-color);
    color: var(--top-bar-color);
    font-weight: 200;
    font-size: 15px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 15px !important;
    
}

#customer-segments-preview-div .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

#customer-segments-preview-div .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--table-color);
}

#customer-segments-preview-div table {

    border-radius: 0.2em !important;
}




#customer-custom-fields-preview-div .table-borderless > thead > tr > th {

    border-bottom: none !important;
    background: var(--side-nav-color);
    color: var(--top-bar-color);
    font-weight: 200;
    font-size: 15px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 15px !important;
    
}

#customer-custom-fields-preview-div .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

#customer-custom-fields-preview-div .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--table-color);
}

#customer-custom-fields-preview-div table {

    border-radius: 0.2em !important;
}

#dashboard-events-list .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--table-color);
}

#dashboard-events-list .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--top-bar-color);
}

#dashboard-events-table-page-index.pagination li.active a {

    background: var(--side-nav-color);
    color: var(--top-bar-color);
    border-color: var(--side-nav-color);
}

#dashboard-events-table-page-index.pagination li a {

    color: var(--side-nav-color);
}

.close {

    color: black;
    opacity: 1;
    font-weight: 100;
    text-shadow: none !important;
}

.popover-buttons {

    padding-top: 10px;
    background-color: gray;
    margin: 0;
}

.btn-group button {
    
    background-image: url('../images/subtle-grey.png');
    border: 0.1px solid white; /* Green border */
    color: white; /* White text */
    cursor: pointer; /* Pointer/hand icon */
    height: 38px;
}

.pop-div a {
    padding-right: 5px;
}

/* Main Navigation Bar */

#sidebar-toggle img {

    width: 24px;
    height: 24px;
}

#sidebar-toggle:focus {

    outline: none;
}

.badge {

  margin-top: -9px;
  margin-left: -31px;
  font-size: 9px;
  /*width: 18px;*/
  height: 18px;
  padding: 4px 3px;
  background-color: red;
  position: absolute;
}

.current span {

    color: var(--side-nav-color) !important;
}

/*.navbar {

  height: 52px !important;
}*/

.navbar-default {
    
    height: 52px !important;
    background-color: white;
    /*border-bottom: none !important;*/
}

.navbar-default img {

  height: 27px;
  width: 28px;
}

.navbar-default {

    max-height: 80px;
}

.navbar-default a {
  
  display: inline;
  border: none;
}

.userSettingsIcon {

  height: 40px !important;
  width: 40px !important;
  margin-top: -7.5px;
  border-radius: 40px;
}

.resourceIcon {

  height: 30px !important;
  width: 30px !important;
  border-radius: 30px;
}

.resourceDismissIcon {

  position: absolute; 
  margin-top: -2px; 
  margin-left: -3px;
  color: black;
  font-size: 11px;
}

#add-assignee-to-task i {

  position: absolute; 
  margin-top: 24px; 
  margin-left: -4px;
}

#add-assignee-to-task p, #add-assignee-to-sub-task p {

  color: var(--side-nav-color);
  font-size: 11px;
}

#add-assignee-to-task img, #add-assignee-to-sub-task img {

  height: 30px !important;
  width: 30px !important;
  border-radius: 30px;
}

.navbar-default img.topBarIcon {

  margin-top: -6px;
  height: 18px !important;
  width: 18px !important;
}

.navbar-default a:hover {
  
  text-decoration: none;
}

.navbar-default i {

    color: var(--side-nav-color);
}

.navbar-default i:hover {

    text-decoration: none;
}

.navbar-default a:focus {

    outline: none;
}

.bread-crumbs {

    padding-top: 12px;
    padding-left: 105px;
    font-size: 2rem;
    font-weight: 800;
}

.xtra-users-nav-icons {

    color: #337ab7;
    padding-right: 10px;   
}

/* The side navigation menu */

.sidenav {

    height: 100%; /* 100% Full-height */
    position: fixed; /* Stay in place */
    z-index: 1040; /* Stay on top */
    top: 52px;
    left: 0;
    background-color: white; /* Purple #005F7C*/
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable horizontal scroll */
    border-right: 1px solid #e7e7e7;

}

.sidenav ul {

  height: 100% !important;
}

/* The navigation menu links */

.sidenav li:first-child {

  padding-top: 5px
}

.sidenav li {

    padding: 0.5px 10px;
    text-decoration: none;
    color: var(--side-nav-color);
    cursor: pointer;
    font-size: 15px;
}

.sidenav li.down {

    position: absolute;
    width: 100%;
}

.sidenav li.down.first {

  bottom: 110px;
}

.sidenav li.down.second {

  bottom: 70px;
}

.sidenav .h-divider {

  padding: 0.1px 0px;
  width: 100%;
  background-color: #e7e7e7;
  margin: 5px 0px;
}

.sidenav li.current a {

    text-decoration: none;
    color: var(--side-nav-color);
    display: block;
    transition: 0.1s;
    text-align: left;
    vertical-align: middle;
    border: none;
    cursor: pointer;
    background-color: var(--table-color);
    border-radius: 5px;
    font-size: 15px;
    text-decoration: none;
}

.sidenav li a {

    padding: 8px 18px;
    text-decoration: none;
    display: block;
    transition: 0.1s;
    text-align: left;
    vertical-align: middle;
    border: none;
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
}


.sidenav li a:hover {

  text-decoration: none;
  background-color: var(--table-color);
  border-radius: 5px;

}

.sidenav li.current a:hover {

    text-decoration: none;
    cursor: pointer;
}

.sidenav li a img {

    width: 20px;
    height: 20px;
    margin-top: -2.5px;
    /*filter: invert(0%) sepia(70%) saturate(7500%) hue-rotate(49deg) brightness(101%) contrast(107%);*/
}

.sidenav li span {

    font-size: 13.5px;
    padding-left: 8px;
    color: black;
}

.sidenav li.current span {

    font-size: 13.5px;
    /*font-weight: 500;*/
    padding-left: 8px;
    color: var(--side-nav-color);
}

.admin-sidenav {

  display: none;
}

.filter-ocean {
    filter: invert(32%) sepia(86%) saturate(655%) hue-rotate(164deg) brightness(92%) contrast(90%);
}

.filter-navy {

  filter: invert(24%) sepia(10%) saturate(2469%) hue-rotate(163deg) brightness(96%) contrast(90%);
}

.filter-blue {

  filter: invert(23%) sepia(38%) saturate(2111%) hue-rotate(184deg) brightness(95%) contrast(90%);
}

.filter-sea {

  filter: invert(40%) sepia(76%) saturate(576%) hue-rotate(167deg) brightness(90%) contrast(79%);
}

.filter-seablue {

  filter: invert(54%) sepia(41%) saturate(7445%) hue-rotate(202deg) brightness(102%) contrast(102%);
}

.filter-skyblue {

  filter: invert(63%) sepia(98%) saturate(2029%) hue-rotate(155deg) brightness(94%) contrast(93%);
}

.filter-purple {

  filter: invert(28%) sepia(67%) saturate(780%) hue-rotate(222deg) brightness(85%) contrast(97%);
}

.filter-white {

  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(198deg) brightness(102%) contrast(106%);
}

/* When you mouse over the navigation links, change their color */
.offcanvas a:focus {
    
    color: #ff8566;
}

#clock-weather-widget .card-body img {

  height: 20px;
  width: 20px;
  margin-left: 10px;
  margin-bottom: 4px;
}

/*xs*/
@media screen and (max-width: 768px) {

    .text-float {

      float: left;
    }

    #sidebar-toggle-div {

      float: right !important;
      margin-left: 20px;
    }

    .tree-path h4 {

      line-height: 0.25;
      font-size: 21px;
      /*margin-top: 3px;*/
    }

    .pagination-div {

      margin-left: 3px;
    }

    .justify-position {

      float: right !important;
    }

    #userProfileModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 0.5px;
    }

    #userLanguageModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 0.5px;
    }

    #userThemeModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 0.5px;
    }

    #userCurrencyModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 0.5px;
    }

    #userNotificationModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 0.5px;
    }

    .popover-user-role, .displayName {

      /*display: inline-block;*/
      cursor: default;
      color: #667085;
      font-size: 13px;

    }

    .navbar-default a {

      padding: 13px 14px;
    }

    .dashboard-charts-well .table-style { 

      height: 270px;
    }

    .sidenav-xs {
      
      display: none;
    }

    .fc .fc-toolbar-title {

      font-size: 1.3rem;
    }

    .viewProjectForm .btnFloat {

      float: left;
    }

    .addEntityNavTabsDiv li.active:after {

      content: " ";
      position: absolute;
      left: 40% !important;
    }

    #project-kanban .kanban-board, #dashboard-project-kanban .kanban-board {

      border-radius: 5px;
      min-width: 100%;

    }

    .addEntityNavTabsDiv .nav-tabs > li {

      width: 18% !important;
    }

    .addEntityNavTabsDiv .liner {

      width: 20% !important;
    }

    .addEntityNavTabsDiv .liner-sm {

      width: 20% !important;
    }

    .dp-style {

      width: 75px !important;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      margin-left: 0px;
    }

    #sidebar-toggle {

        display: inline; 
        padding: 13px 6px;
        border: none;
        float: right;

    }

    .users-nav-icons {
    
        width: 15px;
        height: 15px;
        /*margin: 10px 10px 10px 10px;*/
    }

    #search-customer-interactions-filter-off div.has-search {

      min-width: 270px;
    }

    /*.table-responsive .dropdown-menu {

        position: static !important;
    }*/

    #user-notifications-by-date-nav-tabs-div .nav-justified li {

      float: left !important;
      width: 25% !important;
      padding: 0 !important;
      margin: 0 !important;
      
    }

    #userNotificationCenterModal .modal-dialog {
  
        /*width: 100%;*/
        height: 100%;
        margin: 0;
        padding: 0;
        top: 0;
        /*left: 0;*/
    }

    #userNotificationCenterModal .modal-content {
      
        height: auto;
        min-height: 100%;
        border-radius: 0;
    }

    #clock-weather-widget .card-body table tr th h2 {

      font-size: 15px;
    }

    .displayName {

      /*display: none !important;*/
      /*margin-right: 20px;*/
      /*cursor: default;
      color: var(--side-nav-color);*/
    }

    .userDivisionName {

      display: none !important;
      /*cursor: default;
      color: var(--side-nav-color);*/
    }

    .smartAlign {

      text-align: left !important;
    }

    .table-rsponsv {

        overflow-x: auto !important;
        min-height: 200px !important;
    }

    .content-area-xs {

        padding-left: 10px;
        padding-right: 10px;
        padding-top: 70px;
        padding-bottom: 20px;
    }

    .nav-head-title-xs {

        width: 25px;
    }

    .nav-head-title-xs img {

        margin-left: 17px;
        margin-top: -36.5px;
        display: inline-flex;
        width: 25px;
        height: 25px;
    }

    .accountBrandName-xs {

      margin-left: 15px !important;
      font-size: 13px;
    }

    .chart-xs {

        min-height: 250px;
    }

    .db-chart-xs {

        height: 290px;
    }

    .graph-container-xs {

        height: 290px;
    }

    .stats-container-xs {

        min-height: 367px;
    }

    .ct-line-chart-sm span.ct-label.ct-horizontal.ct-end {

        min-width: 30px;
        font-size: 10px;
    }

    /*bar chart */
    .bar-chart-0-15-xs .ct-bar {

        stroke-width: 15px;
    }

    .bar-chart-15-30-xs .ct-bar {

        stroke-width: 12px;
    }

    .bar-chart-30-60-xs .ct-bar {

        stroke-width: 12px;
    }

    .bar-chart-60-90-xs .ct-bar {

        stroke-width: 2.6px;
    }

    .bar-chart-label-0-15-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 11px !important;
        min-height: 40px !important;
    }

    .bar-chart-label-15-30-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 10px !important;
        min-height: 85px !important;
        writing-mode: sideways-rl !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(235deg) !important;

        /*font-size: 9.5px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;*/
    }

    .bar-chart-label-30-60-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 8px !important;
        min-height: 40px !important;
        writing-mode: sideways-rl !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(180deg) !important;
    }

    .bar-chart-label-60-90-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 6.5px !important;
        min-height: 40px !important;
        writing-mode: sideways-rl !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(180deg) !important;
        line-height: 1.8 !important;
    }

    /*line chart*/
    .line-chart-label-0-15-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 11px !important;
        min-height: 40px !important;
    }

    .line-chart-label-15-30-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 9.5px !important;
        min-height: 50px !important;
        writing-mode: sideways-rl !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(180deg) !important;
    }

    .line-chart-label-30-60-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 8px !important;
        min-height: 40px !important;
        writing-mode: sideways-rl !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(180deg) !important;
    }

    .line-chart-label-60-90-xs span.ct-label.ct-horizontal.ct-end {

        font-size: 6.5px !important;
        min-height: 40px !important;
        writing-mode: sideways-rl !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(180deg) !important;
    }

    .bread-crumbs-xs {

        padding-left: 15px;
    }

    .chart-spcl-padding-xs {

        max-height: 260px;
        padding-top: 50px;
    }

    .ct-chart .ct-legend li {

        font-size: 10.5px;
        padding: 5px;
        display: inline-block;
        /*font-family: "Montserrat", sans-serif !important;
        src: url('../Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');*/
        font-family: "Lato", sans-serif !important;
        src: url('../Lato/Lato-Regular.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    }

    #clock-weather-widget .card-body table tr th p {

        font-size: 10px;
    }

    #calendar .fc-left h2 {

        color: #2a2a2a;
        font-size: 18px;
        font-weight: 600;
        margin-top: 5px;
        text-align: center;
    }

    #calendar .fc-right button , #calendar .fc-left button, #calendar .fc-center button {

        font-size: 12px;
    }

    /* Place the timelime to the left */
    .timeline::after {
        left: 14px;
    }
      
      /* Full-width containers */
    .timeline-container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
      
      /* Make sure that all arrows are pointing leftwards */
    .timeline-container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

      /* Make sure all circles are at the same spot */
    .left::after, .right::after {
        left: 1px;
    }
      
    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }

}

/*md*/
@media screen and (min-width: 769px) and (max-width: 1200px) {

    .text-float {

      float: left;
    }

    #sidebar-toggle-div {

      float: left !important;
    }

    .tree-path h4 {

      line-height: 0.25;
      font-size: 21px;
    }

    .pagination-div {

      margin-left: 3px;
    }

    .justify-position {

      float: right !important;
    }

    #userProfileModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 40px;
      /*width: 450px;*/
    }

    #userLanguageModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 20px;
      width: 220px;
    }

    #userThemeModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 20px;
      width: 220px;
    }

    #userCurrencyModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 20px;
      width: 220px;
    }

    #userNotificationModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 70px;
      width: 320px;
    }

    .sidenav-md {

      display: block !important;
      width: 250px;
    }

    .popover-user-role, .displayName {

      /*display: inline-block;*/
      /*margin-right: 10px;*/
      cursor: default;
      color: #667085;
      font-size: 13px;

    }

    .navbar-default a {
      
      padding: 13px 20px;
    }

    .dashboard-charts-well .table-style { 

      height: 325px;
    }

    .fc .fc-toolbar-title {

      font-size: 1.4rem;
    }

    .viewProjectForm .btnFloat {

      float: right;
    }

    #project-kanban .kanban-board, #dashboard-project-kanban .kanban-board {

      border-radius: 5px;
      min-width: 50%;

    }

    .col-half-offset {
  
        margin-left:4.166666667%
    }

    #proposal-assessment-tasks-nav-div .brand-pills > li > a.headTab {
  
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    #proposal-assessment-tasks-nav-div li.brand-nav.active a.headTab:after {

      content: " ";
      display: block;
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
      border-left: 15px solid var(--side-nav-color);
      position: absolute;
      top: 50%;
      margin-top: -25px;
      left: 100%;
      z-index: 2;
    }

    #sidebar-toggle {

        display: inline; 
        padding: 13px 17px;
        border: none;
        float: left;

    }

    .users-nav-icons {
    
        width: 15px;
        height: 15px;
        /*margin: 10px 24px 10px 10px;*/
    }

    #search-customer-interactions-filter-off div.has-search {

      min-width: 290px;
    }

    .userDivisionName {

      display: none;
      cursor: default;
      color: var(--side-nav-color);
    }

    #userNotificationCenterModal .modal-dialog {
  
        /*width: 53%;*/
        height: 100%;
        margin: 0;
        padding: 0;
        top:0;
        /*left: 47%;*/
    }

    #userNotificationCenterModal .modal-content {
      
        height: auto;
        min-height: 100%;
        border-radius: 0;
    }

    .dp-style {

      width: 75px !important;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      margin-left: 0px;
    }

    .chart-md {

        height: 325px;
    }

    .smartAlign {

      text-align: left !important;
    }

    .db-chart-md {

        height: 352px;
    }

    /*.table-responsive {

      overflow-y: inherit !important;
    }*/

    /*.loader-md {

        left: 47%;
        top: 50%;
    }*/

    .chart-md-with-legend {

        height: 390px;
    }

    .chart-spcl-padding-md {

        padding-top: 60px;
    }

    .graph-container-md {

        height: 340px;
    }

    .stats-container-md {

        min-height: 370px;
    }

    .ct-line-chart-md span.ct-label.ct-horizontal.ct-end {

        min-width: 30px;
        font-size: 10px;
    }

    .bread-crumbs-md {

        padding-left: 105px;
    }

    .content-area-md {

        padding-top: 70px;
        padding-bottom: 20px;
        padding-left: 170px;
        padding-right: 25px;
    }

    .bar-chart-0-15-md .ct-bar {

        stroke-width: 15px;
    }

    .bar-chart-15-30-md .ct-bar {

        stroke-width: 12px;
    }

    .bar-chart-30-60-md .ct-bar {

        stroke-width: 12px;
    }

    .bar-chart-60-90-md .ct-bar {

        stroke-width: 5px;
    }

    .bar-chart-label-0-15-md span.ct-label.ct-horizontal.ct-end {

        font-size: 10px !important;
        min-height: 40px !important;
    }

    .bar-chart-label-15-30-md span.ct-label.ct-horizontal.ct-end {

        font-size: 10px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .bar-chart-label-30-60-md span.ct-label.ct-horizontal.ct-end {

        font-size: 8px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .bar-chart-label-60-90-md span.ct-label.ct-horizontal.ct-end {

        font-size: 7px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
        line-height: 2 !important;
    }

    /*line chart*/

    .line-chart-label-0-15-md span.ct-label.ct-horizontal.ct-end {

        font-size: 10px !important;
        min-height: 40px !important;
    }

    .line-chart-label-15-30-md span.ct-label.ct-horizontal.ct-end {

        font-size: 9px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important; 
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .line-chart-label-30-60-md span.ct-label.ct-horizontal.ct-end {

        font-size: 8px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .line-chart-label-60-90-md span.ct-label.ct-horizontal.ct-end {

        font-size: 7px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .ct-chart .ct-legend li {

        font-size: 10.5px;
        padding: 5px;
        display: inline-block;
        /*font-family: "Montserrat", sans-serif !important;
        src: url('../Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');*/
        font-family: "Lato", sans-serif !important;
        src: url('../Lato/Lato-Regular.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    }

    #clock-weather-widget .card-body table tr th p {

        font-size: 12px;
    }

    #clock-weather-widget .card-body table tr th h2 {

        font-size: 20px;
    }

    #calendar .fc-left h2 {

        color: #2a2a2a;
        font-size: 22px;
        font-weight: 800;
        margin-top: 5px;
        text-align: center;
    }

    #calendar .fc-right button , #calendar .fc-left button, #calendar .fc-center button {

        font-size: 14px;
        padding-left: 15px;
        padding-right: 15px;
    }

}

/*lg & xl */
@media screen and (min-width: 1201px) {

    .text-float {

      float: right;
    }

    #sidebar-toggle-div {

      float: left !important;
    }

    .tree-path h4 {

      line-height: 0.25;
      font-size: 21px;
    }

    .pagination-div {

      margin-left: 3px;
    }

    .justify-position {

      float: right !important;
    }

    #userProfileModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 40px;
      /*width: 500px;*/
    }

    #userLanguageModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 20px;
      width: 220px;
    }

    #userThemeModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 20px;
      width: 220px;
    }

    #userCurrencyModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 20px;
      width: 220px;
    }

    #userNotificationModal .modal-dialog {

      position: absolute;
      top: 0;
      right: 0;
      margin-top: 52px;
      margin-right: 70px;
      width: 320px;
    }

    .navbar-default a {
      
      padding: 13px 20px;
    }

    .dashboard-charts-well .table-style { 

      height: 325px;
    }

    .fc .fc-toolbar-title {

      font-size: 2.2rem;
    }

    #project-kanban .kanban-board, #dashboard-project-kanban .kanban-board {

      border-radius: 5px;
      min-width: 23%;

    }

    .viewProjectForm .btnFloat {

      float: right;
    }

    .col-half-offset {
  
      margin-left:4.166666667%
    }

    #proposal-assessment-tasks-nav-div .brand-pills > li > a.headTab {
  
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    #proposal-assessment-tasks-nav-div li.brand-nav.active a.headTab:after {

      content: " ";
      display: block;
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
      border-left: 15px solid var(--side-nav-color);
      position: absolute;
      top: 50%;
      margin-top: -25px;
      left: 100%;
      z-index: 2;
    }

    .popover-user-role, .displayName {

      /*display: inline-block;*/
      /*margin-right: 10px;*/
      cursor: default;
      color: #667085;
      font-size: 13px;

    }

    #sidebar-toggle {

        display: inline; 
        padding: 13px 10px;
        border: none;
        float: left;

    }

    .users-nav-icons {
    
        width: 15px;
        height: 15px;
        /*margin: 10px 12px;*/
    }

    #search-customer-interactions-filter-off div.has-search {

      min-width: 290px;
    }

    .userDivisionName {

      cursor: default;
      color: var(--side-nav-color);
    }

    #userNotificationCenterModal .modal-dialog {
  
        /*width: 40%;*/
        height: 100%;
        margin: 0;
        padding: 0;
        top:0;
        /*left: 60%;*/
    }

    #userNotificationCenterModal .modal-content {
      
        height: auto;
        min-height: 100%;
        border-radius: 0;
    }

    #clock-weather-widget .card-body table tr th h2 {

      font-size: 30px;
    }

    .dp-style {

      width: 75px !important;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      margin-left: 0px;
    }
    
    .sidenav-lg {

      display: block !important;
      width: 250px;
    }
    
    .chart-spcl-padding-lg {

        padding-top: 60px;
    }

    .smartAlign {

      text-align: left !important;
    }

    .chart-lg {

        height: 325px;
    }

    .db-chart-lg {

        height: 352px;
    }

    .chart-lg-with-legend {

        height: 390px;
    }

    .graph-container-lg {

        height: 340px;
    }

    .stats-container-lg {

        min-height: 370px;
    }

    .ct-line-chart-lg span.ct-label.ct-horizontal.ct-end {

        min-width: 40px;
        font-size: 11px;
    }

    .bar-chart-0-15-lg .ct-bar {

        stroke-width: 15px;
    }

    .bar-chart-15-30-lg .ct-bar {

        stroke-width: 12px;
    }

    .bar-chart-30-60-lg .ct-bar {

        stroke-width: 12px;
    }

    .bar-chart-60-90-lg .ct-bar {

        stroke-width: 7px;
    }

    .bar-chart-label-0-15-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 11px !important;
        min-height: 40px !important;
    }

    .bar-chart-label-15-30-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 10px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .bar-chart-label-30-60-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 9px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .bar-chart-label-60-90-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 8px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    /*line chart*/

    .line-chart-label-0-15-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 11px !important;
        min-height: 40px !important;
    }

    .line-chart-label-15-30-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 10px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .line-chart-label-30-60-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 9px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .line-chart-label-60-90-lg span.ct-label.ct-horizontal.ct-end {

        font-size: 8px !important;
        min-height: 40px !important;
        position: relative !important;
        justify-content: flex-end !important;
        text-align: right !important;
        transform-origin: 100% 0 !important;
        transform: translate(-100%) rotate(-45deg) !important;
        white-space: nowrap !important;
    }

    .ct-chart .ct-legend li {

        font-size: 10.5px;
        padding: 5px;
        display: inline-block;
        /*font-family: "Montserrat", sans-serif !important;
        src: url('../Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');*/
        font-family: "Lato", sans-serif !important;
        src: url('../Lato/Lato-Regular.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    }

    .bread-crumbs-lg {

        padding-left: 105px;
    }

    .content-area-lg {

        padding-top: 70px;
        padding-bottom: 20px;
        padding-left: 275px;
        padding-right: 25px;
    }

    #clock-weather-widget .card-body table tr th p {

        font-size: 13px;
    }

    #calendar .fc-left h2 {

        color: #2a2a2a;
        font-size: 22px;
        font-weight: 800;
        margin-top: 5px;
        text-align: center;
    }

    #calendar .fc-right button , #calendar .fc-left button, #calendar .fc-center button {

        font-size: 14px;
        padding-left: 15px;
        padding-right: 15px;
    }

}

.welcome-msg, .user-proposal-welcome-msg, .user-project-welcome-msg {

    text-align: center;
    /*margin-top: 10%;*/
}
/*
.welcome-msg img, .user-proposal-welcome-msg img, .user-project-welcome-msg img {

    width: 350px;
    height: 350px;
}*/

#noservices-msg span img {

    width: 30px;
    height: 30px;
}

/*.welcome-msg p, .user-proposal-welcome-msg p {*/

    /*font-weight: 600;
    font-size: 16px;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;*/
/*}*/

#noservices-msg {

    text-align: center;
}

#noservices-msg p {

    font-size: 16px;
    padding-top: 10px;
    padding-left: 50px;
    padding-right: 50px;
    position: relative;
}

.no-col-padding {
    
    padding-right: 0px; 
    padding-left: 0px;
}

.no-col-padding-left {
    
    padding-left: 0px;
}

.no-col-padding-right {
    
    padding-right: 0px;
}

.no-col-padding-margin {

    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
}

.dashboard-overview-card-header {

    padding: 15px 15px 0px 15px;
    /*color: var(--text-color);*/
    border-top-right-radius: 5px;
    border-top-left-radius:  5px;
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px;
    /*border-top: 1.5px solid var(--top-bar-color);
    border-right: 1.5px solid var(--top-bar-color);
    border-left: 1.5px solid var(--top-bar-color);*/
    /*border-top: 1px solid var(--side-nav-color);
    border-right: 1px solid var(--side-nav-color);
    border-left: 1px solid var(--side-nav-color);
    border-bottom: none;*/
    background: white;
    border-top: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;

}

.dashboard-overview-card-header p {

  font-size: 13.5px;
  font-weight: bolder;
}

.dashboard-charts-well {

    background: white;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px;
    /*border-bottom: 1.5px solid var(--top-bar-color);
    border-right: 1.5px solid var(--top-bar-color);
    border-left: 1.5px solid var(--top-bar-color);*/
    /*border-bottom: 1px solid var(--side-nav-color);
    border-right: 1px solid var(--side-nav-color);
    border-left: 1px solid var(--side-nav-color);
    border-top: none;*/
    display: block;
    border-bottom: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    /*overflow-y: auto;*/
    /*border: 1px solid lightgray;*/
}

.dashboard-card-header-with-padding {

    padding: 15px 20px 5px;
    border-top-right-radius: 0.3em;
    border-top-left-radius: 0.3em;
    border-bottom-right-radius: 0em; 
    border-bottom-left-radius: 0em; 
    background-color: var(--side-nav-color); 
    color: #fafafa; 
    border: 1px solid var(--side-nav-color);

}

.dashboard-card-body-with-padding {

    border-top-right-radius: 0em;
    border-top-left-radius: 0em;
    border-bottom-right-radius: 0.3em; 
    border-bottom-left-radius: 0.3em;
    /*border: 1px solid lightgray;*/
    border: none;
    background: #fafafa; 
}

.dashboard-charts-well .table-style {

    /*display: block;*/
    /*height: 325px;*/
    /*position: relative;*/
    overflow: auto;
}

.dashboard-charts-well .table-style table {

    /*border: none;*/
    /*margin-bottom: 0px !important;*/
    /*display: block;
    height: 355px;*/
    /*width: 100vw;*/
    /*overflow-y: auto;*/
}

.dashboard-charts-well .table > thead > tr > th {

  /*background: var(--top-bar-color) !important;*/
  /*color: var(--top-bar-color) !important;
  padding: 15px 10px !important;
  font-size: 13.5px;*/
}

#dashboard-statistics-nav-tab .dashboard-charts-well .table > thead > tr > th {

  color: black !important;
  /*padding: 10px 10px !important;*/
  font-size: 13px;
}

#dashboard-statistics-nav-tab p img {

  height: 20px;
  width: 20px;
  margin-right: 5px;
}

.dashboard-overview-card-header p img {

  height: 20px;
  width: 20px;
  margin-right: 5px;
}

.dashboard-charts-well .table > tbody > tr > td {

  padding: 15px 10px !important;
  font-size: 12.5px;
}

#clock-weather-widget .card-body table tr th {

    padding: 10px;
}

#clock-weather-widget .card-body table tr th p {

    font-weight: 100;
    text-transform: uppercase;
}

/*#clock-weather-widget .card .dashboard-card-header-with-padding {

    padding: 15px 20px 5px;
    border-top-right-radius: 0.3em;
    border-top-left-radius: 0.3em;
    border-bottom-right-radius: 0em; 
    border-bottom-left-radius: 0em; 
    background: #2a2a2a; 
    color: #fafafa; 
    border: 1px solid #2a2a2a;

}*/

.dashboard-todo-styling {

    height: 35px;
    width: 100%;
    padding: 8px 15px;
}

.dashboard-todo-box-styling {

    height: 35px;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 5px;
    padding-left: 14px;
    padding-right: 14px;
}

.dashboard-well-styling {

    border: none; 
    border-radius: 0.4em; 
    color: var(--side-nav-color); 
    box-shadow: 4px 4px 4px lightgray;
    background: var(--top-bar-color);
    /*background-image: url('../images/subtle-grey.png');*/
    /*padding: 10px;*/
}

.noRecents {

  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.dashboardBoxIcon span i {

    font-size: 40px;
}

.dashboardCounters {

    color: gray;
    font-weight: normal;
    font-size: 12px;
}

.dashboard-overview-card-header .dashboardCounters {

    color: gray !important;
    font-weight: normal;
    font-size: 12px;
}

/*.dashboardMainCounters {

    color: white;
    font-weight: 700px;
    font-size: 12px;
}*/

.dashboardUpcomingEvents {

    color: var(--top-bar-color) !important;
    font-weight: 700px;
    font-size: 11px;
}

#tasksCalendar {

  padding: 20px;
  background: #fafafa;
  height: 1000px;
  /*min-height: 100% !important;*/
}

.upcomingEvent {

    padding: 10px 0px 10px 15px;
    margin: 0;
}

.coloured-icons {

    color: #337ab7;
    font-size: 13px;
}

a:focus {

    outline:none;
}

.centered {

    text-align: center;
}

.centeredX {
    text-align: center;
    font-size: 0;
}
.centeredX > div {
    float: none;
    display: inline-block;
    text-align: center;
    font-size: 13px;
}

/*@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Locations Screen * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/*this needs to change -- important*/
/*.location-panel-styling .float-right {
    
    float: right;
}*/

.dropdown ul li a img {

  height: 20px;
  width: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

/*.edit-options-list-styling {

  border-radius: 10px !important;
  border: 1px solid gray !important;

}*/

.edit-options-list-styling li a:hover {

    cursor: pointer;
    text-decoration: none;
}

/*.edit-options-list-styling li a {

    color: var(--side-nav-color);
}*/

#project-task-assignees-div .dropdown .dropdown-menu,
#sub-project-task-assignees-div .dropdown .dropdown-menu {

  width: 350px;
}

#project-task-assignees-div .dropdown .dropdown-menu.select-project-task-assignees-list-dropdown,
#project-task-assignees-div .dropdown .dropdown-menu.select-project-task-assignees-price-tiers-list-dropdown,
#sub-project-task-assignees-div .dropdown .dropdown-menu.select-sub-project-task-assignees-list-dropdown,
#sub-project-task-assignees-div .dropdown .dropdown-menu.select-sub-project-task-assignees-price-tiers-list-dropdown {

  width: 320px !important;
}

/*, #calendars-view*/
#locations-view, #services-view, #analytics-view, #customers-view, #provider-calendar-view {

    height: 100%;
}

#location-search-input, #country-search-input, #edit-location-search-input, #edit-country-search-input {
    
    font-family: 'Kalam', cursive;
}

#location-image, #edit-location-image, #service-image, #edit-service-image {

    height: 99px;
    width: 100%;
    border: 1px solid gray;
}

#location-image-div, #edit-location-image-div {

    text-align: right; 
}

.location-name-panel {

    /*padding: 3px 0px 0px 0px;*/
    font-size: 16px;
    font-weight: 800;
}

.location-panel-head {

    background: var(--side-nav-color);
    color: var(--top-bar-color);
    padding: 10px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}



.editWorkDaysSelectOptions [type=checkbox],
.workDaysSelectOptions [type=checkbox],
.publicPageLocationsSelectOptions [type=checkbox],
.allowBookingsOptions [type=radio] {

    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.editWorkDaysSelectOptions input[type=checkbox]:checked + label,
.publicPageLocationsSelectOptions input[type=checkbox]:checked + label,
.workDaysSelectOptions input[type=checkbox]:checked + label {

    border: 2px solid gray;
    box-shadow: 0.5px 0.5px 3.5px 3.5px gray;
}

.allowBookingsOptions input[type=radio]:checked + label {

    border: 5px solid var(--side-nav-color);
    box-shadow: 0.5px 0.5px 3.5px 3.5px var(--side-nav-color);
}

.editEventModalBody .h-divider {

    margin-bottom: 20px;
    background-color: gray;
    height: 1.5px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Services Screen * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#service-image-div {

    top: 0;
    right: 0;
}

.note {

    font-size: 13px;
}

.checkbox-circle , .edit-checkbox-circle {

    width: 1em;
    height: 1em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    margin-bottom: 5px;
}

.checkbox-circle:checked, .edit-checkbox-circle:checked {

    background-color: #ff8566;
}

/*styling all modals*/

/*.modal-body {

    padding: 0;
    margin: 0;
}*/

/*.modal-label {

    font-size: 12px;
    text-align: left;
}*/

/* Time picker style */

.ui-timepicker-list li.ui-timepicker-selected {

    color: var(--top-bar-color);
    background-color: var(--button-color);
}

.ui-timepicker-list li:hover {

    color: var(--top-bar-color) !important;
    background-color: var(--button-color) !important;
}

.ui-timepicker-list li {

    color: var(--side-nav-color);
}

.ui-timepicker-wrapper {
  
  width: 21%;
}

.service-availability-days-styling {

    color: white;
    font-weight: bold;
    border: 1px solid #337ab7;
    background: #337ab7;
    height: 45px;
    width: 45px; 
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 50%;
    text-align: center; 
}

.provider-availability-days-styling {

    color: white;
    font-weight: bold;
    border: 1px solid #2a2a2a;
    background: #2a2a2a;
    height: 57px;
    width: 57px; 
    margin: 0px 22px 0px 0px;
    /*margin-left: 10px;*/
    border-radius: 50%;
    text-align: center;
}

.provider-availability-days-styling p {

    margin: 5px;
    font-size: 14px; 
    padding-top: 12px;
}

/*.providerFlexAvailabilityDaysOptions .checkbox {

    margin-bottom: 20px;
}*/

.provider-flex-availability-days-styling {

    color: white;
    font-weight: bold;
    border: 1px solid #2a2a2a;
    background: #2a2a2a;
    height: 34px;
    width: 100%; 
/*    margin: 0px 0px 0px 0px;*/
    /*margin-left: 10px;*/
    padding: 8px 20px 0px 0px;
    border-radius: 3px;
    text-align: center;
}

#provider-availability-break-time-div label, 
#provider-availability-time-div label {

    color: #337ab7;
    font-weight: lighter;

}

/*mandatory fields in forms*/

.mandatory {
    color: #337ab7;
}

.div-spacing {

    padding-top: 7px;
}

.alert {

  margin-bottom: 0px;

  p {
    font-size: 13px;
  }
}

/*.alert .close {


}*/

#location-address-div .input-group-addon , #edit-location-address-div .input-group-addon {
    min-width: 105px; 
}

#location-contacts-div .input-group-addon , #edit-location-contacts-div .input-group-addon{
    min-width: 60px;
}

.img-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  text-align: center;
  font-size: 10px;
  transition: opacity .2s, visibility .2s;
}

.img-wrap:hover .img-description {
  
  visibility: visible;
  opacity: 1;
}

.no-left-spacing {

    margin-left: 0;
    padding-left: 0;
}

/*error message for error screens*/

#error-msg {
    text-align: center;
}

#error-msg img {
    width: 150px;
    height: 150px;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}

#error-msg p {
    font-weight: normal;
    font-size: 16px;
    padding-top: 30px;
    padding-left: 250px;
    padding-right: 250px;
    position: relative;
}

/*login screens*/

.top-well-styling {

    background-color: #337ab7;
    border-bottom-right-radius: 0em;
    border-bottom-left-radius: 0em; 
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    margin-bottom: 5px;
    /*background-image: url('../images/subtle-grey.png');*/
    border: none;
}

.front-bottom-well-styling {

    background-color: white; /*#e6ffff or #ebfafa or #e6f7ff or #f5f5f0 or #e6fff5 or #2C3E50*/
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em; 
    border-top-left-radius: 0em;
    border-top-right-radius: 0em;
    box-shadow: 7px 7px 7px grey;
    border: none;
}

.back-bottom-well-styling {

    background-color: white; /*#e6ffff or #ebfafa or #e6f7ff or #f5f5f0 or #e6fff5 or #2C3E50*/
    border-bottom-right-radius: 2em;
    border-bottom-left-radius: 2em; 
    border-top-left-radius: 0em;
    border-top-right-radius: 0em;
    box-shadow: 7px 7px 7px grey;
    border: none;
}

.login-bg .bg {

    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../images/subtle-grey.png') repeat center center;
    background-size: 100%;
    opacity: .18;
    width: 100%;
}

.top-well-styling img {

    width: 45px;
    height: 45px;
}

.bottom-well-styling img {

    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    box-shadow: 5px 10px 15px grey;
}

.remember-me, #forgot-password, #user-register, #user-signin, #have-account {
    
    font-weight: 250;
    font-size: 14px;
    color: black;
    cursor: pointer;
}

#user-login-btn, #send-email-reset-password-btn {
    
    margin: 7px 0px;
    min-width: 100%;
    /*padding: 7.5px 10px;*/
    font-size: 1.55rem;
    background: #000349;
    color: white;
}


.card-container { 

  height: 655px;
  position: relative;
  perspective: 800px;
}

#card {

    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

#card figure {
    
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

#card .back {

    transform: rotateY( 180deg );
}

#card.flipped {

    transform: rotateY( 180deg );
}

.btn-circle.btn-xl {
    
    width: 120px;
    height: 35px;
    padding: 6px 40px;
    border-radius: 35px;
    font-size: 17px;
    color: #ff8566;
    box-shadow: 10px 5px 15px grey;
}

.centered-button {
    
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.xtra-div-spacing {

    padding-top: 10px;
}

.dubxtra-div-spacing {

    padding-top: 50px;
}

.reg-bottom-well-styling {

    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em; 
    border-top-left-radius: 0em;
    border-top-right-radius: 0em;
    /*padding: 25px;*/
    background-color: white;
    box-shadow: 7px 7px 7px lightgray;
    /*font-size: 1.25rem;*/
    color: #2a2a2a;
    border: none;

}

.well {

  margin-bottom: 0px !important;
}

/*.dashboard-events-card {
    
    box-shadow: 1px 1px 1px #fafafa;
    border-radius: 2px;
    border: 1px solid #ececec;
}*/

.reg-bottom-well-styling label {

    font-weight: 200 !important;
}

.reg-top-well-styling {

    background-color: #337ab7;
    border-bottom-right-radius: 0em;
    border-bottom-left-radius: 0em; 
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    /*margin-bottom: 5px;*/
    padding: 15px 0px;
    border: none;
}

/*.tc {
    
    padding-left: 15px;
    padding-top: 10px;
}*/

.tc label {
    
    color: black;
}

.imgBanner {

    height: 170px;
    width: 170px;
}

.mainBanner {

    color: #2a2a2a;
    font-size: 5.7vmin;
}

.subBanner {

    color: #2a2a2a;
    font-size: 2.5vmin;
    font-weight: 300px;
    line-height: 1.7;
}

.testmonial-image {

    border: none;
    height: 120px;
    width: 120px;
}



#testmonialSlider {

    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 60px;
}

.testmonialSignature {

    color: #ff8566;
}



.mainBannerTitle {

    color: #ff8566;
    font-size: 35px;
}

.mainBannerSubTitle {

    color: #ff8566;
    font-size: 17px;
}

.carousel-indicators li, .carousel-indicators .active {

    background-color: #337ab7;
}

.signup-section {

    margin-top: -5px;
}

#signUp-btn:focus {
    
    outline: 0 !important;
}

#signUp-btn {

    min-width: 100%;
    /*padding: 5px;*/
    /*font-size: 1.5rem;*/
    background: #000349;
    color: white;
    /*border-radius: .2em;*/
}

/* user settings on the top right corner of all pages*/

#change-theme-dropdown-div .dropdown-menu > .active > a,
#set-language-dropdown-div .dropdown-menu > .active > a,
#change-currency-dropdown-div .dropdown-menu > .active > a {

  color: var(--top-bar-color);
}

#change-theme-dropdown-div .dropdown-menu > .active > a:hover,
#set-language-dropdown-div .dropdown-menu > .active > a:hover,
#change-currency-dropdown-div .dropdown-menu > .active > a:hover {

  color: var(--side-nav-color);
}

#userProfileModal .modal-content,
#userLanguageModal .modal-content,
#userThemeModal .modal-content,
#userCurrencyModal .modal-content,
#userNotificationModal .modal-content {

  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

#userProfileModal p,
#userLanguageModal p,
#userThemeModal p,
#userCurrencyModal p,
#userNotificationModal p {

  color: #667085;
}

#userProfileModal h4 {

  color: #3A383F;
  font-size: 14px;
}

#userLanguageModal h5,
#userThemeModal h5,
#userCurrencyModal h5,
#userNotificationModal h5 {

  color: #3A383F;
  font-size: 16px;
  font-weight: 1000;
  margin-top: 5px;
  margin-bottom: 5px;
}

#userProfileModal .h-divider,
#userLanguageModal .h-divider,
#userThemeModal .h-divider,
#userCurrencyModal .h-divider,
#userNotificationModal .h-divider {

  color: #F2F4F7 !important;
}

#userProfileModal .highlight,
#userLanguageModal .highlight,
#userThemeModal .highlight,
#userCurrencyModal .highlight,
#userNotificationModal .highlight {

  background: #F4F8FF;
  color: #026AA2;
  padding: 2px 8px;
  border-radius: 16px;
  border: 1px solid #026AA2;
}

#userProfileModal a,
#userLanguageModal a,
#userThemeModal a,
#userCurrencyModal a,
#userNotificationModal a {

  color: #3A383F;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
}

#userProfileModal a:hover,
#userLanguageModal a:hover,
#userThemeModal a:hover,
#userCurrencyModal a:hover,
#userNotificationModal a:hover {

    text-decoration: none;
}

#userProfileModal a img {

  height: 16px;
  width: 16px;
  margin-right: 10px;
}

#userLanguageModal a img {

  width: 20px;
  margin-right: 10px;
}

#userLanguageModal .modal-body ul {

  list-style: none;
  margin: 0px 5px;
  padding: 0; 

}

#userLanguageModal .modal-body ul li {

  padding: 8px 12px;
  width: 100%; 
  margin-bottom: 1px;
}

#userLanguageModal .modal-body ul li.active {

  background: #f7f7f7;
  padding: 8px 12px;
  border-radius: 5px;
}

#userLanguageModal .modal-body ul li:hover {

  background: #f7f7f7;
  padding: 8px 12px;
  border-radius: 5px;
}

#userThemeModal a img {

  width: 20px;
  margin-right: 10px;
}

#userThemeModal .modal-body ul {

  list-style: none;
  margin: 0px 5px;
  padding: 0; 

}

#userThemeModal .modal-body ul li {

  padding: 8px 12px;
  width: 100%; 
  margin-bottom: 1px;
}

#userThemeModal .modal-body ul li.active {

  background: #f7f7f7;
  padding: 8px 12px;
  border-radius: 5px;
}

#userThemeModal .modal-body ul li:hover {

  background: #f7f7f7;
  padding: 8px 12px;
  border-radius: 5px;
}

#userCurrencyModal a img {

  width: 20px;
  margin-right: 10px;
}

#userCurrencyModal .modal-body ul {

  list-style: none;
  margin: 0px 5px;
  padding: 0; 

}

#userCurrencyModal .modal-body ul li {

  padding: 8px 12px;
  width: 100%; 
  margin-bottom: 1px;
}

#userCurrencyModal .modal-body ul li.active {

  background: #f7f7f7;
  padding: 8px 12px;
  border-radius: 5px;
}

#userCurrencyModal .modal-body ul li:hover {

  background: #f7f7f7;
  padding: 8px 12px;
  border-radius: 5px;
}

#myProfileModal p {

  color: gray;
  font-size: 12.5px;
}

#myProfileModal label {

  color: #3A383F;
  font-size: 13px;
}

#user-profile-photo-browse-btn:focus,
#user-profile-photo-browse-btn:active,
#user-profile-photo-browse-btn:focus:active,
#user-profile-photo-clear-btn:focus,
#user-profile-photo-clear-btn:active
#user-profile-photo-clear-btn:focus:active {

  background-image: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.theme-section section {

  height: 70px;
  width: 35px;
  margin-right: -5px;
  display: inline-block;
}
.dropdown-dflt .dropdown-menu > li > a:hover {

    color: var(--side-nav-color);
    background: var(--table-color);
}

.dropdown-dflt .dropdown-menu > li > a {

    /*color:#428bca;*/
    color: var(--side-nav-color);
    cursor: pointer;
    /*margin-bottom: 5px;*/
    /*margin: 0;*/
    /*text-align: center;*/
}

.dropdown-dflt ul.dropdown-menu {

    border-radius: 2px;
    /*box-shadow: none;*/
    margin-top: 2px;
    margin-right: 5px;
    width: 240px;
    background-color: var(--table-color);
    border: none;

}
.dropdown-dflt ul.dropdown-menu::before {
    
    content: '';
    border-bottom: 22px solid var(--table-color);
    border-right: 22px solid transparent;
    border-left: 22px solid transparent;
    position: absolute;
    top: -11px;
    right: 10px;
    z-index: 1000;
}

.dropdown-dflt ul.dropdown-menu::after {
    
    content: '';
    border-bottom: 15px solid var(--table-color);
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    top: -12px;
    right: 18px;
    z-index: 999;
}

.panel-title .glyphicon{
    
    font-size: 13px;
}

#services-view .panel {

    border-radius: 2px;
    margin-bottom: 15px;
}

/*.panel .service-panel-heading-styling {

    color: #2a2a2a;
    border-radius: 3px;
    outline: none;
    padding: 15px;
}*/

.panel .panel-heading {

    color: var(--side-nav-color);
    background: var(--top-bar-color);
    border-radius: 3px;
    outline: none;
    padding: 12px;
}

.accordion-toggle {

    font-size: 13.5px; 
    font-weight: 500;
    text-decoration: none !important;
}

.customerHistoryAccordion .accordion-toggle {

    font-size: 14px; 
    font-weight: 600;
    text-decoration: none !important;
}

.customerHistoryAccordion .panel .panel-heading {

    color: var(--side-nav-color);
    background: var(--top-bar-color);
    border-radius: 3px;
    outline: none;
    padding: 10px 15px;
}

#services-accordion-right-arrow {

    width: 17px; 
    height: 17px; 
    float: right;
}

#services-accordion-down-arrow {

    width: 17px; 
    height: 17px; 
    float: right;
    display: none;
}

.service-accordion-body-styling {

    background-color: white; 
    padding-bottom: 0px;
    padding-right: 5px;
    padding-left: 5px;
}

.services-panel-styling .float-right {

    float: right;
}

.services-panel-styling .edit-options-list-styling {

    padding: 0;
    min-width: 60px;
    border-radius: 0px;
}

.services-panel-styling .edit-options-list-styling li {

    margin: 0;
    text-align: center;
}

.services-panel-styling {

    background-color: #f6f6f6;
    color: #2a2a2a;
    padding: 15px 15px;
    border-radius: 0.3em; 
}

.qlabel {

    text-align: center;
    height: 34px;
    width: auto;
    background-color: lightgray; 
    color: #2a2a2a;
    border-radius: 30px;
    padding-top: 6px;
    
}

.serviceQuestionBtn, .serviceQuestionBtn:hover, .addCustomFieldBtn, .addCustomFieldBtn:hover {

    color: #2a2a2a;

}

#customers-list-div ul.typeahead.dropdown-menu {

    min-width: 100%;
}

.customer-panel-styling {

    background-color: #f9f9f9;
    color: #2a2a2a;
    padding: 10px 15px;
    border-radius: 0.3em; 
}

.customer-panel-styling .nav-tabs li.active a {

    background-color: #f9f9f9;
    color: #2a2a2a;

}

.customer-panel-styling .nav-tabs li a {

    color: gray;
}

.customer-panel-styling .edit-options-list-styling {

    padding: 0;
    min-width: 60px;
    border-radius: 0px;
}

.customer-panel-styling .edit-options-list-styling li {

    margin: 0;
    text-align: center;
}

.customer-panel-styling .glyphicon-option-vertical {

    margin: 5px 0px 0px 1px; 
    color: #2a2a2a; 
    font-size: 19px;
}

.panel-label {

    font-weight: 400;
    color: gray;
}

.customerProfileRecordCustomField span, .customerProfileRecordField span {

    color: #9f9f9f;
    font-size: 13.5px;
    font-weight: 200;
}

.customerProfileRecordCustomField p, .customerProfileRecordField p {

    color: #2a2a2a;
    font-size: 14px;
    font-weight: 600;
}

.ui-sortable-helper {

    display: table;
}

.file-input {

    padding: 6px 12px;
    border-radius: 4px;
}

/*Calendar and Events settings*/

.eventNamingEventName {

    padding: 6px 12px;
    background-color: var(--table-color);
    border-radius: 4px;
}

.whatsBG {

    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../images/whatsapp-bg.png');
}

.notificationAlertsSettings .tab-pane {

    margin-top: 20px;
}

.notificationAlertsSettings .nav-pills li.active a {

    /*background-color: var(--side-nav-color);*/
    background: none;
    border-radius: 0px;
    color: var(--side-nav-color);
    border-bottom: 3px solid var(--side-nav-color);
}

.notificationAlertsSettings .nav-pills li a {

    color: #2a2a2a;
}

.notificationAlertsSettings .nav-tabs li.active a {

    background-color: var(--side-nav-color);
    color: var(--top-bar-color);
    border: 1px solid var(--side-nav-color);
}

.notificationAlertsSettings .nav-tabs li a {

    color: #2a2a2a;
}

/*#pricing-groups-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--button-color);
    color: var(--button-color);
}

#pricing-groups-nav-tabs-div .nav-tabs > li > a {

    color: var(--side-nav-color);
}*/

#pricing-groups-nav-tabs-div .nav-tabs > li.active > a {

    border-top: none;
    border-left: none;
    border-right: none;
    background: var(--button-color);
    color: var(--top-bar-color);
}

#pricing-groups-nav-tabs-div .nav-tabs > li > a {

    color: var(--button-color);
    background: var(--top-bar-color);
    margin-right: 10px;
    margin-bottom: 10px;
    border: none !important;
    border-radius: 3px;
    height: auto;
}

#pricing-groups-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

/** Optionally if you don't want word wrap **/
#pricing-groups-nav-tabs-div .nav-tabs > li {
    white-space: nowrap;
}

.removePublicPageMediaFileBtn, .removeBusinessPromoBtn, .editBusinessPromoBtn, .removeBusinessPolicyBtn, .editBusinessPolicyBtn, .deactivateUserBtn, .changeUserPasswordBtn, .deleteUserBtn, .activateUserBtn, .changeUserRoleBtn {

    box-shadow: none !important;
    cursor: pointer; 
    text-decoration: none;
    font-size: 12.5px; 
    color: #2a2a2a;
}

#business-promos-preview-div .table-borderless > thead > tr > th {

    border-bottom: none !important;
    background: var(--side-nav-color);
    color: var(--top-bar-color);
    font-weight: 200;
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    
}

#business-promos-preview-div .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--table-color);
}

#business-promos-preview-div .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

#business-policies-preview-div .table-borderless > thead > tr > th {

    border-bottom: none !important;
    background: var(--side-nav-color);
    color: var(--top-bar-color);
    font-weight: 200;
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    
}

#business-policies-preview-div .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--table-color);
}

#business-policies-preview-div .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

#uam-administration-users-div .table-borderless > thead > tr > th {

    /*border-bottom: none !important;
    background: var(--side-nav-color);
    color: var(--top-bar-color);*/
    font-weight: 200;
    font-size: 13px;
    padding: 15px 15px 15px 10px;
    
}

#uam-administration-users-div .table-striped > tbody > tr:nth-of-type(2n) {

    background: white;
}

#uam-administration-users-div .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

#payments-collection-cards-preview-table .table-borderless > thead > tr > th {

    border-bottom: none !important;
    background: var(--side-nav-color);
    color: var(--top-bar-color);
    font-weight: 200;
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    
}

#payments-collection-cards-preview-table .table-striped > tbody > tr:nth-of-type(2n) {

    background: var(--table-color);
}

#payments-collection-cards-preview-table .table-striped > tbody > tr:nth-of-type(2n+1) {

    background: var(--top-bar-color);
}

#payments-collection-cards-preview-table .table-borderless > tbody > tr > th {

    border: none;
    font-size: 1.375rem;
    padding: 0px !important;
}

/*.provider-panel-styling {

    background-color: #f9f9f9;
    color: #2a2a2a;
    padding: 10px 15px;
    border-radius: 0.3em; 
}

.provider-panel-styling p {

    font-size: 1.4rem;
}

.provider-panel-styling .dropdown {

    float: right;
    text-align: center;
}

.provider-panel-styling .glyphicon-option-vertical {

    margin: 5px 0px 0px 1px; 
    color: #2a2a2a; 
    font-size: 19px;
}

.provider-panel-styling .nav-tabs li a {

    color: gray;
}

.provider-panel-styling .nav-tabs li.active a {

    color: #2a2a2a;
    background-color: #f9f9f9;
}

.provider-panel-styling .edit-options-list-styling {

    padding: 0;
    min-width: 60px;
    border-radius: 2px;
}

.provider-panel-styling .edit-options-list-styling li {

    padding: 5px !important;
    border-bottom: 1px lightgray solid;
    text-align: center;
}

.providerWorkTimePeriod {

    display: inline-block; 
    background: var(--side-nav-color); 
    color: var(--top-bar-color); 
    border-radius: 2px; 
    padding: 2.5px 5px;
    margin: 0px 10px;
}*/

/* Make circles that indicate the steps of the form: */
.step {

    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {

    color: white;
    line-height: 1.4;
}

.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button.btn-default {

    color: var(--top-bar-color);
    /*background-color: var(--top-bar-color);*/
    border-radius: 20px;
    font-size: 15px;
}

.min-width-label {

    min-width: 60px;
}

/* color selection in add and edit service */

.radio-color-big {

    border-radius: 50%;
    cursor: pointer;
}

.options input {

  height: 37px;
  width: 37px;
  margin-right: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* tick in the service new / edit service modal for color selection*/
.options input:checked {
  
  content: url('../images/tick1.png');
}

.notifyOptions img, .notifyByEventOptions img, .editNotifyOptions img {

    width: 50px;
    height: 50px;
}

.notifyOptions [type=radio], .editNotifyOptions [type=radio] { 
    
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */
.notifyOptions [type=radio] + img, .editNotifyOptions [type=radio] + img {
  cursor: pointer;
}

.notifyOptions label, .notifyByEventOptions label, .editNotifyOptions label {

    text-align: center;
    font-weight: 500 !important;
    margin-bottom: 20px;
}

.notifyOptions label span, .notifyByEventOptions label span, .editNotifyOptions label span {

    margin-top: 20px !important;
}

.notifyOptions input[type=radio]:checked + label>img, .editNotifyOptions input[type=radio]:checked + label>img {
    
    border: 1px solid #fff;
    box-shadow: 0 0 2px 2px #337ab7;
}

/*public Page*/

/*.publicPageLocationsOptions img {

    width: 60px;
    height: 60px;
}


.publicPageLocationsOptions [type=checkbox] + img {
  cursor: pointer;
}

.publicPageLocationsOptions label {

    text-align: center;
    font-weight: 500 !important;
    padding: 30px;
    width: 150px;
    height: 150px;
}

.publicPageLocationsOptions label span p {

    margin-top: 10px !important;
}

.publicPageLocationsOptions [type=checkbox] { 
    
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.publicPageLocationsOptions input[type=checkbox]:checked + label {

    border-radius: 10%;
    background: #f6f6f6;
    color: #2a2a2a;
    font-weight: bold;
}*/

.publicPageMediaGroupOptions img {

    width: 60px;
    height: 60px;
}


.publicPageMediaGroupOptions [type=checkbox] + img {
  cursor: pointer;
}

.publicPageMediaGroupOptions label {

    text-align: center;
    font-weight: 500 !important;
    padding: 30px;
    width: 150px;
    height: 150px;
    /*margin-bottom: 20px;*/
}

.publicPageMediaGroupOptions label span p {

    margin-top: 10px !important;
}

.publicPageMediaGroupOptions [type=checkbox] { 
    
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.publicPageMediaGroupOptions input[type=checkbox]:checked + label {

    border-radius: 10%;
    background: #f6f6f6;
    color: #2a2a2a;
    font-weight: bold;
}

/* General Account Settings */

.publicPageAccountThemeOptions [type=radio] {
  cursor: pointer;
}

.publicPageAccountThemeOptions [type=radio] { 
    
    position: absolute;
/*    opacity: 0;*/
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
}

.publicPageAccountThemeOptions input[type=radio]:checked {

    border: 1px solid #fff;
    box-shadow: 0 0 2px 2px #337ab7;
    border-radius: 5px;
}

.v-head {

    border: 2px solid lightgray !important;
}

/* Calendar style */

.fc {

    border: none;
}

.fc .fc-header-toolbar .fc-button {

  border: none !important;
  box-shadow: none !important;
}

.fc .fc-timeline .fc-event-container {

    height: 100px !important;
}

.fc th.fc-resource-cell {

    height: 40px;
    padding-top: 20px;
}

.fc th.fc-today {

    color: #ff8566 !important;
}

.fc th.fc-today a {

    color: #ff8566 !important;
}

.fc td.fc-day-top.fc-today span.fc-week-number {

    background-color: #ff8566;
    color: white !important;
}

.calendarTitle {

    font-size: 27px;  
    padding-top: 1px;
    padding-right: 15px; 
    padding-left: 15px; 
    color: #337ab7;
}

#calendar .fc-toolbar {

    background-color: #f6f6f6; 
    padding: 20px 15px 15px 15px;
    margin-bottom: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    /*position: -webkit-sticky; 
    position: sticky; 
    top: 87px;
    z-index: 9999;*/
}

#dashboardAgendaEventsCalendar .fc-right button , #dashboardAgendaEventsCalendar .fc-left button, #dashboardAgendaEventsCalendar .fc-center button {

    /*color: #f6f6f6;*/
    /*font-weight: 600;*/
}

#dashboardAgendaEventsCalendar .fc-view .fc-col-header > thead > tr > th.fc-col-header-cell a {

    color: var(--top-bar-color) !important;
    text-decoration: none;
}

#dashboardAgendaEventsCalendar .fc-view .fc-col-header > thead > tr > th {

    border-bottom: none !important;
    background: var(--side-nav-color);
    font-weight: 200;
    font-size: 13px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 9px !important;   
    vertical-align: middle !important; 
}

#project-calendar .fc-view .fc-col-header > thead > tr > th.fc-col-header-cell a {

    color: black !important;
    text-decoration: none;
}

#dashboardAgendaEventsCalendar .fc-right .fc-button-group .fc-button,
#dashboardAgendaEventsCalendar .fc-right .fc-button {

    border: none;
    /*background-color: var(--button-color) !important;*/
    background-image: none;
    text-shadow: none;
}

#dashboardAgendaEventsCalendar .fc-left h2 {

    /*color: #2a2a2a;
    font-size: 18px;
    font-weight: 800;
    margin-top: 5px;*/

}

#dashboardAgendaEventsCalendar .fc-basic-view .fc-body .fc-row {

    /*min-height: 2.5em !important;*/
}

#dashboardAgendaEventsCalendar .fc td.fc-day-top.fc-today {

    background: transparent !important;
}

#dashboardAgendaEventsCalendar td.fc-day-top.fc-today span.fc-day-number {

    color: var(--top-bar-color) !important;  
}

#dashboardAgendaEventsCalendar td.fc-day.fc-widget-content.fc-today {

    background-color: var(--side-nav-color) !important;
}

#calendar .fc-right button , #calendar .fc-left button, #calendar .fc-center button {

    color: #f6f6f6;
    font-weight: 400;
}

.fc-center .fc-button-group .fc-button .fc-icon {
    
    margin: 0;
    padding: 0;
}

#calendar .fc-right .fc-button-group .fc-button,
#calendar .fc-right .fc-button {

    border-radius: 5px;
    height: 32px;
    border: none;
    background-color: var(--button-color) !important;
    background-image: none;
    text-shadow: none;
}

.fc-center .fc-button-group .fc-button,
.fc-center .fc-button {

    border-radius: 5px;
    height: 32px;
    border: none;
    background-color: var(--button-color) !important;
    background-image: none;
    text-shadow: none;
}

.fc-left .fc-button-group .fc-button,
.fc-left .fc-button {

    border-radius: 0.3em;
    height: 32px;
    border: none;
    background-color: var(--button-color) !important;
    background-image: none;
    text-shadow: none;
}

.fc-right .fc-button-group .fc-button:hover, 
.fc-right .fc-button:hover,
.fc-left .fc-button-group .fc-button:hover,
.fc-left .fc-button:hover,
.fc-center .fc-button-group .fc-button:hover,
.fc-center .fc-button:hover {

    color: var(--text-color) !important;
}

/*#calendar .fc-left h2 {

    color: #2a2a2a;
    font-size: 22px;
    font-weight: 800;
    margin-top: 5px;
    text-align: center;
}*/

.fc-time span {
    
    color: #337ab7;
}

.fc .fc-state-active {

    background-color: var(--top-bar-color) !important;
    color: var(--button-color) !important;
    border: 2px solid var(--button-color) !important;
    box-shadow: none;
}

.fc button.fc-state-active:hover {

    color: var(--button-color) !important;
}

th.fc-axis.fc-widget-header {
    
    border-right: none;
    text-align: center;
    background-color: #ff8566;
    color: white;
}

/*.fc-scroller {
    
    min-height: 300px;
}*/

.fc-icon {
    
    font-size: 11px;
}

.fc-now-indicator-arrow,
.fc-now-indicator-line {

    color: #ff8566;
    border-color: #ff8566;
}

.fc-head-container .fc-widget-header {

    background-color: white;
}

#calendar .fc-head-container .fc-day-header {

    padding: 12px 0px;
    font-size: 15px;
    color: #337ab7;
    border: none;

}

#dashboardAgendaEventsCalendar .fc-head-container .fc-day-header {

    padding: 10px 0px;
    background: #f6f6f6;
}

.fc td.fc-axis.fc-time.fc-widget-content {

    vertical-align: top !important;
}

.fc-basic-view .fc-day-top .fc-week-number {

    background-color: #ff8566;
    color: white;
}

.eventActionBtns .btn {

    font-size: 1.1rem !important; 
    padding: 5px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.fc-event {

    color: var(--text-color) !important;
}

#dashboardTimeTrackerCalendar, #admin-no-time-sheet-preview-table-div, #admin-no-completed-time-sheet-preview-table-div {

  height: auto;
  overflow: auto;
  background: white; 
  padding: 15px; 
  border-radius: 5px;
  /*max-height: 100vh;*/
}

#dashboardTimeTrackerCalendar .fc-button.fc-button-primary {

  background: var(--text-color) !important;
  color: var(--table-color) !important;
  border: none;
  /*padding: 6px;*/
  /*font-size: 1.4rem;*/
}

#dashboardTimeTrackerCalendar .fc-header-toolbar .fc-button {

  border: none;
  box-shadow: none !important;
  font-size: 13.5px;
}

#dashboardTimeTrackerCalendar .fc-toolbar-title {

  font-size: 1.7rem;
  color: var(--text-color);
}

#dashboardTimeTrackerCalendar .fc-view-harness {

  border-radius: 5px;
  border: 1px solid #ccc;
}

#dashboardTimeTrackerCalendar .fc-view-harness table {

  background: white !important;
}

#dashboardTimeTrackerCalendar .fc-scrollgrid {

  border: none;
}

#dashboardTimeTrackerCalendar .fc-scrollgrid-section-header th {

  border-right: none;
  color: var(--text-color);
}

#dashboardTimeTrackerCalendar .fc-scrollgrid-section-body td {

  border-right: none;
  border-bottom: none;
}

#dashboardTimeTrackerCalendar .fc-timeline-header tbody tr:first-child .fc-timeline-slot {

  border-top-right-radius: 8px;
}

#dashboardTimeTrackerCalendar .fc-datagrid-cell-main {

  font-size: 13px;
}

#dashboardTimeTrackerCalendar .fc-event {

    border: none;
    margin: 7px 10px 0px 10px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

#dashboardTimeTrackerCalendar .fc-event-title {

  font-weight: bold;
  letter-spacing: 1.2px;
}

#dashboardTimeTrackerCalendar .fc-timeline-slot a {

  color: black;
  font-size: 13px;
}

#dashboardTimeTrackerCalendar .fc-license-message {

  display: none !important;
}

.fc-license-message {

  display: none !important;
}

#dashboardTimeTrackerCalendar .fc-scrollgrid-section.fc-scrollgrid-section-header, #dashboardTimeTrackerCalendar .fc-scrollgrid-section .fc-timeline-header a {

  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
}

#dashboardTimeTrackerCalendar .fc-button.fc-button-primary.fc-button-active {

  background: var(--top-bar-color)  !important;
  color: var(--text-color) !important;
  border: 1px solid var(--text-color) !important;
  font-size: 13.5px;
  /*padding: 6px;*/
}

.resourceTitleName {

  color: var(--text-color);
}

.resourceWorkHoursCounter {

  color: gray;
}

.resourceTotalRate {

  color: gray;
  font-size: 12.3px;
}

.fc .fc-button .fc-icon {

  font-size: 1.8rem;
}

.fc .fc-button.fc-button-primary {

  background: var(--top-bar-color) !important;
  color: black !important;
  border: 1px solid #D0D5DD !important;
  /*padding: 6px;*/
  /*font-size: 1.4rem;*/
}

.fc .fc-button.fc-button-primary.fc-button-active {

  background: white !important;
  color: var(--side-nav-color) !important;
  border: 1px solid #D0D5DD !important;
  /*padding: 6px;*/
}

.fc-event .fc-bg { 

    opacity: 0.1 !important;
}

#project-calendar {

  height: 400px;
}

.fc-event-month-view {

    height: 14px;
    width: 12px;
    border-radius: 50%;
    border: none;
    margin: 2px 2px;
}

.fc-slats tr {

    height: 80px;
}

/* Toastr Style */



/*.toast-top-center { 
   
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
   top: 40%;
 }*/

/* Error for input fields in sign up and sign in screens and modals */

label.error {
    
    display: block;
    float: none;
    text-align: center;
}

.modal.fade:not(.in).right .modal-dialog {
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0);
}

i.far.fa-bell {

  font-size: 18px !important;
  color: var(--side-nav-color) !important;
}

i.fas.fa-bookmark, i.far.fa-bookmark {

  font-size: 15px !important;
  color: var(--side-nav-color) !important;
}

.popoverTaskBar {
    color: #2a2a2a; 
    opacity: 1;
    float: right;
    font-size: 12.5px;
    padding: 5px;
}

.charts-card {

    background-color: white;
    border-radius: 0.3em !important;
    border: none !important ;
}

.charts-card label {
    
    font-size: 15.5px; 
    font-weight: 100;
}

.charts-card i {
    
    float: right; 
    font-size: 15px;
    color: var(--top-bar-color);
}

.charts-card .ct-series-a .ct-bar {
  /* Set the colour of this series line */
  stroke: #03396c;
  /* Control the thikness of your lines */
  /*stroke-width: 30px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

.charts-card .ct-series-b .ct-bar {
  /* Set the colour of this series line */
  stroke: #6497b1;
  /* Control the thikness of your lines */
  /*stroke-width: 30px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#top-customers-by-sales-chart .ct-series-a .ct-bar {

    stroke: #b2eee6;
}

#top-customers-by-sales-chart .ct-series-b .ct-bar {

    stroke: #8ad6cc;
}

#top-customers-by-sales-chart .ct-series-c .ct-bar {

    stroke: #f99192;
}

#top-customers-by-sales-chart .ct-series-d .ct-bar {

    stroke: #f97171;
}

#top-customers-by-sales-chart .ct-series-e .ct-bar {

    stroke: #385a7c;
}

#top-providers-by-sales-chart .ct-series-a .ct-slice-donut-solid {

    fill: #8ad6cc;
}

#top-providers-by-sales-chart .ct-series-b .ct-slice-donut-solid {

    fill: #f99192;
}

#top-providers-by-sales-chart .ct-series-c .ct-slice-donut-solid {

    fill: #f97171;
}

#top-providers-by-sales-chart .ct-series-d .ct-slice-donut-solid {

    fill: #185d7c;
}

#top-providers-by-sales-chart .ct-series-e .ct-slice-donut-solid {

    fill: #f97171;
}

.charts-card-header {

    background: var(--side-nav-color); 
    color: var(--top-bar-color); 
    padding: 10px 15px 0px; 
    border-top-right-radius: 0.3em; 
    border-top-left-radius: 0.3em; 
    border: 1px solid var(--side-nav-color);
}

.charts-card-body {

    background: var(--top-bar-color);
    border: 1px solid var(--top-bar-color); 
    border-bottom-right-radius: 0.3em; 
    border-bottom-left-radius: 0.3em;

}

/*.charts-card .ct-chart {

    width: auto; 
    height: auto;
}*/

.ct-chart-bar .ct-label, .ct-chart-line .ct-label {

    font-size: 10px;
    color: black;
    fill: currentColor;
}

.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {

    font-size: 12px;
    color: white;
    fill: currentColor;
}

.ct-vertical {

  padding-right: 8px !important;
}

.ct-horizontal {

  padding-top: 8px !important;
}

/*#chart1 .ct-series .ct-bar {

  stroke: var(--button-color);
}*/

.analyticsSearchDiv {

    background: white; 
    border: 1px solid lightgray;
    border-radius: 5px; 
    color: #2a2a2a;
    padding: 15px 15px 10px 15px;
}

.analyticsSearchField {
    
    z-index: 0!important;
    line-height: 20px !important;
}

#showFiguresByMonth {

    border-radius: 0px;
}

.graph-container {

    /*width: %100;*/
    /* center a div insie another div*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*width: auto; 
    height: 325px;*/
}

.graph-no-data {

    color: #2a2a2a;
    top: 50%;
    position: absolute;
}

.table-sm {

    margin-bottom: 0px;
}


.toggle.ios, .toggle-on.ios, .toggle-off.ios { 
    
    border-bottom-right-radius: 0.2em;
    border-bottom-left-radius: 0.2em; 
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
}

/*.toggle.ts, .toggle-on.ts, .toggle-off.ts { 
    
    background-color: #337ab7;
    color: white;
}*/

#reg-main-div input[type='checkbox'], #login-panel input[type='checkbox'] {

    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    background: white;
    border-radius: 1px;
    border: 2px solid #555;
}

#reg-main-div input[type='checkbox']:checked, #login-panel input[type='checkbox']:checked {
    
    background: #2a2a2a;

}

.toggle.ios .toggle-handle { 
    
    border-bottom-right-radius: 0.2em;
    border-bottom-left-radius: 0em; 
    border-top-left-radius: 0em;
    border-top-right-radius: 0.2em;
    background: #89899e;
    border-color: #89899e !important;
}

div.toggle.btn.ios.quick.btn-warning {

    width: 200px;
    height: 34px;
}

label.btn.btn-warning {

    color: #2a2a2a!important;
    border: none !important;
}

.btn.btn-warning {

    border: 1px solid #89899e !important;
    background-color: white !important;
}

/*.toggle.ts .toggle-handle { 
    
    border: 1px solid #ff8566;
    background-color: #ff8566;
}*/

/*.quick .toggle-group { 

    transition: none; 
    -webkit-transition: none; 

}*/

/*.editProviderModalBody label*/
/*.newProviderModalBody label*/
/*.manageProviderWorkLocationModalBody label,*/
/*.newCustomerModalBody label,*/
/*.editCustomerModalBody label */
/*{

    font-size: 13px !important; 
    color: #337ab7 !important;
}*/

.manageProviderWorkLocationModalBody label {

    font-size: 13px !important; 
    /*color: #337ab7 !important;*/
}

.manageProviderWorkLocationModalBody {

    padding-left: 25px;
    padding-right: 25px;
}

/*select.ui-timepicker-select {

  background-image:
    linear-gradient(45deg, transparent 50%, #337ab7 50%),
    linear-gradient(135deg, #337ab7 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  line-height: 1.3em;

}*/

.form-control.minimal {

    color: #989898;

}

.dashboardBox {

  display: table; 
  text-align: center;
  width: 100%;
}

.dashboardBoxIcon {

  display: table-cell; 
  vertical-align: middle; 
  min-width: 20%;
}

.dashboardBoxCounter {

  display: table-cell; 
  vertical-align: middle; 
  min-width: 80%;
}

.dashBoardCountersVerticalGroup {

  padding: 14px;
  border-radius: 5px;
  border: none;
  background: white;
  border: 1px solid lightgray;
}

.dashBoardCountersVerticalGroup .h-divider {

  background: var(--top-bar-color);
  margin-top: 7px;
  margin-bottom: 7px; 
}

/*.dashBoardCountersVerticalGroup p {

  color: var(--text-color);
  font-size: 13.5px;
  font-weight: bolder;
}*/

.dashBoardCountersVerticalGroup h4 {

  font-size: 13px;
  color: gray !important;
}

.dashBoardCountersVerticalGroup .dashboardCounters {

  /*color: var(--button-color) !important;*/
  font-size: 12px !important;
}

.dashBoardCountersVerticalGroup .btn-style {

  background: var(--top-bar-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--text-color) !important;
  font-size: 12px;
  padding: 5px !important;
  cursor: pointer;

}

.dashBoardCountersVerticalGroup .btn-style.active {

  background: var(--text-color) !important;
  color: var(--top-bar-color) !important;
  font-size: 12px;
  padding: 5px !important;
  cursor: pointer;
  outline: 0;
  -webkit-box-shadow: unset;
  box-shadow: unset;

}

/*.ct-bar {

    stroke-width: 15px;
    stroke: var(--side-nav-color);
    stroke-linecap: round;
}*/

/*svg.ct-chart-bar, svg.ct-chart-line{
    overflow: visible;
}
.ct-label.ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  white-space:nowrap;
}*/

.dashboard-events-line-chart {

    background-color: var(--button-color); 
    color: var(--top-bar-color); 
    border-top-right-radius: 0.2em; 
    border-top-left-radius: 0.2em; 
    padding: 10px 0px;
}

.dashboard-events-bar-chart {

    background-color: var(--top-bar-color); 
    color: var(--button-color); 
    border-bottom-right-radius: 0.2em; 
    border-bottom-left-radius: 0.2em; 
    padding: 10px 0px;
}



#chart1 .ct-series-a .ct-line {
  /* Set the colour of this series line */
  stroke: #2980CC;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-b .ct-line {
  /* Set the colour of this series line */
  stroke: #3C9664;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-c .ct-line {
  /* Set the colour of this series line */
  stroke: #ff8566;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-d .ct-line {
  /* Set the colour of this series line */
  stroke: #FA6D6A;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-e .ct-line {
  /* Set the colour of this series line */
  stroke: #48668F;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-bar, #analytics-projects-by-status-chart .ct-bar {

  /*stroke-linecap: round;*/
  stroke-width: 45px;
}

#chart1 .ct-series-a .ct-bar, #analytics-projects-by-status-chart .ct-series-a .ct-bar {
  /* Set the colour of this series line */
  stroke: #227cf7;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-b .ct-bar, #analytics-projects-by-status-chart .ct-series-b .ct-bar {
  /* Set the colour of this series line */
  stroke: #48668F;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-c .ct-bar, #analytics-projects-by-status-chart .ct-series-c .ct-bar {
  /* Set the colour of this series line */
  stroke: #1d848e;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-d .ct-bar, #analytics-projects-by-status-chart .ct-series-d .ct-bar {
  /* Set the colour of this series line */
  stroke: #ff8566;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-e .ct-bar, #analytics-projects-by-status-chart .ct-series-e .ct-bar {
  /* Set the colour of this series line */
  stroke: #e31151;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-f .ct-bar {
  /* Set the colour of this series line */
  /*stroke: #FA6D6A;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-g .ct-bar {
  /* Set the colour of this series line */
  /*stroke: gray;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-h .ct-bar {
  /* Set the colour of this series line */
  /*stroke: #3fb081;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart1 .ct-series-i .ct-bar {
  /* Set the colour of this series line */
  /*stroke: #337ab7;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-a .ct-line {
  /* Set the colour of this series line */
  stroke: #2980CC;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-b .ct-line {
  /* Set the colour of this series line */
  stroke: #3C9664;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-c .ct-line {
  /* Set the colour of this series line */
  stroke: #ff8566;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-d .ct-line {
  /* Set the colour of this series line */
  stroke: #FA6D6A;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-e .ct-line {
  /* Set the colour of this series line */
  stroke: #48668F;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

/*#chart3 .ct-series .ct-bar {

  stroke: var(--button-color);
}*/

#chart3 .ct-bar {

  /*stroke-linecap: round;*/
  stroke-width: 45px;
}

#chart3 .ct-series-a .ct-bar {
  /* Set the colour of this series line */
  stroke: #227cf7;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-b .ct-bar {
  /* Set the colour of this series line */
  stroke: #48668F;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-c .ct-bar {
  /* Set the colour of this series line */
  stroke: #1d848e;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-d .ct-bar {
  /* Set the colour of this series line */
  stroke: #ff8566;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-e .ct-bar {
  /* Set the colour of this series line */
  stroke: #07d8c9;
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-f .ct-bar {
  /* Set the colour of this series line */
  /*stroke: #FA6D6A;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-g .ct-bar {
  /* Set the colour of this series line */
  /*stroke: gray;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-h .ct-bar {
  /* Set the colour of this series line */
  /*stroke: #3fb081;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#chart3 .ct-series-i .ct-bar {
  /* Set the colour of this series line */
  /*stroke: #337ab7;*/
  /* Control the thikness of your lines */
  /*stroke-width: 12px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#dashboard-projects-count-by-year-chart .ct-bar, #analytics-projects-growth-chart .ct-bar {

  stroke-linecap: unset;
}

/*#dashboard-projects-count-by-year-chart .ct-series-a .ct-bar, #analytics-projects-growth-chart .ct-series-a .ct-bar {

  stroke: #1d848e;
}*/

/*donut*/
.ct-series-a .ct-slice-donut-solid {

  fill: #1c375b !important;
}

.ct-series-b .ct-slice-donut-solid {

  fill: #6f8197 !important;
}

.ct-series-c .ct-slice-donut-solid {

  fill: #c5c5c5 !important; 
}

.ct-series-d .ct-slice-donut-solid  {

  fill: #ec5077 !important;
}

.ct-series-e .ct-slice-donut-solid  {

  fill: #e8d4df !important;
}

.ct-series-f .ct-slice-donut-solid  {

  fill: #77aaff !important;
}


/*bar*/

.ct-series-a .ct-bar {

  stroke: #1c375b !important;
}

.ct-series-b .ct-bar {

  stroke: #6f8197 !important;
}

.ct-series-c .ct-bar {

  stroke: #c5c5c5 !important; 
}

.ct-series-d .ct-bar  {

  stroke: #ec5077 !important;
}

.ct-series-e .ct-bar  {

  stroke: #e8d4df !important;
}

.ct-series-f .ct-bar  {

  stroke: #77aaff !important;
}




/*point*/
.ct-series-a .ct-point {
  /* Colour of your points */
  stroke: #2980CC;
  /* Size of your points */
  stroke-width: 5px;
  /* Make your points appear as squares */
  stroke-linecap: circle;
}

.ct-series-b .ct-point {
  /* Colour of your points */
  stroke: #3C9664;
  /* Size of your points */
  stroke-width: 5px;
  /* Make your points appear as squares */
  stroke-linecap: circle;
}

.ct-series-c .ct-point {
  /* Colour of your points */
  stroke: #ff8566;
  /* Size of your points */
  stroke-width: 5px;
  /* Make your points appear as squares */
  stroke-linecap: circle;
}

.ct-series-d .ct-point {
  /* Colour of your points */
  stroke: #FA6D6A;
  /* Size of your points */
  stroke-width: 5px;
  /* Make your points appear as squares */
  stroke-linecap: circle;
}

.ct-series-e .ct-point {
  /* Colour of your points */
  stroke: #48668F;
  /* Size of your points */
  stroke-width: 5px;
  /* Make your points appear as squares */
  stroke-linecap: circle;
}

.infographTimePeriod {

    color: var(--table-color);
    font-weight: 200;
    font-size: 12px;
}

#chart1 .tooltip > .tooltip-inner , #chart2 .tooltip > .tooltip-inner, #chart3 .tooltip > .tooltip-inner , #chart4 .tooltip > .tooltip-inner, #events-stats-chart .tooltip > .tooltip-inner{
      
      background-color: grey;
      color: white; 
      border: none; 
      padding: 10px;
      font-size: 13px;
      opacity: 5;
      font-family: 'Kalam', cursive;
}

#chart1 .tooltip.top > .tooltip-arrow , #chart2 .tooltip.top > .tooltip-arrow, #chart3 .tooltip.top > .tooltip-arrow , #chart4 .tooltip.top > .tooltip-arrow, #events-stats-chart .tooltip.top > .tooltip-arrow  {
      
      border-top: 5px solid grey;
}

#daily-sales-chart .ct-series-a .ct-line {
  /* Set the colour of this series line */
  stroke: purple;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 10px;*/
}

#daily-sales-chart .ct-series-a .ct-area {
    
    fill: purple;
}

#daily-sales-chart .ct-series-a .ct-point {
    
    stroke: purple;
    stroke-width: 6px;
}

#weekly-sales-chart .ct-series-a .ct-line {
  /* Set the colour of this series line */
  stroke: #02c3d7;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 10px;*/
}

#weekly-sales-chart .ct-series-a .ct-area {
  /* Set the colour of this series line */
  fill: #02d70f;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 10px;*/
}

#events-stats-chart .ct-series-a .ct-bar {
  /* Set the colour of this series line */
  stroke: #2980CC;
  /* Control the thikness of your lines */
  /*stroke-width: 25px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#events-stats-chart .ct-series-b .ct-bar {
  /* Set the colour of this series line */
  stroke: #3C9664;
  /* Control the thikness of your lines */
  /*stroke-width: 25px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#events-stats-chart .ct-series-c .ct-bar {
  /* Set the colour of this series line */
  stroke: #ff8566;
  /* Control the thikness of your lines */
  /*stroke-width: 25px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#events-stats-chart .ct-series-d .ct-bar {
  /* Set the colour of this series line */
  stroke: #FA6D6A;
  /* Control the thikness of your lines */
  /*stroke-width: 25px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

#events-stats-chart .ct-series-e .ct-bar {
  /* Set the colour of this series line */
  stroke: #48668F;
  /* Control the thikness of your lines */
  /*stroke-width: 25px;*/
  /* Create a dashed line with a pattern */
  /*stroke-dasharray: 10px 20px;*/
}

/*.card {

    border: 1px solid #fafafa;
    background-color: #fafafa;
}*/

/*utilities*/

.zoom:hover {

    transition: transform .3s;
    transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.pac-container {  
  z-index: 9999999 !important;  
  top: 57px !important;
  left: 16px !important; 
}

#month-period-toggle-div .btn {

    background-color: #ff8566;
    border: none;
}

#month-period-toggle-div .toggle-handle {

    background-color: #337ab7;
}

/*.analytics-search-btn , .analytics-search-btn:hover {

    background-color: #ff8566;
    border: none;
    color: white;
}*/

/*#analytics-view .nav-tabs {

    border-bottom: 1px solid var(--side-nav-color);
}*/

.centeredMsg {

  display: flex; 
  width: 50%; 
  height: 300px; 
  margin: auto; 
  align-items: center; 
  justify-content: center;

}

#analytics-view ul.nav.nav-tabs li a {

    color: #2a2a2a;
}

#analytics-view ul.nav.nav-tabs li.active a {

    color: var(--top-bar-color);
    background-color: var(--side-nav-color);
    border-color: var(--side-nav-color);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

/*availability calendar style*/
.avCal {
    
    direction: ltr;
}

.avCal .table thead tr, .avCal .table tbody tr {

    height: 36px;
}

.avCal .table tbody tr td {

    min-width: 60px;
    height: 60px;

}

.avCal .table tbody tr td.unblocked {

    background-color: white; 
}

.avCal .table tbody tr td.ui-selecting {

    background-color: #238fb0 !important;
}

.avCal .table-scroll {

  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  border-radius: 2px; 
  border-right: 1px solid lightgray;

}

.avCal .table-scroll table {
  
  width: 100%;
  /*margin: auto;*/
  margin: 0; 
  padding: 0;
}

.avCal .table-wrap {

  position: relative;

}

.can-select {
    
    background-color: white;
}

.avCal .table-scroll th,
.avCal .table-scroll td {

  vertical-align: middle;

}

.avCal .table-scroll tbody td:first-child {

  background: white;
  color: black;
  position: sticky;
  top: 0;
  min-width: auto;
}

.avCal table thead th:first-child, .avCal table tbody td:first-child {
    
    /*position: -webkit-sticky;*/
    position: sticky;
    left: 0;
    z-index: 2;
    background: white;
    color: black;
    padding: 15px;
    /*border-top: black solid 2px;
    border-bottom: black solid 2px;*/
}

.avCal thead th:first-child, .avCal tbody td:first-child {

    z-index: 5;
}

td.cant-select {

    background-color: #ff7b81;
}

#providerLocationAvailabilityDaysNavTabsDiv a {

    color: var(--side-nav-color) !important;
}

/*dashboard charts*/
#chart1 .ct-legend li {

    position: relative;
    z-index: 10;
}

#chart1 .ct-legend li:before {

    width: 13.5px;
    height: 13.5px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
    margin-top: 1.7px;
}

#chart1 .ct-legend li.inactive:before {
    
    background: transparent;
}

#chart1 .ct-legend-inside {

    position: absolute;
    top: 0;
    right: 0;
}

#chart1 .ct-series-0:before {
    background-color: #2980CC;
    border-color: #2980CC;
}

#chart1 .ct-series-1:before {

    background-color: #3C9664;
    border-color: #3C9664;
}

#chart1 .ct-series-2:before {

    background-color: #ff8566;
    border-color: #ff8566;
}

#chart1 .ct-series-3:before {

    background-color: #FA6D6A;
    border-color: #FA6D6A;
}

#chart1 .ct-series-4:before {

    background-color: #48668F;
    border-color: #48668F;
}

#chart2 .ct-legend li {

    /*display: inline-block;*/
    /*padding: 20px 20px;*/
    position: relative;
    z-index: 10;
}

#chart2 .ct-legend li:before {

    width: 13.5px;
    height: 13.5px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
    margin-top: 1.7px;
}

#chart2 .ct-legend li.inactive:before {
    
    background: transparent;
}

#chart2 .ct-legend-inside {

    position: absolute;
    top: 0;
    right: 0;
}

#chart2 .ct-series-0:before {
    background-color: #2980CC;
    border-color: #2980CC;
}

#chart2 .ct-series-1:before {

    background-color: #3C9664;
    border-color: #3C9664;
}

#chart2 .ct-series-2:before {

    background-color: #ff8566;
    border-color: #ff8566;
}

#chart2 .ct-series-3:before {

    background-color: #FA6D6A;
    border-color: #FA6D6A;
}

#chart2 .ct-series-4:before {

    background-color: #48668F;
    border-color: #48668F;
}

/*analytics charts*/
#events-stats-chart .ct-legend li {

    position: relative;
    z-index: 10;
}

#events-stats-chart .ct-legend li:before {

    width: 13.5px;
    height: 13.5px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
    margin-top: 1.7px;
}

#events-stats-chart .ct-legend li.inactive:before {
    
    background: transparent;
}

#events-stats-chart .ct-legend-inside {

    position: absolute;
    top: 0;
    right: 0;
}

#events-stats-chart .ct-series-0:before {
    background-color: #2980CC;
    border-color: #2980CC;
}

#events-stats-chart .ct-series-1:before {
    background-color: #3C9664;
    border-color: #3C9664;
}

#events-stats-chart .ct-series-2:before {
    background-color: #ff8566;
    border-color: #ff8566;
}

#events-stats-chart .ct-series-3:before {
    background-color: #FA6D6A;
    border-color: #FA6D6A;
}

#events-stats-chart .ct-series-4:before {
    background-color: #48668F;
    border-color: #48668F;
}

#appointments-per-service-chart .ct-legend li {

    position: relative;
    z-index: 10;
}

#appointments-per-service-chart .ct-legend li:before {

    width: 13.5px;
    height: 13.5px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
    margin-top: 1.7px;
}

#appointments-per-service-chart .ct-legend li.inactive:before {
    
    background: transparent;
}

#appointments-per-service-chart .ct-legend-inside {

    top: 0;
    right: 0;
}

/*utils*/
.clock {

  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  position: relative;
  background: #2a2a2a;
}

.outer-clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #ddd;
  overflow: hidden;
}

.outer-clock-face::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
}

.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
  content: '';
  position: absolute;
  /*width: 2.5px;*/
  height: 100%;
  background: #7e91ac;
  z-index: 0;
  left: 49%;
}

.outer-clock-face .marking {
  background: #2a2a2a;
  /*width: 2.5px;*/
}

.outer-clock-face .marking.marking-one {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg)
}

.outer-clock-face .marking.marking-two {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg)
}

.outer-clock-face .marking.marking-three {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  transform: rotate(120deg)
}

.outer-clock-face .marking.marking-four {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  transform: rotate(150deg)
}

.inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: #fefefc;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  z-index: 1;
}

.inner-clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 18px;
  margin-left: -5px;
  margin-top: -3px;
  background: #2a2a2a;
  z-index: 11;
}

.hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: #2a2a2a;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hand.hour-hand {
  width: 20%;
  z-index: 3;
  height: 4px;
}

.hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 35%;
}

.hand.second-hand {
  background: #2a2a2a;
  width: 40%;
  height: 4px;
}

 /* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding: 3px 0px 0px 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 400;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: var(--side-nav-color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 

/*radio custom layout*/

/*.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}*/

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
/*.radio-checkmark {
  position: absolute;
  top: 30px;
  left: 27px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}*/

/* On mouse-over, add a grey background color */
/*.radio-container:hover input ~ .radio-checkmark {
  background-color: #ccc;
}*/

/* When the radio button is checked, add a blue background */
/*.radio-container input:checked ~ .radio-checkmark {
  background-color: #2196F3;
}*/

/* Create the indicator (the dot/circle - hidden when not checked) */
/*.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}*/

/* Show the indicator (dot/circle) when checked */
/*.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}*/

/* Style the indicator (dot/circle) */
/*.radio-container .radio-checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}*/

/* Hide the browser's default radio button */
/*.radio-container-sp input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}*/

/* Create a custom radio button */
/*.radio-checkmark-sp {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}*/

/* On mouse-over, add a grey background color */
/*.radio-container-sp:hover input ~ .radio-checkmark-sp {
  background-color: #ccc;
}*/

/* When the radio button is checked, add a blue background */
/*.radio-container-sp input:checked ~ .radio-checkmark-sp {
  background-color: #2196F3;
}*/

/* Create the indicator (the dot/circle - hidden when not checked) */
/*.radio-checkmark-sp:after {
  content: "";
  position: absolute;
  display: none;
}*/

/* Show the indicator (dot/circle) when checked */
/*.radio-container-sp input:checked ~ .radio-checkmark-sp:after {
  display: block;
}*/

/* Style the indicator (dot/circle) */
/*.radio-container-sp .radio-checkmark-sp:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}*/

/*page loader*/

@keyframes ldio-tz5c0j8h04 {

  0% { opacity: 1 }
  50% { opacity: .5 }
  100% { opacity: 1 }
}

.ldio-tz5c0j8h04 div {

  position: absolute;
  width: 28.560000000000002px;
  height: 81.6px;
  /*top: 61.2px;*/
  animation: ldio-tz5c0j8h04 0.75s cubic-bezier(0.5,0,0.5,1) infinite;
}

.ldio-tz5c0j8h04 div:nth-child(1) {

  transform: translate(26.52px,0);
  background: var(--side-nav-color);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  animation-delay: -0.8219178082191779s;
}

.ldio-tz5c0j8h04 div:nth-child(2) {

  transform: translate(67.32000000000001px,0);
  background: var(--top-bar-color);
  animation-delay: -0.547945205479452s;
}

.ldio-tz5c0j8h04 div:nth-child(3) {

  transform: translate(108.12px,0);
  background: var(--button-color);
  animation-delay: -0.273972602739726s;
}

.ldio-tz5c0j8h04 div:nth-child(4) {

  transform: translate(148.92000000000002px,0);
  background: var(--top-bar-color);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  animation-delay: -1.36986301369863s;
}

.loadingio-spinner-bars-q59hc00lgco {
  
  width: 204px;
  height: 204px;
  display: inline-block;
  overflow: hidden;
  /*background: #f1f2f3;*/
}

.ldio-tz5c0j8h04 {

  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}

.ldio-tz5c0j8h04 div { 

    box-sizing: content-box; 
}

/*pagination buttons*/

.pagination {

  margin: 0px 0px;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover {

    background-color: var(--top-bar-color);
    color: black;
    border: 1px solid #D0D5DD;
}

.pagination > li > a {

    color: black;
    border: 1px solid #D0D5DD;
    padding: 6px 12px;
    cursor: pointer;
    /*font-size: 12px;*/
}

.pagination > li > a:hover {

    /*border: 1px solid var(--side-nav-color);*/
    border: 1px solid #D0D5DD;
}

.nopadding {
    padding: 0 !important;
}

#user-notifications-by-date-nav-tabs-content .table > tbody > tr > td {

  padding: 13px;
  border-top: none !important;
}

/*billing screen*/

.billing-account-receivables-well .nav-tabs > li.active > a, 
.billing-account-receivables-well .nav-tabs > li.active > a:focus,
.billing-account-receivables-well .nav-tabs > li.active > a:hover {

    color: var(--top-bar-color);
    cursor: default;
    background-color: var(--button-color);
    border: 1px solid var(--button-color);
    border-radius: 0px;
    border-bottom-color: transparent;

}

.billing-account-receivables-well .nav-tabs > li > a {

    color: #2a2a2a;
}

.billing-account-receivables-card-header {

    padding: 15px 20px 5px;
    background-color: var(--side-nav-color);
    color: #fafafa;
    border-top-right-radius: 0.3em;
    border-top-left-radius:  0.3em;
    border-bottom-right-radius: 0em; 
    border-bottom-left-radius: 0em;
    border: 1px solid var(--side-nav-color);

}

.billing-account-receivables-card-header p {

    font-size: 15.5px;
    font-weight: 100;
}

.billing-account-receivables-card {
    
    box-shadow: 7px 7px 7px lightgray;
    border: none !important;
    border-radius: 0.3em;
}

.billing-account-receivables-well {

    background-color: #fafafa;
    border-top-right-radius: 0em;
    border-top-left-radius: 0em;
    border-bottom-right-radius: 0.3em; 
    border-bottom-left-radius: 0.3em;
    border: none;
    /*border: 1px solid lightgray;*/
}

.billing-account-receivables-well-styling {

    border: none; 
    border-radius: 0.2em; 
    color: white; 
    box-shadow: 4px 4px 4px lightgray;
    /*background-image: url('../images/subtle-grey.png');*/
    padding: 20px 20px;
}

.billing-account-receivables-well-styling img {

    width: 60px;
    height: 60px;
}

.billing-account-receivables-card a {

    float: right;
    display: inline-block;
    font-size: 15px;
    color: var(--top-bar-color);
}

.billing-account-receivables-card label {

    font-size: 15.5px;
    font-weight: 100;
}

/*testing nav tabs rounded*/

.addEntityNavTabsDiv .nav-tabs {

  border-bottom: 0px !important;
}

.addEntityNavTabsDiv .liner {
    
    height: 2.5px;
    background: var(--side-nav-color);
    position: absolute;
    width: 10%;
    /*margin: 0 auto;*/
    left: 50px;
    right: 0;
    top: 50%;
    z-index: 1;
}

.addEntityNavTabsDiv .liner-sm {
    
    height: 2.5px;
    background: var(--side-nav-color);
    position: absolute;
    width: 10%;
    /*margin: 0 auto;*/
    left: 50px;
    right: 0;
    top: 50%;
    z-index: 1;
}

/*#add-fast-proposal-nav-tabs .liner,
#add-proposal-nav-tabs .liner {

    height: 2.5px;
    background: var(--side-nav-color);
    position: absolute;
    width: 10%;
    left: 50px;
    right: 0;
    top: 55px !important;
    z-index: 1;

}*/

#add-fast-proposal-nav-tabs-div .nav-tabs > li.active > a, 
#add-fast-proposal-nav-tabs-div .nav-pills > li.active > a,
#add-proposal-nav-tabs-div .nav-tabs > li.active > a,
#add-proposal-nav-tabs-div .nav-pills > li.active > a {

    color: var(--top-bar-color);
    background: var(--side-nav-color);
    border-radius: 3px;
    padding: 5px 12px !important;
    margin-bottom: 5px;
}

#add-fast-proposal-nav-tabs-div .nav-tabs > li > a, 
#add-fast-proposal-nav-tabs-div .nav-pills > li > a,
#add-proposal-nav-tabs-div .nav-tabs > li > a, 
#add-proposal-nav-tabs-div .nav-pills > li > a {

    color: var(--side-nav-color);
    background: var(--top-bar-color);
    border: 1.5px solid var(--side-nav-color) !important;
    margin-right: 10px;
    border-radius: 3px;
    padding: 5px 12px !important;
    /*margin-bottom: 5px;*/
    height: auto;
}

#add-fast-proposal-nav-tabs-div ul,
#add-proposal-nav-tabs-div ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

/** Optionally if you don't want word wrap **/
#add-fast-proposal-nav-tabs-div .nav-tabs > li,
#add-proposal-nav-tabs-div .nav-tabs > li {

    white-space: nowrap;
}

/*#add-proposal-types-nav-content-div.addEntityNavContentDiv .tab-pane {

  padding: 20px 20px 10px 20px !important;
}*/

.addEntityNavTabsDiv .nav-tabs > li.active > a, 
.addEntityNavTabsDiv .nav-tabs > li.active > a:hover,
.addEntityNavTabsDiv .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    /* background-color: #ffffff; */
    border: 0;
    border-bottom-color: transparent;
}

.addEntityNavTabsDiv span.round-tabs {

    width: 50px;
    height: 50px;
    line-height: 47px;
    display: inline-block;
    border-radius: 100px;
    background: white;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 17px;
}

.addEntityNavTabsDiv span.round-tabs {

    color: var(--top-bar-color);
    background: var(--side-nav-color);
}

.addEntityNavTabsDiv li.active span.round-tabs {

    background: var(--button-color) !important;
    border: 2px solid var(--side-nav-color);
    color: var(--top-bar-color);
}

.addEntityNavTabsDiv .nav-tabs > li {
    
  width: 10%;
}

.addEntityNavTabsDiv li:after {
    
    content: " ";
    position: absolute;
    left: 25%;
    opacity:0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: var(--top-bar-color);
    /*transition:0.1s ease-in-out;*/
    
}

.addEntityNavTabsDiv li.active:after {
    content: " ";
    position: absolute;
    left: 30%;
   opacity:1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: white;
    
}

.addEntityNavTabsDiv .nav-tabs > li a {

   width: 50px;
   height: 50px;
   margin: 20px 15px;
   border-radius: 100%;
   padding: 0;
}

.addEntityNavTabsDiv .nav-tabs > li a:hover {
    
  background: var(--top-bar-color) !important;
  color: var(--side-nav-color) !important;
  border: none !important;
  text-decoration: none;

}

.addEntityNavContentDiv .tab-pane {

  /*position: relative;*/
  padding: 10px 20px;
  border-radius: 5px;
  /*border: 0.5px solid var(--side-nav-color) !important;*/
  background: white;

}

.edit-task-dates-interval {

  margin-left: 2.5px;
}

.toggleTaskBreakdown, .toggleTaskSummaryBreakdown {

  margin-right: 5px;
}

.toggleTaskBreakdown img, .toggleTaskSummaryBreakdown img {

  height: 18px;
  width: 18px;
  margin-right: 3px;
  margin-top: -2.5px;
}

.addEntityNavContentDiv h5, .addEntityNavContentDiv p {

  line-height: 1.5;
}

.ct-chart {  
    .ct-legend {      
        position: relative;
        z-index: 10;
        list-style: none;
        text-align: center;

        li {
            position: relative;
            padding-left: 22px;
            margin-right: 5px;
            margin-bottom: 5px;
            cursor: pointer;
            display: inline-block;

            &:before {
                width: 17px;
                height: 17px;
                position: absolute;
                left: 0;
                content: '';
                border: 3px solid transparent;
                border-radius: 2px;
            }
            .inactive:before {
                background: transparent;
            }

            &:nth-child(1)::before{
                background-color: #1c375b; 
            }    
        
            &:nth-child(2)::before{
                background-color: #6f8197;
            }
        
            &:nth-child(3)::before{
                background-color: #c5c5c5;
            }
        
            &:nth-child(4)::before{
                background-color: #ec5077;
            }

            &:nth-child(5)::before{
                background-color: #e8d4df;
            }
            
            &:nth-child(6)::before{
                background-color: #77aaff;
            }

        }

        .ct-legend-inside {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    g:not(.ct-grids):not(.ct-labels) g {
        &:nth-child(1){
            .ct-point,.ct-line {
                stroke: #d70206;        
            }
        }
        &:nth-child(2){
            .ct-point,.ct-line {
                stroke: #f05b4f;      
            }
        }
        &:nth-child(3){
            .ct-point,.ct-line {
                stroke: #f4c63d;       
            }
        }
        &:nth-child(1n+4){
            .ct-point,.ct-line {
                stroke: #F06292;       
            }
        }
    }
}