:root, [data-theme=light] {
    --kt-primary: #004645;
    --kt-menu-link-bg-color-here: rgba(139, 216, 189, 0.25);
    --primary-color: #004645;
    --dark-color: #0D1C2B;
    --costum-border-color: #d2d2d3;
    --yellow-bg :#FFFAE7;
    --cyan-bg: #F1FAFF;
    --pink-bg: #FFF5F8;
    --light-green-bg: #E8FFF3;
    --pricing-bg: #20F2B6;
    --white-bg: #ffffff;
    --bs-engage-btn-box-shadow: 0px 0px 22px #E0E0E0;
}

[data-theme=dark] {
    --primary-color: #FFFFFF; 
    --dark-color: #ffffff;
    --costum-border-color: #515151;
    --yellow-bg :#151521;
    --cyan-bg: #151521;
    --pink-bg: #151521;
    --light-green-bg: #151521;
    --pricing-bg: #151521;
    --white-bg: #1e1e2d;
    --bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
}

html:not([data-theme=dark]) {
    --kt-header-bg-color: #004645;
}

body::-webkit-scrollbar {
    width: 5px;
}
body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background: gray;
}

.bg-logo {
    background-image: url(/assets/images/bg-logo.png);
    background-size: auto;
    background-position: top right;
    background-repeat: no-repeat no-repeat;
}

input, textarea, select {
    border: 1px solid #24366545 !important;
}

.menu-state-primary .menu-item.here>.menu-link .menu-title {
    color: var(--primary-color);
}

.menu-title-gray-700 .menu-item .menu-link .menu-title, .menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: var(--primary-color);
}

.menu-item {
    margin-right: 5px;
}

.menu-link {
    transition: all .2s ease-in-out !important;
}

.menu-link:hover {
    background-color: var(--kt-menu-link-bg-color-here);
}

.menu-item .menu-link .menu-arrow {
    width: 12px;
    height: 12px;
}

.menu-sub .menu-item {
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    transition: all .2s ease-in-out;
}

.menu-sub .menu-item:hover, .menu-sub .menu-item.active{
    background-color: var(--kt-menu-link-bg-color-here);
}

.menu-sub .menu-item .menu-link:hover, .theme-mode-menu .menu-item:hover {
    background: none;
}

.user-menu .menu-item:hover {
    background-color: transparent;
}

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

.green-color {
    color: #0B6545;;
}

.green-bg {
    background-color: #004645;
}

.ligh-green-color {
    color: #50C878;
}

.ligh-green-bg {
    background: #50C878;
}

.yellow-card {
    background-color: var(--yellow-bg);
}

.yellow-card p {
    color: #FFC700;
}

.cyan-card {
    background-color: var(--cyan-bg);
}

.cyan-card p {
    color: #009EF7;
}

.pink-card {
    background-color: var(--pink-bg);
}

.pink-card p {
    color: #F1416C
}

.light-green-card {
    background-color: var(--light-green-bg);
}

.light-green-card p {
    color: #3CA26A;
}

.form-switch.form-check-solid .form-check-input {
    width: 42px;
    height: 22px;
}

.form-check-custom.form-check-solid .form-check-input:checked {
    background-color: #50C878;
}

.yellow-color {
    color: #FEB700;
}

.yellow-bg {
    background-color: #FEB700;
}

.btn-yellow {
    background-color: #efb104;
    color: #ffffff;
    transition: all .2 ease-in-out;
}

.btn-yellow:hover {
    background-color: #efb104;
    color: #ffffff;
    box-shadow: 0 .5rem 1.5rem .5rem rgba(0,0,0,.075) !important;
}

.btn-cyan {
    background-color: #3cb9ff;
    color: #ffffff;
    transition: all .2 ease-in-out;
}

.btn-cyan:hover {
    background-color: #3cb9ff;
    color: #ffffff;
    box-shadow: 0 .5rem 1.5rem .5rem rgba(0,0,0,.075) !important;
}

.red-color {
    color: #F05050;
}

.w-fit {
    width: fit-content;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.blue-btn {
    border: 0;
    padding: 14px 24px;
    box-shadow: none;
    color: var(--kt-primary-inverse);
    background-color: #004645;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s ease-in-out;
}

.blue-btn:hover {
    background-color: #243665;
    color: var(--kt-primary-inverse);
}

.blue-btn.paypal {
    background-color: #3B7BBF;
}

.blue-btn.paypal:hover {
    background-color: #243665;
}

.blue-btn.bitcoin {
    background-color: #53AE94;
}

.blue-btn.bitcoin:hover {
    background-color: #f2a900;
}

.bg-light {
    background: #F9F9F9;
}

.bg-light-blue {
    background: #D2EEE8;
}

.bg-light-gray {
    background-color: rgba(255, 255, 255, 0.1);
}

.circular-chart {
    display: block;
    max-height: 250px;
  }
  
.circle {
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.cup-img {
    width: fit-content;
    position: absolute;
    top: 45px;
    left: 45px;
}

.custom-input, .custom-input:focus {
    height: 45px;
    background: #F9F9F9;
    border-radius: 5px;
    border: none;
}

.custom-textarea, .custom-textarea:focus {
    background: #F9F9F9;
    border-radius: 5px;
    border: none;
    padding: 14px 20px !important;
    height: 150px;
}

.custom-badge {
    border-radius: 5px; 
    padding: 8px;
    font-size: 14px;
    white-space: nowrap;
}

.custom-badge.red {
    color: #FFFFFF;
    background: #F05050;
}

.alert-badge {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 8px 13px 8px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-avatar {
    background: #FFFFFF; 
    border: 2px solid #FEB700;
    width: 32px;
    height: 32px;
    font-size: 14px;
    color: #FEB700;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.v-align-m {
    vertical-align: middle
}

.files-tree {
    border: 1px solid #8080802e;
    border-radius: 5px;
    padding: 15px 20px;
    max-height: 300px;
    min-height: 300px;
    overflow-y: scroll;
}

.files-tree ul li {
    margin-bottom: 15px;
}

.files-tree::-webkit-scrollbar {
    width: 5px;
}
.files-tree::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.files-tree::-webkit-scrollbar-thumb {
background: gray;
}

.icon-absolute {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 45px;
}

.uploadFile .custom-file-upload {
    align-items: center;
    border-radius: 5px;
    background: #004645;
    cursor: pointer;
    display: inline-block;
    display: flex;
    flex-direction: column;
    height: 70px;
    justify-content: center;
    padding: 10px 20px;
    width: 70px;
    transition: all .2s ease-in-out;
}

.uploadFile .custom-file-upload:hover {
  box-shadow: 0 .5rem 1.5rem .5rem rgba(0,0,0,.075)!important;
}

.uploadFile input[type=file] {
    display: none;
}

.shorten-link {
    max-width: 330px;
    display: block;
}

.shorten-link p {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 330px;
    white-space: nowrap;
}

.files-tree label.form-check-label {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
    white-space: nowrap;
}

.account-tabs {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #A1A5B7 !important;
    border-color: transparent !important;
    padding-bottom: 10px;
    margin-right: 40px;
    border-radius: 0px !important;
}

.account-tabs:hover {
    border-color: transparent !important;
}

.account-tabs.active {
    color: var(--dark-color) !important;
    border-bottom: 5px solid #50C878 !important;
}

.light-hr {
    border-color: var(--costum-border-color);
    opacity: 1;
    margin: 20px 0px;
}

.w-15 {
    width: 15%;
}

.w-lg-20 {
    width: 20%;
}

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

.black-color {
    color: #0D1C2B;
}

.white-space-nowrap {
    white-space: nowrap;
}

.pricing-tabs-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(139, 216, 189, 0.25);
    border-radius: 5px;
    width: fit-content;
    padding: 5px;
    margin: 20px auto;
    background-color: var(--kt-card-bg);
}

.pricing-tabs-wrapper a {
    padding: 14px 24px;
    font-weight: 500;
    font-size: 16px;
    color: var(--primary-color);
    border-radius: 5px;
    transition: all .3s ease-in-out;
}

.pricing-tabs-wrapper a.active {
    color: var(--primary-color);
    background: rgba(139, 216, 189, 0.25);;
}

.sms-pricing-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0px;
}

.sms-pricing-tabs-wrapper a {
    color: var(--primary-color);
    font-size: 18px;
    width: 100%;
    background-color: rgba(80, 200, 120, 0.1);
    text-align: center;
    font-weight: 600;
    margin: 0 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 5px;
    border-bottom: 5px solid transparent;
    background-repeat: no-repeat;
    transition: all .3s ease-in-out;
}

.sms-pricing-tabs-wrapper a#basic-pricing {
    background-position: -8px;
}

.sms-pricing-tabs-wrapper a#super-pricing {
    background-position: -9px -1px;
}

.sms-pricing-tabs-wrapper a#pwoer-pricing {
    background-position: 4px;
}

.sms-pricing-tabs-wrapper a.active, .sms-pricing-tabs-wrapper a:hover {
    background-color: #50C878;
}

.sms-pricing-tabs-wrapper a#basic-pricing.active, .sms-pricing-tabs-wrapper a#basic-pricing:hover {
    background-image: url(/assets/images/basic-icon-1.png);
  
}

.sms-pricing-tabs-wrapper a#super-pricing.active, .sms-pricing-tabs-wrapper a#super-pricing:hover {
    background-image: url(/assets/images/super-icon-1.png);
}

.sms-pricing-tabs-wrapper a#pwoer-pricing.active, .sms-pricing-tabs-wrapper a#pwoer-pricing:hover {
    background-image: url(/assets/images/power-icon-1.png);
}

.pricing-card {
    background: var(--kt-card-bg);
    border: 1px solid #8BD8BD;
    border-radius: 10px;
}

.blue-border {
    border: 1px solid #d2eee8;
}

.pricing-card .bg {
    text-align: center;
    background: var(--pricing-bg);
    padding: 25px;
    border-radius: 10px 0px 0px 10px;
}

.developer-wrapper {
    display: flex;
    height: 100%;
}

.developer-wrapper .left-side  {
    border-right: 1px solid var(--costum-border-color);
    position: fixed;
    left: 0px;
    background: var(--kt-card-bg);
    bottom: 0px;
    top: 145px;
    min-width: calc(100vw - 85%);
}

.developer-wrapper .right-side {
    border-left: 1px solid var(--costum-border-color);
    position: fixed;
    right: 0px;
    top: 145px;
    background: var(--kt-card-bg);
    bottom: 0px;
    min-width: calc(100vw - 78%);
}

.developer-wrapper .center {
    margin: 0 auto;
    max-width: calc(100vw - 30%);
    padding-right: 135px !important;
}

.left-side-wrapper a {
    display: block;
    font-size: 16px;
    color: var(--dark-color);
    font-weight: 500;
    padding-left: 10px;
    margin-bottom: 20px;
    padding-right: 10px;
    border-right: 3px solid transparent;
    transition: all .2s ease-in-out;
}

.left-side-wrapper a:hover {
    color: var(--dark-color);
}

.left-side-wrapper a.active {
    color: var(--dark-color);
    border-right: 3px solid var(--dark-color);
}

.right-side-wrapper a {
    display: block;
    font-size: 16px;
    color: #7e8299;
    padding-left: 10px;
    margin-bottom: 15px;
    padding-right: 10px;
    border-left: 3px solid transparent;
    transition: all .2s ease-in-out;
}

.right-side-wrapper a:hover {
    color: var(--dark-color);
}

.right-side-wrapper a.active {
    color: var(--dark-color);
    border-left: 3px solid var(--dark-color);
}

.float-support {
    position: fixed;
    padding: 7px;
    background: var(--kt-card-bg);
    border-radius: 5px;
    right: -102px;
    top: 215px;
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
}

.float-support .text {
    font-size: 16px;
    font-weight: 500;
    writing-mode: vertical-lr;
    margin-right: 7px;
}

.float-support:hover {
    right: 5px;
}

.float-support:hover .text {
    opacity: 0;
}

.float-validity {
    position: fixed;
    padding: 7px;
    background: var(--kt-card-bg);
    border-radius: 5px;
    right: -148px;
    top: 330px;
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
}

.float-validity .text {
    font-size: 16px;
    font-weight: 500;
    writing-mode: vertical-lr;
    margin-right: 7px;
}

.float-validity:hover {
    right: 5px;
}

.float-validity:hover .text {
    opacity: 0;
}

.float-payment {
    position: fixed;
    padding: 7px;
    background: var(--kt-card-bg);
    border-radius: 5px;
    top: 445px;
    right: -183px;;
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
}

.float-payment .text {
    font-size: 16px;
    font-weight: 500;
    writing-mode: vertical-lr;
    margin-right: 7px;
}

.float-payment:hover {
    right: 5px;
}

.float-payment:hover .text {
    opacity: 0;
}

.nav-codes {
    border: none !important;
    background-color: #e5e5e5;
    border-radius: 5px;
    padding: 4px;
    width: fit-content;
}

.nav-codes .nav-link {
    border-radius: 5px;
    padding: 5px !important;
    font-weight: 600;
    margin-left: 0px !important;
}

.nav-codes .nav-link:hover {
    border-bottom: none !important;
}

.nav-codes .nav-link span {
    color: #999;
}

.nav-codes .nav-link.active {
    border-bottom: none !important;
    background: var(--kt-card-bg) !important;
}

.nav-codes .nav-link.active span {
    color: var(--dark-color) !important;
}

.mt-minus-55 {
    margin-top: -55px;
}

.auth-bg-color {
    background: #EEFFF2;
}

.bg-auth-form {
    background: #ffffff;
}

.loading-dot{
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    margin-bottom: 7px;
  }
  .loading-dot1{
    background-color: #ffffff;
    animation: jump-up 0.6s 0.1s linear infinite;
  }
  .loading-dot2{
    background-color: #ffffff;
    animation: jump-up 0.6s 0.2s linear infinite;
  }
  .loading-dot3{
    background-color: #ffffff;
    animation: jump-up 0.6s 0.3s linear infinite;
  }
  @keyframes jump-up{
    50%{
      transform: translate(0,15px);
    }
  }

  .app-engage {
    position: fixed;
    right: 0;
    top: 30%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: end;
    z-index: 5;
    padding-right: 12px;
}

  .app-engage .app-engage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: var(--bs-engage-btn-box-shadow);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    border-radius: 6px;
    width: 55px;
    height: 70px;
    color: var(--primary-color);
    background-color: var(--white-bg);
}

.route-type {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 7.5px 13px 7.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    margin-bottom: 10px;
    margin-left: 10px;
}

.flatpickr-time input.flatpickr-hour, .flatpickr-time input.flatpickr-minute {
    border: none !important;
}

.bulk-stepper .stepper-item .stepper-icon {
    border-radius: 50px !important;
}

.tooltip-inner {
    background-color: var(--white-bg) !important;
    color: var(--dark-color) !important;
    border: 2px solid #50C878;
}

[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #50C878 !important;
}

[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #50C878 !important;
}

[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #50C878 !important;
}

[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #50C878 !important;
}

@media(max-width: 1300px) {
    .developer-wrapper .right-side {
        min-width: calc(100vw - 85%);
        max-width: 285px;
    }
}

@media(max-width: 1200px) {
    .developer-wrapper .center {
        max-width: calc(100vw - 35%);
    }
}

@media(max-width: 991px){
    .w-lg-20 {
        width: 100%;
    }
    .developer-wrapper .right-side {
        display: none;
    }
    .developer-wrapper .center {
        margin-right: 0px;
        max-width: calc(100vw - 22%);
        padding-right: 30px !important;
    }
    .developer-wrapper .left-side {
        top: 55px;
    }
    .auth-bg-color {
        background: #004645;
    }
    .bg-auth-form {
        background: #EEFFF2;
        height: 100%;
    }
}

@media(max-width: 768px) {
    .developer-wrapper {
        flex-direction: column;
    }
    .developer-wrapper .left-side {
        position: unset;
    }
    .developer-wrapper .center {
        max-width: 100%;
        padding-right: 20px !important;
    }
    .pricing-card .fs-40 {
        font-size: 20px;
    }
    .pricing-card .fs-18 {
        font-size: 15px;
    }
    .pricing-card .fs-16 {
        font-size: 11px !important;
    }

    .sms-pricing-tabs-wrapper a {
        min-width: 99px;
        min-height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sms-pricing-tabs-wrapper a#basic-pricing {
        background-position: 2px 2px;
        background-size: 25%;
    }

    .sms-pricing-tabs-wrapper a#super-pricing {
        background-position: 4px 0px;
        background-size: 25%;
    }

    .sms-pricing-tabs-wrapper a#pwoer-pricing {
        background-position: 0px 4px;
        background-size: 25%;
    }
}

@media(max-width: 361px) {
    .sms-pricing-tabs-wrapper a {
        margin: 0px 1px;
    }
}