html{
    font-size:10px;
}

body {
    color: #333333;
    font-family: "Univers Regular",Arial,sans-serif;
    font-size: 1.6rem;
    line-height: 1.333;
    text-transform: none;
}

h1, .h1 {
    font-size: 2.75rem;
}

h2, .h2 {
    font-size: 2.188rem;
}

h3, .h3 {
    font-size: 1.75rem;
}

h4, .h4 {
    font-size: 1.375rem;
}

h5, .h5 {
    font-size: 1rem;
}

a {
    font-family: "Univers Medium";
    color: #333;
    text-decoration: none;
    font-size: 1.6rem;
}

    a.btn {
        padding-top: 13px;
        min-height: 4.4rem;
        height: auto;
    }

    a .icon {
        margin-bottom: 0.3rem;
    }

    a:hover {
        text-decoration: underline;
        color: #db0011!important;
    }

    a:active, a:focus {
        outline-offset: 2px;
        text-decoration: underline;
        color: #db0011!important;
    }

.header {
    height: auto;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
}
    .header .logo {
        padding: 1.6rem 2rem;
    }
    .header .logo img {
        width: 200px;
    }


fluent-autocomplete::part(control), fluent-text-field::part(control) {
    /*font-size: 1.4rem !important;
    padding: 6px 10px !important;
    line-height: 120% !important;
    font-weight: normal !important;
    color: #333333 !important;
    text-align: left !important;
    height: 4.4rem !important;
    border: 1px solid #767676 !important;
    -moz-border-radius: 0px !important;*/ /* Firefox */
    /*-webkit-border-radius: 0px !important;*/ /* Safari, Chrome */
    /*-khtml-border-radius: 0px !important;*/ /* KHTML */
    /*border-radius: 0px !important;*/ /* CSS3 */
}

fluent-autocomplete::part(input), fluent-text-field::part(input) {

}

fluent-autocomplete::part(listbox), fluent-text-field::part(listbox) {

}

fluent-autocomplete::part(option), fluent-text-field::part(option) {

}
/*.control {
    font-size: 1.4rem !important;
    padding: 6px 10px !important;
    line-height: 120% !important;
    font-weight: normal !important;
    color: #333333 !important;
    text-align: left !important;
    height: 4.4rem !important;
    border: 1px solid #767676 !important;
    -moz-border-radius: 0px !important;*/ /* Firefox */
    /*-webkit-border-radius: 0px !important;*/ /* Safari, Chrome */
    /*-khtml-border-radius: 0px !important;*/ /* KHTML */
    /*border-radius: 0px !important;*/ /* CSS3 */
/*}*/

.form-control {
    font-size: 1.4rem;
    padding: 6px 10px;
    line-height: 120%;
    font-weight: normal;
    color: #333333;
    text-align: left;
    height: 4.4rem;
    border: 1px solid #767676;
    -moz-border-radius: 0px; /* Firefox */
    -webkit-border-radius: 0px; /* Safari, Chrome */
    -khtml-border-radius: 0px; /* KHTML */
    border-radius: 0px; /* CSS3 */
}

    .form-control:focus {
        border: 1px solid #227BCE;
    }

    .form-control:hover {
        border: 1px solid #227BCE;
    }

.btn, button {
    border: medium none;
    font-size: 1.6rem;
    line-height: normal;
    padding: 0 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    min-height: 4.4rem;
    white-space: normal;
}

    .btn:focus, button:focus {
        outline: auto;
        outline-offset: 2px;
    }

.btn-primary {
    background-color: #db0011 !important;
    color: #fff !important;
}

    .btn-primary:disabled {
        cursor: not-allowed;
        background: #af000d none repeat scroll 0 0 !important;
        /*background: #a4000d none repeat scroll 0 0 !important;*/
    }

    .btn-primary:hover, .btn-primary:focus, .btn-primary[disabled]:hover, .btn-primary.disabled:hover {
        color: #fff !important;
        background: #af000d none repeat scroll 0 0 !important;
        /*background: #a4000d none repeat scroll 0 0 !important;*/
    }

    .btn-primary:active {
        color: #fff !important;
        background: #83000A none repeat scroll 0 0 !important;
    }

        .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
            color: #fff !important;
            background: #83000A none repeat scroll 0 0 !important;
        }

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

.btn-secondary {
    background-color: #fff;
    border: 0.1rem solid #333;
    color: #333;
}

    .btn-secondary:focus-visible {
        background-color: #fff !important;
        border: 0.1rem solid #333 !important;
        color: #333 !important;
    }

    .btn-secondary:hover, .btn-secondary:focus {
        background: #F1F3F4 none repeat scroll 0 0;
        color: #333 !important;
        border: 0.1rem solid #333 !important;
    }

    .btn-secondary:active {
        background: #E4E8EA none repeat scroll 0 0 !important;
        border: 0.1rem solid #333 !important;
        color: #333 !important;
    }

.btn-jade {
    background-color: #00847F !important;
    color: #fff;
}

    .btn-jade:hover, .btn-jade:focus {
        color: #fff;
        background: #005E59 none repeat scroll 0 0;
    }

    .btn-jade:active {
        color: #fff;
        background: #005E59 none repeat scroll 0 0;
    }

.btn-slate {
    background-color: #4d6474;
    color: #fff;
}

    .btn-slate:hover, .btn-slate:focus {
        color: #fff !important;
        background: #3e505d none repeat scroll 0 0 !important;
    }

    .btn-slate:active {
        color: #fff !important;
        background: #253038 none repeat scroll 0 0 !important;
    }

.btn-dark {
    background-color: transparent;
    border: 0.1rem solid #fff;
    color: #fff;
}

    .btn-dark:hover, .btn-dark:focus {
        color: #fff;
        background: #31404a none repeat scroll 0 0;
    }

    .btn-dark:active {
        color: #fff;
        background: #1d262c none repeat scroll 0 0;
    }

.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}


.radio-inline {
    opacity: 0;
    position: absolute;
}

.radio-inline-label:before {
    content: '';
    border: 1px solid #929292;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.radio-inline-label {
    font-family: "Univers Medium";
    font-size: 1.4rem;
    line-height: 120%;
    color: #333333;
    text-align: left;
}


.radio-inline, .radio-inline-label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

/*table {*/
    /*border: 1px solid #c1c1c1;*/
    /*border: 1px solid #E4E8EA;
    font-size: 1.4rem;
    color: #333333;
}

th, .tablesorter-header {
    font-weight: bold;
    height: 40px;*/
    /*padding: 20px;*/
    /*color: #4d6474;
    padding: 10px 10px 12px 10px !important;
    vertical-align: top;
    background-image: none !important;
    position: relative;
    cursor: pointer;*/
    /*text-align:center;
    border-right: 1px solid #c1c1c1;*/
/*}

    th::after, .tablesorter-header::after {
        content: url('/Content/HSBC/hsbc-icon-svg/sort.svg');
        filter: invert(17%) sepia(0%) saturate(0%) hue-rotate(247deg) brightness(98%) contrast(90%);
        position: absolute;
        left: calc(100% - 22px);
        top: 12px;
        width: 12px;
    }

    th:hover::after, .tablesorter-header:hover::after {
        content: url('/Content/HSBC/hsbc-icon-svg/sort.svg');
        filter: invert(100%) sepia(0%) saturate(7475%) hue-rotate(337deg) brightness(116%) contrast(100%);
    }

.tablesorter-default thead .sorter-false::after {
    content: none;
}

.tablesorter-headerAsc::after {
    content: url('/Content/HSBC/hsbc-icon-svg/filterup.svg');
    filter: invert(100%) sepia(0%) saturate(7475%) hue-rotate(337deg) brightness(116%) contrast(100%);
    position: absolute;
    left: calc(100% - 22px);
    top: 12px;
    width: 12px;
}

.tablesorter-headerDesc::after {
    content: url('/Content/HSBC/hsbc-icon-svg/filterdown.svg');
    filter: invert(100%) sepia(0%) saturate(7475%) hue-rotate(337deg) brightness(116%) contrast(100%);
}

.tablesorter-header {
    padding-right: 30px !important;
}

thead {
    border: 1px solid #FFF;
}

    thead tr {
        background: #E4E8EA;
    }

        thead tr th:hover {
            background: #3E505D;
            color: #FFF;
        }

        thead tr th:active {
            background: #1D262C;
            color: #FFF;
        }

.tablesorter-headerAsc, .tablesorter-headerDesc {
    background: #4D6474;
    color: #FFF;
    border-bottom: none;
}

tbody tr:hover {
    background: #F1F3F4;
    cursor: pointer;
}

tbody tr td {
    border-top: 1px solid #C9D0D5;
    border-bottom: 1px solid #C9D0D5;
    border-left: 1px solid #F1F3F4;
    border-right: 1px solid #F1F3F4;
    padding: 8px 10px 11px 10px;
}

    tbody tr td:hover {
        background: #F1F3F4;
    }*/



/**Abhi CSS*/

.hsbc-grid td,
.hsbc-grid th
{
    padding: 12px;
    border-bottom: 1px solid #ccc;
    height: 65px !important;
}

/* Apply to FluentTextField and FluentNumberField */
.form-control,
.form-control fluent-text-field,
.form-control fluent-number-field
{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
}

    /* Style the actual input box inside */
    .form-control fluent-text-field::part(control),
    .form-control fluent-number-field::part(control)
    {
        width: 100% !important;
        padding: .375rem .75rem !important;
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
        color: #212529 !important;
        background-color: #fff !important;
        border: 1px solid #ced4da !important;
        border-radius: .25rem !important;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

        /* Focus state */
        .form-control fluent-text-field::part(control):focus,
        .form-control fluent-number-field::part(control):focus
        {
            outline: 0 !important;
            border-color: #86b7fe !important;
            box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important;
        }

    /* Disabled state */
    .form-control fluent-text-field[disabled]::part(control),
    .form-control fluent-number-field[disabled]::part(control)
    {
        background-color: #e9ecef !important;
        cursor: not-allowed !important;
    }

p.fluent-typography {
    font-size: 1.6rem!important;
    text-align: left;
    padding-top: 6px;
    font-weight: normal;
    padding-bottom: 8px;
}

.hsbc-displayText{
    padding:10px;
}

.makeBold{
    font-weight:bold;
}