body {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 400;
    background: var(--fill-white);
  }
  .btn {
    padding: 12px 16px;
    border-radius: 2px;
    text-transform: uppercase;
    font-style: normal;
    font-family: "Futura PT", sans-serif;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 2px;
    font-size: 16px;
    min-width: 7.5rem;
}
.btn-primary:disabled , .btn-primary:disabled:hover , .btn-info:disabled:hover ,  .btn-info:disabled {
        background-color: var(--surface-gray-elevated);
        color: #767676;
        border-color: var(--surface-gray-elevated);
}
.btn-primary:disabled:hover , .btn-info:disabled:hover {
    cursor: not-allowed;
} 
.btn-primary {
    background-color: var(--button-primary-default);
    border-color: var(--button-primary-default);
}
.btn-primary:hover {
    background-color: var(--button-primary-hovered);
    border-color: var(--button-primary-hovered);
}
.btn-secondary {
    background-color: var(--button-secondary-default);
    border-color: var(--border-default);
    color: var(--text-primary);

}
.btn-secondary:hover {
      border-color: transparent !important;
    }
.btn-secondary:hover {
    background-color: var(--button-secondary-hovered);
    color: var(--text-primary);
}
.btn-danger {
    background-color: var(--button-danger);
    border-color: var(--button-danger);
}
.btn-danger:hover {
    background-color: var(--button-danger-hovered);
    border-color: var(--button-danger);
}
.btn-info {
    background-color: var(--fill-white);
    border-color: var(--border-default);
    color: var(--text-primary);
}
.zoom-in-button {    
    background: url(../../images/zoomin.svg) no-repeat center;
    width: 24px;
    height: 24px;
    border: unset;
    cursor: pointer;

}
.zoom-out-button {    
    background: url(../../images/zoomout.svg) no-repeat center;
    width: 24px;
    height: 24px;
    border: unset;
    cursor: pointer;
}
.zoom-out-button:focus ,.zoom-in-button:focus {
    outline: unset;
}
.zoom-section {
    display: flex;
    gap: 16px;
}

.btn-info:hover {
    background-color: var(--surface-pink);
    border-color: var(--fill-white);
    color: var(--text-primary);
}
.button-icon.upload {
    background: url(../../images/upload.svg) no-repeat center;
}
.button-icon.addIcon {
    background: url(../../images/addIcon.svg) no-repeat center;
}

.button-icon.addIcon.black {
    background: url(../../images/add-Icon-black.svg) no-repeat center;
}

.download_oms .button-icon , .download_csv .button-icon {
    background: url(../../images/download.svg) no-repeat center;

}
.delete_selected .button-icon {
    background: url(../../images/delete.svg) no-repeat center;

}
.delete_selected .button-icon-archive {
    background: url(../../images/archive.svg) no-repeat center;
    width: 24px;
    height: 24px;
}
.delete_selected .button-icon-unarchive {
    background: url(../../images/unarchive.svg) no-repeat center;
    width: 24px;
    height: 24px;
}
.history-btn .history-icon{
    background: url('../../images/history.svg') no-repeat center;
    margin-right: .25rem;
    width: 24px;
    height: 24px;
}
.history-btn {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 16px;
}
  .page-header-title {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 44px;
}
.page-header-title h5 {
    font-size: 24px;
    font-weight: 500;
    font-family: "Futura PT", sans-serif;
    display: inline-flex;
    align-items: center;
    height: 48px;
    text-transform: uppercase;
}
.tablesorter  thead th {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    text-transform: uppercase;
}
.tablesorter  tbody td {
    font-size: 14px;
}
 .history-error-message {
    color: var(--text-pink);
} 
.confirm-delete-form .card {
    box-shadow: none;
    border: 1px solid var(--border-default);
    max-width: 39.375rem;
}
.confirm-delete-form .card-body {
    padding: 2.5rem;
}
.messagelist {
    color: var(--text-error);
    padding-left: 0;
    padding-top: 16px;
}
.messagelist a{
    color: inherit;
}
.confirm-delete-form .card-body form {
    padding-top: 40px;
}
.error-message {
    color: var(--text-pink);
} 
.actions .delete_selected {
    order: 1;
}
.button-icon {
    width: 24px;
    height: 24px;
}
.btn-toolbar .actions {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0;
    display: none;
    border-bottom: 1px solid var(--border-default);
}
.btn-toolbar .btn-group { 
    display: flex;
    border-bottom: 1px solid var(--border-default);
}
.actions .first-section , .actions .second-section {
    gap: 12px;
    align-items: center;
}
.btn-toolbar .action-counter {
    font-size: 14px;
    line-height: 20px;
}
.btn-toolbar .btn-group .add-button {
    margin-left: auto;
}

/* left nave styling*/
.b-brand .b-bg {
    background-image: url(../../images/logo.svg);
    height: 50px;
    width: 11.625rem;
    background-repeat: no-repeat;
    border-radius: 0;
    background-size: contain;

}
.b-brand {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}
.pcoded-navbar .mobile-menu {
    background: url(../../images/menu-icon.svg) no-repeat center;
    right: 32px;
    height: 20px;
    width: 20px;
    top: unset;
    transform: unset;
}
.pcoded-navbar.navbar-collapsed .mobile-menu {
    background: url(../../images/menu-collapsed-icon.svg) no-repeat center;
    right: 44px;

}
.pcoded-navbar.navbar-collapsed .b-brand {
    pointer-events: none;
}

.pcoded-micon.dashboard {
    background: url(../../images/dashboard.svg) no-repeat center;
}
.pcoded-micon.influencers {
    background: url(../../images/influencers.svg) no-repeat center;
}
.pcoded-micon.mau-influencers {
    background: url(../../images/influencers.svg) no-repeat center;
}
.pcoded-micon.acrchivedinfluencers {
    background: url(../../images/archivedInfluencers.svg) no-repeat center;
}
.pcoded-micon.influencers-bulk-import {
    background: url(../../images/import.svg) no-repeat center;
}
.pcoded-micon.add {
    background: url(../../images/add-icon.svg) no-repeat center;
}
.pcoded-micon.vip-influencers {
    background: url(../../images/vip.svg) no-repeat center;
}
.pcoded-micon.target {
    background: url(../../images/target.svg) no-repeat center;
}
.pcoded-navbar .management {
    background: url(../../images/settings.svg) no-repeat center;
}
.pcoded-navbar .users {
    background: url(../../images/users.svg) no-repeat center;
}
.pcoded-micon.logout {
    background: url(../../images/logout.svg) no-repeat center;
    
}
.pcoded-navbar.navbar-collapsed ~ .pcoded-header, .pcoded-navbar.navbar-collapsed ~ .pcoded-main-container,
.pcoded-navbar.mob-open ~ .pcoded-header, .pcoded-navbar.mob-open ~ .pcoded-main-container, .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header, .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-main-container {
    margin-left: 112px;
}
.pcoded-navbar {
    width: 18.25rem;
}
.pcoded-navbar.navbar-collapsed .header-logo .mobile-menu  {
    -webkit-transform: unset;
    transform: unset;
    opacity: 1;
}

.pcoded-navbar .header-logo,
.pcoded-navbar.navbar-collapsed .header-logo  {
    width: inherit;
    padding: 32px 32px 0px 32px;
    height: auto;
}
.pcoded-navbar.navbar-collapsed:hover .header-logo .mobile-menu {
    right: 44px;
}

.pcoded-navbar .pcoded-inner-navbar li > a {
    margin: 9px 0 9px 0;
}

.pcoded-navbar .pcoded-inner-navbar li > a ,
.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a {
    padding: 7px 12px;
}
.pcoded-navbar .pcoded-inner-navbar {
    padding: 0 32px;
}
.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu > a:after{
    right: 0;
}
.pcoded-navbar.navbar-collapsed:hover .pcoded-submenu,
.pcoded-navbar.navbar-collapsed .pcoded-submenu {
    display: none !important;
}

.pcoded-main-container {
    margin-left: 18.25rem ;
}
.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon {
    margin-right: 16px;
    width: 24px;
}
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
    padding-left: 52px;
    font-weight: 500;
}
.pcoded-navbar .pcoded-inner-navbar > li.active:after, .pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger:after {
    content: none;
}
.pcoded-navbar .pcoded-submenu {
    padding: 0;
}
.pcoded-navbar .pcoded-inner-navbar > li.active > a, .pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a , 
.pcoded-navbar .pcoded-submenu {
    background: var(--surface-pink);
    color: var(--text-primary);
  }
.pcoded-navbar .pcoded-inner-navbar li.active > a, .pcoded-navbar .pcoded-inner-navbar li:focus > a, .pcoded-navbar .pcoded-inner-navbar li:hover > a, .pcoded-navbar a {
    color: var(--text-primary);
    font-family: "Futura PT";
    font-weight: 400;
  }
  .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
    content: none;
}
.pcoded-navbar .pcoded-mtext {
text-transform: uppercase;
opacity: 1;
}
.pcoded-navbar,
.navbar-brand {
    background-color: var(--surface-pink);
    box-shadow: none;
}
.pcoded-navbar.navbar-collapsed {
    width: 7rem;    
}
.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a > .pcoded-mtext {
    -webkit-transform: none;
    transform: none;
    opacity: 0;
}
.pcoded-navbar.navbar-collapsed .pcoded-submenu {
    display: none;
}
.navbar-collapsed:hover .mobile-menu {
    -webkit-transition-delay: unset;
    transition-delay: unset;
}
.pcoded-navbar.mob-open ~ .pcoded-header:before, .pcoded-navbar.mob-open ~ .pcoded-main-container:before, .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header:before, .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-main-container:before {
    content: none;
}
.pcoded-navbar.navbar-collapsed:hover{
    width: 7rem !important;
}
.pcoded-navbar.navbar-collapsed:hover .header-logo { 
    width: 100%;
}
  .pcoded-navbar.navbar-collapsed .b-brand {
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

  }
  .pcoded-navbar .scroll-div.navbar-content  {
    padding-top: 28px;
  }
  .pcoded-navbar .pcoded-inner-navbar li.active .nav-link  {
    font-weight: 500;
  }
  .pcoded-navbar .pcoded-inner-navbar li {
    background-image: linear-gradient(120deg, var(--text-primary) 0, var(--text-primary) 100%);
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size .3s;
  }
  
  .pcoded-navbar .pcoded-inner-navbar li:hover,
  .pcoded-navbar .pcoded-inner-navbar li.active {
    background-size: 100% 1px;
  }
  /* end left nav styling */
.card .card-header h5 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-right: 8px;
}
.card .filter_card_header {
    flex-grow: 1;
}
.card .filter_card_header h5{
    padding-left: 25px;
}
.card .filter_card_header  h5:after {
    content: url(../../images/filter.svg);
    display: block;
    width: 24px;
    height: 24px;
    background-color: unset;
    left: 0;
    top:-2px
}
#changelist-filter-clear a {
    color: var(--text-pink);
    font-size: 14px;
    line-height: 20px;
    padding-left: 16px;
    white-space: nowrap;

}
.pcoded-content {
    padding: 0 56px 32px;
}
.pcoded-header {
    position: fixed;
    z-index: 2000;
    right: 56px;
    width: 48px !important;
    height: 32px;
    margin: 0;
    top: 32px;
    min-height: unset;
}
.pcoded-header .navbar-nav .dropdown {
    margin-top: 24px;
}
.pcoded-header::before {
    content: unset !important;
}
.logout-section .logout {
    background: url(../../images/logout.svg) no-repeat center;
    width: 24px;
    height: 24px;
    display: inline-block;
}
.pcoded-header .logout-section {
    width: fit-content;
    padding-top: 16px;
}
.sticky-head {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    background-color: var(--fill-white);
    position: sticky;
    padding-top: 32px;
    
}
.sticky-head.have-danger-message {
    padding-top: 0;
}
.pcoded-content .table-settings  .search-block {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-default);
}
.pcoded-header .logout-section a {
    color: var(--text-primary);
    height: 40px;
}
.pcoded-header .logout-section a:hover {
    color: var(--text-pink);

}
.pcoded-header .dropdown .profile-notification .pro-head  {
    background: unset;
    border-radius: 2px;
    border-bottom: 0.5px solid var(--border-default);
    padding: 0;
    padding-bottom: 16px;
}
.pcoded-header .dropdown .profile-notification {
    padding: 16px;
}
.pcoded-header .pro-head .user-name  {
    color: var(--text-primary);
    text-transform: capitalize;
    line-height: 20px;
}
.pcoded-header .dropdown.drp-user.show:before {
  color:var(--fill-white);

}

.pcoded-header .icon-settings{
    background: url(../../images/user.svg) no-repeat center;
    width: 24px;
    display: block;
    height: 24px;
}
.pcoded-header .icon-settings::before {
    content: unset;
}
.pcoded-header .dropdown .dropdown-toggle:after {
    content: url(../../images/chevron-down.svg);
    left: 24px;
    margin-left: 0;
}
#changelist-search .input-group {
    background: unset;
    height: 48px;
    border-radius: 2px;
    transition: width 600ms, opacity 600ms; 
    width: 52px;
    opacity: 1; 
    padding-left: 52px;
}
#changelist-search .input-group.input-group-active {
    border: 1px solid var(--border-default);
    width: 696px;
    opacity: 1; 
    transition-timing-function: ease-in; 
}
#changelist-search .input-group:not(.input-group-active) {
    width: 52px; 
    opacity: 0; 
    transition-timing-function: ease-out; 

}
#changelist-search .icon-search::before {
    content: url(../../images/search.svg);
    display: block;
    width: 24px;
    height: 24px;
}
#changelist-search .input-group .form-control {
    border: unset;
    font-size: 20px;
    line-height: 30px;
    font-family: "Futura PT", sans-serif;
    padding: 0;
    padding-right: 16px;
    display: none;
    color: var(--text-primary);
}
#changelist-search .input-group-text {
    padding-right: 12px;
    padding-left: 16px;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    background: unset;
    width: 52px;
    height: 48px;
    display: block;
    padding: 0;
}
#changelist-search .input-group-text .icon-search{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#changelist-search .input-group-active .form-control {
    display: block;
}
#changelist-search .input-group-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    font-family: "Futura PT";
    padding-right: 33px;
    display: inline-flex;
    align-items: center;
    height: 48px;
}

#changelist-search .form-group a {
    color: var(--text-pink);
}


  /*main table styling */
.page-wrapper.overflowed .scrollable-content-wrapper {
    margin-right: -3.5rem;
  }
  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
  }
  .scrollable-container {
    width: 100%;
    overflow-x: auto;
    position: relative;
    max-width: 100%;
    cursor: grab;
    padding-right: 20px;
  }

  .scrollable-container:active {
    cursor: grabbing; 
  }
.scrollable-table {
    border: 1px solid var(--border-default);
    margin-bottom: 0;
}
.table.firefoxStyle td , .table.firefoxStyle th {
    border-top: 2px solid var(--border-default);
}
.scrollable-table.firefoxStyle {
    border: 2px solid var(--border-default);
}
.table thead th {
    border-bottom: 1px solid var(--border-default);
    border-top: none;
    vertical-align: middle;
}
.table td,
.table th {
  border-top: 1px solid var(--border-default);
  white-space: nowrap;
  padding: 1rem 0.75rem;
  vertical-align: middle;
}
.table td.field-get_brands , .table td.field-get_category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.table-wrapper.card {
    box-shadow: none;
    overflow: unset;
}
.scrollable-container::-webkit-scrollbar {
    display: none;
  }

  #changelist-form .card-body .table#result_list,
  #changelist-form .card-body .table#result_list a {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    font-weight: 400;
  }
  #changelist-form .card-body .table#result_list > thead > tr > th > a,
  #changelist-form .card-body .table#result_list > thead > tr > th > span {
    font-size: 12px;
    line-height: 18px;
    color: var(--text-primary);
    font-weight: 600;
    padding: 5px 0;
  }
  #changelist-form .card-body .table#result_list > thead > tr > th.influencers {
    font-size: 12px;
    line-height: 18px;
    color: var(--text-secondary);
    font-weight: 400;
    padding-left: 0;
  }
  #changelist-form .card-body .table#result_list .form-check {
    padding-left: .75rem;
  } 
  #changelist-form .card-body .table#result_list > tbody > tr > th > a > img {
    height: 44px;
    width: 44px;
    border-radius: 50%;
  }

  #changelist-form .card-body .table#result_list > tbody > tr > td.field-display_instagram_username > a ,
  #changelist-form .card-body .table#result_list > tbody > tr > td.field-display_instagram_followers {
    color: var(--text-pink);
  }
  #changelist-form .card-body .table#result_list > tbody > tr >td.field-display_tiktok_username > a,
  #changelist-form .card-body .table#result_list > tbody > tr >td.field-display_tiktok_followers {
    color: var(--tiktok-color);
  }
  #changelist-form .card-body .table#result_list > tbody > tr >td.field-display_snapchat_username > a,
  #changelist-form .card-body .table#result_list > tbody > tr >td.field-snapchat_followers {
    color: var(--snapchat-color);
  }
  #changelist-form .card-body .table#result_list > tbody > tr >td.field-display_youtube_username > a,
  #changelist-form .card-body .table#result_list > tbody > tr >td.field-display_youtube_subscribers {
    color: var(--youtube-color);
  }
  /*end main table styling*/
  .change-password-section .change-password-title {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 44px;
}
.change-password-section .change-password-title h4{
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    font-family: "Futura PT";
}
.change-password-section .form-row {
    justify-content: space-between;
    width: 100%;
}
.change-password-section .help {
    width: 500px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 18px;
    padding-left: 16px;
}
.change-password-section #user_form {
    padding: 40px;
    border: 1px solid var(--border-default);
    max-width: 39.375rem;

}

.change-password-section .help ul {
    margin-bottom: 0;
    
}
.change-password-section .form-row  label {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    padding-top: 0;
    font-family: "Inter", sans-serif;
}
.change-password-section .form-row  input {
    font-size: 16px;

}
.change-password-section .form-row  .form-group {
    width: 100%;

}
.change-password-section .help li {
    padding-bottom: 4px;
}
.change-password-section .submit-row {
    text-align: left;
    padding: 40px 0;
    margin-bottom: 0;
}
.change-password-section .submit-row input{
    height: 48px;
    width: 100%;
}
.change-password-section .form-row .errorlist {
    margin: 0;
    padding-top: 4px;
    color: var(--text-pink);
}
.change-password-section .errornote {
    display: block;
    padding-bottom: 16px;
    color: var(--text-pink);
}
.change-password-section .block-message {
    display: block;
}
.change-password-section .block-message strong {
    text-transform: capitalize;
}

/*add-edit influencer styling */

 .card:not(.submit_btn){
    box-shadow: none;
    border: 1px solid var(--border-default);
    max-width: 39.375rem;
}
.related-widget-wrapper-link {
    display: none;
}
.influencers hr {
    display: none;
}
.page-title {
    font-size: 24px;
    font-family: "Futura PT", sans-serif;
    margin-bottom: 2.75rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border-default);
    text-transform: uppercase;
    width: 100%;
    padding-bottom: 1.75rem;

}
#influencer_form .title ,
.module.aligned .title{
    font-size: 24px;
    font-family: "Futura PT", sans-serif;
    font-weight: 400;
    color: var(--text-pink);
    line-height: 32px;
    margin-bottom: 1rem;
}
#influencer_form [class*="field"] {
    margin-bottom: 1rem !important;
}
.card-block:not(.submit_btn .card-block), .card-body:not(.submit_btn .card-body){
    padding: 2.5rem;
}
.module.aligned label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    position: relative;
}
.model-view-container {
    border: 1px solid var(--border-default);
    padding: 2.5rem;
    font-family: 'Futura PT', sans-serif;
}
.model-view-container .model-photo img {
    width: 80px;
    height: 80px;
    margin-bottom: .25rem;
}
.model-view-container .influencer-view-name {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: .5rem;
    text-transform: capitalize;
}
.model-view-container .archived-view {
    font-weight: 400;
    margin-bottom: .5rem;
}
.model-view-container .history-wrapper a {
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-weight: 500;

}
.model-view-container .history-wrapper .history-icon{
    background: url('../../images/history.svg') no-repeat center;
    margin-right: .25rem;
    width: 24px;
    height: 24px;
}
.model-view-container .history-wrapper .history-btn a {
    width: 100%;
}
#id_instagram {
    background: url(../../images/instagram.svg) no-repeat;
    background-position: right 16px center;
}
#id_tiktok {
    background: url(../../images/tiktok.svg) no-repeat;
    background-position: right 16px center;
}
#id_youtube  {
    background: url(../../images/youtube.svg) no-repeat;
    background-position: right 16px center;
}
#id_snapchat  {
    background: url(../../images/snapchat.svg) no-repeat;
    background-position: right 16px center;
}
#id_linkedin  {
    background: url(../../images/linkedin.svg) no-repeat;
    background-position: right 16px center;
}
.card.submit_btn {
    background-color: transparent;
    box-shadow: none;
    direction: unset;
}
.page-wrapper .card.submit_btn .card-body {
    padding: 0;
}
.module.aligned .related-widget-wrapper {
    width: 100%;
    float: unset;
}
select#id_brand,
select#id_category,
select#id_tag,
select#id_archive_reason {
    background-image: none;
    padding-right: 16px !important;
    overflow: auto;
}
select#id_brand option,
select#id_category option,
select#id_tag option,
select#id_archive_reason option {
   padding: .5rem;
   margin-bottom: 0.75rem;
}
select#id_archive_reason {
    text-transform: capitalize;
}
.filterDropDown.archive.reason {
    text-transform: capitalize;
}
.nav-item a {
     text-transform: capitalize;
}
.custom-multi-select {
    width: 100%;
    border: 1px solid #ccc;
    padding: 8px;
    background: white;
    min-height: 50px;
    overflow-y: auto;
    max-height: 150px; /* Adjust height as needed */
}

.custom-multi-select .options-container {
    width: 100%;
    max-height: 200px; /* Adjust as needed */
}

.custom-multi-select .option {
    cursor: pointer;
    display: flex;
    align-items: center;
    background: white;
    padding: .5rem;
    margin-bottom: 0.75rem;
}

.custom-multi-select .option:hover,
.custom-multi-select .option.selected {
    background: #ddd;
}

.custom-multi-select .option-color {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 8px;
}
.field-zipcode_postcode {
    max-width: 11.625rem;
}
.field-mobile_number div {
    display: flex;
    flex-wrap: wrap;
}
.field-mobile_number label{
    flex-basis: 100%;
}
.field-mobile_number #id_mobile_number_0:focus {
    border: 2px solid var(--border-focused);
}
.field-mobile_number #id_mobile_number_0 {
     border-right: none;
     flex: 1;
}
.field-mobile_number #id_mobile_number_1 {
    border-left: none;
    flex: 1;
}
#changelist-form .card {
    max-width: 100%;
    margin-bottom: .375rem;
}
/*end add influencer styling*/
.config-page  table.config-table thead th {
    padding: 1rem 0.75rem;
}
.config-page table.config-table thead th div {
    font-size: 12px;
    padding: 5px 0;
    text-transform: uppercase;
    display: inline;
}
.config-page .submit_btn {
    padding: 40px 0;
}
.config-page {
    padding-top: 40px;
}
.config-page table.config-table .long-text {
    max-width: 360px;
    white-space: pre-wrap;
}
.input-group-title.config-title {
    text-transform: uppercase;
}
.config-page table.config-table .is-modified span {
    text-align: center;
    display: block;
}
.config-page table.config-table .is-modified span img {
    width: 24px;
}
.config-page #changelist-form  table.config-table td a.reset-link:hover {
    color: var(--text-pink) !important;
}
.module.aligned .selector {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.module.aligned .selector select {
    width: 100%;
    background-image: none;
    padding-top: .5rem;
    padding-right: 0.625rem !important;
    height: 17rem;
}
.module.aligned .selector .selector-available h2 {
    background-color: var(--text-pink);
    font-size: 1rem;
}
.module.aligned .selector .selector-chosen h2 {
    background-color: var(--fill-black);
    font-size: 1rem;
}
.module.aligned .selector .selector-chosen select {
    height: 20.375rem;
}
.module.aligned .selector .selector-chosen .help-icon,
.module.aligned .selector .selector-available .help-icon {
    margin: 0 !important;
}
.module.aligned .selector select option {
    white-space: normal;
    padding-bottom: .5rem;
}
.module.aligned .selector-available, .module.aligned .selector-chosen {
    min-width: 13.75rem;
}
.module.aligned .selector .selector-available input {
    width: calc(100% - 35px);
}
.module.aligned .selector-chooseall,
.selector-clearall {
    color: var(--text-primary);
}
.module.aligned [class*="field"] > div > label[for]:not(.required):after , .module.aligned .birthDateTitle::after, .special_events.module.aligned .title:not([class*='event_'])::after {
    content: "Optional";
    position: absolute;
    right: 0;
    font-size: 12px;
    color: var(--text-tertiary);
}

.special_events.module.aligned .title:not([class*='event_'])::after {
    right: 25px;
}
.module.aligned .birthDateTitle::after,
.special_events.module.aligned .title:not([class*='event_'])::after {
    font-weight: 500;
    padding-right: 15px;
}
#influencer_form .module.aligned .field-instagram > div > label[for="id_instagram"]:not(.required):after,
#influencer_form .module.aligned .field-tiktok > div > label[for="id_tiktok"]:not(.required):after {
    content: unset;
}
.module.aligned .field-birth_month > div > label[for="id_birth_month"]:not(.required):after ,  .module.aligned .field-birth_year > div > label[for="id_birth_year"]:not(.required):after ,
 .module.aligned .field-state_county > div > label[for="id_state_county"]:not(.required):after,
 .module.aligned.special_events [class*="field"] > div > label[for]:not(.required):after {
    content: unset;
}
#influencer_form > div:nth-child(3) > fieldset.module.aligned.special_events > div:nth-child(2) > div > div{
    display: flex;
}
.field-event_1, .field-event_date_1,
.field-event_2, .field-event_date_2,
.field-event_3, .field-event_date_3 {
    flex: 1;
}

.field-event_1 select, .field-event_1 input,
.field-event_date_1 input,
.field-event_2 select, .field-event_2 input,
.field-event_date_2 input,
.field-event_3 select, .field-event_3 input,
.field-event_date_3 input {
    width: 100%;
    max-height: 50.2px;
}

/*custom select */

  .custom-dropdown .option-color {
    border-radius: 50%;
  }
  .custom-dropdown .selected-option .placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
    text-transform: capitalize;
  }
  .field-mobile_number .select-box.countries {
    border-right: none;
  }
.field-mobile_number .select-box.countries .dropdown-options {
    overflow: unset;
    max-height: unset;
}
.field-mobile_number .select-box.countries .dropdown-options #countryFilter {
    background-image: url(../../images/search.svg);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 17px center;
    padding-left: 36px;
    height: 40px;
}
  .field-mobile_number .select-box.countries .dropdown-options .select-options-wrapper {
    max-height: 230px;
    overflow-y: auto;
  }
  .field-mobile_number .select-box.countries .dropdown-options .select-options-wrapper .option {
    width: 100%;
  }

.custom-dropdown .selected-option .option {
    padding: 0;
}
.sticky-section {
    top: 101px;
    left: 0;
    right: 0;
    z-index: 1020;
    background-color: var(--fill-white);
    position: sticky;
}
.page-wrapper.overflowed .sticky-section , .page-wrapper.overflowed .sticky-head {
    margin-right: -3.5rem;
}
.page-wrapper.overflowed  .sticky-section  .btn-toolbar, .page-wrapper.overflowed .sticky-section .filter_card , .page-wrapper.overflowed .sticky-head  .search-block , .page-wrapper.overflowed .sticky-head .general-danger-message , .page-wrapper.overflowed  .sticky-section .resultwrapper {
    margin-right: 3.5rem;
}
.page-wrapper.overflowed .sticky-head .general-danger-message {
    width: auto;
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
  color:  var(--fill-white);
  background-color: var(--button-danger);
  border-color:  var(--button-danger);
}
/*end custom select*/

/*multiselect with search */
.search-icon{
    background-image: url(../../images/search.svg);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 17px center;
    padding-left: 2.5rem !important;
    height: 40px;
}

/*end multiselect with search */
/*Countries select*/
#market-countries{
    padding: 0 !important;
    
}
#market-countries option{
    padding: 0.5rem 1rem;
}
/*End countries select*/
/*countries tags*/
#countries-tags{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.custom-multi-select {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 420px;
  border: 1px solid #ddd;
  background: #fff;
  box-sizing: border-box;
}

.custom-multi-select .options-container {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  padding: 8px;
  box-sizing: border-box;
}

.selected-shade-tags {
  flex: 0 0 auto;
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  padding: 8px;
  border-top: 1px solid #eee;
  background: #fafafa;
  box-sizing: border-box;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.selected-shade-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 36px 4px 12px;
  background: var(--surface-gray-elevated);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  background-image: url(../../images/close.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: right 8px center;
}

.selected-shade-tag .remove-tag {
  margin-left: 8px;
  color: #900;
  font-weight: bold;
  background: transparent;
  border: none;
  cursor: pointer;
}

.no-arrow {
    appearance: none !important; 
    -webkit-appearance: none;
    -moz-appearance: none; 
    background-size: 0;
}
.no-arrow::-ms-expand {
    display: none;
}

.country-tag{
    background-color:var(--surface-gray-elevated);
    border-radius: 99px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 36px 4px 12px;
    gap: 1rem;
    font-size: 14px;
    cursor: pointer;
    background-image: url(../../images/close.svg);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right 8px center;
}
.country-tag:hover{
    background-color: var(--button-secondary-hovered);
}
/*end countries tags*/
.field-month.field-year{
    display: flex;
    margin-bottom: 1rem !important;
    align-items: end;
    gap: 1rem;
}
.field-month,.field-year{
    flex: 1;
    margin: 0 !important;
}

.resultwrapper , .no-result-message {
    border-top: 1px solid var(--border-default);
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 14px;
    line-height: 20px;
}
.general-danger-message {
    background: rgba(211, 48, 135, 0.08);
    border: unset;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-error);
    padding: 8px;
    margin-bottom: 32px;
    width: 100%;
}
#changelist-form .card-body .zoom-table {
    transform-origin: 0 0; 
    -moz-transform-origin: 0 0;
}
.field-birth_year.field-birth_month.field-birth_day {
    display: flex;
    gap:10px;
}
.field-birth_year.field-birth_month.field-birth_day select {
    min-width: unset;
}
.field-birth_year.field-birth_month.field-birth_day .fieldBox {
    margin-right: 0;
}
.resultwrapper {
    display: flex;
    gap: 24px;
}
.pagination .page-item .page-link {
    color: var(--text-pink) ;
}
.pagination .page-item.active .page-link {
    background-color: var(--pagination-active ) ;
    border-color: var(--pagination-active );
    color: var(--fill-white);
}

.special_events .remove-icon {
    background: url(../../images/delete-black.svg) no-repeat;
    width: 24px;
    height: 24px;
}

.special_events select {
    text-overflow: ellipsis;
    white-space: nowrap;
}

#influencer_form .special_events .fieldBox {
    margin-bottom: 0 !important;
    margin-right: 8px;
}

#influencer_form .special_events .fieldBox :last-child{
    margin-right: 0;
}


.special_events .fieldBox.errors {
    flex: 0;
}

.special_events .add-special-event {
    margin-bottom: 32px;
}

.special_events button.remove-event {
    min-width: unset;
    width: auto;
    margin: 0;
}

.special_events [class*="field-event_"]:not(.fieldBox) {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
}

#influencer_form .special_events .title[class*="event_"] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 20px;
}

.field-quarter.field-year{
    display: flex;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem !important;
}
.field-quarter,.field-year{
    flex: 1;
    margin: 0 !important;
}
.field-show_in_dashboard .form-check{
    padding: 0;
}

.field-show_in_dashboard .form-check-label{
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    gap: 0.5rem;
    align-items: center;
}
.field-archive_reason {
    margin-top: 20px;
}

:root {
    --border-default: #D6D6D6;
    --fill-white: #FFF;
    --fill-black: #000;
    --border-hovered: #A5A5A5;
    --border-focused: #D33087;
    --text-primary: #1C1C1C;
    --text-secondary: #444;
    --text-tertiary: #767676;
    --text-pink: #D33087;
    --button-primary-default: #000;
    --button-primary-hovered: #D33087;
    --surface-pink:  #F6F4F4;
    --tiktok-color: #3098D3;
    --snapchat-color: #BA8909;
    --youtube-color: #D33030;
    --surface-gray-elevated : #EDEDED;
    --button-secondary-default: #fff;
    --button-secondary-hovered: #F6F4F4;
    --button-danger: #D33087;
    --text-error : #D33087;
    --button-danger-hovered : #EA439C;
    --pagination-active : #EA439C;


}