@import url(https://use.fontawesome.com/releases/v5.0.10/css/all.css);

:root {
  --blue: #41a5e1;
  --dark-blue: #102837;
  --light-blue: #64b6ff;
  --teal: #41e1dd;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #198754;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --bs-primary: #c00000;
  --bs-secondary: #787b82;
  --bs-success: #11d3bc;
  --bs-info: #a2d5f2;
  --bs-warning: #ff7e67;
  --bs-danger: #f67280;
  --bs-light: #fafafa;
  --bs-dark: #4e4e4e;
  --bs-black: #181818;
  --bs-blue: #0d6efd;

  /* brand colors */

  --primary-brand-color: var(--bs-blue);
  --secondary-brand-color: var(--bs-secondary);
  --accent: var(--teal);
  /* --brand-box-shadow: 0 0 0 0.25rem rgba(201, 38, 38, 0.5); */
}

body {
  font-size: 14px;
  color: var(--bs-dark);
  font-family: "Roboto", arial, sans-serif;
}

a:hover {
  color: var(--accent);
}

.accent-color{
  color:var(--primary-brand-color);
}

.active {
  background-color: var(--dark-blue);
  color: white;
}

.alternative-color{
  color: var(--dark-blue) ;
}

.permission-tab {
  color: black !important;
}

/* BUTTONS STYLING */
/* .btn.btn-primary {
  background-color: var(--primary-brand-color);
  border: var(--primary-brand-color) solid 1px;
}

.btn.btn-secondary {
  background-color: var(--secondary-brand-color);
  border: var(--secondary-color) solid 1px;
}

.btn.btn-secondary:hover {
  background-color: var(--dark-blue);
  border: var(--dark-blue) solid 1px;
} */

.form-check-input:checked {
  background-color: var(--green);
  border: var(--green);
}

/* dropdown styling */
.dropdown-menu[data-bs-popper] {
  left: -77px;
}

/* spinner styling  */
.d-none {
  display: none !important;
}

#loading-spinner {
  position: fixed !important;
  top: 0 !important;
  right: 0;
  bottom: 0;
  left: 0 !important;
  z-index: 99999 !important;
}

.spinner-container {
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.spinner-border {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-border;
}

/* home logo  */
.lead_central_logo {
  height: 150px;
}

@media only screen and (max-width: 600px) {
  .lead_central_logo {
    height: 50px;
  }
  .spinner-container {
    top: 30%;
  }
}

/* NAV BAR STYLING  */
/* SIDE BAR STYLING  */

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
  overflow: hidden;
  min-height: 100vh;
}

#sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 0;
  min-width: 160px;
  max-width: 160px;
  background: var(--primary-brand-color);
  color: var(--white);
  transition: all 0.3s ease;
}


#sidebar .sidebar-header {
  width: 100%;
  max-width: 160px;
  padding: 0px 10px 10px 20px;
  transition: max-width 0.15s ease;
}

#sidebar.active {
  margin-left: -90px;
  align-items: flex-end;
}

.sidebar-header:hover .nav-logo {
  transform: scale(1.1);
}

#sidebar .dropdown-menu {
  background: var(--primary-brand-color);
  top: 0;
  left: 100%;
  margin-left: 0px;
}

@media (min-width: 992px) {
  #sidebar .dropdown-menu {
    left: 100%;
    margin-left: 0px;
    top: 0;
  }
}


#sidebar .dropdown-item:hover {
  background-color: white;
  color: black !important;
}

#sidebar .dropdown-menu li a{
  color:white !important;
}


.side-icons span,
.expand {
  display: none;
}

/* logo size  */
.nav-logo {
  width: 100%;
  max-width: 120px;
  height: auto;
}

.nav-logo-home {
  width: 100%;
}

.sidebar-header.d-flex.flex-column.justify-content-start.align-items-center {
  z-index: 33333;
}

/* #expand-button{
  z-index: 2222;
}

#sidebar.active #expand-button {
  position: relative;
  bottom: 440px;
  left: 11px;
}

#sidebar #expand-button {
  position: relative;
  bottom: 502px;
  left: 136px;
}

@media only screen and (max-width: 600px) {
  #side-ul ul{
    z-index: 999999;
  }
  
  #sidebar.active #expand-button {
    bottom: 428px;
  }
  #sidebar #expand-button {
    bottom: 480px;
    }
} */

.sidebar-header {
  position: relative;
}

.sidebar-header a {
    z-index: 22;
}

#sidebar.active #expand-button {
  position: absolute;
  top: -14%;
  left: 4rem;
  z-index: 11;
}

#expand-button {
  position: absolute;
  top: -14%;
  left: 9rem;
  z-index: 11;
}

#expand_close_button {
  background-color: #0d6efd; /* match your theme if needed */
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#expand_close_button svg {
  width: 20px;
  height: 20px;
}

#expand_close_button:hover {
  background-color: #0b5ed7;
}

#expand_close_button:focus{
  box-shadow: none !important;
}

.side-user {
  word-break: break-word;      
  overflow-wrap: anywhere;     
  white-space: normal;    
  padding: 4px 8px;           
  font-size: 14px;              
  /* color: white;   */
}


.navbar.navbar-expand-lg.sticky-top.bg-light.mb-2 {
  z-index: 0;
}

.bi.bi-chevron-right.expand.side_button_open {
  position: relative;
  left: 7px;
}
/* styling of the links in the side bar */

.nav-link {
  color: white;
}

.nav-link:hover {
  color: var(--accent);
}

#Group_88{
  color: white;
}

#Group_88:hover{
  color: var(--accent);
}

.nav-link:active {
  color: var(--dark-blue);
  font-weight: bold !important;
}

.tab-link{
  color: black;
}

.tab-link:hover{
  color: var(--accent);
}

.tab-link:active{
  color: var(--dark-blue) !important;
  font-weight: bold !important;
}

/* styling icons and brand logo when the sidebar is closed  */

.sidebar-button-closed {
  right: 0.625rem;
}

#sidebar.active .sidebar-header {
  text-align: end;
  max-width: 80px;
  transition: max-width 0.15s ease;
}


/* #sidebar.active #side-ul {
  position: relative;
  left: -7px;
} */

.side-icons {
  text-align: center;
}
/* 
#side-ul {
  position: relative;
  left: 18px;
} */

#side-ul {
  width: 100%;
}

#sidebar.active > ul > li {
  margin-left: 60%;
}

#sidebar > ul > li {
  margin-left: 10%;
}


.side_button_close {
  display: none;
}

.side_button_open {
  display: block;
}

.side-user {
  font-size: 10px;
  line-height: initial;
}

.list-unstyled{
  line-height: 35px;
}

/* HEADER NAV STYLING  */
.header-nav {
  color: black;
}

/* HOME STYLING */
.portal-welcome {
  font-size: 60px;
  font-weight: bold;
  opacity: 0.8;
  color: var(--dark-blue);
}

/* CONTENT STYLE  */

#content {
  width: calc(100% - 80px);
  padding: 0px 10px 20px 10px;
  max-height: 100vh;
  transition: all 0.3s ease;
  overflow: scroll;
}

#content.short {
  width: calc((100% - 80px) - 90px);
}

/* MEDIA QUERY FOR NAVBAR AND CONTENT  */

@media (max-width: 768px) {
  #content {
    width: 85%;
  }
}

/* DM Counts styling  */
.dwelling-input,
.zips {
  border: 1px solid #ced4da;
}

#counties,
#zips {
  border: 1px solid #ced4da;
}

.form-box {
  border: 1px solid #ced4da;
  padding: 10px;
  border-radius: 8px;
}

#notifications-container {
  position: fixed;
  top: 75px;
  width: 300px;
  z-index: 9998;
  left:70px;
}

.toast {
  background-color: rgb(255, 255, 255,1) !important;
  position: fixed;
	z-index: 9999;
}

.info-notes {
  color: green;
  font-style: italic;
  font-size: 14px;
}

@media only screen and (max-width: 450px) {
  #notifications-container {
    bottom: 45px;
    top: unset;
  }
}

/* DM Counts Styling  */
/* .btn.btn-outline-dark.border.border-dark {
  padding: 0.2em 0.7em;
  font-size: 0.875rem !important;
  min-width: 100%;
  float: left;
  margin: 5px 2px;
  white-space: nowrap !important;
  word-wrap: break-word !important;
  text-overflow: ellipsis;
  max-width: 37px;
  overflow: hidden;
} */

#counties,
#zips,#geo-chosen,#state {
  min-height: 160px;
  max-height: 160px;
  overflow-x: hidden;
  overflow-y: scroll;
}

#state, #state_selected {
  max-height: 110px;
  min-height: 110px;
  overflow-x: hidden;
  overflow-y: scroll;
}

#new_orders_v2_screen_one label{
  font-size:13px;
}

/* .filter_spacer {
  height: 33px;
} */

/* .counties-container {
  position: relative;
} */

/* .county-filter {
  position: sticky;
  top: 0;
  background-color: white;
} */

/* .form-check-inline {
  margin: 0 0.75rem;
} */

/* leads styling  */
/* #advance-search-leads-form {
  display: none;
} */

/* .form-control[onkeyup] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
} */

/* .search_items_containers {
  border: 1px solid #ced4da;
  min-height: 300px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
} */

.tab-content > .tab-pane {
  background-color: #fff;
  color: var(--dark-dark);
}

/* .btn-clear-filter {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: transparent;
  border: 2px solid transparent;
  padding: 0.3125rem;
}
.btn-clear-filter svg {
  width: 1.5rem;
  height: auto;
  fill: #555;
  transition: fill 0.3s ease-in-out;
}

.btn-clear-filter:hover svg {
  fill: #000;
} */
/* 
.c_slice {
  position: relative;
  width: 100%;
}

.c_slice button.btn.btn-sm.btn-outline-primary {
  width: 100%;
}

.c_row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  transition: opacity 0.3s ease-in-out;
} */

/* #zipsToInclude_container .c_row,
#zipsToExclude_container .c_row {
  visibility: hidden;
  opacity: 0;
}

#zipsToInclude_container .c_row.d-flex,
#zipsToExclude_container .c_row.d-flex {
  visibility: visible;
  opacity: 1;
} */

.inactive {
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

/* #zips_to_include_wrapper .nav-pills .nav-item,
#zips_to_exclude_wrapper .nav-pills .nav-item {
  width: calc(50% - 10px);
}

#zips_to_include_wrapper .nav-pills .nav-link,
#zips_to_include_wrapper .nav-pills .show > .nav-link,
#zips_to_exclude_wrapper .nav-pills .nav-link,
#zips_to_exclude_wrapper .nav-pills .show > .nav-link {
  border: var(--primary-brand-color);
  color: var(--primary-brand-color);
  margin: 0 auto;
  width: calc(100% - 10px);
}

#zips_to_include_wrapper .nav-pills .nav-link.active,
#zips_to_include_wrapper .nav-pills .show > .nav-link,
#zips_to_exclude_wrapper .nav-pills .nav-link.active,
#zips_to_exclude_wrapper .nav-pills .show > .nav-link {
  border: #ccc;
  color: #fff;
} */

/* ORGANIZATION PAGE STYLING  */

#step2,
#step3,
#step5,
#step4,#neworg-step2,#neworg-step3,#neworg-step5,#neworg-step6,#neworg-step7,#neworg-step4{
  display: none;
}

.org_search_list {
  max-height: 200px;
  max-width: 300px;
  border: black solid 1px;
  display: none;
  background-color: lightgray;
}

#org_list p {
  margin-bottom: 0px;
}

/* LEAD DIRECT MAIL STYLING  */

.leads-detail-modal {
  border-radius: 15px;
  border: solid 2px var(--dark-blue);
}

#alertModal {
  background-color: var(--red);
}

#alert-lead-content {
  border: 5px black solid;
}

.dt-button {
  border-radius: 30px !important;
  /* padding: 10px 20px; */
}

/* FORM STYLING */
#cpm-order-search-form,
#cpm-lead-search-form,
#search-user-form,
#direct-mail-leads-search-form,
#organization_search_form,
#dm-counts-form,
#dm_counts_reports_search,
#direct-mail-search-user-form,
#lead_credit_search_form,
#batch_agent_update,
#digital-leads-search-form,
#orders_form,#manage_quotes_v2_search,
#orders_form,#priority_update_form,
#digital-leads-billing-search-form,
#cpm_billing_section,
#direct_mail_billing_section,
#digital_orders_form,
#direct_mail_test_form,
#direct-mail-testing-search-form{
  /* border: #d7d7d7 solid 2px; */
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
  0 6px 20px rgba(0, 0, 0, 0.1);
}

.dt-btn-match{
  background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 0.88em;
  padding: 0.5em 1em !important;
}

.dt-btn-match:hover{
  border: 1px solid #666;
  background-color: rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
}

#cpm-order-search-form input.form-control,
#cpm-order-search-form select,
#cpm-lead-search-form input.form-control,
#cpm-lead-search-form select,
#search-user-form input.form-control,
#search-user-form select,
#direct-mail-leads-search-form select,
#direct-mail-leads-search-form input.form-control,
#organization_search_form select,
#organization_search_form input.form-control,
#dm-counts-form select,
#dm-counts-form input.form-control,
#dm_counts_reports_search select,
#dm_counts_reports_search input.form-control,
#direct-mail-search-user-form select,
#direct-mail-search-user-form input.form-control,
#lead_credit_search_form select,
#lead_credit_search_form input.form-control,
#digital-leads-search-form select,
#digital-leads-search-form input.form-control,
#orders_form select, #orders_form.form-control,
#manage_quotes_v2_search select, #manage_quotes_v2_search.form-control,#priority_update_form select, #priority_update_form.form-control,
#digital_orders_form select, #digital_orders_form.form-control,
#direct_mail_test_form select, #direct_mail_test_form.form-control,
#direct-mail-testing-search-form select, #direct-mail-testing-search-form.form-control {
  border: #d7d7d7 solid 1px;
  border-radius: 30px;
}

/* password reset styling validation */
.invalid {
  color: red;
}
.valid {
  color: green;
}

.print-leads-button{
 background: #9ab973;
 color: white;
 padding-left: 0.5em !important;
 padding-right: 0.5em !important;
}

.print-leads-button:hover{
  background: #6b8e23;
  color: white;
 }

 .export-button-style{
  background-color: #6c757d;
  color: white;
  border: #6c757d solid 2px;
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
 }

 .export-button-style:hover{
  background-color: #212529;
  color: white;
 }

 .assigned-select-leads{
  background: #ffa07a;
  color: white;
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
 }

 .assigned-select-leads:hover{
  background-color: #cc5500;
  color: white;
 }

.bulk-action-buttons{
  background: #24ccc3;
  color: white;
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
 }

 .bulk-action-buttons:hover{
  background-color: #1ea9a2;
  color: white;
 }

/* this is the styling for the export buttons and search for the tables */
@media only screen and (max-width: 600px) {
  .columns.columns-left.btn-group.float-left {
    float: right;
  }
  .float-right.search.btn-group {
    width: 100%;
  }
}

/* styling for history in orders modal  */
#history_parent {
  height: 250px;
  border: solid black 2px;
  padding: 5px;
}

.overload_img {
  height: 300px;
}

#org_hiearchy li{
    display: flex;
}
#org_hiearchy li::before {
  content: "\2022";
  margin-right: 10px;
}

.dropdown-menu {
  min-width: 11rem;
  line-height: initial;
}

#functional_buttons{
  display: inline-flex;
}

@media only screen and (max-width: 765px) {
  #assign-modal-button {
    position: relative;
    left: -10px;
  }
  .custom-div {
    display: flex;
    flex-direction: column;
    margin-top: 0px !important;
  }
  #lead_count,#lead_count_max {
    margin-bottom: 10px;
  }
}


/* THIS IS TO STYLE THE MANAGE LEADS TABLE HEADER BUTTONS WHILE IT RESIZES */
@media only screen and (max-width: 1237px) {
#my-target-element .special-div{
  width: 38% !important;
}
#lead_count_max{
  font-size:12px;
}
#print-pdf-leads,#assign-modal-button {
  font-size: 12px;
}

}

@media only screen and (max-width: 1170px) {
  #my-target-element .special-div {
    width: 34% !important;
  }
}

@media only screen and (max-width: 1106px) {
  #my-target-element .special-div {
    width: 100% !important;
    margin-bottom: 20px;
    justify-content: space-between !important;
  }
}

@media only screen and (max-width: 1106px) {
  #my-target-element .not-so-special{
    width: 42.667% !important;
  }
}

@media only screen and (max-width: 995px) {
  #my-target-element .not-so-special{
    width: 100% !important;
    margin-bottom: 20px;
    justify-content: space-between !important;
  }
}

@media (max-width: 600px) {
  #lead_count {
    display: inline-block;
  }

}


.scrollable-cell{
    max-height: 150px !important;
    overflow-y: scroll !important;
}

.table-warning {
  --bs-table-bg: #ffe284;
}

th,td{
  text-align: center;
  padding: 5px;
  /* font-size: 12px !important; */
}

.ui-datepicker-calendar th{
  min-width: initial;
}


/* STYLING CODE TO OVER RIDE THE BROWSERS STYLING */

.counties-picked{
  background-color: #41a5e1 !important;
  color: white !important;
}

select:-internal-list-box option:checked {
  background-color: #41a5e1 !important;
  color: white !important;
}

.counties-picked option:selected{
  background-color: #41a5e1 !important;
  color: white !important;
}

#counties option:checked{
  background-color: #41a5e1 !important;
  color: white !important;
}

.msis-gray{
  background-color: lightgray;
  }

.msis-midblue{
background-color: #abdcff;
}

.msis-lightblue{
  background-color: #dff2ff;
}

#filter_category_select,#digital_filter_category_select {
  position: absolute;
  max-width: fit-content;
}


#pause-section{
  max-height:100px
}

@media only screen and (max-width: 1200px) {
  #filter_category_select,#digital_filter_category_select {
    max-width: 100px;
  }
}

@media only screen and (max-width: 991px) {
  #list_of_pauses {
    height: 83px;
  }
  #filter_category_select,#digital_filter_category_select {
    max-width: fit-content;
  }
}

@media only screen and (max-width: 715px) {
  #filter_category_select,#digital_filter_category_select {
    max-width: 100px;
  }
}

@media only screen and (max-width: 543px) {
  #filter_category_select,#digital_filter_category_select {
    max-width: 90px;
  }
}

.geo-width{
  min-width: 230px !important;
}

/* this is for the buttons in orders management to be able to not ruin layout */
.small-device-button{
  display: none;
}

/* label{
  font-size: 12px;
} */

@media only screen and (max-width: 1300px){
  .small-device-button{
    display: block;
  }
  .order-management-buttons-container
  {
    position: relative;
    left: 20px;
  }
}

@media only screen and (max-width: 950px){
  .small-device-button{
    display: none;
  }

}

body td{
  font-weight: normal;
}


/* DIGITAL ORDER UI CODE  */
#new-order-step2, #new-order-step3{
  display: none;
}

.select2-container,.select2-dropdown {
  width: 100% !important;
}

#confirm_order_table td , #confirm_order_table th{
  text-align: start;
}

.disable-style{
pointer-events: none;
background-color: #d1d1d1;
}

.anchor-disabled{
  pointer-events: none;
  color: #6c757d;
}


.days-checkboxes {
  padding: 10px;
  background-color: #f4f4f4;
  border-radius: 5px;
  width: fit-content;
}
.days-checkboxes label {
  margin-right: 10px;
  font-family: Arial, sans-serif;
}

#prioritization-section{
  height: 80vh;
  overflow: scroll;
}

.modal {
  z-index: 44444 !important;
}

.edit-icon {
  position: relative;
  top: -6px;
}

.permissions
{
  padding: 5px;
  margin: 10px;
  border-radius: 30px;
  border:transparent solid 1px !important;
  font-size: 15px;
  background-color: #0141ff;
}

.permissions:hover{
    transform: scale(1.2);
    background-color: #3567fa;
}

.pill-info{
    font-size:12px !important;
}

.permission-list-group-item
{
  font-size: 12px !important;
}
.fs-6{
    font-size:12px !important;
}
.permission-toast {
  position: fixed;
  z-index: 9999999;}


/* NEW STYLING TO TEST MAKE SURE IT WORKS
ORDERS.PY */
.card.card-body.text-break.p-1
{
background: transparent;
border: none;
}

/* ORDERS STEP 2 */
#orders-v2-cpl .zip-codes, #orders-v2-cpm .zip-codes{
  white-space: normal !important;
  word-wrap: break-word;
  max-height: none !important;
  }

#nav-tab .nav-link {
  transition: opacity 0.3s ease;
}

.nav-link.non-active {
  opacity: 0.5;
}

#nav-cpl{
  border-top:solid 4px #0d6efd;
}

#nav-cpm {
  border-top: solid 4px #eba834;
  }
#nav-cpl-tab,#nav-cpm-tab{
    border-bottom: 0;
  }

#nav-cpm-tab {
  background: #eba834 !important;
  margin-left: 20px;
  }

/* ORDERS STEP 3 */
#orders-v2-modify-cpl .zip-codes, #orders-v2-modify-cpm .zip-codes{
  white-space: normal !important;
  word-wrap: break-word;
  max-height: none !important;
}


/* BUTTON TOGGLE IN MANAGE LEADS DIRECT AND DIGITAL  */
#toggleSearchButton {
  position: relative;
  display: flex;
  align-items: center;
}

#toggleSearchButton .toggle-text {
  display: none;
  margin-left: 10px;
  font-size: 14px;
}

#toggleSearchButton:hover .toggle-text {
  display: inline-block;
  color: white;
}

#toggleSearchButton svg {
  transition: transform 0.6s; /* Increase duration to 0.6s for slower roll */
}

#toggleSearchButton:hover svg {
  transform: rotate(-180deg);
  color: white;
}

#toggleSearchButton.open .toggle-text,
#toggleSearchButton.open svg {
  color: white;
}

#toggleSearchButton.open .toggle-text {
  display: inline-block;
}


/* THIS STYLES THE HOME PAGE FOR CLIENTS */
.team_pic {
  border-radius: 50%; /* Optional: to make the image circular */
  max-width: 100%;
  height: auto;
}

.nav-logo-home {
  min-width: 150px; /* Set minimum width */
  width: 100%; /* Make it responsive */
  height: auto; /* Maintain aspect ratio */
}

.home-summary{
  background-color: #f2f2f2;
  border-radius: 10px;
  height: 82vh;
  overflow: hidden;
}

.summary-leads-section{
  height: 80vh;
  overflow: scroll;
}

.team_section{
  padding: 20px;
  padding-top: 20px;
  border-radius: 10px;
  background-color: rgb(234, 238, 242);
}

.content-home{
  padding-left: 4% !important;
  padding-right: 4% !important;
}


@media only screen and (min-width: 1500px) {
.team_pic{
  width: auto !important;
  max-height: 150px !important;
}
}

@media only screen and (max-width: 991px) {
  .team_section{
    margin-left: initial;
    margin-right: initial;
  }
}

@media only screen and (max-width: 677px) {
  .team_pic {
    width: 100% !important;
    height: auto;
  }
  .content-home{
    padding-left: initial !important;
    padding-right: initial !important;
  }

}


#digital-county-section-button, #digital-county-section,#order-detail-coupon-section,#rgi-accordion,#client-accordion{
  display: none;
}

.highlight{
  -webkit-box-shadow: 0px 0px 19px 3px rgb(194, 226, 255);
  -moz-box-shadow: 0px 0px 19px 3px rgba(194, 226, 255);
  box-shadow: 0px 0px 19px 3px rgba(194, 226, 255);
}

#longTaskModal {
  z-index: 99999 !important;
}

.bell-attention {
  animation: bellPulse 1.5s ease-in-out 2;
}

@keyframes bellPulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.notification-section .dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
}

#notificationDropdownBtn svg {
  color: black;
  transition: color 0.3s ease;
}

#notificationDropdownBtn.has-notification svg {
  fill: red;
}

.navbar.navbar-expand-lg.sticky-top.bg-light.mb-2 {
  z-index: 2222;
}

#user_input_new_order_multi_state {
  height: 200px;
  overflow: scroll;
}