body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        margin-left: -5px;
    }
    
    input,
    select,
    .select2-selection {
        outline: none;
    }
    
    #top_navbar {
        background-color: #fff;
        height: 70px;
        padding-right: 20px;
        padding-top: 5px;
    }
    
    #top_row {
        margin: 0 auto;
        padding: 1px;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    #profiler {
        padding: 10px;
        text-align: center;
    }
    
    #top_navbar ul li a {
        font-size: 14px;
        background-color: none !important;
        color: grey;
        border-radius: 4px;
        margin-right: 2px;
    }
    
    #top_navbar ul li a:hover {
        color: red;
        text-decoration: underline;
        text-decoration-color: red;
    }
    
    #top_icon {
        font-size: 14px;
        padding-right: 5px;
    }
    
    .sidenav {
        width: 230px;
    }
    
    .sidenav li a {
        color: grey;
        font-size: 14px;
    }
    
    .sidenav li a:hover {
        color: black;
    }
    
    .main_div {
        margin-left: 232px;
    }
    
    .home-content {
        margin-left: 10px;
    }
    
    .message_bar {
        padding: 0 53px 0 15px;
    }
    
    .info-cards {
        margin-left: -10px;
    }
    
    .sidenav_childs li {
        padding-left: 35px;
    }
    
    .sidenav_childs a {
        line-height: 28px !important;
        height: 30px !important;
    }
    
    .dropdown .up {
        display: none;
    }
    
    .sidenav li>a {
        padding: 0 4px 22px 22px;
    }
    
    .li_child_element {
        background: #ff9292;
    }
    
    .li_child_element a {
        color: white !important;
    }
    
    .li_child_element i {
        line-height: 30px !important;
    }
    /*Select 2 Section */
    /*  Removing arrows from the input */
    
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0;
        /* <-- Apparently some margin are still there even though it's hidden */
    }
    /* Profile Section*/
    
    #profile_pic {
        width: 195px;
        height: 200px;
        border-radius: 50%;
    }
    
    #proftop_row {
        margin-top: -15px;
        background-color: #fff;
        color: #34c6d3;
        padding: 5px;
        background-color: #fff;
        border-bottom: 1px solid silver;
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 5px;
    }
    
    #profile_editing_section .row,
    #edit-documents-from .row {
        margin-top: 5px;
    }
    
    #profile_editing_section label {
        color: black;
        font-weight: 400;
        font-size: 13px;
    }
    
    #personal-information h5,
    #address-information h5,
    #overview {
        font-size: 20px;
        color: black;
        font-weight: 500;
    }
    
    .profile-details p {
        font-size: 13px;
        color: grey;
        font-weight: 400;
        line-height: 1.5rem;
        padding-left: 5px;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .transaction_row {
        margin-bottom: 15px;
        margin-top: 10px;
    }
    
    .head_row {
        margin-bottom: 15px;
    }
    
    .recent-title {
        /*Changed*/
        font-size: 10px;
        font-family: arial;
        font-weight: 500;
    }
    
    .last_transaction {
        background-color: #fff;
    }
    
    .last_transaction strong {
        font-size: 20px;
    }
    
    #payout_country {
        padding-top: 22px;
    }
    
    .profile-details p span {
        font-size: 16px;
        color: black;
        font-weight: 400;
    }
    
    #user_icon {
        padding-right: 5px;
        color: red;
    }
    
    #info_title {
        color: grey;
        font-size: 20px;
    }
    
    #submit_btn {
        width: 120px;
    }
    
    #submit_row {
        padding-top: 10px;
    }
    
    #footer {
        background-color: #edeeec;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    
    #footer a {
        color: red;
        margin-left: 10px;
        margin-right: 10px;
        text-decoration: underline;
        text-decoration-color: red;
    }
    
    .bordered-input {
        border-bottom: 1px solid grey;
    }
    
    .prof_btns button {
        background-color: #30cfb5;
        width: 100px;
        color: #fff;
    }
    /*SELECT 2 styles*/
    
    .select2 {
        width: 100% !important;
    }
    
    .select2-selection {
        border: none !important;
        height: 2rem !important;
        border-bottom: 1px solid #9e9e9e !important;
        margin-bottom: 8px !important;
    }
    
    .select2-selection>* {
        line-height: 3rem !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #ec0000 transparent transparent transparent;
        border-width: 7px 7px 0 8px;
        margin-left: -8px;
        margin-top: 2px;
    }
    
    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #ec0000 transparent;
        border-width: 0 7px 9px 6px;
        ;
    }
    /*Transfer Money Clculator Section/Dashboard*/
    
    #dashboard_steps {
        border-bottom: 1px solid silver;
    }
    
    #dashboard_steps ul li a {
        text-decoration: none;
        color: black;
        font-size: 11px;
    }
    
    #transfer_details p,
    #sender_details p,
    #receiver_details,
    #payment_title {
        font-size: 20px;
        color: grey;
    }
    
    #calculator_container {
        margin-top: 20px;
        border: 1px solid #e3e5e4;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 5px;
        margin-bottom: 10px;
        box-shadow: silver 3px 4px 5px;
        margin-left: 0;
        margin-right: 0;
    }
    
    #calculator_container label {
        font-size: 12px;
        font-weight: 500;
        color: grey;
        padding-left: 7px;
        margin-bottom: -2px;
    }
    
    #sender_existing,
    #benef_existing {
        margin: 20px;
        margin: 0 auto;
        padding: 10px;
        margin: 0 auto;
    }
    
    #sender_table thead {
        background-color: #daf2ef;
        color: silver;
    }
    
    #exist,
    #benexist {
        color: grey;
        padding-left: 10px;
    }
    
    #sender_existing .profile {
        color: grey;
        border-radius: 5px;
        background-color: rgb(219, 213, 213);
    }
    
    #estimate {
        padding: 5px;
        padding-left: 13px;
    }
    
    #payments {
        margin-top: 10px;
        color: silver;
    }
    
    #container {
        padding-top: 10px;
    }
    
    #calc_title {
        font-weight: 400;
        font-size: 20px;
        color: #fff;
    }
    
    #rec_countries {
        margin-top: 10px;
    }
    
    #ex_rate {
        margin-top: 5px;
        width: 94%;
        padding: 10px;
        color: grey;
        border: 1px solid #d3dced;
        border-radius: 5px;
        background-color: #fff;
    }
    
    #fee_rate {
        width: 94%;
        margin-top: 5px;
        padding: 10px;
        color: grey;
        border-radius: 5px;
        border: 1px solid #d3dced;
    }
    /*
#submit{
    width:98%;
    margin-top:10px;
    padding:10px;
    color:grey;
    border-radius:5px;
    border:1px solid #e5eae7;
    background-color:#e5eae7;
}
*/
    
    .table-btn i {
        font-size: 10px;
    }
    
    .table-btn {
        display: inline-block;
        border-radius: 4px;
        border: 1px solid #C5C9D2;
        background-color: transparent;
        color: #8991A6;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        display: inline-flex;
        align-items: center;
        height: 24px;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
    }
    
    .table-btn i {
        font-size: 13px;
    }
    
    .table-btn:hover,
    .table-btn:focus,
    .table-btn:active {
        border: 1px solid #ea0b16;
        background-color: transparent;
        color: #ea0b16;
    }
    
    #review_left_col span,
    #review_right_col span {
        color: black;
        font-weight: 500;
        margin-top: 3px;
        margin-bottom: 3px;
        font-size: 13px
    }
    
    .table-btn-selfie {
        display: inline-block;
        border-radius: 4px;
        border: 1px solid #C5C9D2;
        border-radius: 10px;
        background-color: transparent;
        color: #8991A6;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        display: inline-flex;
        align-items: center;
        height: 24px;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
    }
    
    .table-btn-selfie:hover,
    .table-btn-selfie:focus,
    .table-btn-selfie:active {
        border: 1px solid #ea0b16;
        background-color: transparent;
        color: #ea0b16;
    }
    
    .general-btn {
        width: 95%;
        display: inline-block;
        border-radius: 4px;
        border: 1px solid #e60f1a;
        background-color: #e60f1a;
        color: #fff;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: #e60f1a;
        font-weight: 500;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
    }
    
    .promo-btn {
        width: 100%;
        height: 3.5rem;
        border: 1px solid #e60f1a;
        background-color: #e60f1a;
        color: #fff;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: #e60f1a;
        bottom: -1px;
        font-weight: 500;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
    }
    
    .currency_select {
        background-color: #ea0b16;
        color: #fff;
        height: 3.5rem !important;
        width: 100%;
        border: 1px solid #dadbda;
        padding: 0 2px 0 6px !important;
        padding-left: 3px;
        border-radius: 0;
        font-size: 16px;
        font-weight: 600;
    }
    
    .promo-btn:hover,
    .promo-btn:focus {
        color: #fff;
        background-color: hsl(0, 98%, 49%);
        /*changed*/
        border-color: hsl(0, 98%, 49%);
        ;
        /*changed*/
        cursor: pointer;
    }
    
    .general-btn:hover,
    .general-btn:focus {
        color: #fff;
        background-color: hsl(0, 98%, 49%);
        /*changed*/
        border-color: hsl(0, 98%, 49%);
        /*changed*/
        cursor: pointer;
    }
    
    .common-btn {
        /*Changed*/
        display: inline-block;
        border-radius: 4px;
        border: 1px solid #ea0b16;
        background-color: #ea0b16;
        color: #fff;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        padding: 11px 42px;
        display: inline-flex;
        align-items: center;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
    }
    
    .common-back-btn {
        /*Changed*/
        display: inline-block;
        border-radius: 4px;
        border: 1px solid #C5C9D2;
        background-color: transparent;
        color: #8991A6;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        padding: 11px 42px;
        display: inline-flex;
        align-items: center;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
    }
    
    .common-back-btn:hover,
    .common-back-btn:focus {
        background-color: transparent;
        color: #0c0350;
        cursor: pointer;
        border: 1px solid #0c0350;
    }
    
    .common-btn:hover,
    .common-btn:focus {
        color: #fff;
        border: 1px solid red;
        background-color: red;
        cursor: pointer;
    }
    
    .top-btn {
        width: 120px;
        height: 35px;
        border-radius: 5px;
        border: 1px solid red;
        background-color: #fff;
        color: red;
        font-weight: 400;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
    }
    
    .top-btn:hover,
    .top-btn:focus {
        border: 2px solid red;
        background-color: red;
        color: #fff;
        font-weight: 400;
        cursor: pointer;
    }
    
    #newrecepapply_submit {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        color: #fff;
        border-radius: 5px;
        border: 1px solid #e5eae7;
        background-color: green;
        width: 450px;
        margin: 0 auto;
    }
    
    #newrecepapply_submit:hover {
        background-color: red;
        cursor: pointer;
    }
    
    #fee_rate a {
        text-decoration: underline;
    }
    
    #fee_rate a:hover {
        color: red;
    }
    
    #new_form_label {
        color: grey;
        font-weight: 500;
        font-size: 18px;
    }
    /*Input For Calculator*/
    
    .custom-input {
        height: 3.5rem !important;
        width: 100%;
        border: 1px solid #dadbda;
        padding: 0 2px 0 6px !important;
        padding-left: 3px;
        border-radius: 0;
        font-size: 16px;
        font-weight: 600;
        color: black;
    }
    
    .custom-input:focus {
        border: 1.5px solid #c8dbe9;
        /*Changed*/
    }
    
    .custom-input:hover {
        border: 1.5px solid #c8dbe9;
        /*Changed*/
    }
    
    .password-input {
        height: 2.3rem;
        width: 100%;
        border: 1px solid silver;
        padding: 0 2px 0 6px;
        border-radius: 5px;
    }
    
    .password-input:focus,
    .password-input:hover {
        border: 1px solid #a6bbed;
    }
    
    .special-input {
        height: 2.3rem;
        width: 100%;
        border: 1px solid silver;
        padding: 0 2px 0 6px;
        border-radius: 4px;
    }
    
    .special-input:focus {
        border: 1px solid #c3c4e7;
    }
    
    .profile-input {
        height: 2.5rem;
        width: 100%;
        border: 1px solid #c3c4e7;
        padding: 0 2px 0 6px !important;
        border-radius: 2px;
    }
    
    .calc-select-special-input {
        height: 2rem !important;
        width: 100%;
        border: 1px solid #e1e4f3;
        padding: 0 2px 0 6px;
        border-radius: 4px;
    }
    
    .special-input2 {
        height: 2.5rem !important;
        width: 100%;
        border: 1px solid silver;
        padding: 0 2px 0 6px !important;
        border-radius: 4px;
    }
    
    .special-input3 {
        height: 200px;
        width: 100%;
        border: 1px solid silver;
        padding: 0 2px 0 6px;
        border-radius: 4px;
        background-color: #fff;
        outline: none;
    }
    
    .special-input2:focus,
    .special-input2:hover,
    .special-input3:hover,
    .special-input3:focus {
        border: 1px solid #a3b7e6;
    }
    
    #submit button,
    #sender_submit button {
        margin: 0 auto;
        margin-top: 5px;
        padding-bottom: 10px;
        background-color: #30d5c8;
    }
    
    #review_row,
    #confirm {
        color: black;
    }
    
    #sender_title,
    #benef_title,
    #review_title {
        background-color: #dfe4d8;
        color: red;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid silver;
    }
    
    #confirm_title {
        background-color: #dfe4d8;
        color: red;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid silver;
    }
    
    .forms_submitting_row {
        /*Changed*/
        margin-top: 5px;
        padding: 13px;
    }
    
    #benef_section {
        padding: 20px;
    }
    
    #review_details {
        margin-top: 10px;
        padding: 20px;
        margin: 0 auto;
        background-color: #f2f1ed;
    }
    
    #review_top {
        background-color: #fff;
        color: #30d5c8;
        padding: 10px;
        margin: 20px;
        border: 1px solid #c8dbe9;
        border-radius: 5px;
    }
    
    #cards_details {
        margin: 10px;
    }
    
    #cards_details .collapsible-header {
        color: black;
        font-size: 16px;
        font-weight: 300;
        background-color: #fff;
    }
    
    #cards_details .collapsible-body {
        background-color: #fff;
        color: grey;
        font-weight: 400;
        text-align: left;
        padding: 5px;
    }
    
    #ben_left {
        background-color: #fff;
        color: grey;
        font-weight: 400;
        text-align: left;
    }
    
    #ben-right {
        background-color: #fff;
        color: grey;
        font-weight: 400;
        text-align: left;
    }
    
    .the_title {
        background-color: #f2f3f2;
        color: grey;
        font-size: 18px;
        border-bottom: 1px solid grey;
        text-align: left;
    }
    
    #review_top div strong {
        background-color: #f2f2f2;
        color: black;
        font-size: 20px;
    }
    
    .addnew {
        margin: 0 auto;
        border: 1px solid #30d5c8;
        color: #30d5c8;
        border-radius: 4px;
        padding: 5px 10px 5px 10px;
    }
    
    .addnew:hover {
        background-color: #30d5c8;
        border: 1px solid #30d5c8;
        color: #fff;
    }
    
    #new_benef,
    #new_recepient {
        padding: 20px;
        border: 1px solid #f1f4f9;
        margin: 5px;
        padding: 20px;
        border-radius: 5px;
        background-color: #fff;
    }
    
    #new_benef label {
        margin-left: 10px;
    }
    
    #new_benefeciary .row .col,
    #old_recepient .row .col,
    #new_recepient .row .col,
    #old_benef .row .col {
        margin-top: 8px;
    }
    
    #profile_editing_section .row .col {
        margin-top: 5px;
    }
    
    .editbenef_title {
        color: grey;
        font-size: 20px;
        padding-left: 20px;
    }
    
    #addnew_benef {
        margin: 10px;
        border-radius: 3px;
    }
    
    #old_benef,
    #old_recepient {
        background-color: #fff;
    }
    
    #old_benef,
    #old_recepient {
        padding: 20px;
        border: 1px solid #f1f4f9;
        margin: 5px;
        padding: 20px;
        border-radius: 5px;
    }
    
    #profile_row {
        margin: 0 auto;
        width: 450px;
    }
    
    .horizontal {
        border: 1px solid silver;
        height: 120px;
    }
    
    #label_row {
        padding: 10px;
        margin: 5px;
        background-color: #f1f4f9;
    }
    
    #new_sender_row {
        padding: 5px;
        border-radius: 5px;
        margin: 15px;
        border: 1px solid #f1f4f9;
        vertical-align: middle;
    }
    
    #new_sender_row label {
        margin-left: 10px;
    }
    
    #addnew_container {
        padding: 10px;
    }
    
    #calc_title {
        margin: 0 auto;
    }
    
    #calculator_row {
        margin-bottom: 20px;
        background-color: red;
        margin: 0 auto;
    }
    
    .collapsible {
        margin-bottom: -5px;
    }
    
    #calc_heading {
        color: grey;
        background-color: #34c6d3;
    }
    
    #credit_cards {
        padding: 10px;
        border-radius: 5px;
        margin: 10px;
        border: 1px solid silver
    }

	#debit_cards,#ewallet_transfers,
    #bank_transfers {
        padding: 10px;
        border-radius: 5px;
        margin: 5px;
    }
    
    #terms_conditions {
        padding: 10px;
        margin: 10px;
    }
    
    #details a {
        text-decoration: underline;
    }
    
    #details a:hover {
        color: red;
        cursor: pointer;
    }
    
    .card-head {
        font-size:18px!important;
        font-weight: 600!important;
        text-align: center;
        color:#4d4b4e!important;
    }
    
    .card-icon {
        margin-right: 3px;
    }
    
    .card-sub {
        font-weight: 400;
        text-align: center;
    }
    
    .card-fee {
        font-weight:500!important;
        font-size:16px!important;
        text-align: center;
        color:#4d4b4e!important;
    }
    .method_icon{
        color:#e60f1a!important;
        font-size:30px;
    }
    
    .card-btn {
        text-align: center;
    }
    .card-action a{
        font-size:14px;
        font-weight:500;
        text-align: center;
        color:#4d4b4e!important;
    }
    .card-action a:hover{
        text-decoration:underline;
    }
    .card .card-action{
        border-top:1px solid #fff!important;
    }
    
    #debit_cards_row h4 {
        color: #30d5c8;
    }
    
    #row_as_a_table {
        border: 1px solid #005221;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    #row_as_a_table .row {
        padding: 10px;
    }
    
    #first_row {
        background-color: #25a759;
        padding: 10px;
        color: #fff;
    }
    
    #referal_code {
        color: #005221;
        border-bottom: 2px solid #005221;
    }
    
    .category-title {
        color: grey;
        font-weight: 500;
        font-size: 20px;
    }
    
    .category-subtitle {
        color: grey;
        font-weight: 400;
        font-size: 18px;
    }
    
    #payments_row {
        margin: 5px;
    }
    
    #card_subs,
    #bank_subs {
        background-color: #f2f3f2;
        padding: 5px;
        color: black;
    }
    
    .credit_card {
        width: 350px;
        height: 200px;
        border: 1px solid silver;
        margin-top: 10px;
        margin-bottom: 5px;
        border-radius: 7px;
        background-color: silver;
    }
    
    #chip {
        width: 64px;
        height: 64px;
        float: left;
        margin-left: 10px;
    }
    
    #card-number,
    #cardholder-name,
    #valid-till {
        color: #8d8d88;
        font-size: 18px;
        font-weight: 500;
    }
    /* Recepient Section CSS*/
    
    #recepient_details p {
        color: grey;
        font-size: 20px;
        border-bottom: 2px solid grey;
    }
    
    #newbtn-row {
        margin-top: 10px;
    }
    
    #newbtn-row button:hover {
        background-color: #34c6d3;
        color: #fff;
    }
    /*Transactions CSS*/
    
    #trans_details {
        color: black;
        font-size: 12px;
    }
    
    .container-row {
        margin: 5px;
        padding: 5px;
        background-color: #f4f4f3
    }
    
    .container-row-bordered {
        margin: 5px;
        padding: 5px;
        border: 1px solid #fff;
        border-radius: 5px;
    }
    
    .container-row-white {
        margin: 5px;
        padding: 5px;
        background-color: #fff;
    }
    
    .container-rowpass {
        margin: 5px;
        padding: 5px;
        background-color: #f3f3f2;
    }
    
    #transactions_details {
        font-size: 20px;
        color: black;
        margin: 5px;
        padding: 5px;
    }
    
    .recent_benef {
        padding-left: 13px;
        padding-right: 13px;
    }
    
    #btn-box {
        padding-top: 22px;
    }
    
    .list_table {
        font-size: 12px;
        color: black;
    }
    
    .list_table thead tr {
        border-bottom: 2px solid silver;
        color: black;
        background-color: #e3e5e4;
        text-align: left;
    }
    
    .list_table thead tr th {
        text-align: left;
        font-weight: 500;
        font-size: 12px;
    }
    
    .list_table tbody tr td {
        text-align: left;
        font-weight: 400;
        font-size: 12px;
    }
    
    .list_table tbody tr {
        text-align: left;
    }
    
    .list_table tbody tr {
        text-align: left;
    }
    
    .list_table tbody tr:nth-child(even) {
        background-color: #f1f3f9;
    }
    
    .list_table tbody tr:nth-child(odd) {
        background-color: #fff;
    }
    
    .the_titles {
        margin-left: 10px;
        color: black;
        font-size: 18px;
        border-bottom: 2px solid grey;
    }
    
    #back_row {
        margin-bottom: 10px;
        margin-top: 10px;
        padding-left: 8px;
    }
    
    #transactions_detail {
        color: black;
    }
    
    #transaction_header {
        background-color: #e4e7e6;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    /*Steppers Progress Bar*/
    
    .container {
        width: 100%;
        color: black;
        background: #fff;
        font-family: 'Roboto', sans-serif;
        margin-top: 10px;
    }
    
    .progressbar {
        counter-reset: step;
    }
    
    .progressbar li {
        position: relative;
        list-style: none;
        float: left;
        width: 20%;
        text-align: center;
    }
    /* Circles */
    
    .progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 40px;
        height: 40px;
        border: 1px solid #2979FF;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: silver;
        /* Center # in circle */
        line-height: 39px;
    }
    
    .progressbar li:after {
        content: "________________________";
        position: absolute;
        width: 100%;
        height: 1px;
        background: red;
        top: 20px;
        /*half of height Parent (li) */
        left: -50%;
        z-index: -1;
    }
    
    .progressbar li:first-child:after {
        content: none;
    }
    
    .progressbar li.active:before {
        background: green;
        content: "✔";
    }
    
    .progressbar li.active+li:after {
        background: #00E676;
    }
    /*Setting/Password Section*/
    
    #password_rules ul li {
        list-style-type: square;
        margin-left: 10px;
        float: left;
    }
    
    #changepassword-section {
        padding-bottom: 10px;
    }
    
    #changepassword-section label {
        color: black;
        font-size: 13px;
        font-weight: 400;
    }
    
    #password-rules-section {
        padding: 5px;
        padding-left: 10px;
        background-color: #ebf3f9;
        ;
        height: 273px;
        border: 1px solid #efefec;
        border-radius: 4px;
    }
    
    .password_rules {
        padding-left: 10px;
    }
    
    #password-rules-section ul li {
        list-style-type: square;
        margin-left: 15px;
    }
    
    .bar {
        position: relative;
        display: block;
        width: 100%;
    }
    
    .bar:before {
        content: '';
        position: absolute;
        height: 4px;
        width: 0;
        border: 1px;
        background-color: #9b59b6;
        transition: all .4s;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
    }
    
    .weak {
        width: 33.3% !important;
        background-color: #e74c3c;
    }
    
    .medium {
        width: 66.6% !important;
        background-color: #e67e22;
    }
    
    .strong {
        width: 100% !important;
        background-color: #2ecc71;
    }
    
    input:focus~.bar,
    input:valid~.bar {
        width: 100%;
    }
    /*Verification Section Verification*/
    
    .verifcations h4 {
        color: black;
        font-size: 20px;
        font-weight: 400;
    }
    
    .verifcations p {
        color: grey;
        font-size: 16px;
    }
    
    .verifcations .fas {
        font-size: 35px;
        color: #34c6d3;
    }
    
    #verify_rules ul li {
        color: grey;
    }
    
    #confirmations h4,
    #document-heading h4,
    #the-head h4,
    .support-head h4 {
        font-size: 18px;
        color: black;
        font-weight: 600;
        font-family: arial;
    }
    
    #documents-verification .row {
        margin-top: 10px;
    }
    
    #listing {
        padding-left: 20px;
    }
    
    #listing li {
        list-style-type: disc;
        font-size: 14px;
    }
    
    #confirmations p,
    #document-heading p,
    .the-subhead,
    .support-head p {
        font-size: 14px;
        color: black;
        font-weight: 400;
        font-family: arial;
    }
    
    input[type="file"] {
        border: 2px dotted #cacecc;
    }
    
    #identity {
        border: 1px solid green;
        border-radius: 5px;
    }
    
    #start_verify {
        text-align: center;
        text-decoration: none;
        width: 100%;
        height: 3rem;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid green;
        background-color: green;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        padding-top: 10px;
    }
    
    #start_verify:hover {
        background-color: red;
        border-color: red;
        cursor: pointer;
    }
    
    .id-select {
        border: 1px solid silver;
    }
    
    #upload-container {
        /*changed*/
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
    }
    
    .uplaod-area {
        border-bottom: 2px dotted silver;
        height: 50px;
        margin-left: 10px;
        padding-top: 10px;
        background-color: #f3f3f2;
    }
    /*Documents Section*/
    
    #upload-new {
        margin-top: 15px;
    }
    
    #modal-uploads-container {
        border: 1px solid silver;
        margin: 10px;
        border-radius: 5px;
        padding: 10px;
    }
    /*Support Section*/
    
    .contact-row {
        margin-top: 10px;
    }
    
    .icon {
        color: #34c6d3;
        margin-right: 5px;
    }
    
    .social-icons li {
        display: inline;
        margin-right: 10px;
    }
    /*Invite Friends*/
    
    .codes {
        border: 1px dotted black;
        border-radius: 4px;
        padding: 10px;
        width: 250px;
        height: 120px;
    }
    /*Latest Calculator CSS*/
    
    #exchange_rates,
    #fee_row,
    #total_row,
    #promo_row {
        margin-top: 12px;
        margin-bottom: 12px
    }
    
    #exchange_rates span,
    #fee_row span,
    #promo_row span {
        font-size: 16px;
        color: grey;
        font-weight: 500;
    }
    
    #total_row span {
        font-size: 16px;
        color: black;
        font-weight: 500;
    }
    
    #sendmoney_title {
        /*Changed*/
        font-size: 16px;
        font-weight: 500;
        color: black;
    }
    
    .sending_field,
    .currency_field {
        display: inline-block;
    }
    
    .sending_field {
        width: 75%;
        margin-right: -4px;
    }
    
    .currency_field {
        width: 23%;
    }
    
    #receving_country option {
        color: black;
        font-weight: 600;
    }
    
    #fee_amount {
        font-weight: 500;
        margin-top: 5px;
    }
    
    #promo_code {
        font-size: 16px;
        color: black;
        text-decoration: underline;
    }
    
    #promo_code:hover {
        text-decoration: underline;
        cursor: pointer;
        color: green;
    }
    
    #calculated_amount {
        font-size: 16px;
    }
    
    #calculated_amount span {
        font-size: 16px;
    }
    
    .date_box {
        margin-bottom: 5px;
        padding-bottom: 5px;
    }
    
    .med_strong {
        /*Changed*/
        font-size: 16px;
        font-weight: 600;
        font-family: arial;
    }
    /*Debit Card Details*/
    
    #visa_card {
        margin: 10px 0 10px 0px;
        width: 330px;
        background-color: #fff;
        border: 1px solid #d3d7d3;
        height: 200px;
        border-radius: 5px;
        /* box-shadow: silver 1px 1px 1px; */
        float: left;
        padding-left: 10px;
    }
    
    .we_paid {
        font-weight: 500;
    }
    
    #vica_card_left {
        padding-top: 5px;
    }
    
    .payment_card-right {
        text-align: right;
        padding-top: 2px;
        padding-right: 2px;
    }
    
    .card_row {
        margin-top: 10px;
        margin-bottom: 30px;
    }
    
    .card_row strong {
        font-size: 18px;
    }
    
    .card_row span {
        font-size: 13px;
    }
    
    #cards_size,
    #banks_size {
        border:1px solid #d4dada;
        background-color:#d4dada;
        border-radius:10px;
        height: 200px;
       
      
        
    }
    .payment_icon {
        text-align: center;
    }
    
    .last_trans_table tr th
    /*Last Small stepper Transaction List*/
    
    .wrapper-progressBar {
        width: 100%;
    }
    
    .progressBar li {
        font-size: 13px;
    }
    
    .progressBar li {
        list-style-type: none;
        float: left;
        width: 20%;
        position: relative;
        text-align: center;
    }
    
    .progressBar li:before {
        content: "__________________________";
        line-height: 20px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        border: 1px solid #7ba8fe;
        display: block;
        text-align: center;
        margin: 0 auto 10px;
        background-color: white
    }
    
    .progressBar li:after {
        content: "___________________";
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: #ddd;
        color: red;
        top: 15px;
        left: -50%;
        z-index: -1;
    }
    
    .progressBar li:first-child:after {
        content: "________________";
    }
    
    .progressBar li.active {
        color: black;
    }
    
    .progressBar li.active:before {
        /* border-color: #7ba8fe;
    background-color: #000; */
        background: green;
        content: "✔";
    }
    
    .progressBar li.active:after {
        background: red;
    }
    /* -------------------------------------------------------------------------
  VERTICAL STEPPERS FOR MOBLE SCREEN
-------------------------------------------------------------------------- */
    /* Steps */
    
    .step {
        position: relative;
        min-height: 1em;
        color: gray;
    }
    
    .step+.step {
        margin-top: 1.5em
    }
    
    .step>div:first-child {
        position: static;
        height: 0;
    }
    
    .step>div:not(:first-child) {
        margin-left: 1.5em;
        padding-left: 1em;
    }
    
    .step.step-active {
        color: #4285f4
    }
    
    .step.step-active .circle {
        background-color: #4285f4;
    }
    /* Circle */
    
    .circle {
        background: #fff;
        border: 1px solid #4285f4;
        position: relative;
        width: 1em;
        height: 1em;
        line-height: 1.5em;
        border-radius: 100%;
        color: #fff;
        text-align: center;
        box-shadow: 0 0 0 3px #fff;
    }
    /* Vertical Line */
    
    .circle:after {
        content: ' ';
        position: absolute;
        display: block;
        top: 1px;
        right: 50%;
        bottom: 1px;
        left: 50%;
        height: 100%;
        width: 1px;
        transform: scale(1, 2);
        transform-origin: 50% -100%;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: -1;
    }
    
    .step:last-child .circle:after {
        display: none
    }
    /* Stepper Titles */
    
    .title {
        line-height: 1.5em;
        /*font-weight: bold;*/
    }
    
    .caption {
        font-size: 11px;
    }
    /*CSS FOR NOTIFICATION BADGE.*/
    /* Absolute Center Spinner */
    
    #loading {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform: -webkit-translate(-50%, -50%);
        transform: -moz-translate(-50%, -50%);
        transform: -ms-translate(-50%, -50%);
        color: darkred;
        z-index: 999;
    }
    /* for link Disabled */
    
    .disabled {
        cursor: not-allowed;
        pointer-events: none;
    }
    
    #transaction_arrow {
        vertical-align: middle;
        padding-top: 30px;
    }

    #cards_size:hover,
    #banks_size:hover {
        background-color: #a0acac;
        cursor: pointer;
    }
    
    #visa_cards_4btn,
    #maestro_cards_4btn,
    #master_cards_4btn,
    #electron_cards_4btn {
        width: 22px;
        height: 20px;
        vertical-align: middle;
        padding: 0;
    }
    /*New CSS*/
    
    .card_submission_row .col {
        text-align: left;
    }
    
    .radio_span {
        margin-left: 8px;
    }
    
    @media only screen and (max-width: 480px) {
        .radio_span {
            float: center;
        }
        #visa_card {
            margin: 10px 0 10px 0px;
            width: 100%;
            background-color: #fff;
            border: 1px solid silver;
            height: 200px;
            border-radius: 5px;
            /* box-shadow: silver 1px 1px 1px; */
            float: center;
            padding-left: 10px;
        }
        #icons_row_one {
            float: center;
        }
        #icons_row_two {
            float: center;
        }
    }
    
    #icons_row_one .col .row .col {
        text-align: center;
    }
    
    #icons_row_two .col .row .col {
        text-align: center;
    }
    
    #icons_row_one .col,
    #icons_row_two .col {
        text-align: center;
        margin-bottom: -10px;
    }
    
    .pay_now_from_card {
        padding: 10px;
    }
    
    .back_now_from_card {
        padding: 10px;
    }
    
    .pay_now_icon img {
        width: 32px;
        height: 18px;
    }
    
    #cards_parent_row {
        margin-left: 2px;
        border-radius: 4px;
        padding: 4px;
        display: table-cell;
        margin-bottom: 3px;
    }
    
    .the_head h4 {
        color: black;
        font-size: 21px;
        font-weight: 500;
    }
    /*Under Review Page*/
    
    #review_container {
        margin: 0 auto;
        padding: 1px;
    }
    
    #status_heading {
        background-color: #56595b;
        color: #fff;
    }
    
    .verify_title0 {
        font-size: 50px;
        color: #56595b;
    }
    
    .verify_title1 {
        font-size: 24px;
        font-weight: 400;
        color: #56595b;
    }
    
    .verify_title {
        font-size: 22px;
        font-weight: 400;
        color: #fff;
    }
    
    .verify_title2 {
        font-size: 24px;
        font-weight: 400;
        color: #005221;
    }
    
    .verify_title3 {
        font-size: 50px;
        color: #005221;
    }
    
    #alert1_div {
        background-color: #f0f0ef;
        border: 1px solid #f0f0ef;
        border-radius: 5px;
        padding: 8px;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    #btn_div {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .alert_text {
        font-weight: 400;
    }
    
    .alert_row {
        margin-bottom: 10px;
    }
    
    #the_title_row {
        background-color: #005221;
        color: #fff;
    }
    
    #verify_container {
        margin: 0 auto;
        padding: 1px;
    }
    
    span.badge.new:after {
        content: ""
    }
    
    .badge:hover {
        cursor: pointer;
        /* box-shadow: 2px 2px black; */
    }
    
    .identity_pic {
        width: 40px;
        height: 20px;
    }
    
    table td:hover img {
        transform: scale(5.5);
        cursor: pointer;
    }
    
    .disabled_btn {
        cursor: not-allowed ! important;
        background-color: silver;
    }
    /* ***************** Stepper Start ************************ */
    
    .md-stepper-horizontal {
        display: table;
        width: 100%;
        margin: 0 auto;
        background-color: #fff;
        box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .50);
    }
    
    .md-stepper-horizontal .md-step {
        display: table-cell;
        position: relative;
        padding: 24px;
    }
    /* .md-stepper-horizontal .md-step:hover,
.md-stepper-horizontal .md-step:active {
    background-color: rgba(0, 0, 0, 0.04);
} */
    
    .md-stepper-horizontal .md-step:active {
        border-radius: 15% / 75%;
    }
    
    .md-stepper-horizontal .md-step:first-child:active {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .md-stepper-horizontal .md-step:last-child:active {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .md-stepper-horizontal .md-step:hover .md-step-circle {
        background-color: #757575;
    }
    
    .md-stepper-horizontal .md-step:first-child .md-step-bar-left,
    .md-stepper-horizontal .md-step:last-child .md-step-bar-right {
        display: none;
    }
    
    .md-stepper-horizontal .md-step .md-step-circle {
        width: 20px;
        height: 20px;
        margin: 0 auto;
        background-color: #999999;
        border-radius: 50%;
        text-align: center;
        line-height: 25px;
        font-size: 10px;
        font-weight: 400;
        color: #FFFFFF;
    }
    
    .md-stepper-horizontal.green .md-step.active .md-step-circle {
        background-color: #00AE4D;
    }
    
    .md-stepper-horizontal.orange .md-step.active .md-step-circle {
        background-color: #F96302;
    }
    
    .md-stepper-horizontal .md-step.active .md-step-circle {
        background-color: #e60f1a;
    }
    
    .md-stepper-horizontal .md-step.done .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f00c";
        margin: 0;
    }
    
    .md-stepper-horizontal .md-step.done .md-step-circle *,
    .md-stepper-horizontal .md-step.editable .md-step-circle * {
        display: none;
    }
    
    .md-stepper-horizontal .md-step.editable .md-step-circle {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    
    .md-stepper-horizontal .md-step.editable .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f040";
    }
    
    .md-stepper-horizontal .md-step .md-step-title {
        margin-top: 16px;
        font-size: 10px;
        font-weight: 600;
    }
    
    .md-stepper-horizontal .md-step .md-step-title,
    .md-stepper-horizontal .md-step .md-step-optional {
        text-align: center;
        color: rgba(0, 0, 0, .26);
    }
    
    .md-stepper-horizontal .md-step.active .md-step-title {
        font-weight: 600;
        color: rgba(0, 0, 0, .87);
    }
    
    .md-stepper-horizontal .md-step.active.done .md-step-title,
    .md-stepper-horizontal .md-step.active.editable .md-step-title {
        font-weight: 600;
    }
    
    .md-stepper-horizontal .md-step .md-step-optional {
        font-size: 12px;
    }
    
    .md-stepper-horizontal .md-step.active .md-step-optional {
        color: rgba(0, 0, 0, .54);
    }
    
    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        position: absolute;
        top: 36px;
        height: 1px;
        border-top: 2px solid #e60f1a;
    }
    
    .md-stepper-horizontal .md-step .md-step-bar-right {
        right: 0;
        left: 50%;
        margin-left: 15px;
    }
    
    .md-stepper-horizontal .md-step .md-step-bar-left {
        left: 0;
        right: 50%;
        margin-right: 15px;
    }
    /* ***************** Stepper End ************************ */
    /*******************Small screen stepper******************/
    /* @media only screen and (max-width: 600px) {
    .md-stepper-horizontal {
        display:table;
        width:100%;
        margin:0 auto;
        background-color:#fff;
        box-shadow: 0 3px 8px -6px rgba(0,0,0,.50);
    }
    .md-stepper-horizontal .md-step {
        display:table-cell;
        position:relative;
        padding:24px;
    }
    .md-stepper-horizontal .md-step:active {
        border-radius: 15% / 75%;
    }
    .md-stepper-horizontal .md-step:first-child:active {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .md-stepper-horizontal .md-step:last-child:active {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .md-stepper-horizontal .md-step:hover .md-step-circle {
        background-color:#757575;
    }
    .md-stepper-horizontal .md-step:first-child .md-step-bar-left,
    .md-stepper-horizontal .md-step:last-child .md-step-bar-right {
        display:none;
    }
    .md-stepper-horizontal .md-step .md-step-circle {
        width:25px;
        height:25px;
        margin:0 auto;
        background-color:#999999;
        border-radius: 50%;
        text-align: center;
        line-height:25px;
        font-size: 14px;
        font-weight: 400;
        color:#FFFFFF;
    }
    .md-stepper-horizontal.green .md-step.active .md-step-circle {
        background-color:#00AE4D;
    }
    .md-stepper-horizontal.orange .md-step.active .md-step-circle {
        background-color:#F96302;
    }
    .md-stepper-horizontal .md-step.active .md-step-circle {
        background-color: rgb(33,150,243);
    }
    .md-stepper-horizontal .md-step.done .md-step-circle:before {
        font-family:'FontAwesome';
        font-weight:100;
        content: "\f00c";
    }
    .md-stepper-horizontal .md-step.done .md-step-circle *,
    .md-stepper-horizontal .md-step.editable .md-step-circle * {
        display:none;
    }
    .md-stepper-horizontal .md-step.editable .md-step-circle {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    .md-stepper-horizontal .md-step.editable .md-step-circle:before {
        font-family:'FontAwesome';
        font-weight:100;
        content: "\f040";
    }
    .md-stepper-horizontal .md-step .md-step-title {
        margin-top:16px;
        font-size:10px;
        font-weight:600;
    }
    .md-stepper-horizontal .md-step .md-step-title,
    .md-stepper-horizontal .md-step .md-step-optional {
        text-align: center;
        color:rgba(0,0,0,.26);
    }
    .md-stepper-horizontal .md-step.active .md-step-title {
        font-weight: 600;
        color:rgba(0,0,0,.87);
    }
    .md-stepper-horizontal .md-step.active.done .md-step-title,
    .md-stepper-horizontal .md-step.active.editable .md-step-title {
        font-weight:600;
    }
    .md-stepper-horizontal .md-step .md-step-optional {
        font-size:12px;
    }
    .md-stepper-horizontal .md-step.active .md-step-optional {
        color:rgba(0,0,0,.54);
    }
    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        position:absolute;
        top:36px;
        height:1px;
        border-top:2px solid #2196F3;
    }
    .md-stepper-horizontal .md-step .md-step-bar-right {
        right:0;
        left:50%;
        margin-left:15px;
    }
    .md-stepper-horizontal .md-step .md-step-bar-left {
        left:0;
        right:50%;
        margin-right:15px;
    }

    @media only screen and (max-width: 600px) {
        .md-stepper-horizontal {
        display:table;
        width:100%;
        margin:0 auto;
        background-color:#fff;
        box-shadow: 0 3px 8px -6px rgba(0,0,0,.50);
    }
    .md-stepper-horizontal .md-step {
        display:block;
        position:relative;
        padding:24px;
    }

    .md-stepper-horizontal .md-step:active {
        border-radius: 15% / 75%;
    }
    .md-stepper-horizontal .md-step:first-child:active {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .md-stepper-horizontal .md-step:last-child:active {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .md-stepper-horizontal .md-step:hover .md-step-circle {
        background-color:#757575;
    }
    .md-stepper-horizontal .md-step:first-child .md-step-bar-left,
    .md-stepper-horizontal .md-step:last-child .md-step-bar-right {
        display:none;
    }
    .md-stepper-horizontal .md-step .md-step-circle {
        width:25px;
        height:25px;
        margin:0 auto;
        background-color:#999999;
        border-radius: 50%;
        text-align: center;
        line-height:25px;
        font-size: 14px;
        font-weight: 400;
        color:#FFFFFF;
    }
    .md-stepper-horizontal.green .md-step.active .md-step-circle {
        background-color:#00AE4D;
    }
    .md-stepper-horizontal.orange .md-step.active .md-step-circle {
        background-color:#F96302;
    }
    .md-stepper-horizontal .md-step.active .md-step-circle {
        background-color: rgb(33,150,243);
    }
    .md-stepper-horizontal .md-step.done .md-step-circle:before {
        font-family:'FontAwesome';
        font-weight:100;
        content: "\f00c";
    }
    .md-stepper-horizontal .md-step.done .md-step-circle *,
    .md-stepper-horizontal .md-step.editable .md-step-circle * {
        display:none;
    }
    .md-stepper-horizontal .md-step.editable .md-step-circle {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    .md-stepper-horizontal .md-step.editable .md-step-circle:before {
        font-family:'FontAwesome';
        font-weight:100;
        content: "\f040";
    }
    .md-stepper-horizontal .md-step .md-step-title {
        margin-top:16px;
        font-size:10px;
        font-weight:600;
    }
    .md-stepper-horizontal .md-step .md-step-title,
    .md-stepper-horizontal .md-step .md-step-optional {
        text-align: center;
        color:rgba(0,0,0,.26);
    }
    .md-stepper-horizontal .md-step.active .md-step-title {
        font-weight: 600;
        color:rgba(0,0,0,.87);
    }
    .md-stepper-horizontal .md-step.active.done .md-step-title,
    .md-stepper-horizontal .md-step.active.editable .md-step-title {
        font-weight:600;
    }
    .md-stepper-horizontal .md-step .md-step-optional {
        font-size:12px;
    }
    .md-stepper-horizontal .md-step.active .md-step-optional {
        color:rgba(0,0,0,.54);
    }
    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        position:absolute;
        top:36px;
        height:1px;
        border-top:2px solid #2196F3;
    }
    .md-stepper-horizontal .md-step .md-step-bar-right {
        right:0;
        left:50%;
        margin-left:15px;
    }
    .md-stepper-horizontal .md-step .md-step-bar-left {
        left:0;
        right:50%;
        margin-right:15px;
    }
        
        }
} */
    /*******************End of Small Screen stepper***********/
    
    #no_recent_transaction {
        border: 1px solid #c9cbd9;
        border-radius: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #e1e2ea;
    }
    
    #pdf_generate_btn:hover {
        cursor: pointer;
    }
    /*Newly Added: 03/08/2020*/
    
    #country_flag {
        margin-top: 2.5px;
    }
    
    #country_name {
        text-align: left;
        margin-left: -9px;
    }
    
    .tick_mark {
        margin-top: -5px;
        font-size: 10px;
        vertical-align: middle;
        float: center;
    }
    
    .step_completed {
        font-family: arial;
        font-size: 12px;
        color: grey;
        font-weight: 500;
        animation: 2s blinker linear infinite;
        -webkit-animation: 2s blinker linear infinite;
        -moz-animation: 2s blinker linear infinite;
        color: grey;
    }
    
    @-moz-keyframes blinker {
        0% {
            opacity: 1.0;
        }
        50% {
            opacity: 0.0;
        }
        100% {
            opacity: 1.0;
        }
    }
    
    @-webkit-keyframes blinker {
        0% {
            opacity: 1.0;
        }
        50% {
            opacity: 0.0;
        }
        100% {
            opacity: 1.0;
        }
    }
    
    @keyframes blinker {
        0% {
            opacity: 1.0;
        }
        50% {
            opacity: 0.0;
        }
        100% {
            opacity: 1.0;
        }
    }
    
    #side_area {
        margin-top: -3px;
    }
    
    .collapsible_title {
        margin: 0;
        padding: 0;
        color: #213647;
        font-weight: 500;
        font-size: 14px;
        /* font-size:14px;
    font-weight:500;
    font-family:arial; */
    }
    
    .collapsible_title_icon {
        font-size: 14px;
    }
    
    #transaction_arrow i {
        color: black;
    }
    
    .receriver_currency,
    .sender_currency {
        font-family: arial;
        font-weight: 500;
    }
    
    #all_tick {
        width: 70px;
        height: 70px;
    }
    
    .transaction_ready {
        font-family: arial;
        font-weight: 500;
        font-size: 20px;
    }
    
    .to_complete {
        color: grey;
        font-weight: 500;
        font-size: 16px;
    }
    
    .please_transfer {
        font-family: arial;
        font-weight: 400;
        font-size: 16px;
    }
    
    .transfer_details {
        font-family: arial;
        font-weight: 400;
        font-size: 14px;
    }
    
    #profile_editing_section .row .col {
        margin-bottom: 6px;
    }
    /*tabs styles*/
    
    #dashboard_steps li a {
        text-decoration: none;
        color: black;
        background-color: none;
        font-size: 11px;
        font-weight: 500;
    }
    
    #dashboard_steps li a.active {
        color: black;
        background-color: #fce3e7;
    }
    
    #dashboard_steps li a:active,
    #dashboard_steps li a:focus {
        color: black;
        background-color: #fce3e7;
    }
    
    #payButtonLoader,
    #update-docs-loader,
    #btn_profile_loader,
    #submit_verification_loader,
    #simpleDocLoader {
        padding: 0;
        margin: 0;
        width: 11px;
        height: 11px;
        font-size: 11px;
    }
    
    #found_records {
        padding-left: 10px;
    }
    
    .status_label {
        width: 120px;
        cursor: auto;
    }
    
    .table-btn2 {
        display: inline-block;
        border-radius: 4px;
        border: 1px solid #ffa3a3;
        background-color: transparent;
        color: #ffa3a3;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        display: inline-flex;
        align-items: center;
        height: 24px;
        align-items: center;
    }
    
    .table-btn2 i {
        font-size: 13px;
    }
    
    .table-btn2:hover,
    .table-btn2:focus,
    .table-btn2:active {
        border: 1px solid #f32828;
        background-color: transparent;
        color: #f32828;
    }
    
    .transaction_searchbox {
        height: 2.3rem;
        width: 100%;
        border: 1px solid #c3c4e7;
        padding: 0 2px 0 6px;
        border-radius: 4px;
        width: 120px;
    }
    
    #searchbox_row {
        padding-left: 10px;
    }
    
    .transaction_left {
        font-size: 13px;
        color: rgb(102, 100, 100);
        font-weight: 400;
        line-height: 24px;
        font-weight: 500;
        padding-left: 10px;
    }
    
    .transaction_right {
        font-size: 13px;
        color: black;
        font-weight: 400;
        line-height: 24px;
        font-size: 14px;
        font-weight: 500;
        padding-left: 10px;
    }
    
    .transaction_title {
        font-size: 18px;
        line-height: 24px;
        margin-top: 0;
        margin-bottom: 0;
        font-family: Arial;
        font-weight: 600;
        line-height: 1.2;
        color: black;
        text-transform: none;
        letter-spacing: 0;
    }
    
    .transaction_title {
        padding-left: 10px;
    }
    
    @media only screen and (max-device-width: 480px) {
        #country_name {
            text-align: left;
            margin-left: -2px;
        }
    }
    
    .no_records {
        text-align: center;
        color: red;
        padding: 7px;
        font-weight: 500;
        font-size: 15px;
    }
    
    .created_label {
        background-color: #106b21;
    }
    
    .funds_waiting_label {
        background-color: silver;
    }
    
    .cancelling_label {
        background-color: red;
    }
    /* 

funds_received_label
under_review_label
ready_to_pay_label
paid_label
cancelled_label
refunded_label
.cancelling_label
 */
    /* ******************* for Change password Start *************** */
    /* Add a green text color and a checkmark when the requirements are right */
    
    .valid {
        color: green;
    }
    
    .valid:before {
        position: relative;
        left: -35px;
        content: "✔";
    }
    /* Add a red text color and an "x" when the requirements are wrong */
    
    .invalid {
        color: red;
    }
    
    .invalid:before {
        position: relative;
        left: -35px;
        /* content: "*"; */
    }
    /* ******************* for Change password End *************** */
    
    .password_title {
        font-size: 18px;
        line-height: 24px;
        margin-top: 0;
        margin-bottom: 0;
        font-family: Arial;
        font-weight: 600;
        line-height: 1.2;
        color: black;
        text-transform: none;
        letter-spacing: 0;
    }
    
    .password_change_desc {
        color: #63686a;
        font-size: 14px;
        font-family: arial;
        font-weight: 400;
    }
    
    .password_field_row {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    
    #submit_passwords {
        margin-top: 15px;
    }
    
    .password_rules {
        padding-left: 30px;
    }
    
    #message {
        padding-top: 10px;
    }
    
    .password_label {
        font-weight: 600;
        font-family: arial;
        font-size: 13px;
    }
    
    .contact_subtitiles {
        color: #63686a;
        font-size: 14px;
        font-family: arial;
        font-weight: 400;
    }
    
    #contact_right_col {
        background-color: #ebf3f9;
        padding-top: 10px;
    }
    
    #captcha_code {
        height: 2.5rem;
        width: 100%;
        border: 1px solid silver;
        padding: 0 2px 0 6px;
        border-radius: 4px;
        width: 98%;
        margin-top: 2px;
    }
    
    #captcha_code:hover,
    .captcha_code:focus {
        border: 1px solid #a3b7e6;
    }
    
    .captcha_label {
        font-size: 15px;
        color: grey;
    }
    
    #contact_left_col {
        margin-bottom: 20px;
    }
    /* Payment Method Icon */
    
    #method_name {
        margin-left: -8px;
    }
    
    #icon_flag {
        margin-top: 1px;
    }
    
    #icon_flag3 {
        margin-right: 15px;
    }
    
    @media only screen and (max-width: 320px) {
        #method_name {
            margin-left: 2px;
        }
        #country_name {
            margin-left: 1px;
        }
    }
    
    #payment_cards {
        margin-bottom: 7px;
    }
    /*End of Payment Method Icon Setting*/
    
    .old_bf_edit_area .row .col {
        margin-bottom: 7px;
    }
    
    .new-documents-from .row .col {
        margin-bottom: 10px;
    }
    /* #steppercontainer{
    width: 177px;
    height: 102px;
    display: flex;
    overflow-x: auto;
    background-color: lightgrey;
} */
    
    @media only screen and (max-width: 600px) {
        #stepper_container {
            width: 100%;
            overflow-x: scroll;
            white-space: nowrap;
            margin-bottom: 5px;
        }
        #stepper_container .md-stepper-horizontal {
            -webkit-animation-name: move;
            -webkit-animation-duration: 12s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: left;
            -webkit-animation-timing-function: left;
        }
        #stepper_container .md-stepper-horizontal:hover {
            -webkit-animation-play-state: paused;
        }
        @-webkit-keyframes move {
            0% {
                margin-left: -300px;
            }
            100% {
                margin-left: 300px;
            }
        }
    }
    /*Ipad Pro*/
    /*Scrollbar Styling*/
    
    * {
        scrollbar-width: thin;
        scrollbar-color: #fff grey;
    }
    /* Works on Chrome/Edge/Safari */
    
    *::-webkit-scrollbar {
        width: 12px;
        height: 10px;
    }
    
    *::-webkit-scrollbar-track {
        background: #fff;
    }
    
    *::-webkit-scrollbar-thumb {
        background-color: silver;
        border-radius: 20px;
        border: 2px solid silver;
    }
    /*End of Scrollbar Styling*/
    /* Making Tabs Swifable */
    
    .collapsible-body {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .edit-documents-from .row .col {
        margin-top: 5px;
    }
    /*IPad Pro Media Query*/
    
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
        #country_name {
            text-align: left;
            margin-left: 2px;
        }
        #method_name {
            margin-left: 2px;
        }
    }
    
    @media only screen and (max-width: 600px) {
        #method_name {
            margin-left: 1px;
        }
    }
    /*IPad Media Query*/
    
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        #method_name {
            margin-left: 2px;
        }
        #country_name {
            margin-left: 2px;
        }
        #icon_flag3 {
            margin-right: 12px;
        }
    }
    /*For IOS to not destroy my CSS*/
    
    textarea,
    button,
    input.text,
    input[type="text"],
    input[type="date"],
    input[type="button"],
    input[type="submit"],
    .input-checkbox {
        -webkit-appearance: none;
    }
    /*CSS FOR SECTION ADDED LATER ON IN PAYMENT SECTION*/
    
    #right_area_later {
        margin-top: 10px;
    }
    /* for loader */
    
    #overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2;
        cursor: pointer;
    }
    
    #text {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 50px;
        color: white;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    
    .overlay {
        background-color: #EFEFEF;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 1000;
        top: 0px;
        left: 0px;
        opacity: .5;
        /* in FireFox */
        filter: alpha(opacity=50);
        /* in IE */
    }
    
    .bank_res_msg {
        font-weight: 600;
        color: #e71837;
        font-size: 12px;
        margin-top: -6px;
        border: 1px solid #fbdadf;
        background-color: #fbdadf;
        padding: 5px;
        border-radius: 8px;
    }
    
    .iban_error_msg_style:not(:empty) {
        margin-top: 3px;
        padding: 3px;
        color: #fff;
        font-size: 10px;
        background-color: red;
        font-weight: 500;
        text-align: center;
        border-radius: 5px;
    }
    
    .old_iban_error_e_style:not(:empty) {
        color: #fff;
        font-size: 10px;
        background-color: red;
        padding: 3px;
        font-weight: 500;
        text-align: center;
        border: 1px solid red;
        border-radius: 5px;
    }
    
    .select2-selection {
        border-bottom: 1px solid #dadbda !important;
    }
    
    .top_small_logo {
        width: 170px;
        height: 70px
    }
    
    a.close-sidenav>i.material-icons {
        position: absolute;
        right: 20px;
        top: 5px;
        color: #fff;
        font-size: 30px;
        font-weight: 600;
    }
    /*Dropdown*/
    
    .dropdown-content {
        background-color: #FFFFFF;
        margin: 0;
        display: none;
        min-width: 300px;
        /* Changed this to accomodate content width */
        max-height: auto;
        margin-left: -1px;
        /* Add this to keep dropdown in line with edge of navbar */
        overflow: hidden;
        /* Changed this from overflow-y:auto; to overflow:hidden; */
        opacity: 0;
        position: absolute;
        white-space: nowrap;
        z-index: 1;
        will-change: width, height;
    }
    /*error mesdsage css*/
    .limit_exceeds {
        color: #e20000;
        font-size: 12px;
        font-weight: 500;
    }
    /*invite friend*/
    .invite_friend{
        width:200px;
        height:200px;
    }
    .invite_friend_para{
        font-weight:500;
        font-size:18px;
    }
    .follow_steps{
        font-weight:500;
        font-size:16px;
        color:grey;
    }
    .stepper_pic{
        width:500px;
    }

    /* -----------------------------------Changes done for sohail Portal-----------------------------*/
    #payments_row_second{
        margin:5px;
    }
    #wallet_size, #rewards_size {
        background-color:#d4dada;
        border:1px solid #d4dada;
        border-radius:10px;
        height:200px;
    }
    #wallet_size:hover, #rewards_size:hover{
        background-color: #a0acac;
        cursor: pointer;
    }
    /* News added for reward payment option*/
    .container-row-bordered_reward{
        margin: 5px;
        padding: 10px;
        border: 1px solid #fff!important;
        border-radius: 5px;
    }
    .reward_trans_ready{
        font-family: arial;
        font-weight: 600;
        font-size: 24px;
        color:#e20000;
    }
    .rewards_to_complete {
        color: grey;
        font-weight: 500;
        font-size: 18px;
    }
    .please_transfer {
        font-family: arial;
        font-weight: 600;
        font-size: 18px;
        color:#414040;
    }
    #payment_cards .select2-selection__rendered {
        height: 2.5rem !important;
        width: 100%;
        border: 1px solid silver;
        padding: 0 2px 0 6px !important;
        border-radius: 4px;
    }
    #payment_cards .select2-selection {
        border-bottom: 1px solid #fff !important;
    }
    /* already there */
    img.left {
        float: left !important;
        margin-right: 8px;
    }
    /* already there */
    #visa_card {
        margin: 10px 0 10px 0px;
        width: 330px;
        background-color: #fff;
        border: 1px solid silver;
        height: 200px;
        border-radius: 5px;
        /* box-shadow: silver 1px 1px 1px 1px; */
        float: left;
        padding-left: 10px;
    }
    @media only screen and (max-width: 600px) {
        .radio_span {
            float: center;
        }
        #visa_card {
            margin: 10px 0 10px 0px;
            width: 100%;
            background-color: #fff;
            border: 1px solid silver;
            height: 200px;
            border-radius: 5px;
            /* box-shadow: silver 1px 1px 1px; */
            float: center;
            padding-left: 10px;
        }
        #icons_row_one {
            float: center;
        }
        #icons_row_two {
            float: center;
        }
    }
    @media only screen and (max-width: 480px) {
        .radio_span {
            float: center;
        }
        #visa_card {
            margin: 10px 0 10px 0px;
            width: 100%;
            background-color: #fff;
            border: 1px solid silver;
            height: 200px;
            border-radius: 5px;
            /* box-shadow: silver 1px 1px 1px; */
            float: center;
            padding-left: 10px;
        }
        #icons_row_one {
            float: center;
        }
        #icons_row_two {
            float: center;
        }
    }
    .complete_the_process{
        margin-top:5px;
        margin-bottom:5px;
    }
    .insuf_bordered_col_one{
        background-color:#e5e4e2;
        height:40px;
        padding-top:10px!important;
    }
    .insuf_bordered_col_two{
        background-color:#d3e3e2;
        padding-top:10px!important;
        height:40px;
    }
    .insuf_bordered_col_three{
        background-color:#f4e3d8;
        padding-top:10px!important;
        height:40px; 
    }
    .spaced_col_on_lg{
        /* margin-top:20px!important; */
        margin-top:35px!important;
    }
    @media only screen and (max-width: 600px) {
        .spaced_col_on_lg{
            margin-top:0px!important;
        }
    }
    .container-row-bordered-silver {
        margin: 5px;
        padding: 5px;
        border: 1px solid silver;
        border-radius: 5px;
    }
    .aligned_row{
        padding-top:6px!important;
    }
    @media only screen and (max-width: 600px) {
        .pay_now{
            margin-top:7px;
        }
    }
    @media only screen and (max-width: 480px) {
        .pay_now{
            margin-top:7px;
        }
    }
    /* CSS for balance modal, will appear on clicking balance button */
    #balance_modal{
        height:auto;
    }
    .balance_modal_header{
        background-color: #e60f1a;
        color:#fff;
        padding-top:3px;
        padding-bottom:3px;
    }
    .bal_contents_row{
        border:1px solid #e4e7e6;
        padding-top:10px;
        padding-bottom:10px;
    }
    .balance_type_container{
        background-color:#d4dada;
        border:1px solid #d4dada;
        border-radius:10px;
        padding-top:15px;
        padding-bottom:15px;
    }
    .balanace_type_title{
        color:black;
        font-size:18px;
        font-weight:600;
    }
    .balance_amount{
        color:black;
        font-size:16px;
        font-weight:600;
    }
    .bal_btn_div{
        border-top:1px solid #eaebeb;
        padding-top:8px;
    }
    .balance_type_btn{
        display: inline-block;
        border-radius: 4px;
        border: 1px solid grey;
        background-color: transparent;
        color: grey;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        transition: all 0.2s ease-in;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        display: inline-flex;
        align-items: center;
        height: 24px;
        -webkit-appearance: none;
        outline: 0;
        resize: none;
        font-weight:500;
    }
    .balance_type_btn:hover{
        color:black;
        border:1px solid black;
        cursor:pointer;
        background-color: transparent;

    }
    @media only screen and (max-width: 600px) {
        .bal_contents_row .col{
            margin-bottom:10px;
        }
    }
    .close_col_right i{
        margin-top:4px!important;
    }
    .type_icon_div{
        margin-bottom:5px;
    }
    .statement_modal{
        width:auto;
    }
    
    body{
        overflow: auto !important;
    }
  .notify_btn{
      border:1px solid red;
      border-radius:50%;
      background:red;
      color:#fff;
      width:18px;
      height:18px;
      font-size:10px;
      font-weight:500;
      text-align:center;
      vertical-align: middle;
      padding:0px;
  }
  .notify_btn:hover{
    background:red;
    border:1px solid red;
  }
  .small-text-balance-isnot_enough{
      color:#c7ccc9;
      font-size:15px;
  }
  /* .rewards_li a.active{
      background-color:red;
  } */
  .sidenav li a.active * {
    color: #f0f0f0 !important;
    background: #ec0000 !important;
}

/* CSS For Bank Section added laterally */
.bank_section_title{
    font-size:20px;
    color:black;
    font-weight:500;
}
.bank_section_title_row{
    background-color:#e6e6e6;
    border:1px solid #e6e6e6;
    border-radius:5px;
    color:black;
    padding:10px 0 10px 0;
}
.bank_section_inner_row{
    padding:6px 0 6px 0;
    border-bottom:2px solid #e6e6e6;
    margin-bottom:4px;
}
.row_as_a_table_section{
    margin-top:7px;
    margin-bottom:3px;
}
.please_transfer_the_amount{
    font-size:16px;
    color:grey;
    font-weight:500;
}
.container-row-bordered-silver-light{
    margin: 5px;
    padding: 5px;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
}
@media only screen and (max-width: 600px) {
    #payButton {
      margin-top:3px;
    }
    .row_as_a_table_section{
        margin:0 6px 0 6px;
        padding:0 6px 0 6px;
    }
    .bank_section_title_row{
        margin-left:4px;
        margin-right:4px;
    }

  }

  .pdf_icon{
    font-size:36px;
    color:#f32828;
}

.social-icons-list a{
    text-decoration:none;
    display: inline-block;
    font-size:48px!important;
    margin-left:3px;
}
.social-icons-list a .fab{
    font-size:42px!important;
}



/* start Wallet work */
#authorization_modal .browser-default{
    width:100%;
    height: 32px!important;
}
#authorization_modal {
    width: 320px !important;
    height: 340px!important;
}
#authorization_modal_header {
    background-color: #D50000;
    color: #fff;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.auth_logo_img{
    width:190px;
    height:70px;
}
.resend_code_span{
    text-decoration:underline;
    font-weight:600;
    font-size:14px;
}
.resend_code_span:hover{
    cursor:pointer;
}
.rtbs{
    margin-bottom:10px;
}

/* End Wallet work */