@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Poppins, sans-serif;
}

ul.menu-nav li a img,
ul.menu-nav li a i {
    margin: 0px 10px 0px 0px;
    width: 20px;
    mix-blend-mode: inherit;
}

.my_height .h-100 {
    height: 98% !important;
}

.brand .brand-logo img {
    width: 20%;
    margin: 20px auto;
}

.active_btn {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 30px;
}

.active_btn a {
    background-color: #101d49;
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 18px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid #101d49;
    transition: all 0.5s ease 0s;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
}

.active_btn a:hover {
    background: transparent;
    color: #101d49;
}

.main_card {
    background: rgb(255, 255, 255);
    padding: 20px 20px 0px;
    border-radius: 10px;
    display: flex;
    flex-flow: column;
    min-height: 367px;
    justify-content: center;
}

.first_card h3 {
    font-size: 35px;
    font-weight: 600;
    color: #101d49;
    margin-bottom: 50px;
}

.first_card span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgb(157, 160, 166);
}

.first_card strong span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgb(157, 160, 166);
    text-align: right;
    line-height: 4px;
    padding-right: 15px;
}

.first_card strong {
    font-size: 35px;
    font-weight: bold;
    color: #101d49;
}

.first_card strong span i {
    font-size: 13px;
    color: rgb(250, 78, 78);
}

.apexcharts-toolbar {
    display: none !important;
}

.card_my {
    background: url("../media/bg/arrow_bg-green.png") 100% 100% / 44% no-repeat rgb(255, 255, 255);
    width: 100%;
}

.apexcharts-legend.apexcharts-align-center.position-bottom {
    display: none;
}

.main_drop {
    padding: 30px 0px;
}

.main_select select {
    width: 100%;
    height: 45px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 0px 20px;
    transition: all 0.5s ease 0s;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    color: rgb(120, 120, 120);
    font-weight: 500;
}

.main_select a,
.main_select input {
    background: #101d49;
    color: rgb(255, 255, 255) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    border-radius: 10px;
    border: 2px solid #101d49;
    transition: all 0.5s ease 0s;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.main_select a:hover,
.main_select a:focus,
.main_select input:hover,
.main_select input:focus {
    background: transparent;
    color: #101d49 !important;
}

.main_select input {
    width: 100%;
    height: 45px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 0px 20px;
    transition: all 0.5s ease 0s;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    color: rgb(120, 120, 120);
    font-weight: 500;
}

.main_box {
    background: rgb(255, 255, 255);
    text-align: center;
    padding: 20px 0px 10px;
    border-radius: 20px;
    margin: 0px 0px 50px;
}

.main_box h3 {
    color: rgb(253, 197, 20);
    font-size: 24px;
    font-weight: 600;
    line-height: 31px;
    width: 70%;
    margin: 0px auto 20px;
    min-height: 70px;
    text-align: center;
    display: table;
    text-transform: uppercase;
}

.bg_color {
    background: rgb(248, 248, 248);
    padding: 10px 0px;
    width: 85%;
    margin: 0px auto 20px;
    min-height: 208px;
    border-radius: 10px;
}

.bg_color span {
    display: block;
    font-size: 25px;
    font-weight: 600;
    color: rgb(157, 160, 166);
}

.bg_color strong {
    color: rgb(253, 197, 20);
    font-size: 58px;
    font-weight: 600;
    line-height: 55px;
    text-decoration: underline;
    position: relative;
    top: 40px;
}

.new_color h3 {
    color: rgb(129, 167, 69);
}

.new_color1 h3 {
    color: rgb(250, 78, 78);
}

.new_color2 h3 {
    color: rgb(239, 126, 249);
    width: 90%;
}

.new_color3 h3 {
    color: rgb(0, 0, 0);
    width: 90%;
}

.paid strong {
    font-size: 35px;
    color: rgb(129, 167, 69);
}

.unpaid span {
    font-size: 22px;
}

.unpaid strong {
    font-size: 35px;
    color: rgb(250, 78, 78);
}

.gross h3 {
    color: rgb(253, 197, 20);
    font-size: 28px;
    font-weight: 600;
    width: 90%;
    margin: 0px auto;
    text-transform: uppercase;
    text-align: left;
}

.paid_bg {
    background: rgb(248, 248, 248);
    padding: 10px 0px;
    width: 85%;
    margin: 0px auto 20px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    border-radius: 10px;
}

.paid_bg span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: rgb(157, 160, 166);
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 10px;
}

.paid_bg {
    background: rgb(248, 248, 248);
    padding: 10px 0px;
    width: 85%;
    margin: 0px auto 20px;
    display: inline-block;
    border-radius: 10px;
}

.paid_bg span {
    font-size: 15px;
    font-weight: 600;
    color: rgb(157, 160, 166);
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 10px;
}

.paid_bg strong {
    color: rgb(69, 164, 251);
    font-size: 22px;
    font-weight: 600;
    width: 50%;
    float: right;
    text-align: right;
    padding-right: 20px;
}

.refund h3 {
    color: rgb(250, 78, 78);
}

.refund strong {
    color: rgb(250, 78, 78);
}

.net h3 {
    color: rgb(83, 191, 214);
}

.net strong {
    color: rgb(83, 191, 214);
}

.chart_card {
    background: rgb(255, 255, 255);
    padding: 20px 15px 30px;
    border-radius: 10px;
    justify-content: center;
    display: block;
    width: 100%;
}

div#kt_stats_widget_11_chart {
    height: 410px;
}

.field {
    padding: 20px 0px 0px;
}

.logo-div img {
    width: 50%;
}

.login-sec {
    padding: 100px 0px;
    /* background: url("../media/bg/backscreen.png") center center / cover no-repeat; */

    display: flex;
    align-items: center;
    height: 100%;
}

.logo-div h2 {
    color: rgba(0, 0, 0, 0.53);
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 20px;
}

.logo-div h2 span {
    color: #101d49;
    font-weight: bold;
}

.logo-div h4 {
    color: rgb(70, 70, 70);
    font-size: 22px;
    font-weight: 400;
}

.main-div {
    background: rgb(243, 246, 249);
    width: 50%;
    margin: 0px auto;
    padding: 45px;
    border-radius: 50px;
}

.formSec label {
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.formSec input {
    height: 55px;
    background: rgb(229, 241, 243);
    border-radius: 11px;
    color: rgb(120, 120, 120);
    font-size: 16px;
    width: 100%;
    padding: 0px 20px;
    border: 2px solid rgb(229, 241, 243);
}

.formSec input::placeholder {
    color: rgb(120, 120, 120);
    font-size: 16px;
    font-weight: 500;
}

.formSec input[type="submit"] {
    background: #101d49;
    color: rgb(255, 255, 255);
    width: 100%;
    height: 55px;
    border: 2px solid transparent;
    transition: all 0.4s ease 0s;
    margin-bottom: 0px;
}

.formSec input[type="submit"]:hover {
    border: 2px solid #101d49;
    color: #101d49;
    background: transparent;
}

.formSec .forg-pass a {
    color: rgb(70, 70, 70);
    font-weight: 500;
    font-size: 16px;
    text-decoration: underline;
    text-align: right;
    width: 100%;
    display: block;
}

.brand-toggle {
    background: #ffffff;
    transform: translateX(50px);
    border-radius: 4px;
}

.brand-toggle.active {
    display: block;
    transform: translateX(0px);
}

.page_heading {
    display: flex;
    align-items: center;
}

.page_heading h3 {
    color: #101d49;
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0px;
}

.table_input {
    padding: 20px 0px 50px;
}

.main_select {
    border-radius: 10px;
}

.table.table-head-custom thead tr,
.table.table-head-custom thead th {
    font-weight: bold;
    color: rgb(120, 120, 120);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-align: center;
}

thead.table_head {
    background: rgb(234, 234, 234);
}

.main_table th.n {
    color: rgb(120, 120, 120) !important;
}

.main_table th.email {
    color: rgb(226, 186, 81) !important;
}

.main_table th.amount {
    color: rgb(116, 206, 73) !important;
}

.main_table th.bran {
    color: rgb(54, 127, 252) !important;
}

.main_table td button.succes:hover {
    background: transparent;
    color: rgb(115, 204, 72);
}

.main_table td button.succes {
    background: rgb(115, 204, 72);
    border: 2px solid rgb(115, 204, 72);
    color: rgb(255, 255, 255);
    width: 100%;
    height: 35px;
    border-radius: 7px;
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 500;
    transition: all 0.5s ease 0s;
}

.main_table tr td:first-child {
    text-align: center;
    font-weight: 600;
}

.text-dark-75 {
    font-weight: 500;
    color: rgb(120, 120, 120) !important;
}

.main_table td button.manual {
    background: rgb(22, 162, 185);
    border: 1px solid rgb(22, 162, 185);
    color: rgb(255, 255, 255);
    width: 30%;
    height: 35px;
    border-radius: 7px;
    font-size: 13px;
    text-transform: capitalize;
    font-weight: 500;
    transition: all 0.5s ease 0s;
}

.main_table td button.manual:hover {
    background: transparent;
    color: rgb(22, 162, 185);
}

.main_table td button.refund {
    background: rgb(72, 88, 138);
    border: 1px solid rgb(72, 88, 138);
    color: rgb(255, 255, 255);
    width: 30%;
    height: 35px;
    border-radius: 7px;
    font-size: 13px;
    text-transform: capitalize;
    font-weight: 500;
    transition: all 0.5s ease 0s;
}

.main_table td button.refund:hover {
    background: transparent;
    color: rgb(72, 88, 138);
}

.main_table .svg-icon.svg-icon-primary svg g [fill] {
    transition: fill 0.3s ease 0s;
    fill: rgb(255, 255, 255) !important;
}

.main_table a.edit_icon {
    color: rgb(126, 130, 153);
    background-color: rgb(254, 193, 7);
    border-color: rgb(254, 193, 7);
}

.main_table a.delete {
    color: rgb(255, 15, 0);
    background-color: rgb(255, 15, 0);
    border-color: rgb(255, 15, 0);
}

.popover-body {
    padding: 0px;
}

.main_table td button.pending {
    background: rgb(254, 193, 7);
    border: 1px solid rgb(254, 193, 7);
    color: rgb(255, 255, 255);
    width: 100%;
    height: 35px;
    border-radius: 7px;
    font-size: 13px;
    text-transform: capitalize;
    font-weight: 500;
    transition: all 0.5s ease 0s;
}

.main_table td button.pending:hover {
    background: transparent;
    color: rgb(254, 193, 7);
}

.main_table td button.link {
    background: rgb(0, 122, 255);
    border: 1px solid rgb(0, 122, 255);
    color: rgb(255, 255, 255);
    width: 30%;
    height: 35px;
    border-radius: 7px;
    font-size: 13px;
    text-transform: capitalize;
    font-weight: 500;
    transition: all 0.5s ease 0s;
}

.main_table td button.link:hover {
    background: transparent;
    color: rgb(0, 122, 255);
}

.unit_text h3 {
    color: rgb(0, 0, 0);
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0px;
}

.top_man {
    padding-bottom: 50px;
}

.unit_table .table-bordered td {
    border: 1px solid rgb(235, 237, 243);
    text-align: center;
}

td.unit {
    color: rgb(0, 0, 0) !important;
}

.main_unit_box {
    background: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin-bottom: 40px;
}

.design h2 {
    color: rgb(0, 0, 0);
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0px 0px 20px 35px;
    text-align: left;
}

.paid_bg h5.color_one {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    color: rgb(74, 160, 255);
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 10px;
    margin: 0px;
}

.unit_paid strong {
    color: rgb(120, 120, 120);
    font-size: 18px;
    font-weight: 600;
    width: 50%;
    float: right;
    text-align: right;
    padding-right: 20px;
    text-decoration: underline;
}

h5.two {
    color: rgb(164, 203, 103) !important;
}

h5.three {
    color: rgb(80, 174, 103) !important;
}

h5.four {
    color: rgb(250, 78, 78) !important;
}

strong.paid_color {
    color: rgb(80, 174, 103);
}

.unit_table tr td {
    text-align: center;
}

.payment-form {
    background: rgb(255, 255, 255);
    padding: 40px 30px;
    border-radius: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 95%;
    margin: 0px auto;
}

.payment-form form {
    width: 100%;
}

.pay-field {
    margin: 0px 0px 20px;
    text-align: left;
}

.pay-field label {
    font-size: 16px;
    font-weight: 500;
    color: rgb(120, 120, 120);
    text-transform: uppercase;
    margin: 0px;
}

.pay-field input,
.pay-field textarea,
.pay-field select {
    width: 100%;
    height: 45px;
    background: rgb(242, 242, 242);
    border-radius: 8px;
    padding: 0px 15px;
    border: 1px solid rgb(242, 242, 242);
    font-family: Poppins;
}

.pay-field option,
.pay-field select {
    font-size: 14px;
    font-weight: 500;
    color: rgb(175, 175, 175);
    border-radius: 8px;
    font-family: Poppins;
    font-style: normal;
    line-height: 17px;
}

.pay-field textarea {
    padding: 15px;
    height: 178px;
    resize: none;
}

.pay-field input::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: rgb(175, 175, 175);
    border-radius: 8px;
    font-family: Poppins;
    font-style: normal;
    line-height: 17px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0px;
}

input[type="number"] {}

.pay-btn {
    display: flex;
    -webkit-box-align: center;
    place-content: center flex-end;
    flex-wrap: nowrap;
}

.pay-btn button {
    background-color: #101d49;
    color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 2px solid #101d49;
    transition: all 0.5s ease 0s;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px;
    padding: 13px 30px;
    margin: 120px 0px 0px;
}

.pay-btn button:hover {
    background: transparent;
    color: #101d49;
}

.manual-form {
    background: rgb(255, 255, 255);
    padding: 40px 30px;
    border-radius: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 50%;
    margin: 0px auto;
}

.manual-form form .pay-btn button {
    margin: 0px;
}

.centerCol {
    float: none;
    margin: 0px auto;
}

label.pay-field {
    font-size: 13px;
    font-weight: 600;
    color: rgb(120, 120, 120);
    text-transform: uppercase;
    margin: 0px;
}


.menu-item.menu-item-submenu i {
    color: #656565;
}

.income_statement_card.shadow {
    background: 100% 100% / 44% no-repeat rgb(255, 255, 255);
    border-radius: 10px;
    padding: 20px 30px;
}



span.addedby_is {
    font-size: 10px;
    background-color: #007874;
    color: #fff;
    padding: 1px 3px;
    border-radius: 10px;

}





a.actionsdiva {
    background-color: #fff;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
    padding: 0px 6px;
    border-radius: 6px;
    font-size: 23px;
    color: #000;
    float: left;
    height: 24px;
    line-height: 15px;
}

.actionsdivinner {
    /* display: none; */
    /* position: absolute; */
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 7px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
    /* top: 25px; */
    /* right: 0px; */
}

/*.actionsdivinner a {*/
/*    display: block;*/
/*}*/

.actionstd .dropdown-toggle.btn::after {
    display: none;
}

td.actionstd i.fa-solid.fa-ellipsis-vertical {
    padding: 0;
    font-size: 15px !important;
    color: #000;
    margin: 0 !important;
}

.actionsdiv {
    position: relative;
}

.actionsdiv:hover .actionsdivinner {
    display: block;
}

.actionstd .dropdown.show .actionsdivinner {
    background-color: #101d49;
}

.actionstd .dropdown.show .actionsdivinner i.fa-solid.fa-ellipsis-vertical {
    color: #FFF;
}

.actionstd .dropdown-menu .dropdown-item:hover i {
    color: #fff !important;
}

.actionstd .dropdown-menu .dropdown-item:hover {
    background: linear-gradient(13deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    border-radius: 5px;
}

ul.pagination li a {
    background: #101d49;
    border: none;
}

ul.pagination li a:hover {
    box-shadow: 2px 5px 5px #ddd5d5;
}

.actionstd .dropdown-menu {
    margin: 0;
    padding: 0px 0;
    min-width: 3rem;
    left: auto !important;
    right: 0 !important;
    transform: translate3d(-15px, 35px, 0px) !important;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
}

.actionstd .dropdown-menu a.dropdown-item {
    padding: 17px 20px !important;
    justify-content: center;
}

.tdinvcno {
    display: none;
    position: absolute;
    left: 0px;
    top: -18px;
    background-color: #101d49;
    color: #fff;
    padding: 3px 6px;
    border-radius: 6px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
}


tr.allpayments,
td.tdcustomeremail {
    position: relative;
}

td.tdcustomeremail:hover .tdinvcno {
    display: block;
}

tr.allpayments td.brandtd img.brandlogo {
    max-width: 90px;
    max-height: 42px;
    display: block;
    margin: auto;
}


td.brandtd span.brandnmspn {
    display: none;
    position: absolute;
}


td.brandtd:hover span.brandnmspn {
    display: block;
    top: -18px;
    background-color: #101d49;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
}

td.brandtd {
    position: relative;
}

tr.allpayments td.merchdt img.merchicon {
    width: 36px;
}

tr.allpayments td.merchdt span.merchspec {
    position: absolute;
    left: 19%;
    bottom: -2px;
    background-color: #007875;
    color: #fff;
    padding: 0px 3px;
    border-radius: 12px;
    font-weight: 500;
}

tr.allpayments td.merchdt {
    position: relative;
    text-align: center;
}

span.merch_statement_descriptor {
    display: none;
}

tr.allpayments td.merchdt:hover span.merch_statement_descriptor {
    display: block;
}

tr.allpayments td.merchdt span.merch_statement_descriptor {
    text-align: center;
    position: absolute;
    top: 0px;
    width: 150px;
    left: -20px;
    background-color: #101d49;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
    padding: 2px 0px;
    border-radius: 5px;
    color: #fff;
}

tr.allpayments td.brandtd:hover {
    background-color: #101d49;
}

/*.actionsdivinner a:hover, .actionsdivinner i:hover {*/
/*    background: rgb(168 221 219);*/
/*    padding: 2px;*/
/*    text-align: center;*/
/*}*/


.filter-select .dropdown {
    position: relative;
    display: inline-block;
}

.filter-select .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 12px;
    z-index: 1;
}

.filter-select .dropdown:hover .dropdown-content {
    display: block;
}