G.blank_layout {
    background-repeat: no-repeat;
    background-color: #ebebed;
    background-size: initial;
    background-image: url(../img/mainbg.jpg);
    background-size: cover;
}

body {
    background-image: linear-gradient(45deg, #ffffff80 50%, #3f51b500 50%)!important;
    background-size: 10px 10px!important;
}

body.blank_layout::before {
    display: none;
    width: 100px;
    height: 64px;
    position: absolute;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='148px' height='148px' viewBox='0 0 148 148' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M355,144 C356.104569,144 357,144.895431 357,146 C357,147.104569 356.104569,148 355,148 C353.895431,148 353,147.104569 353,146 C353,144.895431 353.895431,144 355,144 Z M382,144 C383.104569,144 384,144.895431 384,146 C384,147.104569 383.104569,148 382,148 C380.895431,148 380,147.104569 380,146 C380,144.895431 380.895431,144 382,144 Z M412,144 C413.104569,144 414,144.895431 414,146 C414,147.104569 413.104569,148 412,148 C410.895431,148 410,147.104569 410,146 C410,144.895431 410.895431,144 412,144 Z M442,144 C443.104569,144 444,144.895431 444,146 C444,147.104569 443.104569,148 442,148 C440.895431,148 440,147.104569 440,146 C440,144.895431 440.895431,144 442,144 Z M472,144 C473.104569,144 474,144.895431 474,146 C474,147.104569 473.104569,148 472,148 C470.895431,148 470,147.104569 470,146 C470,144.895431 470.895431,144 472,144 Z M499,144 C500.104569,144 501,144.895431 501,146 C501,147.104569 500.104569,148 499,148 C497.895431,148 497,147.104569 497,146 C497,144.895431 497.895431,144 499,144 Z M355,117 C356.104569,117 357,117.895431 357,119 C357,120.104569 356.104569,121 355,121 C353.895431,121 353,120.104569 353,119 C353,117.895431 353.895431,117 355,117 Z M382,117 C383.104569,117 384,117.895431 384,119 C384,120.104569 383.104569,121 382,121 C380.895431,121 380,120.104569 380,119 C380,117.895431 380.895431,117 382,117 Z M412,117 C413.104569,117 414,117.895431 414,119 C414,120.104569 413.104569,121 412,121 C410.895431,121 410,120.104569 410,119 C410,117.895431 410.895431,117 412,117 Z M442,117 C443.104569,117 444,117.895431 444,119 C444,120.104569 443.104569,121 442,121 C440.895431,121 440,120.104569 440,119 C440,117.895431 440.895431,117 442,117 Z M472,117 C473.104569,117 474,117.895431 474,119 C474,120.104569 473.104569,121 472,121 C470.895431,121 470,120.104569 470,119 C470,117.895431 470.895431,117 472,117 Z M499,117 C500.104569,117 501,117.895431 501,119 C501,120.104569 500.104569,121 499,121 C497.895431,121 497,120.104569 497,119 C497,117.895431 497.895431,117 499,117 Z M355,87 C356.104569,87 357,87.8954305 357,89 C357,90.1045695 356.104569,91 355,91 C353.895431,91 353,90.1045695 353,89 C353,87.8954305 353.895431,87 355,87 Z M382,87 C383.104569,87 384,87.8954305 384,89 C384,90.1045695 383.104569,91 382,91 C380.895431,91 380,90.1045695 380,89 C380,87.8954305 380.895431,87 382,87 Z M412,87 C413.104569,87 414,87.8954305 414,89 C414,90.1045695 413.104569,91 412,91 C410.895431,91 410,90.1045695 410,89 C410,87.8954305 410.895431,87 412,87 Z M442,87 C443.104569,87 444,87.8954305 444,89 C444,90.1045695 443.104569,91 442,91 C440.895431,91 440,90.1045695 440,89 C440,87.8954305 440.895431,87 442,87 Z M472,87 C473.104569,87 474,87.8954305 474,89 C474,90.1045695 473.104569,91 472,91 C470.895431,91 470,90.1045695 470,89 C470,87.8954305 470.895431,87 472,87 Z M499,87 C500.104569,87 501,87.8954305 501,89 C501,90.1045695 500.104569,91 499,91 C497.895431,91 497,90.1045695 497,89 C497,87.8954305 497.895431,87 499,87 Z M355,57 C356.104569,57 357,57.8954305 357,59 C357,60.1045695 356.104569,61 355,61 C353.895431,61 353,60.1045695 353,59 C353,57.8954305 353.895431,57 355,57 Z M472,57 C473.104569,57 474,57.8954305 474,59 C474,60.1045695 473.104569,61 472,61 C470.895431,61 470,60.1045695 470,59 C470,57.8954305 470.895431,57 472,57 Z M412,57 C413.104569,57 414,57.8954305 414,59 C414,60.1045695 413.104569,61 412,61 C410.895431,61 410,60.1045695 410,59 C410,57.8954305 410.895431,57 412,57 Z M499,57 C500.104569,57 501,57.8954305 501,59 C501,60.1045695 500.104569,61 499,61 C497.895431,61 497,60.1045695 497,59 C497,57.8954305 497.895431,57 499,57 Z M382,57 C383.104569,57 384,57.8954305 384,59 C384,60.1045695 383.104569,61 382,61 C380.895431,61 380,60.1045695 380,59 C380,57.8954305 380.895431,57 382,57 Z M442,57 C443.104569,57 444,57.8954305 444,59 C444,60.1045695 443.104569,61 442,61 C440.895431,61 440,60.1045695 440,59 C440,57.8954305 440.895431,57 442,57 Z M355,27 C356.104569,27 357,27.8954305 357,29 C357,30.1045695 356.104569,31 355,31 C353.895431,31 353,30.1045695 353,29 C353,27.8954305 353.895431,27 355,27 Z M382,27 C383.104569,27 384,27.8954305 384,29 C384,30.1045695 383.104569,31 382,31 C380.895431,31 380,30.1045695 380,29 C380,27.8954305 380.895431,27 382,27 Z M412,27 C413.104569,27 414,27.8954305 414,29 C414,30.1045695 413.104569,31 412,31 C410.895431,31 410,30.1045695 410,29 C410,27.8954305 410.895431,27 412,27 Z M442,27 C443.104569,27 444,27.8954305 444,29 C444,30.1045695 443.104569,31 442,31 C440.895431,31 440,30.1045695 440,29 C440,27.8954305 440.895431,27 442,27 Z M472,27 C473.104569,27 474,27.8954305 474,29 C474,30.1045695 473.104569,31 472,31 C470.895431,31 470,30.1045695 470,29 C470,27.8954305 470.895431,27 472,27 Z M499,27 C500.104569,27 501,27.8954305 501,29 C501,30.1045695 500.104569,31 499,31 C497.895431,31 497,30.1045695 497,29 C497,27.8954305 497.895431,27 499,27 Z M355,0 C356.104569,0 357,0.8954305 357,2 C357,3.1045695 356.104569,4 355,4 C353.895431,4 353,3.1045695 353,2 C353,0.8954305 353.895431,0 355,0 Z M382,0 C383.104569,0 384,0.8954305 384,2 C384,3.1045695 383.104569,4 382,4 C380.895431,4 380,3.1045695 380,2 C380,0.8954305 380.895431,0 382,0 Z M412,0 C413.104569,0 414,0.8954305 414,2 C414,3.1045695 413.104569,4 412,4 C410.895431,4 410,3.1045695 410,2 C410,0.8954305 410.895431,0 412,0 Z M442,0 C443.104569,0 444,0.8954305 444,2 C444,3.1045695 443.104569,4 442,4 C440.895431,4 440,3.1045695 440,2 C440,0.8954305 440.895431,0 442,0 Z M472,0 C473.104569,0 474,0.8954305 474,2 C474,3.1045695 473.104569,4 472,4 C470.895431,4 470,3.1045695 470,2 C470,0.8954305 470.895431,0 472,0 Z M499,0 C500.104569,0 501,0.8954305 501,2 C501,3.1045695 500.104569,4 499,4 C497.895431,4 497,3.1045695 497,2 C497,0.8954305 497.895431,0 499,0 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='📝-Pages' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Login---V2' transform='translate(-822.000000, -197.000000)'%3E%3Cg id='top-illustration' transform='translate(469.000000, 197.000000)'%3E%3Cuse fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.6' fill='%23FFFFFF' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: cover;
    opacity: 0.5;
}

.menu .app-brand.demo {
    height: 50px;
    margin-top: 12px;
}

.app-brand-logo.demo svg {
    width: 22px;
    height: 38px;
}

.app-brand-text.demo {
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    text-transform: capitalize;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 76px !important;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

.content-wrapper .navbar {
    z-index: auto;
}

.demo-blocks > * {
    display: block !important;
}

.demo-inline-spacing > * {
    margin: 1rem 0.375rem 0px 0px !important;
}

.demo-vertical-spacing > * {
    margin-top: 1rem !important;
    margin-bottom: 0px !important;
}

.demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0px !important;
}

.demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0px !important;
}

.demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0px !important;
}

.demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0px !important;
}

.demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0px !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir="rtl"] .rtl-only {
    display: block !important;
}

.layout-demo-wrapper {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-top: 1rem;
}

.layout-demo-placeholder img {
    width: 900px;
}

.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}

.card .dataTables_info, .card .dataTables_paginate, .card .dt-buttons, .card .dataTables_filter {
    padding: 0px;
}

.card-header small {
    display: inherit;
    font-size: 13px;
}

.card-header {
    line-height: 22px;
}

.menu-vertical .menu-inner > .menu-item .menu-link {
    margin: 0px;
    padding: 9px;
    border-radius: 0px !important;
}

a.menu-link.active {
    font-weight: bold;
    color: rgb(44, 71, 152) !important;
}

table.dataTable {
    border: 1px solid rgb(221, 221, 221) !important;
}

table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid rgb(221, 221, 221) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0px !important;
    background: transparent !important;
    border: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button a {
    margin: 0px;
    padding: 10px !important;
}

.dt-buttons {
    margin-bottom: 15px;
}

.form-control-sm {
    padding: 10px 25px;
}

.table-loanedbooks {
    width: 100%;
    border: 1px solid rgb(221, 221, 221);
    height: 190px;
    overflow: scroll;
}

.table-loanedbooks tr th, .table-loanedbooks tr td {
    border: 1px solid rgb(221, 221, 221);
}

.table-loanedbooks tr td span {
    margin: -1px -11px;
    display: block;
    position: relative;
    vertical-align: top;
}

.table-loanedbooks tr td span input[type="checkbox"] {
    opacity: 0;
    width: 0px;
    height: 0px;
    position: absolute;
}

.table-loanedbooks tr td span input[type="checkbox"]:checked + label {
    background: rgb(139, 195, 74);
    border-color: rgb(199, 199, 199);
    color: rgb(255, 255, 255);
}

.table-loanedbooks tr td label {
    position: relative;
    font-size: 13px;
    border: 1px solid rgb(221, 221, 221);
    padding: 6px 10px;
    border-radius: 0px;
    margin: 0px;
    display: inline-block;
    line-height: 18px;
    width: 100%;
}

.tableFixHead {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.tableFixHead tbody {
    display: block;
    width: 100%;
    overflow: auto;
    height: 200px;
}

.tableFixHead thead tr {
    display: block;
}

.tableFixHead th, .tableFixHead td {
    padding: 5px 10px;
    width: 269px;
    vertical-align: top;
}

th {
    background: rgb(171, 221, 147);
}

.controls {
    position: absolute;
    top: 42%;
    left: 46%;
    width: 28px;
    background: rgb(255, 255, 255);
    border-radius: 3px;
}

.loand_container {
    position: relative;
}

.hide {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

.bs-toast {
    bottom: 80px !important;
    right: 15px !important;
}

.form-label, .col-form-label {
    text-transform: none;
}

#formTransaction label.col-form-label {
    font-size: 14px;
}

.form-control {
    appearance: auto !important;
}

.formtable {
    margin: auto;
    width: 62% !important;
}

table.table.formtable {
    border: none !important;
}

table.table.formtable td {
    padding: 10px 0px 0px;
    border: none !important;
}

table.table.formtable td[colspan="4"] {
    padding: 0px;
    border-bottom: 1px solid rgb(221, 221, 221) !important;
}

td#_BeneficiariesContainer * {
}

td table {
    width: 100%;
}

.currencySelecter {
}

.currencyInput {
    width: 25% !important;
}

.currencyInput, .currencySelecter {
    display: inline-block;
    width: auto;
    padding: 0px 10px;
    height: 40px !important;
}

td.gap {
    padding: 30px 0px 7px !important;
}

.icon_form {
    width: 35px;
    margin: 2px 6px;
}

.titleform {
    background: rgb(225, 239, 239);
    display: inline-block;
    width: 100%;
    margin: 14px 0px -8px;
    padding: 4px 10px;
}

.transferbtn {
    padding: 10px 21px 7px 15px;
    margin: 40px 6px;
    font-size: 16px;
    border-radius: 3px;
    font-weight: bold;
    color: rgb(0, 0, 0) !important;
    background: rgb(245, 245, 249) !important;
    border: 1px solid rgb(238, 238, 238) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px !important;
}

    .transferbtn img {
        width: 30px;
    }

.Intro h2 small {
    display: inherit;
    padding: 0px;
    font-size: 24px;
    font-weight: 400;
}

.Intro {
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
    padding: 25px;
    border-top: 3px solid rgb(104, 114, 250);
}

.Intro h2 {
    font-weight: bold;
    font-size: 42px;
}

.inline-block {
    margin-left: -10px;
    display: inline-block !important;
}

.inline-block {
}

    .inline-block .btn {
        margin: 0px 0px 0px 5px;
    }

.form-floating .form-control:focus ~ .form-label {
    border-color: transparent !important;
}

.form-floating .form-label {
    color: rgb(0, 0, 0) !important;
}

@media screen and (min-width: 560px) and (max-width: 764px) {
    * {
    }

    table.table.formtable {
        margin: 0px auto !important;
        width: 90% !important;
    }

    #navigationlinks {
        display: inline-block;
        margin: 0px !important;
        width: 100% !important;
    }

    #navigationlinks a {
    }
}

@media screen and (min-width: 300px) and (max-width: 559px) {
    * {
    }

    .Intro h2 {
        font-size: 40px;
    }

    #navigationlinks {
        display: inline-block;
        margin: 0px !important;
        width: 100% !important;
    }

    #navigationlinks a {
        margin: 0px !important;
        padding: 19px 7px !important;
    }

    .Intro h2 small {
        font-size: 20px;
    }

    table.table.formtable {
        margin: 0px auto !important;
        width: auto !important;
    }

    table.table.formtable * {
    }

    tr.amountrow td {
        display: inline-block !important;
        width: 100% !important;
    }

    tr.amountrow td input {
        width: 73% !important;
    }

    tr.transactionrow {
    }

    tr.transactionrow td:nth-child(4), tr.transactionrow td:nth-child(2) {
        text-align: right !important;
    }

    tr.transactionrow td {
    }

    tr.transactionrow td {
        width: 50%;
        text-align: left;
        display: inline-block !important;
    }

    table.table.formtable h5 {
        font-size: 14px;
    }

    table.table.formtable tr th {
    }

    table.table.formtable tr td {
        display: block;
        margin: 0px !important;
        padding: 0px !important;
    }

    table.table.formtable tr td label {
    }
}

@media screen and (min-width: 300px) and (max-width: 1200px) {
* {
}

.welcome_user {
    margin: -10px 0px 20px !important;
}

.layout-page {
    height: 94%;
    margin-bottom: 0px !important;
}

ul.bottom-links {
    display: table;
    margin: 0px auto !important;
}

.copyright-box {
    margin: 0px !important;
    padding: 9px 0px 10px !important;
    text-align: center !important;
}

ul.bottom-links li a {
}

.footer-container {
    position: relative !important;
}

.main-navbar > li {
    display: inline-block;
    float: left;
}

.main-navbar {
    display: inherit;
}

#navigationlinks {
    display: inline-block;
    margin: 0px !important;
    width: 100% !important;
}

#navigationlinks a {
    display: inline-block;
    position: relative;
}
}

@media screen and (min-width: 960px) and (max-width: 1200px) {
* {
}

ul.bottom-links li a {
    padding: 10px !important;
}

.formtable {
    width: 80% !important;
}
}

@media screen and (min-width: 764px) and (max-width: 960px) {
* {
}

.formtable {
    width: 90% !important;
}
}

@media screen and (min-width: 100px) and (max-width: 767px) {
* {
}

.dataTables_filter {
    padding: 0px;
    float: right !important;
    margin: 0px 0px 4px !important;
}

.dataTables_filter label {
    display: inherit;
    text-align: left !important;
}

div.dt-buttons {
    display: inline-flex;
    margin: 0px;
    float: left !important;
}

.layout-menu-expanded .app-brand .layout-menu-toggle {
    display: none !important;
}

.authentication-inner.login {
    background: rgb(255, 255, 255);
    padding: 55px 30px;
}

ul.bottom-links li a {
    padding: 10px !important;
}

.footer-container {
    position: relative !important;
}

.main-navbar {
    position: absolute;
    left: 0px;
    top: 100%;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
    display: none;
}

.main-navbar.nav-mobile {
    display: block;
}

.main-navbar > li {
    width: 100%;
    position: relative !important;
}

.main-navbar > li > a {
    width: 100%;
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(221, 221, 221) !important;
}

.main-navbar > li > ul {
    box-shadow: none;
    border-bottom: 1px solid rgb(221, 221, 221);
    position: relative !important;
    width: 100% !important;
    left: 0px !important;
}

.main-navbar > li > a::after {
    right: 20px;
    left: auto;
    position: absolute;
    top: 28px;
}
}

@media screen and (min-width: 200px) and (max-width: 480px) {
* {
}

.intro-box ul li {
    float: none;
    display: inline-flex !important;
}

.container > .row > .col-lg-5 {
    background: rgb(44, 64, 158);
    padding: 15px 20px;
    margin: 0px -19px;
    float: none;
    width: auto;
    max-width: fit-content;
    display: inline;
}

.container > .col-lg-5 {
    background: rgb(221, 221, 221) !important;
}

.intro-box {
    padding: 0px !important;
    margin-top: 40px !important;
}

.intro-box ul li h3 {
    width: 100% !important;
}

.navbar-welcome {
    display: none !important;
}

.transferbtn {
    display: inline-flex;
    margin: 30px 1%;
    width: 47%;
    font-size: 100%;
    padding: 16px 0px 16px 20px;
    line-height: 35px;
}

.transferbtn img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
}
}

.trans_cancel_btn {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgb(227, 172, 6);
}

.field-validation-error {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.form-control[aria-invalid="true"] + .field-validation-error::after {
}

.form-control[aria-invalid="false"] + .field-validation-error {
}

.form-control.form-control.label-masked {
}

.form-control.form-control[aria-invalid="false"], .form-control.valid {
    border-color: rgb(25, 135, 84);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("../img/checked.png");
    background-repeat: no-repeat;
    background-position: right calc(0px + 0.5rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.form-control[aria-invalid="true"], .form-control.input-validation-error {
    border-color: rgb(220, 53, 69);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("../img/warning.png");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.passwodShowBox {
    position: relative;
    display: flex;
}

.passwodShowBox .form-control {
    width: 90%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.passwodShowBox .btn {
    width: 10%;
    margin: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    position: relative;
    padding: 0px;
    border-width: 1px 1px 1px 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-top-color: rgb(217, 222, 227);
    border-right-color: rgb(217, 222, 227);
    border-bottom-color: rgb(217, 222, 227);
    border-image: initial;
    border-left-style: initial;
    border-left-color: initial;
}

.passwodShowBox .btn i {
    position: absolute;
    inset: 0px;
    float: none;
    z-index: 0;
    margin: 10px 0px;
}

.passwodShowBox .btn i::before {
}

.bx-masked {
    position: relative;
}

.bx-masked .form-control {
    position: relative;
    z-index: 0;
    background: transparent;
    font-size: 0px;
    min-height: 39px;
}

.bx-masked .lbl-masked {
    position: absolute;
    padding: 10px 15px;
    font-size: 16px;
    height: 10px;
    z-index: 99;
    background: none !important;
    border: none !important;
}

a.nav-item.nav-link.active {
    border-bottom: 2px solid rgb(0, 0, 0);
    background: rgb(225, 239, 239);
    font-weight: bold;
    color: rgb(0, 0, 0) !important;
}

a.nav-item.nav-link {
    border-bottom: 2px solid transparent;
    padding: 0px 10px !important;
}

.trans_title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px !important;
}

.navbar-welcome {
    display: inline-flex;
    text-align: left;
    line-height: 16px;
    margin-right: 15px;
}

.navbar-welcome span {
    margin-left: 10px;
}

.custom-loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(rgba(0, 0, 0, 0) 10%, rgb(118, 109, 244)) content-box content-box;
    -webkit-mask: repeating-conic-gradient(rgba(0, 0, 0, 0) 0deg, rgb(0, 0, 0) 1deg, rgb(0, 0, 0) 20deg, rgba(0, 0, 0, 0) 21deg, rgba(0, 0, 0, 0) 36deg), radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 9px), rgb(0, 0, 0) calc(100% - 8px));
    -webkit-mask-composite: destination-in;
    animation: 1s steps(10) 0s infinite normal none running s4;
}

@keyframes s4 {
    100% {
        transform: rotate(1turn);
    }
}

.reportContainer {
}

div#spiner {
    margin: 30px auto;
}

.reportBtn {
    margin-top: 30px;
}

.actionbutton {
    float: right;
    display: inline-block !important;
}

.announcement h6 {
    color: rgb(51, 51, 51);
}

.announcement .active h6 {
    color: rgb(255, 255, 255);
}

.announcement {
    font-size: 14px;
    font-family: Roboto;
}

.currencyBox * {
}

.currencyBox select {
    display: inline-block;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    float: left;
    border: none;
    padding: 0px 7px !important;
    background: rgb(255, 255, 255) !important;
}

.currencyBox {
    border: 1px solid rgb(221, 221, 221);
    display: inline-flex;
    border-radius: 7px;
}

.currencyBox input {
    display: inline-block;
    border-radius: 0px;
    float: left;
    border-top: none;
    border-bottom: none;
    border-image: initial;
    border-right: 1px solid rgb(221, 221, 221) !important;
    border-left: 1px solid rgb(221, 221, 221) !important;
}

.currencyBox #StringAmount {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 153px !important;
    border-right: none !important;
}

.currencyBox input#CustomCurrency {
    width: 90px;
    display: none;
    padding: 0px 7px !important;
    background: rgb(255, 255, 255) !important;
}

.confirmationpage {
    text-align: center;
}

.confirmationpage h4 {
    margin-top: 25px;
    font-size: 20px;
}

.confirmationpage p {
    font-size: 14px;
}

.btn_sections_box {
    padding: 30px 0px;
}

.announcement > a {
    font-size: 14px;
    color: rgb(51, 51, 51);
    line-height: 19px;
    transition: all 0.3s ease-in-out 0s;
}

.announcement > a:hover {
    background: rgb(225, 239, 239);
}

.profile_table * {
}

.profile_table {
    border: 1px solid rgb(153, 153, 153);
}

.profile_table td {
    padding: 5px 10px;
    font-size: 14px;
    width: 170px;
    border: 1px solid rgb(153, 153, 153);
}

.profile_table td:first-child {
    font-weight: bold;
    color: rgb(0, 0, 0);
}

.lockaccounttemp * {
    overflow: visible;
}

.lockaccounttemp {
    margin: 45px auto auto;
    display: inline-block;
    background: rgb(255, 255, 255);
    padding: 30px;
    min-width: 450px;
    overflow: visible;
}

.lockaccounttemp .app-brand-logo {
    width: 110px;
    height: 110px;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 150px;
    margin-top: -70px;
    overflow: hidden;
    background: rgb(255, 255, 255);
}

.lockaccounttemp .app-brand {
    display: inline-flex;
    margin-bottom: 25px;
    height: auto !important;
}

.lockaccounttemp .app-brand-logo img {
    padding: 5px;
    width: 100%;
}

.align-content-center {
    text-align: center;
}

.logo-box {
    display: inline-block;
}

.logo-box label {
    font-size: 23px;
    font-family: roboto;
    font-weight: 900;
    color: rgb(196, 166, 40);
}

.logo-box img {
    width: 80px;
    margin-left: 20px;
    height: 55px;
    object-fit: contain;
}

.intro-box {
    margin-top: 95px;
    padding-right: 45px;
}

.intro-box ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    width: 100%;
    display: block;
}

.intro-box ul li {
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.intro-box ul li h3 {
    float: left;
    display: inline-grid;
    width: 80%;
    font-size: 17px;
    color: rgb(255, 255, 255);
    padding-left: 15px;
    padding-top: 7px;
}

.intro-box ul li h3 small {
    font-size: 13px;
    font-weight: 400;
    margin-top: 5px;
}

.intro-box ul li label {
    width: 50px;
    height: 50px;
    float: left;
    text-align: center;
    padding: 11px;
    color: rgb(188, 202, 255);
    border: 1px solid rgb(79, 103, 217);
    border-radius: 100px;
    background: rgb(25, 47, 145);
}

.intro-box ul li label i {
    font-size: 25px;
}

.intro-box h1 {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: bold;
    display: inline-grid;
    margin-bottom: 30px;
}

.intro-box h1 small {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    margin-top: 15px;
}

.header-container {
    margin-top: 15px;
}

.btn-know-more {
    margin-top: 50px;
    color: rgb(238, 238, 238);
    border-color: rgb(82, 110, 211);
    padding: 15px 25px;
    border-radius: 100px;
    background: rgb(24, 51, 142);
}

.footer-container {
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0px;
    /* border-top: 5px solid rgb(96 125 138); */
    padding: 0px 30px;
    z-index: 99999;
    background: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 19%) 0px -20px 13px -20px;
}

ul.bottom-links {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

ul.bottom-links li {
    display: inline-flex;
}

ul.bottom-links li a {
    padding: 25px 28px;
    color: rgb(31, 50, 139);
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease-in-out 0s;
}

ul.bottom-links li a:hover {
    background: rgb(44, 64, 158);
    color: rgb(255, 255, 255);
}

.copyright-box {
    text-align: right;
    padding-right: 30px;
    padding-top: 25px;
    position: relative;
    display: inline-block;
    float: right;
}

.form-password-toggle {
    position: relative;
    color: rgb(0, 0, 0);
}

.form-password-toggle .btn {
    position: absolute;
    right: 13px;
    top: 0px;
    height: 58px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.login .form-password-toggle .btn {
    right: 0;
}

.authentication-inner.login * {
}

.authentication-inner.login h4 {
    font-size: 30px;
    font-weight: 900;
    display: inline-grid;
    margin-bottom: 25px !important;
    text-align: center;
    display: block;
    line-height: 24px;
}

.authentication-inner.login {
    margin-top: 57px;
    background: rgb(255, 255, 255);
    padding: 5px;
    border: 1px solid rgb(238, 238, 238);
}

.authentication-inner.login h4 small {
    font-size: 18px;
    display: inline-block;
    font-weight: 400;
    text-align: left;
    font-style: italic;
    margin-top: 15px;
}

body.autorized * {
}

.layout-container {
    display: inline-block;
}

#layout-menu {
    box-shadow: none;
    background: #eff5fb !important;
}

body.autorized .brand-logo .trans {
    display: none;
}

body.autorized .logo-box label {
    color: rgb(201, 168, 36);
    font-size: 20px;
}

body.autorized .brand-logo .color {
    width: 50px !important;
}

body.autorized img.color {
    display: inherit;
}

body.autorized .header-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 99999;
    background: rgb(255, 255, 255);
    margin: 0px;
    padding: 4px 0px;
    border-bottom: 1px solid rgb(221, 221, 221);
    min-height: 56px;
    box-shadow: rgba(0, 0, 0, 0.45) -2px 9px 20px -20px;
}


button.swal2-confirm.swal2-styled.swal2-default-outline {
    background: #2c4798 !important;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
}

button.swal2-cancel.swal2-styled.swal2-default-outline {
    background: red;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
}



ul.menu-sub {
    list-style: none;
}

.menu-item > ul > li > a {
    padding-left: 17px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.menu-item > ul > li {
    border: none;
}

.menu-item > ul > li > a::before {
    display: none;
}

.menu-vertical .menu-header {
    margin: 0px;
}

li.menu-item {
    border-bottom: 1px solid rgb(238, 238, 238);
    margin: 0px !important;
}

    li.menu-item > a {
        padding: 15px 10px !important;
    }

.authorized-person {
    position: absolute;
    right: 20px;
    top: 0px;
}

.mr-top20{margin-top:50px;}



.layout-page {
    margin-bottom: 77px;
    display: inline-block;
    margin-top: 55px !important;
    width: 100% !important;
}

.welcome_user {
    margin: -23px -26px 30px;
    background: rgb(255, 255, 255);
    padding: 23px;
    text-transform: uppercase;
    font-weight: 900;
}

.togglemenubtn {
    width: 45px;
    display: inline-flex;
    margin: 0px !important;
}

img.color {
    display: none;
}

.showPass {
}

.passshow {
    padding: 0px;
    width: 53px;
}

.passshow i {
    position: relative;
    z-index: 0;
}

.center-logo {
    margin: auto auto 15px;
    display: table;
}

@keyframes scrollY {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translate(-100%);
    }
}

.checkbox-input {
    border: 1px solid rgb(217, 222, 227);
    padding: 5px 2px 6px 31px;
    border-radius: 3px;
    margin: 0px !important;
}

.select-chcekbox {
    max-height: 180px;
    overflow-y: scroll;
}

.btn-forgotpass {
    text-align: right;
}

#vertical-example {
    padding-top: 33px;
    padding-left: 20px;
}

#siteseal {
    margin-top: 18px;
    position: relative;
    display: inline-block;
    float: right;
}

.form-box * {
}

.form-box .swal2-title {
    text-align: left;
    font-size: 20px;
    border-bottom: 1px solid rgb(215, 215, 215);
    padding-bottom: 15px;
}

.form-box .swal2-html-container {
    padding: 10px;
    margin: 0px;
}

.form-box .swal2-html-container input[type="hidden"] {
    width: 0px !important;
}

.form-box .swal2-html-container input.swal2-input {
    width: 46%;
    display: inline-flex;
    margin: 3px 5px;
    height: auto;
    border-radius: 2px;
    float: left;
    font-size: 13px;
    color: rgb(0, 0, 0);
    padding: 11px 15px !important;
    outline: none !IMPORTANT;
    box-shadow: none !IMPORTANT;
}

input[readonly] {
    background: #eee;
    cursor: not-allowed;
}

.swalinput {
    display: inline-block;
    width: 47%;
    margin-bottom: 10px;
}

.swalinput.full {
    width: 95%;
}

.swalinput .swal2-input {
    font-size: 14px;
    width: 100% !important;
    display: block !important;
    margin: 0px !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid rgb(221, 221, 221) !important;
    padding: 5px 10px !important;
}

.swalinput textarea.swal2-input {
    min-height: 80px;
}

.swalinput label {
    font-size: 13px;
    width: 100%;
    text-align: left;
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.navbar-nav .nav-link.contactusbtn {
    color: rgb(0, 0, 0);
    border: 1px solid rgb(51, 51, 51);
    display: block;
    height: auto;
    border-radius: 3px;
    padding: 5px 10px !important;
}

.form-box .swal2-actions {
    margin: 0px;
}

.form-box .swal2-actions button {
    padding: 8px 10px;
    font-size: 13px;
}

.sidebar-modal {
    position: fixed;
    background: rgb(255, 255, 255);
    right: 0px;
    width: 0%;
    height: 87%;
    transition: all 0.3s ease-in-out 0s;
    top: 54px;
    z-index: 99;
}

.smodal-header {
    border-bottom: 1px solid rgb(238, 238, 238);
    padding: 5px 0px;
}

.smodal-header .btn {
    position: absolute;
    right: 0px;
    background: rgb(255, 255, 255);
}

.layout-page {
    position: relative;
}

.smodal-header {
    position: relative;
    width: 100%;
    height: 45px;
    overflow: hidden;
}

img.full-view {
    inset: 0px;
    margin: auto;
    float: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px;
    border: 1px solid rgba(238, 238, 238, 0.933);
    cursor: zoom-in;
    position: fixed !important;
    background: rgb(255, 255, 255) !important;
    z-index: 999 !important;
    width: auto !important;
    padding: initial !important;
    height: auto !important;
}

.fileUpload {
    background: url("../img/fileupload.webp") center center / contain no-repeat;
    padding: 15px;
    min-height: 210px;
    position: relative;
    background-size: 100% 100%;
}

.fileUpload > img {
    z-index: 99;
    position: relative;
    background: rgb(255, 255, 255);
    padding: 10px;
}

.fileUpload input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    z-index: 999;
}
.profile-img.fileUpload {
    background: transparent;
    padding: 0;
    position: relative;
    background-size: 100% 100%;
    border-radius: 50%;
    max-width: 100%;
    overflow: hidden;
    border: 4px dashed #ccc;
    width: 240px;
    height: 240px;
}

.profile-img.fileUpload > img {
    z-index: 99;
    position: relative;
    background: rgb(255, 255, 255);
    padding: 0px;
    max-width: 100%;
    min-height: 100%;
}

.smodal-body {
    padding: 20px;
    position: relative;
    height: 92%;
    overflow-y: scroll;
}

.form-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px !important;
}

.form-title small {
    display: block;
    font-size: 14px;
    font-weight: 400;
}

.smodal-footer {
    position: absolute;
    padding: 15px;
    bottom: 0;
    width: 100%;
    text-align: left;
}

.multiselect {
    min-height: 150px;
}

.attributionsItems {
    border: 1px solid #eee !important;
    border-radius: 5px;
    padding: 15px 25px 25px 25px;
    max-height: 169px;
    overflow-y: scroll;
}

.attributionsItems .form-check {
    margin-bottom: 5px;
    padding-left: 20px;
}

.attributionsItems .form-check input {
    width: 15px;
    height: 15px;
    margin-top: 5px;
    margin-left: -20px;
}

.attributionsItems .form-check label {
    font-size: 14px;
}

body.disabled_scroll {
    overflow: hidden;
}

a.menu-link.active {
    background: #fff;
    color: #2c4798 !important;
}

.img-cricle {
    width: 54px;
    height: 54px;
    border-radius: 3px;
    /* overflow: hidden; */
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    object-fit: scale-down;
}

a.report-card {
    background: transparent;
    padding: 0;
    display: inline-block;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    margin: 0;
    color: #272df5;
    text-decoration: underline;
}

.reportlinks {
    margin: 20px 0px;
}

.login label {
    left: 0
}

.left10{left:10px!important;}
.main-title {
    display: table;
    margin: auto;
    float: none;
    text-align: center;
    font-size: 29px;
    font-weight: bold;
}

.main-title small {
    display: block;
    font-weight: 400;
    font-size: 15px;
}

#dvExcel table * {
}

tr td.uploadStatus label {
    max-width: 300px;
    font-size: 14px;
    text-transform: math-auto;
    padding: 5px 10px;
    border-radius: 3px;
}

tr.success .uploadStatus label {
    background: #8BC34A;
    color: #fff !important;
}

tr.error td {
    /* background: #fff0ee !important; */
    /* border-color: #ff3e1d!IMPORTANT; */
}

#dvExcel table {
    width: 100%;
    border: 1px solid;
}

#dvExcel table th {
    padding: 7px 10px;
    border: 1px solid;
    background: #000;
    color: #fff;
}

#dvExcel table td {
    padding: 10px;
    margin: 0;
    border: 1px solid #eee;
    color: #333;
}

tr.error td.uploadStatus label {
    background: #ff3e1d !important;
    color: #fff !important;
}

#dvExcel table td input {
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 5px 5px;
    border: none;
}

.filebulkupload {
    width: 100%;
    background: #eff5fb;
    padding: 15px;
    height: 130px;
    position: relative;
    border: 1px dashed #013d7b;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    display: inline-flex;
    box-shadow: rgb(6 62 121 / 10%) 1px 6px 3px 0px;
}

.filebulkupload input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
}

.filebulkupload label {
    margin: auto;
    align-items: center;
}

.hide {
    display: none;
}

#addpartnerbtn {
    position: absolute;
    right: 13px;
    top: 0;
    padding: 0px 17px;
    font-size: 12px;
    height: 58px;
}

.dataTables_length {
    border: 1px solid #607d89;
    padding: 3px 10px;
    border-radius: 6px;
    margin-right: 5px;
    color: #607d8a !important;
    background: #f5f5f9;
    font-size: 14px;
    left: 6px;
    position: relative;
    font-weight: 400;
    font-family: 'Roboto';
    line-height: 29px;
}

.dataTables_length select {
    border-radius: 0;
    max-width: 60px;
    padding: 0;
}

#addattrbtn {
    float: right;
    padding: 0 7px;
    color: #2196F3;
    text-decoration: underline;
    font-weight: normal;
    font-size: 13px;
}

#dynamicAttributes > label {
    width: 88%;
    position: absolute;
    margin: 0px 20px;
    font-size: 10px;
    top: 1px;
    background: #fff;
    z-index: 99;
    padding-top: 7px;
}

#dynamicAttributes {
    position: relative;
}

.swal2-input.hide {
    display: none !important;
}

.autocomplete-suggestions {
    background: #fff;
    border: 1px solid #eee;
    overflow-y: scroll;
}

.autocomplete-suggestion {
    padding: 6px 15px;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
}

.btn-copy {
    position: absolute;
    top: 1px;
    right: 14px;
    padding: 18px;
    border: none;
    margin: 0;
    background: #607d8a;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.referalURLContainer {
    position: relative;
}

li.qrcodeinfo {
    width: 220px;
}

li.qrcodeinfo h3 {
    margin: 0;
    padding: 0;
    font-size: 12px;
    display: inline;
    font-weight: bold;
    margin-left: 5px;
}

li.qrcodeinfo h3 small {
    display: inline-flex;
}

li.qrcodeinfo h3 small span {
    font-size: 12px;
    font-weight: 400;
}

li.qrcodeinfo span {
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-wrap: wrap;
    display: inline-flex;
}

li.qrcodeinfo > span {
    width: 100%;
}

li.qrcodeinfo > span i {
    /* align-items: self-start; */
    position: relative;
    vertical-align: top;
    display: inline-flex;
}

.qrcodeinfo {
    position: relative;
    margin: 10px 0;
}

.qrcodeinfo input {
    padding: 16px 10px;
}

.qrcodeinfo button {
    right: 0;
}

.qrcodeinfo label {
    margin: 0;
    left: 0;
}

footer p {
    text-align: center;
    margin: 0;
    padding: 10px 0;
}

.userprofilemini {
    display: inline-flex;
}

.userprofilemini .flex-grow-1 {
    line-height: 14px;
    padding: 12px 9px;
    text-align: right;
}

.btn[data-record-status="false"] .tf-icons:before {
    content: "\ed2a";
}

a[data-record-status="true"] {
    color: #fff;
    background: #8ec540;
    border-color: #8ec540;
}

a[data-record-status="false"] {
    color: #fff;
    background: #013d7b;
    border-color: #013d7b;
}

td .btn {
    box-shadow: none !important;
}

table.collapsed td.dtr-control:before {
    position: absolute;
    left: -9px;
    content: "\ee48" !important;
    font-family: boxicons !important;
    font-size: 10px;
    background: #8cc43d;
    border-radius: 100px;
    width: 20px;
    height: 20px;
    text-align: center;
    border: 1px solid;
    line-height: 19px;
    color: #fff !important;
    transition: all ease-in-out 0.3s;
}

.parent td.dtr-control:before {
    content: "\ee48" !important;
    rotate: 90deg;
    transition: all ease-in-out 0.3s;
}

td.dtr-control {
    padding-left: 21px !important;
}

.e-reportviewer {
    min-height: 300px !important;
    width: 100% !important;
}

.e-reportviewer-scrollcontainer, .e-reportviewer-waitingpopup {
    height: 100% !important;
}

/*
#viewer_reportviewerContainer {
    height: 100% !IMPORTANT;
}

.e-reportviewer-waitingpopup {
    height: 100% !IMPORTANT;
}

.e-reportviewer-viewer {
    height: 100% !IMPORTANT;
}*/


.themespan {
    color: #2c4798;
}

.tabeltitel {
    font-size: 30px;
    font-weight: bold;
}

button#addnewbeneficiaryBtn {
    padding: 10px;
    background: #2c4798;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
    font-weight: 700;
    margin-right: 10px;
    color: #fff;
}

    button#addnewbeneficiaryBtn:hover {
        color: #fff;
    }

div#leadProvidersGrid_length {
    padding: 5px 18px;
    background: #fff;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
    font-weight: 700;
    margin-right: 10px;
}



div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: 400px;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 4px 0px;
    vertical-align: middle;
    border-radius: 6px;
    padding: 10px;
}


.layout-page {
 
}


table.dataTable {
    border: 1px solid rgb(221, 221, 221) !important;
    background-color: #FFFFFF;
    padding-bottom: 0.5rem;
    border-radius: 10px 10px 10px 10px;
}


table.dataTable thead {
    background: #f3f5f8;
}

table.dataTable thead th, table.dataTable thead td {
    padding: 5px 15px;
    border-bottom: 1px solid #111;
    font-size: 14px;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 5px 15px;
    font-size: 15px;
}
    table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
        bottom: 0.45em;
    }
    table.dataTable thead .sorting, table.dataTable thead .sorting_asc {
        background-image: none;
    }
    a.btn-sm.btn.btn-icon.btn-primary {
        background-color: #607D8B;
        padding: 10px !important;
        width: 38px;
        height: 38px;
        font-size: 25px;
        border-radius: 11px;
        box-shadow: rgba(17, 12, 46, 0.15) 0px 4px 1px 0px !important;
    }

a.btn-sm.btn.btn-icon.btn-default {
    padding: 10px !important;
    width: 38px;
    height: 38px;
    font-size: 25px;
    border-radius: 11px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 4px 1px 0px !important;
}

    a.btn-sm.btn.btn-icon.btn-default:hover {
        color: #fff !important;
    }


button#addnewagentBtn {
    padding: 10px;
    background: #2c4798;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
    font-weight: 700;
    margin-right: 10px;
    color: #fff;
}

button#addnewagentBtn {
    padding: 10px;
    background: #2c4798;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
    font-weight: 700;
    margin-right: 10px;
    color: #fff;
}


button#addnewagentBtn span {
    margin: 3px;
}

button#addnewagentBtn {
    padding: 10px;
    background: #2c4798;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
    font-weight: 700;
    margin-right: 10px;
    color: #fff;
    border: 0;
}


button#addnewagentuploadBtn {
    padding: 10px;
    background: #8cc43d;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
    font-weight: 700;
    margin-right: 10px;
    color: #fff;
    border: 0;
}

button#addnewagentBtn span {
    margin: 3px;
}


button#addnewagentuploadBtn span {
    margin: 3px;
}


a.btn-sm.btn.btn-icon.btn-outline-primary {
    background-color: #607D8B;
    padding: 10px !important;
    width: 38px;
    height: 38px;
    font-size: 25px;
    border-radius: 11px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 4px 1px 0px !important;
    color: #fff;
}


table.table-bordered.dataTable {
    border-right-width: 0;
    box-shadow: rgb(0 0 0 / 28%) -2px 15px 20px -20px;
    margin-bottom: 25px !important;
}


div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    display: inline-block;
    border: 0px;
}

.username {
    color: #000;
}

.userrole {
    color: #8cc43d !important;
}

.formicon {
    position: absolute;
    right: 46px;
    top: 14px;
    color: #000;
    font-size: 21px;
}


.form-floating > .form-control {
    padding: 1rem 0.875rem;
    box-shadow: rgba(0, 0, 0, 0.45) -2px 9px 20px -20px;
    border: 1px solid #2c479875 !important;
}

input.btn.btn-outline-primary {
    padding: 7px 32px;
    background: #2c4798;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
    font-weight: 700;
    margin-right: 10px;
    color: #fff;
}

input.btn.btn-outline-danger {
    background: red;
    color: #fff;
    box-shadow: rgba(17, 12, 46, 0.15) -2px 3px 1px 0px;
}


.uploadiocn {
    font-size: 48px;
}

.containtbox {
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 20px;
    min-height: 165px;
    margin-bottom: 10px;
    box-shadow: rgba(17, 12, 46, 0.15) -1px 6px 8px 0px;
}

.btn-sumbitalied {
    width: 100%;
    text-align: left;
    padding: 14px;
    background: rgb(44, 71, 152);
    background: linear-gradient(90deg, rgba(44, 71, 152, 1) 0%, rgba(44, 71, 152, 1) 35%, rgba(188, 175, 233, 1) 100%);
    border: 0px;
    color: #fff;
    font-size: 18px;
    border-radius: 14px;
    align-items: center;
    display: flex;
    position: relative;
    margin-bottom: 8px;
}

    .btn-sumbitalied:hover {
        color: #fff !important;
    }
.btn-yellow {
    background: linear-gradient(to right, #ffffa0 0%,#c79630 25%,#ffffa0 59%,#dead47 89%);
    color:blue;
}
.btn-yellow .iconnext {
    background: #f0ca5e;
}

.iconnext {
    /* float: right; */
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #2c4798;
    text-align: center;
    font-size: 24px;
    position: absolute;
    z-index: 9999;
    right: 18px;
    border-radius: 8px;
}

.iconsection i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #2c479826;
    text-align: center;
    font-size: 20px;
    color: #2c4798;
    border-radius: 50%;
    display: block;
    margin: 7px auto;
}

.containtbox h3 {
    font-size: 18px;
    margin: 14px 0px;
}

.viewmore {
    padding: 6px 13px;
    background: #2c4798;
    color: #fff;
    text-transform: capitalize;
    border-radius: 8px;
    cursor: pointer;
}

    .viewmore:hover {
        color: #fff;
    }

.box-username {
    font-size: 18px !important;
    margin: 5px 0px !important;
}

.mr-b10 {
    margin-bottom: 10px;
}

.containtbox img {
    width: 100%;
    margin-top: 22px;
}


input#DiscountType {
    margin-left: 5px;
    margin-right: 11px;
    width: 25px;
    height: 18px;
}


.d-flex label.form-label {
    margin: 0px;
    font-size: 14px;
}


.radiosection {
    align-items: center;
    margin: 7px;
}



.link {
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 35px;
    margin-bottom: 15px;
}

.link a {
    display: block;
    text-align: center;
    color: #0d6efd;
    font-size: 15px;
    text-decoration: none;
}

.link a:hover {
    text-decoration: underline;
}



.copy-button {
    display: inline-block;
    padding: 8px 15px;
    border: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    border-radius: 25px;
    background-color: #0d6efd;
}

    .copy-button:hover {
        background-color: #0069D9;
    }

.phone-input {
    width: 70%;
    height: 43px;
}

.count-selected {
    height: 43px;
    color: unset;
}

.phn-text-heading {
    color: black;
    font-size: 18px;
}

.send-sms-button {
    font-size: 18px;
    border: none;
    background: #e6f8af;
    height: 42px;
    border-radius: 3px;
}

.share-container {
    margin-bottom: 20px;
}

.share-container .share-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.share-container .share-icons i {
    margin: 0 5px;
    cursor: pointer;
}

.text-primary{
    color:blue !important;
}

.flyers-container {
    text-align: center;
}

.flyers-container .download-flyers-button {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    border: none;
    background: #e6f8af;
        
}

.flyers-container .download-flyers-button:hover {
    background: #e6f8af;
}

 .fileUpload {
            margin: 10px 0;
}
.filePreview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.filePreview .file-item {
           
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
    width:20%;
}
.filePreview .file-item img,
.filePreview .file-item iframe {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.filePreview .file-item i {
    font-size: 50px;
    margin-bottom: 10px;
}
.filePreview .file-item p {
    margin-top: 10px;
    word-break: break-all;
    text-align: center;
}

#loader {
    position: fixed; /* Fixes the loader to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    display: flex;
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    z-index: 1000; /* Ensure it appears on top of other content */
}

.progress-container {
    width: 80%; /* Adjust width as needed */
    max-width: 400px; /* Optional: maximum width */
    background-color: #f3f3f3; /* Light grey background */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensures rounded corners are respected */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
}

.progress-bar {
    width: 0%; /* Initial width, will be animated */
    height: 20px; /* Height of the progress bar */
    background-color: #4caf50; /* Green color */
    transition: width 0.4s ease-in-out; /* Smooth transition for width change */
}

.filePreview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.file-item {
    margin: 10px;
    text-align: center;
}

    .file-item img,
    .file-item iframe {
        max-width: 100px;
        max-height: 100px;
        display: block;
    }

    .file-item i {
        font-size: 50px;
        display: block;
        margin-bottom: 5px;
    }

    .file-item p {
        margin: 0;
    }
        .flyers-container .download-flyers-button:hover {
            background: #e6f8af;
        }



.button-tabs .nav-link {
    margin-right: 5px;
    border-radius: 20px;
    background-color: #f8f9fa;
    color: #007bff;
    transition: all 0.3s ease;
}

    .button-tabs .nav-link.active {
        background-color: #ffffff;
        color: black;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
        border-radius: 20px;
    }

    .button-tabs .nav-link:hover {
        background-color: #ffffff;
        color: black;

        border-radius: 20px;
    }

    .button-tabs .nav-link.active:hover {
        background-color: #ffffff;
        color: black;
 
        border-radius: 20px;
    }

.nav-tabs .nav-item .nav-link:not(.active) {
    background-color: #eceef1;
    /* background-color: #ffffff; */
    color: black;
    border-radius: 20px;
}

.nav-tabs {
    width: 100%;
    justify-content: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #eceef1;
    border-radius: 28px;
}

    .nav-tabs .nav-item .nav-link:hover,
    .nav-tabs .nav-item .nav-link:focus {
        color: #000000;
    }

.w-50 {
    width: 50%;
    text-align: center;
}

.nav-tabs .nav-item .nav-link:hover {
    color: #000 !important;
}

button.copy-button {
    position: relative;
    top: 30px;
}

.layout-page {
    height: 85%;
    /*background-image: url("../img/home.png");*/
    background-size: 1250px 110%;
}

.loader {
    border: 16px solid #b7b7b7;
    border-radius: 50%;
    border-top: 16px solid #084DF9;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: none;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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


/*** Affiliate Network ***/
.orgchart > ul > li h3 {
    background:#01325D;
    color: #fff;
}
.orgchart > ul > li li h3 {
    background: #0098DB;
    color: #fff;
}
.orgchart > ul > li li li h3 {
    background: #B8C128;
    color: #fff;
}
.user-card {
    
}
    .user-card .user-img {
        max-width: 70px;
        flex-basis: 70px;
        min-width: 70px;
        position: relative;
    }
    .user-card .user-detail{
        flex-grow:1;
    }
    .user-card .user-img img {
        max-width: 100%;
    }
.user-img i {
    position: absolute;
    left: -5px;
    top: -10px;
}
    .user-card p {
        margin: 2px 0;
        font-size: 10px;
        color: #333;
        word-break: break-all;
    }
.user-card h3 {
    font-size:11px;
    margin:0px 0px 10px 0px !important;
    padding: 9px 20px;
}
.orgchart .nodes.vertical > .hierarchy:first-child::before, .orgchart .nodes.vertical .hierarchy::before {
    background: transparent;
}
.orgchart .nodes.vertical .hierarchy::after, .orgchart .nodes.vertical .hierarchy::before {
    border-color: #ccc !important;
}
.orgchart .node .verticalEdge::before {
    position: absolute;
    left: calc(50% - 5px);
    background: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    color: #333;
    line-height: 22px;
    font-size: 24px;
    background: #fff;
    width: 22px;
    height: 22px;
    z-index: 9;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5px;
    margin-left: -5px;
}

.text-dark-black{
    color: black !important;
}

.filter-selections label{
    margin-right:20px;
}
.filter-selections label input, .filter-selections label {
    vertical-align: middle;
    line-height: 1;
}


/****/
.custom-label {
    padding-left: 15px;
    margin-bottom:0;
    font-size: 0.75rem;
    font-weight: 500;
    color: #566a7f;
}
.virtual-card-selection p {
    word-break:break-word;
}
.package-selection label img {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}
.package-selection label p {
    font-size: 18px;
    font-weight: 600;
    padding: 5px;
    z-index: 9;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 1);
}
.package-selection label {
    position: relative;
    padding: 65% 0 0 0 !important;
    overflow: hidden;
}
.package-selection label input {
    position: absolute;
    left:10px;
    top:10px;
    width:20px;
    height:20px;
    z-index:99;
}

.progress-container-goal {
    width: 300px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.bar-label {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: bold;
}

.progress-bar-goal {
    height: 40px;
    background-color: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    line-height: 40px;
    color: #1d00bc;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(to right, #ffffa0 0%,#c79630 25%,#ffffa0 59%,#dead47 89%);
    width: 0%;
    transition: width 0.5s ease-in-out;
}

    .progress-fill.animate {
        animation: fill 2s forwards;
    }

@keyframes fill {
    from {
        width: 0;
    }

    to {
        width: var(--fill);
    }
}

.ribbon {
    position: absolute;
    color: white;
    text-align: center;
    font: bold 18px sans-serif;
    transform: rotate(-45deg);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    z-index: 1;
    clip-path: polygon(100% calc(100% - 20px), 100% 100%, calc(100% - 20px) calc(100% - 20px), 20px calc(100% - 20px), 0 100%, 0 calc(100% - 20px), 999px calc(100% - 20px - 999px), calc(100% - 999px) calc(100% - 20px - 999px));
    border-bottom: 20px solid #0007;
    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    left: 0;
    top: 0;
    padding: .1em 1.8em;
    background: #f8ca00;
}

.availabale-balance-card {
    display: inline-block;
    background: #fcf7a7;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: bold;
    color: #000;
    font-size: 14px;
}

.referralCnt {
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.1;
    color: #000000;
}