@media screen and (max-width: 425px) {
    .mrv {
        margin: 0px 0px 0px -18px !important;
    }
    .mrb
    {
        width:100% !important;
    }
}
.fs14
{
    font-size:14px !important;
}
.gray-text
{
    color:#ccc;
}
.rating-text {
    color: #49494A;
    font-size: 16px;
    font-weight: 300;
    text-align: right;
}
.fs36 {
    font-size: 36px;
}
.mb7
{
    margin-bottom:7px;
}
/* Add by Abdullah_20201123*/
.txt-hint {
    font-size: 12px;
}
.modal-scroll-content {
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: auto;
}

.half-width{
    width:50%;
}

.btn-sm {
    font-size: .875rem !important;
}

.btn-xs {
    font-size: .775rem !important;
}

.btn-container {
    width: 100%;
    text-align: center;
}

.btn-container-center {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .btn-container .btn, .btn-container-center .btn {
        width: 100%;
        font-size: 12px;
        border-radius: 2px;
        margin-bottom: 8px;
    }

.card-title-14 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.29;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-title-16 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.29;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-content-14 {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: #a6a6a6;
    font-family: MuseoSans;
}

.card-content-14-12 {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: #a6a6a6;
    font-family: MuseoSans;
}

@media screen and (min-width: 768px) {
    .btn-container {
        display: flex;
        justify-content: flex-end;
        text-align: right;
    }

        .btn-container .btn, .btn-container-center .btn {
            max-width: 200px;
            border-radius: 4px;
        }

            .btn-container .btn + .btn, .btn-container-center .btn + .btn {
                margin-left: 24px;
            }
            
}
@media screen and (max-width: 425px)
{
    .w12 {
        width: 22% !important;
    }

    .w88 {
        width: 78% !important;
    }
}
.w12 {
    width: 12%;
}

.w88 {
    width: 88%;
}
.btn-container .btn.btn-green, .btn-container-center .btn.btn-green {
    color: #fff;
    background-color: #20BD4C;
    border-color: #20BD4C;
}

.btn-container .btn.btn-outline,
.btn-container-center .btn.btn-outline {
    background-color: transparent;
    border: 1px solid #20BD4C;
    color: #20BD4C;
}

    .btn-container .btn.btn-outline:disabled,
    .btn-container-center .btn.btn-outline:disabled {
        border-color: #a6a6a6;
        color: #a6a6a6;
    }

.btn-green:focus {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5);
}

.btn-container .btn:not(.disabled):hover,
.btn-container .btn:not(:disabled):hover,
.btn-container-center .btn:not(.disabled):hover,
.btn-container-center .btn:not(:disabled):hover {
    position: relative;
    /*top: -4px;*/
    /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
}
/************************** -= DEFAULTS =- ****************************/

.list-group-item:first-child {
    border-top: none;
}

a.nav-right:hover {
    text-decoration: none;
}

.modal-header .close {
    padding: 36px 36px 0 0 !important
}

.modal-header:not(.remove-css) {
    padding: 0 0 20px 0 !important;
}

.modal {
    padding: 0 !important;
    overflow-y: scroll;
}

.sliding_nav ul li {
    display: inline;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.close-container {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 2000;
}

.close {
    opacity: 1 !important;
    /* ALEPH */
    width: 24px;
    height: 24px;
    background-image: url(/assets/img/close.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

    .close.close-white {
        background-image: url(/assets/img/close-white.svg);
    }

    .close.close-dark {
        background-image: url(/assets/img/close-dark-grey.svg);
    }

.slide_menu {
    font-family: MuseoSans;
    display: inline-block;
    width: 9%;
    padding: .75rem 0;
    margin: 0;
    color: #fff !important;
    text-decoration: none;
}

    .slide_menu:hover {
        font-family: MuseoSans;
        display: inline-block;
        width: 9%;
        padding: .75rem 0;
        margin: 0;
        font-weight: 600;
        color: #fff !important;
        text-decoration: none;
    }

.two:hover ~ hr {
    margin-left: 10%;
    opacity: 1 !important;
}

.three:hover ~ hr {
    margin-left: 19%;
    opacity: 1 !important;
}

.four:hover ~ hr {
    margin-left: 28%;
    opacity: 1 !important;
}

.five:hover ~ hr {
    margin-left: 20%;
    opacity: 1 !important;
}

.hr-menu {
    height: .15rem;
    width: 9%;
    margin: 0;
    background: #fff;
    border: none;
    transition: .3s ease-in-out;
    opacity: 1 !important;
    background-color: white;
    box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.76);
}

/*Snackbar styles*/
.center-snack {
    position: absolute;
    left: 50%;
    top: 50px;
}

#snackbar {
    visibility: hidden;
    max-width: 872px;
    position: relative;
    margin: 0 auto;
    color: #000;
    text-align: center;
    border-radius: 2px;
    padding: 16px 32px;
    z-index: 1;
    top: 100px;
    left: -50%;
    font-size: 16px;
    border-radius: 4px;
    background-color: #fecc39;
    box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);
    font-family: MuseoSans;
}

    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 100px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 100px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 100px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 100px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

a {
    color: #1c79ca;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

    a:enabled:hover {
        color: #1c79ca;
        cursor: pointer;
        text-decoration: underline;
    }

.collapse.navbar-collapse .form-inline.form-inline-nav .btn a:hover {
    text-decoration: none;
}

.email-template-left-img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.email-template-right-img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.tool-tip-text-32 {
    font-size: 32px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 0.75;
    letter-spacing: normal;
    text-align: center;
    color: #49494a;
}

.tool-tip-text-16 {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #49494a;
}

.hint-text {
    position: relative;
    top: -32px;
    height: 12px;
    font-family: MuseoSans;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #ffffff;
}

    .hint-text.warning {
        color: rgb(254, 204, 57);
    }

.divider-left {
    border-left: solid 1px rgba(192, 192, 192, 0.5);
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.link-white,
.link-white:enabled:hover {
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

html,
body {
    margin: 0;
    font-family: MuseoSans;
}

.d-flex {
    min-height: 100%; /* fix IE11 */
}

@font-face {
    font-family: MuseoSans-500;
    src: url(../../../assets/fonts/MuseoSans-500.otf);
}

@font-face {
    font-family: MuseoSans;
    src: url(../../../assets/fonts/MuseoSans-300.otf);
}

.font-500 {
    font-family: MuseoSans-500 !important;
    font-weight: 500 !important;
}

.mobile-view {
    display: none;
}

.mobile-view-dashboard {
    display: none;
}

.desktop-view {
    display: block;
}

.desktop-view-dashboard {
    display: flex;
}

section {
    /* min-height: 800px; */
    margin: 60px 60px 0px;
    padding-top: 60px;
}

.section-email {
    min-height: 450px;
    margin: 0px 24px 0px !important;
    padding-top: 2px;
}

.section-bulk {
    min-height: 800px;
    margin: 60px 60px 0px;
    padding-top: 0;
}

.hr-white {
    background-color: #fff;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    opacity: 0.5;
}

.hr-inverse {
    padding-bottom: 32px !important;
}

/** Vertical **/

.divider {
    border-left: solid 1px rgba(192, 192, 192, 0.5);
    width: 1px !important;
    /*height: 60px;*/
}

.default-spacing {
    margin-bottom: 24px;
    margin-top: 10px;
}

.default-bottom-spacing-20 {
    margin-bottom: 20px;
}

.default-bottom-spacing-40 {
    margin-bottom: 50px;
}

.default-bottom-spacing-60 {
    margin-bottom: 60px;
}

.default-bottom-spacing-80 {
    margin-bottom: 80px;
}

.email-survey-padding {
    padding-bottom: 120px;
}

.default-spacing-24 {
    margin-bottom: 24px;
}

.default-force-bottom-spacing-25 {
    margin-bottom: 25px !important;
}

.default-force-bottom-spacing-60 {
    margin-bottom: 60px !important;
}

.margin-top-8 {
    margin-top: 8px;
}

.margin-top-3 {
    margin-top: 0.2rem;
}

.default-spacing-p {
    margin-top: 16px;
}

.desktop-top-spacing {
    margin-top: 15px !important;
}

.hidden {
    display: none;
}

.hiddenImportant {
    display: none !important;
}

.hidden-md {
    display: none;
    visibility: hidden;
}

.hidden-xs {
    display: block;
    visibility: visible;
}

.cursor-pointer {
    cursor: pointer;
}

/** Add Shadow **/

.add-bottom-shadow {
    padding: 5px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1)
}

.add-top-shadow {
    box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.1)
}

/** Add Shadow End */

.card {
    height: auto;
    width: 100%;
    box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.2);
    border: 0.0rem solid rgba(0, 0, 0, 0.125);
    border-radius: 5px;
}

    .card.yellow-background {
        background-color: #fecc39;
    }

    .card.lightblue-background {
        background-color: #e3f2ff;
    }

.card-footer {
    background-color: white;
    border-top: none;
    text-align: center;
}

.wrapper-title {
    padding: 1.1rem 0 2rem;
}

    .wrapper-title p {
        padding-bottom: 0;
        margin-bottom: 0;
    }

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .wrapper-title {
        margin-top: 1.5rem;
    }

    .base-content {
        margin-bottom: 110px;
    }
}
/* End Tablet */

.base-container {
    margin-top: 20px;
}

.base-content {
    padding-bottom: 50px;
    padding-top: 0;
    margin-top: -30px;
}

.base-content-email {
    padding-bottom: 50px;
}

.top-space {
    margin-top: 50px;
}

.card-body {
    padding: 0 !important;
}

.list-search {
    width: 2300px !important;
}

.account-type {
    padding: .25rem .50rem !important;
    width: 104px !important;
    margin-left: 48px !important;
}

/** Sort Style **/

.btn-download {
    float: right;
}

.label-right {
    display: none;
    font-family: MuseoSans;
    color: #49494a;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

#side-menu {
    color: black;
    width: 20px;
    list-style: none;
}

    #side-menu:hover {
        width: 60px !important;
        display: inline-block;
    }

    #side-menu .operator {
        cursor: pointer;
    }

    #side-menu:hover .label-right {
        display: inline-block;
    }

.desktop-alignment-center {
    text-align: center;
}

.res-align {
    text-align: left;
}

.no-right-padding {
    padding-right: 0px !important;
}

.no-left-padding {
    padding-left: 0px !important;
}

.diff-left-margin {
    margin-left: -1rem !important;
}

.map-view {
    height: 100%;
    min-height: 560px !important;
    background: lightgrey;
}

.invisible {
    display: none !important
}

.green-theme-selection,
.blue-theme-selection {
    list-style-type: none;
}

    .green-theme-selection .check-alternate,
    .blue-theme-selection .check-alternate {
        float: left;
        margin: 0 5px 0 0;
        width: 100%;
        height: auto;
        min-height: 48px;
        max-width: 200px;
        position: relative;
    }

    .green-theme-selection label,
    .green-theme-selection input,
    .blue-theme-selection label,
    .blue-theme-selection input {
        display: block;
        width: 100%;
    }

        .green-theme-selection input[type="radio"],
        .blue-theme-selection input[type="radio"] {
            display: none;
        }

            .green-theme-selection input[type="radio"]:disabled + label,
            .blue-theme-selection input[type="radio"]:disabled + label {
                opacity: .65;
                cursor: default;
            }

            .green-theme-selection input[type="radio"]:checked + label {
                margin: auto;
                border-radius: 4px;
                color: #fff;
                border: solid 1px #20BD4C !important;
                background-color: #20BD4C !important;
            }

            .blue-theme-selection input[type="radio"]:checked + label {
                margin: auto;
                border-radius: 4px;
                color: #1c79ca;
                border: solid 1px #ffffff !important;
                background-color: white !important;
            }

                .blue-theme-selection input[type="radio"]:checked + label:hover {
                    background-color: #D9EDFF !important;
                    border: solid 1px #D9EDFF !important;
                }

    .green-theme-selection label {
        margin: auto;
        padding: 0.25rem;
        text-align: center;
        border-radius: 4px;
        border: solid 1px #20BD4C;
        color: #20BD4C;
        cursor: pointer;
        font-size: 12px;
    }

    .blue-theme-selection label {
        margin: auto;
        padding: 0.45rem;
        text-align: center;
        border-radius: 4px;
        border: solid 1px #ffffff;
        color: white;
        cursor: pointer;
        font-size: 12px;
    }

        .blue-theme-selection label:hover {
            background-color: rgba(0,137,253, 0.1);
        }

#ajax-loader-element {
    display: none;
    /* Hidden by default */
}

/*landing*/

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-zoom: none;
}

button:focus {
    outline: 0;
}

#loading-plug {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 5;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

.loading-plug-icon {
    width: 96px;
    height: 96px;
}

    .loading-plug-icon.position-fixed {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

@media screen and (max-width: 425px) {
    .loading-plug-icon {
        width: 48px;
        height: 48px;
    }
}

.dashboard_my_account {
    cursor: pointer;
}

.dashboard-dropdown {
    width: 18px;
    cursor: pointer;
    font-size: 24px;
}

/*.card-dropdown-dashboard {
    z-index: 4 !important;
    position: relative;
    transform: none !important;
    top: 80px !important;
}*/

.contractor-profile-card {
    width: 360px;
}

/*Changes for Manage Account dropdown -- 29-10-2018*/
/*.dropdown-overlay .dropdown-menu {
    z-index: 1;
    border-radius: 6px !important;
    border: 0 !important;
    width: 100%;
}*/

.removeCorner {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#overlay {
    position: fixed;
    /* Sit on top of the page content */
    display: none;
    /* Hidden by default */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black background with opacity */
    z-index: 3;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
}

#dropdownMenuButton {
    z-index: 5;
}

#dropdownMenuButtonTop {
    z-index: 5;
}

#ajax-loader-element {
    position: fixed;
    /* Sit on top of the page content */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0, 0, 0, 0.5); */
    background: linear-gradient(#6844DB, #3187ef);
    /* Black background with opacity */
    z-index: 10;
    /* Specify a stack order in case you're using a different order for other elements */
    /* Add a pointer on hover */
}

.top-area {
    margin-top: 160px;
}

.top-area-profile {
    margin-top: 138px;
}

.box-wrap-password-desktop {
    margin-top: 391px;
    height: 360px;
    width: 100%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
}

.box-wrap-password-mobile {
    display: none;
}

.box-wrap-register-desktop {
    margin-top: 12px;
    height: 360px;
    width: 100%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
}

.box-wrap-register-mobile {
    display: none;
}

.box-wrap-register-bulk-mobile {
    display: none;
}

.box-wrap-register-bulk-desktop {
    margin-top: 49px;
    height: 360px;
    width: 100%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
}

.box-wrap-login-desktop {
    margin-top: 296px;
    height: 360px;
    width: 100%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
}

.box-wrap-login-mobile {
    display: none;
}

.box {
    width: 251px;
    height: 216px;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    transition: top ease 0.5s;
    background-color: #ffffff;
    text-align: center;
    box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);
}

    .box:hover {
        top: -10px;
    }

.box-img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.box-desc {
    height: 48px;
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
    color: #49494a;
    margin-top: 5px;
    font-family: MuseoSans;
}

.row-500 {
    height: 500px;
}

.box-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    color: #1c79ca;
    margin-top: 10px;
    margin-bottom: 5px;
    font-family: MuseoSans;
}

.policy-text {
    color: #fecc39;
    font-family: MuseoSans;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
}

    .policy-text:hover {
        color: #fecc39;
        text-decoration: underline;
    }

.orange-click-here {
    color: #fecc39;
    cursor: pointer;
}

    .orange-click-here:hover {
        color: #fecc39 !important;
        cursor: pointer;
        text-decoration: underline;
    }

/************************** -= DEFAULTS =- ****************************/

/************************** -= Circles =- ****************************/

.red-dot {
    height: 12px;
    width: 12px;
    background-color: #e23219;
    border-radius: 50%;
    display: inline-block;
    margin-top: 8px;
}

.green-dot {
    height: 12px;
    width: 12px;
    background-color: #20bd4c;
    border-radius: 50%;
    display: inline-block;
    margin-top: 8px;
}

.gray-dot {
    height: 12px;
    width: 12px;
    background-color: #a6a6a6;
    border-radius: 50%;
    display: inline-block;
    margin-top: 8px;
}

.yellow-dot {
    height: 12px;
    width: 12px;
    background-color: #fecc39;
    border-radius: 50%;
    display: inline-block;
    margin-top: 8px;
}

.blue-dot {
    height: 12px;
    width: 12px;
    background-color: #1c79ca;
    border-radius: 50%;
    display: inline-block;
    margin-top: 8px;
}

/************************** -= Circles =- ****************************/

#settings,
#notification,
#logout {
    cursor: pointer;
}

/************************** -= TABLES =- ****************************/

.list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0 !important;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

    .list-group-item:last-child {
        border-bottom: 1 solid rgba(0, 0, 0, 1) !important;
    }

.list-group-flush:last-child .list-group-item:last-child {
    border-bottom: 1 solid rgba(0, 0, 0, 1) !important;
}

.list-group-header {
    border-top: 2 solid #49494a !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
    background-color: #49494a;
    color: #fff !important;
    padding: 10px;
}

.table-header {
    color: #fff !important;
}

.card-form-table {
    width: 100%;
    background-color: #49494a;
    border-top: 2 solid #49494a !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

    .card-form-table td, .card-form-table td .btn {
        font-size: 12px;
    }

    .card-form-table tbody {
        background-color: #fff;
        font-size: 12px;
    }

    .card-form-table tr {
        border-bottom: 1px solid #e4e4e4;
        font-family: MuseoSans;
        font-size: 12px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #49494a;
    }

@media screen and (max-width: 425px) {
    .card-form-table tr {
        border-bottom: 1px solid #e4e4e4;
        font-family: MuseoSans;
        font-size: 12px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #49494a;
    }
}

.filter-card {
    position: relative;
    right: 0px;
    float: right;
    cursor: pointer;
}

.table-header-text {
    font-family: MuseoSans-500;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    padding: 16px;
    font-size: 12px;
}

@media screen and (max-width: 425px) {
    .table-header-text {
        font-family: MuseoSans-500;
        font-size: 12px;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        padding: 16px;
    }
}


.table-header-filter, .table-header-sort {
    font-family: MuseoSans-500;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #49494a;
    cursor: pointer;
}

#divgridOwnedAccount {
    position: relative;
    margin-top: -30px;
}

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

    #divgridOwnedAccount {
        margin-top: 0px;
    }
}

@media screen and (min-width: 100px) and (max-width: 576px) {
    #ddlFilterAccountType {
    }

    .manage-electricity .card-option-control {
        width: 60% !important;
    }
}

.filter-img {
    padding-bottom: 4px;
}

.list-group-item-title {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #49494a;
    white-space: -moz-pre-wrap !important;
    white-space: -webkit-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

.list-group-item-title-subject {
    text-align: center;
}

.list-group-item-title-header {
    font-family: MuseoSans;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #fff;
}

.list-group-data-title {
    font-family: MuseoSans;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #49494a;
}

.list-group-data-desc {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #a6a6a6;
}

.list-group-data-text {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #49494a;
    height: 80px;
    line-height: 80px;
}

.table-footer {
    margin: 10px 0px 0px 0px;
    text-align: center;
}

.table-footer-page-indicator-show {
    float: left;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
}

.table-footer-page-indicator {
    width: 25px;
    float: right;
    padding-top: 13px;
}

.table-indicator-textstyle {
    font-weight: 900;
}

.table-footer .col-md-1 {
    padding-left: 0px !important;
}

.table-footer {
    color: #49494a;
}

.page-navigator {
    color: #49494a !important;
    opacity: 1 !important;
    margin-top: 10px;
    height: 24px;
    width: 24px;
    font-size: 24px;
}

.footer-text {
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #49494a;
    text-align: left !important;
}

.table-checked::after {
    content: url('../../../assets/img/check.svg');
    width: 24px;
    height: 24px;
}

/************************** -= TABLES END =- ****************************/

/**************************** -=NAVIGATION=- ***********************************/

/** NAVS */

.Logo-White-email {
    width: 80px;
    height: 32px;
    object-fit: contain;
    margin: 10px 0px 5px 20px;
}

.Logo-White {
    width: 120px;
    height: 48px;
    object-fit: contain;
    padding: 5px;
    /*margin: 10px 0px 15px 20px;*/
}

.Logo-White-Mobile {
    width: 3.75rem;
    height: 2rem;
    object-fit: contain;
}

.navbar {
    -webkit-transition: padding 0.2s ease;
    -moz-transition: padding 0.2s ease;
    -o-transition: padding 0.2s ease;
    transition: padding 0.2s ease;
    background-color: transparent;
}

.navbar-right-alignment {
    margin-top: 0.6rem;
    margin-bottom: -0.6rem;
}

.affix {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
    -webkit-transition: padding 0.2s linear;
    -moz-transition: padding 0.2s linear;
    -o-transition: padding 0.2s linear;
    transition: padding 0.2s linear;
    background-image: linear-gradient(to left, #2a97fb, #7730d3);
    box-shadow: 0 4px 16px 0 rgba(73, 73, 74, 0.16);
}

    .affix .search {
        top: 60px;
        right: 82px;
    }

.img-container {
    position: relative;
}

    .img-container img {
        bottom: 0;
        position: absolute;
        right: 15px;
    }

.search {
    position: absolute;
    top: 71px;
    right: 60px;
    left: auto;
    transform: translateX(-10%) translateY(-10%);
    -webkit-transform: translateX(-10%) translateY(-10%);
}

.search__wrapper {
    top: -42px;
    position: relative;
}

.search__field {
    width: 30px;
    height: 33px;
    opacity: 0.6;
    margin-top: 18px;
    margin-left: 29px;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    font-family: MuseoSans;
    background: transparent;
    padding: 0.35em 50px 0.35em 0;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
}

    .search__field:focus {
        width: 10vw;
        background: transparent;
        font-family: MuseoSans;
        font-size: 16px;
        color: #fff;
        opacity: 0.6;
        margin-top: 16px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    .search__field::-webkit-input-placeholder {
        color: #fff;
        position: relative;
        margin-top: 9px;
        margin-left: 29px;
        transition-property: top, color;
        transition-duration: .1s;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }

    .search__field:focus ~ .search__icon {
        pointer-events: auto;
        background-color: transparent;
    }

.search__icon .img {
    width: 24px !important;
    height: 24px !important;
}

/*
.input[type=text]:focus {
    padding: 18px;
} */

.search__icon {
    position: absolute;
    top: 18px;
    left: 14px;
    color: #fff;
    background-color: transparent;
    width: 24px;
    height: 24px;
    text-align: left;
    border-color: transparent;
    pointer-events: none;
    display: inline-block;
    transition: background-color 0.2s ease-in-out;
}

nav {
    color: white !important;
    background-color: transparent;
}

/** General CSS **/

.nav-gutter {
    padding: 32px 17px;
}

.nav-mobile {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    color: #49494a;
    width: 100%;
    z-index: 1000;
}

.nav-icons {
    width: 24px;
    height: 24px;
}

.card-icons {
    width: 24px;
    height: 24px;
}

.navbar-brand {
    margin-left: 44px;
    margin-right: 30px;
}

.form-inline-nav {
    margin-right: 45px;
}

.nav ul {
    list-style-type: none;
    margin: 0;
}

.nav .nav-title {
    display: inline-block;
}

.nav .nav-title,
.nav-individual {
    font-family: MuseoSans;
    /* font-size: 18px; */
    opacity: 0.6;
    color: #fff;
    display: block;
    position: relative;
    text-decoration: none;
    padding-bottom: 8px;
    margin-left: 20px;
    /*margin-right: 20px;*/
    margin-right: 5px;
    margin-top: 10px;
}

    .nav .nav-title:hover {
        display: block;
        color: white;
        text-decoration: none;
        position: relative;
        opacity: 1 !important;
        padding-bottom: 8px;
    }

    .nav .nav-title.active {
        display: block;
        color: white !important;
        text-decoration: none;
        position: relative;
        padding-bottom: 8px;
        opacity: 1 !important;
        font-family: MuseoSans-500;
        font-weight: 500;
    }

/* WHY?!?!?!  :@  */
.active {
    display: block;
}
/* Fix for datepicker due to above .active rule */
.datepicker td.day.active {
    display: table-cell;
}

.active:before {
    opacity: 1 !important;
    transform: translateY(4px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.active:after {
    opacity: 1 !important;
    transform: translateY(4px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.nav .nav-title:before,
.nav .nav-title:after,
.nav .active:before,
.nav .active:after {
    content: '';
    border-radius: 2px;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: white;
    /*box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.76);*/
}

.nav .nav-title:before {
    opacity: 0;
    transform: translateY(-8px);
    transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}

.nav .nav-title:after {
    opacity: 0;
    transform: translateY(4px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.nav .nav-title:hover:before,
.nav-title:hover:after,
.nav-title:focus:before,
.nav-title:focus:after,
.nav .active:before,
.nav .active:after {
    opacity: 1;
    transform: translateY(0) !important;
}

.nav .nav-title:hover:before,
.nav-title:focus:before,
.nav .active:before {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.nav .nav-title:hover:after,
.nav-title:focus:after,
.nav .active:after {
    transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}

.nav-individual-spacing {
    margin-right: 60px;
}

.navbar-light .navbar-toggler {
    border: 0 !important;
    position: relative;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.nav-notification {
    margin-left: 150px;
}

.navbar-brand {
    margin-left: 3px;
}

.form-inline-nav {
    margin-right: 3px;
}

.has-mega-menu .container-md-res {
    width: 517px;
}

.drop-item-title {
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    padding: 0.30rem .125rem !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    color: #49494a;
    display: block;
}

    .drop-item-title,
    .drop-item-title:hover {
        font-size: 18px;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        padding: 0.30rem .125rem !important;
        line-height: 1.4 !important;
        opacity: 1 !important;
        color: #49494a;
        display: block;
    }

.dropdown-item-custom {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #a6a6a6 !important;
    opacity: 1 !important;
    padding: 0.30rem .125rem !important;
    clear: both;
    text-align: inherit !important;
    white-space: nowrap;
    border: 0;
    text-decoration: none;
}

/*20230628 - New class for navigation submenu*/
.nav-subMenu {
    position: relative;
}

.nav-subMenu:hover .nav-subMenu-content {
    display: block;
}

.nav-subMenu-content {
    position: absolute;
    display: none;
    width: 200px;
    padding: 0.8rem 1rem;
    color: #212529;
    background-color: #fff;
    border-radius: 0.25rem;
}

.nav-subMenu-item {
    font-weight: 300;
    color: #212529;
}
/*20230628 - New class for navigation submenu*/

/**************************** -=NAVIGATION END=- ***********************************/

/**************************** -=CUSTOM TOOLTIP START=- ***********************************/

/*20230705 - New class for tooltip remaining balance*/
.tooltipBtn {
    position: relative;
    display: inline-block;
}

.tooltipBtn .tooltipBtnText {
    visibility: hidden;
    width: 250px;
    background-color: #fff;
    color: #fff;
    text-align: left !important;
    border-radius: 6px;
    padding: 15px 15px 0px 15px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -120px;
    height: fit-content;
    max-height: 230px !important;
    overflow: auto;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    margin-bottom: -20px;
}

.tooltipBtn ::-webkit-scrollbar {
    width: 5px;
}

.tooltipBtn ::-webkit-scrollbar-thumb {
    background: #E4E4E4;
    border-radius: 50px;
}
/*20230705 - New class for tooltip remaining balance*/

/**************************** -=CUSTOM TOOLTIP END=- ***********************************/

/***************************  -= Scroll Style =- ********************************/

.ScrollStyle-horizontal {
    overflow-x: auto !important;
}

.ScrollStyle {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 280px;
    list-style-type: none;
    -webkit-overflow-scrolling: touch !important; /*Fixed 2154 & 2225*/
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .ScrollStyle-mobile {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 280px;
        list-style-type: none;
        -webkit-overflow-scrolling: touch !important;
    }
}

.ScrollStyle-no-height {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
}

.table-responsive {
    -ms-overflow-style: scrollbar;
}

.ScrollStyle::-webkit-scrollbar {
    width: 0.25em;
    height: 0.25em;
}

.ScrollStyle::-webkit-scrollbar-thumb {
    background-color: #e4e4e4;
    outline: 1px solid white;
    border-radius: 10px;
}

/**************************** -=BACKGROUND START =-*****************************/
.background-250 {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    height: 250px;
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

.background-450 {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    height: 450px;
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

.background-540 {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    height: 540px;
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

.background-720 {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: 720px;
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

.background-1044 {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: 1000px;
    /* background: linear-gradient(#6844DB, #3187ef); */
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

.background {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: auto;
    min-height: 100%;
    /* background: linear-gradient(#6844DB, #3187ef); */
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

.background-1200 {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: 1200px;
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

.background-full {
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
}

@media (min-width: 100px) and (max-width: 991.98px) {
    .background-250, .background-450, .background-540, .background-720, .background-1044, .background, .background-1200, .background-full {
        background-attachment: scroll;
    }
}


.background-tower-1200 {
    background-image: url(../../../assets/img/background-image.png) !important;
    background-color: transparent !important;
    background-repeat: repeat-x;
    object-fit: contain;
    height: 1200px !important;
    margin: 0px;
    padding: 0px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    min-height: 720px;
    z-index: -1;
}

.background-tower-900 {
    background-image: url(../../../assets/img/background-image.png) !important;
    background-color: transparent !important;
    background-repeat: repeat-x;
    object-fit: contain;
    height: 900px !important;
    margin: 0px;
    padding: 0px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    min-height: 900px;
    z-index: -1;
}

.background-tower-600 {
    background-image: url(../../../assets/img/background-image.png) !important;
    background-color: transparent !important;
    background-repeat: repeat-x;
    object-fit: contain;
    height: 900px !important;
    margin: 0px;
    padding: 0px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    min-height: 570px;
    z-index: -1;
}

/**************************** -=BACKGROUND END =-*****************************/

/** REMOVE DEFAULTS START  **/

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    outline: none;
}

.content-inside .container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.content-inside .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/** REMOVE DEFAULTS END **/

/**************************** -= TABS =-*****************************************/

.clickable-link {
    cursor: pointer;
}

/**************************** -=INPUT FORMS START =-*****************************/

/** CHECKBOX START **/

.checkbox-text {
    padding-top: 0.15rem;
    padding-left: 2.25rem;
}

.square {
    position: relative;
}

    .square label {
        background-color: #fff;
        border: solid 1px #a6a6a6;
        cursor: pointer;
        left: 0;
        position: absolute;
        top: 5px;
        width: 18px;
        height: 18px;
        border-radius: 2px;
    }

        .square label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 5px;
            opacity: 0;
            position: absolute;
            top: 4px;
            left: 2px;
            transform: rotate(-45deg);
            width: 10px;
        }

    .square.checkmark-white label:after {
        border: 2px solid #007bff;
        border-top: none;
        border-right: none;
        content: "";
        height: 5px;
        opacity: 0;
        position: absolute;
        top: 4px;
        left: 2px;
        transform: rotate(-45deg);
        width: 10px;
    }

    .square input[type="checkbox"] {
        display: none;
    }

        .square input[type="checkbox"]:checked + label {
            background-color: #20bd4c;
            border-color: #20bd4c;
        }

    .square.checkmark-white input[type="checkbox"]:checked + label {
        background-color: #fff;
        border-color: #fff;
    }

    .square input[type="checkbox"]:checked + label:after {
        opacity: 1;
    }

.round {
    position: relative;
}

    .round label {
        background-color: #fff;
        border: solid 3px #e4e4e4;
        border-radius: 50%;
        cursor: pointer;
        left: 0;
        position: absolute;
        top: 0;
        width: 30px;
        height: 30px;
    }

        .round label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 6px;
            left: 7px;
            opacity: 0;
            position: absolute;
            top: 8px;
            transform: rotate(-45deg);
            width: 12px;
        }

    .round input[type="checkbox"] {
        visibility: hidden;
    }

        .round input[type="checkbox"]:checked + label {
            background-color: #1c79ca;
            border-color: #1c79ca;
        }

            .round input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }

.remove-default-list {
    list-style-type: none;
    padding: 0 !important;
}

.check-style {
    color: #1C79CA;
    font-size: 16px;
    opacity: 1 !important;
    margin-top: -2px;
}

/* Grey Checkbox */

/* The container */

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


@media screen and (max-width: 425px) {
    .checkbox-container {
        cursor: pointer;
        font-size: 14px;
    }
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border: solid 1px #a6a6a6;
    border-radius: 2px;
}

/* On mouse-over, add a grey background color */

.checkbox-container:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the checkbox is checked, add a blue background */

.checkbox-container input:checked ~ .checkmark {
    background-color: #a6a6a6;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.checkbox-container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Green Checkbox */

/* The container */

.checkbox-green {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */

    .checkbox-green input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom checkbox */

.checkmark-green .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border: solid 1px #a6a6a6;
}

/* On mouse-over, add a grey background color */

.checkbox-green:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the checkbox is checked, add a blue background */

.checkbox-green input:checked ~ .checkmark {
    background-color: #20bd4c;
    border: solid 1px #20bd4c !important;
    border-radius: 2px;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */

.checkbox-green input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.checkbox-green .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Transparent Checkbox */

/* The container */

.checkbox-white {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: 1rem;
}

    /* Hide the browser's default checkbox */

    .checkbox-white input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    /* Create a custom checkbox */

    .checkbox-white .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 24px;
        width: 24px;
        border: solid 1px #fff;
        border-radius: 2px;
    }

    /* On mouse-over, add a grey background color */

    .checkbox-white:hover input ~ .checkmark {
        background-color: transparent;
    }

    /* When the checkbox is checked, add a blue background */

    .checkbox-white input:checked ~ .checkmark {
        background-color: white;
    }

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */

.checkbox-white input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.checkbox-white .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #1c79ca;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* table */

.checklist .row .col {
    padding-left: 0px;
    padding-bottom: 10px;
}

.checklist ul {
    list-style-type: none;
    text-align: left;
}

.checklist li {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 900;
}

.checklist .fa {
    color: #1C79CA;
    font-size: 18px;
    opacity: 1 !important;
    margin: 0px 16px 0px -20px;
}

.checklist ul .card-document-text {
    margin: 0px 0px 0px 30px;
}

/* check box */

.document-account-type {
    width: 100%;
    display: flex;
}

/** INPUT FORMS END**/

/**************************** -=INPUT FORMS END =-*****************************/

/**************************** -=TEXT START =-*****************************/

.greeting {
    font-size: 20px; /* Switch from 36px */
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #fecc39;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.register-text {
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #fecc39;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.mark-spamemail-text {
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #fecc39;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.forgot-password-text {
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #fecc39;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

    .forgot-password-text:hover {
        color: #fecc39;
        text-decoration: underline;
    }

.last-login {
    font-size: 14px; /* Switch from 16px */
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-14-10 {
    position: relative;
    top: -15px;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
    opacity: 0.5 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-yellow {
    color: #fecc39 !important;
}

.main-title-80-36 {
    font-size: 80px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-title-60-36 {
    font-size: 60px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-title-48-24 {
    font-size: 48px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-title-36-20 {
    font-size: 36px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-24-14 {
    font-size: 24px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-24-14-500 {
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #ffffff;
    font-family: MuseoSans-500;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-24-12 {
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #ffffff;
    font-family: MuseoSans-500;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-title-24-12-black {
    font-family: MuseoSans-500;
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #49494a;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-title-24-12-orange {
    font-family: MuseoSans-500;
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #fecc39;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-14 {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-14-gray {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: center;
    color: #a6a6a6;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-14-black {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: center;
    color: #49494a;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-blac-14 {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-20-12 {
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-desc-16-12 {
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.label-20-12 {
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #49494a;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.label-16-12 {
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #49494a;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blue-text {
    color: #1c79ca !important;
}

.red-text {
    color: #e23219 !important;
}

.contractor-requested-view {
    text-align: center;
}

/**************************** -=TEXT END =-*****************************/

/*** MODAL START ***/

.modal-icon {
    width: 88px;
    height: 88px;
}

.modal-gutter {
    padding: 0px 33px 33px 33px !important;
    width: 100%;
}

.modal-body:not(.remove-css) {
    padding: 0px !important;
    margin: 0px !important;
}

.light-blue {
    background-color: #5fa3df;
}

/*** MODAL END ***/

/**************************** -=CARD BODY STYLING =-*****************************/

/** CARD BODY STYLING START **/

.card-gutter {
    margin: 48px;
}

.card-gutter-90 {
    margin: 0 90px 48px;
}

.card-gutter-90-3rem {
    margin: 3rem 90px 48px;
}

.card-gutter-48-24 {
    margin: 24px 48px;
}

.card-gutter-105-40 {
    margin: 40px 105px;
}

.card-gutter-no-top-margin {
    margin: 0px 48px 48px;
}

.card-gutter-112 {
    margin: 48px 112px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .card-gutter-112 {
        margin: 20px;
    }

    .card-gutter-90 {
        margin: 20px;
    }
}

.card-gutter-24 {
    margin: 1.5rem 1.5rem 0.75rem 1.5rem;
}

.card-gutter-40-48 {
    margin: 2.5rem 3rem 2.5rem 3rem;
}

.card-gutter-40-104 {
    margin: 2.5rem 6.5rem 2.5rem 6.5rem;
}

.line-px-40 {
    margin: 0 2.5rem 0 2.5rem;
}

.card-gutter-32-40, hr.line-px-40 + div.card-gutter-40-48 {
    margin: 2rem 3rem 2.5rem 3rem !important;
}

.card-gutter-40-32 {
    margin: 2.5rem 3rem 2rem 3rem;
}

@media screen and (max-width: 812px) {
    .card-gutter-40-48, .card-gutter-40-104, .card-gutter-40-32, .card-gutter-105-40 {
        margin: 1.5rem 1rem 1.5rem 1rem;
    }

    .line-px-40 {
        margin: 0 1rem 0 1rem;
    }

    .card-gutter-32-40, hr.line-px-40 + div.card-gutter-40-48 {
        margin: 1.5rem 1rem 1.5rem 1rem !important;
    }
}

.card-gutter-25-32 {
    margin: 1.5625rem 2rem 1.5625rem 2rem;
}

.margin-bottom-32-16 {
    margin-bottom: 2rem !important;
}

.margin-bottom-16-0 {
    margin-bottom: 1rem !important;
}

.line-py-32-24 {
    margin: 2rem 0 2rem 0;
}

.line-pb-32 {
    margin: 0 0 2rem 0;
}

.pb-40 {
    margin: 0 !important;
    padding-bottom: 2rem !important;
}

/*Mobile - Portrait View -*/
@media screen and (max-width: 767px) {
    .margin-bottom-32-16 {
        margin-bottom: 1rem !important;
    }

    .margin-bottom-16-0 {
        margin-bottom: 0rem !important;
    }

    .mobile-mt-24 {
        margin-top: 1.5rem !important;
    }

    .line-py-32-24 {
        margin: 1.5rem 0 1.5rem 0;
    }

    .contractor-requested-view {
        text-align: left;
    }
}

/** Contractor Spacing **/
.card-sum {
    max-height: 220px !important;
    height: 100% !important;
}

.card-sum-xl {
    max-height: 328px !important;
    height: 100% !important;
}

.card-text-48-24 {
    font-size: 48px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: right;
    color: #49494a;
}

.card-text-48-24-black {
    font-size: 48px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #49494a;
}

.card-text-14-9 {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.29;
    color: #a6a6a6;
    font-family: MuseoSans;
}

.card-text-14-9-black {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.29;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-12-9-black {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.29;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-16-12 {
    font-size: 16px !important;
    font-weight: 300;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-36-20 {
    font-size: 36px;
    font-weight: 300;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-20-14 {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans;
}
/* Start Added Abdullah_20201114 */
.card-text-12-10 {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-16-14 {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans;
}
/* End Added by Abdullah_20201114 */



.card-text-20-14-500 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans-500;
}

/* Added for Account name bold -- 30-10-2018 */
.card-text-14-14-200 {
    font-size: 14px;
    font-weight: 200;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-text-24-14-gray {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.4;
    color: #a6a6a6;
    font-family: MuseoSans;
}

.card-text-24-14-gray {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.4;
    color: #a6a6a6;
    font-family: MuseoSans;
}

.card-text-24 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.17;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-16-12-rm {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-16-12-gray {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    color: #a6a6a6;
    font-family: MuseoSans;
}

.card-title-blue {
    font-size: 24px;
    line-height: 1.0;
    color: #1c79ca;
    font-family: MuseoSans-500;
    font-weight: 500;
}

.card-title-blue-48 {
    font-size: 48px;
    line-height: 1.0;
    color: #1c79ca;
    font-family: MuseoSans;
    font-weight: 300;
}

.card-title-blue-300 {
    font-size: 24px;
    line-height: 1.0;
    color: #1c79ca;
    font-family: MuseoSans;
    font-weight: 300;
}

.card-title-blue-weight-900 {
    font-size: 24px;
    color: #1c79ca;
    font-family: MuseoSans-500;
    font-weight: 500 !important;
}

.card-text-18-12 {
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #49494a;
}

.card-title-blue-sm {
    font-size: 16px;
    font-weight: 500;
    color: #1c79ca;
    font-family: MuseoSans;
}

.card-title-blue-xl {
    font-size: 24px;
    line-height: 1.2;
    color: #1c79ca;
    font-family: MuseoSans;
}

.card-title-blue-xxl {
    font-size: 36px; /* Font Reduced */
    line-height: 1.2;
    color: #1c79ca;
    font-family: MuseoSans;
}

.card-title-inverse {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans;
}

.card-title-inverse-xl {
    font-size: 36px; /* Font Reduced */
    font-weight: 300;
    line-height: 1.0;
    color: #49494a;
    font-family: MuseoSans;
}

.card-title-inverse-light {
    font-size: 24px; /* Font Reduced */
    font-weight: 500;
    line-height: 1.17;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-title-inverse-lighter {
    font-size: 16px; /* Font Reduced */
    font-weight: 300;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans;
}

.card-title-inverse-black {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: black;
    font-family: MuseoSans;
}

.card-title-inverse-32-24 {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.25;
    color: #49494a;
    font-family: MuseoSans;
}

.card-title-inverse-16-12 {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.25;
    color: #49494a;
    font-family: MuseoSans;
}

.card-title-inverse-darkest {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    color: black;
}
.darken {
    font-family: MuseoSans-500;
    font-weight: 500 !important;
}

.card-title-inverse-dark {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.17;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-title-inverse-darker {
    font-size: 16px; /* Font Reduced */
    font-weight: 500;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-title-inverse-darkest {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.17;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-icon-lg {
    width: 100%;
}

.card-icon {
    width: 88px;
    height: 88px;
}

.card-trail-icon {
    width: 44px;
    height: 44px;
    position: relative;
    right: 5px;
    z-index: 2;
}

/** CARD BODY STYLING END **/

/**************************** -=BUTTON STYLING  =-*****************************/

/** BUTTON STYLING START**/

.btn {
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-primary, .btn-outline-primary, .btn-success, .btn-outline-success, .btn-grey, .btn-outline-info, .btn-info {
    max-width: 264px;
    width: 100%;
}

.btn-outline-blue {
    max-width: 576px;
    width: 100%;
}

.btn-block {
    min-width: 100%;
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
    color: #a6a6a6;
    background-color: transparent;
    border-color: #a6a6a6;
}

.btn-outline-rating {
    border: 1px solid;
    border-radius: 24px;
    color: #1c79ca;
    font-size: 16px;
    font-family: MuseoSans;
    color: #1c79ca;
    background-color: #ffffff;
    border-color: #1c79ca;
    margin: 0 8px 0 0;
    padding: 12px 15px;
}

    .btn-outline-rating:hover {
        color: #ffffff;
        background-color: #1c79ca;
        border-color: #1c79ca;
    }

.btn-outline-rating-clicked {
    border: 1px solid;
    border-radius: 24px;
    color: #1c79ca;
    font-size: 16px;
    font-family: MuseoSans;
    color: #ffffff;
    background-color: #1c79ca;
    border-color: #1c79ca;
    margin: 0 8px 0 0;
    padding: 12px 15px;
}

.btn-success.disabled, .btn-success:disabled {
    color: #ffffff;
    background-color: #a6a6a6;
    border-color: #a6a6a6;
}

    .btn-success.disabled, .btn-success.disabled:hover,
    .btn-outline-success.disabled, .btn-outline-success.disabled:hover,
    .btn-grey.disabled, .btn-grey.disabled:hover,
    .btn-200.disabled, .btn-200.disabled:hover {
        color: #fff;
        background-color: lightgray;
        border-color: lightgray;
        cursor: default;
    }

.btn-primary.disabled, .btn-primary.disabled {
    color: white !important;
    background-color: transparent !important;
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: white !important;
    background-color: transparent !important;
}

a.btn-primary.disabled, a.btn-primary:disabled {
    color: white !important;
    background-color: transparent !important;
}

a.btn-outline-primary.disabled, a.btn-outline-primary:disabled {
    color: white !important;
    background-color: transparent !important;
}


a.btn-primary:enabled:hover,
a.btn-success:enabled:hover,
a.btn-grey:enabled:hover {
    text-decoration: none !important;
    color: white !important;
}

a.btn-outline-primary:enabled:hover {
    text-decoration: none !important;
    color: white;
}

a.btn-outline-success:hover {
    text-decoration: none !important;
    color: #20bd4c;
    background-color: #fff;
}

.btn-200 {
    max-width: 200px !important;
}

.btn-grey,
.btn-grey:hover {
    color: #fff;
    margin: auto;
    background-color: lightgray;
    border-color: lightgray;
}

.btn-outline-primary {
    margin: auto;
    border-radius: 4px;
    border: solid 1px #ffffff;
    color: white;
}

    .btn-outline-primary:enabled:hover,
    .btn-outline-primary:active:not(:disabled) {
        margin: auto;
        border-radius: 4px;
        /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
        background-color: rgba(0,137,253, 0.1);
        border: solid 1px #ffffff !important;
        color: white !important;
        position: relative;
        /*top: -4px;*/
        /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
    }

.btn-primary {
    margin: auto;
    border-radius: 4px;
    color: #1c79ca;
    border: solid 1px #ffffff !important;
    background-color: white !important;
}

    .btn-primary:enabled:hover, .btn-primary:active:not(:disabled) {
        margin: auto;
        border-radius: 4px;
        /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
        background-color: #D9EDFF !important;
        border: solid 1px #D9EDFF !important;
        color: #1c79ca !important;
        position: relative;
        /*top: -4px;*/
        /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
    }

.btn-outline-success:enabled:hover {
    background-color: rgba(32,189,76, 0.1);
    color: #20bd4c;
}

.btn-success:not(.disabled):enabled:hover, .btn-outline-success:not(:disabled):hover {
    position: relative;
    /*top: -4px;*/
    /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
}
/* =================================== */
/* FIX FOR SMR APPLY/TERMINATE BUTTONS */
#requestBtn.btn-primary, #terminateBtn.btn-primary {
    color: #1c79ca !important;
    background-color: white !important;
    opacity: 1 !important;
}

#requestBtn.btn-outline-primary, #terminateBtn.btn-outline-primary {
    border: solid 1px #ffffff !important;
    color: white !important;
    opacity: 1 !important;
}
/* =================================== */
.btn-login {
    float: right;
    margin-top: 20px;
}

.know-more-btn {
    margin-bottom: 48px;
}
/** BUTTON STYLING END**/
/*** FOOTERS *******************************************************************/
.footer-link:enabled:hover, .footer-link {
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    font-family: MuseoSans;
}

.footer-text-link {
    line-height: 1;
    font-size: 14px;
    font-weight: 500;
    color: #f3c43a;
    font-family: MuseoSans;
}

.footer-office-hours {
    color: #fff !important;
    line-height: 1.57;
    font-size: 14px;
    font-family: MuseoSans;
    text-decoration: none !important;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.copy-right {
    color: #a6a6a6;
}

.social-media-icons:hover {
    border-radius: 50%;
    padding: 0.5em 0.6em;
    background-color: #ffffff;
    color: #4a4a4a;
    text-decoration: none;
}

.social-media-icons {
    color: #ffffff;
    padding: 0.5em 0.6em;
    background-color: #4a4a4a;
    text-decoration: none;
    margin-left: -0.65em;
}

.fa-facebook {
    margin-left: -0.65em;
    padding: 0.5em 0.75em !important;
}

    .fa-facebook:hover {
        padding: 0.5em 0.75em !important;
    }

.footer {
    height: 50px;
    margin-top: -25px;
    width: 100%;
    height: auto;
    /* Set the fixed height of the footer here */
    line-height: 35px;
    /* Vertically center the text there */
    background-color: #4a4a4a;
    color: #ffffff;
    font-size: 12px;
}

.footer-rows {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 45px;
    margin-right: 5px;
}
/*** FOOTERS *******************************************************************/
/******* Panel Down ************************************************************/
.container-stepper-content .panel-heading:hover {
    cursor: pointer;
}

.support-acc-content p {
    font-size: 12px;
}

.panel-heading.collapsed .fa-chevron-down, .panel-heading .fa-chevron-right {
    display: none;
}

.panel-heading.collapsed .fa-chevron-right, .panel-heading .fa-chevron-down {
    display: inline-block;
}

.panel-body {
    margin-top: 24px;
}
/******* Panel Down ************************************************************/
/*** Page Specific  *******************************************************************/
/*** Contractor  *******************************************************************/
.btn-track {
    max-width: 264px !important;
}

#trailid .row:last-child .col-md-1 .row:last-child .col-md-12 .divider-small {
    border: 0 !important;
}

.divider-small {
    border-left: solid 4px rgba(192, 192, 192, 0.5);
    border-radius: 2px;
    width: 100%;
    height: 40px;
    position: relative;
    left: 50%;
    /*top: 8px;*/
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
}

.divider-xl {
    border-left: solid 1px rgba(192, 192, 192, 0.5);
    width: 1px;
    height: 194px;
}

.divider-md {
    border-left: solid 1px rgba(192, 192, 192, 0.5);
    padding-right: 5px;
    width: 1px !important;
    height: 120px;
}

.viewCard {
    display: block;
}

.editView {
    display: none;
}
/************ Upload ************************************************************/
.upload_icon_def_mobile {
    display: none;
}

.ddlabelsdefault p {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 300;
    /* color: #49494a; */
}

.dropuploadarea.filedroppedstate .upload_icon_def, .dropuploadarea.dragenterstate .upload_icon_def, .dropuploadarea.filedroppedstate .ddlabelsdefault {
    display: none;
}

.dropuploadarea .upload_icon_def, .dropuploadarea.dragenterstate .upload_icon_dragenter, .dropuploadarea.filedroppedstate .upload_icon_uploading {
    display: inline-block;
}

.dropuploadarea.filedroppedstate {
    cursor: no-drop;
}

.dropuploadarea .upload_icon_dragenter, .dropuploadarea .upload_icon_uploading, .dropuploadarea .upload_icon_success, .dropuploadarea .upload_icon_failure {
    display: none;
}

.dropuploadarea.uploadcomplete_success .upload_icon_uploading, .dropuploadarea.uploadcomplete_success .upload_icon_failure, .dropuploadarea.uploadcomplete_failure .upload_icon_uploading {
    display: none;
}

.dropuploadarea.uploadcomplete_success .upload_icon_success {
    display: inline-block;
    color: #20bd4c;
}

.dropuploadarea.uploadcomplete_failure .upload_icon_failure {
    display: inline-block;
    color: #e23219;
}

.dropuploadarea.uploadcomplete_failure {
    border: 2px solid #e23219 !important;
}

.dduploadcontainer {
    cursor: pointer;
}

.clearddarea {
    float: right;
    margin-right: 33px;
}

.upload-white-blue {
    color: #1c79ca !important;
}

.upload-failure-color {
    color: #e23219 !important;
}

.upload-success-green {
    color: #20bd4c !important;
}

.dropuploadarea-bg.dragenterstate {
    border: 2px solid #fff;
    color: #fff;
}

.dropuploadarea-solid-white {
    border: 2px solid #1c79ca !important;
    color: #1c79ca;
}

.dropuploadarea-solid-bg {
    border: 2px solid #fff !important;
    color: #fff;
}

.dropuploadarea-dashed-bg {
    border: 2px dashed #fff;
    color: #fff;
}

.dropuploadarea-bg.filedroppedstate {
    border: 2px solid #fff !important;
    color: #fff !important;
    /*width: 440px;*/
    padding-bottom: 24px;
    /*This is to stop resizing of boxes - adjusted to 48px from 26px*/
}

.dropuploadarea.filedroppedstate {
    border: 2px solid #1c79ca;
    color: #1c79ca;
    /*width: 440px;*/
    padding-bottom: 24px;
    /*This is to stop resizing of boxes - adjusted to 48px from 26px*/
}

.dropuploadarea-bg.filedroppedstate.uploadcomplete_success {
    border: solid 2px #fecc39 !important;
    /*This is to stop resizing of boxes - Will need to be adjusted later again*/
}

.dropuploadarea.filedroppedstate.uploadcomplete_success {
    padding-bottom: 10px;
    /*This is to stop resizing of boxes - Will need to be adjusted later again*/
}

.dropuploadarea.filedroppedstate.uploadcomplete_failure {
    padding-bottom: 10px;
    /*This is to stop resizing of boxes - Will need to be adjusted later again*/
}

.dropuploadarea.uploadcomplete_success {
    border: 2px solid #20bd4c !important;
    /*width: 440px;*/
}

.dropuploadarea.uploadcomplete_failure {
    border: 2px solid #e23219;
    /*width: 440px;*/
}

.dropuploadarea {
    /*width: 440px;*/
    color: #49494a;
    text-align: center;
    vertical-align: middle;
    padding: 23px;
    font-family: MuseoSans;
    border-radius: 10px;
    cursor: pointer;
    height: 156px;
}

.input-group-btn-upload {
    top: -45px !important;
}

.clearddarea-bg {
    position: absolute !important;
    top: -40px !important;
    right: 16px !important;
}

.dropuploadarea-bg {
    border: 2px dashed #fff;
}

.dropuploadarea-white-bg {
    border: 2px dashed #49494a;
}

.dduploadcontainer {
    display: inline-block;
    width: 100%;
}

.upload_details {
    color: #49494a;
    opacity: 1 !important;
    font-size: 10px;
    text-align: center;
}

.progressbar {
    width: 400px;
    margin-top: 16px;
}

.progressBar {
    width: 400px;
    height: 2px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    background-color: lightgray;
}

    .progressBar.showprogress {
        display: block;
    }

    .progressBar.hideprogress {
        display: none;
    }

.insidebar {
    width: 5%;
    height: 5px;
    background-color: #1c79ca;
    border-radius: 2px;
    text-align: center;
    /*To center it horizontally (if you want)*/
    line-height: 30px;
    /*To center it vertically */
    color: white;
}

.progressbar.progressbar-bg .insidebar {
    width: 15%;
    height: 4px;
    border-radius: 2px;
    background-color: #fff;
    text-align: center;
    /*To center it horizontally (if you want)*/
    line-height: 30px;
    /*To center it vertically */
    color: white;
}
/************ Upload ************************************************************/
/***************** View Stepper ************************************************/
.card-gutter-stepper {
    margin: 48px 0px 20px;
}

.mdl-stepper-horizontal-alternative-view .mdl-stepper-step {
    width: 16.666%; /** Fixed bug 1090*/
    /* 100 / no_of_steps */
}
/* mdl-stepper css styles */
.mdl-stepper-horizontal-alternative-view {
    display: table;
    width: 100%;
    margin: 0 auto;
}

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step {
        display: table-cell;
        position: relative;
    }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step:active {
            background-color: rgba(0, 0, 0, 0.06);
        }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step:active {
            border-radius: 15% / 75%;
        }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step:first-child:active {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step:last-child:active {
            border-top-right-radius: 1rem;
            border-bottom-right-radius: 1rem;
        }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-circle {
        background-color: #e4e4e4;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step:first-child .mdl-stepper-bar-left, .mdl-stepper-horizontal-alternative-view .mdl-stepper-step:last-child .mdl-stepper-bar-right {
        display: none;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-circle {
        width: 34px;
        height: 34px;
        margin: 0 auto;
        border-radius: 100%;
        text-align: center;
        line-height: 2em;
        font-size: 18px;
        line-height: 26px;
        display: inline-block;
        border-radius: 25px;
        z-index: 2;
        background-color: white;
        color: #634adc;
        border-radius: 25px;
        background: #fff;
        border: 3px solid #634adc;
        cursor: pointer;
    }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-circle:hover {
            background-color: white;
            color: #fff;
            border-radius: 25px;
            background: #634adc;
            border: 3px solid #634adc;
            z-index: 2;
        }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.active-step .mdl-stepper-circle {
        background-color: white;
        color: #fff;
        border-radius: 25px;
        background: #634adc;
        border: 3px solid #634adc;
        z-index: 2;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.step-done .mdl-stepper-circle {
        background-color: #634adc;
        color: white;
        border-radius: 25px;
        background: #634adc;
        border: 3px solid #634adc;
        z-index: 2;
    }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.step-done .mdl-stepper-circle:before {
            content: "\2714";
        }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.step-done .mdl-stepper-circle *, .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.editable-step .mdl-stepper-circle * {
            display: none;
        }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.editable-step .mdl-stepper-circle {
        -moz-transform: scaleX(-1);
        /* Gecko */
        -o-transform: scaleX(-1);
        /* Opera */
        -webkit-transform: scaleX(-1);
        /* Webkit */
        transform: scaleX(-1);
        /* Standard */
    }

        .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.editable-step .mdl-stepper-circle:before {
            content: "\270E";
        }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-title {
        margin-top: 16px;
        font-size: 20px;
        font-weight: normal;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-title, .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-optional {
        text-align: center;
        color: rgba(0, 0, 0, 0.26);
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.active-step .mdl-stepper-title {
        font-weight: 500;
        color: #634adc;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.active-step.step-done .mdl-stepper-title, .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.active-step.editable-step .mdl-stepper-title {
        font-weight: 300;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-optional {
        font-size: 12px;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.active-step .mdl-stepper-optional {
        color: rgba(0, 0, 0, 0.54);
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-bar-left, .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-bar-right {
        position: absolute;
        top: 15px;
        height: 1px;
        border-top: 4px solid #634adc;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.active-step .mdl-stepper-bar-left, .mdl-stepper-horizontal-alternative-view .mdl-stepper-step.step-done .mdl-stepper-bar-right {
        position: absolute;
        top: 15px;
        height: 1px;
        border-top: 4px solid #634adc;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-bar-right {
        right: 0;
        left: 50%;
        margin-left: 20px;
        border-top-left-radius: 7rem;
        border-bottom-left-radius: 7rem;
    }

    .mdl-stepper-horizontal-alternative-view .mdl-stepper-step .mdl-stepper-bar-left {
        left: 0;
        right: 50%;
        margin-right: 20px;
        border-top-right-radius: 7rem;
        border-bottom-right-radius: 7rem;
    }
/***************** STEPPER *****************************************************/
.mdl-card {
    width: 100%;
    min-height: 0;
    margin: 0 auto;
    text-align: center;
}

.mdl-card__supporting-text {
    width: 100%;
    padding: 0;
}

.stepper .stepper-footer {
    float: right;
    color: white;
}
/* mdl-stepper css styles */
.mdl-stepper-horizontal-alternative {
    display: table;
    width: 100%;
    margin: 0 auto;
}

    .mdl-stepper-horizontal-alternative .mdl-stepper-step {
        display: table-cell;
        position: relative;
    }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:active {
            background-color: none;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:active {
            border-radius: 15% / 75%;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:first-child:active {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:last-child:active {
            border-top-right-radius: 1rem;
            border-bottom-right-radius: 1rem;
        }

    .mdl-stepper-horizontal-alternative .mdl-stepper-circle {
        background-color: #e4e4e4;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-bar-left.current {
        border-top: 4px solid #e4e4e4 !important;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step:first-child .mdl-stepper-bar-left, .mdl-stepper-horizontal-alternative .mdl-stepper-step:last-child .mdl-stepper-bar-right {
        display: none;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-circle {
        width: 34px;
        height: 34px;
        margin: 0 auto;
        border-radius: 100%;
        text-align: center;
        line-height: 2em;
        font-size: 18px;
        line-height: 26px;
        display: inline-block;
        border-radius: 25px;
        background: #fff;
        border: 3px solid #e4e4e4;
        color: #e4e4e4;
        z-index: 2;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.disabled .mdl-stepper-circle {
        background: #e4e4e4 !important;
        color: #fff !important;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-circle {
        background-color: white;
        color: #634adc;
        border-radius: 25px;
        background: #fff;
        border: 3px solid #634adc;
        color: #634adc;
        z-index: 2;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.step-done .mdl-stepper-circle {
        background-color: #634adc;
        color: white;
        border-radius: 25px;
        background: #634adc;
        border: 3px solid #634adc;
        z-index: 2;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle:before {
        content: "\270E";
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.step-done .mdl-stepper-circle *, .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle * {
        display: none;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle {
        -moz-transform: scaleX(-1);
        /* Gecko */
        -o-transform: scaleX(-1);
        /* Opera */
        -webkit-transform: scaleX(-1);
        /* Webkit */
        transform: scaleX(-1);
        /* Standard */
    }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle:before {
            content: "\270E";
        }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-title {
        margin-top: 16px;
        font-size: 20px;
        font-weight: normal;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-title, .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-optional {
        text-align: center;
        color: rgba(0, 0, 0, 0.26);
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-title {
        font-weight: 500;
        color: #634adc;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step.step-done .mdl-stepper-title, .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step.editable-step .mdl-stepper-title {
        font-weight: 300;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-optional {
        font-size: 12px;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-optional {
        color: rgba(0, 0, 0, 0.54);
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-left, .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-right {
        position: absolute;
        top: 15px;
        height: 1px;
        border-top: 4px solid #e4e4e4;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-bar-left, .mdl-stepper-horizontal-alternative .mdl-stepper-step.step-done .mdl-stepper-bar-right {
        position: absolute;
        top: 15px;
        height: 1px;
        border-top: 4px solid #634adc;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-right {
        right: 0;
        left: 50%;
        margin-left: 20px;
        border-top-left-radius: 7rem;
        border-bottom-left-radius: 7rem;
    }

    .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-left {
        left: 0;
        right: 50%;
        margin-right: 20px;
        border-top-right-radius: 7rem;
        border-bottom-right-radius: 7rem;
    }
/***************** STEPPER *****************************************************/
/*** Support  *******************************************************************/
.card-gutter-with-image {
    margin: 24px 0px 0px 48px;
}

.support-links {
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #1c79ca;
    text-decoration: none !important;
    cursor: pointer;
}

.vertical-border {
    border-right: 1px solid #e4e4e4;
}

.ref-number {
    font-weight: 600;
}

.time-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.blue-circel {
    border: 3px solid #1c79ca;
    background-color: #FFFFFF;
    height: 120px;
    border-radius: 50%;
    width: 120px;
    text-align: center;
}

.span-hours {
    font-size: 48px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.57;
    letter-spacing: unset;
    color: #1c79ca;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

.span-hours-text {
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    color: #1c79ca;
    margin-top: -20px;
}

.v-line {
    border-left: 1px solid #e4e4e4;
    height: 15rem;
}

.h-line {
    width: 85%;
}
/* form table */
.form-table {
    border: none;
    width: 100%;
}

.form-table-rounder-header-left {
    border-top-left-radius: 0.7rem;
}

.form-table th {
    font-family: MuseoSans;
    padding: 8px;
    font-size: 16px;
    font-style: normal;
    text-align: center;
    font-stretch: normal;
    color: white;
    background: #49494a;
    border: none !important;
}

.form-table tfoot tr {
    border-bottom: none !important;
}

.form-table tfoot th {
    color: #49494a;
    background: white;
    border: none !important;
}

.form-table td {
    font-family: MuseoSans;
    padding: 8px;
    font-size: 16px;
    font-style: normal;
    text-align: center;
    font-stretch: normal;
    color: #49494a;
    background: white;
}

.form-table-rounder-header-right {
    border-top-right-radius: 0.7rem;
}

.form-table tr {
    border-bottom: 0.1rem solid rgba(211, 211, 211, 1);
}
/**************************************** Popup  **************************************/
.vl {
    border-left: 1px solid rgba(192, 192, 192, 0.7);
    height: 15rem;
}
/* Modal CSS */
.modal-dialog-alignment {
    align-items: center;
}

.modal-content {
    border-radius: .5rem !important;
}

.modal-body:not(.remove-css) {
    padding: 0px !important;
    margin: 0px !important;
}

.modal-body .modal-container {
    padding-right: 48px;
    padding-left: 48px;
    padding-bottom: 48px;
}

.modal-body .modal-container-with-image {
    padding-right: 0px !important;
    padding-top: 50px;
}

.image-close {
    width: 24px;
    height: 24px;
    padding: 0px;
    margin: 0px;
}

.col-2-checkbox {
    margin-top: 30px;
}

.dropdown-item-custom {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #a6a6a6 !important;
    opacity: 1 !important;
    padding: 0.30rem .125rem !important;
    clear: both;
    text-align: inherit !important;
    white-space: nowrap;
    border: 0;
}

    .dropdown-item-custom:hover {
        color: #1c79ca !important;
        text-align: inherit;
        line-height: 1.5;
        white-space: nowrap;
        font-weight: 500;
        text-decoration: none;
    }

.drop-item-title {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    padding: 0.30rem .125rem !important;
    line-height: 1.4 !important;
    opacity: 1;
    color: #49494a;
    display: block;
}

    .drop-item-title:hover {
        font-size: 16px !important;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        padding: 0.30rem .125rem !important;
        line-height: 1.4;
        opacity: 1 !important;
        color: #1c79ca !important;
        text-align: inherit;
        text-decoration: none;
    }

.popup-header {
    padding: 2rem !important;
}

.popup-title {
    font-family: MuseoSans;
    font-size: 24px; /* Font Reduced */
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.17;
    letter-spacing: normal;
    text-align: center;
    color: #1c79ca;
    margin: 0.25em;
}

.popup-title-36-20 {
    font-size: 36px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.17;
    letter-spacing: normal;
    text-align: center;
    color: #1c79ca;
    margin: 0.25em;
}

.popup-sub-title {
    font-family: MuseoSans;
    font-size: 36px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    color: #1c79ca;
}

.popup-heading {
    font-family: MuseoSans;
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.17;
    letter-spacing: normal;
    text-align: center;
    color: #49494a;
    margin: 0.25em;
}

.popup-content {
    font-family: MuseoSans;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: #49494a;
    margin: 0.25em 0.505em 0.25em 0.50em;
}

.popup-content-left {
    font-family: MuseoSans;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #49494a;
}

.OTP {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.Validation---Failed {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.Validation---Success {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.popup-input {
    margin-top: 1rem;
    margin-left: 0.5rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid;
    border-radius: 0;
    width: 50px;
    text-align: center;
}

    .popup-input:focus {
        border-color: #fff;
        outline: none;
    }

.ic_button_resend_loaded {
    width: 18px;
    /*or your image's width*/
    height: 18px;
    /*or your image's height*/
    margin-bottom: 0.125rem;
    padding: 0;
}

.button_resend_loaded {
    color: #20BD4C;
}

.progress-btn {
    position: relative;
    width: 264px;
    height: 48px;
    display: inline-block;
    font-family: MuseoSans;
    font-weight: normal;
    font-size: 20px;
    transition: all 0.4s ease;
    text-align: center;
    border: 1;
    border-radius: 0.5rem;
    color: white;
}

    .progress-btn:not(.active) {
        cursor: pointer;
        background-color: #20BD4C;
    }

    .progress-btn .btn {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        line-height: 2.5;
        z-index: 10;
        opacity: 1;
        border-color: #20BD4C;
        border-radius: 0.5rem;
    }

    .progress-btn .progress {
        width: 0%;
        height: auto;
        z-index: 5;
        background: #20BD4C;
        opacity: 0;
        transition: all 0.2s ease;
        color: #20BD4C;
        border-radius: 0.5rem;
    }

    .progress-btn.active .progress {
        opacity: 0.5;
        background-color: #20BD4C;
        color: gray;
        animation: progress-anim 30s ease 0s;
    }

    .progress-btn[data-progress-style='fill-back'] .progress {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        color: #20BD4C;
    }

.popup-button {
    width: 100%;
    max-width: 264px;
    height: 48px !important;
}

.modal-600 {
    max-width: 600px;
}

.modal-header-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.modal-gutter-32-48 {
    padding: 2rem 3rem 2rem 3rem;
}

.modal-text-16 {
    font-family: MuseoSans;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #49494a;
}

.modal-btn {
    max-width: none;
    max-height: none;
    height: auto;
}


.btn-outline-primary.btn-modal {
    max-width: 100%;
    border-color: rgba(73, 73, 74, 0.16);
    font-size: 16px;
    color: #1c79ca;
}

    .btn-outline-primary.btn-modal:enabled:hover {
        border-color: rgba(73, 73, 74, 0.16) !important;
        color: #1c79ca !important;
    }

    .btn-outline-primary.btn-modal:active:not(:disabled) {
        border-color: rgba(73, 73, 74, 0.16) !important;
        color: white !important;
    }

.cursor-default {
    cursor: default !important;
}

.btn-select {
    width: 264px;
    height: 48px !important;
}

    .btn-select.btn-select-popup-fix {
        width: 100%;
        max-width: 264px;
    }

@keyframes progress-anim {
    0% {
        width: 0%;
    }

    5% {
        width: 0%;
    }

    10% {
        width: 15%;
    }

    30% {
        width: 40%;
    }

    50% {
        width: 55%;
    }

    80% {
        width: 80%;
    }

    95% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

.rating-checked-status:after {
    /*content: url('../../../assets/img/star-fill.svg') !important;
    width: 44px;
    height: 44px;*/
    background-image: url(../../../assets/img/star-fill.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: "";
}

.rating-checked:after {
    /*content: url('../../../assets/img/star-fill.svg') !important;
    width: 44px;
    height: 44px;*/
    background-image: url(../../../assets/img/star-fill.svg);
    background-size: 26px 26px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 26px;
    height: 26px;
    content: "";
}

.rating-empty:after {
    /*content: url('../../../assets/img/star-non-fill.svg');
    width: 44px;
    height: 44px;*/
    background-image: url(../../../assets/img/star-non-fill.svg);
    background-size: 26px 26px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 26px;
    height: 26px;
    content: "";
}

.rating-checked-48 {
    content: url('../../../assets/img/icons-ic-action-ratings-active.svg') !important;
    width: 48px;
    height: 48px;
    margin: 16px !important;
}

.rating-inactive {
    content: url('../../../assets/img/icons-ic-action-ratings-inactive.svg');
    width: 48px;
    height: 48px;
    margin: 16px !important;
}

.rating-checked-48:after {
    background-image: url(../../../assets/img/icons-ic-action-ratings-active.svg);
    background-size: 48px 48px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 48px;
    height: 48px;
    content: "";
}

.rating-inactive:after {
    background-image: url(../../../assets/img/icons-ic-action-ratings-inactive.svg);
    background-size: 48px 48px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 48px;
    height: 48px;
    content: "";
}

.rating > span {
    margin: 26.5px;
    cursor: pointer;
}
/**
.rating > span:last-child{
	margin-right: 0px !important;
}**/
.up-logo {
    position: absolute;
    top: -100px;
    right: 250px;
    width: 200px;
}

.cloud-logo {
    position: absolute;
    top: -100px;
    right: 10%;
}

.rating-value-center {
    /*position: absolute;
    left: 50%;
    top: 54px;*/
    text-align: center;
}

.up-mid-logo {
    position: absolute;
    top: -100px;
    left: 50%;
}

.up-mid-logo-relative {
    /** position: relative;
    left: -50%; */
}

.up-rating-img-size {
    height: 500px;
    max-width: 300px;
}

.up-2-logo {
    position: absolute;
    top: 10px;
    right: 0;
}

.img-rating {
    height: 700px;
}

.btn.disabled, .btn:disabled {
    opacity: .65;
}

.btn-primary:disabled {
    opacity: 1;
    color: #aeaeae;
}

.set-survey-background {
    background-image: url('../../../assets/img/survey-bg-new.svg');
    height: 492px;
}

.email-bg {
    background-image: url('../../../assets/img/survey-question-bg.svg');
    margin: 0px 0px 0px 0px !important;
    min-height: 960px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* Preserve aspet ratio */
    min-width: 100%;
}

.stareasy-value-style {
    position: absolute;
    top: 0;
}

.rating-img {
    content: url(../../../assets/img/rating-img.svg);
}

.rating-img-tick {
    width: 160px;
    height: 160px;
}
/******************************************************************************** -= Gear Icon Dropdown START =-***************************************************/
.gear-dropdown {
    background: transparent;
    border: none;
}

    .gear-dropdown .btn {
        display: block;
        border: none !important;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-bottom: none;
        background: transparent !important;
        box-shadow: none !important;
        width: 100%;
        opacity: 1 !important;
        color: white;
        outline: none;
        text-align: left;
        white-space: nowrap !important;
    }

        .gear-dropdown .btn .caret {
            display: none !important;
        }

    .gear-dropdown .dropdown-menu {
        width: 100%;
        padding: 7px 13px 11px 12px;
        min-width: 16rem;
        border-radius: 5px;
        left: auto;
        right: 0;
        margin-top: 5px;
    }

        .gear-dropdown .dropdown-menu .dropdown-item:first-child {
            cursor: pointer;
            border-bottom: 1px solid #e4e4e4;
        }

        .gear-dropdown .dropdown-menu .dropdown-menu.show .dropdown-last-menu-item:last-child {
            cursor: pointer;
            border-bottom: none;
        }

        .gear-dropdown .dropdown-menu .dropdown-item {
            font-family: MuseoSans, sans-serif;
            font-size: 12px;
            font-weight: 300;
            color: #49494A;
            padding: 5px;
            cursor: pointer;
            line-height: 1.4;
            text-decoration: none;
        }

            .gear-dropdown .dropdown-menu .dropdown-item:enabled:hover {
                color: #1c79ca;
                font-weight: 600;
                background: transparent;
            }

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

.p-l-10 {
    padding-right: 10px;
}
/******************************************************************************** -= Gear Icon Dropdown END =-***************************************************/
.alert-maintenance {
    color: black;
    background-color: #fecc39;
    border-color: #fecc39;
    box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);
}

.list-group-item-amt-due {
    font-size: 0.9rem;
    font-family: MuseoSans;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: right;
    color: #49494a;
}
/******************************************************************************** -=Mobile Responsive START =-***************************************************/
@media screen and (max-width: 900px) {
    .card-trail-icon {
        right: 18px;
    }
}

@media screen and (min-width: 992px) {
    .modal-1300 {
        max-width: 1300px;
    }

    .modal-800 {
        max-width: 800px;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .smr-request.base-content {
        padding-top: 0;
        padding-bottom: 0;
    }

    .contractor-account button.success {
        width: 45% !important;
    }

    .hidden-smxs-down {
        display: none;
    }

    .contractor-profile-card {
        width: 100%;
    }

    .input-group-btn-upload {
        top: -38px !important;
    }

    .clearddarea-bg {
        position: absolute !important;
        top: -32px !important;
        right: 16px !important;
    }

    .dropuploadarea {
        padding: 12px 0 !important;
        border-radius: 2px;
        height: 34px;
    }

    .dropuploadarea-bg {
        border: 1px dashed #fff;
    }

    .dropuploadarea-dashed-bg {
        border: 1px dashed #fff !important;
    }

    .dropuploadarea-solid-bg {
        border: 1px solid #fff !important;
    }

    .dropuploadarea-solid-white {
        border: 1px solid #1c79ca !important;
        color: #1c79ca;
    }

    .dropuploadarea.uploadcomplete_success {
        border: 1px solid #20bd4c !important;
        /*width: 440px;*/
    }

        .dropuploadarea.uploadcomplete_success .upload_icon_success {
            padding: 0px 0px 0px 65px !important;
        }

    .dropuploadarea.uploadcomplete_failure .upload_icon_failure {
        padding: 0px 0px 0px 65px !important;
    }

    .dropuploadarea-bg.filedroppedstate {
        border: 1px solid #fff;
        color: #fff !important;
        /*width: 440px;*/
        padding-bottom: 24px;
        /*This is to stop resizing of boxes - adjusted to 48px from 26px*/
    }

        .dropuploadarea-bg.filedroppedstate.uploadcomplete_success {
            border: solid 1px #fecc39 !important;
        }

    #snackbar {
        padding: 12px 20px;
        font-size: 12px;
    }

    .card-icons {
        width: 20px;
        height: 20px;
    }

    .email-template-center-img {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .email-mobile-size {
        width: 100%;
    }

    .card-gutter-48-24 {
        margin: 20px;
    }

    .card-gutter-25-32 {
        margin: 0.75rem;
    }

    .up-mid-logo {
        position: absolute;
        top: -80px;
        left: 50%;
    }

    .set-survey-background {
        background-image: url('../../../assets/img/survey-bg-mobile-new.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .rating-img-tick {
        width: 80px;
        height: 80px;
    }

    .survey-mobile-margin-top {
        margin-top: 50px;
    }

    .up-2-logo {
        position: absolute;
        top: -120px;
        left: 15%;
    }

    .modal-body .modal-container-with-image {
        padding: 48px 30px !important;
    }

    .up-rating-img-size {
        width: 241px;
        height: 206px
    }

    .rating-img {
        content: url('../../../assets/img/rating-img-mobile.svg');
        width: 241px;
        height: 206px;
    }

    .rating-value-center {
        /*position: absolute;
        left: 50%;
        top: 28px;*/
        text-align: center;
    }

    .email-bg {
        background-image: url('../../../assets/img/email-bg-mobile.svg');
        margin: 0px 0px 0px 0px !important;
        min-height: 668px;
    }

    .wlty-icon {
        height: 88px;
        width: 88px;
    }

    .rating > span {
        margin: 11px;
    }
    /* .rating{
} */
    .rating-empty {
        content: url(../../../assets/img/star-non-fill.svg);
        width: 20px;
        height: 20px;
    }

    .rating-checked {
        content: url('../../../assets/img/star-fill.svg') !important;
        width: 20px;
        height: 20px;
    }

    .rating-checked-status {
        content: url('../../../assets/img/star-fill.svg') !important;
        width: 12px;
        height: 12px;
    }

    .rating-inactive {
        content: url('../../../assets/img/icons-ic-action-ratings-inactive.svg');
        width: 32px;
        height: 32px;
        margin: 8px !important;
        background-size: 32px 32px;
    }

    .rating-checked-48 {
        content: url('../../../assets/img/icons-ic-action-ratings-active.svg') !important;
        width: 32px;
        height: 32px;
        margin: 8px !important;
        background-size: 32px 32px;
    }

    .btn-outline-rating {
        border: 1px solid;
        border-radius: 24px;
        color: #1c79ca;
        font-size: 12px;
        font-family: MuseoSans;
        color: #1c79ca;
        background-color: #ffffff;
        border-color: #1c79ca;
        padding: 8px 12px;
        margin: 4px 4px 4px 4px;
    }

    .btn-outline-rating-clicked {
        border: 1px solid;
        border-radius: 24px;
        color: #1c79ca;
        font-size: 12px;
        font-family: MuseoSans;
        color: #ffffff;
        background-color: #1c79ca;
        border-color: #1c79ca;
        padding: 8px 12px;
        margin: 4px 4px 4px 4px;
    }
    /**************************** stepper **************************************/
    /**************************** stepper **************************************/
    /**************************** Upload  Mobile***************************************/
    .progressbar {
        width: 100px;
        margin-top: 4px;
    }

    .upload_icon_def_mobile {
        display: block;
    }

    .upload_icon_def, .upload_icon_dragenter {
        display: none !important;
    }

    .dropuploadarea,
    .dropuploadarea.filedroppedstate,
    .dropuploadarea.uploadcomplete_failure,
    .dropuploadarea.uploadcomplete_success {
        font-family: MuseoSans;
        height: auto;
        width: 100%;
    }

    .dduploadcontainer > label {
        font-size: 14px;
        text-align: left;
        font-family: MuseoSans;
    }

    .clearddarea {
        float: right;
    }

    .upload_details {
        color: #49494a;
        opacity: 1 !important;
        font-size: 10px;
        text-align: center;
    }
    /**************************** Upload ***************************************/
    /**************************** -=Tables START =-*****************************/
    .footer {
        position: relative;
        height: 50px;
        margin-top: -25px;
        width: 100%;
        height: auto;
        /* Set the fixed height of the footer here */
        line-height: 35px;
        /* Vertically center the text there */
        background-color: #4a4a4a;
        color: #ffffff;
        font-size: 12px;
    }

    .footer-rows {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 18px;
        margin-right: 5px;
    }
    /**************************** -=Tables =-*****************************/
    /**************************** -=TEXT START =-*****************************/
    .label-20-12, .label-16-12 {
        font-size: 12px;
    }

    .list-group-data-title {
        font-family: MuseoSans;
        font-size: 12px !important;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #49494a;
        padding-left: 2px;
    }

    .list-group-data-desc {
        font-size: 12px !important;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.57;
        letter-spacing: normal;
        color: #a6a6a6;
    }

    .list-group-item-title-subject {
        text-align: left !important;
    }
    /**************************** -=TABLES END =-*****************************/
    /**************************** -=TEXT START =-*****************************/
    .main-title-36-20 {
        font-size: 20px !important;
    }

    .greeting {
        font-size: 17px !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .last-login {
        line-height: 1 !important;
        font-size: 12px !important;
    }

    .main-title-80-36 {
        font-size: 36px !important;
    }

    .main-title-60-36 {
        font-size: 36px !important;
    }

    .main-title-48-24 {
        font-size: 24px !important;
    }

    .main-desc-24-12, .main-title-24-12-black, .main-title-24-12-orange {
        font-size: 12px;
        line-height: 1;
    }

    .main-desc-24-14, .main-desc-24-14-500 {
        font-size: 14px;
        line-height: normal;
    }

    .main-desc-20-12 {
        font-size: 12px !important;
    }

    .main-desc-16-12 {
        font-size: 12px !important;
    }

    .main-desc-14-10 {
        font-size: 10px;
    }

    .footer-text {
        font-size: 12px !important;
    }
    /**************************** -=TEXT END =-*****************************/
    /************************** -= DEFAULTS =- ****************************/
    .map-view {
        height: 100%;
        min-height: 260px !important;
        background: lightgrey;
    }

    .mobile-alignment {
        text-align: center !important;
    }

    .mobile-left-alignment {
        text-align: left !important;
    }

    .mobile-right-alignment {
        text-align: right !important;
    }

    .mobile-view {
        display: block;
    }

    .mobile-view-dashboard {
        display: block;
    }

    .desktop-view, .desktop-view2 {
        display: none;
    }

    .desktop-view-dashboard {
        display: none;
    }

    .desktop-view-card {
        display: none;
    }

    section {
        padding-top: 8px;
        margin: 18px 18px !important;
    }

    .margin-top-8 {
        margin-top: 0px;
    }

    .margin-top-3 {
        margin-top: 0rem;
    }

    .default-spacing,
    .default-spacing-24,
    .default-bottom-spacing-60 {
        margin-bottom: 16px !important;
    }

    .default-spacing-p {
        margin-top: 6px;
    }

    .default-bottom-spacing-40 {
        margin-bottom: 30px !important;
    }

    .pb-40 {
        margin: 0 !important;
        padding-bottom: 1rem !important;
    }

    .modal-gutter-32-48 {
        padding: 1.5rem 1rem 1.5rem 1rem;
    }

    .modal-text-16 {
        font-family: MuseoSans;
        font-size: 12px;
        font-weight: 300;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #49494a;
    }

    .transparent-dropdown {
        min-width: 180px;
    }

        .transparent-dropdown .btn {
            font-size: 14px;
            padding: 2px 4px 2px 0px;
            display: block;
            border: none !important;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-bottom: 1px solid lightgrey;
            background: transparent;
            box-shadow: none;
            width: 100%;
            min-width: 180px;
            opacity: 1 !important;
            color: white;
            outline: none;
            text-align: left;
        }

    .icons {
        font-size: 20px;
    }

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

    .hidden-md {
        display: block;
        visibility: visible;
    }

    .hidden-xs {
        display: none;
        visibility: hidden;
    }

    .red-dot {
        height: 12px;
        width: 12px;
        background-color: #e23219;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .green-dot {
        height: 12px;
        width: 12px;
        background-color: #20bd4c;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .gray-dot {
        height: 12px;
        width: 12px;
        background-color: #a6a6a6;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .yellow-dot {
        height: 12px;
        width: 12px;
        background-color: #fecc39;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .blue-dot {
        height: 12px;
        width: 12px;
        background-color: #1c79ca;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .hr-inverse {
        padding-bottom: 16px !important;
    }

    .card-sum {
        max-height: 100% !important;
        height: 100% !important;
    }

    .card-email-size {
        height: 360px !important;
    }

    .divider {
        border-left: 0;
        border-bottom: solid 1px rgba(192, 192, 192, 0.5);
        width: 100% !important;
        height: 0px;
        margin: 5px 5px 15px;
    }

    .mobile-spacing {
        margin-top: 15px !important;
    }

    .account-type {
        padding: .25rem .50rem !important;
        margin-left: 0 !important;
    }

    .text-centre-mobile {
        text-align: center !important;
    }
    /************************** -= DEFAULTS =- ****************************/
    /**************************** -=NAVIGATION=-***********************************/
    /* .navbar {
        max-height: 68px;
    } */
    .navbar-light .navbar-toggler {
        border: 0 !important;
    }

    .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }

    .nav-notification {
        margin-left: 150px;
    }

    .navbar-brand {
        margin-left: 3px;
    }

    .form-inline-nav {
        margin-right: 3px;
    }

    .nav-title,
    .nav-title:before,
    .nav-title:after,
    .nav-title:active,
    .nav-title a {
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.25;
        letter-spacing: normal;
        color: #49494a !important;
        text-decoration: none !important;
    }

    .nav-title-current {
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.25;
        letter-spacing: normal;
        color: #a6a6a6;
    }
    /**************************** -=NAVIGATION=-***********************************/
    /*** MODAL START ***/
    .modal-gutter {
        padding: 0px 5px 5px 5px !important;
    }

    .modal-icon {
        width: 44px;
        height: 44px;
    }
    /*** MODAL END ***/
    /** CHECKBOX START **/
    .square label {
        background-color: #fff;
        border: solid 1px #a6a6a6;
        cursor: pointer;
        left: 0;
        position: absolute;
        top: 3px !important;
        width: 15px !important;
        height: 15px !important;
    }

        .square label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 4px;
            opacity: 0;
            position: absolute;
            top: 3px;
            left: 3px;
            transform: rotate(-45deg);
            width: 7px;
        }

    .checkbox-text {
        padding-top: 0 !important;
    }

    .round label {
        border: solid 1px #e4e4e4;
        width: 24px;
        height: 24px;
    }

        .round label:after {
            left: 5px;
            top: 6px;
        }
    /** CHECKBOX END **/
    /**************************** -=CARD BODY STYLING  =-*****************************/
    /** CARD BODY STYLING START **/
    .card-gutter {
        margin: 20px;
    }

    .card-gutter-90 {
        margin: 20px;
    }

    .card-gutter-no-top-margin {
        margin: 0px 20px 20px;
    }

    .card-gutter-112 {
        margin: 20px;
    }

    .card-gutter-24 {
        margin: 20px;
    }

    .card-gutter-stepper {
        margin: 20px 0px 10px;
    }

    .card-text-14-9,
    .card-text-14-9-black,
    .card-text-12-9-black {
        font-size: 12px;
    }

    .card-text-12-uppercase {
        font-size: 10px !important;
    }

    .card-text-16-12-rm,
    .card-text-16-12,
    .tool-tip-text-16,
    .sim-body-tooltip {
        font-size: 12px !important;
    }

    .card-text-24-14-gray {
        font-size: 14px;
    }

    .card-text-16-12-gray {
        font-size: 12px;
    }

    .card-text-20-14, .card-text-20-14-500 {
        font-size: 14px;
        color: #49494a;
    }

    .card-text-20-14-gray {
        font-size: 14px;
    }

    .card-text-18-12,
    .card-title-inverse-black {
        font-size: 12px !important;
    }

    .card-text-48-24,
    .card-text-48-24-black,
    .tool-tip-text-32 {
        font-size: 24px;
    }

    .card-text-36-20 {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.4;
        color: #49494a;
        font-family: MuseoSans;
    }

    .card-title-blue-sm {
        font-size: 14px !important;
    }

    .card-title-blue,
    .card-title-blue-xl,
    .card-title-blue-xxl {
        font-size: 20px;
        color: #1c79ca;
    }

    .card-title-inverse {
        font-size: 14px;
        color: #515457;
    }

    .card-title-inverse-xl {
        font-size: 36px;
        color: #49494a;
    }

    .card-title-inverse-light,
    .card-title-inverse-lighter,
    .card-title-inverse-dark,
    .card-title-inverse-darkest {
        font-size: 14px;
        color: #49494a;
    }

    .card-title-inverse-32-24 {
        font-size: 24px;
        line-height: 0.67;
        color: #49494a;
    }

    .card-title-inverse-16-12 {
        font-size: 12px;
        line-height: 0.67;
        color: #49494a;
    }

    .card-icon-lg {
        width: 100%;
    }

    .card-icon {
        width: 60px;
        height: 70px;
    }

    .card-trail-icon {
        width: 30px;
        height: 30px;
        position: relative;
        right: 12px
    }

    .card-squeeze-20 {
        margin: 0px 20px 0px 20px;
    }
    /** CARD BODY STYLING END **/
    /**************************** -=BUTTON STYLING  =-*****************************/
    /** BUTTON STYLING START**/
    .btn-primary, .btn-outline-primary, .btn-success, .btn-outline-success, .btn-grey, .btn-200 {
        max-width: 100%;
    }

    /*.btn-success.disabled, .btn-outline-success.disabled, .btn-grey.disabled, btn-200.disabled
        .btn-success:disabled, .btn-outline-success:disabled, .btn-grey:disabled, btn-200:disabled {
            color: #fff;
            background-color: lightgray;
            border-color: lightgray;
        }*/

    .btn {
        font-size: 14px !important;
    }

    .btn-grey,
    .btn-grey:hover {
        color: #fff;
        margin: auto;
        background-color: lightgray;
        border-color: lightgray;
    }

    .btn-outline-primary {
        margin: auto;
        border-radius: 4px;
        border: solid 1px #ffffff;
        color: white;
    }

        .btn-outline-primary:enabled:hover,
        .btn-outline-primary:active {
            margin: auto;
            border-radius: 4px;
            /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
            background-color: rgba(255, 255, 255, 0.2) !important;
            border: solid 1px #ffffff !important;
            color: white !important;
        }

    .btn-primary {
        margin: auto;
        border-radius: 4px;
        color: #1c79ca;
        border: solid 1px #ffffff !important;
        background-color: white !important;
    }

        .btn-primary.disabled,
        .btn-primary:disabled {
            color: #8b8b8b !important;
            background-color: #e4e4e4 !important;
        }

        .btn-primary:enabled:hover,
        .btn-primary:active {
            margin: auto;
            border-radius: 4px;
            /*box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
            background-color: #fff !important;
            border: solid 1px #ffffff !important;
            color: #1c79ca !important;
        }
    /** BUTTON STYLING END**/
    /*** Page Specific  *******************************************************************/
    /*** Contractor  *******************************************************************/
    .btn-track {
        max-width: 264px !important;
    }

    .divider-xl {
        border-left: solid 1px rgba(192, 192, 192, 0.5);
        width: 1px;
        height: 194px;
    }

    .divider-small {
        /*top: 3px;*/
        height: 72px;
    }

    .divider-xl {
        border-left: 0;
        border-bottom: solid 1px rgba(192, 192, 192, 0.5);
        width: 100% !important;
        height: 5px;
        margin: 16px;
    }

    .divider-md {
        border-left: 0;
        border-bottom: solid 1px rgba(192, 192, 192, 0.5);
        width: 100% !important;
        height: 5px;
        margin: 16px;
    }
    /*** Supports  *******************************************************************/
    .card-gutter-with-image {
        margin: 24px 24px 0px;
    }

    .support-links {
        font-size: 12px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #1c79ca;
        text-decoration: none;
    }

    .blue-circel {
        border: 2px solid #1c79ca;
        height: 80px;
        width: 80px;
    }

    .span-hours {
        font-size: 36px;
        line-height: 1.57;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
    }

    .span-hours-text {
        font-size: 14px;
        margin-top: -10px;
    }

    .diff-left-margin {
        margin-left: 1rem !important;
        margin-top: 4px;
    }

    .background-tower-1200 {
        min-height: 568px;
        height: 568px !important;
    }

    .background-tower-600 {
        min-height: 570px;
        height: 570px !important;
    }

    .top-area,
    .top-area-profile {
        margin-top: 10px;
    }

    .box-wrap-password-desktop {
        display: none;
    }

    .box-wrap-password-mobile {
        margin-top: 200px;
        height: 360px;
        width: 100%;
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .box {
        width: 284px;
        height: 58px;
        padding: 5px;
        border-radius: 5px;
        background-color: #ffffff;
        box-shadow: -2px 2px 4px 0 rgba(73, 73, 74, 0.16);
    }

        .box:hover {
            top: -10px;
        }

    .box-img {
        height: 24px;
        padding: 0px;
        margin-left: -22px;
        margin-top: 7px;
        margin-bottom: -17px;
    }

    .box-title {
        height: 18px;
        font-weight: 500;
        font-size: 14px;
        color: #1c79ca;
        float: left;
        font-family: MuseoSans;
        margin-left: 43px;
        margin-top: -13px;
        margin-bottom: 5px;
    }

    .box-desc {
        font-family: MuseoSans;
        font-size: 11px;
        font-weight: 300;
        color: #49494a !important;
        margin-top: -2px;
        float: left;
        margin-left: 43px;
        display: block;
    }

    .register-text {
        font-size: 14px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        color: #fecc39;
    }

    .box-wrap-register-desktop {
        display: none;
    }

    .box-wrap-register-mobile {
        margin-top: 85px;
        height: 360px;
        width: 100%;
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        text-align: center;
    }

    .box-wrap-register-bulk-desktop {
        display: none;
    }

    .box-wrap-register-bulk-mobile {
        margin-top: 85px;
        height: 360px;
        width: 100%;
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        text-align: center;
    }

    .box-wrap-login-desktop {
        display: none;
    }

    .box-wrap-login-mobile {
        margin-top: 128px;
        height: 360px;
        width: 100%;
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        text-align: center;
    }

    .policy-text {
        color: #fecc39;
        font-family: MuseoSans;
        font-size: 11px;
        font-weight: 300;
    }
    /* form table */
    .form-table th {
        padding: 8px;
        font-size: 12px;
        color: white;
        background: #49494a;
        border: none !important;
    }

    .mobile-left-border {
        border-top-left-radius: 0.7rem;
    }

    .mobile-td-desc {
        font-size: 12px;
        font-weight: 300;
        margin-left: 15px;
    }

    .form-table td {
        padding: 8px;
        font-size: 12px;
    }
    /* ***************************** Popup ********************************* */
    .popup-title-36-20 {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.17;
        margin: 0.25em;
    }

    .modal-content {
        position: absolute;
        top: 30px;
    }

    .mx-3,
    .my-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .col-2-checkbox {
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
    }

    .modal-body {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal-body .modal-container {
            padding-right: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
        }

    .popup-header {
        padding: 1rem !important;
    }

    .popup-title {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.17;
        margin: 0.25em;
    }

    .popup-title-sub {
        font-size: 24px;
        line-height: 1;
        text-align: center;
    }

    .popup-heading {
        font-size: 14px;
        font-weight: 300;
        text-align: center;
        margin: 0.25em;
    }

    .popup-content {
        font-size: 14px;
        line-height: 1.33;
        text-align: center;
        margin: 0.25em 0.505em 0.25em 0.50em;
    }

    .popup-content-left {
        font-size: 14px;
        line-height: 1.33;
        text-align: left;
    }

    .popup-content br {
        display: none;
    }

    .popup-input {
        width: 35px;
    }

    .OTP {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .Validation---Failed {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .Validation---Success {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .image-close {
        width: 12px;
        height: 12px;
        padding: 0px;
        margin: 0px;
    }

    .model-body {
        padding-top: 0px;
    }

    .progress-btn {
        position: relative;
        width: 140px;
        height: 36px;
        display: inline-block;
        font-family: MuseoSans;
        font-weight: normal;
        font-size: 20px;
        transition: all 0.4s ease;
        text-align: center;
        border: 1;
        border-radius: 0.5rem;
        color: white;
    }

        .progress-btn .btn {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            line-height: 1.5;
            z-index: 10;
            opacity: 1;
            border-color: #20BD4C;
            border-radius: 0.5rem;
        }

    .paybill-pop-title {
        font-family: MuseoSans;
        font-size: 12px;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #49494a;
    }

    .paybill-pop-desc {
        font-family: MuseoSans;
        font-size: 10px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.3 !important;
        letter-spacing: normal;
        color: #a6a6a6;
    }

    .paybill-pop-text {
        font-size: 12px;
        font-weight: 300;
        text-align: left;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.57;
        letter-spacing: normal;
        color: #49494a;
        height: 20px;
        line-height: 20px;
    }

    .list-group-item-amt {
        font-family: MuseoSans;
        font-size: 14px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: right;
        color: #1c79ca;
    }

    .paybill-disclaimer {
        font-family: MuseoSans;
        font-size: 12px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #49494a
    }

    .vl {
        border-bottom: 1px solid rgba(192, 192, 192, 0.7);
        border-left: none !important;
        height: 0rem !important;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .btn-select {
        display: none;
        width: 140px !important;
        height: 36px !important;
    }

    .popup-button {
        width: 150px !important;
        height: 36px !important;
    }

    .account-type-img {
        width: 48px;
        height: 48px;
        margin-right: -10px;
        margin-top: 10px;
    }

    .account-type-p {
        font-size: 12px;
        text-align: left;
        margin-right: 15px;
    }

    .popup-sub-title {
        font-size: 24px;
        text-align: left;
        margin: 0px;
    }
    /* WHAT?! */
    .hidden-md {
        display: block;
        visibility: visible;
    }
    /* WHY?! */
    .hidden-xs {
        display: none;
        visibility: hidden;
    }

    .lable-order {
        order: 2;
    }

    .text-middle {
        text-align: center !important;
    }

    .btn-download .download {
        width: 100%;
    }

    .blue-theme-selection label {
        padding: 0.30rem;
        font-size: 12px;
    }

    .search {
        position: absolute;
        top: 71px;
        right: 83px;
        left: auto;
        transform: translateX(-10%) translateY(-10%);
        -webkit-transform: translateX(-10%) translateY(-10%);
    }

    .search__field {
        padding: 31px;
        margin-bottom: 14rem;
        margin-left: -1rem;
    }

    .base-content {
        padding-top: 50px;
    }

    .top-space {
        margin-top: 0;
    }

    .filter-card {
        position: relative;
        right: 0px;
        cursor: pointer;
        float: left;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation : landscape) {
    .background-720.careline-landing {
        min-height: 830px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .tablet-spacing {
        margin-top: 1.5rem !important;
    }

    .tablet-spacing-mt-6 {
        margin-top: 4rem !important;
    }

    .vl {
        border: none;
        height: auto;
    }

    .dashboard .footer {
        position: relative;
        height: 50px;
        margin-top: -25px;
        width: 100%;
        height: auto;
        /* Set the fixed height of the footer here */
        line-height: 35px;
        /* Vertically center the text there */
        background-color: #4a4a4a;
        color: #ffffff;
        font-size: 12px;
    }

    .dashboard .footer-rows {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 18px;
        margin-right: 5px;
    }

    .dashboard .list-group-data-title {
        font-family: MuseoSans;
        font-size: 12px !important;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #49494a;
        padding-left: 2px;
    }

    .dashboard .list-group-data-desc {
        font-size: 12px !important;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.57;
        letter-spacing: normal;
        color: #a6a6a6;
    }

    .dashboard .list-group-item-title-subject {
        text-align: left !important;
    }

    .dashboard .greeting {
        font-size: 24px !important;
    }

    .dashboard .last-login {
        font-size: 12px !important;
    }

    .dashboard .mobile-view {
        display: flex;
    }

    .dashboard .desktop-view {
        display: none;
    }

    .dashboard section {
        padding-top: 8px;
        margin: 18px 18px !important;
    }

    .dashboard .default-spacing,
    .dashboard .default-spacing-24,
    .dashboard .default-bottom-spacing-60 {
        margin-bottom: 16px !important;
    }

    .dashboard .transparent-dropdown {
        min-width: 180px;
    }

        .dashboard .transparent-dropdown .btn {
            font-size: 14px;
            padding: 2px 4px 2px 0px;
            display: block;
            border: none !important;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-bottom: 1px solid lightgrey;
            background: transparent;
            box-shadow: none;
            width: 100%;
            min-width: 180px;
            opacity: 1 !important;
            color: white;
            outline: none;
            text-align: left;
        }

    .dashboard .icons {
        font-size: 20px;
    }

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

    .dashboard .red-dot {
        height: 12px;
        width: 12px;
        background-color: #e23219;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .dashboard .green-dot {
        height: 12px;
        width: 12px;
        background-color: #20bd4c;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .dashboard .yellow-dot {
        height: 12px;
        width: 12px;
        background-color: #fecc39;
        border-radius: 50%;
        display: inline-block;
        margin-right: 2px;
    }

    .dashboard .card-sum {
        max-height: 100% !important;
        height: 100% !important;
    }

    .dashboard .divider {
        border-left: 0;
        border-bottom: solid 1px rgba(192, 192, 192, 0.5);
        width: 100% !important;
        height: 0px;
        margin: 5px 5px 15px;
    }

    .dashboard .res-align {
        text-align: right;
    }

    .account-type {
        padding: 0.25rem 0.5rem !important;
        margin-left: 0 !important;
    }

    .dashboard .navbar-light .navbar-toggler {
        border: 0 !important;
    }

    .dashboard .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }

    .dashboard .nav-notification {
        margin-left: 150px;
    }

    .dashboard .navbar-brand {
        margin-left: 3px;
    }

    .dashboard .form-inline-nav {
        margin-right: 3px;
    }

    .dashboard .nav-title,
    .dashboard .nav-title:before,
    .dashboard .nav-title:after,
    .dashboard .nav-title:active,
    .dashboard .nav-title a {
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.25;
        letter-spacing: normal;
        color: #49494a !important;
        text-decoration: none !important;
    }

    .dashboard .nav-title-current {
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.25;
        letter-spacing: normal;
        color: #a6a6a6;
    }

    .dashboard .card-gutter {
        margin: 20px;
    }

    .dashboard .card-gutter-90 {
        margin: 20px;
    }

    .dashboard .card-gutter-112 {
        margin: 20px;
    }

    .dashboard .card-gutter-24 {
        margin: 20px;
    }

    .dashboard .hidden-xs {
        display: block;
        visibility: visible;
    }

    .dashboard .hidden-md {
        display: none;
        visibility: hidden;
    }

    .dashboard .mobile-spacing {
        margin-top: 0 !important;
    }

    .dashboard .no-left-padding {
        padding: 0 !important;
    }

    .dashboard .show-number {
        font-size: 1rem;
    }

        .dashboard .show-number i {
            margin-left: 7px;
        }

    .dashboard .card-title-inverse-lighter,
    .dashboard .card-title-inverse-dark,
    .dashboard .card-title-inverse-darkest {
        font-size: 14px;
        color: #49494a;
    }

    .dashboard .card-title-inverse-xl {
        font-size: 36px;
    }

    section {
        margin: 18px 18px;
    }

    #gridDrafts .table-header tr {
        vertical-align: top;
    }

    .down-arrow {
        margin-left: 5px;
    }

    .main-title-60-36 {
        font-size: 48px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        color: #ffffff;
    }

    .tablet-hide {
        display: none !important;
    }

    .mobile-view-dashboard {
        display: block;
    }

    .desktop-view-dashboard {
        display: none;
    }
}
/**** IPAD Portrait mode changes ****/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    .tablet-left-alignment {
        text-align: left !important;
    }

    section {
        margin: 18px 18px;
    }

    .input-group .form-control.number,
    .viewCard .input-group .form-control {
        top: 22px;
    }

    .viewCard.profile .input-group .form-control {
        top: 0;
    }

    .form-control-text {
        padding-top: 15px !important;
    }

    .ml {
        margin-left: 45px !important;
    }

    .app-details .form-top {
        top: -33px !important;
    }

    .default-spacing-p.top {
        margin-top: 15px !important;
    }

    .p-t-20 {
        padding-top: 20px !important;
    }

    .no-padding {
        padding: 0 !important;
    }
}

@media only screen and (min-width : 768px) and (max-width : 1280px) {
    .tablet-left-alignment {
        text-align: left !important;
    }

    .hidden-smxs-down {
        display: none;
    }

    .label-top {
        font-size: 14px !important;
        background-color: transparent;
        text-transform: uppercase;
    }

    #incident1 .input-group,
    .add-account .input-group {
        border-bottom: 1px solid lightgrey;
    }

    .ml {
        margin-left: 24px;
    }

    .app-details .card-gutter {
        margin: 20px;
    }

    .app-details .card-gutter-90 {
        margin: 20px;
    }

    .account-type {
        margin-left: -50px !important;
    }

    .dashboardv3 .card.account {
        padding: 1rem;
    }

    .default-spacing-p.top {
        margin-top: 8px;
    }
}
/* IE buf fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie-pt-15 {
        padding-top: 15px;
    }

    .top-space .account-type {
        margin-left: 5px !important;
    }

    .top-space.dashboardv3 .account-type {
        margin-left: -50px !important;
    }

    section.top-space {
        margin: 18px 18px;
    }

    .label-top {
        font-size: 14px;
        background-color: transparent;
        text-transform: uppercase;
    }

    .form-inline-nav {
        margin-right: 45px;
    }

    /*TO solve IE bug when flex property is used, under some conditions the grid system of bootstrap will break*/
    #settings .row {
        width: 100% !important;
    }

    #settings .col-md-2 {
        margin-right: 45px !important;
        font-size: 16px !important;
    }

    #notification .row {
        width: 100% !important;
    }

    #notification .col-md-2 {
        margin-right: 45px !important;
        font-size: 16px !important;
    }

    #logout .row {
        width: 100% !important;
    }

    #logout .col-md-2 {
        margin-right: 45px !important;
        font-size: 16px !important;
    }

    /*Bug 3987 Fix for IE*/
    .col-md-12 {
        flex: auto;
    }
}
/**Fixed bug 1115*/
@media screen and (max-width: 767px) and (min-width: 320px) {
    .btn {
        font-size:9px !important;
    }
}

/*.mobile-view .dropdown .fa.account-details {
    font-size: 1.1rem;
    position: absolute;
}*/

@media screen and (max-width:425px) {
    /* ALEPH */
    .modal-dialog.modal-dialog-centered {
        margin: 18px;
    }
}
/* ======================= */
/* Settings for WLTY Popup */
@media (min-width: 768px) {
    #divTYModal {
        padding: 60px 25px !important;
    }
}

.modal-dialog.modal-large {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.modal-dialog.modal-large-billpayment {
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.set-survey-background {
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
}

@media screen and (min-width: 768px) and (max-width: 790px) {
    .set-survey-background {
        background-image: url('../../../assets/img/survey-bg-mobile-new.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 830px;
    }

    .thanks-survey {
        margin-top: 8rem !important;
    }
}

.cloud-row {
    margin-top: 60px;
}

@media (min-width: 768px) {
    .cloud-row {
        margin-top: -70px;
    }
}
/* ======================= */

/* WLTY Full Screen */
/*#questionaire .mt-3.rating-value-center {
    margin-top: 0 !important;
}*/

#questionaire .modal-container.modal-container-with-image {
    padding-top: 0;
}

#settings p, #notification p, #logout p {
    width: 25px;
    overflow: hidden;
    -webkit-transition: width 1s;
    transition: width 1s;
    white-space: nowrap;
}

#settings.hover p {
    width: 110px;
}

#notification.hover p {
    width: 170px;
}

#logout.hover p {
    width: 110px;
}

.input-group > .input-group-append > .btn,
.input-group > .date > .input-group-append > .btn {
    /*height: 20px;*/
    /**width: 20px;*/
    margin-top: -4px;
}

/** Fix bug 1113*/
.ie-select-fix-label {
    margin-top: 8px;
    margin-right: 10px;
}

.ie-select-fix {
    position: relative;
    float: left;
}

    .ie-select-fix select::-ms-expand {
        display: none;
    }

    .ie-select-fix:after {
        content: '<>';
        font: 17px "Consolas", monospace;
        color: #333;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        right: 5px;
        top: 10px;
        padding: 0 0 2px;
        border-bottom: 1px solid #999;
        position: absolute;
        pointer-events: none;
    }

    .ie-select-fix select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        max-width: 320px;
        height: 32px;
        float: right;
        margin: 5px 0px 5px 0;
        padding: 0 44px 2px 10px;
        font-size: 16px;
        color: #333;
        background-color: #ffffff;
        background-image: none;
        border: 1px solid #cccccc;
        -ms-word-break: normal;
        word-break: normal;
    }

.option-group select [disabled='']::-ms-value, .option-group select::-ms-value {
    color: white;
}

.card-option-group select [disabled='']::-ms-value, .card-option-group select::-ms-value {
    color: black;
}

/*Bug:2291*/
@media screen and (min-width: 320px) and (max-width: 992px) {
    .nav-title, .nav-title:before, .nav-title:after, .nav-title:active, .nav-title a {
        color: #49494a;
    }
}

/*Fix 2424*/
.ui-timepicker-container {
    z-index: 9000 !important;
}

/*FEATURE 2040--START--*/
.checkbox-overlay {
    display: block;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
    left: 0px;
    position: absolute;
    top: 5px;
    width: 18px;
    height: 18px;
}

.checkbox-overlay-purple {
    display: block;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 24px;
    height: 24px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .checkbox-overlay {
        display: block;
        background-color: rgba(0,0,0,0);
        cursor: pointer;
        left: 0px;
        position: absolute;
        top: 3px !important;
        width: 15px !important;
        height: 15px !important;
    }
}
/*FEATURE 2040--END--*/

/* Font Size */
.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

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

/*Start New TNB EXT */
/*===== GLOBAL =====*/

html {
    position: relative;
    min-height: 100%;
}

b, strong {
    font-weight: bold !important;
}

#account-dropdown-container {
    z-index: 6;
}

#dropdownMenuLink:hover {
    text-decoration: none;
    color: initial;
}

#dropdownMenuLink:active {
    text-decoration: none;
    color: initial;
}

#dropdownMenuLink:visited {
    text-decoration: none;
    color: initial;
}

#dropdownMenuLink:focus {
    text-decoration: none;
    color: initial;
    outline: 0;
}

/* Dashboard Dropdown */
.dd-overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 0;
    width: 0;
    background-color: rgb(0,0,0);
    opacity: 0;
    z-index: -10;
    transition: opacity 0.4s;
}

    .dd-overlay.shown {
        width: 100%;
        height: 100%;
        opacity: 0.4;
        z-index: 3;
    }

.ajax-loading-icon {
    position: absolute;
    display: none;
}

    .ajax-loading-icon.desktop-loader, .ajax-loading-icon.mobile-loader {
        right: 20px;
        top: 3px;
    }

.dropdown.dropdown-overlay.show #dropdownMenuButton, .dropdown.dropdown-overlay.show #dropdownMenuButtonTop {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
    -webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.2);
}

#dashboard-dropdown-desktop, #dashboard-dropdown-mobile, #dashboard-dropdown-mobile2, #dashboard-dropdown-mobile3 {
    width: 100%;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    z-index: 4;
}

#aboutmybill-dropdown-mobile {
    width: 100%;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    z-index: 4;
    box-shadow: -4px 4px 16px 0 rgba(0,0,0,0.2),-4px 4px 16px 0 rgba(0,0,0,0.19) !important;
}

#tenagaprepay-dropdown-mobile {
    width: 100%;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    z-index: 4;
    box-shadow: -4px 4px 16px 0 rgba(0,0,0,0.2),-4px 4px 16px 0 rgba(0,0,0,0.19) !important;
}

.account-list {
    position: relative;
    max-height: 250px;
    height: 400px;
}
/*#dashboard-dropdown-desktop .account-list {
    max-height: 500px;
    height:500px;
}
#dashboard-dropdown-mobile .account-list {
    max-height: 400px;
    height: 400px;
}*/
#accountListDesktop, #accountListMobile {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
/* ----- end Dashboard Dropdown ----- */

/* Wrapper */
.mytnb-wrapper {
    padding-bottom: 235px;
}

.mytnb-application-card {
    display: flex;
    padding: 24px;
    flex-direction: column;
    background-color: white;
    border-radius: 5px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

    .mytnb-application-card .mytnb-application-card-content {
        margin-bottom: 8px;
        width: 100%; /* Fix flex display for IE11 */
    }

.mytnb-application-card-mobile {
    display: flex;
    background-color: white;
    border-radius: 5px;
    padding: 16px;
    align-items: center;
}

.mytnb-card-disabled p, .mytnb-card-disabled h2, .mytnb-card-disabled img {
    opacity: 0.6;
}
/* Footer */
footer.mytnb-footer {
    background-color: #4a4a4a;
    padding: 2rem;
    padding-bottom: 0;
    color: #fff;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

    footer.mytnb-footer a {
        color: #f3c43a;
    }

        footer.mytnb-footer a .fa {
            font-size: 12px;
        }

            footer.mytnb-footer a .fa:hover {
                color: #4a4a4a;
            }

    footer.mytnb-footer .mytnb-footer-copyright {
        color: #a6a6a6;
        font-size: 12px;
    }

    footer.mytnb-footer ul.list-unstyled li {
        margin-bottom: 0.5rem;
    }

        footer.mytnb-footer ul.list-unstyled li a {
            color: #fff;
        }

    footer.mytnb-footer .mt-1 {
        margin-top: 0.5rem !important;
    }

    footer.mytnb-footer .list-inline-item:not(:last-child) {
        margin-right: .3rem;
    }

    footer.mytnb-footer .footer-label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        text-decoration: none;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    footer.mytnb-footer .social-media-icons {
        display: block;
        color: #fff;
        font-size: 12px !important;
        line-height: 28px;
        text-align: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin: 0 5px 0 0;
        padding: 0 !important;
        float: left;
    }

@media (min-width: 0px) and (max-width: 767px) {
    .mytnb-wrapper {
        padding-bottom: 0;
    }

    footer.mytnb-footer {
        position: relative;
        bottom: auto;
        left: auto;
        height: auto;
        padding: 2rem 0.8rem;
        padding-bottom: 0;
    }

        footer.mytnb-footer a .fa {
            font-size: 10px;
        }
}

@media (min-width: 768px) {
    footer.mytnb-footer div .col-sm-offset-7 {
        /*margin-left: 58.33333333%;*/
        padding-left: 15px !important;
    }
}

@media (min-width: 960px) {
    footer.mytnb-footer div .col-md-offset-0 {
        /*margin-left: 0;*/
        padding-left: initial !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mytnb-wrapper {
        padding-bottom: 330px;
    }

    footer.mytnb-footer {
        height: auto;
    }
}

@media (min-width: 1024px) and (max-width: 1025px) {
    .mytnb-wrapper {
        padding-bottom: 330px;
    }

    footer.mytnb-footer {
        height: auto;
    }
}

/* Form */
.mytnb-form input:hover, .mytnb-form input:focus, .mytnb-form input:active,
.mytnb-form textarea:hover, .mytnb-form textarea:focus, .mytnb-form textarea:active,
.mytnb-form select:hover, .mytnb-form select:focus, .mytnb-form select:active {
    outline: none;
    box-shadow: none !important;
}

.mytnb-form .form-control-sm, .mytnb-form .form-control-lg {
    padding-left: 0;
    padding-right: 0;
}

.mytnb-form {
    margin-top: 1.5rem;
}

    .mytnb-form input::placeholder {
        color: #f4f4f4;
        opacity: 0;
    }

    .mytnb-form input:focus::placeholder {
        color: #f4f4f4;
        opacity: 0.9;
    }

    .mytnb-form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: rgba(0, 0, 0, 0);
    }

    .mytnb-form input::-ms-input-placeholder { /* Microsoft Edge */
        color: rgba(0, 0, 0, 0);
    }

    .mytnb-form input, .mytnb-form select, .mytnb-form textarea {
        background-color: rgba(0,0,0,0) !important;
        border: 0 none;
        border-bottom: 1px solid #fff;
        border-radius: 0;
        padding-left: 0;
        color: rgb(255,255,255);
    }

        .mytnb-form input:disabled, .mytnb-form select:disabled, .mytnb-form textarea:disabled {
            border-bottom: 1px solid rgba(255,255,255,0.453);
        }

    .mytnb-form textarea {
        background-color: rgba(0,0,0,0.08) !important;
        padding-left: 0.5rem;
    }

        .mytnb-form textarea:focus {
            color: rgb(255,255,255);
        }

    .mytnb-form input:focus {
        border-bottom: 1px solid #fecc39;
        color: rgb(255,255,255);
    }

    .mytnb-form select:focus {
        border-bottom: 1px solid #fecc39;
        color: rgb(255,255,255);
        padding-left: 0;
    }

    .mytnb-form select option {
        background-color: #fff;
        color: #222;
        padding-left: 0;
        cursor: pointer;
    }

    .mytnb-form .form-group {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .mytnb-form .form-control + .form-control-placeholder {
        position: absolute;
        top: 0;
        padding: 7px 0 0 0;
        transition: all 200ms;
        opacity: 0.9;
        cursor: text;
    }

    .mytnb-form .form-control-lg + .form-control-placeholder {
        position: absolute;
        top: 0;
        padding: 7px 0 0 0;
        font-size: 1.5rem;
        transition: all 200ms;
        opacity: 0.9;
        cursor: text;
    }

    .mytnb-form .form-control-sm + .form-control-placeholder {
        position: absolute;
        top: 0;
        padding: 7px 0 0 0;
        font-size: 0.8rem;
        transition: all 200ms;
        opacity: 0.9;
        cursor: text;
    }

    .mytnb-form .form-control-lg + .form-control-placeholder-email {
        position: absolute;
        top: 0;
        padding: 7px 0 0 0;
        font-size: 1.5rem;
        transition: all 200ms;
        opacity: 0.9;
        cursor: text;
    }

    .mytnb-form .form-control-sm + .form-control-placeholder-email {
        position: absolute;
        top: 0;
        padding: 7px 0 0 0;
        font-size: 0.8rem;
        transition: all 200ms;
        opacity: 0.9;
        cursor: text;
    }

    .mytnb-form .form-control-placeholder-email {
        position: absolute;
        top: 0;
        padding: 7px 0 0 0;
        transition: all 200ms;
        opacity: 0.9;
        cursor: pointer;
    }

    .mytnb-form .form-control-placeholder-select {
        position: absolute;
        top: 0;
        padding: 7px 0 0 0;
        transition: all 200ms;
        opacity: 0.9;
        cursor: pointer;
    }

    .mytnb-form .form-control-placeholder-textarea {
        position: absolute;
        top: 25px;
        padding: 3px 0 0 8px;
        transition: all 200ms;
        opacity: 0.9;
        cursor: text;
    }

    .mytnb-form .form-control:focus + .form-control-placeholder,
    .mytnb-form .form-control:valid + .form-control-placeholder {
        font-size: 85%;
        transform: translate3d(0, -100%, 0);
        opacity: 1;
        text-transform: uppercase;
    }

    .mytnb-form .form-control:focus + .form-control-placeholder-email,
    .mytnb-form .form-control:valid + .form-control-placeholder-email {
        font-size: 85%;
        transform: translate3d(0, -100%, 0);
        opacity: 1;
        text-transform: uppercase;
    }

    .mytnb-form input.form-control:invalid {
        color: rgba(0,0,0,0);
    }

    .mytnb-form input.form-control:focus {
        color: #fff;
    }

    .mytnb-form .form-control:valid + .form-control-placeholder-select {
        font-size: 85%;
        transform: translate3d(0, -100%, 0);
        opacity: 1;
        margin-top: 0.7rem;
    }

    .mytnb-form .form-control:focus:valid + .form-control-placeholder-select {
        font-size: 100%;
        text-transform: uppercase;
    }

    .mytnb-form .form-control:disabled + .form-control-placeholder,
    .mytnb-form .form-control-sm:disabled + .form-control-placeholder,
    .mytnb-form .form-control-lg:disabled + .form-control-placeholder {
        color: rgba(255,255,255,0.453);
    }


    .mytnb-form .form-group-select {
        position: relative;
        display: block;
    }

    .mytnb-form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

        .mytnb-form select::-ms-expand {
            display: none;
        }

    .mytnb-form .form-group-select:after {
        content: "\f107";
        font-family: FontAwesome;
        color: #fff;
        padding: 9px 8px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        pointer-events: none;
        box-sizing: border-box;
        font-size: 120%;
    }

/* Checkbox */

input[type="checkbox"]:disabled ~ .checkmark {
    border: 1px solid #dee2e6 !important;
    cursor: not-allowed;
}

/* Remove Outline on Info Card Button */
.btn.info-card:focus, .btn.info-card:active {
    outline: none !important;
    box-shadow: none;
}


/* Google Material input styling */
.mytnb-input-group {
    position: relative;
    margin-bottom: 45px;
}

.mytnb-input {
    padding: 10px 10px 5px 10px;
    display: block;
    width: 100%;
    border: none;
    box-sizing: border-box;
}

    .mytnb-input:focus {
        outline: none;
    }

.mytnb-label-top {
    position: absolute;
    font-size: 20px;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    color: #a6a6a6;
    text-transform: uppercase;
}

.mytnb-input:focus ~ label, .mytnb-input:valid ~ label {
    top: -20px;
    font-size: 14px;
}

.mytnb-bar {
    position: relative;
    display: block;
    width: 100%;
}

    .mytnb-bar:before, .mytnb-bar:after {
        content: '';
        height: 1px;
        position: absolute;
        background: #634adc;
        transition: 0.2s ease all;
        left: 0;
    }

    .mytnb-bar:before {
        bottom: 0;
        width: 100%;
    }

    .mytnb-bar:after {
        bottom: 1px;
        width: 0;
    }

.mytnb-input:focus ~ .mytnb-bar:after {
    width: 100%;
}
/* Button quick fixes */
.mytnb-outline-success {
    max-width: 264px;
    width: 100%;
    min-width: 200px;
}

@media (min-width: 768px) {
    .mytnb-outline-success {
        width: 200px;
    }
}
/* New Stepper */
.tnb-stepper {
    display: table;
    width: 100%;
    margin: 0 auto;
}

    .tnb-stepper .tnb-step {
        width: 16.666%;
        display: table-cell;
        position: relative;
        cursor: pointer;
    }

        .tnb-stepper .tnb-step.disabled, .tnb-stepper .tnb-step.disabled .tnb-step-circle {
            cursor: default;
        }

            .tnb-stepper .tnb-step.disabled .tnb-step-circle,
            .tnb-stepper .tnb-step.disabled .tnb-step-title {
                opacity: 0.3;
            }

    .tnb-stepper.journey .tnb-step.disabled + .tnb-step > .tnb-step-bar-left,
    .tnb-stepper.journey .tnb-step.disabled .tnb-step-bar-right,
    .tnb-stepper.journey .tnb-step.disabled .tnb-step-bar-left,
    .tnb-stepper.journey .tnb-step.before-disabled .tnb-step-bar-right {
        border-color: #bbb;
        opacity: 0.3;
    }

    .tnb-stepper .tnb-step .tnb-step-circle {
        width: 34px;
        height: 34px;
        margin: 0 auto;
        border-radius: 100%;
        text-align: center;
        line-height: 2em;
        font-size: 18px;
        line-height: 26px;
        display: inline-block;
        border-radius: 25px;
        z-index: 2;
        cursor: pointer;
        color: #634adc;
        border: 3px solid #634adc;
        background-color: #fff;
    }

        .tnb-stepper .tnb-step .tnb-step-circle .tnb-step-tick {
            display: none;
            height: 22px;
            width: 22px;
        }

    .tnb-stepper .tnb-step .tnb-step-title {
        margin-top: 16px;
        font-size: 16px; /* Font Reduced */
        font-weight: normal;
        text-align: center;
        display: none;
        color: #ccc;
    }

@media screen and (min-width: 768px) {
    .tnb-stepper .tnb-step .tnb-step-title {
        display: block;
    }
}

.tnb-stepper .tnb-step .tnb-step-bar-left,
.tnb-stepper .tnb-step .tnb-step-bar-right {
    position: absolute;
    top: 15px;
    height: 1px;
    border-top: 4px solid #634adc;
}

.tnb-stepper .tnb-step .tnb-step-bar-left {
    left: 0;
    right: 50%;
    margin-right: 20px;
    border-top-right-radius: 7rem;
    border-bottom-right-radius: 7rem;
}

.tnb-stepper .tnb-step .tnb-step-bar-right {
    right: 0;
    left: 50%;
    margin-left: 20px;
    border-top-left-radius: 7rem;
    border-bottom-left-radius: 7rem;
}

.tnb-stepper .tnb-step:first-child .tnb-step-bar-left {
    display: none;
}

.tnb-stepper .tnb-step:last-child .tnb-step-bar-right {
    display: none;
}

.tnb-stepper .tnb-step.tnb-step-active .tnb-step-circle {
    color: #fff;
    background: #634adc;
}

.tnb-stepper .tnb-step.tnb-step-active .tnb-step-title {
    color: #634adc;
}

.tnb-stepper.journey .tnb-step {
    cursor: default;
}

    .tnb-stepper.journey .tnb-step .tnb-step-circle {
        color: #ccc;
        border: 3px solid #ccc;
        cursor: default;
    }

    .tnb-stepper.journey .tnb-step.tnb-step-complete .tnb-step-circle .tnb-step-tick {
        display: inline-block;
        background-image: url()
    }

    .tnb-stepper.journey .tnb-step .tnb-step-bar-left,
    .tnb-stepper.journey .tnb-step .tnb-step-bar-right {
        border-top: 4px solid #ccc;
    }

    .tnb-stepper.journey .tnb-step.tnb-step-active .tnb-step-circle {
        color: #634adc;
        border: 3px solid #634adc;
        background-color: #fff;
    }

    .tnb-stepper.journey .tnb-step.tnb-step-active .tnb-step-bar-left {
        border-color: #634adc;
    }

    .tnb-stepper.journey .tnb-step.tnb-step-complete:not(.disabled) .tnb-step-circle {
        color: #fff;
        background: #634adc;
        border: 3px solid #634adc;
    }

        .tnb-stepper.journey .tnb-step.tnb-step-complete:not(.disabled) .tnb-step-circle:after {
            content: '';
            display: inline-block;
            width: 50%;
            height: 35%;
            background-image: url('/assets/img/tick.svg');
            background-size: contain;
            background-repeat: no-repeat;
        }

        .tnb-stepper.journey .tnb-step.tnb-step-complete:not(.disabled) .tnb-step-circle span {
            display: none;
        }

    .tnb-stepper.journey .tnb-step.tnb-step-complete:not(.disabled) .tnb-step-title {
        color: #634adc;
    }

    .tnb-stepper.journey .tnb-step.tnb-step-complete:not(.disabled):not(.before-disabled) .tnb-step-bar-right {
        border-color: #634adc;
    }

    .tnb-stepper.journey .tnb-step.tnb-step-complete:not(.disabled) .tnb-step-bar-left {
        border-color: #634adc;
    }

    .tnb-stepper.journey .tnb-step.disabled + .tnb-step:not(.disabled) .tnb-step-bar-left {
        border-color: #bbb;
    }

.tnb-step-before-inactive.tnb-step-complete ~ .tnb-step-inactive .tnb-step-bar-left, .tnb-step-before-inactive.tnb-step-complete ~ .tnb-step-inactive .tnb-step-bar-right {
    border-color: #634adc;
}
/* == end new stepper == */

/* Stepper for Status Progress (Status Timeline) */
/* New Stepper */
.tnb-timeline-stepper {
    display: table;
    width: 100%;
    margin: 0 auto;
}

    .tnb-timeline-stepper .tnb-timeline-step {
        width: 16.666%;
        display: table-cell;
        position: relative;
        /*cursor: pointer;*/
    }

        .tnb-timeline-stepper .tnb-timeline-step.disabled, .tnb-timeline-stepper .tnb-timeline-step.disabled .tnb-timeline-step-circle {
            cursor: default;
        }

            .tnb-timeline-stepper .tnb-timeline-step.disabled .tnb-timeline-step-circle,
            .tnb-timeline-stepper .tnb-timeline-step.disabled .tnb-timeline-step-title {
                opacity: 0.3;
            }

        /*.tnb-timeline-stepper.journey .tnb-timeline-step.disabled + .tnb-timeline-step > .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.journey .tnb-timeline-step.disabled .tnb-timeline-step-bar-right,
    .tnb-timeline-stepper.journey .tnb-timeline-step.disabled .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.journey .tnb-timeline-step.before-disabled .tnb-timeline-step-bar-right {
        border-color: #bbb;
        opacity: 0.3;
    }*/

        .tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-circle {
            width: 34px;
            height: 34px;
            margin: 0 auto;
            border-radius: 100%;
            text-align: center;
            line-height: 2em;
            font-size: 18px;
            line-height: 26px;
            display: inline-block;
            border-radius: 25px;
            z-index: 2;
            /*cursor: pointer;*/
            color: #634adc;
            border: 3px solid #634adc;
            background-color: #fff;
        }

            .tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-circle .tnb-timeline-step-tick {
                display: none;
                height: 22px;
                width: 22px;
            }

        .tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-title {
            font-size: 16px; /* Font Reduced */
            font-weight: normal;
            text-align: center;
            display: none;
            color: #ccc;
            margin: 10px auto auto auto;
            width: 90%;
        }

            .tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-title .tnb-timeline-step-statusdate {
                font-size: 14px;
                color: #999;
                font-family: MuseoSans;
            }

@media screen and (min-width: 768px) {
    .tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-title {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-title {
        font-size: 14px; 
    }
}

.tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-bar-left,
.tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-bar-right {
    position: absolute;
    top: 15px;
    height: 1px;
    border-top: 4px solid #634adc;
}

.tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-bar-left {
    left: 0;
    right: 50%;
    margin-right: 20px;
    border-top-right-radius: 7rem;
    border-bottom-right-radius: 7rem;
}

.tnb-timeline-stepper .tnb-timeline-step .tnb-timeline-step-bar-right {
    right: 0;
    left: 50%;
    margin-left: 20px;
    border-top-left-radius: 7rem;
    border-bottom-left-radius: 7rem;
}

.tnb-timeline-stepper .tnb-timeline-step:first-child .tnb-timeline-step-bar-left {
    display: none;
}

.tnb-timeline-stepper .tnb-timeline-step:last-child .tnb-timeline-step-bar-right {
    display: none;
}

.tnb-timeline-stepper .tnb-timeline-step.tnb-timeline-step-active .tnb-timeline-step-circle {
    color: #fff;
    background: #634adc;
}

.tnb-timeline-stepper .tnb-timeline-step.tnb-timeline-step-active .tnb-timeline-step-title {
    color: #634adc;
}

/*.tnb-timeline-stepper.journey .tnb-timeline-step {
    cursor: default;
}

    .tnb-timeline-stepper.journey .tnb-timeline-step .tnb-timeline-step-circle {
        color: #ccc;
        border: 3px solid #ccc;
        cursor: default;
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-complete .tnb-timeline-step-circle .tnb-timeline-step-tick {
        display: inline-block;
        background-image: url()
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.journey .tnb-timeline-step .tnb-timeline-step-bar-right {
        border-top: 4px solid #ccc;
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-active .tnb-timeline-step-circle {
        color: #634adc;
        border: 3px solid #634adc;
        background-color: #fff;
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-active .tnb-timeline-step-bar-left {
        border-color: #634adc;
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-complete:not(.disabled) .tnb-timeline-step-circle {
        color: #fff;
        background: #634adc;
        border: 3px solid #634adc;
    }

        .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-complete:not(.disabled) .tnb-timeline-step-circle:after {
            content: '';
            display: inline-block;
            width: 50%;
            height: 35%;
            background-image: url('/assets/img/tick.svg');
            background-size: contain;
            background-repeat: no-repeat;
        }

        .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-complete:not(.disabled) .tnb-timeline-step-circle span {
            display: none;
        }

    .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-complete:not(.disabled) .tnb-timeline-step-title {
        color: #634adc;
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-complete:not(.disabled):not(.before-disabled) .tnb-timeline-step-bar-right {
        border-color: #634adc;
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step.tnb-timeline-step-complete:not(.disabled) .tnb-timeline-step-bar-left {
        border-color: #634adc;
    }

    .tnb-timeline-stepper.journey .tnb-timeline-step.disabled + .tnb-timeline-step:not(.disabled) .tnb-timeline-step-bar-left {
        border-color: #bbb;
    }*/

.tnb-timeline-step-before-inactive.tnb-timeline-step-complete ~ .tnb-timeline-step-inactive .tnb-timeline-step-bar-left, .tnb-timeline-step-before-inactive.tnb-timeline-step-complete ~ .tnb-timeline-step-inactive .tnb-timeline-step-bar-right {
    border-color: #634adc;
}
/* == end new stepper == */

/* Stepper for Status Progress (Status Timeline) */
.mdl-stepper-horizontal-alternative-view.status-timeline {
    text-align: center !important;
    padding: 0 30px 0 30px;
}

.tnb-timeline-stepper.status-timeline .stepper-row {
    display: table-row;
}

.tnb-timeline-stepper.status-timeline .tnb-timeline-step {
    padding-bottom: 30px;
}

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-title {
        display: block;
    }

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-title {
        color: #a6a6a6;
        line-height: 1.5;
        font-weight: 500;
        font-family: MuseoSans-500;
        color: #49494a;
        line-height: 1.5;
    }
.btn-outline-blue {
    font-size: 14px;
    font-weight: 500;
    background: #1C79CA 0% 0% no-repeat padding-box;
    border: 1px solid #1C79CA;
    border-radius: 24px;
    opacity: 1;
    color: white;
    height: 48px;
    line-height: 0;
    cursor: pointer;
}

@media screen and (max-width: 425px) {
    .btn-outline-blue {
        width: 120px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media screen and (min-width: 425px) and (max-width: 767px) {
    .btn-outline-blue {
        width: 120px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.btn-blue {
    font-size: 14px;
    font-weight: 500;
    background: #fff 0% 0% no-repeat padding-box;
    border: 1px solid #1C79CA;
    border-radius: 24px;
    opacity: 1;
    color: #1C79CA;
    width: 140px;
    height: 48px;
    line-height: 0;
    cursor: pointer;
}
    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.step-past .tnb-timeline-step-title {
        color: #49494a;
        line-height: 1.5;
    }

        .tnb-timeline-stepper.status-timeline .tnb-timeline-step.step-past .tnb-timeline-step-title.active-completed {
            color: #a6a6a6;
            line-height: 1.5;
            font-weight: 500;
            font-family: MuseoSans-500;
            color: #49494a;
            line-height: 1.5;
        }

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-circle {
        width: 24px;
        height: 24px;
        margin: 4px 0 4px 0;
        color: #e4e4e4;
        border: 3px solid #e4e4e4;
    }

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-circle {
        content: '';
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0;
        background-image: url('/assets/img/pending-grey.svg');
        background-size: contain;
        background-repeat: no-repeat;
        color: #20bd4c !important;
        border: 0px solid #20bd4c !important;
    }

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.step-past .tnb-timeline-step-circle {
        content: '';
        display: inline-block;
        background-image: url('/assets/img/completed.svg');
        background-size: contain;
        background-repeat: no-repeat;
        color: #20bd4c !important;
        border: 0px solid #20bd4c !important;
    }

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.warning .tnb-timeline-step-circle {
        content: '';
        display: inline-block;
        background-image: url('/assets/img/action-required.svg') !important;
        background-size: contain;
        background-repeat: no-repeat;
        color: unset !important;
        border: unset !important;
    }

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-bar-right {
        border-color: #e4e4e4 !important;
    }

    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.step-past .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.step-past .tnb-timeline-step-bar-right,
    .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-bar-left {
        border-color: #20bd4c !important;
    }

        .tnb-timeline-stepper.status-timeline .tnb-timeline-step.step-past .tnb-timeline-step-bar-right.active-completed {
            border-color: #e4e4e4 !important;
        }

@media screen and (min-width: 601px) {
    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:nth-child(1) {
        left: 83.333%;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:nth-child(2) {
        left: 49.9998%;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:nth-child(3) {
        left: 16.6666%;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:nth-child(4) {
        left: -16.6666%;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:nth-child(5) {
        left: -49.9998%;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:nth-child(6) {
        left: -83.333%;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(2n) .tnb-timeline-step:first-child .tnb-timeline-step-bar-right,
    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(2n) .tnb-timeline-step.step-end .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(3n):last-child .tnb-timeline-step.step-end .tnb-timeline-step-bar-right {
        display: none !important;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(odd) .tnb-timeline-step.active .tnb-timeline-step-bar-right,
    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step.active .tnb-timeline-step-bar-left {
        border-color: #e4e4e4 !important;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(odd) .tnb-timeline-step.active .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step.active .tnb-timeline-step-bar-right {
        border-color: #20bd4c !important;
    }

    /* tnb-timeline-stepper status-progress curve*/
    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:first-child .tnb-timeline-step-bar-left,
    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even) .tnb-timeline-step:last-child .tnb-timeline-step-bar-right {
        display: inherit;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(2n-1):not(:last-child) .tnb-timeline-step:last-child .tnb-timeline-step-bar-right {
        display: inherit !important;
        height: calc(100% + 4px);
        border: 4px solid;
        border-left: 0 !important;
        border-radius: 0 7rem 7rem 0 !important;
    }

    .tnb-timeline-stepper.status-timeline .stepper-row:nth-child(even):not(:last-child) .tnb-timeline-step:last-child .tnb-timeline-step-bar-left {
        display: inherit !important;
        height: calc(100% + 4px);
        border: 4px solid;
        border-right: 0 !important;
        border-radius: 7rem 0 0 7rem !important;
    }
}

@media screen and (max-width: 600px) {
    .mdl-stepper-horizontal-alternative-view.status-timeline {
        text-align: inherit !important;
    }

    .mobile-remove-padding {
        padding: 0 !important;
    }

    .tnb-timeline-stepper.status-timeline,
    .tnb-timeline-stepper.status-timeline .stepper-row,
    .tnb-timeline-stepper.status-timeline .tnb-timeline-step {
        display: block;
    }

        .tnb-timeline-stepper.status-timeline .tnb-timeline-step {
            width: 100%;
            height: calc(100% + 40px);
            padding: 20px 0 20px 0;
        }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-title {
                top: 50%;
                margin: 0 auto;
                padding: 0 10px 0 40px;
                text-align: left;
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-title {
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-circle {
                position: absolute;
                top: calc(50% - 5px);
                margin: 0 5px 0 11px;
                width: 12px;
                height: 12px;
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-circle {
                position: absolute;
                top: calc(50% - 5px);
                margin: 0 5px 0 11px;
                width: 12px;
                height: 12px;
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-bar-left,
            .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-bar-right {
                left: 15px;
                width: 1px;
                height: calc(50% - 6px);
                border-left: 4px solid #634adc;
                margin-left: 0;
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-bar-left {
                top: 0;
                bottom: calc(40% + 14px);
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                border-bottom-left-radius: 7rem;
                border-bottom-right-radius: 7rem;
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step .tnb-timeline-step-bar-right {
                bottom: 0;
                top: calc(40% + 14px);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                border-top-left-radius: 7rem;
                border-top-right-radius: 7rem;
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-bar-left,
            .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-bar-right {
                height: calc(72% - 20px);
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-bar-left {
                bottom: calc(50% + 20px);
            }

            .tnb-timeline-stepper.status-timeline .tnb-timeline-step.active .tnb-timeline-step-bar-right {
                top: calc(32% + 20px);
            }

        .tnb-timeline-stepper.status-timeline .stepper-row:not(:first-child) .tnb-timeline-step:first-child .tnb-timeline-step-bar-left,
        .tnb-timeline-stepper.status-timeline .stepper-row:not(:last-child) .tnb-timeline-step:last-child .tnb-timeline-step-bar-right {
            display: inherit;
        }
}

.text-orange-MuseoSans500 {
    color: #ff9e43 !important;
    font-family: MuseoSans-500 !important;
}

/* == end stepper status progress*/

/* mytnb-dropdown */
.mytnb-nav-dropdown.nav-pills.dropdown-menu {
    position: absolute;
    transform: translate(-50%, 0) !important;
    top: 100% !important;
    left: 50% !important;
    will-change: transform !important;
    min-width: 16rem !important;
    padding: 0.25rem 0.35rem !important;
}
/* END mytnb Dropdown */

/* Mytnb Info Icon Field:after */
.mytnb-icon-select-field {
    border-bottom: 1px solid #fff;
    margin-top: 4px;
    padding-left: 10px;
}

.mytnb-icon-field-light-bg {
    border-bottom: 1px solid lightgrey;
    padding-bottom: 8px;
    padding-right: 5px;
}

input:focus ~ .mytnb-icon-field-light-bg {
    border-bottom: 1px solid rgb(69, 114, 237);
}

.mytnb-icon-select-field-dark-bg {
    border-bottom: 1px solid #fff;
    padding-bottom: 0;
    padding-right: 7px;
    padding-left: 5px;
    margin-top: 8px;
}

.mytnb-icon-field-dark-bg {
    border-bottom: 1px solid #fff;
    padding-bottom: 8px;
    padding-right: 7px;
}

input:disabled ~ .mytnb-icon-field-dark-bg {
    border-bottom: 0 none;
}

@media screen and (max-width: 425px) {
    .mytnb-icon-field-dark-bg {
        border-bottom: 1px solid lightgrey;
    }
}

input:focus ~ .mytnb-icon-field-dark-bg {
    border-bottom: 1px solid #fecc39;
}
/* End Mytnb Info Icon Field:after*/

/* Replace TNB CSS For Form */

@media screen and (max-width: 425px) {
    .option-control {
        font-size: 14px;
    }

    .card-option-group .card-label-bottom-error {
        font-size: 10px !important;
    }

    .card-title-label {
        font-size: 10px;
    }

    .card-text {
        font-size: 14px;
    }

    .contractor-requested-view {
        text-align: left;
    }
}

/* End Replace TNB CSS For Form */

/* Replace Default */
.ScrollStyle::-webkit-scrollbar {
    width: 5px;
}
/* End Default TNB */

/* mytnb Table */
.mytnb-survey-table td input[type=checkbox] {
    margin-top: 0.85rem;
}

.mytnb-survey-table thead {
    background-color: #49494A;
    color: #fff;
}

    .mytnb-survey-table thead th:first-child {
        border-radius: 10px 0 0 0;
    }

    .mytnb-survey-table thead th:last-child {
        border-radius: 0 10px 0 0;
    }

.mytnb-survey-table th {
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.mytnb-survey-table tr {
    border-bottom: 1px solid #ddd;
}

.mytnb-survey-table .text-left {
    padding-left: 0;
}
/* END mytnb Table */

/* Search Input */
.search-container input {
    height: 40px;
    margin-top: -7px;
}

.ios-links a {
    color: #000000;
    text-decoration: none;
}

.ios-links-light a {
    color: #fff;
    text-decoration: none;
}

.anchor-fake {
    text-decoration: none !important;
}

.mytnb-collapse.collapsed .fa-angle-up {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.mytnb-collapse.collapsed .fa-chevron-up {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Input replace for DatePicker3*/
.datepicker-dropdown.datepicker-orient-bottom::before {
    top: 0px;
    display: none;
}

.datepicker-dropdown.datepicker-orient-bottom::after {
    top: 0px;
    display: none;
}

.no-record-img {
    width: 100%;
    max-width: 220px;
    margin-top: 1.2rem;
}
/* Tooltip Graph Mobile */
@media only screen and (orientation: portrait) and (max-width: 600px) {
    #chartjs-tooltip-energy-usage-tenant {
        left: 50% !important;
        top: 195px !important;
        min-width: 60%;
        transform: translate(-50%, -50%);
        text-align: center !important;
        -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
        box-shadow: 0px 4px 1px 1px rgba(0,0,0,0.2);
    }

        #chartjs-tooltip-energy-usage-tenant table {
            width: 100%;
        }

        #chartjs-tooltip-energy-usage-tenant:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-width: 0;
            border-style: solid;
            border-color: transparent #FFFFFF transparent transparent;
            top: -2px;
            left: 50%;
            transform: translate(-50%, -50%);
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 17px solid #fff;
        }
}

/* Checkbox Green Mobile */
@media screen and (max-width: 425px) {
    .checkbox-green {
        font-size: 12px;
    }
}

.popup-bill-total-label {
    position: absolute;
    bottom: 4px;
}

.popup-bill-total-amount {
    font-size: 1.4rem;
}

.popup-bill-currency {
}

.modal-footer-mytnb {
    padding: 1.5rem;
}

/*Fix IE Modal Dialog Centered*/
/*.modal-dialog-centered {
    height: calc(100% - (.5rem * 2));
}

@media (min-width:576px) {
    .modal-dialog-centered {
        height: calc(100% - (1.75rem * 2))
    }
}*/

/* Mobile Text Size */
@media screen and (max-width: 425px) {
    .mobile-text-12 {
        font-size: 12px;
    }

    .mobile-text-20 {
        font-size: 20px;
    }

    .mobile-modal-body {
        padding: 1.5rem !important;
    }
}

/* Table Button */
.btn-white-space {
    white-space: normal !important;
}

#NotificationModal .form-control.card-form-control.ie-form-control-disabled {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


.form-control.ie-form-control-disabled {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.flex-radio-button {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50%;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.radio-btn-green-container {
    list-style-type: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

    .radio-btn-green-container input {
        display: block;
        width: 100%;
    }

    .radio-btn-green-container label {
        padding: 0.5rem 0;
        margin: 0 5px;
        text-align: center;
        border-radius: 4px;
        border: solid 1px #20BD4C;
        color: #20BD4C;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        font-size: 12px;
    }

@media screen and (max-width:676px) {
    .radio-btn-green-container label {
        display: block;
        margin-bottom: 8px;
    }
}

.radio-btn-green-container input[type="radio"] {
    display: none;
}

    .radio-btn-green-container input[type="radio"]:checked + label {
        color: #fff;
        border: solid 1px #20BD4C !important;
        background-color: #20BD4C !important;
    }

@media screen and (min-width:576px) {
    .radio-btn-green-container-3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

.radio-btn-green-container-3 input {
}

    .radio-btn-green-container-3 input[type="radio"] {
        display: none;
    }

.radio-btn-green-container-3 label {
    padding: 0.5rem 0;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #20BD4C;
    color: #20BD4C;
    text-align: center;
    font-size: 12px;
}

@media screen and (min-width:576px) {
    .radio-btn-green-container-3 label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 33%;
        margin: 0 5px;
    }
}

.radio-btn-green-container-3 input[type="radio"]:checked + label {
    color: #fff;
    border: solid 1px #20BD4C !important;
    background-color: #20BD4C !important;
}

.power-outage-col {
    background-image: url(https://www.mytnb.com.my/themes/user/mytnb/img/home/ContactUsBG.png); /*Bug 3721 : Footer - The Contact Us background image should retrieved from EE side*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
    border-radius: 10px;
    /*Bug 3721 : Footer - The Contact Us background image should retrieved from EE side
        background-position: -320px 0px; is added to hide the huge empty space on the left side of the EE image.
        Good way to handle this would be to remove the left empty space from the image. But until it happens, this is the work around.
    */
    /*background-position: -320px 0px;*/
}

.contact-us-box-desktop {
    background-image: url(https://www.mytnb.com.my/themes/user/mytnb/img/home/ContactUsBG.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    border-radius: 10px;
    right: 1rem;
    padding: 4rem 1rem 4rem 5rem;
}

.contact-us-box-tablet {
    background-image: url(https://www.mytnb.com.my/themes/user/mytnb/img/home/ContactUsBG.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 50%;
    border-radius: 10px;
    right: 1rem;
    padding: 4rem 1rem 4rem 5rem;
}

.contact-us-box-mobile {
    background-image: url(https://www.mytnb.com.my/themes/user/mytnb/img/home/ContactUsBG.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 50%;
    border-radius: 10px;
    right: 1rem;
    padding: 3rem 1rem 4rem;
}

@media (max-width:767px) {
    .power-outage-col {
        background-position: 120% 0;
        height: 0;
        padding-top: 49.5%;
        border-radius: 0;
    }
}

.mytnb-box {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 5px;
}

.mytnb-box-img {
    width: 22px;
    height: 22px;
    margin: 0 10px;
}

.mytnb-box-title {
    color: #1c79ca;
    font-size: 1.2em;
}

.mytnb-box-desc {
    margin-bottom: 0;
    font-size: 0.6em;
}

.mytnb-merdeka-image {
    width: 88px;
    height: 88px;
}

#IndividualForm, #DeveloperForm {
    width: 100%;
}

#NotificationModal .modal-dialog {
    max-width: 90%;
}

.border-right-md {
    border-right: 1px solid rgba(0,0,0,.1);
}

@media screen and (max-width:767px) {
    .border-right-md {
        border-right: none;
    }
}

ol.list-roman {
    list-style-position: inside;
    list-style-type: lower-roman;
}

.panel-40 > a.panel-heading {
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
}

a.panel-heading {
    display: flex;
    height: 65px;
    justify-content: space-between;
    align-items: center;
}

    a.panel-heading.collapsed, .tnb-panel-body {
        border-bottom: 1px solid #ddd;
    }

/* Fix Bootstrap .modal-dialog-centered bug on IE */
.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (0.5rem * 2));
}

    .modal-dialog-centered::before {
        display: block;
        height: calc(100vh - (0.5rem * 2));
        content: "";
    }

@media (min-width: 576px) {
    .modal-dialog-centered {
        min-height: calc(100% - (1.75rem * 2));
    }

        .modal-dialog-centered::before {
            height: calc(100vh - (1.75rem * 2));
        }
}

/* END Fix Bootstrap .modal-dialog-centered bug on IE */

/* Mobile Nav Menu Scroll */
.nav-mobile .nav-gutter .container {
    max-height: 400px;
    overflow-y: auto;
}

/* Table for Bulks User Compact */
.mytnb-table-compact th {
    font-size: 10px;
    padding: 10px;
}

    .mytnb-table-compact th:first-child {
        padding: 10px 1px;
    }

.mytnb-table-compact td {
    font-size: 10px;
}

/* Fixed Dashboard Shrink on Navbar Part */

@media (min-width: 1100px) and (max-width: 1600px) {
    .navbar {
        font-size: 0.9rem;
    }
}

/*Fixed Modal Pay Bill Dashboard*/
.dashboard-modal-pay-bill .table-header-text {
    font-size: 12px;
}

.dashboard-modal-pay-bill .card-form-table tr {
    font-size: 12px;
}

.dashboard-modal-pay-bill .modal-footer-mytnb {
    padding-top: 0;
    margin-top: -1.6rem;
}

.dashboard-modal-pay-bill .label {
    margin-bottom: 0;
}

.dashboard-modal-pay-bill .form-control {
    font-size: 0.8rem;
}

.dashboard-modal-pay-bill .mt-4 {
    margin-top: 0 !important;
}

/*.dashboard-modal-pay-bill .ScrollStyle {
    max-height: 400px;
}*/

/*Fixed Modal Pay Bill Dashboard*/
.manage-account-table .table-header-text {
    font-size: 12px;
}

.manage-account-table .card-form-table tr {
    font-size: 12px;
}

.manage-account-table .modal-footer-mytnb {
    padding-top: 0;
    margin-top: -1.6rem;
}

.manage-account-table .label {
    margin-bottom: 0;
}

.manage-account-table .form-control {
    font-size: 0.8rem;
}

.manage-account-table .mt-4 {
    margin-top: 0 !important;
}

.manage-account-table .btn {
    font-size: 12px;
}

.manage-account-table .sspHeaderClass {
    color: #ffffff;
}

#gridPayableAccount input[type=checkbox] {
    margin-left: 0.8rem;
    margin-top: 0.1rem;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #a6a6a6;
    box-shadow: 0 none;
    padding: 6px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

    #gridPayableAccount input[type=checkbox]:checked {
        background-color: #20bd4c;
        border: 1px solid #20bd4c;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #fff;
    }

        #gridPayableAccount input[type=checkbox]:checked:after {
            font-family: "FontAwesome";
            content: '\f00c';
            font-size: 9px;
            position: absolute;
            top: -1px;
            left: 2px;
            color: #fff;
        }

/*.manage-account-table input[type=checkbox] {
    margin-left: 0.8rem;
    margin-top: 0.1rem;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #a6a6a6;
    box-shadow: 0 none;
    padding: 6px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}*/

/*.manage-account-table input[type=checkbox]:checked {
        background-color: #20bd4c;
        border: 1px solid #20bd4c;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #fff;
    }*/

/*.manage-account-table input[type=checkbox]:checked:after {
            font-family: "FontAwesome";
            content: '\f00c';
            font-size: 9px;
            position: absolute;
            top: -1px;
            left: 2px;
            color: #fff;
        }*/

/* Truncate & Break */
.truncate-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.truncate-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.truncate-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.truncate-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.word-break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Cursor Pointer */
.cursor-pointer {
    cursor: pointer;
}

/* Dashboard Admin */
@media (min-width: 1200px) and (max-width: 1406px) {
    .last-login {
        font-size: 14px;
    }

    .desktop-right-alignment {
        text-align: right !important;
    }

    .greeting {
        font-size: 20px;
    }

}

.dashboard-year {
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.font-size-16-12 {
    font-size: 16px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .font-size-16-12 {
        font-size: 12px;
    }

    .dashboard-year {
        top: 16px;
    }

    .dashboard-usage {
        display: none;
    }
}

/* Mobile - Popup Dual Column */
@media screen and (max-width: 425px) {
    .mobile-dual h4 {
        font-size: 14px;
        font-weight: bold;
    }

    .mobile-dual p {
        font-size: 13px;
    }
}

.disabled-no-click {
    pointer-events: none;
    opacity: 0.65;
}

.announcebg {
    width: 100%;
    max-width: 1700px;
    bottom: 0;
    right: 0;
    position: fixed;
}

.mytnb-info-wrapper .btn {
    padding: 0;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .tablet-m-h-430 {
        min-height: 430px;
    }

    .tablet-m-h-260 {
        min-height: 260px;
    }
}

/* New CSS */

.affix-blank {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
    -webkit-transition: padding 0.2s linear;
    -moz-transition: padding 0.2s linear;
    -o-transition: padding 0.2s linear;
    transition: padding 0.2s linear;
    background-color: #6549DD;
}

.border-dashed {
    border: 1px dashed #a6a6a6 !important;
}

.card-gutter-divider {
    border-right: 1px solid rgba(73, 73, 74, 0.16);
}

@font-face {
    font-family: MuseoSans-300;
    src: url(../fonts/MuseoSans-300.otf);
}

.card-text-20-12-500 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-text-12-9 {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.29;
    color: #49494a;
    font-family: MuseoSans-300;
}

.card-text-12-9-500 {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.29;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-text-14-12-500 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.29;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-text-12-9-muted {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.29;
    color: #a6a6a6;
}

.card-text-14-7 {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #49494a;
}

.card-text-12-uppercase {
    font-family: MuseoSans;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #a6a6a6;
    text-transform: uppercase !important;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .card-text-20-12-500 {
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        color: #49494a;
        font-family: MuseoSans-500;
    }

    .card-text-12-9 {
        font-size: 9px;
        font-weight: 300;
        line-height: 1.29;
        color: #49494a;
        font-family: MuseoSans-300;
    }

    .card-text-12-9-500 {
        font-size: 9px;
        font-weight: 500;
        line-height: 1.29;
        color: #49494a;
        font-family: MuseoSans-500;
    }

    .card-text-12-9-muted {
        font-size: 9px;
        font-weight: 300;
        line-height: 1.29;
        color: #a6a6a6;
    }
}

.payment-method a {
    text-decoration: none;
}

    .payment-method a:hover {
        text-decoration: none;
    }

.payment-method .border.collapsed {
    border: 1px solid #a6a6a6 !important;
}

.payment-method .border {
    border: 2px solid #1c79ca !important;
}

    .payment-method .border.collapsed label {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4;
        color: #49494a;
        font-family: MuseoSans-500;
        cursor: pointer;
    }

    .payment-method .border label {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4;
        color: #1c79ca;
        font-family: MuseoSans-500;
        cursor: pointer;
    }



.select-card .border {
    border: 1px solid #a6a6a6 !important;
}

.select-card label.credit-card-label {
    font-size: 20px;
    font-weight: 300;
    line-height: 0;
    margin-top: 18px;
    color: #49494a;
    /*font-family: MuseoSans-300;*/
    cursor: pointer;
}

.select-card-button:hover, .select-payment-method-button:hover {
    cursor: pointer;
}

.select-card img {
    height: 16px;
    margin-top: 10px;
}

.select-card button.delete, .select-card button.add {
    background-color: transparent;
    padding: 0;
    border: 0 none;
    font-size: 24px;
}

.select-card button:hover {
    cursor: pointer;
    opacity: 0.7;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .payment-method .border.collapsed label {
        font-size: 12px;
    }

    .payment-method .border label {
        font-size: 12px;
    }
}

/* Mobile */
@media screen and (min-width: 320px) and (max-width: 767px) {
    .payment-method .border.collapsed label {
        font-size: 12px;
    }

    .payment-method .border label {
        font-size: 12px;
    }

    .card-gutter-divider {
        border-right: 0 none;
    }

    .select-card label.credit-card-label {
        font-size: 12px;
        font-weight: 300;
        line-height: 0;
        margin-top: 18px;
        color: #49494a;
        font-family: MuseoSans-300;
        cursor: pointer;
    }
}

.background-flex {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: auto;
    min-height: 100%;
    background: #6844DB;
    background: -moz-linear-gradient(top, #6844DB 0%, #3187ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6844DB), color-stop(100%,#3187ef));
    background: -webkit-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    /* Old Syntax */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6844DB), color-stop(100%, #3187ef));
    /* END Old Syntax */
    background: -o-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: -ms-linear-gradient(top, #6844DB 0%,#3187ef 100%);
    background: linear-gradient(to bottom, #6844DB 0%,#3187ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6844DB', endColorstr='#3187ef',GradientType=0 );
    background-attachment: fixed;
    z-index: -1;
}

/* Mobile */
@media screen and (min-width: 320px) and (max-width: 767px) {
    .background-flex {
        max-height: 371px;
        min-height: 371px;
        background-attachment: scroll;
    }

    .wrapper-title {
        padding: 1.1rem 0 0;
        margin-top: 0.5rem;
    }
}

.partial-input-12 {
    letter-spacing: 1.20rem;
    border: 0;
    /*border: 2px thin;*/
    /*background-image: url(/assets/img/12-number.svg);*/
    background-repeat: no-repeat;
    background-position: bottom;
    /*border-radius: 0;*/
    /*border-radius: 25px;*/
    padding-left: 0.2rem;
    padding-right: 0;
}


/* iPhone 5 */
@media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .partial-input-12 {
        letter-spacing: 0.68rem;
        padding-left: 0.4rem;
        padding-right: 0;
    }
}

/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .partial-input-12 {
        letter-spacing: 1.05rem;
        padding-left: 0.2rem;
        padding-right: 0;
    }
}

.card-text-16-12-500 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans-500;
}
.card-text-16-500 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #484848;
    font-family: MuseoSans-500;
}
.card-text-14-300 {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: #49494A;
    font-family: MuseoSans-500;
}

.card-text-14-300-thin {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: #49494A;
    font-family: MuseoSans;
}
.mb10{
    margin-bottom:10px;
}
.card-text-20-16-500 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-text-16-14-300 {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-32-24 {
    font-size: 32px;
    font-weight: 300;
    line-height: 36px;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-16-10 {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: #49494a;
    font-family: MuseoSans;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .card-text-16-12-500 {
        font-size: 12px;
    }

    .card-text-32-24 {
        font-size: 24px;
    }

    .card-text-16-10 {
        font-size: 10px;
        line-height: 14px;
    }

    /* Start Added Abdullah_20201114 */
    .card-text-12-10 {
        font-size: 10px;
    }

    .right {
        border-right: none !important;
    }

    .paddingDesktopLeft {
        padding-left: 15px !important;
    }

    .card-text-24-14-bold {
        font-size: 14px;
    }

    .card-text-16-14 {
        font-size: 14px;
    }

    .card-text-16-12 {
        font-size: 12px !important;
    }

    .option-control2 {
        font-size: 16px !important;
    }

    .mobile-icon-margin {
        margin-top: 30px;
    }

    /* End Added Abdullah_20201114 */
}

.label-14-9-gray {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    color: #a6a6a6;
    font-family: MuseoSans;
}

a.label-14-9-white {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    color: #fff !important;
    font-family: MuseoSans;
}

    a.label-14-9-white:hover {
        color: #fff !important;
        cursor: pointer;
        text-decoration: underline;
    }

@media screen and (min-width: 320px) and (max-width: 767px) {
    .label-14-9-gray {
        font-size: 9px;
        line-height: 1.56;
    }

    a.label-14-9-white {
        font-size: 9px;
        line-height: 1.56;
    }
}

.card-text-16-12-500 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #49494a;
    font-family: MuseoSans-500;
}

.card-text-32-24 {
    font-size: 32px;
    font-weight: 300;
    line-height: 36px;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-16-10 {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: #49494a;
    font-family: MuseoSans;
}


@media screen and (min-width: 320px) and (max-width: 767px) {
    .card-text-16-12-500 {
        font-size: 12px;
    }

    .card-text-32-24 {
        font-size: 24px;
    }

    .card-text-16-10 {
        font-size: 10px;
        line-height: 14px;
    }
}

.quick-pay-payment-col img {
    width: 120px;
}

.card-text-24-14-300 {
    font-size: 24px;
    font-weight: 300;
    line-height: 32px;
    color: #49494a;
    font-family: MuseoSans;
}

.card-text-24-14-500 {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #49494a;
    font-family: MuseoSans-500;
}

    .card-text-12-9-500.completed,
    .card-text-24-14-500.completed {
        color: #20bd4c !important;
    }

    .card-text-12-9-500.cancelled,
    .card-text-24-14-500.cancelled {
        color: #a6a6a6 !important;
    }

    .card-title-inverse-xl.warning,
    .card-text-12-9-500.warning,
    .card-text-24-14-500.warning {
        color: #ff9a43 !important;
    }


@media screen and (min-width: 320px) and (max-width: 767px) {
    .quick-pay-payment-col img {
        width: 48px;
    }

    .card-text-24-14-500 {
        font-size: 14px;
        line-height: 22px;
    }

    .card-text-24-14-300 {
        font-size: 14px;
        line-height: 22px;
    }
}

.btn-success {
    color: #fff;
    background-color: #20BD4C;
    border-color: #20BD4C;
}

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

.banner-flex-left {
    display: flex;
    align-items: flex-start;
}

    .banner-flex p.text-float-centre {
        margin-top: auto;
        margin-bottom: auto;
    }

.banner-flex-dismiss {
    align-self: center;
    text-align: right;
}

.manage-electricity .option-group {
    margin-bottom: 10px;
}

#paybillContent th:first-child {
    width: 6%;
}

.apply-title {
    pointer-events: none;
}

    .apply-title.collapsed, .apply-title.collapsed ~ .mobile-spacing.default-spacing {
        visibility: visible;
        opacity: 1;
        height: 100%;
        transition: 0.25s ease-out;
    }

    .apply-title, .apply-title ~ .mobile-spacing.default-spacing {
        visibility: hidden;
        opacity: 0;
        transition: 0.25s ease-in;
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

.card-text-24-14-500-white {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #fff;
    font-family: MuseoSans-500;
}

.label-16-12-white {
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #fff;
}

@media(min-width:1200px) and (max-width:1400px) {
    span.visible-lg-inline {
        width: 100%;
        float: left;
        min-height: 1px;
        position: relative;
    }
}

@media(min-width:1350px) and (max-width:1400px) {
    span.visible-lg-inline {
        max-height: 1px;
    }
}


.default-fadein {
    animation: fadein 0.5s ease-in both;
    -moz-animation: fadein 0.5s ease-in both; /* Firefox */
    -webkit-animation: fadein 0.5s ease-in both; /* Safari and Chrome */
    -o-animation: fadein 0.5s ease-in both; /* Opera */
}

.title-fadein {
    animation: fadein 0.5s ease-in both;
    -moz-animation: fadein 0.5s ease-in both; /* Firefox */
    -webkit-animation: fadein 0.5s ease-in both; /* Safari and Chrome */
    -o-animation: fadein 0.5s ease-in both; /* Opera */
}

.apply-landing-select-item {
    animation: fadein 0.5s ease-in both;
    -moz-animation: fadein 0.5s ease-in both; /* Firefox */
    -webkit-animation: fadein 0.5s ease-in both; /* Safari and Chrome */
    -o-animation: fadein 0.5s ease-in both; /* Opera */
}

    .apply-landing-select-item:nth-child(2) {
        animation-delay: 0.1s;
    }

    .apply-landing-select-item:nth-child(3) {
        animation-delay: 0.2s;
    }

    .apply-landing-select-item:nth-child(4) {
        animation-delay: 0.3s;
    }

    .apply-landing-select-item:nth-child(5) {
        animation-delay: 0.4s;
    }

@keyframes fadein {
    from {
        opacity: 0;
        transform: translate3d(0, 40%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeinTwo {
    from {
        opacity: 0;
        transform: translate3d(0, 40%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.apply-landing-select-item:hover {
    color: #1c79ca;
    background: #fff !important;
    border-radius: 8px;
    transition: 200ms;
    transition-timing-function: ease-in-out;
    -webkit-transition: 200ms;
    -webkit-transition-timing-function: ease-in-out;
    box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);
}

.apply-landing-icon-svg {
    height: 80px;
}

.apply-landing-select-item img.icon-invert-white {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .apply-landing-select-item img.icon-invert-white {
        filter: gray; /* W3C */
    }
}

/*.apply-landing-select-item:hover img.icon-invert-white {
    filter: none;
}*/

.apply-landing-select-item:hover .card-text-24-14-500-white {
    color: #1c79ca;
}

.apply-landing-select-item:hover .label-16-12-white {
    color: #49494a;
}

.page-landing {
    min-height: 600px;
    max-height: 600px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .card-text-24-14-500-white {
        font-size: 14px;
        line-height: 22px;
    }

    .label-16-12-white {
        font-size: 12px;
    }

    .apply-landing-icon-svg {
        height: 50px;
    }

    .apply-landing-select-item {
        /*color: #1c79ca;
        background: #fff !important;
        border-radius: 8px;*/
        /*transition: 200ms;
        transition-timing-function: ease-in-out;
        -webkit-transition: 200ms;
        -webkit-transition-timing-function: ease-in-out;
        box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);*/
    }

    /*.apply-landing-select-item img.icon-invert-white {
            filter: none;
        }*/

    /*.apply-landing-select-item:hover img.icon-invert-white {
            filter: none;
        }*/

    /*.apply-landing-select-item .card-text-24-14-500-white {
            color: #1c79ca;
        }*/

    /*.apply-landing-select-item .label-16-12-white {
            color: #49494a;
        }*/

    .container-fluid.apply-title.collapsed, .container-fluid.apply-title.collapsed ~ .mobile-spacing.default-spacing {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }

    .container-fluid.apply-title, .container-fluid.apply-title ~ .mobile-spacing.default-spacing {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .page-landing {
        min-height: 100%;
        max-height: 100%;
    }
}

/*Action Lab Changes*/
.list-group-item.accountItemList {
    padding: 0.75rem 0rem !important;
}

list-group-item-title .list-border-bottom {
    border-bottom: 1px solid #e4e4e4;
}

#accountListMobile.manageAccountList {
    -ms-overflow-style: none; /*IE 10+*/
    padding: 0 16px !important;
    margin-bottom: 0;
}

    #accountListMobile.manageAccountList::-webkit-scrollbar {
        display: none; /*Safari and Chrome*/
    }

    #accountListMobile.manageAccountList > li.list-group-item.active {
        background-color: unset;
        border-color: rgba(0,0,0,.125);
    }

    #accountListMobile.manageAccountList > li.list-group-item:last-child {
        border-bottom: 0;
    }

.dropdown-round-radius {
    border-radius: 6px !important;
}

.account-dropdown-list {
    position: relative;
    max-height: 227px;
    height: 400px;
}

.account-dropdown-list-2 {
    position: relative;
    max-height: 227px;
}

    .account-dropdown-list-2 .list-group-item-title:hover {
        color: #1c79ca !important;
    }


a:enabled.list-group-item:hover {
    color: inherit;
    text-decoration: none;
}

a.list-group-item {
    color: #49494a;
}

    a.list-group-item.list-static-border-top {
        border-top: 1px solid rgba(0,0,0,.125);
    }

.lq-icon {
    padding: 45px !important;
}

.apply-landing-select-item .tariff-change-on-white {
    background: url('../../../assets/img/change-tariff-outlined-on-white.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .tariff-change-on-white {
    background: url('../../../assets/img/change-tariff.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .tariff-change-on-white.mobile-view, .apply-landing-select-item:hover .tariff-change-on-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .change-load-on-white {
    background: url('../../../assets/img/change-load-on-white.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .change-load-on-white {
    background: url('../../../assets/img/change-load.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .change-load-on-white.mobile-view, .apply-landing-select-item:hover .change-load-on-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .callout-rebates-on-white {
    background: url('../../../assets/img/callout-discounts-rebates-outlined-on-white.svg') no-repeat left transparent !important;
}

.apply-landing-select-item .callout-lss-on-white {
    background: url('../../../assets/img/icon-lss.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .callout-rebates-on-white {
    background: url('../../../assets/img/callout-discounts-rebates-2.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .callout-lss-on-white {
    background: url('../../../assets/img/icon-lss-hover.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .callout-rebates-on-white.mobile-view, .apply-landing-select-item:hover .callout-rebates-on-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .callout-lss-on-white.mobile-view, .apply-landing-select-item:hover .callout-lss-on-white.mobile-view {
    background-size: 50px 50px !important;
    background-position: left center !important;
}

.apply-landing-select-item .smr-on-white {
    background: url('../../../assets/img/smr-outlined-on-white.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .smr-on-white {
    background: url('../../../assets/img/smr.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .smr-on-white.mobile-view, .apply-landing-select-item:hover .smr-on-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .merdeka-on-white {
    background: url('../../../assets/img/merdeka-on-blue.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .merdeka-on-white {
    background: url('../../../assets/img/merdeka.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .merdeka-on-white.mobile-view, .apply-landing-select-item:hover .merdeka-on-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .moving-in {
    background: url('../../../assets/img/supply-application-on-blue.svg?v=2') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .moving-in {
    background: url('../../../assets/img/supply-application-on-white.svg?v=2') no-repeat left transparent !important;
}

    .apply-landing-select-item .moving-in.mobile-view, .apply-landing-select-item:hover .moving-in.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .prepay-switch {
    background: url('../../../assets/img/prepay-logo-on-blue.svg?v=2') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .prepay-switch {
    background: url('../../../assets/img/prepay-logo-on-white.svg?v=2') no-repeat left transparent !important;
}
    .apply-landing-select-item .prepay-switch.mobile-view, .apply-landing-select-item:hover .prepay-switch.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }
.apply-landing-select-item .moving-out {
    background: url('../../../assets/img/coa-on-blue.svg?v=2') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .moving-out {
    background: url('../../../assets/img/coa-on-white.svg?v=2') no-repeat left transparent !important;
}

    .apply-landing-select-item .moving-out.mobile-view, .apply-landing-select-item:hover .moving-out.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .other-services {
    background: url('../../../assets/img/other-services-on-white.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .other-services {
    background: url('../../../assets/img/other-services.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .other-services.mobile-view, .apply-landing-select-item:hover .other-services.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .application-status {
    background: url('../../../assets/img/application-status.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .application-status {
    background: url('../../../assets/img/application-status-on-white.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .application-status.mobile-view, .apply-landing-select-item:hover .application-status.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .application-tou {
    background: url('../../../assets/img/application-tou.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .application-tou {
    background: url('../../../assets/img/application-tou-on-white.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .application-tou.mobile-view, .apply-landing-select-item:hover .application-tou.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .RE-on-blue {
    background: url('../../../assets/img/renewable-energy-on-blue.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .RE-on-blue {
    background: url('../../../assets/img/renewable-energy-on-white.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .RE-on-blue.mobile-view, .apply-landing-select-item:hover .RE-on-blue.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .myself-icon-white {
    background: url('../../../assets/img/myself-outlined-on-blue.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .myself-icon-white {
    background: url('../../../assets/img/myself-outlined-on-white.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .myself-icon-white.mobile-view, .apply-landing-select-item:hover .myself-icon-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .behalf-icon-white {
    background: url('../../../assets/img/on-behalf-outlined-on-blue.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .behalf-icon-white {
    background: url('../../../assets/img/on-behalf-outlined-on-white.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .behalf-icon-white.mobile-view, .apply-landing-select-item:hover .behalf-icon-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .GT-manage-white {
    background: url('../../../assets/img/manage-on-blue.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .GT-manage-white {
    background: url('../../../assets/img/manage-on-white.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .GT-manage-white.mobile-view, .apply-landing-select-item:hover .GT-manage-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.apply-landing-select-item .GT-unsubscribe-white {
    background: url('../../../assets/img/unsubscribe-on-blue.svg') no-repeat left transparent !important;
}

.apply-landing-select-item:hover .GT-unsubscribe-white {
    background: url('../../../assets/img/unsubscribe-on-white.svg') no-repeat left transparent !important;
}

    .apply-landing-select-item .GT-unsubscribe-white.mobile-view, .apply-landing-select-item:hover .GT-unsubscribe-white.mobile-view {
        background-size: 50px 50px !important;
        background-position: left center !important;
    }

.display-dropdown {
    margin-top: 10px !important;
    padding: 0px !important;
    border: none;
    border-radius: .25rem;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
/*End of Action Lab Changes*/

.recenter-margin {
    margin-left: 0px;
    margin-right: 0px;
}

.recenter-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.screen-pad {
    padding: 60px;
}

.text-ellipsis {
    text-overflow: ellipsis;
    text-align: left;
    overflow: hidden;
    line-height: 26px;
}

.text-inputdropdown {
    text-overflow: ellipsis;
    text-align: left;
    overflow: hidden;
    line-height: 26px;
    outline: none;
    background: transparent;
    border: none;
    width: 100%;
    padding-left: 0;
}

.dropdown-width {
    width: 70%;
}

.dropdown-width-smaller {
    width: 35%;
}

.white-space-wrap {
    white-space: nowrap;
}

.positioning-top {
    top: 8px !important;
}

/* Update Mobile */
.update-mobile {
    color: black;
}

    .update-mobile .card-title-blue-xl {
        color: #fff;
    }

    .update-mobile .card-form-control {
        color: #fff !important;
    }

    .update-mobile .card-label-top {
        color: #fff !important;
    }

    .update-mobile .btn-outline-success {
        border: 1px solid #fff;
        color: white;
    }

        .update-mobile .btn-outline-success:hover {
            color: white;
            background-color: rgba(0,137,253, 0.1);
        }

    .update-mobile a.btn-outline-success {
        border: 1px solid #fff;
        color: white;
        background: transparent !important;
    }

    .update-mobile [type=submit] {
        -webkit-appearance: none;
    }

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.absolute-center {
    position: absolute;
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%);
}

/* Other Charges / Outstanding Mandatory Payment */
@media screen and (max-width: 425px) {
    .small-mobile {
        font-size: 9px;
    }
}

.text-a9a9a9 {
    color: #A9A9A9;
}

.mt-n-30 {
    margin-top: -30px;
}

.max-width-none {
    max-width: none !important;
}

/* Contact Us Card */
.contact-us-call-or-sms {
    font-family: MuseoSans;
    font-size: 20px;
}

.contact-us-wrapper-left {
    /*padding: 3rem;*/
}

.contact-us-gradient {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 250px;
    background: none;
    background: -moz-linear-gradient(95deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(80%, rgba(255,255,255,0))); /* safari4+,chrome */
    background: -webkit-linear-gradient(95deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(95deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%); /* opera 11.10+ */
    background: -ms-linear-gradient(95deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%); /* ie10+ */
    background: linear-gradient(95deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* ie6-9 */
}

img.contact-us-img-phone {
    height: 90px;
}

img.contact-us-img-phone-mobile {
    height: 50px;
}

.td-special-align .table-amount-outstanding {
    position: absolute;
    top: 0;
}

    .td-special-align .table-amount-outstanding.special-amount-box {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        height: 100%;
    }

.outstanding-amount-label {
    margin-top: 2.2rem;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .outstanding-amount-label {
        margin-top: 6.2rem;
    }
}

/* TNB Rounded */
.rounded-15 {
    border-radius: 15px;
}

.rounded-15-bottom {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.rounded-15-top {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

.rounded-19 {
    border-radius: 19px;
}

.fa-blue {
    color: #1c79ca;
}

.viewprofile-icon-svg {
    width: 48px;
}

.selectionbox {
    border: solid 2px #1c79ca;
    border-radius: 8px;
    box-shadow: -4px 4px 16px 0 rgba(73, 73, 74, 0.16);
}

.gt-block {
    background-color: rgba(32, 189, 76, 0.2);
    border-left: 0.5rem solid #20bd4c;
    border-radius: 4px;
    padding: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
}

.span-green {
    color: #20bd4c;
}

.gt-block-error {
    background-color: rgba(189, 32, 32, 0.2);
    border-left: 0.5rem solid #bd2020;
    border-radius: 4px;
    padding: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
}

.span-red {
    color: #bd2020;
}

.custom-has-error {
    font-size: 14px;
}

@media screen and (min-width: 1435px) {
    .custom-has-error {
        font-size: 14px;
    }
}

@media screen and (max-width: 1434px) and (min-width: 767px) {
    .custom-has-error {
        font-size: 14px;
        padding-top: 0.5rem;
    }
}

@media screen and (max-width: 766px) {
    .custom-has-error {
        font-size: 14px;
        padding-top: 0.2rem;
    }
}

.fpx-payment-card .fpx-btn {
    border: 1px solid #6844DB;
    background-color: #6844DB;
    border-radius: 8px;
    color: white;
    padding-top: 0.5rem;
    font-family: MuseoSans-500;
    padding-bottom: 0.5rem;
}

.fpx-payment-card .selected {
    color: #1c79ca;
    border: 2px solid #1c79ca !important;
}

.fpx-payment-card label {
    font-family: MuseoSans-500;
    margin-top: 0.5rem;
}

.fpx-payment-card button {
    background: none;
}

/* Fix Contractor Overlap Label */
.total-maximum-demand .card-label-top {
    margin-top: -1rem;
}

    .total-maximum-demand .card-label-top.label-top-not-empty {
        margin-top: 0;
    }

.margin-form-gap {
    margin-bottom: 2.0rem !important;
}

.form-header-margin {
    margin: 3rem 6.5rem 3rem 6.5rem;
}


@media screen and (max-width: 991px), (min-width: 1200px) {
    .form-header-margin.mobile-only {
        margin: 0rem;
    }
}

/*Mobile - Portrait View -*/
@media screen and (max-width: 767px) {
    .form-header-margin {
        margin: 1.5rem 1rem 1.5rem 1rem;
    }
}

/*Mobile - Portrait View -*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .form-header-margin {
        margin: 4.5rem 1rem 1.5rem 1rem;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .form-header-margin {
        margin: 3rem 1rem 1.5rem 1rem;
    }
}

.green-circle-completed {
    content: '';
    display: inline-block;
    background-image: url('/assets/img/completed.svg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    color: unset !important;
    border: unset !important;
}

.gray-circle-incomplete {
    content: '';
    display: inline-block;
    background-image: url('/assets/img/activity-incomplete.svg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    color: unset !important;
    border: unset !important;
}

.status-monitoring-link {
    color: #1c79ca;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
}

    .status-monitoring-link:enabled:hover {
        color: #1c79ca;
        cursor: pointer;
        text-decoration: underline;
    }

.status-monitoring-label .active {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #49494a;
}

.status-monitoring-label .inactive {
    font-family: MuseoSans;
    font-size: 14px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #a6a6a6;
}

.status-monitoring-sub-label {
    font-family: MuseoSans;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #a6a6a6;
}

.tutorial-title {
    font-size: 16px;
    font-family: MuseoSans-500;
    color: #fecc39;
}

.tutorial-body {
    font-size: 16px;
    color: white;
}

.tutorial-pagination {
    font-size: 16px;
    color: white;
    margin-right: 10px;
    margin-left: 10px;
}

.modal-banner {
    position: absolute;
    top: -8px;
    left: -8px;
}

.modal-bullets {
    text-align: center;
}

    .modal-bullets ul {
        box-sizing: content-box;
        clear: both;
        margin: 15px auto 0;
        padding: 0;
        display: inline-block;
    }

        .modal-bullets ul li {
            box-sizing: content-box;
            list-style: none;
            float: left;
            margin: 0 2px;
        }

            .modal-bullets ul li a {
                box-sizing: content-box;
                display: block;
                width: 6px;
                height: 6px;
                background: #e4e4e4;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                text-decoration: none;
                cursor: pointer;
            }

                .modal-bullets ul li a.active {
                    background: #1c79ca;
                }


.notification-yellow-dot::after {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 10px;
    color: lime !important;
    position: absolute;
}

.nav-title.notification-yellow-dot::after {
    top: 4px;
    left: 63px;
}

.navbar-toggler-icon.notification-yellow-dot::after {
    right: 20%;
}

.notification-dot::after {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 10px;
    position: absolute;
}

.offering-notification.notification-dot::after {
    top: 45%;
    left: 10px;
    color: lime;
}

@media screen and (min-width: 992px) {
    .offering-notification.notification-dot::after {
        left: 15px;
    }
}

@media screen and (min-width: 992px) {
    .offering-notification.notification-dot::after {
        left: 15px;
    }
}

.img-error-pagenotloaded {
    width: 182.9px;
    height: 190.1px;
    object-fit: contain;
}

@media screen and (max-width: 425px) {
    .img-error-pagenotloaded {
        width: 98px;
        height: 98px;
    }
}

/*Digital Bill Delivery Method*/
.accountListItem .list-group-item-title {
    word-break: normal;
}

.img-digitalbill-rate {
    width: 131px;
    height: 96px;
    object-fit: contain;
}


/*Digital Bill Carousel*/

.dg-bill-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.dg-bill-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

    .dg-bill-carousel .carousel-control-next-icon:after, .dg-bill-carousel .carousel-control-prev-icon:after {
        content: "";
    }

.dg-bill-control {
    bottom: -3rem;
    width: 100px;
    margin: auto;
}


.dg-bill-carousel-caption .label-16-12 {
    font-size: 16px;
}

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

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

.payment-carousel-height {
    height: 100px;
}

.height-inherit {
    height: inherit;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .dg-bill-carousel-caption .label-16-12 {
        font-size: 12px;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .text-justify-center {
        text-align: center;
    }
    /*    .img-border-radius{
        border-radius:50%;
    }*/
}

@media screen and (min-width: 540px) and (max-width: 767px) {
    .payment-carousel-height {
        height: 230px;
    }
}

@media screen and (min-width: 320px) and (max-width: 539px) {
    .payment-carousel-height {
        height: 280px;
    }
}

@media screen and (max-width: 460px) {
    .announcement-img {
        width: 100%;
    }
}

.carousel-height {
    height: 90px;
}

.new-ribbon-banner {
    position: absolute;
    margin: -2px;
    height: 97%
}

#tab_step1.introjs-showElement > a {
    opacity: 1 !important;
}

.dg-bill-tab {
    background-color: #7B68EE !important 
}

.dg-bttn-padding {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .dg-bttn-padding {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/*Start BillPaymentRedesign*/
.span-blue-bg {
    margin: auto;
    border-radius: 20px;
    color: #fff;
    border: solid 1px #ffffff !important;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: .375rem .75rem;
    line-height: 1.5;
    background-color: #0062cc;
    width: 120px;
    font-size: 16px;
}

.bp-data {
    margin-left: 40px;
}

.bp-data-header > div, .bp-data-info > div {
    padding: 10px;
}

.bp-hr {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.card-content-12 {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    color: #a6a6a6;
    font-family: MuseoSans;
}

.bp-acc-download {
    padding: 10px;
}

.bp-header-date {
    padding-left: 20px !important;
}

.bp-view-option {
    color: black;
}

.bp-data-info.bp-withborder > div, .bp-data-info-mobile .bp-withborder {
    border-bottom: 1px solid #e4e4e4;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(228, 228, 228);
}

.bp-date {
    margin-left: 20px;
    padding-left: 0px !important;
    margin-right: -20px;
}

.bp-view {
    text-align: center;
}

.span-blue-bg.month-year {
    margin-left: -40px !important;
}

/*Bill Payment custom select*/
#bp-filter .bp-custom-select, .bpmodal-custom-select {
    width: 350px;
}

.bpmodal-custom-select {
    width: 350px;
}

/*#bp-filter .bp-selected {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #1c79ca;
    font-family: MuseoSans-500;
}*/

.bp-custom-select, bpmodal-custom-select {
    position: relative;
    width: 160px;
}

    .bp-custom-select select, .bpmodal-custom-select select {
        display: none; /*hide original SELECT element:*/
    }

/*point the arrow upwards when the select box is open (active):*/
.bp-selected.bp-slct-arrow-active:after, .bpmodal-selected.bpmodal-slct-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

/*style the items (options), including the selected item:*/
.bp-select-items div, .bpmodal-select-items div {
    padding: 10px;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
}

.bp-selected::-ms-expand, .bpmodal-selected::-ms-expand {
    display: none;
}

/*style items (options):*/
.bp-select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: -4px 4px 16px 0 rgba(0,0,0,0.2),-4px 4px 16px 0 rgba(0,0,0,0.19) !important;
    z-index: 99;
    border-radius: 6px;
    padding: 0 16px;
}

.bpmodal-select-items {
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: -4px 4px 16px 0 rgba(0,0,0,0.2),-4px 4px 16px 0 rgba(0,0,0,0.19) !important;
    z-index: 99;
    border-radius: 6px;
    padding: 0 16px;
}

/*hide the items when the select box is closed:*/
.bp-select-hide, .bpmodal-select-hide {
    display: none;
}

.bp-select-items div:hover, .bp-unchanged-selected, .bpmodal-select-items div:hover, .bpmodal-unchanged-selected {
    color: #1c79ca;
    font-weight: bold;
}

#bp-filter .bp-unchanged-selected-bill::after {
    content: "\2713"; /* Tick in HTML */
    float: right;
    font-weight: bold;
    margin-left: 8px;
    color: #20bd4c;
}

#bpmodal-filter {
    height: 50px;
}

.bpmodal-custom-select {
    z-index: 99999;
    border-bottom-style: solid;
    border-bottom-color: rgba(73, 73, 74, 0.16) !important;
    height: 40px;
}

.bpmodal-selected.notselected {
    padding-left: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: #a6a6a6;
    font-family: MuseoSans;
}

.bpmodal-selected {
    padding-left: 0;
}
/*End Bill Payment custom select*/

.margin-top-bottom-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.margin-auto {
    margin: auto;
}

.bp-green-text {
    color: #20bd4c;
}

.bp-date-span {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

    .bp-date-span hr {
        flex: 1;
    }

.bp-data-info-mobile > div {
    margin: 0;
    padding-left: 0;
    padding: 10px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .bp-label-desktop {
        display: none;
    }
}

.bp-details-mobile, .bp-date-mobile {
    padding-left: 0 !important;
}

.bp-label-desktop {
    color: #49494a;
}

.bp-view > button {
    padding: 0;
}

.no-bottom-padding {
    padding-bottom: 0 !important;
}

.no-top-padding {
    padding-top: 0 !important;
}

.no-side-padding, .no-side-padding > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bp-modal {
    z-index: 10000 !important;
}

.bp-statement-period {
    color: black;
}

#bp-statement-option > div {
    margin: 0 !important;
}

#bp-statement-option {
    margin-left: auto;
    margin-right: auto;
}

    #bp-statement-option .option-label-top {
        padding-left: 0;
        font-weight: 300;
        line-height: 1.4;
        color: #a6a6a6;
        font-family: MuseoSans;
        margin-bottom: 0;
        margin-top: 15px;
    }

.top-label.hide {
    visibility: hidden;
}

.bp-label-top-selected {
    bottom: auto !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    -webkit-transform: translate(0,-60%);
    -ms-transform: translate(0,-60%);
    transform: translate(0,-60%);
}

div#statementPeriodDropdown label {
    color: #a6a6a6;
    border-bottom-color: #a6a6a6;
}

div#statementPeriodDropdown .option-control {
    background: url(../../../assets/img/downwards-arrow-black.svg) no-repeat right transparent;
    color: #49494a;
    font-size: 16px;
    padding: 10px 0px !important;
    bottom: 10px;
}

#statementPeriodDropdown {
    width: 350px;
    margin: auto;
}

/*.bp-modal-selection {
    margin-top: 38px !important;
}*/

#statementPeriodBox {
    box-shadow: -4px 4px 16px 0 rgba(0,0,0,0.2),-4px 4px 16px 0 rgba(0,0,0,0.19) !important;
    border-radius: 6px;
}

#bp-statement-dropdown {
    width: 100%;
    z-index: 4;
}

.option-group .bp-label-top {
    font-family: MuseoSans;
    color: white;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0px;
}

.input-group .bp-label-top {
    font-family: MuseoSans;
    color: white;
    opacity: 0.6;
    font-size: 16px;
    line-height: 1.4;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0px;
    top: 0px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    text-transform: inherit;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: inherit;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
    .bp-label-top {
        font-size: 14px !important;
        background-color: transparent;
        text-transform: uppercase;
    }
}

#statementPeriodList.mngStatementPeriod {
    -ms-overflow-style: none;
    padding: 0 16px !important;
    margin-bottom: 0;
}

#mngStatementPeriod {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#statementPeriodList.mngStatementPeriod::-webkit-scrollbar {
    display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
    #lblStatementPeriod.label-top-not-empty {
        transform: translate(0,-120%);
    }
}

#lblStatementPeriod.label-top-not-empty {
    transform: translate(0,-120%);
}

/*.bp-modal-selection {
    margin: 0 50px;
}*/

.bp-modal-selection .monthpicker {
    margin-top: 40px;
}

    .bp-modal-selection .monthpicker .popover {
        margin: 15px;
    }

.bp-modal-selection .monthpicker {
    display: none;
}

#bp-statement-dropdown {
    padding-right: 28px !important;
}

#bp-filter .bp-selected {
    background-image: url(../../../assets/img/arrow-down-blue.svg);
    background-size: 1.2em auto, 100%;
    background-position: right;
}

.bp-selected, .bpmodal-selected {
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url(../../../assets/img/arrow-down-black.svg);
    background-position: right .7em top 50%, 0 0;
    background-size: 1.5em auto, 100%;
    background-repeat: no-repeat;
}

.bp-label-desktop.disabled, .empty-bp-message {
    color: #a6a6a6;
    opacity: 0.8;
}

    .empty-bp-message.row > div {
        text-align: center;
    }

#bp-filter-month, #bp-learn-more {
    padding: 0;
}

.bp-grid-footer {
    padding: 0 48px 0 48px !important;
    margin: 0;
}

/*@media only screen and (min-width: 768px) {
    .bp-hr {
        margin-right: 20px;
    }
}*/

div#bpRedesignCard .card-gutter {
    margin: 0;
}

/*div#bpRedesignCard .desktop-view {
    margin: 0 48px;
}*/

.desktop-no-padding {
    padding: 0;
}

#br-step-1 {
    padding: 38px 48px 10px;
    margin: 0px;
}

#BPRedesignGrid {
    color: #49494a;
    padding: 10px 48px 0px 48px;
}

.empty-bp-message {
    padding-bottom: 40px;
    margin: auto;
}

#br-step-1 > div {
    padding: 0;
}

.bp-data .bp-data-info, .bp-data .bp-data-header {
    margin-right: 0;
}

@media screen and (max-width: 767px) {
    #br-step-1 {
        padding: 20px 20px 5px;
    }

    #BPRedesignGrid {
        padding: 10px 20px 0px 20px;
    }

    .bp-grid-footer {
        padding: 0 20px 0 20px !important;
    }
}

/*.myboxborder:after {
    content: "";
    background: black;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 1px;
}*/
.vl-blue-half:after {
    content: "";
    /* background: black; */
    position: absolute;
    /* bottom: 0; */
    left: 0;
    height: 22px;
    width: 1px;
    box-sizing: content-box;
    left: 73px;
    border-left-color: #1c79ca !important;
    border-left-style: inset;
    border-left: 1.4px solid;
}

.vl-blue:after {
    content: "";
    position: absolute;
    height: 44px;
    box-sizing: content-box;
    left: 73px;
    border-left-color: #1c79ca !important;
    border-left-style: inset;
    border-left: 1.4px solid;
}

.bp-dot {
    height: 6px;
    width: 6px;
    background-color: #1c79ca;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: -22px;
    top: 42%;
}

/*End BillPaymentRedesign*/

.btn-outline-blue {
    color: #1c79ca;
    border-color: #1c79ca;
    background-color: transparent;
}

.btn-h-38 {
    height: 38px;
}

.btn-outline-blue:not(:disabled):not(.disabled):active, .btn-outline-blue:not(:disabled):not(.disabled).active, .show > .btn-outline-blue.dropdown-toggle {
    color: #fff;
    background-color: #1c79ca;
    border-color: #1c79ca;
}

img.paymentHistoryNewRibbon {
    padding: 0 5px;
    height: 20px;
}

#mobile-account-dropdown-holder {
    margin-right: 10px;
    margin-top: 4px;
}

@media screen and (max-width: 425px) {
    .bp-modal-selection .btn-outline-blue {
        width: 100px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media screen and (min-width: 425px) and (max-width: 767px) {
    .bp-modal-selection .btn-outline-blue {
        width: 120px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/*End BillPaymentRedesign*/

.pr-10 {
    padding-left: 10px;
}

.pl-40-0 {
    padding-left: 40px !important;
}

@media screen and (max-width: 767px) {
    .pl-40-0 {
        padding-left: 0 !important;
    }

    .card-content-14-12 {
        font-size: 12px !important;
    }
}

.bill-method-selection {
    border: 2px solid #e4e4e4;
    border-radius: 5px;
    cursor: pointer;
}

.btn-outline-blue {
    color: #1c79ca;
    border-color: #1c79ca;
    background-color: transparent;
}

    .btn-outline-blue:not(:disabled):not(.disabled):active, .btn-outline-blue:not(:disabled):not(.disabled).active, .show > .btn-outline-blue.dropdown-toggle {
        color: #fff;
        background-color: #1c79ca;
        border-color: #1c79ca;
    }

.rounded-19 {
    border-radius: 19px;
}

.btn-h-38 {
    height: 38px;
}

.bill-method-selection.active {
    border: 2px solid #1c79ca;
}

.act-log-date {
    text-align: right;
    color: #a6a6a6;
    font-family: 'MuseoSans';
    opacity: 0.6;
}

@media screen and (max-width: 767px) {
    .act-log-date {
        text-align: left;      
    }

    #empty-apply-elec .desc {
        margin-top: 25px;
    }

    #empty-apply-elec .card-desc {
        margin-top: 20px;
        margin-bottom: 1rem;
    }
}

.empty-state-title {
    margin-top: 25px;
}

.empty-state-desc {
    margin-top: 20px;
}

#empty-add-elec .btn-success {
    margin-top: 10px;
}

@media screen and (min-width: 767px) {
    #empty-apply-elec .desc {
        padding-left: 40px;
    }
}

.fw-600 {
    font-weight: 600;
}

.card-label-hint {
    position: absolute;
    width: 582px;
    height: 12px;
    left: 715px;
    top: 599px;
    font-family: 'Museo Sans';
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 12px;
    /* identical to box height, or 109% */
    color: #49494A;
    white-space: normal;
}

.tel {
    color: black;
    font-weight: bold;
}

.clc-alignment {
    text-align: center;
    font-size: 16px !important;
    margin-top: 1ch;
    margin-left: 4ch;
}

.clc-MD-Declare {
    text-align : center;
    vertical-align : bottom;
    top : 18px !important;
}


/*legend stuff for AS*/

#legend ul {
    list-style: none;
    padding: 0;
}

#legend ul li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
    font-family: MuseoSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 16px;
    color: #49494A;
}

#legend ul li:before {
    content: "\2022";
    font-size: 3em;
    vertical-align: -7px;
    margin-right: 2px;
}

#legend ul li.unavailable:before {
    color: #E4E4E4;
}

#legend ul li.available:before {
    color: #49494A;
}

#legend ul li.selected:before {
    color: #1C79CA;
}

.time-slot-buttons .disabled {
    color: grey;
    border-color: grey;
}

/* =================================== */
/* FIX FOR APPOINMENT SCHEDULER TIMESLOT BUTTONS */

#time-slot-buttons .btn.btn-outline-info.active {
    background-color: #1C79CA; /* Set background to #1C79CA when active */
    border-color: #1C79CA; /* Keep border the same as the active color */
    color: #fff; /* Set text color to white when active */
}

/* Default state for the button */
#time-slot-buttons .btn.btn-outline-info {
    background-color: #fff; /* Set default background to white */
    border-color: #1C79CA; /* Set border to #1C79CA */
    color: #1C79CA; /* Set text color to #1C79CA */
}

#time-slot-buttons .btn.btn-outline-info:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(28, 121, 202, 0.5); /* Add box-shadow for focus */
}

#time-slot-buttons .btn.btn-outline-info.disabled {
    background-color: #ffffff; /* Set background to white when disabled */
    border-color: #7a7a7a; /* Keep border the same as the text color */
    color: #7a7a7a; /* Set text color to grey when disabled */
}

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