/* Globals */
:root {
    --orange: #f26334;
    --blue: #002c6c;
    --red: #ff0000d1;
    --darkGray: #454545;
    --darkMediumGray: #888B8D;
    --lightMediumGray: #B1B3B3;
    --lightGray: #F4F4F4;
    --rasberry: #F05587;
    --purple: #BF83B9;
    --lavendor: #AF96D4;
    --slate: #89AADB;
    --sky: #00B6DE;
    --link: #008DBD;
    --mist: #8DB9CA;
    --teal: #22BCB9;
    --mint: #71B790;
    --grass: #7AC143;
    --forest: #00B74F;
    --olive: #9DBB68;
    --lime: #C1D82F;
    --gold: #C4B000;
    --peach: #FBB034;
    --tangerine: #FF8200;
    --honey: #B78B20;
    --terracotta: #D3875F;

}

html,
body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Gotham', Verdana, sans-serif;
}

body {
    background: #ffffff
}

/* ====================== Generals ==================== */
.container.dashboard-con {
    max-width: 1185px !important;
}

.my-text-start {
    text-align: left !important;
}

/* Forms General */

.my-form .label,
.my-form div {
    font-size: 15px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: #595959;
    padding-bottom: 4px;
}

.my-form .key,
.my-form .value {
    font-size: 1rem;
}

.my-form .section-content>div {
    padding: 5px 0;
}

.my-form input[type=text],
.my-form input[type=url],
.my-form input[type=email],
.my-form input[type=number],
.my-form select {
    padding-left: 8px;
    padding-right: 10px;
    border: 1px solid #414141a3;
    height: 34px;
    width: 100%;
    background-color: #fff;
    font-size: 1rem;
}

.my-form input[type=checkbox] {
    height: 34px;
    width: 19px;
}

.my-form .input-con,
.my-form .input-con .icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-form .input-con span {
    height: 34px;
    width: 34px;
    border: 1px solid #858585;
    border-left: unset;
    color: #858585;
}

.my-form {
    position: relative;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.my-form .asteriskField {
    color: #ff0000ad;
    font-size: 1rem;
}



.flex-box {
    display: flex;
}

.dropdown-menu {
    padding: 0;
    border-radius: unset;
}

.dropdown-menu li {
    border-bottom: 1px solid #002c6c21;
}

.dropdown-menu li:last-child {
    border-bottom: unset
}

.dropdown-menu li a {

    padding: 9px 15px;
}



/* ========================================== */

a {
    text-decoration: none;
}

a.activate-btn {
    color: #fff !important;
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    transition: background-color .5s ease;
}

a.activate-btn:hover,
a.activate-btn:active,
a.activate-btn:focus {
    background-color: #cc3c0d;
}

a.my-btn,
button.my-btn {
    padding: 7px 16px 7px;
    min-width: 130px;
    display: inline-block;
    text-align: center;
    font-size: .9rem;
    border: unset;
}

.my-btn.disabled {
    background-color: #f8ad94 !important;
    border-color: #f8ad94 !important;
}


/* button.my-btn {
    padding: 4.5px 25px;
    border-style: none;
    color: #fff;
} */

table .my-btn {
    padding: 5px 25px;
}

.my-btn:hover {
    color: #fff;
}

.my-alert {
    background-color: #fff;
    border-top: 3px solid #00b6de;
    display: inline-block;
    border-radius: 2px;
    padding: 10px 30px;
    text-transform: uppercase;
}

.mark-con {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mark-con {
    font-size: .9rem;
}

.active-mark {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #4caf50;
    border-radius: 50%;
}

.inactive-mark {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #ff0000b0;
    border-radius: 50%;
}

/* ========================================== */

.first-nav {
    background-color: #f4f4f4;
}

.first-nav .dropdown-menu .dropdown-item:hover,
.first-nav .dropdown-menu .dropdown-item:focus,
.first-nav .dropdown-menu .dropdown-item:active {
    background-color: #002c6ce3;
    color: #cac2c2;
}

.first-nav {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}



.alert-success {
    color: var(--blue);
}

.header {
    font-weight: 700;
    font-size: 26px;
}

.header i {
    font-size: 1.4rem;
}

.header-title .btn-con {
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #f4f4f4;
    border-top: 1px solid #f4f4f4;
    border-right: 1px solid #ddd;
    background: #fff;
    padding: 7px 15px;
    height: 45px;
    display: flex;
    justify-content: space-between;
}

.header-title h2 {

    font-weight: 400;
    color: var(--blue);
    font-size: 24px;
}

.header-title>span {
    font-size: 13px;
}

.header-title button {
    padding: 5px 12px;
    font-size: 14px !important;
}

.full-header {
    font-weight: 500;
    border-bottom: 2px solid;
}

.auth-logo-nav {
    display: grid;
    grid-template-columns: 100%;
}

.auth-logo-nav img {
    margin-left: auto;
}

.logo-nav {
    text-align: right;
    display: grid;
    /* grid-template-columns: 50% 50%; */
}

.logo-nav h2 {
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    /* padding-left: 25px; */
}

.errorlist {
    list-style: none;
    padding: 0;
    color: var(--red);
}

.error .errorlist {
    font-size: 12px;
}

/* Login Form Styles */

.login-form .form-group {
    margin-top: 20px;
}


.alert-danger ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.main-alert .alert-danger .btn-close-white {
    filter: invert(100%) grayscale(100%) brightness(50%);
}

.main-section .home .card {
    position: relative;
    top: -21px;
    border: unset;
}

.main-section .home .card .card-body {
    border: 1px solid #ccc;
    border-top: 6px solid #87cbe3;
    box-shadow: 0px 1px 3px #c1bebe;

}



.main-section .home .card .card-body .title {
    color: var(--blue);
    text-align: left;
    font-size: 1.3rem;
    font-weight: 600;


}

.main-section .home .card .card-body .content-text {
    text-align: left;
}

.main-section .home .card .card-body .content-text span {
    color: var(--orange);
    font-weight: bold;
}

.main-section .home .card .card-body .content-footer {
    text-align: left;
    margin-top: 80px;
}

.main-section .home .card .card-body .content-footer button {
    background-color: var(--orange);
    color: #fff;
    border: unset;
    padding: 4px 17px;
    font-weight: 600;
}

.main-section .home .card .card-body .content-footer button:active,
.main-section .home .card .card-body .content-footer button:focus {
    box-shadow: 0 0 0 0.25rem rgba(242, 99, 52, 0.5);
}

.main-section .home .card .card-body .content-footer>div {
    display: block;
}

.main-section .home .card .card-body .content-footer a {
    font-weight: 600;
}

.main-section .home .card .card-body .home-table {
    text-align: left;
}

.main-section .home .card .card-body .home-table th {
    color: #a2a2a2;
    border-bottom: 1px solid #a2a2a261;
}

.main-section .home .card .card-body .home-table td {
    color: #414141;
}


.member-info-alert,
.main-alert {
    left: 137px;
    right: unset;
    position: fixed;
    top: 4px;
    z-index: 1000;
}


.member-info-alert .alert,
.main-alert .alert {
    text-align: center;
    width: 500px;
    border-radius: 0;
    padding: 24px 60px;
    font-size: 0.9rem;
}



/* .member-info-alert .alert {
    text-align: center;
    position: fixed;
    top: 26px;
    right: 23px;
    border-radius: 0;
    padding: 24px 60px;
    font-size: 0.9rem;
} */

.main-alert .alert-success {
    background: #0f5132;
    color: #fff;
}

.main-alert .alert button {
    font-size: 10px;
    padding: 0.65rem 0.6rem;
}

.main-alert .errorlist {
    margin-bottom: 0;
}

.main-alert .btn-close-white {
    filter: invert(100%) grayscale(100%) brightness(80%)
}

.main-alert .btn-close:focus {
    box-shadow: unset;
}

/* Payment Page */
.member-info-card {
    border: none;
}

.member-info-card .card-body div>span {
    font-weight: 500;
    color: var(--blue);
}

.member-info-card .card-body div>h5 {
    font-weight: 500;
    color: #414141;
    font-size: 1.1rem;
}

.total-price {
    font-weight: 500;
    color: #414141
}

.add-form .form-error ul {
    color: red;
    list-style: none;
    padding-left: 0;
}


.add-form label {
    display: block;
    font-family: "Cairo", sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: #414141;
    margin-bottom: 2px;
}

.delete-form-btn-con {
    position: relative;
    top: -17px;
}



.add-form .checkbox-label {
    display: inline-block;
    margin-right: 11px;
}


/* =================== Auth Styles ================ */

.auth-nav {
    box-shadow: 0px 1px 3px #41414154;
}

.login-form-con {
    background-color: #fff;
    box-shadow: 0px 1px 18px #41414154;
    border-top: 7px solid #00b6de !important;
}

.login-form-con h2 {
    color: var(--blue);
    margin: 0 0 15px;
    background: none !important;
    padding: 0 !important;
    font-size: 25px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
}

.login-form-con label {
    color: #454545;
    display: inline-block;
    margin-bottom: .5rem;
}

.login-form-con .input-group {
    width: 100%;
}

.login-form-con .input-group input,
.login-form-con .input-group select {
    width: 87.4%;
    padding-left: 10px;
    color: #414141;
    outline: none;
    border: 1px solid #b1b3b3;
    background-color: #fff;
}

.login-form-con .input-group input::placeholder,
.login-form-con .input-group textarea::placeholder {
    color: #69666691;
}

.login-form-con .input-group-addon {
    padding: 0 10px;
    margin-left: 0 !important;
    font-size: 22px;
    color: #b1b3b3;
    text-align: center;
    background-color: #fff;
    border: 1px solid #b1b3b3;

    border-left-color: rgb(177, 179, 179);
    border-left-style: solid;
    border-left-width: 1px;
    border-left: 0;
    border-radius: 0;
    position: relative;
    left: 0;
    top: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.login-form-con .input-group-addon i {
    color: var(--blue);
}

.login-form-con .error-con {
    color: var(--red);
    padding-left: 6px;
}

.login-form-con .errorlist {
    color: var(--red);
    font-weight: 400;
    font-size: 14px;
}

.main-section .welcome-text {
    font-family: "GothamSSm-Book", "Gotham Office", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-section .welcome-text p:first-child {
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.07;
    letter-spacing: normal;
    color: #002c6c;

}

.main-section .welcome-text p:last-child {
    font-size: 35px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    letter-spacing: normal;
    color: var(--orange);
    margin-top: 10px;
}




.chart-con {
    height: 315px;
    width: 80%;
    overflow: hidden;
}

.send-form input {
    display: block;
    margin-top: 5px;
    width: 100%;
    padding: 3px 10px;
    border: 1px solid #41414196;
    border-radius: 2px;
}

/* ================= First Nav Styles ============= */

.first-nav .navbar-brand img {
    height: 58px;
}

.first-nav .navbar-brand span {
    color: var(--orange);
    font-weight: 500;
    font-size: 22px;
    position: relative;
    top: 1px;
}

.first-nav .navbar-nav {
    margin-left: auto;
}

.first-nav .navbar-nav .logout-btn {
    background-color: var(--orange);
    color: #fff;
    margin-top: 8px;
    font-family: "GothamSSm-Book", "Gotham Office", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px !important;
    line-height: 20px;
    font-weight: 550 !important;
    border: none;

    margin-top: 10px;
    padding: 7px 20px 5px 20px !important;
    margin-right: 20px;
}

.first-nav .navbar-nav .logout-btn:hover,
.first-nav .navbar-nav .logout-btn:focus,
.first-nav .navbar-nav .logout-btn:active {
    color: #fff;
}



.first-nav .navbar-nav .custom-dropdown {
    margin-right: 10px;
    margin-top: 4px;
}

.first-nav .navbar-nav .custom-dropdown .dropdown-menu {
    padding: 0;
    min-width: 8rem !important;

}

.first-nav .navbar-nav .custom-dropdown .dropdown-divider {
    margin: 0;
}

.first-nav .navbar-nav .custom-dropdown a {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    background: none;
    font-size: 14px;
    color: #454545;
    font-weight: 500;
}

.first-nav .navbar-nav .custom-dropdown a i {
    color: var(--blue);
}


/* Second Navbar */

.second-nav {
    background-color: #fff;
    padding-top: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.second-nav .navbar-nav .nav-link {
    color: #002c6cdb !important;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 56px;
    border-top: 5px solid #fff;
}

.second-nav .navbar-nav .nav-link.active {
    border-color: var(--orange);
}


.second-nav .navbar-nav .dropdown-menu a {
    color: var(--blue);
    font-weight: 500;
}


.second-nav .navbar-nav .dropdown-menu .dropdown-item:active,
.second-nav .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #002c6c1f;
}



/* ============ Home page =================== */

.wallpaper {
    height: 146.6px;
    padding: 51px 0;
    background-color: var(--blue);
    color: #fff;
    text-align: center;
    font-size: 1.65rem;
    font-weight: 600;
    border: 2px solid #87cbe3;
    border-radius: 3px;
}

/* ============================================= */

/* ================= Tables ===================== */

/* old code will be removed soon */
.my-table-con {
    padding: 0 16px;
}

.my-table thead th {
    border-bottom-color: #414141 !important;
    font-weight: 500;
    color: var(--blue);
}

.my-table tbody td,
.my-table tbody th {
    font-weight: 500 !important;
}

.my-table tbody td.activation-btn {
    position: relative;
    top: 0px;
}

.my-table tbody td a.edit-unit {
    color: var(--blue);
}

.my-table button {
    padding: 4px 11px;
}

.my-table a {
    text-decoration: none;
}

.table-section>div {
    height: 400px;
    overflow-y: scroll;
}

/* --------------------------------- */

/* New Code Activate Styles */
.activate-table-con {
    border: 2px solid rgb(238, 238, 238);
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) !important;
}

.activate-table-con table {
    margin-bottom: unset;
}

.activate-table thead tr:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.activate-table thead th {
    padding: 19px 24px;
    text-align: left;


    transition: .3s cubic-bezier(.25, .8, .5, 1);

}

.activate-table thead th a {
    display: block;
    color: #000000a1;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Gotham Light';

}

.activate-table tbody td {
    padding: 10px 24px;
    text-align: left;
    font-weight: 600;
    font-family: 'Cairo';
    font-size: 14px;
    transition: .3s cubic-bezier(.25, .8, .5, 1);
}

.activate-table tbody td:first-child {
    color: var(--blue)
}


/* ============================================= */

/* ================== Footer Styles =============== */

.wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}

.footer,
.push {
    height: 50px;
}

footer p {
    text-align: left;
}

/* =============================================== */

/* ================  Members ===================== */
.new-member-card,
.new-member-card .card-header {
    border-radius: unset;

}

.new-member-card .card-header {
    background-color: var(--blue);
    color: white;
    font-size: 1.1rem;
}

.new-member-card .card-body {
    background: #f4f4f4;
}

.new-member-card label.form-label {
    width: 35%;
    background: #f4f4f4;
    line-height: 27px;
    padding: 6px 12px;
    border-radius: 2px 0 0 2px;
    text-align: left;
    color: #454545;
    border-right: 2px solid #6f666661;
    font-size: .9rem;
}

.new-member-card input[type=text],
.new-member-card input[type=email],
.new-member-card select {
    width: 63%;
    height: 39px;
    color: #2d2d2d;
    padding: 8px 12px;
    background: #fff;
    border: 0;
    outline: 0;
    font-size: 16px;
    margin-left: -4px;
    font-family: "Gotham SSm A", "Gotham SSm B", Verdana, sans-serif;
}

.register-terms-con .terms-link {
    text-decoration: none;
    color: var(--blue);
    font-size: 1rem;
    margin: 12px 0;
    display: inline-block;
    border-bottom: 1px solid;
}

.register-terms-con .terms {
    background: #fff;
    border: 2px solid #002c6c1c;
    border-radius: 2px;
    height: 150px;
    overflow-y: scroll;
}

.member-status-con {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ====================== Dashboard ================ */
.dashbaord-list ol {
    padding: 0;
    list-style: none;
}

.dashbaord-list ol li {
    border-top: 1px solid #4545451f;
    padding: 7px 10px;
}

.dashbaord-list ol li:last-child {
    border-bottom: 1px solid #4545451f;
}

.dashbaord-list ol li,
.dashbaord-list ol li a {
    text-decoration: none;
    color: #454545 !important;
    font-weight: bold;
    display: block;
}

.dashbaord-list ol li:hover,
.dashbaord-list ol li:focus,
.dashbaord-list ol li:active {
    background-color: #cccccc4f;
}

.dashboard-card {
    transition: box-shadow .6s ease;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2),
        0 2px 2px 0 rgba(0, 0, 0, .14),
        0 1px 5px 0 rgba(0, 0, 0, .12) !important;
}

.dashboard-card:hover,
.dashboard-card:focus,
.dashboard-card:active {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2),
        0 12px 17px 2px rgba(0, 0, 0, .14),
        0 5px 22px 4px rgba(0, 0, 0, .12) !important;
}

.dashboard-card>div {
    padding: 0 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card>div:first-child {
    height: 8px;
    width: 100%;
    background: var(--blue);
}

.dashboard-card>div:last-child {
    color: var(--blue);
    padding: 16px;
}

.dashboard-card .card-number-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dashboard-card .card-number-con>span:last-child {
    font-size: .9rem;
}

.dashboard-card .card-number {
    font-size: 44px;
    font-weight: bold;
    line-height: 1.1;
}

.dashboard-con .title a {
    color: #414141;
}

.dashboard-con .sub-title-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================================================== */
.tabs-container .tab-content {
    background-color: #eeeeee;

}

.payment-info .tabs-container .payment-btn {
    opacity: .5;
}



.delete-form-btn {
    position: absolute;
    top: -16px;
    right: -21px;
    color: var(--red)
}

.delete-form-btn:hover,
.delete-form-btn:focus,
.delete-form-btn:active {
    color: var(--red)
}

.payment-info .tabs-container .tab-content table td.input input {
    border: 1px solid #ddd;
    opacity: .5;
}

.payment-info .tabs-container .tab-content table td.input #id_expired_date {
    opacity: .5 !important;
}

.tabs-container .tab-content table td.input input {
    border: 1px solid #ddd;
    padding: 0 10px;
    font-size: 14px;
}


.tabs-container .tab-content table td.input input[type=number] {
    width: 100%;
    height: 100%;
}

.prefix-request .tabs-container .tab-content table td.input input[type=number] {
    width: 180px;
}

form table .errors-con {
    font-size: 13px;
}

.tabs-container .tab-content table td.input input[type=text],
.tabs-container .tab-content table td.input input[type=email],
.tabs-container .tab-content table td.input input[type=url] {
    width: 100%;
    height: inherit;
}

.tabs-container .tab-content table td.input select {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 12px;
    background: #fff;
}

.tabs-container .tab-content table td.input input[type=checkbox] {
    opacity: 1;
}

.tabs-container .tab-content .tab-pane .row {
    padding: 12px 35px;
}

.tabs-container .modal .modal-content {
    background: #f7f4f4;
}


.tabs-container .modal .modal-footer button {
    font-size: 1rem;
}

.tabs-container .modal-body>div,
.tabs-container .modal-body>div>span:last-child {
    padding: 3px 3px;
    color: #414141;
}

.tabs-container .modal-body>div>span:first-child {
    color: var(--blue);
}

.my-tabs .nav-link {
    background-color: #cccccc !important;
    color: #454545;
    padding: 10px 10px 6px 10px;
    font-size: 11px;
    min-width: 100px;
    text-align: center;
    border-radius: unset;


}

.my-tabs .nav-link:hover,
.my-tabs .nav-link:focus,
.my-tabs .nav-link:active {
    background-color: rgba(51, 51, 51, 0.42) !important;
    color: #414141;
}

.my-tabs .nav-link {
    font-size: 12px;
    letter-spacing: .5px;
}

.my-tabs .nav-link.active {
    background-color: #eee !important;
    color: #414141;
    font-weight: bold;
    border: unset;
}

.tabs-container .tab-content .asterisk {
    color: red;
    font-weight: bold;
    font-size: 11px !important;
    position: relative;
    top: -2px;
    left: 4px;
}

.add-member-form .form-error {
    height: 30px;
    display: block;
}

.add-member-form .form-error .errorlist {
    padding: 0px 13px !important;
}



.form-error .errorlist li {
    font-size: 13px;
    text-transform: uppercase;
}

/* ================================================= */

@media (max-width: 850px) {
    .add-form {
        display: block;
    }

    .add-form>div {
        margin-top: 10px;
    }

    .add-form input {
        width: 100%;
    }

    .add-form .add-btn-con button {
        position: unset;

    }

}

/* ======================= Nav Tabs ===================== */


.user-section {
    color: var(--blue);
    font-size: 1.1rem;
}

.resend-confirmation-form label {
    font-size: 1.25rem;
}

.resend-confirmation-form input {
    width: 100%;
}


/* =============================================== */

/* =================== Search Form =============== */

/* old Code will be removed */
.search-order-form .search-btn-con {
    height: 65.8px;
    position: relative;
}

.search-order-form .search-btn-con button {
    position: absolute;
    bottom: 1px;
}

.search-order-form select.ordering {
    width: 48%;
    padding: 0 4px;
}

.filter-con {
    display: flex;
    align-items: center;
}

.filter-con .filter-select {
    width: 100% !important;
}

.filter-con>div {
    width: 50%;
}

.filter-con>div:first-child {
    flex: 2;
}

.filter-con>div:last-child {
    flex: 1;
}


.filter-con .my-btn {
    margin: 0 5px;
}


/* New Code */
.search-con {
    display: flex;
    justify-content: space-between;
}

.search-con>div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-con>div:last-child>div:first-child {
    font-size: 0.9rem;
    margin-right: 17px;
}


.search-form {
    display: flex;

}

.search-form input {
    height: 30px;
    border-radius: unset;
    border: 1px solid #8f8f9d;
    padding: 0px 5px;
}

.search-form input::placeholder {
    font: .9rem;
}

.search-form button {
    color: #8f8f9d;
    background: unset;
    border: 1px solid #8f8f9d;
    border-left: unset;
    height: 30px;
    width: 30px;
}

.search-form button:hover,
.search-form button:focus,
.search-form button:active {
    color: #fff;
    background: #8f8f9d;
}

/* ============================================= */


/* ================= Payment =================== */
.payment-prefix> :not(caption)>*>* {
    padding: 2px 1px;
}

table.payment-prefix td {
    font-weight: 500;
    color: var(--blue);
}

table.payment-prefix .total td,
table.payment-prefix th {
    font-weight: 500;
    color: #414141;
    font-size: 1.1rem;
}



/*================= Pagination ======================= */
.page-link {
    color: #757575;
    padding: 4px 10px;
    border: unset;
}

.page-link:hover {
    color: inherit;
    background-color: inherit;

}

.page-link.disabled {
    color: #bababa !important;
}

.page-item:not(:first-child) .page-link {
    margin: 0;
}


.page-link.active {
    color: #fff;
    background-color: var(--orange);
    padding: 2px 12px;
    border-radius: 3px !important;
    border: unset;
    margin: 0 10px !important;
}

.page-link:focus {
    box-shadow: unset;
}



/* ============================================= */

@media (max-width: 814px) {
    .checkbox-con {
        position: unset;
    }

    .logo-nav {
        grid-template-columns: 100%;
    }

    .logo-nav>div {
        text-align: center;
    }

    .logo-nav h2 {
        display: None;
    }
}

@media (max-width: 768px) {
    .welcome-text {
        margin-bottom: 40px;
    }

    .login-fome-con {
        padding: 26px 47px;
    }
}

@media (max-width: 576px) {
    .login-form-con {
        border: none;
    }

}

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







/* ==================== Colors ================== */

.bg-orange {
    background-color: var(--orange);
    color: #fff;
}

.orange {
    color: var(--orange) !important;
}


.bg-blue {
    background-color: var(--blue);
    color: #fff;
}

.blue {
    color: var(--blue) !important;
}

.link {
    color: var(--link) !important;
}

.bg-link {
    color: var(--link) !important;
}

.forest {
    color: var(--forest) !important;
}

.bg-forest {
    color: var(--forest) !important;
}

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

.terracotta:hover,
.terracotta:focus,
.terracotta:active {
    color: var(--terracotta);
}



/* ================================================= */



/* ================= Alerts ========================  */
.ajs-message.ajs-success {
    background-color: var(--forest) !important;
    border: 3px solid #dfdfdf;
    font-weight: bold;
    color: #fff;
}

/* =================================================  */

/* ================== Select2 Js Styles ============ */
.select2-container--default .select2-selection--single {
    border-radius: unset;

}

.select2-container .select2-selection--single {
    height: 39px;
    padding: 5px 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #000000c4 transparent transparent transparent;
}

.select2-selection__rendered {
    font-size: 13px;
    color: #000 !important;
}

.add-prefix-form .prefixes-list-loader,
.add-prefix-form .loader-con {
    display: none;
    width: 45px !important;
    ;
}

.add-prefix-form .loader-con img {
    height: 28px;
    width: 28px
}

.add-prefix-form .prefixes-list-loader img {
    height: 25px;
    width: 25px;
}



/* ============== Back Btn ==================== */

.form-back-btn {
    padding: 6.3px 12px !important;
    font-size: 14px !important;
}

.back-btn {
    border: 2px solid #b1b3b3 !important;
    padding: 5px 16px !important;
    color: #414141a3;
}

.back-btn:hover,
.back-btn:active,
.back-btn:focus {
    color: #414141a3;
}

/* ================================================= */

/* =================== Balance ===================== */
.balance-update {
    display: flex;
    flex-direction: row;
}

/* ================================================= */
/* ======================== Pagination ============= */
.pagination {
    margin: 0;
}

/* ================= Member Info Page =============== */
.member-info .title {
    font-weight: bold;
}

.member-info .section .title h4 {
    cursor: pointer;
    font-weight: bold;
}

.member-info .section .title h4 span {
    position: relative;
    z-index: -5;
}

.member-info .section .title span {
    font-size: .9rem;
    margin: 0 15px;

}


.member-info .section .info {
    font-size: 15px;
    font-weight: 400;

}

.member-info .section .info>div {
    line-height: 32px;
}

.my-form .info .key,
.member-info .section .key {
    color: #505050;
}

.my-form .info .value,
.member-info .section .value {
    color: var(--blue);
    font-weight: bold;
}

/* ================================================== */
/* ======================= Contract Btn ============= */
.report-btn {
    background-color: var(--orange);
    display: block;
    padding: 9px 0;
    color: #fff;
    border-radius: 1px;
}

.report-btn:hover,
.report-btn:focus,
.report-btn:active {
    color: #fff;
}

/* ================================================== */


/* ==================== Member Update ================ */
.formset-table .errorlist li {
    font-size: 0.8rem;
    margin: 3px 2px;
}