.fs-7 {
    font-size: 7px;
}

.fs-8 {
    font-size: 8px;
}

.fs-9 {
    font-size: 9px;
}

.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-21 {
    font-size: 21px;
}

.fs-22 {
    font-size: 22px;
}

.fs-23 {
    font-size: 23px;
}

.fs-24 {
    font-size: 24px;
}

.fs-25 {
    font-size: 25px;
}

.fs-26 {
    font-size: 26px;
}

.fs-27 {
    font-size: 27px;
}

.fs-28 {
    font-size: 28px;
}

.fs-29 {
    font-size: 29px;
}

.fs-30 {
    font-size: 30px;
}

.my-toast-container {
    position: fixed !important;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.my-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 300px;
    max-width: 250px;
    padding: 12px 16px;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateX(100%);
    animation: my-slideIn 0.4s forwards, my-fadeOut 0.5s forwards 3.5s;
    position: relative;
    overflow: hidden;
}

.my-toast .my-icon {
    font-size: 18px;
}

.my-toast.success {
    background: #4caf50;
}

.my-toast.error {
    background: #fa4c40;
}

.my-toast.info {
    background: #2196f3;
}

.my-toast.warning {
    background: #ff9800;
}

.my-toast::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    animation: my-progress 3.5s linear forwards;
}

@keyframes my-slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes my-fadeOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes my-progress {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}

.cursor-p {
    cursor: pointer;
}

.user-avtar {
    height: 30px !important;
    width: 30px !important;
}

.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.pc-header {
    border-bottom: var(--pc-sidebar-border);
}

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

.btn-none {
    border: none !important;
    background: none !important;
    width: 100%;
    justify-content: start;
    text-align: start;
}

.menu-sub-DevM {
    display: flex !important;
    align-items: center !important;
}

.menu-sub-DevM > .badge-DevM {
    color: white;
    border-radius: 50%;
    display: block !important;
    height: 15px !important;
    width: 15px !important;
    text-align: center;
    line-height: 1rem;
}

.item-order {
    cursor: pointer;
    position: relative;
    transition: all .2s ease;
    border: 2px solid #e5e5e5;
}

.item-order.active {
    border: 2px solid var(--pc-sidebar-active-color);
}

.item-order::after {
    content: "✓";
    position: absolute;
    top: 3px;
    right: 5px;
    width: 22px;
    height: 22px;
    color: var(--pc-sidebar-active-color);
    font-size: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: .2s;
}

.item-order.active::after {
    opacity: 1;
    transform: scale(1);
}

.note p {
    margin: 0px !important;
}

.mobile-nav {
  bottom: 0;
  left: 0;
  z-index: 1025;
  display: none;
}

@media (max-width: 991.98px) {
  .mobile-nav {
      display: block;
  }
}

.mobile-group {
  background-color: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.1);
  background-image:
      url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWxfNDQ2NF81NTMzOCkiIGZpbGwtb3BhY2l0eT0iMC4xIi8+CjxkZWZzPgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MF9yYWRpYWxfNDQ2NF81NTMzOCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAgMS44MTgxMmUtMDUpIHJvdGF0ZSgtNDUpIHNjYWxlKDEyMy4yNSkiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDBCOEQ5Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwQjhEOSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=="),
      url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWxfNDQ2NF81NTMzNykiIGZpbGwtb3BhY2l0eT0iMC4xIi8+CjxkZWZzPgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MF9yYWRpYWxfNDQ2NF81NTMzNyIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEyMCkgcm90YXRlKDEzNSkgc2NhbGUoMTIzLjI1KSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjU2MzAiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkY1NjMwIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");
  background-size: 50%, 50%;
  background-repeat: no-repeat;
  background-position: right top, left bottom;
}


.mobile-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 80px;
  padding: 8px 0;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mobile-widget,
.mobile-widget i,
.mobile-widget span {
  color: #5b6b79 !important;
  transition: all 0.3s ease;
}

.mobile-widget:hover,
.mobile-widget:hover i,
.mobile-widget:hover span {
  color: var(--bs-primary) !important;
}

.mobile-widget i {
  font-size: 15px;
  margin-bottom: 5px;
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
}

.plus-btn {
  margin-top: -35px;
}

.plus-btn i {
  width: 60px;
  height: 60px;
  line-height: 42px;
  border-radius: 50%;
  margin-bottom: 0;
  text-align: center;
  color: var(--bs-white);
  background-color: var(--bs-dark);
  border: 8px solid var(--bs-white);
}

[data-pc-theme=dark] .plus-btn i {
  background-color: var(--bs-primary);
  border: 8px solid var(--bs-white);
}

[data-pc-theme=dark] .mobile-group {
  background-color: rgba(38, 50, 64, 0.55);
  color: var(--pc-sidebar-color);
}

[data-pc-theme=dark] .mobile-widget,
[data-pc-theme=dark] .mobile-widget i,
[data-pc-theme=dark] .mobile-widget span {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-pc-theme=dark] .mobile-widget:hover,
[data-pc-theme=dark] .mobile-widget:hover i,
[data-pc-theme=dark] .mobile-widget:hover span {
  color: var(--bs-primary) !important;
}

@media (max-width: 991.98px) {
  .pc-container {
      padding-bottom: 90px;
  }
}

.modal.fade .modal-scale {
transition: transform 0.3s ease-out;
transform: scale(0.9);
}

.modal.show .modal-scale {
  transform: scale(1);
}

.list-contacts {
    display: block;
    position: fixed;
    overflow: hidden;
    right: 5px;
    bottom: 80px;
    z-index: 1030;
    transition: all 0.15s ease-in-out;
}

.list-contacts > .contact-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 1px 4px rgba(80, 86, 175, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 5px;
    cursor: pointer;
}

.list-contacts > .contact-item > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.list-contacts > .contact-item:hover {
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.526);
}