@media (min-width: 576px) and (max-width: 767.98px) {
  .public_url_mt {
    /* top: 44px; */
    left: 4.2%;
  }
}
@media (max-width: 575.98px) {
  .public_url_mt {
    /* top: 44px; */
    left: 2.9%;
  }
}

@media (min-width: 768px) {
  html {
    height: initial;
  }

  .gradient {
    /* border: 1px solid red; */
    margin-left: -20%;
  }
  .site-wrap {
    position: relative;
    min-height: initial;
    /* min-height: calc(100vh - 80px); */
  }

  .v-opportunities {
    margin: 10px 0 10px 0 !important;
  }

  .v-btn {
    padding: 8px 30px;
  }

  .v-log-time {
    margin-bottom: 20px;
  }

  .search-icon {
    display: none;
  }

  .nav-switcher-link.Volunteer-link {
    display: none;
  }

  .close-nav {
    padding: 22px 16px 0 23px;
  }

  .main-nav-holder {
    width: 179px;
  }

  .close-nav label img {
    width: 17px;
  }

  .main-nav {
    top: 60px;
  }

  .profile-info {
    display: block;
    float: right;
    background-image: url(../images/down-arrow-dark.svg);
    background-repeat: no-repeat;
    background-position: right center;
    /* padding: 5px 26px 0 0; */
  }

  .main-heading {
    display: inline-block;
    vertical-align: top;
    color: #80767d;
    font-size: 27px;
    line-height: 30px;
    margin: 1px 0 0 20px;
  }

  .main-heading span {
    color: #39747e;
    position: relative;
    padding-left: 18px;
  }

  .main-heading span:after {
    content: "/";
    position: absolute;
    left: -3px;
    top: 4px;
    color: #ddd;
  }

  .home .profile-info {
    display: block;
    float: right;
    background-image: url(../images/down-arrow-white.svg);
    background-repeat: no-repeat;
    background-position: right center;
    padding: 0 26px 0 0;
  }

  .home .hamburger-menu {
    background-image: url(../images/hamburger-menu.svg);
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    height: 24px;
    width: 24px;
    padding: 0;
    margin: 0;
  }

  .home .header-wrap {
    border: none;
  }

  .home .header-wrap nav {
    background-color: #ffffff;
    display: flex;
    padding: 16px 18px 16px 16px;
  }

  .header-wrap nav {
    background-color: #ffffff;
    display: block;
    align-items: center;
    padding: 8px 23px 8px 23px;
  }

  .hamburger-menu {
    background-image: url(../images/icon-desktop.svg);
    margin: 9px 0 0 0;
    cursor: pointer;
    display: inline-block;
    height: 15px;
    width: 16px;
  }

  /* .header-wrap {
    border-bottom: 1px solid #eceaeb;
  } */

  .search-container {
    float: left;
    display: block;
    width: 215px;
  }

  .site-top-wrap {
    padding: 0px 24px;
    height: 56px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .search-container input {
    border: 1px solid #b3adb1;
    border-radius: 4px;
    padding: 13px 23px 14px 47px;
    min-width: 292px;
    width: auto;
    font-size: 15px;
    background-image: url(../images/icon-search-desktop.svg);
    background-repeat: no-repeat;
    background-position: 17px center;
    float: left;
  }

  .search-container input {
    margin-left: 0;
  }

  .search-container {
    position: relative;
  }

  .search-container .filter-wrap {
    top: 48px;
    left: 0;
    width: 292px;
    position: absolute;
    z-index: 12;
    background-color: #fff;
  }

  .search-container input.search-active {
    border: 1px solid #39747e;
  }

  .search-container input:focus {
    outline: none;
  }

  .search-container input::-webkit-placeholder {
    color: #b3adb1;
  }

  .search-container .filter-wrap {
    top: 48px;
    left: 0;
    width: 292px;
    position: absolute;
    z-index: 12;
    background-color: #fff;
  }

  .search-container input.search-active {
    border: 1px solid #39747e;
  }

  .search-container input:focus {
    outline: none;
  }

  .search-container input::-webkit-placeholder {
    color: #b3adb1;
  }

  .search-container input::-moz-placeholder {
    color: #b3adb1;
  }

  .search-container input:-ms-input-placeholder {
    color: #b3adb1;
  }

  .search-container input:-moz-placeholder {
    color: #b3adb1;
  }

  .selected-value {
    border-bottom: 1px solid #eceaeb;
  }

  .saved-filter span {
    padding: 12px 0 6px 15px;
    display: block;
    font-size: 13px;
    color: #80767d;
  }

  .saved-filter ul {
    margin: 0;
  }

  .sf-btn {
    display: block;
    padding: 13px 0 25px 18px;
    color: #39747e !important;
    font-size: 18px;
  }

  .selected-value span {
    font-family: "Circular-Pro-Bold";
  }

  .si-filter {
    margin: 0px 0 0 20px;
    position: relative;
  }

  .si-filter span::after {
    top: 1px;
  }

  .si-btn-primary {
    display: inline-block;
    padding: 10px 40px 11px;
    position: relative;
  }

  .swticher-icon {
    display: inline-block;
    margin: 3px 28px 0 0;
    vertical-align: top;
  }

  .swticher-icon ul {
    margin: 0;
  }

  .swticher-icon li {
    display: inline-block;
    vertical-align: top;
    background-color: #80767d;
    margin: 0 -2px;
    padding: 4px 3px;
  }

  .swticher-icon li img {
    filter: brightness(0) invert(1);
  }

  .swticher-icon li.inactive {
    background-color: #f3f2f3;
  }

  .swticher-icon li.inactive img {
    filter: brightness(100%) invert(0);
  }

  .volunteers-list-wrap.mobile {
    display: none;
  }

  #vl-table {
    display: table;
    width: 100%;
    color: #60545c;
  }
  #vl-table-form {
    display: table;
    width: 100%;
    color: #60545c;
  }

  #vl-table tr.active {
    background-color: #f7f7f7;
  }
  #vl-table-form tr.active {
    background-color: #f7f7f7;
  }

  /* #vl-table tr:hover {
    background-color: #f0f7f9;
  } */
  #vl-table tr a:hover {
    color: #60545c;
  }
  #vl-table-form tr a:hover {
    color: #60545c;
  }
  .volunteers-list-wrap .container-fluid {
    padding: 0;

    /* height: 100vh; */
  }

  #vl-table .sorting {
    background-image: url(../images/icon-sort.svg);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    float: right;
  }

  #vl-table-form .sorting {
    /* background-image: url(../images/icon-sort.svg); */
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    float: right;
  }
  #vl-table .control {
    margin: 0;
  }
  #vl-table-form .control {
    margin: 0;
  }

  #vl-table .control__indicator {
    width: 17px;
    height: 17px;
  }
  #vl-table-form .control__indicator {
    width: 17px;
    height: 17px;
  }

  #vl-table .control--checkbox .control__indicator::after {
    top: 2px;
    left: 2px;
  }
  #vl-table-form .control--checkbox .control__indicator::after {
    top: 2px;
    left: 2px;
  }

  .vl-count {
    padding: 0 16px 0 22px;
    background-image: url(../images/icon-arrow-down-blck.svg);
    background-repeat: no-repeat;
    background-position: right center;
    margin: 0 8px 0 0;
  }

  #vl-table.table-bordered thead td,
  #vl-table.table-bordered thead th {
    border-bottom: 1px solid #eceaeb;
    font-size: 15px;
    color: #a0989d;
    font-weight: 450;
    padding: 13px 11px 13px 10px;
    background-color: #f0edeb !important;
    /* padding: 17px 11px 17px 10px; */
    /* padding: 9px; */
  }

  #vl-table-form.table-bordered thead td,
  #vl-table-form.table-bordered thead th {
    border-bottom: 1px solid #eceaeb;
    font-size: 15px;
    color: #a0989d;
    font-weight: 450;
    padding: 13px 11px 13px 10px;
    background-color: #f0edeb !important;
    /* padding: 17px 11px 17px 10px; */
    /* padding: 9px; */
  }
  #vl-table.table-bordered-event thead td,
  #vl-table.table-bordered-event thead th {
    border-bottom: 1px solid #eceaeb;
    border-top: 1.5px solid #eceaeb;
    font-size: 15px;
    color: #a0989d;
    font-weight: 450;
    padding: 13px 11px 13px 10px;
    background-color: #f0edeb !important;
    /* padding: 17px 11px 17px 10px; */
    /* padding: 9px; */
  }
  #vl-table-form.table-bordered-event thead td,
  #vl-table-form.table-bordered-event thead th {
    border-bottom: 1px solid #eceaeb;
    border-top: 1.5px solid #eceaeb;
    font-size: 15px;
    color: #a0989d;
    font-weight: 450;
    padding: 13px 11px 13px 10px;
    background-color: #f0edeb !important;
    /* padding: 17px 11px 17px 10px; */
    /* padding: 9px; */
  }

  #vl-table thead {
    background-color: #f0edeb;
  }
  #vl-table-form thead {
    background-color: #f0edeb;
  }

  .volunteers-name {
    font-size: 15px;
    line-height: 21px;
    margin: 0;
    /* color: #60545c; */
    text-align: center;
    font-weight: 450;
    font-family: "Circular-Pro-Book";
    margin-left: 16px;
  }

  .volunteers-avatar {
    margin-left: 25px;
    margin-top: -6px;
  }

  #vl-table.table td,
  #vl-table.table th {
    padding: 11px 10px 10px;
    vertical-align: middle;
    font-size: 15px;
    font-family: "Circular-Pro-Book";
    font-weight: 450;
    line-height: 21px;
    white-space: normal;
  }
  #vl-table-form.table td,
  #vl-table-form.table th {
    padding: 11px 10px 10px;
    vertical-align: middle;
    font-size: 15px;
    font-family: "Circular-Pro-Book";
    font-weight: 450;
    line-height: 21px;
  }
  .menu-overlay {
    display: none;
  }

  .header-wrap.intro {
    margin-left: 179px;
  }

  .site-container.intro {
    margin-left: 179px;
  }

  .header-wrap.intro .hamburger-menu {
    display: none;
  }

  .header-wrap.intro .main-heading {
    margin: 1px 0 0 0;
  }

  .chat-box {
    position: fixed;
    right: 23px;
    bottom: 0;
    /* display: block; */
    display: none;
  }

  .selected-tab .gray-bar {
    margin: 0;
    padding: 17px 10px 17px;
  }

  .selected-tab .gray-bar .col-2 {
    padding: 0;
  }

  .selected-tab .gray-bar .control--checkbox .control__indicator::after {
    top: 3px;
    left: 5px;
  }

  .select-count-filter li {
    line-height: 17px;
    font-size: 15px;
    padding: 11px 16px;
  }

  .select-count-filter {
    top: 45px;
    width: 203px;
    left: 10px;
    display: none;
  }

  /* .selected-tab .gray-bar .select-count-filter li{
  line-height: 17px;
  font-size: 15px;
  padding: 11px 16px;
}
.selected-tab .gray-bar .select-count-filter{
  top: 31px;
  width: 203px;
  left: 0;
  display:none;
} */
  .selected-tab .control {
    display: inline-block;
    vertical-align: top;
  }

  .selected-tab .si-count.arrow {
    padding: 0px 20px 0 25px;
    line-height: 20px;
  }

  .selected-tab .gray-bar .control__indicator {
    width: 16px;
    height: 16px;
  }

  .selected-tab {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;
    display: block;
  }

  .selected-icon li {
    display: inline-block;
    vertical-align: top;
    margin: 0 13px;
  }

  .selected-icon li span {
    margin: 0 0 0 10px;
  }

  .selected-icon li a {
    font-size: 18px;
    line-height: 21px;
    color: #60545c;
  }

  .selected-icon {
    margin: 0;
  }

  .site-container.stuck {
    position: fixed;
    width: 100%;
    margin-top: 64px;
  }

  .header-wrap.stuck {
    position: fixed;
    width: 100% !important;
  }

  .volunteers-container {
    display: none;
  }

  .volunteers-container.stuck {
    position: absolute;
    right: 0;
    width: 480px;
    top: 0;
    background: #fff;
    display: block;
    /* width: 50%; */
  }

  .volunteers-container.stuck .vp-left {
    margin-left: -55px;
    top: 171px;
    height: auto;
  }

  .volunteers-container.stuck .vp-right {
    margin-left: 0;
    max-width: 100%;
    flex: initial;
  }

  .volunteers-profile .vp-link {
    position: fixed;
    right: 10px;
    top: 6px;
    margin: 0;
  }

  .vp-right h2 {
    font-size: 18px;
    line-height: 37px;
    /* margin-bottom: 16px; */
    padding-left: 24px;
  }

  .untag-result-list h3 {
    font-size: 18px;
    padding-bottom: 5px;
    position: relative;
    padding-top: 5px;
  }
  .untag-result-list2 h3 {
    font-size: 18px;
    padding-bottom: 5px;
    position: relative;
    padding-top: 5px;
    color: #004e5b;
    font-family: "Circular-Pro-Book";
    font-weight: 450;
  }

  .untag-result-list h3 span {
    background-image: url(../images/icon-plus.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    top: 8px;
  }

  .untag-result-list li span {
    background-image: url(../images/profile-close.svg);
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    top: 13px;
    right: 20px;
    display: block;
    position: absolute;
  }

  .icon {
    background-image: url(../images/close-profile.svg) !important;
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    top: 13px;
    right: 20px;
    display: block;
    position: absolute;
  }

  .volunteers-profile .profile-pic {
    order: 2;
    padding: 0px;
    margin: 8px 1px 3px 0;
    height: 108px;
    width: 108px;
  }

  .volunteers-profile .profile-details {
    order: 2;
  }

  .profile-details h5 {
    font-size: 27px;
    line-height: 35px !important;
    margin-bottom: 0px;
    font-family: "Circular-Pro-Book";
  }

  .profile-details h6 {
    /* margin: 10px 0 10px 0; */
    margin-top: 16px;
  }

  .profile-details a {
    color: #60545c;
    font-size: 15px;
    line-height: 28px;
  }

  .profile-details a img {
    width: 20px;
  }

  .profile-pic {
    padding: 5px 15px 5px 0;
  }

  .vp-right .untag-result-list li {
    font-size: 15px;
    position: relative;
    //background-image: url(../images/icon-tag.svg);
    background-position: 14px center;
    padding: 10px 43px 11px 37px;
    width: auto;
    margin-right: 9px;
    margin-bottom: 15px;
    color: #297f8e;
  }

  .vp-right .untag-result-list {
    padding: 0 0px 0px 24px;
    margin-bottom: 23px;
  }

  .vpi-top h2 {
    font-size: 18px;
    line-height: 19px;
    margin: 2px 0 10px 0;
  }

  .vpim-one {
    width: 31%;
    position: relative;
  }

  .vpi-middle .vpim-one h3 span {
    font-size: 15px;
    font-family: "Circular-Pro-Book";
    color: #60545c;
    text-transform: none;
    font-weight: 400;
  }

  .vpim-one img {
    margin-left: 8px;
  }

  .vpi-middle {
    padding: 0 24px;
    margin-bottom: 26px;
    gap: 20px;
  }

  .vpi-top a {
    padding: 5px 25px;
    right: 0;
  }

  .vpi-middle h3 {
    margin: 0 0 8px 0;
  }

  .vpi-bottom {
    margin-bottom: 27px;
  }

  /* 
  .vpi-bottom h3 {
    margin: 0 0 7px 0;
  } */

  .vp-availability {
    padding: 0 0 0 24px;
  }

  .vp-availability h2 {
    font-size: 21px;
    margin: 0 0 20px 0;
    position: relative;
    padding: 0;
    color: #60545c;
    font-family: "Circular-Pro-Book";
    font-weight: 450;
  }

  .vpi-bottom-wrap {
    padding: 0 24px 0;
  }

  .vp-availability h2 span {
    background-image: url(../images/icon-plus.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    top: 8px;
  }

  .edit-available {
    margin-right: 15px;
    /* margin-left: 25px; */
    opacity: 0;
  }

  .delete-available {
    opacity: 0;
  }

  .vp-availability .row:hover .edit-available,
  .vp-availability .row:hover .delete-available {
    color: #39747e;
    opacity: 1;
  }

  .vp-time-off {
    padding: 0 0 0 24px;
  }

  .vp-time-off h2 {
    position: relative;
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 18px;
  }

  .vp-time-off .edit-profile h2 {
    border-bottom: 1px solid #eceaeb;
    padding-bottom: 18px;
    margin: 0 0 10px 0;
    font-size: 21px;
    line-height: 25px;
    position: relative;
    padding-left: 0;
    color: #60545c;
    /* margin-bottom:20px; */
  }

  .vp-time-off h2 span {
    background-image: url(../images/icon-plus.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    top: 8px;
    cursor: pointer;
  }

  .vp-time-off h3 {
    font-size: 15px;
    display: inline-block;
    vertical-align: top;
    /* width: 49%; */
    padding-right: 15px;
  }

  .vp-time-off h4 {
    font-size: 15px;
    line-height: 26px;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    /* width: 49%; */
  }

  .vp-time-off .row:hover h3,
  .vp-time-off .row:hover h4 {
    color: #527865;
  }

  .vp-time-off .row:hover .edit-available,
  .vp-time-off .row:hover .delete-available {
    opacity: 1;
  }

  .vp-information.none {
    display: none;
  }

  .vp-left li {
    padding: 0;
    margin: 0;
  }

  .volunteers-profile {
    padding: 11px 20px 11px 17px;
  }

  .profile-pic img {
    max-width: 108px;
    border-radius: 50%;
  }

  .vp-left .nav-tabs .nav-item.show .nav-link,
  .vp-left .nav-tabs .nav-link.active {
    color: #495057;
    border: none;
    /* border-radius: 4px 4px 0 0; */
  }

  .vp-left .nav-tabs .nav-link {
    padding: 12px 14px;
    /* padding: 16px; */
    border: none;
    border-radius: 0;
  }

  .vp-left .nav-tabs {
    border: none;
  }

  /* .vp-left li:first-child {
    border-radius: 5px 5px 0 0;
  } */
  .vp-right .card {
    border: none;
    border-radius: 0;
  }

  .vp-right .card-body {
    padding: 10px 0;
    width: 345px;
  }

  .vp-availability .row {
    margin-bottom: 22px;
  }

  .vp-availability .col-6 span {
    margin: 0;
  }

  .icon-right {
    text-align: right;
  }
  .vpim-one ul {
    display: none;
    background: #ffffff;
    border: 1px solid #eceaeb;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 16px 20px 0 20px;
    position: absolute;
    top: 20px;
    left: -11px;
  }

  .vpim-one ul li {
    font-size: 15px;
    line-height: 21px;
    color: #60545c;
    cursor: pointer;
    margin-bottom: 16px;
  }

  .vpim-one ul li:hover {
    color: #39747e;
  }

  .date.add-form-control .form-text {
    background-image: url(../images/icon-calendar.svg);
    background-repeat: no-repeat;
    background-position: 16px center;
    padding: 16px 16px 16px 46px;
  }

  .vp-time-off .form-text {
    font-size: 15px;
    line-height: 21px;
  }

  .time-off-edit {
    padding: 16px;
    border: 1px solid #eceaeb;
  }

  .avi-time-wrap .add-form-control {
    margin: 0;
  }

  .avi-time-wrap .sel {
    background-position: 16px center;
    padding: 16px 16px 16px 55px;
  }

  .avi-time-wrap .sel:hover {
    border: 1px solid #39747e;
    background-image: url(../images/icon-time-hover.svg);
  }

  .avi-time-wrap .sel__placeholder {
    font-size: 15px;
    line-height: 21px;
    padding: 0;
  }

  .avi-time-wrap .sel__box {
    top: calc(100% + 2px);
  }

  .avi-time-wrap .sel__box__options:hover {
    background-color: transparent;
    color: #39747e;
  }

  .avi-time-wrap .sel__box__options:hover:after {
    opacity: 1;
  }

  .avi-time-wrap .sel__box__options:after {
    content: "";
    background-image: url(../images/icon-tick.svg);
    background-repeat: no-repeat;
    position: absolute;
    right: 5px;
    width: 22px;
    height: 16px;
    background-size: 60%;
    opacity: 0;
  }

  .sel.sel--black-panther.active {
    z-index: 10;
  }

  .avi-time-wrap .sel.sel--black-panther.active {
    border: 1px solid #39747e;
    background-image: url(../images/icon-time-hover.svg);
  }

  .avi-time-wrap .sel__box.sel__box--black-panther {
    background: #ffffff;
    border: 1px solid #d8d5d6;
    box-sizing: border-box;
    box-shadow: -8px 8px 20px rgba(10, 78, 112, 0.1);
    font-size: 15px;
  }

  .avi-time-wrap .sel__box__options {
    font-size: 15px;
    line-height: 18px;
    color: #60545c;
  }

  .avi-time-wrap-lable.control {
    font-size: 15px;
    margin: 14px 0;
    padding: 2px 0 0 22px;
  }

  .avi-time-wrap-lable .control__indicator {
    width: 16px;
    height: 16px;
  }

  .avi-time-wrap-lable.control--checkbox .control__indicator::after {
    top: 3px;
    left: 2px;
  }

  .avi-btn-wrap {
    text-align: right;
    margin-top: 15px;
  }

  .warning-popup .avi-btn-wrap a {
    display: inline-block;
    vertical-align: top;
    margin: 0;
  }

  .avi-btn-wrap a.teal-bg-btn {
    padding: 12px 10px;
  }

  .avi-btn-wrap a.teal-border-btn {
    padding: 12px 10px;
  }

  .time-off-edit {
    display: none;
  }

  .time-off-edit-show {
    display: block;
  }

  .weekday .sel__placeholder {
    padding: 0;
    color: #60545c;
  }

  .weekday .sel.sel--black-panther.active,
  .weekday .sel:hover {
    border: 1px solid #60545C;
  }

  .weekday .sel__box.sel__box--black-panther {
    background: #ffffff;
    border: 1px solid #d8d5d6;
    box-sizing: border-box;
    box-shadow: -8px 8px 20px rgba(10, 78, 112, 0.1);
    font-size: 15px;
  }

  .weekday .sel__box__options:hover {
    background-color: transparent;
    color: #39747e;
  }

  .weekday .sel__box__options {
    color: #60545c;
    position: relative;
  }

  .weekday .sel__box__options::after {
    content: "";
    background-image: url(../images/icon-tick.svg);
    background-repeat: no-repeat;
    position: absolute;
    right: 3px;
    width: 22px;
    height: 16px;
    background-size: 60%;
    opacity: 0;
    top: 12px;
  }

  .weekday .sel::before {
    right: 7px;
  }

  .weekday .sel__box__options:hover::after {
    opacity: 1;
  }

  .avilable-edit-wrap {
    display: none;
  }

  .avilable-edit-wrap-show {
    display: block;
  }

  .avilable-edit-block {
    display: block;
  }

  .avilable-edit-wrap .col-md-4 {
    -ms-flex: 0 0 37.333333%;
    flex: 0 0 37.333%;
    max-width: 37.333%;
  }

  .start-time {
    position: relative;
  }

  .start-time:after {
    content: "to";
    color: #80767d;
    font-size: 15px;
    position: absolute;
    right: -7px;
    top: 44%;
    transform: translateY(-50%);
  }

  .vp-wrap .card .collapse {
    display: block;
  }

  .volunteers-container.stuck .vp-wrap {
    height: 100vh;
    background-color: #fff;
    box-shadow: -8px 8px 20px rgba(10, 78, 112, 0.1);
  }

  .volunteers-container.stuck .company-wrap {
    height: auto;
  }

  .volunteers-container.stuck .company-heading {
    padding-top: 35px;
  }

  .company-profile .profile-details {
    padding-left: 12px;
  }

  .note-wrapper {
    width: 370px;
    padding: 6px 24px 6px 24px;
  }

  .vp-right .note-wrapper h2 {
    padding-left: 0;
  }

  .note-form .add-form-control {
    margin: 0 0 10px 0;
  }

  .note-form {
    padding-bottom: 27px;
  }

  .add-note-wrap {
    display: none;
  }

  .note-text-wrap .add-note-wrap {
    display: flex;
  }

  /* .doc-wrap {
    border-bottom: 1px solid #eceaeb;
    margin-bottom: 14px;
    margin-top: 14px;
    padding: 0 0px 0 24px;
  } */

  .doc-wrap .btn-teal-bg {
    padding: 7px 30px;
    float: right;
    width: auto;
  }

  .doc-wrap .btn-teal-bg:hover {
    background-color: #5E8973;
  }

  .doc-wrap-txt p {
    font-size: 18px;
    line-height: 29px;
    color: #a0989d;
  }

  .doc-wrap-txt {
    font-size: 18px;
    line-height: 29px;
    color: #a0989d;
    text-align: center;
    font-family: "Circular-Pro-Book";
    margin: 25px 0 0 0;
  }

  .vp-right .doc-wrap h2 {
    padding-left: 0;
  }

  .vp-right .doc-wrap .row {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .document-link span {
    display: block;
    font-size: 13px;
    line-height: 21px;
    color: #80767d;
    font-weight: 400;
    font-family: "Circular-Pro-Book";
  }

  .document-link a {
    color: #60545c;
    font-size: 15px;
    line-height: 21px;
    position: relative;
    padding-left: 5px;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 4px;
    font-family: "Circular-Pro-Book";
  }

  .document-link a:after {
    content: "";
    position: absolute;
    /* background-image: url(../images/icon-file.svg); */
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    left: -20px;
    top: 0;
  }

  .document-link:hover {
    color: #39747e !important;
  }

  /* .document-link a:hover:after {
    background-image: url(../images/icon-file-hover.svg);
  } */

  .document-delet-icon img {
    filter: grayscale(100%);
  }

  .document-delet-icon:hover img {
    filter: grayscale(0);
  }

  .document-delet-icon {
    text-align: right;
  }

  .document-delet-icon a {
    display: inline-block;
    margin-bottom: 4px;
  }

  .document-delet-icon span {
    display: block;
    font-size: 13px;
    line-height: 21px;
    color: #80767d;
    font-weight: 400;
    font-family: "Circular-Pro-Book";
  }

  #vl-table th {
    position: relative;
  }

  #vl-table-form th {
    position: relative;
  }
  #vl-table .sorting:hover {
    background-image: url(../images/icon-sort-hover.svg);
  }

  .sort-dropdown {
    border: 1px solid #d8d5d6;
    box-sizing: border-box;
    box-shadow: -8px 8px 20px rgba(10, 78, 112, 0.1);
    border-radius: 4px;
    background-color: #fff;
    /* margin: 0px -10px;
    position: fixed;
    width: 201px; */
    position: absolute;
    width: 242px;
    right: 0px;
    /* right: 0px; */
    /* right: -26px; */
    top: 53px;
    /* top: 183px; */
    z-index: 2;
  }

  .sort-dropdown ul {
    margin: 0;
  }

  .sort-dropdown li {
    font-size: 15px;
    line-height: 21px;
    color: #60545c;
    padding: 10px 16px;
    font-weight: 400;
    font-family: "Circular-Pro-Book";
  }

  .border-list {
    border-top: 1px solid #eceaeb;
  }

  #sort-edit {
    left: -25px;
    width: 220px;
    padding: 20px 0;
  }

  #sort-edit ul {
    padding: 0 15px;
  }

  #sort-edit .add-form-control {
    margin: 0 0 10px 0;
    padding: 0 15px;
  }

  #sort-edit .form-text {
    margin: 0;
  }

  #vl-table #sort-edit .control {
    margin: 0 0 0 4px;
  }
  #vl-table-form #sort-edit .control {
    margin: 0 0 0 4px;
  }

  #sort-edit.sort-dropdown li {
    padding: 10px 0;
  }

  #sort-edit.sort-dropdown li span {
    padding: 0 0 0 25px;
  }

  #sort-edit.sort-dropdown .form-text {
    background-image: url(../images/icon-search.svg);
    background-repeat: no-repeat;
    padding-left: 50px;
    background-position: 20px 18px;
  }

  .er-bottom {
    /* font-size: 18px; */
    line-height: 27px;
    color: #16becc;
    text-align: center;
    border-top: 1px solid #eceaeb;
    display: block;
    padding: 15px 0 0;
    margin: 10px 0 0 0;
  }

  .er-bottom a {
    /* font-size: 18px; */
    line-height: 27px;
    color: #39747e;
    /* border-top: 1px solid #eceaeb; */
    text-align: center;
    display: block;
    padding: 15px 0 0;
    margin: 10px 0 0 0;
  }

  .add-popup .modal-dialog {
    max-width: 620px;
  }

  .add-popup .modal-header {
    display: block;
    text-align: center;
    padding: 34px 0 0;
    border-bottom: none;
  }
  .add-popup .modal-header-checklist {
    display: block;
    text-align: center;
    /* padding: 0px 0 0; */
  }

  .add-popup .modal-header h4 {
    font-size: 27px;
    line-height: 37px;
    color: #60545C;
    margin-bottom: 25px;
    font-family: "Circular-Pro-Book";
  }

  .add-popup .modal-header .close {
    position: absolute;
    right: 24px;
    top: -23px;
    z-index: 2;
    font-size: 40px;
  }

  .add-popup .modal-header p {
    font-size: 15px;
    line-height: 23px;
    color: #60545c;
    margin: 13px 0px;
    font-family: "circular-pro-book";
  }

  .add-popup .modal-header p a {
    color: #39747e;
  }

  .add-form-check .col-8 label {
    margin: 13px 0;
  }

  .add-form-check .col-8 span {
    padding-top: 5px;
  }

  .site-filter-top {
    display: none;
  }

  .si-applied-filter {
    padding: 0;
  }

  /* .bulk-search-list {
    padding: 0;
  } */

  .si-filter-wrap.selected .filter-wrap {
    background: #ffffff;
    border: 1px solid #eceaeb;
    box-sizing: border-box;
    box-shadow: 8px 8px 20px rgb(96 84 92 / 10%);
    border-radius: 4px;
    width: 224px;
    padding: 8px 1px;
    position: absolute;
    top: 46px;
    left: 29px;
    text-align: left;
    z-index: 3;
    display: table;
  }

  .filter-wrap .bulk-tag-wrap {
    padding: 0;
  }

  .filter-wrap .bulk-search-list ul li {
    font-size: 15px;
    line-height: 19px;
    padding: 10px 16px;
  }

  .filter-wrap .bulk-search-list ul li:hover {
    background-color: #f9f9f9;
  }

  .filter-wrap .bulk-search-list ul li a:hover {
    color: #39747e;
  }

  .si-filter-wrap {
    display: flex;
    position: relative;
    float: left;
  }

  .add-popup.move-popup .modal-dialog {
    max-width: 600px;
  }

  .add-popup.move-popup .modal-header p {
    color: #60545c;
  }

  .add-popup.move-popup .modal-header {
    padding: 35px 0 0;
    margin: 0 24px;
  }

  .add-popup.move-popup .list-volunteers-remove {
    padding: 0 10px 20px;
  }

  .add-popup.move-popup .list-volunteers-remove span {
    margin: 0 13px 0 0;
  }

  .add-popup.move-popup .list-volunteers-remove span.expand-list {
    margin: 9px 0 0 0 !important;
  }

  #filter-inactive .bulk-search-list ul {
    margin: 0;
  }

  .vl-pending-header .row {
    width: 100%;
    text-align: center;
    border-top: 1px solid #eceaeb;
  }

  .vl-pending-header .row .col-md-3 {
    border-right: 1px solid #eceaeb;
  }

  .vl-pending-header .row .col-md-3:last-child {
    border-right: none;
  }

  .vl-pending-header span {
    font-size: 15px;
    line-height: 21px;
    color: #60545c;
    display: block;
    padding: 16px 0;
    cursor: pointer;
  }

  .vl-pending-header span:hover {
    color: #39747e;
  }

  .vl-pending-header .active span {
    color: #39747e;
  }

  .vl-pending-header .active {
    border-bottom: 1px solid #39747e;
  }

  .vl-pending-header .inactive span {
    color: #bfbbbe;
  }

  .selected-tab.pending-tab {
    top: 55px;
  }

  .selected-tab.pending-tab
    .gray-bar
    .control--checkbox
    .control__indicator::after {
    top: 6px;
    left: 4px;
  }

  .selected-filter-tab {
    padding: 6px 23px;
    position: relative;
    border-top: 1px solid #eceaeb;
  }

  .selected-filter-tab .si-filter-one {
    margin: 0;
  }

  .sft-wrap {
    display: inline-block;
  }

  .mobile {
    display: none;
  }

  .desktop {
    display: block;
  }

  .selected-filter-tab .sort-dropdown {
    right: auto;
    left: 23px;
    top: 55px;
    width: 252px;
    padding: 0;
  }

  .selected-filter-tab .si-applied-top {
    margin-bottom: 75px;
  }

  .si-applied-radio [type="radio"]:checked + label,
  .si-applied-radio [type="radio"]:not(:checked) + label {
    padding: 0px 0 0 32px;
  }

  .selected-filter-tab .si-filter-btn {
    left: 0;
  }

  .selected-filter-tab .si-filter-btn a {
    padding: 18px 0 18px;
    color: #004e5b;
  }

  .selected-filter-tab .fliter-link {
    position: relative;
    padding: 7px 254px 7px 16px;
  }

  .selected-filter-tab .fliter-link::before {
    content: "";
    background-image: url(../images/icon-arrow-small.svg);
    background-repeat: no-repeat;
    width: 14px;
    height: 8px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  .selected-filter-tab .fliter-link.pink_hover {
    color: #d9402c;
  }

  .selected-filter-tab .fliter-link.pink_hover::before {
    background-image: url(../images/pink-close.svg);
    height: 16px;
    width: 16px;
  }

  .selected-filter-tab .si-applied-radio [type="radio"]:checked + label::before,
  .selected-filter-tab
    .si-applied-radio
    [type="radio"]:not(:checked)
    + label::before {
    width: 16px;
    height: 16px;
  }

  .selected-filter-tab .si-applied-radio p {
    margin: 0 18px 15px;
  }

  .selected-filter-tab .si-applied-radio [type="radio"]:checked + label,
  .selected-filter-tab .si-applied-radio [type="radio"]:not(:checked) + label {
    font-size: 15px;
    line-height: 15px;
  }

  .selected-filter-tab .si-applied-radio [type="radio"]:checked + label::after,
  .selected-filter-tab
    .si-applied-radio
    [type="radio"]:not(:checked)
    + label::after {
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
  }

  .selected-filter-tab .si-applied-radio {
    margin: 15px 0 0 0;
  }

  .sft-add-btn {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    line-height: 27px;
    color: #39747e;
    margin: 10px 0 0 20px;
  }

  .sft-add-btn:hover {
    color: #39747e;
  }

  .sft-save-btn {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    line-height: 27px;
    color: #39747e;
    margin: 0px 0 0 20px;
    border: 1px solid #39747e;
    border-radius: 4px;
    padding: 9px 34px;
  }

  .sft-save-btn:hover {
    color: #39747e;
  }

  .sort-dropdown.sort-filter .fliter-search {
    margin-bottom: 25px;
    padding: 0 18px;
  }

  .sort-dropdown.sort-filter .fliter-search .form-text {
    font-size: 15px;
  }

  .margin-bottom-0 {
    margin-bottom: 0 !important;
  }

  .sort-dropdown.sort-filter .si-applied-bottom::after {
    width: 118%;
    left: -19px;
  }

  .sort-dropdown.sort-filter .si-applied-bottom {
    padding: 25px 0 15px 0;
  }

  .filter-txt {
    display: inline-block;
    vertical-align: middle;
    padding: 13px 13px;
  }

  .clear {
    font-size: 18px;
    line-height: 27px;
    color: #60545c !important;
    float: right;
    margin: 0px 0 0 0;
  }

  .save-filter {
    position: fixed;
    background: #ffffff;
    box-shadow: -8px 8px 20px rgba(73, 76, 84, 0.1);
    width: 480px;
    height: 100%;
    z-index: 1;
    top: 67px;
    right: 0;
  }

  .save-filter .save-top {
    border-bottom: 1px solid #eceaeb;
    padding: 32px 24px 16px 24px;
  }

  .save-close {
    position: absolute;
    top: 36px;
    right: 27px;
  }

  .save-top h2 {
    font-size: 27px;
    line-height: 140%;
    color: #60545c;
  }

  .save-content ul {
    margin: 10px 0 0 0;
  }

  .save-content ul li {
    margin: 0;
  }

  .save-content ul li a.active {
    color: #39747e;
  }

  .save-content ul li a {
    color: #60545c;
    display: block;
    padding: 16px 24px;
    position: relative;
    font-size: 18px;
  }

  .save-content ul li a:hover:after {
    content: "";
    position: absolute;
    color: #39747e;
    background-image: url(../images/icon-delete.svg);
    background-repeat: no-repeat;
    height: 24px;
    width: 24px;
    right: 20px;
    top: 13px;
  }

  .save-content ul li a:hover {
    color: #39747e;
  }

  .modal-open.model-ex .modal {
    display: block;
    padding-left: 17px;
  }

  .modal-body .bulk-search-list ul li:hover {
    background: #f9f9f9;
    color: #39747e;
  }

  .pop-btn {
    border-top: 1px solid #eceaeb;
    padding: 30px 0 0 0;
  }

  .untag-result-list li {
    width: 32%;
    position: relative;
  }

  .untag-result-list {
    margin-bottom: 0;
  }

  .untag-result-list1 {
    margin-bottom: 0;
  }

  .untag-result-list li img {
    width: 14px;
    height: 14px;
    margin: -2px 0 0 7px;
    position: absolute;
    top: 14px;
    right: 14px;
  }

  .sr-list option:hover {
    background-color: red;
  }

  .confirm-popup .modal-header {
    border: none;
  }

  .confirm-popup .pop-btn {
    text-align: center;
  }

  .confirm-popup .pop-btn button {
    width: 50%;
  }

  #vl-table.company-table th:first-child {
    width: 24.3%;
  }

  #vl-table.company-table .volunteers-name {
    margin: 0 0 0 27px;
  }

  #vl-table-form.company-table th:first-child {
    width: 24.3%;
  }

  #vl-table-form.company-table .volunteers-name {
    margin: 0 0 0 27px;
  }

  .selected-row {
    background-color: #f7f7f7;
  }

  .selected-value.bordernone {
    border: none;
  }

  .selected-value.bordernone ul {
    margin: 0;
  }

  .vl-wrap .row {
    padding: 5px 0;
    margin: 0;
  }

  .vl-wrap .row:hover {
    background-color: #f7f7f7;
  }

  .vl-wrap .row:hover .col-6 span {
    color: #32c4d1;
  }

  .vl-wrap .vlw-right {
    opacity: 0;
  }

  .vl-wrap:hover .vlw-right {
    opacity: 1;
  }

  .si-edit-wrap {
    padding-bottom: 0;
  }

  .selected-filter-tab .cal-filter .si-applied-top {
    margin: 0;
  }

  .fliter-wrapper {
    padding: 0;
  }

  .si-applied-filter.cal-filter .cal-list.search-country-wrap {
    padding-bottom: 50px;
  }

  .show-row {
    color: #39747e;
    margin-top: 20px;
  }

  .show-row:hover {
    color: #39747e;
  }

  .btn-add-wrap {
    display: inline-block;
    position: relative;
    margin-top: 3px;
  }

  #add-wrap {
    right: auto;
    left: 0;
    top: 48px;
    width: 292px;
    text-align: left;
  }

  #add-wrap.sort-dropdown li a {
    font-size: 18px;
    line-height: 27px;
    display: block;
    color: #60545c;
  }

  #add-wrap.sort-dropdown li:hover {
    background-color: #f9f9f9;
  }

  #add-wrap.sort-dropdown li:hover a {
    color: #39747e;
  }

  #add-wrap {
    opacity: 1;
    height: auto;
  }

  .z-ndex-1 {
    z-index: 1;
  }

  .st-list span {
    display: block;
    font-size: 15px;
    line-height: 21px;
    padding-left: 32px;
  }

  .st-list li {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 25px;
  }

  .st-list {
    margin: 0;
    width: 50%;
  }

  .st-list label {
    margin-bottom: 12px !important;
  }

  .si-applied-top.si-applied-radio p {
    font-size: 15px;
    line-height: 21px;
    color: #60545c;
    padding-left: 36px;
  }

  .inactive-txt {
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #b3adb1;
    font-size: 15px;
    width: 54px;
    margin: 0 10px;
  }

  .setting-tab .nav-tabs .nav-link {
    font-size: 18px;
    line-height: 27px;
    padding: 14px 70px 14px 70px;
    width: auto;
  }

  .setting-tab .tab-content {
    padding: 35px 67px;
  }

  .setting-tab .tab-content h3 {
    font-size: 27px;
    line-height: 38px;
  }

  .st-tab ul li:nth-child(2) {
    padding: 28px 50px;
    position: relative;
  }

  .st-tab ul li:nth-child(2)::after {
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
  }

  .st-tab ul li:nth-child(2)::before {
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
  }

  .st-tab ul li {
    width: auto;
    padding: 28px 0;
  }

  .st-tab ul li:nth-child(2)::after,
  .st-tab ul li:nth-child(2)::before {
    content: "";
    width: 1px;
    height: 28px;
    background-color: #eceaeb;
    position: absolute;
    display: inline-block;
  }

  .btn-add-field {
    display: inline-block;
  }

  #sort-edit {
    display: none;
  }

  .edit-col.selected #sort-name,
  .edit-col.selected #sort-email,
  .edit-col.selected #sort-country,
  .edit-col.selected #sort-phone,
  .edit-col.selected #sort-j-date,
  .edit-col.selected #sort-edit {
    display: block;
  }

  /* .edit-col.selected {
    background-color: #f0f7f9;
  } */

  .edit-col :hover {
    color: #39747e;
  }

  .btn-container .avi-btn-wrap .teal-border-btn {
    width: 134px;
    display: inline-block;
    vertical-align: top;
  }

  .btn-container .avi-btn-wrap .teal-bg-btn {
    width: 250px;
    display: inline-block;
    vertical-align: top;
  }

  .btn-container .avi-btn-wrap .bold-red-delete {
    width: 134px;
    display: inline-block;
    vertical-align: top;
    color: #d9402c;
  }

  .selected-filter-tab .tooltip {
    position: initial;
  }

  .selected-filter-tab .tooltip .tooltiptext p {
    margin: 0;
    padding: 0;
  }

  .selected-filter-tab .tooltip .tooltiptext {
    top: auto;
    bottom: 49px;
    background-image: none;
    width: 124px;
    right: -35px;
    left: auto;
    transform: rotate(180deg);
  }

  .selected-filter-tab .tooltip .tooltiptext p {
    transform: rotate(-180deg);
  }

  .filter-txt.open {
    position: relative;
  }

  .filter-txt.open ul {
    background: #ffffff;
    box-shadow: 0px 1px 10px rgba(96, 84, 92, 0.2),
      4px 4px 20px rgba(73, 76, 84, 0.1);
    border-radius: 4px;
    position: absolute;
    width: 158px;
    margin: 0 auto;
    left: -47px;
    right: 0;
    top: 44px;
    padding: 0 0 22px 0;
    display: block;
    z-index: 1;
    text-align: center;
  }

  .filter-txt.open ul li {
    padding: 24px 0 3px;
  }

  .filter-txt.open ul li:hover {
    color: #39747e;
  }

  .filter-txt.open ul li.active {
    color: #39747e;
  }

  .opacty-0 {
    opacity: 0;
  }

  .desktop-teal-bg {
    width: 134px;
    float: right;
  }

  .vl-pending-header {
    display: block;
  }

  .si-btn-primary.btn-invite {
    padding: 10px 81px 11px;
  }

  .inactive-top {
    padding: 0;
  }

  .volunteers-container {
    display: none;
  }

  .sw-content h1 {
    font-size: 45px;
    line-height: 50px;
  }

  .edit-skill.selected #sort-skills {
    display: block;
  }

  .edit-skill.selected {
    color: #39747e !important;
    background-color: #f0f7f9;
    border: 1px solid #c2dee9 !important;
  }

  .vp-sort-dropdown {
    border: 1px solid #d8d5d6;
    box-sizing: border-box;
    box-shadow: -8px 8px 20px rgba(10, 78, 112, 0.1);
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    width: 242px;
    right: 35%;
    top: 85px;
    z-index: 1;
  }

  .vp-sort-dropdown ul {
    margin: 0;
  }

  .vp-sort-dropdown li {
    font-size: 15px;
    line-height: 21px;
    color: #60545c;
    padding: 10px 16px;
  }

  .edit-wrap h2 {
    font-size: 21px;
    line-height: 25px;
    padding-left: 0;
    color: #60545c;
  }

  .si-applied-radio .unsubscribed {
    margin-left: -20px;
  }
}

@media (max-width: 992px) {
  .left-side-container-public-page {
    margin-left: 80px;
    margin-right: 30px;
    margin-bottom: 30px;
  }
}

@media (max-width: 1175px) {
  .event-padding {
    padding-right: 10px !important;
  }
}

@media (min-width: 960px) {
  .setting-tab .tab-content .is-heading {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .vl-pending-header span {
    font-size: 18px;
  }

  .add-popup .modal-dialog {
    max-width: 920px;
  }

  .search-container {
    width: 292px;
    margin-bottom: 7px;
  }

  .si-btn-primary {
    padding: 10px 88px 11px;
  }

  .validate-box {
    margin: 0;
    padding: 10px 5px 10px;
    align-items: center;
    background-color: #ffffff;
  }
}

.expand_table_margin_in_name {
  margin-left: 50px;
}

@media (min-width: 1200px) {
  .v-log-time,
  .v-opportunities {
    font-size: 14px;
    min-width: 100%;
  }

  .v-profile-heading {
    width: 220px;
  }

  .v-profile-heading h2 {
    font-size: 32px;
  }

  .v-total-top h2 {
    font-size: 52px;
  }

  .vtb-left h2,
  .vtb-right h2 {
    font-size: 32px;
  }

  #vl-table.table-bordered thead td,
  #vl-table.table-bordered thead th {
    font-size: 15px;
    padding: 13px 11px 13px 10px;
    background-color: #f0edeb !important;
    /* padding: 17px 11px 17px 10px; */
  }

  #vl-table.table-bordered thead td,
  #vl-table.table-bordered thead th {
    font-size: 15px;
    color: #a0989d;
    line-height: 22.5px;
    font-weight: 400;
    font-family: "Circular-Pro-Book";
    background-color: #f0edeb !important;
  }

  #vl-table.table td,
  #vl-table.table th {
    font-size: 15px;
    font-weight: 450;
    line-height: 21px;
    /* color: #60545c; */
    font-family: "Circular-Pro-Book";
  }

  #vl-table .control {
    margin: 0 0 0 13px;
  }

  #vl-table-form.table-bordered thead td,
  #vl-table-form.table-bordered thead th {
    font-size: 15px;
    padding: 13px 11px 13px 10px;
    background-color: #f0edeb !important;
    /* padding: 17px 11px 17px 10px; */
  }

  #vl-table-form.table-bordered thead td,
  #vl-table-form.table-bordered thead th {
    font-size: 15px;
    color: #a0989d;
    line-height: 22.5px;
    font-weight: 400;
    font-family: "Circular-Pro-Book";
    background-color: #f0edeb !important;
  }

  #vl-table-form.table td,
  #vl-table-form.table th {
    font-size: 15px;
    font-weight: 450;
    line-height: 21px;
    color: #60545c;
    font-family: "Circular-Pro-Book";
    white-space: "break-spaces";
  }

  #vl-table-form.control {
    margin: 0 0 0 13px;
  }

  .vl-count {
    padding: 0 23px 0 37px;
    margin: 0 20px 0 0;
    background-position: right 8px;
  }

  #vl-table th:first-child {
    width: 18.3%;
  }

  #vl-table th:nth-child(2) {
    width: 16.7%;
  }

  #vl-table .sorting {
    margin-right: 4px;
    margin-top: 2px;
  }

  #vl-table tbody tr td .control {
    margin: 3px 0 0 13px;
    display: inline-block;
    vertical-align: top;
  }

  #vl-table-form th:first-child {
    width: 18.3%;
  }

  #vl-table-form th:nth-child(2) {
    width: 16.7%;
  }

  #vl-table-form .sorting {
    margin-right: 4px;
    margin-top: 2px;
  }

  #vl-table-form tbody tr td .control {
    margin: 3px 0 0 13px;
    display: inline-block;
    vertical-align: top;
  }

  .volunteers-name {
    font-size: 15px;
    line-height: 33px;
    margin: 0 0 0 12px;
    /* color: #60545c; */
    font-weight: 450;
    font-family: "Circular-Pro-Book";
  }

  .volunteers-avatar {
    margin-left: 36px;
    margin-top: -4px;
  }

  #vl-table .sorting {
    margin-right: 4px;
    margin-top: 2px;
  }

  #vl-table-form .sorting {
    margin-right: 4px;
    margin-top: 2px;
  }

  .checkbox-mt {
    margin-top: 3px;
  }
}

@media (min-width: 1366px) {
  .volunteers-container.stuck {
    width: 480px;
  }

  .vp-availability .col-6 span {
    margin: 0 15px;
  }

  .edit-available {
    /* margin-right: 25px; */
    margin-left: 10px;
  }

  .start-time {
    padding-left: 0;
    position: relative;
  }

  .avi-btn-wrap a.teal-bg-btn {
    padding: 12px 50px;
  }

  .avi-btn-wrap a.teal-border-btn {
    padding: 12px 30px;
  }

  .st-list {
    margin: 0;
    width: 50%;
  }
}

@media (min-width: 1390px) {
  .volunteers-container.stuck {
    width: 480px;
  }

  .vp-sort-dropdown {
    right: 34.5%;
    top: 85px;
  }
}

@media (min-width: 320px) {
  .v-log-time,
  .v-opportunities {
    margin-bottom: 20px;
  }

  .cc-export {
    margin-top: -5px !important;
    width: auto;
    /* margin-right: 40px; */
  }

  .cc-export span {
    margin: 0;
  }

  .makeStyles-org_select-1 {
    width: 140% !important;
    padding: 0px 0px 2px 5px !important;
  }

  .cc-tab-wrap .cc-name {
    /* width: 100%; */
    margin: 10px 0;
    margin-left: 20px;
  }

  .cc-tab .text-right {
    /* text-align: left!important; */
    margin-left: 30px;
  }

  .card-header .makeStyles-tab_select-6 {
    padding: 0 0 2px 3px;
    margin-left: 0;
    margin-top: 10px;
    border: 1px solid #16becc;
    color: #16becc;
    background-color: #fff;
  }
}

@media (max-width: 768px) {
  .v-profile-wrap,
  .v-log-time,
  .v-bottom,
  .v-total-top,
  .v-total-bottom,
  .organization-content .cc-export,
  .xs-hidden {
    display: none;
  }

  .cc-apply {
    margin-top: 20px;
  }

  .green-link {
    margin-right: -20px;
  }

  .schText button {
    margin: 10% auto;
    width: 100%;
  }

  .unsubscribed-modal .container {
    padding: 15px 0;
  }

  .avi-time-wrap .sel {
    margin-bottom: 15px;
  }

  .avi-time-wrap-lable {
    margin-bottom: 35px;
  }

  .primary-txt span {
    float: right;
    margin-top: -35px;
  }

  .dltBtn {
    display: none;
  }

  .showdltBtn {
    display: block;
  }

  .edit-email-container .col-md-6 {
    padding-right: 0;
  }

  .avi-time-wrap .add-form-control {
    margin-bottom: 5px;
  }

  .edit-mail a:first-child,
  .edit-link {
    width: 60%;
    float: left;
  }

  .showdltBtn {
    width: 40%;
    float: left;
  }

  .code-btn {
    width: 50%;
    font-size: 16px;
  }

  .showdltBtn img {
    float: right;
  }

  .edit-wrap.col-9 {
    max-width: 100%;
  }

  .full-wd {
    width: 100%;
    float: left;
    text-align: center;
  }

  .edit-profile-wrap > h4 {
    font-size: 25px;
    text-align: center;
  }

  .unsubscribed-modal {
    padding: 0px 10px 20px 10px;
  }

  .si-applied-filter {
    padding: 0;
  }

  .vp-time-off h3 {
    line-height: 30px;
  }

  .edit-tab .vp-availability .row {
    margin-left: -15px;
    margin-right: -15px;
  }

  .vp-time-off {
    padding: 0;
  }

  .vp-time-off .col-8 {
    padding-left: 0;
  }

  .vp-time-off .col-4 {
    padding-right: 0;
  }

  .vp-time-off .icon-right {
    padding-left: 70px;
  }

  .avilable-edit-wrap-show .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
  }

  .edit-profile-margin {
    margin-right: 0;
  }

  .edit-profile-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 15px;
  }

  .time-off-edit-show .col-12 {
    padding-left: 5px;
    padding-right: 5px;
  }

  .ep-wrap {
    text-align: center;
  }

  .ep-wrap .btn-alt {
    max-width: 95%;
    margin-left: 15px;
  }

  /* .edit-profile-wrap .tooltip {
    display: none;
  } */

  .edit-tab .tab-content {
    padding-left: 0;
    padding-right: 0;
  }

  .cc-tab .tab-pane .card-header {
    background-image: url(../images/icon-calendar-blue.svg);
    background-repeat: no-repeat;
    background-position: right 35px;
    margin-right: 29px !important;
  }

  /* .cc-calnder:after,
  .cc-tab .tab-pane .card-header .cc-arrow.collapsed::after,
  .cc-tab .tab-pane .card-header .cc-arrow::after {
    display: none;
  } */

  .commitment-container {
    padding: 0;
  }

  .cc-confirm-width {
    margin-top: 20px;
  }

  /* .cc-calnder {
    display: none;
  } */

  v-log-time,
  .v-opportunities {
    background: #39747e;
  }

  .mobTab {
    color: #39747e;
    width: 100%;
    /* width: 23.5em; */
    background-color: #f7fbfc !important;
  }

  .v-opportunities {
    margin-bottom: 0;
    min-width: 100%;
  }

  .md-hidden {
    display: block;
  }

  .cc-tab .text-right {
    text-align: left !important;
  }

  .v-btn-wrap {
    float: left;
    width: 100%;
  }

  .v-profile-heading {
    width: 100%;
  }

  .header-wrap nav {
    background-color: #ffffff;
  }

  .profile-info img {
    float: right;
    margin-right: 25px;
  }

  .v-top {
    padding-top: 20px;
  }

  .profile-info {
    width: 100%;
  }

  .profile-info.active::after {
    background: #777 !important;
  }

  .profile-info {
    background-image: url(../images/down-arrow-dark.svg);
  }

  .mobTab::before {
    position: absolute;
    content: "";
    background-image: url(../images/icon-arrow-down-blck.svg);
    background-repeat: no-repeat;
    width: 14px;
    height: 7px;
    right: 15px;
    top: 25px;
  }

  .mobTab.active::before {
    transform: rotateX(-180deg);
  }
  .vl-count {
    padding: 0 16px 0 22px;
    background-image: url(../images/icon-arrow-down-blck.svg);
    background-repeat: no-repeat;
    background-position: right center;
    margin: 0 8px 0 10px;
  }

  #vl-table-form .control {
    margin: 0;
  }

  .control__indicator {
    top: 0px;
  }
}

/* ============================================================================== */
@media (max-width: 575.98px) {
  .save-button {
    padding: 8px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .v-btn {
    padding: 8px 15px;
    font-size: 12px;
  }

  .v-profile-heading h2 {
    font-size: 27px;
  }

  .save-button {
    padding: 8px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .v-log-time,
  .v-opportunities {
    margin-bottom: 0px;
  }

  .v-log-time,
  .v-opportunities {
    min-width: 100%;
  }

  .v-btn {
    padding: 8px 15px;
    font-size: 12px;
  }

  .v-profile-heading {
    width: 200px;
  }

  .v-profile-heading h2 {
    font-size: 30px;
  }

  .save-button {
    padding: 8px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .validate-box .select-box {
    margin-top: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .vp-sort-dropdown {
    right: 35%;
    top: 85px;
  }

  .validate-box .select-box {
    margin-top: 20px;
  }

  .save-button {
    padding: 8px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .v-log-time,
  .v-opportunities {
    min-width: 100%;
  }

  .v-btn {
    padding: 8px 15px;
    font-size: 14px;
  }

  .v-log-time {
    margin-bottom: 0;
  }

  .save-button {
    padding: 8px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (min-width: 1200px) {
  .save-button {
    padding: 8px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .cc-confirm {
    width: 60%;
  }

  .v-log-time,
  .v-opportunities {
    min-width: 100%;
  }

  .v-profile-heading {
    width: 200px;
  }

  /* .v-log-time {
  } */
}

@media (min-width: 1390px) {
  .cc-confirm {
    width: 39%;
  }

  .v-profile-heading h2 {
    font-size: 45px;
  }

  .v-profile-heading {
    width: 220px;
  }
}

/* ======================================================================= */
@media (max-width: 575.98px) {
  .v-profile-heading h2 {
    font-size: 27px;
  }

  .step-form input[type="text"],
  .step-form input[type="email"] {
    width: 100%;
  }

  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    padding-right: 10px;
    padding-left: 10px;
  }

  .container-fluid-mobile {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  .step-form .description {
    font-size: 21px;
    line-height: 29px;
    margin-top: 18px;
    margin-bottom: 18px;
    text-align: left;
  }

  .step-form label {
    font-size: 15px;
    line-height: 21px;
    margin-bottom: 8px;
    text-align: left;
  }

  .css-zmuzd3 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .step-form .modal-wrap {
    margin: 0 auto;
  }

  .step-form .modal-body {
    margin-bottom: 0px !important;
  }

  .step-form .title {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
    line-height: 27px;
  }

  .step-form .form-group {
    margin-bottom: 0px;
  }

  .step-form .form-group p {
    font-size: 13px;
    line-height: 19px;
  }

  .step-form .button-wrap {
    margin-top: 0px;
    /* padding-top: 10px; */
    /* padding: 30px 0 !important; */
  }

  .step-form .button,
  .step-form .button-alt {
    width: 100%;
    text-align: center;
    padding: 12px 56px;
  }

  .step-form .button,
  .step-form .button-alt {
    margin-top: 10px;
    width: 100%;
  }

  .step-form .create-org {
    padding: 12px 10px;
  }

  .add-focus-select h2 {
    font-size: 21px;
    line-height: 29px;
    margin-bottom: 0px;
  }

  .step-form .add-tag li {
    padding: 5px 40px 5px 15px;
    font-size: 15px;
    line-height: 27px;
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .step-form .focus-tag li {
    padding: 5px 40px 5px 15px;
    font-size: 15px;
    line-height: 27px;
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .select-wrap {
    width: 160px;
    height: fit-content;
    padding: 16px;
  }

  .select-wrap span {
    font-size: 15px;
    line-height: 21px;
  }

  .step-form .bk-to-db {
    width: 310px;
  }

  .commitment-container {
    padding: 0;
    margin-left: -131px;
  }

  .edit-profile-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .cc-sub-heading {
    margin-top: 25px;
  }

  .profile-info img {
    margin-right: 0px;
    float: none;
  }

  .profile-info span {
    margin: 10px 12px 0 12px;
    margin-left: 8px;
  }

  .profile-dropdown {
    top: 65px;
    width: 75%;
  }

  .profile-info.active,
  .profile-info {
    float: right;
    width: 100%;
  }

  .profile-info a {
    text-align: right;
  }

  .modal-header {
    display: flex;
    flex-direction: column;
  }

  .btn-add-wrap .desktop {
    display: none;
  }

  .volunteers-container.stuck {
    display: none;
  }

  .add-focus-select {
    margin: 0px;
  }

  .selected-filter-tab {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .edit-profile-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .mobTab {
    width: 97%;
  }

  .cc-sub-heading {
    margin-top: 25px;
  }

  .v-log-time,
  .v-opportunities {
    min-width: 100%;
  }

  .commitment-container {
    padding: 0;
    margin-left: 6px;
  }

  .step-form input[type="text"],
  .step-form input[type="email"] {
    width: 100%;
  }

  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    padding-right: 10px;
    padding-left: 10px;
  }

  .container,
  .container-sm {
    max-width: 650px;
  }

  .step-form .modal-wrap {
    margin: 5px auto;
  }

  .step-form .description {
    font-size: 21px;
    line-height: 29px;
    margin-top: 32px;
    margin-bottom: 28px;
    text-align: left;
  }

  .step-form label {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 8px;
    text-align: left;
  }

  .step-form .button-wrap {
    margin-top: 0px;
    padding-top: 0px;
    padding: 20px 0 !important;
  }

  .add-focus-select h2 {
    font-size: 21px;
    line-height: 29px;
  }

  .select-wrap {
    width: 180px;
    height: 180px;
    padding: 20px;
  }

  .step-form .bk-to-db {
    width: 310px;
  }

  .profile-dropdown {
    top: 72px;
    width: 300px;
  }

  .profile-info {
    width: 80%;
  }

  .profile-info.active {
    float: right;
    width: 75%;
  }

  .profile-info {
    float: right;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .profile-info a {
    text-align: right;
  }

  .profile-info img {
    margin-right: 0px;
    float: none;
  }

  .btn-add-wrap.desktop {
    display: none;
  }

  .volunteers-container.stuck {
    display: none;
  }

  .step-form .modal-body {
    margin-bottom: 0px;
  }

  .step-form .button,
  .step-form .button-alt {
    width: 100%;
    text-align: center;
    padding: 12px 56px;
  }

  .step-form .button,
  .step-form .button-alt {
    margin-top: 10px;
    width: 100%;
  }

  .add-focus-select {
    margin: 0px;
  }

  .desktop {
    display: block;
  }

  #add-wrap {
    right: auto;
    left: 0;
    top: 48px;
    width: 195px;
    text-align: left;
  }

  .selected-filter-tab {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .formlist-card a {
    padding: 8px 3px;
    font-size: 10px;
  }

  .step-form input[type="text"],
  .step-form input[type="email"] {
    width: 100%;
  }

  .container,
  .container-md,
  .container-sm {
    max-width: 800px;
  }

  .css-zmuzd3 {
    padding-left: 176px !important;
    padding-right: 176px !important;
    margin: 0px;
  }

  .step-form .description {
    font-size: 24px;
    line-height: 29px;
    margin-top: 32px;
    margin-bottom: 28px;
    text-align: left;
  }

  .step-form .description4 {
    font-size: 24px;
    line-height: 29px;
    margin-top: 10px;
    margin-bottom: 28px;
    text-align: left;
  }

  .step-form label {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 8px;
    text-align: left;
  }

  .step-form .button-wrap {
    margin-top: 0px;
    padding: 20px 0 !important;
  }

  .add-focus-select h2 {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 0px;
  }

  .select-wrap {
    width: 180px;
    height: 180px;
    padding: 20px;
  }

  .public_url_mt {
    top: 15px;
    left: 2.9%;
  }

  .profile-info {
    width: 12%;
  }

  .profile-dropdown {
    top: 56px;
  }

  .btn-add-wrap.desktop {
    display: none;
  }

  .step-form .title {
    padding-bottom: 16px;
  }

  .step-form .step-2 .col-md-6 {
    margin-bottom: 10px;
  }

  .add-focus-select {
    margin: 0px;
  }

  .step-form .add-tag li {
    padding: 5px 40px 5px 15px;
    font-size: 15px;
    line-height: 27px;
    margin-right: 8px;
    margin-bottom: 8px;
  }

  #add-wrap {
    right: auto;
    left: 0;
    top: 48px;
    width: 195px;
    text-align: left;
  }

  .si-filter {
    margin: 0px 0 0 20px;
    position: relative;
  }

  .volunteers-container.stuck {
    width: 480px;
  }

  /* profile drawer */
  .profile-details h5 {
    font-size: 20px;
    line-height: 23px;
  }

  .vp-right .card-body {
    padding: 5px 0;
  }

  .vp-right h2 {
    font-size: 21px;
    line-height: 33px;
  }

  .vp-time-off {
    padding: 0 24px 30px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .step-form input[type="text"],
  .step-form input[type="email"] {
    width: 70%;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 1000px;
  }

  .formlist-card a {
    padding: 8px;
  }

  /* .css-zmuzd3 {
    padding-left: 176px !important;
    padding-right: 176px !important;
    margin: 0px;
  } */
  .step-form .description {
    font-size: 24px;
    line-height: 29px;
    margin-top: 32px;
    margin-bottom: 28px;
    text-align: center;
  }

  .step-form label {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 8px;
    text-align: left;
  }

  .step-form .button-wrap {
    margin-top: 100px;
    padding-top: 30px;
    padding: 30px 0 !important;
  }

  .step-form .button-wrap4 {
    margin-top: 10px;
    /* padding-top: 30px; */
    /* padding: 30px 0 !important; */
  }

  .add-focus-select h2 {
    font-size: 24px;
    line-height: 29px;
  }

  .public_url_mt {
    top: 14px;
    left: 163px;
  }

  .v-bottom {
    padding: 35px 0;
    margin-top: 15px;
  }

  .v-profile-heading h2 {
    font-size: 32px;
  }

  .v-log-time,
  .v-opportunities {
    min-width: 100%;
  }

  .btn-add-wrap.desktop {
    display: none;
  }
}

@media (min-width: 1200px) {
  .step-form input[type="text"],
  .step-form input[type="email"] {
    width: 45%;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1600px;
  }

  .v-bottom {
    padding: 35px 0;
    margin-top: 15px;
  }

  .btn-add-wrap.desktop {
    display: none;
  }

  .final-step {
    margin-top: 100px;
  }

  .profile-dropdown {
    top: 56px;
  }
}

@media (min-width: 1025px) and (max-width: 1360px) {
  .formlist-card a {
    padding: 8px;
  }
}

.main-tab-mobile {
  display: none;
}

.mobile-track-list {
  display: none;
}

.mobile-my-schedule {
  display: none;
}

.my-schedule-name {
  display: none;
}
.avai-form-dropdown {
  width: 100% !important;
}
.avai-dropdown {
  width: 95% !important;
}

.avai-dropdown_100 {
  width: 100% !important;
}

.start-time:after {
  right: 4px !important;
}

.mobile-edit-tab {
  display: none;
}

.dropdown-open {
  top: 4px;
}

.vp-time-off .form-text {
  line-height: 16px !important;
}

@media (max-width: 576px) {
  .weekday .sel__placeholder {
    padding: 0;
    color: #60545c;
  }

  .snakbar-container {
    margin-left: -8px;
  }

  .left-container-mobile {
    display: none !important;
  }

  .carousal-div {
    display: none !important;
  }

  .main-tab-nav {
    display: none !important;
  }

  .main-tab-mobile {
    left: 0;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    width: 100%;
    list-style: none;
    background: #ffffff;
    box-shadow: inset 0px 1px 0px #eceaeb;
    padding: 8px;
    z-index: 100;
  }
  /* for equal width for all li items*/
  .main-tab-mobile li {
    flex: 1;
  }

  /* .mobile-invite-tab {
    margin-left: -130px;
  } */
  .cc-tab .tab-pane .card-header {
    background-image: none;
  }

  .css-mhc70k-MuiGrid-root {
    justify-content: center;
    align-items: center;
  }

  .flex-align-just-center {
    justify-content: center;
    margin-left: 75%;
  }

  .mobile-flex-align {
    margin-left: 75%;
  }

  .autocomplete-dropdown {
    margin: 10px 0px;
  }

  .avi-btn-wrap a {
    width: 100%;
    margin-left: 0;
  }

  .email-body {
    /* width: 85%; */
    flex-wrap: wrap;
  }

  .email-add-new {
    max-width: 100% !important;
  }

  .email-text {
    margin-right: 10px;
  }

  .cc-arrow span {
    font-size: 15px;
  }

  /* .css-1s50f5r {
    flex-basis: 55% !important;
    max-width: 55% !important;
  } */
  .css-1rraktp {
    flex-basis: 45% !important;
  }

  /* .top-name-logo {
    margin-left: 120%;
  } */

  .top-name-container {
    position: relative;
    left: 30%;
    z-index: 10;
  }

  .noti-container {
    flex-wrap: wrap;
  }

  .makeStyles-formLabel2-241 {
    font-size: 12px;
  }

  .noti-heading-text {
    font-size: 13px !important;
  }

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

  .swicth-label {
    font-size: 12px !important;
  }

  .org-name {
    font-size: 13px !important;
  }

  .comm-family {
    font-size: 12px !important;
  }

  .css-1gejpqg-MuiGrid-root {
    flex-basis: 100% !important;
  }

  .css-1osj8n2-MuiGrid-root {
    flex-basis: 100%;
  }

  .cc-tab .tab-pane .card-header {
    padding-right: 0px !important;
  }

  .vp-availability .row,
  .vp-time-off .row {
    font-size: 12px !important;
  }

  .vp-time-off h3 {
    font-size: 12px !important;
  }

  .vp-time-off h4 {
    font-size: 12px !important;
  }

  .add-avil {
    font-size: 12px !important;
  }

  .email-heading {
    font-size: 13px !important;
  }

  .email-text {
    font-size: 12px !important;
  }

  .email-btn {
    font-size: 13px !important;
  }

  .email-second-part {
    gap: 0px !important;
  }

  .email-btn {
    width: 100px !important;
    margin-right: 30px;
    padding: 10px !important;
  }

  .pass-container {
    max-width: 100% !important;
  }

  .weekday .sel__box.sel__box--black-panther {
    background: #ffffff;
    border: 1px solid #d8d5d6;
    box-sizing: border-box;
    box-shadow: -8px 8px 20px rgba(10, 78, 112, 0.1);
    font-size: 12px;
  }

  .weekday .sel__box__options {
    color: #60545c;
    position: relative;
  }

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

  .desktop-track {
    display: none;
  }

  .mobile-track-list {
    display: inline-block;
  }

  .tab-invite .row {
    width: 87vw;
  }

  .desktop-log-buttton {
    display: none !important;
  }

  .all-time {
    display: flex;
    gap: 40px;
  }

  .all-time-text {
    font-family: "Circular-Pro-Book";
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 150%;
    color: #004e5b;
  }

  .all-time-number {
    font-family: "Circular-Pro-Book";
    font-style: normal;
    font-weight: 450;
    font-size: 27px;
    line-height: 140%;
    letter-spacing: 0.001em;
    color: #004e5b;
  }

  .MuiTypography-root.noti-label {
    font-size: 12px !important;
  }

  .add-new-email {
    font-size: 12px !important;
  }

  .form-text {
    font-size: 15px !important;
  }

  .form-title {
    /* font-size: 15px !important; */
    font-size: 12px !important;
  }

  .MuiInputBase-root {
    font-size: 15px !important;
  }

  .commitment-container h2 {
    font-size: 21px !important;
  }

  .MuiBox-root-329 {
    width: 100%;
  }

  .MuiContainer-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .MuiBox-root-335 {
    margin-top: 0px !important;
  }

  .sel.sel--black-panther.active {
    z-index: 10 !important;
  }

  .desktop-my-schedule {
    display: none;
  }

  .mobile-my-schedule {
    display: flex;
  }

  .my-schedule-name {
    display: flex;
    flex-direction: column;
  }

  .my-schedule-name {
    background: linear-gradient(
      180deg,
      rgba(0, 78, 91, 0.83) 0%,
      rgba(0, 78, 91, 0) 100%
    );
    margin-left: -14%;
    margin-right: -25px;
    margin-top: -15px;
  }

  .cc-calnder:after {
    left: 0px;
    top: -15px;
  }

  .MuiSelect-root {
    width: 100%;
  }

  .desktop-schedule {
    display: none;
  }

  .avi-time-wrap-lable {
    margin-left: 22px;
  }

  .checkbox_enabled {
    top: 0px !important;
    left: -20px !important;
  }

  .checkbox_enabled_time {
    top: 1px !important;
    left: 0px !important;
  }

  .vp-availability {
    margin-bottom: 0px;
    padding: 10px 0px;
  }

  .vp-time-off {
    margin-bottom: 15px !important;
  }

  .cc-tab-wrap .cc-name {
    margin: 0 !important;
  }

  .venue-name-color {
    font-size: 15px !important;
  }

  .css-17v8lcm {
    min-width: 100% !important;
  }

  .css-nkhozk {
    min-width: 85% !important;
  }

  .avai-dropdown {
    width: 100% !important;
  }

  .communication .grid-mt {
    margin-top: 10px !important;
  }

  .css-zow5z4-MuiGrid-root > .MuiGrid-item {
    padding-top: 0px !important;
  }

  .mobile-edit-tab {
    display: flex;
    flex-direction: column;
  }

  .desktop-edit-tab {
    display: none;
  }

  .profile-info span {
    display: none !important;
  }

  .add-form-wrap {
    padding: 0px !important;
  }

  .modal-body {
    padding: 10px;
  }

  .css-10twjy4-MuiFormControl-root-MuiTextField-root input {
    font-size: 15px !important;
  }

  .dropdown-open {
    top: 0px;
  }
}

@media (max-width: 375px) {
  /* .mobile-flex-align {
    margin-left: 60%;
  } */
}

@media (max-width: 300px) {
  .my-schedule-content {
    margin-left: 25px !important;
  }

  .top-name-container {
    left: 26% !important;
  }

  .profile-info img {
    margin-right: 20px !important;
  }

  .mobile-flex-align {
    margin-left: 60% !important;
  }
}

/* @media (max-width: 768px) {
  .pagination-wrap {
    display: none !important;
  }
} */

@media only screen and (min-width: 700px) and (max-width: 1024px) {
  .profile-info {
    width: 10%;
  }

  .tablet-profile-info a {
    margin-left: 0px !important;
  }

  .cc-tab .tab-pane .card-header {
    background-image: none !important;
  }
  .orange_card_margin_left_for_tablet {
    margin-left: 101px !important;
  }
}

#vl-table.table-bordered thead td,
#vl-table.table-bordered thead th {
  border-bottom: 1px solid #eceaeb;
  font-size: 15px;
  color: #60545c;
  font-weight: 450;
  padding: 13px 11px 13px 10px;
  /* padding: 17px 11px 17px 10px; */
  /* padding: 9px; */
}

#vl-table-form.table-bordered thead td,
#vl-table-form.table-bordered thead th {
  border-bottom: 1px solid #eceaeb;
  font-size: 15px;
  color: #a0989d;
  font-weight: 450;
  padding: 13px 11px 13px 10px;
  /* padding: 17px 11px 17px 10px; */
  /* padding: 9px; */
}

#vl-table.table-bordered-event thead td,
#vl-table.table-bordered-event thead th {
  border-bottom: 1px solid #eceaeb;
  border-top: 1.5px solid #eceaeb;
  font-size: 15px;
  color: #a0989d;
  font-weight: 450;
  padding: 13px 11px 13px 10px;
  /* padding: 17px 11px 17px 10px; */
  /* padding: 9px; */
}

#vl-table-form.table-bordered-event thead td,
#vl-table-form.table-bordered-event thead th {
  border-bottom: 1px solid #eceaeb;
  border-top: 1.5px solid #eceaeb;
  font-size: 15px;
  color: #a0989d;
  font-weight: 450;
  padding: 13px 11px 13px 10px;
  /* padding: 17px 11px 17px 10px; */
  /* padding: 9px; */
}

#vl-table thead {
  background-color: #f0edeb;
}

#vl-table-form thead {
  background-color: #f0edeb;
}

.volunteers-name {
  font-size: 15px;
  line-height: 21px;
  margin: 0;
  color: #60545c;
  text-align: center;
  font-weight: 450;
  font-family: "Circular-Pro-Book";
  margin-left: 16px;
}

.volunteers-avatar {
  margin-left: 25px;
  /* margin-top: -6px; */
}
.disable-volunteers-name {
  font-size: 15px;
  line-height: 21px;
  color: #b2bac2;
  text-align: center;
  font-weight: 450;
  font-family: "Circular-Pro-Book";
  margin-left: 16px;
}

#vl-table.table td,
#vl-table.table th {
  padding: 11px 10px 10px;
  vertical-align: middle;
  font-size: 15px;
  font-family: "Circular-Pro-Book";
  font-weight: 450;
  line-height: 21px;
  white-space: normal;
}

#vl-table-form.table td,
#vl-table-form.table th {
  padding: 13px 11px 13px 10px;
  vertical-align: middle;
  font-size: 15px;
  font-family: "Circular-Pro-Book";
  font-weight: 450;
  line-height: 21px;
}

.wrapper_width {
  width: 100%;
}

/* for mobile view */

@media (max-width: 575.98px) {
  .control--checkbox .control__indicator:after {
    top: 5px;
  }

  .control__indicator {
    top: -2px;
    /* left: -4px; */
  }

  .content_month,
  .content_date_end,
  .divider_root {
    width: 100% !important;
  }

  .divider_root {
    margin-left: 0px !important;
  }

  .divider_root_new {
    margin-left: 0px !important;
  }

  #vl-table .control {
    margin: 0;
  }

  .volunteers-avatar {
    margin-left: 35px;
    margin-top: -6px;
  }

  /* for profile drawer */
  .nav-tabs {
    border-bottom: none;
  }

  .vp-left {
    width: 57px;
  }

  /* .nav-tabs .nav-item {
    margin-left: 1px;
  } */

  .select-count-filter {
    font-family: "Circular-Pro-Book";
  }

  .card-body {
    padding: 1rem 0.5rem;
  }

  .untag-result-list h3 span {
    background-image: url(../images/icon-plus.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 10%;
  }

  .untag-result-list li {
    width: 32%;
    position: relative;
  }

  .vp-right .untag-result-list li {
    font-size: 15px;
    position: relative;
    //background-image: url(../images/icon-tag.svg);
    background-position: 14px center;
    padding: 10px 43px 11px 37px;
    width: auto;
    margin-right: 9px;
    margin-bottom: 15px;
    color: #297f8e;
  }

  .untag-result-list li span {
    background-image: url(../images/profile-close.svg);
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    top: 13px;
    right: 20px;
    display: block;
    position: absolute;
  }

  .untag-result-list2 h3 {
    font-size: 18px;
    padding-bottom: 5px;
    position: relative;
    padding-top: 5px;
    color: #004e5b;
    font-family: "Circular-Pro-Book";
    font-weight: 450;
  }

  .vpi-middle {
    padding: 0 24px;
    margin-bottom: 26px;
  }

  .vp-wrap .card .collapse {
    display: block;
  }

  .export-icon-img,
  .delete-icon-img,
  .msg-icon-img,
  .tag-icon-img,
  .MoveToInactive {
    /* background-position-y: 0px; */
    width: unset;
    height: unset;
  }

  .msg-icon-img {
    background-image: url(../images/MessageLg.svg);
  }

  .delete-icon-img {
    background-image: url(../images/DeleteLg.svg);
  }

  .tag-icon-img {
    background-image: url(../images/tag-icon_lg.svg);
  }

  .MoveToInactive {
    background-image: url(../images/MoveToInactiveLg.svg);
  }

  .export-icon-img {
    background-image: url(../images/ExportLg.svg);
  }

  /* message modal mobile */
  .messgae_container {
    width: 100% !important;
  }

  .add-popup .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
  }

  .add-popup .modal-header {
    display: block;
    text-align: center;
    padding: 34px 0 0;
    border-bottom: none;
  }

  .add-popup .modal-header-checklist {
    display: block;
    text-align: center;
    /* padding: 0px 0 0; */
  }

  .add-popup .modal-header h4 {
    font-size: 27px;
    line-height: 37px;
    color: #39747e;
    margin-bottom: 25px;
    font-family: "Circular-Pro-Book";
  }

  .add-popup .modal-header .close {
    position: absolute;
    right: 24px;
    top: -23px;
    z-index: 2;
    font-size: 40px;
  }

  .add-popup .modal-header p {
    font-size: 15px;
    line-height: 23px;
    color: #60545c;
    margin: 13px 0px;
    font-family: "circular-pro-book";
  }

  .add-popup .modal-header p a {
    color: #39747e;
  }

  .add-form-check .col-8 label {
    margin: 13px 0;
  }

  .add-form-check .col-8 span {
    padding-top: 5px;
  }

  .add_not_button {
    margin-left: "57%";
  }

  .flag-delete {
    text-align: left;
  }

  .vp-availability h2 span {
    background-image: url(../images/icon-plus.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 25px;
    top: 25px;
  }

  .vp-time-off h2 span {
    background-image: url(../images/icon-plus.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 25px;
    top: none;
    cursor: pointer;
  }

  .vp-right {
    width: 100%;
  }

  .remove_border {
    border: none;
  }

  /* .vp-right .untag-result-list2 {
    padding: 0px 24px 8px 24px;
  } */

  .document_width {
    width: 95%;
  }

  .bulk_action_options {
    box-shadow: 1px 4px 16px 0px #ddd;
    position: absolute;
    right: 7px;
    top: 0;
    z-index: 15;
    padding: 10px 12px 9px 10px;
    margin-top: 53px;
    background: #ffffff;
    text-align: left;
    max-height: calc(100vh - 270px);
    border-radius: 6px !important;
    height: auto;
    /* width: 330px; */
    overflow: auto;
  }

  /* .vp-information {
    padding-right: 25px;
  } */

  /* .upcoming_location_width {
    width: 60% !important;
  } */

  .activity_width {
    width: 225px !important;
  }

  .vpim-one {
    width: 31%;
    position: relative;
  }

  .vpi-middle .vpim-one h3 span {
    font-size: 15px;
    font-family: "Circular-Pro-Book";
    color: #60545c;
    text-transform: none;
    font-weight: 400;
  }

  .vpim-one img {
    margin-left: 8px;
  }

  .vpi-middle {
    padding: 0 24px;
    margin-bottom: 26px;
  }

  .vpi-top a {
    padding: 5px 25px;
    right: 0;
  }

  .vpi-middle h3 {
    margin: 0 0 8px 0;
  }

  .vpi-bottom {
    margin-bottom: 27px;
  }

  .vpim-one ul {
    display: none;
    background: #ffffff;
    border: 1px solid #eceaeb;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 16px 20px 0 20px;
    position: absolute;
    top: 20px;
    left: -11px;
  }

  .vpim-one ul li {
    font-size: 15px;
    line-height: 21px;
    color: #60545c;
    cursor: pointer;
    margin-bottom: 16px;
  }

  .vpim-one ul li:hover {
    color: #39747e;
  }

  .vpi-middle {
    display: flex;
    padding: 0 16px;
    margin-bottom: 20px;
  }

  .availability-btns {
    display: flex;
    flex-direction: column;
    padding-right: 0px !important;
  }

  .sel.sel--black-panther.active {
    z-index: 10;
  }

  .avi-time-wrap .sel.sel--black-panther.active {
    border: 1px solid #39747e;
    background-image: url(../images/icon-time-hover.svg);
  }

  .avi-time-wrap .sel__box.sel__box--black-panther {
    background: #ffffff;
    border: 1px solid #d8d5d6;
    box-sizing: border-box;
    box-shadow: -8px 8px 20px rgba(10, 78, 112, 0.1);
    font-size: 15px;
  }

  .avi-time-wrap .sel__box__options {
    font-size: 15px;
    line-height: 18px;
    color: #60545c;
  }

  .avi-time-wrap-lable.control {
    font-size: 15px;
    margin: 14px 0;
    padding: 2px 0 0 22px;
  }

  .avi-time-wrap-lable .control__indicator {
    width: 16px;
    height: 16px;
  }

  .avi-time-wrap-lable.control--checkbox .control__indicator::after {
    top: 3px;
    left: 2px;
  }

  .w_84 {
    width: 84%;
  }

  .mb-title-directory {
    margin-bottom: 18% !important;
  }

  .profile-info-mobile {
    width: unset;
  }

  .profile-info-mobile.active {
    float: right;
    width: 279px;
  }

  .profile-info-mobile a {
    margin-left: 10px !important;
  }

  .profile-info-mobile.active span {
    display: flex !important;
    margin: unset;
    margin-left: 10px;
  }

  .flex-align-just-center-org-mobile {
    justify-content: unset;
    margin-left: unset;
  }

  .profile-info-mobile.active::after {
    content: "";
    position: absolute;
    width: 108%;
    height: 60px;
    background: #e8f3f7 !important;
    border: 1px solid #d8d5d6 !important;
    box-sizing: border-box;
    /* border-radius: 0px 0px 4px 4px; */
    top: -12px;
    z-index: -1;
  }

  .profile-pic-m {
    margin: 0px !important;
  }

  .vp-availability h2,
  .vp-time-off h2 {
    font-size: 18px !important;
  }
}

@media (max-width: 420px) {
  .wrapper_width {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .wrapper_width {
    width: 100%;
  }
}

@media (max-width: 280px) {
  .wrapper_width {
    width: 100%;
  }
}

div.checkbox_enabled_desktop {
  top: 6px !important;
  left: 0px !important;
}

.nav-item-profilecard a:hover {
  background-color: #eabbb5 !important;
}