@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap);
.mat-badge-content {
    font-weight: 600;
    font-size: 12px;
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-badge-small .mat-badge-content {
    font-size: 6px
}

.mat-badge-large .mat-badge-content {
    font-size: 24px
}

.mat-h1,
.mat-headline,
.mat-typography h1 {
    font: 400 24px/32px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 16px
}

.mat-h2,
.mat-title,
.mat-typography h2 {
    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 16px
}

.mat-h3,
.mat-subheading-2,
.mat-typography h3 {
    font: 400 16px/28px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 16px
}

.mat-h4,
.mat-subheading-1,
.mat-typography h4 {
    font: 400 15px/24px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 16px
}

.mat-h5,
.mat-typography h5 {
    font: 400 11.62px/20px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 12px
}

.mat-h6,
.mat-typography h6 {
    font: 400 9.38px/20px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 12px
}

.mat-body-2,
.mat-body-strong {
    font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif
}

.mat-body,
.mat-body-1,
.mat-typography {
    font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif
}

.mat-body p,
.mat-body-1 p,
.mat-typography p {
    margin: 0 0 12px
}

.mat-caption,
.mat-small {
    font: 400 12px/20px Roboto, "Helvetica Neue", sans-serif
}

.mat-display-4,
.mat-typography .mat-display-4 {
    font: 300 112px/112px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 56px;
    letter-spacing: -.05em
}

.mat-display-3,
.mat-typography .mat-display-3 {
    font: 400 56px/56px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 64px;
    letter-spacing: -.02em
}

.mat-display-2,
.mat-typography .mat-display-2 {
    font: 400 45px/48px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 64px;
    letter-spacing: -.005em
}

.mat-display-1,
.mat-typography .mat-display-1 {
    font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif;
    margin: 0 0 64px
}

.mat-bottom-sheet-container {
    font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif
}

.mat-button,
.mat-fab,
.mat-flat-button,
.mat-icon-button,
.mat-mini-fab,
.mat-raised-button,
.mat-stroked-button {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500
}

.mat-button-toggle,
.mat-card {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-card-title {
    font-size: 24px;
    font-weight: 500
}

.mat-card-header .mat-card-title {
    font-size: 20px
}

.mat-card-content,
.mat-card-subtitle {
    font-size: 14px
}

.mat-checkbox {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-checkbox-layout .mat-checkbox-label {
    line-height: 24px
}

.mat-chip {
    font-size: 14px;
    font-weight: 500
}

.mat-chip .mat-chip-remove.mat-icon,
.mat-chip .mat-chip-trailing-icon.mat-icon {
    font-size: 18px
}

.mat-table {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-header-cell {
    font-size: 12px;
    font-weight: 500
}

.mat-cell,
.mat-footer-cell {
    font-size: 14px
}

.mat-calendar {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-calendar-body {
    font-size: 13px
}

.mat-calendar-body-label,
.mat-calendar-period-button {
    font-size: 14px;
    font-weight: 500
}

.mat-calendar-table-header th {
    font-size: 11px;
    font-weight: 400
}

.mat-dialog-title {
    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif
}

.mat-expansion-panel-header {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    font-weight: 400
}

.mat-expansion-panel-content {
    font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif
}

.mat-form-field {
    font-size: inherit;
    font-weight: 400;
    line-height: 1.125;
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-form-field-wrapper {
    padding-bottom: 1.34375em
}

.mat-form-field-prefix .mat-icon,
.mat-form-field-suffix .mat-icon {
    font-size: 150%;
    line-height: 1.125
}

.mat-form-field-prefix .mat-icon-button,
.mat-form-field-suffix .mat-icon-button {
    height: 1.5em;
    width: 1.5em
}

.mat-form-field-prefix .mat-icon-button .mat-icon,
.mat-form-field-suffix .mat-icon-button .mat-icon {
    height: 1.125em;
    line-height: 1.125
}

.mat-form-field-infix {
    padding: .5em 0;
    border-top: .84375em solid transparent
}

.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-1.34375em) scale(.75);
    transform: translateY(-1.34375em) scale(.75);
    width: 133.33333%
}

.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.34374em) scale(.75);
    transform: translateY(-1.34374em) scale(.75);
    width: 133.33334%
}

.mat-form-field-label-wrapper {
    top: -.84375em;
    padding-top: .84375em
}

.mat-form-field-label {
    top: 1.34375em
}

.mat-form-field-underline {
    bottom: 1.34375em
}

.mat-form-field-subscript-wrapper {
    font-size: 75%;
    margin-top: .66667em;
    top: calc(100% - 1.79167em)
}

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 1.25em
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
    padding: .4375em 0
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);
    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);
    -ms-transform: translateY(-1.28125em) scale(.75);
    width: 133.33333%
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00101px);
    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00101px);
    -ms-transform: translateY(-1.28124em) scale(.75);
    width: 133.33334%
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00102px);
    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00102px);
    -ms-transform: translateY(-1.28123em) scale(.75);
    width: 133.33335%
}

.mat-form-field-appearance-legacy .mat-form-field-label {
    top: 1.28125em
}

.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
    margin-top: .54167em;
    top: calc(100% - 1.66667em)
}

@media print {
    .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
    .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
        -webkit-transform: translateY(-1.28122em) scale(.75);
        transform: translateY(-1.28122em) scale(.75)
    }
    .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label {
        -webkit-transform: translateY(-1.28121em) scale(.75);
        transform: translateY(-1.28121em) scale(.75)
    }
    .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
        -webkit-transform: translateY(-1.2812em) scale(.75);
        transform: translateY(-1.2812em) scale(.75)
    }
}

.mat-form-field-appearance-fill .mat-form-field-infix {
    padding: .25em 0 .75em
}

.mat-form-field-appearance-fill .mat-form-field-label {
    top: 1.09375em;
    margin-top: -.5em
}

.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-.59375em) scale(.75);
    transform: translateY(-.59375em) scale(.75);
    width: 133.33333%
}

.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-.59374em) scale(.75);
    transform: translateY(-.59374em) scale(.75);
    width: 133.33334%
}

.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 1em 0
}

.mat-form-field-appearance-outline .mat-form-field-label {
    top: 1.84375em;
    margin-top: -.25em
}

.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-1.59375em) scale(.75);
    transform: translateY(-1.59375em) scale(.75);
    width: 133.33333%
}

.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.59374em) scale(.75);
    transform: translateY(-1.59374em) scale(.75);
    width: 133.33334%
}

.mat-grid-tile-footer,
.mat-grid-tile-header {
    font-size: 14px
}

.mat-grid-tile-footer .mat-line,
.mat-grid-tile-header .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-grid-tile-footer .mat-line:nth-child(n+2),
.mat-grid-tile-header .mat-line:nth-child(n+2) {
    font-size: 12px
}

input.mat-input-element {
    margin-top: -.0625em
}

.mat-menu-item {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 400
}

.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 12px
}

.mat-radio-button,
.mat-select {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-select-trigger {
    height: 1.125em
}

.mat-slide-toggle-content {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-slider-thumb-label-text {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 500
}

.mat-stepper-horizontal,
.mat-stepper-vertical {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-step-label {
    font-size: 14px;
    font-weight: 400
}

.mat-step-sub-label-error {
    font-weight: 400
}

.mat-step-label-error {
    font-size: 14px
}

.mat-step-label-selected {
    font-size: 14px;
    font-weight: 500
}

.mat-tab-group {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-tab-label,
.mat-tab-link {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500
}

.mat-toolbar,
.mat-toolbar h1,
.mat-toolbar h2,
.mat-toolbar h3,
.mat-toolbar h4,
.mat-toolbar h5,
.mat-toolbar h6 {
    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
    margin: 0
}

.mat-tooltip {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 10px;
    padding-top: 6px;
    padding-bottom: 6px
}

.mat-tooltip-handset {
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px
}

.mat-list-item,
.mat-list-option {
    font-family: Roboto, "Helvetica Neue", sans-serif
}

.mat-list-base .mat-list-item {
    font-size: 16px
}

.mat-list-base .mat-list-item .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list-base .mat-list-item .mat-line:nth-child(n+2) {
    font-size: 14px
}

.mat-list-base .mat-list-option {
    font-size: 16px
}

.mat-list-base .mat-list-option .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list-base .mat-list-option .mat-line:nth-child(n+2) {
    font-size: 14px
}

.mat-list-base[dense] .mat-list-item {
    font-size: 12px
}

.mat-list-base[dense] .mat-list-item .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2),
.mat-list-base[dense] .mat-list-option {
    font-size: 12px
}

.mat-list-base[dense] .mat-list-option .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2) {
    font-size: 12px
}

.mat-list-base[dense] .mat-subheader {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 500
}

.mat-option {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    color: rgba(0, 0, 0, .87)
}

.mat-optgroup-label {
    font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif;
    color: rgba(0, 0, 0, .54)
}

.mat-simple-snackbar {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px
}

.mat-simple-snackbar-action {
    line-height: 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500
}

.mat-ripple {
    overflow: hidden;
    position: relative
}

.mat-ripple.mat-ripple-unbounded {
    overflow: visible
}

.mat-ripple-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity, transform cubic-bezier(0, 0, .2, 1), -webkit-transform cubic-bezier(0, 0, .2, 1);
    -webkit-transform: scale(0);
    transform: scale(0)
}

@media (-ms-high-contrast:active) {
    .mat-ripple-element {
        display: none
    }
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none
}

.cdk-global-overlay-wrapper,
.cdk-overlay-container {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.cdk-overlay-container {
    position: fixed;
    z-index: 1000
}

.cdk-overlay-container:empty {
    display: none
}

.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 1000
}

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%
}

.cdk-overlay-backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
    opacity: 0
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 1
}

@media screen and (-ms-high-contrast:active) {
    .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
        opacity: .6
    }
}

.cdk-overlay-dark-backdrop {
    background: rgba(0, 0, 0, .32)
}

.cdk-overlay-transparent-backdrop,
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0
}

.cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    min-height: 1px
}

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll
}

@-webkit-keyframes cdk-text-field-autofill-start {
    /*!*/
}

@keyframes cdk-text-field-autofill-start {
    /*!*/
}

@-webkit-keyframes cdk-text-field-autofill-end {
    /*!*/
}

@keyframes cdk-text-field-autofill-end {
    /*!*/
}

.cdk-text-field-autofill-monitored:-webkit-autofill {
    -webkit-animation-name: cdk-text-field-autofill-start;
    animation-name: cdk-text-field-autofill-start
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
    -webkit-animation-name: cdk-text-field-autofill-end;
    animation-name: cdk-text-field-autofill-end
}

textarea.cdk-textarea-autosize {
    resize: none
}

textarea.cdk-textarea-autosize-measuring {
    height: auto !important;
    overflow: hidden !important;
    padding: 2px 0 !important;
    box-sizing: content-box !important
}

.mat-ripple-element {
    background-color: rgba(0, 0, 0, .1)
}

.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled),
.mat-option:focus:not(.mat-option-disabled),
.mat-option:hover:not(.mat-option-disabled) {
    background: rgba(0, 0, 0, .04)
}

.mat-option.mat-active {
    background: rgba(0, 0, 0, .04);
    color: rgba(0, 0, 0, .87)
}

.mat-option.mat-option-disabled {
    color: rgba(0, 0, 0, .38)
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #3f51b5
}

.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #ff4081
}

.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #f44336
}

.mat-optgroup-disabled .mat-optgroup-label {
    color: rgba(0, 0, 0, .38)
}

.mat-pseudo-checkbox {
    color: rgba(0, 0, 0, .54)
}

.mat-pseudo-checkbox::after {
    color: #fafafa
}

.mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate,
.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate {
    background: #ff4081
}

.mat-primary .mat-pseudo-checkbox-checked,
.mat-primary .mat-pseudo-checkbox-indeterminate {
    background: #3f51b5
}

.mat-warn .mat-pseudo-checkbox-checked,
.mat-warn .mat-pseudo-checkbox-indeterminate {
    background: #f44336
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {
    background: #b0b0b0
}

.mat-elevation-z0 {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z1 {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z2 {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z3 {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z4 {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z5 {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z6 {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z7 {
    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12)
}

.mat-elevation-z8 {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.mat-elevation-z9 {
    box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .2), 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12)
}

.mat-elevation-z10 {
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12)
}

.mat-elevation-z11 {
    box-shadow: 0 6px 7px -4px rgba(0, 0, 0, .2), 0 11px 15px 1px rgba(0, 0, 0, .14), 0 4px 20px 3px rgba(0, 0, 0, .12)
}

.mat-elevation-z12 {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z13 {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z14 {
    box-shadow: 0 7px 9px -4px rgba(0, 0, 0, .2), 0 14px 21px 2px rgba(0, 0, 0, .14), 0 5px 26px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z15 {
    box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2), 0 15px 22px 2px rgba(0, 0, 0, .14), 0 6px 28px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z16 {
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z17 {
    box-shadow: 0 8px 11px -5px rgba(0, 0, 0, .2), 0 17px 26px 2px rgba(0, 0, 0, .14), 0 6px 32px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z18 {
    box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12)
}

.mat-elevation-z19 {
    box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .2), 0 19px 29px 2px rgba(0, 0, 0, .14), 0 7px 36px 6px rgba(0, 0, 0, .12)
}

.mat-elevation-z20 {
    box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 20px 31px 3px rgba(0, 0, 0, .14), 0 8px 38px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z21 {
    box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 21px 33px 3px rgba(0, 0, 0, .14), 0 8px 40px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z22 {
    box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .2), 0 22px 35px 3px rgba(0, 0, 0, .14), 0 8px 42px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z23 {
    box-shadow: 0 11px 14px -7px rgba(0, 0, 0, .2), 0 23px 36px 3px rgba(0, 0, 0, .14), 0 9px 44px 8px rgba(0, 0, 0, .12)
}

.mat-elevation-z24 {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12)
}

.mat-app-background {
    background-color: #fafafa;
    color: rgba(0, 0, 0, .87)
}

.mat-theme-loaded-marker {
    display: none
}

.mat-autocomplete-panel {
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-autocomplete-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
    background: #fff
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
    color: rgba(0, 0, 0, .87)
}

@media (-ms-high-contrast:active) {
    .mat-badge-content {
        outline: solid 1px;
        border-radius: 0
    }
    .mat-checkbox-disabled {
        opacity: .5
    }
}

.mat-badge-accent .mat-badge-content {
    background: #ff4081;
    color: #fff
}

.mat-badge-warn .mat-badge-content {
    color: #fff;
    background: #f44336
}

.mat-badge {
    position: relative
}

.mat-badge-hidden .mat-badge-content {
    display: none
}

.mat-badge-disabled .mat-badge-content {
    background: #b9b9b9;
    color: rgba(0, 0, 0, .38)
}

.mat-badge-content {
    color: #fff;
    background: #3f51b5;
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none
}

.mat-badge-content.mat-badge-active {
    -webkit-transform: none;
    transform: none
}

.mat-badge-small .mat-badge-content {
    width: 16px;
    height: 16px;
    line-height: 16px
}

.mat-badge-small.mat-badge-above .mat-badge-content {
    top: -8px
}

.mat-badge-small.mat-badge-below .mat-badge-content {
    bottom: -8px
}

.mat-badge-small.mat-badge-before .mat-badge-content {
    left: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {
    left: auto;
    right: -16px
}

.mat-badge-small.mat-badge-after .mat-badge-content {
    right: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {
    right: auto;
    left: -16px
}

.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -8px
}

.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -8px
}

.mat-badge-medium .mat-badge-content {
    width: 22px;
    height: 22px;
    line-height: 22px
}

.mat-badge-medium.mat-badge-above .mat-badge-content {
    top: -11px
}

.mat-badge-medium.mat-badge-below .mat-badge-content {
    bottom: -11px
}

.mat-badge-medium.mat-badge-before .mat-badge-content {
    left: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {
    left: auto;
    right: -22px
}

.mat-badge-medium.mat-badge-after .mat-badge-content {
    right: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {
    right: auto;
    left: -22px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -11px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -11px
}

.mat-badge-large .mat-badge-content {
    width: 28px;
    height: 28px;
    line-height: 28px
}

.mat-badge-large.mat-badge-above .mat-badge-content {
    top: -14px
}

.mat-badge-large.mat-badge-below .mat-badge-content {
    bottom: -14px
}

.mat-badge-large.mat-badge-before .mat-badge-content {
    left: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {
    left: auto;
    right: -28px
}

.mat-badge-large.mat-badge-after .mat-badge-content {
    right: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {
    right: auto;
    left: -28px
}

.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -14px
}

.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -14px
}

.mat-bottom-sheet-container {
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-button,
.mat-icon-button,
.mat-stroked-button {
    color: inherit;
    background: 0 0
}

.mat-button.mat-primary,
.mat-icon-button.mat-primary,
.mat-stroked-button.mat-primary {
    color: #3f51b5
}

.mat-button.mat-accent,
.mat-icon-button.mat-accent,
.mat-stroked-button.mat-accent {
    color: #ff4081
}

.mat-button.mat-warn,
.mat-icon-button.mat-warn,
.mat-stroked-button.mat-warn {
    color: #f44336
}

.mat-button.mat-accent[disabled],
.mat-button.mat-primary[disabled],
.mat-button.mat-warn[disabled],
.mat-button[disabled][disabled],
.mat-icon-button.mat-accent[disabled],
.mat-icon-button.mat-primary[disabled],
.mat-icon-button.mat-warn[disabled],
.mat-icon-button[disabled][disabled],
.mat-stroked-button.mat-accent[disabled],
.mat-stroked-button.mat-primary[disabled],
.mat-stroked-button.mat-warn[disabled],
.mat-stroked-button[disabled][disabled] {
    color: rgba(0, 0, 0, .26)
}

.mat-button.mat-primary .mat-button-focus-overlay,
.mat-icon-button.mat-primary .mat-button-focus-overlay,
.mat-stroked-button.mat-primary .mat-button-focus-overlay {
    background-color: #3f51b5
}

.mat-button.mat-accent .mat-button-focus-overlay,
.mat-icon-button.mat-accent .mat-button-focus-overlay,
.mat-stroked-button.mat-accent .mat-button-focus-overlay {
    background-color: #ff4081
}

.mat-button.mat-warn .mat-button-focus-overlay,
.mat-icon-button.mat-warn .mat-button-focus-overlay,
.mat-stroked-button.mat-warn .mat-button-focus-overlay {
    background-color: #f44336
}

.mat-button[disabled] .mat-button-focus-overlay,
.mat-icon-button[disabled] .mat-button-focus-overlay,
.mat-stroked-button[disabled] .mat-button-focus-overlay {
    background-color: transparent
}

.mat-button .mat-ripple-element,
.mat-icon-button .mat-ripple-element,
.mat-stroked-button .mat-ripple-element {
    opacity: .1;
    background-color: currentColor
}

.mat-button-focus-overlay {
    background: #000
}

.mat-stroked-button:not([disabled]) {
    border-color: rgba(0, 0, 0, .12)
}

.mat-fab,
.mat-flat-button,
.mat-mini-fab,
.mat-raised-button {
    color: rgba(0, 0, 0, .87);
    background-color: #fff
}

.mat-fab.mat-accent,
.mat-fab.mat-primary,
.mat-fab.mat-warn,
.mat-flat-button.mat-accent,
.mat-flat-button.mat-primary,
.mat-flat-button.mat-warn,
.mat-mini-fab.mat-accent,
.mat-mini-fab.mat-primary,
.mat-mini-fab.mat-warn,
.mat-raised-button.mat-accent,
.mat-raised-button.mat-primary,
.mat-raised-button.mat-warn {
    color: #fff
}

.mat-fab.mat-accent[disabled],
.mat-fab.mat-primary[disabled],
.mat-fab.mat-warn[disabled],
.mat-fab[disabled][disabled],
.mat-flat-button.mat-accent[disabled],
.mat-flat-button.mat-primary[disabled],
.mat-flat-button.mat-warn[disabled],
.mat-flat-button[disabled][disabled],
.mat-mini-fab.mat-accent[disabled],
.mat-mini-fab.mat-primary[disabled],
.mat-mini-fab.mat-warn[disabled],
.mat-mini-fab[disabled][disabled],
.mat-raised-button.mat-accent[disabled],
.mat-raised-button.mat-primary[disabled],
.mat-raised-button.mat-warn[disabled],
.mat-raised-button[disabled][disabled] {
    color: rgba(0, 0, 0, .26);
    background-color: rgba(0, 0, 0, .12)
}

.mat-fab.mat-primary,
.mat-flat-button.mat-primary,
.mat-mini-fab.mat-primary,
.mat-raised-button.mat-primary {
    background-color: #3f51b5
}

.mat-fab.mat-accent,
.mat-flat-button.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-accent {
    background-color: #ff4081
}

.mat-fab.mat-warn,
.mat-flat-button.mat-warn,
.mat-mini-fab.mat-warn,
.mat-raised-button.mat-warn {
    background-color: #f44336
}

.mat-fab.mat-accent .mat-ripple-element,
.mat-fab.mat-primary .mat-ripple-element,
.mat-fab.mat-warn .mat-ripple-element,
.mat-flat-button.mat-accent .mat-ripple-element,
.mat-flat-button.mat-primary .mat-ripple-element,
.mat-flat-button.mat-warn .mat-ripple-element,
.mat-mini-fab.mat-accent .mat-ripple-element,
.mat-mini-fab.mat-primary .mat-ripple-element,
.mat-mini-fab.mat-warn .mat-ripple-element,
.mat-raised-button.mat-accent .mat-ripple-element,
.mat-raised-button.mat-primary .mat-ripple-element,
.mat-raised-button.mat-warn .mat-ripple-element {
    background-color: rgba(255, 255, 255, .1)
}

.mat-flat-button:not([class*=mat-elevation-z]),
.mat-stroked-button:not([class*=mat-elevation-z]) {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-raised-button:not([class*=mat-elevation-z]) {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-raised-button:not([disabled]):active:not([class*=mat-elevation-z]) {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.mat-raised-button[disabled]:not([class*=mat-elevation-z]) {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-fab:not([class*=mat-elevation-z]),
.mat-mini-fab:not([class*=mat-elevation-z]) {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.mat-fab:not([disabled]):active:not([class*=mat-elevation-z]),
.mat-mini-fab:not([disabled]):active:not([class*=mat-elevation-z]) {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12)
}

.mat-fab[disabled]:not([class*=mat-elevation-z]),
.mat-mini-fab[disabled]:not([class*=mat-elevation-z]) {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-button-toggle-group,
.mat-button-toggle-standalone {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-button-toggle-group-appearance-standard,
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, .12)
}

.mat-button-toggle {
    color: rgba(0, 0, 0, .38)
}

.mat-button-toggle .mat-button-toggle-focus-overlay {
    background-color: rgba(0, 0, 0, .12)
}

.mat-button-toggle-appearance-standard {
    color: rgba(0, 0, 0, .87);
    background: #fff
}

.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
    background-color: #000
}

.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle {
    border-left: 1px solid rgba(0, 0, 0, .12)
}

[dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle {
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, .12)
}

.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle+.mat-button-toggle {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, .12)
}

.mat-button-toggle-checked {
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, .54)
}

.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
    color: rgba(0, 0, 0, .87)
}

.mat-button-toggle-disabled {
    color: rgba(0, 0, 0, .26);
    background-color: #eee
}

.mat-button-toggle-disabled.mat-button-toggle-appearance-standard {
    background: #fff
}

.mat-button-toggle-disabled.mat-button-toggle-checked {
    background-color: #bdbdbd
}

.mat-card {
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-card:not([class*=mat-elevation-z]) {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)
}

.mat-card.mat-card-flat:not([class*=mat-elevation-z]) {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-card-subtitle {
    color: rgba(0, 0, 0, .54)
}

.mat-checkbox-frame {
    border-color: rgba(0, 0, 0, .54)
}

.mat-checkbox-checkmark {
    fill: #fafafa
}

.mat-checkbox-checkmark-path {
    stroke: #fafafa !important
}

@media (-ms-high-contrast:black-on-white) {
    .mat-checkbox-checkmark-path {
        stroke: #000 !important
    }
}

.mat-checkbox-mixedmark {
    background-color: #fafafa
}

.mat-checkbox-checked.mat-primary .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background {
    background-color: #3f51b5
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #ff4081
}

.mat-checkbox-checked.mat-warn .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background {
    background-color: #f44336
}

.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
    background-color: #b0b0b0
}

.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {
    border-color: #b0b0b0
}

.mat-checkbox-disabled .mat-checkbox-label {
    color: rgba(0, 0, 0, .54)
}

@media (-ms-high-contrast:active) {
    .mat-checkbox-background {
        background: 0 0
    }
}

.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element {
    background-color: #3f51b5
}

.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {
    background-color: #ff4081
}

.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element {
    background-color: #f44336
}

.mat-chip.mat-standard-chip {
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, .87)
}

.mat-chip.mat-standard-chip .mat-chip-remove {
    color: rgba(0, 0, 0, .87);
    opacity: .4
}

.mat-chip.mat-standard-chip:not(.mat-chip-disabled):active {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.mat-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover {
    opacity: .54
}

.mat-chip.mat-standard-chip.mat-chip-disabled {
    opacity: .4
}

.mat-chip.mat-standard-chip::after {
    background: #000
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
    background-color: #3f51b5;
    color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {
    color: #fff;
    opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element {
    background: rgba(255, 255, 255, .1)
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
    background-color: #f44336;
    color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {
    color: #fff;
    opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element {
    background: rgba(255, 255, 255, .1)
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {
    background-color: #ff4081;
    color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {
    color: #fff;
    opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element {
    background: rgba(255, 255, 255, .1)
}

.mat-table {
    background: #fff
}

.mat-table tbody,
.mat-table tfoot,
.mat-table thead,
.mat-table-sticky,
[mat-footer-row],
[mat-header-row],
[mat-row],
mat-footer-row,
mat-header-row,
mat-row {
    background: inherit
}

mat-footer-row,
mat-header-row,
mat-row,
td.mat-cell,
td.mat-footer-cell,
th.mat-header-cell {
    border-bottom-color: rgba(0, 0, 0, .12)
}

.mat-header-cell {
    color: rgba(0, 0, 0, .54)
}

.mat-cell,
.mat-footer-cell {
    color: rgba(0, 0, 0, .87)
}

.mat-calendar-arrow {
    border-top-color: rgba(0, 0, 0, .54)
}

.mat-datepicker-content .mat-calendar-next-button,
.mat-datepicker-content .mat-calendar-previous-button,
.mat-datepicker-toggle {
    color: rgba(0, 0, 0, .54)
}

.mat-calendar-table-header {
    color: rgba(0, 0, 0, .38)
}

.mat-calendar-table-header-divider::after {
    background: rgba(0, 0, 0, .12)
}

.mat-calendar-body-label {
    color: rgba(0, 0, 0, .54)
}

.mat-calendar-body-cell-content {
    color: rgba(0, 0, 0, .87);
    border-color: transparent
}

.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    color: rgba(0, 0, 0, .38)
}

.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    background-color: rgba(0, 0, 0, .04)
}

.mat-calendar-body-today:not(.mat-calendar-body-selected) {
    border-color: rgba(0, 0, 0, .38)
}

.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected) {
    border-color: rgba(0, 0, 0, .18)
}

.mat-calendar-body-selected {
    background-color: #3f51b5;
    color: #fff
}

.mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: rgba(63, 81, 181, .4)
}

.mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
    background-color: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-selected {
    background-color: #ff4081;
    color: #fff
}

.mat-datepicker-content.mat-accent .mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: rgba(255, 64, 129, .4)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content.mat-warn .mat-calendar-body-selected {
    background-color: #f44336;
    color: #fff
}

.mat-datepicker-content.mat-warn .mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: rgba(244, 67, 54, .4)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content-touch {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-datepicker-toggle-active {
    color: #3f51b5
}

.mat-datepicker-toggle-active.mat-accent {
    color: #ff4081
}

.mat-datepicker-toggle-active.mat-warn {
    color: #f44336
}

.mat-dialog-container {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-divider {
    border-top-color: rgba(0, 0, 0, .12)
}

.mat-divider-vertical {
    border-right-color: rgba(0, 0, 0, .12)
}

.mat-expansion-panel {
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-expansion-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-action-row {
    border-top-color: rgba(0, 0, 0, .12)
}

.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused,
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
    background: rgba(0, 0, 0, .04)
}

@media (hover:none) {
    .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
        background: #fff
    }
}

.mat-expansion-panel-header-title {
    color: rgba(0, 0, 0, .87)
}

.mat-expansion-indicator::after,
.mat-expansion-panel-header-description {
    color: rgba(0, 0, 0, .54)
}

.mat-expansion-panel-header[aria-disabled=true] {
    color: rgba(0, 0, 0, .26)
}

.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description,
.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title {
    color: inherit
}

.mat-form-field-label,
.mat-hint {
    color: rgba(0, 0, 0, .6)
}

.mat-form-field.mat-focused .mat-form-field-label {
    color: #3f51b5
}

.mat-form-field.mat-focused .mat-form-field-label.mat-accent {
    color: #ff4081
}

.mat-form-field.mat-focused .mat-form-field-label.mat-warn {
    color: #f44336
}

.mat-focused .mat-form-field-required-marker {
    color: #ff4081
}

.mat-form-field-ripple {
    background-color: rgba(0, 0, 0, .87)
}

.mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: #3f51b5
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
    background-color: #ff4081
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {
    background-color: #f44336
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after {
    color: #3f51b5
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix::after {
    color: #ff4081
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix::after,
.mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker,
.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent {
    color: #f44336
}

.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,
.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {
    background-color: #f44336
}

.mat-error {
    color: #f44336
}

.mat-form-field-appearance-legacy .mat-form-field-label,
.mat-form-field-appearance-legacy .mat-hint {
    color: rgba(0, 0, 0, .54)
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
    bottom: 1.25em;
    background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0);
    background-size: 4px 100%;
    background-repeat: repeat-x
}

.mat-form-field-appearance-standard .mat-form-field-underline {
    background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0);
    background-size: 4px 100%;
    background-repeat: repeat-x
}

.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: rgba(0, 0, 0, .04)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
    background-color: rgba(0, 0, 0, .02)
}

.mat-form-field-appearance-fill .mat-form-field-underline::before {
    background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {
    color: rgba(0, 0, 0, .38)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before {
    background-color: transparent
}

.mat-form-field-appearance-outline .mat-form-field-outline {
    color: rgba(0, 0, 0, .12)
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: rgba(0, 0, 0, .87)
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: #3f51b5
}

.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {
    color: #ff4081
}

.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick,
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: #f44336
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
    color: rgba(0, 0, 0, .38)
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
    color: rgba(0, 0, 0, .06)
}

.mat-icon.mat-primary {
    color: #3f51b5
}

.mat-icon.mat-accent {
    color: #ff4081
}

.mat-icon.mat-warn {
    color: #f44336
}

.mat-form-field-type-mat-native-select .mat-form-field-infix::after {
    color: rgba(0, 0, 0, .54)
}

.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after,
.mat-input-element:disabled {
    color: rgba(0, 0, 0, .38)
}

.mat-input-element {
    caret-color: #3f51b5
}

.mat-input-element::-ms-input-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::-moz-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element:-ms-input-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-accent .mat-input-element {
    caret-color: #ff4081
}

.mat-form-field-invalid .mat-input-element,
.mat-warn .mat-input-element {
    caret-color: #f44336
}

.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {
    color: #f44336
}

.mat-list-base .mat-list-item,
.mat-list-base .mat-list-option {
    color: rgba(0, 0, 0, .87)
}

.mat-list-base .mat-subheader {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, .54)
}

.mat-list-item-disabled {
    background-color: #eee
}

.mat-list-option:focus,
.mat-list-option:hover,
.mat-nav-list .mat-list-item:focus,
.mat-nav-list .mat-list-item:hover {
    background: rgba(0, 0, 0, .04)
}

.mat-menu-panel {
    background: #fff
}

.mat-menu-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-menu-item {
    background: 0 0;
    color: rgba(0, 0, 0, .87)
}

.mat-menu-item[disabled],
.mat-menu-item[disabled]::after {
    color: rgba(0, 0, 0, .38)
}

.mat-menu-item .mat-icon-no-color,
.mat-menu-item-submenu-trigger::after {
    color: rgba(0, 0, 0, .54)
}

.mat-menu-item-highlighted:not([disabled]),
.mat-menu-item.cdk-keyboard-focused:not([disabled]),
.mat-menu-item.cdk-program-focused:not([disabled]),
.mat-menu-item:hover:not([disabled]) {
    background: rgba(0, 0, 0, .04)
}

.mat-paginator {
    background: #fff
}

.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
    color: rgba(0, 0, 0, .54)
}

.mat-paginator-decrement,
.mat-paginator-increment {
    border-top: 2px solid rgba(0, 0, 0, .54);
    border-right: 2px solid rgba(0, 0, 0, .54)
}

.mat-paginator-first,
.mat-paginator-last {
    border-top: 2px solid rgba(0, 0, 0, .54)
}

.mat-icon-button[disabled] .mat-paginator-decrement,
.mat-icon-button[disabled] .mat-paginator-first,
.mat-icon-button[disabled] .mat-paginator-increment,
.mat-icon-button[disabled] .mat-paginator-last {
    border-color: rgba(0, 0, 0, .38)
}

.mat-progress-bar-background {
    fill: #c5cae9
}

.mat-progress-bar-buffer {
    background-color: #c5cae9
}

.mat-progress-bar-fill::after {
    background-color: #3f51b5
}

.mat-progress-bar.mat-accent .mat-progress-bar-background {
    fill: #ff80ab
}

.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
    background-color: #ff80ab
}

.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
    background-color: #ff4081
}

.mat-progress-bar.mat-warn .mat-progress-bar-background {
    fill: #ffcdd2
}

.mat-progress-bar.mat-warn .mat-progress-bar-buffer {
    background-color: #ffcdd2
}

.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
    background-color: #f44336
}

.mat-progress-spinner circle,
.mat-spinner circle {
    stroke: #3f51b5
}

.mat-progress-spinner.mat-accent circle,
.mat-spinner.mat-accent circle {
    stroke: #ff4081
}

.mat-progress-spinner.mat-warn circle,
.mat-spinner.mat-warn circle {
    stroke: #f44336
}

.mat-radio-outer-circle {
    border-color: rgba(0, 0, 0, .54)
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
    border-color: #3f51b5
}

.mat-radio-button.mat-primary .mat-radio-inner-circle,
.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
    background-color: #3f51b5
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: #ff4081
}

.mat-radio-button.mat-accent .mat-radio-inner-circle,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
    background-color: #ff4081
}

.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {
    border-color: #f44336
}

.mat-radio-button.mat-warn .mat-radio-inner-circle,
.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-warn:active .mat-radio-persistent-ripple {
    background-color: #f44336
}

.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle,
.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle {
    border-color: rgba(0, 0, 0, .38)
}

.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle,
.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element {
    background-color: rgba(0, 0, 0, .38)
}

.mat-radio-button.mat-radio-disabled .mat-radio-label-content {
    color: rgba(0, 0, 0, .38)
}

.mat-radio-button .mat-ripple-element {
    background-color: #000
}

.mat-select-value {
    color: rgba(0, 0, 0, .87)
}

.mat-select-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-select-disabled .mat-select-value {
    color: rgba(0, 0, 0, .38)
}

.mat-select-arrow {
    color: rgba(0, 0, 0, .54)
}

.mat-select-panel {
    background: #fff
}

.mat-select-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
    background: rgba(0, 0, 0, .12)
}

.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    color: #3f51b5
}

.mat-form-field.mat-focused.mat-accent .mat-select-arrow {
    color: #ff4081
}

.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow,
.mat-form-field.mat-focused.mat-warn .mat-select-arrow {
    color: #f44336
}

.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
    color: rgba(0, 0, 0, .38)
}

.mat-drawer-container {
    background-color: #fafafa;
    color: rgba(0, 0, 0, .87)
}

.mat-drawer {
    background-color: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-drawer.mat-drawer-push {
    background-color: #fff
}

.mat-drawer:not(.mat-drawer-side) {
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
}

.mat-drawer-side {
    border-right: 1px solid rgba(0, 0, 0, .12)
}

.mat-drawer-side.mat-drawer-end,
[dir=rtl] .mat-drawer-side {
    border-left: 1px solid rgba(0, 0, 0, .12);
    border-right: none
}

[dir=rtl] .mat-drawer-side.mat-drawer-end {
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, .12)
}

.mat-drawer-backdrop.mat-drawer-shown {
    background-color: rgba(0, 0, 0, .6)
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #ff4081
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: rgba(255, 64, 129, .54)
}

.mat-slide-toggle.mat-checked .mat-ripple-element {
    background-color: #ff4081
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
    background-color: #3f51b5
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
    background-color: rgba(63, 81, 181, .54)
}

.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {
    background-color: #3f51b5
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {
    background-color: #f44336
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {
    background-color: rgba(244, 67, 54, .54)
}

.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element {
    background-color: #f44336
}

.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {
    background-color: #000
}

.mat-slide-toggle-thumb {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    background-color: #fafafa
}

.mat-slide-toggle-bar {
    background-color: rgba(0, 0, 0, .38)
}

.mat-slider-track-background {
    background-color: rgba(0, 0, 0, .26)
}

.mat-primary .mat-slider-thumb,
.mat-primary .mat-slider-thumb-label,
.mat-primary .mat-slider-track-fill {
    background-color: #3f51b5
}

.mat-primary .mat-slider-thumb-label-text {
    color: #fff
}

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill {
    background-color: #ff4081
}

.mat-accent .mat-slider-thumb-label-text {
    color: #fff
}

.mat-warn .mat-slider-thumb,
.mat-warn .mat-slider-thumb-label,
.mat-warn .mat-slider-track-fill {
    background-color: #f44336
}

.mat-warn .mat-slider-thumb-label-text {
    color: #fff
}

.mat-slider-focus-ring {
    background-color: rgba(255, 64, 129, .2)
}

.cdk-focused .mat-slider-track-background,
.mat-slider:hover .mat-slider-track-background {
    background-color: rgba(0, 0, 0, .38)
}

.mat-slider-disabled .mat-slider-thumb,
.mat-slider-disabled .mat-slider-track-background,
.mat-slider-disabled .mat-slider-track-fill,
.mat-slider-disabled:hover .mat-slider-track-background {
    background-color: rgba(0, 0, 0, .26)
}

.mat-slider-min-value .mat-slider-focus-ring {
    background-color: rgba(0, 0, 0, .12)
}

.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
    background-color: rgba(0, 0, 0, .87)
}

.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
    background-color: rgba(0, 0, 0, .26)
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
    border-color: rgba(0, 0, 0, .26);
    background-color: transparent
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb,
.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb {
    border-color: rgba(0, 0, 0, .38)
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb,
.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb {
    border-color: rgba(0, 0, 0, .26)
}

.mat-slider-has-ticks .mat-slider-wrapper::after {
    border-color: rgba(0, 0, 0, .7)
}

.mat-slider-horizontal .mat-slider-ticks {
    background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent);
    background-image: -moz-repeating-linear-gradient(.0001deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-slider-vertical .mat-slider-ticks {
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-step-header.cdk-keyboard-focused,
.mat-step-header.cdk-program-focused,
.mat-step-header:hover {
    background-color: rgba(0, 0, 0, .04)
}

@media (hover:none) {
    .mat-step-header:hover {
        background: 0 0
    }
}

.mat-step-header .mat-step-label,
.mat-step-header .mat-step-optional {
    color: rgba(0, 0, 0, .54)
}

.mat-step-header .mat-step-icon {
    background-color: rgba(0, 0, 0, .54);
    color: #fff
}

.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
    background-color: #3f51b5;
    color: #fff
}

.mat-step-header .mat-step-icon-state-error {
    background-color: transparent;
    color: #f44336
}

.mat-step-header .mat-step-label.mat-step-label-active {
    color: rgba(0, 0, 0, .87)
}

.mat-step-header .mat-step-label.mat-step-label-error {
    color: #f44336
}

.mat-stepper-horizontal,
.mat-stepper-vertical {
    background-color: #fff
}

.mat-stepper-vertical-line::before {
    border-left-color: rgba(0, 0, 0, .12)
}

.mat-horizontal-stepper-header::after,
.mat-horizontal-stepper-header::before,
.mat-stepper-horizontal-line {
    border-top-color: rgba(0, 0, 0, .12)
}

.mat-sort-header-arrow {
    color: #757575
}

.mat-tab-header,
.mat-tab-nav-bar {
    border-bottom: 1px solid rgba(0, 0, 0, .12)
}

.mat-tab-group-inverted-header .mat-tab-header,
.mat-tab-group-inverted-header .mat-tab-nav-bar {
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: none
}

.mat-tab-label,
.mat-tab-link {
    color: rgba(0, 0, 0, .87)
}

.mat-tab-label.mat-tab-disabled,
.mat-tab-link.mat-tab-disabled {
    color: rgba(0, 0, 0, .38)
}

.mat-tab-header-pagination-chevron {
    border-color: rgba(0, 0, 0, .87)
}

.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(0, 0, 0, .38)
}

.mat-tab-group[class*=mat-background-] .mat-tab-header,
.mat-tab-nav-bar[class*=mat-background-] {
    border-bottom: none;
    border-top: none
}

.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
    background-color: rgba(197, 202, 233, .3)
}

.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #3f51b5
}

.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar {
    background-color: #fff
}

.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
    background-color: rgba(255, 128, 171, .3)
}

.mat-tab-group.mat-accent .mat-ink-bar,
.mat-tab-nav-bar.mat-accent .mat-ink-bar {
    background-color: #ff4081
}

.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar,
.mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar {
    background-color: #fff
}

.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
    background-color: rgba(255, 205, 210, .3)
}

.mat-tab-group.mat-warn .mat-ink-bar,
.mat-tab-nav-bar.mat-warn .mat-ink-bar {
    background-color: #f44336
}

.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar,
.mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar {
    background-color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
    background-color: rgba(197, 202, 233, .3)
}

.mat-tab-group.mat-background-primary .mat-tab-header,
.mat-tab-group.mat-background-primary .mat-tab-links,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header,
.mat-tab-nav-bar.mat-background-primary .mat-tab-links {
    background-color: #3f51b5
}

.mat-tab-group.mat-background-primary .mat-tab-label,
.mat-tab-group.mat-background-primary .mat-tab-link,
.mat-tab-nav-bar.mat-background-primary .mat-tab-label,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link {
    color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled {
    color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {
    border-color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-primary .mat-ripple-element,
.mat-tab-nav-bar.mat-background-primary .mat-ripple-element {
    background-color: rgba(255, 255, 255, .12)
}

.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
    background-color: rgba(255, 128, 171, .3)
}

.mat-tab-group.mat-background-accent .mat-tab-header,
.mat-tab-group.mat-background-accent .mat-tab-links,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header,
.mat-tab-nav-bar.mat-background-accent .mat-tab-links {
    background-color: #ff4081
}

.mat-tab-group.mat-background-accent .mat-tab-label,
.mat-tab-group.mat-background-accent .mat-tab-link,
.mat-tab-nav-bar.mat-background-accent .mat-tab-label,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link {
    color: #fff
}

.mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled {
    color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {
    border-color: #fff
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-accent .mat-ripple-element,
.mat-tab-nav-bar.mat-background-accent .mat-ripple-element {
    background-color: rgba(255, 255, 255, .12)
}

.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
    background-color: rgba(255, 205, 210, .3)
}

.mat-tab-group.mat-background-warn .mat-tab-header,
.mat-tab-group.mat-background-warn .mat-tab-links,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header,
.mat-tab-nav-bar.mat-background-warn .mat-tab-links {
    background-color: #f44336
}

.mat-tab-group.mat-background-warn .mat-tab-label,
.mat-tab-group.mat-background-warn .mat-tab-link,
.mat-tab-nav-bar.mat-background-warn .mat-tab-label,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link {
    color: #fff
}

.mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled {
    color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {
    border-color: #fff
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-warn .mat-ripple-element,
.mat-tab-nav-bar.mat-background-warn .mat-ripple-element {
    background-color: rgba(255, 255, 255, .12)
}

.mat-toolbar {
    background: #f5f5f5;
    color: rgba(0, 0, 0, .87)
}

.mat-toolbar.mat-primary {
    background: #3f51b5;
    color: #fff
}

.mat-toolbar.mat-accent {
    background: #ff4081;
    color: #fff
}

.mat-toolbar.mat-warn {
    background: #f44336;
    color: #fff
}

.mat-toolbar .mat-focused .mat-form-field-ripple,
.mat-toolbar .mat-form-field-ripple,
.mat-toolbar .mat-form-field-underline {
    background-color: currentColor
}

.mat-toolbar .mat-focused .mat-form-field-label,
.mat-toolbar .mat-form-field-label,
.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow,
.mat-toolbar .mat-select-arrow,
.mat-toolbar .mat-select-value {
    color: inherit
}

.mat-toolbar .mat-input-element {
    caret-color: currentColor
}

.mat-tooltip {
    background: rgba(97, 97, 97, .9)
}

.mat-tree {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    background: #fff
}

.mat-nested-tree-node,
.mat-tree-node {
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, .87)
}

.mat-snack-bar-container {
    color: rgba(255, 255, 255, .7);
    background: #323232;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.mat-simple-snackbar-action {
    color: #ff4081
}

*,
body,
html {
    padding: 0;
    margin: 0;
    font-family: Poppins, sans-serif;
    box-sizing: border-box
}

body,
html {
    width: 100%
}

li {
    list-style: none
}

.common_loader_style,
.loader_main,
.loader_main .loader_text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.loader_main {
    z-index: 999999
}

.loader_main:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fdb913;
    opacity: .9
}

.loader_main .loader_text {
    flex-direction: column;
    justify-content: center;
    z-index: 99999
}

.loader_main .loader_text h4 {
    font-size: 45px;
    display: flex;
    line-height: 45px;
    flex-direction: column;
    font-weight: 500;
    align-items: center;
    color: #fff
}

@media screen and (max-width:479px) {
    .loader_main .loader_text h4 {
        font-size: 35px;
        line-height: 38px
    }
}

.loader_main .loader_text h4>span:first-child {
    margin-bottom: 28px
}

.loader_main .loader_text h4>span:last-child {
    font-size: 55px
}

@media screen and (max-width:1024px) {
    .loader_main .loader_text h4>span:last-child {
        font-size: 40px;
        text-align: center
    }
}

@media screen and (max-width:1024px) and (max-width:768px) {
    .loader_main .loader_text h4>span:last-child {
        font-size: 35px
    }
}

.loader_main img {
    width: 180px
}

.loader_main p {
    font-size: 22px;
    margin-top: 15px;
    color: #fdb913;
    display: none
}

.location_single {
    width: 40px;
    margin-right: 15px
}

.login-container {
    width: 100%;
    height: 100%
}

.select_inner select+img+span {
    display: none
}

.login_content {
    min-height: 100vh;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 3fr 2fr;
    grid-template-columns: 3fr 2fr
}

.login_content>div {
    position: relative
}

.login_left_content {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex
}

.login_left_inner {
    width: 595px;
    color: #fff;
    padding-top: 110px;
    line-height: 1.5;
    padding-left: 110px
}

.login_left_inner img {
    width: 160px
}

.login_left_inner>h2 {
    padding-top: 20px;
    padding-bottom: 25px;
    font-size: 30px
}

.login_left_inner p {
    font-size: 18px;
    font-weight: 100;
    opacity: .7;
    line-height: 1.5
}

.login_right_content {
    display: flex;
    padding-left: 100px;
    height: 100%;
    padding-top: 100px
}

@media screen and (max-width:1200px) {
    .login_right_content {
        padding-left: 80px
    }
}

@media screen and (max-width:1200px) and (max-width:1024px) {
    .login_right_content {
        padding-left: 50px !important
    }
}

@media screen and (max-width:1200px) and (max-width:1024px) and (max-width:768px) {
    .login_right_content {
        padding-left: 0 !important
    }
}

.login_right_inner {
    width: 400px
}

.login_right_inner .login_tabs {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.login_right_inner .login_tabs.forgot_tabs {
    justify-content: center
}

.login_right_inner .login_tabs span {
    font-size: 24px;
    color: #ccc;
    position: relative;
    cursor: pointer;
    font-weight: 600
}

.login_right_inner .login_tabs span.active {
    font-size: 34px;
    font-weight: 500;
    color: #000
}

.login_right_inner .login_tabs span.active:before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #0091d3
}

.login_right_inner form {
    margin-top: 40px
}

.login_right_inner form .input-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative
}

.login_right_inner form .input-wrapper a.forgot_pass {
    background-color: transparent;
    border: none;
    font-size: inherit;
    text-align: inherit;
    color: #000;
    height: auto;
    line-height: inherit;
    width: 100%;
    display: flex
}

.login_right_inner form .resend_code_wrapper {
    font-size: 13px
}

.login_right_inner form .resend_code_wrapper a {
    color: #fdb913
}

.input-wrapper .invalid-feedback {
    position: absolute;
    bottom: -15px;
    width: 100%;
    right: 10px;
    font-size: 13px;
    color: #fbb445;
    text-align: right
}

my-date-picker {
    width: 100%;
    margin-top: -6px
}

my-date-picker .mydp {
    border: none
}

my-date-picker input {
    height: 36px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(204, 204, 204, .4) !important;
    font-family: Exo, sans-serif !important
}

my-date-picker .btnpicker {
    margin-right: 12px;
    margin-top: 2px
}

.btnpicker.btnpickerenabled,
btnclear.btnclearenabled {
    background: 0 0 !important
}

.contact_main_wrapper_section my-date-picker input {
    height: 35px !important;
    font-family: Exo, sans-serif !important;
    border-radius: 0 !important;
    font-size: 18px !important
}

.contact_main_wrapper_section my-date-picker .btnclear,
.contact_main_wrapper_section my-date-picker .btnpicker {
    background: 0 0 !important
}

.contact_main_wrapper_section .submit_btn_container {
    width: 100%
}

.login_right_inner form .input-wrapper>span:first-child {
    height: 52px;
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-right: 0;
    width: 58px;
    justify-content: center
}

.login_right_inner form .input-wrapper>span:first-child img {
    width: 45%
}

.login_right_inner form .input-wrapper>span:first-child img.phone_icon {
    width: 33%
}

.login_right_inner form .input-wrapper input {
    height: 52px;
    color: #66676c;
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 0 40px 0 15px;
    font-size: 16px;
    outline: 0;
    font-weight: 400;
    opacity: .7
}

.login_right_inner form .input-wrapper .right_icon {
    position: absolute;
    right: 12px;
    top: 16px;
    height: 22px;
    width: 22px;
    cursor: pointer
}

.login_right_inner form .input-wrapper .right_icon img {
    width: 80%;
    opacity: .7
}

.login_right_inner form .input-wrapper>button {
    background-color: #fbb445;
    border: none;
    font-size: 18px;
    text-align: center;
    width: 100%;
    color: #fff;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    outline: 0
}

.login_right_inner form.login_form .input-wrapper button {
    width: 50%
}

.login_form {
    position: relative
}

.login_form .error_message_invalid {
    color: #db2626;
    position: absolute;
    top: -30px;
    right: 0
}

.login_right_inner form .input-wrapper.submit_wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.login_right_inner form .input-wrapper.forgot_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.login_right_inner form .input-wrapper.forgot_content span {
    font-size: 16px;
    text-align: center;
    color: #66676c;
    width: 100%;
    border: none
}

.login-footer-right {
    position: absolute;
    bottom: 30px;
    font-size: 14px;
    color: #3d3d3d;
    padding-left: 60px
}

.login-footer-right a {
    color: #fdb913
}

.forgot_main_wrapper {
    position: relative
}

.forgot_main_wrapper .close_icon {
    font-size: 26px;
    position: absolute;
    right: -60px;
    top: -150px;
    cursor: pointer;
    padding: 20px
}

.home_header {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 50px
}

.logo_wrapper {
    margin-top: 10px;
    display: flex;
    position: relative;
    min-height: 50px
}

.logo_wrapper img {
    max-width: 220px;
    max-height: 50px;
    width: auto;
    height: auto;
    position: relative;
    cursor: pointer
}

.logo_wrapper a {
    display: flex;
    align-items: center
}

@media screen and (max-width:479px) {
    .logo_wrapper {
        margin-top: 0
    }
}

.home_banner {
    width: 100%;
    color: #fff;
    z-index: 1;
    top: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around
}

.home_banner.onscroll {
    display: none
}

.home_banner:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .9
}

.home_banner>h2 {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 400
}

.home_banner>h2 .location_icon {
    margin-right: 20px;
    width: 20px
}

.home_banner>h2 .drop_icon {
    margin-left: 20px
}

.home_banner .banner_content {
    position: relative;
    display: flex;
    margin-top: 0;
    padding-bottom: 100px
}

.home_banner .banner_content>div {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    height: 340px
}

@media screen and (max-width:1440px) {
    .home_banner .banner_content>div {
        height: 280px
    }
}

.home_banner .banner_content>div::before {
    height: 60px;
    width: 3px;
    background-color: #fff;
    opacity: .7;
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.home_banner .banner_content>div:nth-of-type(3)::before {
    display: none
}

.banner_content_inner h2 {
    font-size: 28px;
    margin-bottom: 15px;
    text-transform: none;
    font-weight: 500
}

.banner_content_inner p {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.5;
    max-width: 210px
}

.banner_content_inner a {
    font-weight: 600;
    font-size: 20px;
    padding: 0 40px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px
}

.banner_content_inner .amount {
    font-size: 32px;
    font-weight: 500
}

.banner_content_inner .overdue_amount {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px
}

.top_nav {
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 10px 40px;
    height: 80px;
    align-items: center
}

@media screen and (max-width:768px) {
    .home_banner .banner_content {
        padding-bottom: 0
    }
    .home_banner .banner_content>div {
        height: auto
    }
    .top_nav {
        padding: 15px 30px;
        height: auto
    }
    .myusage_wrapper {
        width: 750px
    }
}

.navigation_wrapper {
    display: flex;
    align-items: center;
    margin-top: 10px
}

.navigation_wrapper ul {
    display: flex
}

.navigation_wrapper ul li a {
    display: block;
    padding: 20px 45px;
    position: relative;
    font-size: 18px;
    font-weight: 500
}

.navigation_wrapper ul li a.active {
    color: #2f2b75;
    font-weight: 500
}

.navigation_wrapper ul li a.active:before {
    position: absolute;
    content: "";
    height: 2px;
    background-color: #2f2b75;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.navigation_wrapper ul li.logout_btn {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer
}

.navigation_wrapper ul li.logout_btn>span {
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 500
}

.navigation_wrapper ul li.logout_btn>span img {
    height: 22px
}

@media screen and (max-width:1024px) {
    .navigation_wrapper ul {
        padding-top: 100px
    }
    .navigation_wrapper ul li a.active {
        color: #fff
    }
    .navigation_wrapper ul li.logout_btn>span {
        padding: 15px 30px;
        font-size: 22px;
        color: #fdb913;
        justify-content: center;
        width: 100%
    }
    .navigation_wrapper ul li.logout_btn>span img {
        display: none
    }
}

.navigation_wrapper>span {
    display: flex;
    align-items: center;
    color: #d7e2ec;
    cursor: pointer;
    padding: 20px;
    position: relative
}

.navigation_wrapper>span img {
    width: 26px
}

.navigation_wrapper span>img {
    margin-right: 10px
}

.navigation_wrapper span>span {
    display: flex;
    align-items: center
}

.navigation_wrapper span>span>img {
    margin-left: 10px
}

.grey_bg,
.white_bg {
    background-color: #fff
}

.myusage_wrapper {
    padding: 3% 7%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 7fr 3fr
}

@media screen and (max-width:768px) {
    .usage_chart {
        overflow: hidden;
        overflow-x: scroll;
        background-color: #fff
    }
    .usage_chart::-webkit-scrollbar {
        height: 7px
    }
    .usage_chart::-webkit-scrollbar-track {
        border-radius: 10px;
        webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
    }
    .usage_chart::-webkit-scrollbar-thumb {
        background-color: #fdb913;
        webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5)
    }
}

.myusage_graph h4 {
    color: #2f2b75;
    font-size: 22px;
    padding: 0 10px 25px;
    margin-bottom: 50px;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(0, 0, 0, .05);
    font-weight: 600;
    text-transform: uppercase
}

.myusage_graph h4>img {
    margin-right: 15px;
    width: 30px;
    height: 30px
}

.myusage_content {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 7%
}

.myusage_content div {
    line-height: 1.8;
    font-size: 22px;
    text-align: center;
    font-weight: 600
}

.myusage_content div>span {
    font-size: 32px;
    color: #000;
    font-weight: 600 !important
}

.myusage_content div>span.nsr_date {
    font-size: 20px;
    font-weight: 500 !important
}

.myusage_content div>span img {
    width: 20px
}

footer {
    background: #2f2b75;
    position: relative;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

footer p {
    font-size: 16px;
    color: #fff;
    padding: 25px;
    text-align: center
}

footer .footer_links {
    display: none
}

@media screen and (max-width:479px) {
    footer .footer_links {
        display: flex;
        width: 100%
    }
    footer .footer_links ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 25px
    }
    footer .footer_links ul li {
        display: flex
    }
    footer .footer_links ul li a {
        font-size: 18px;
        padding: 30px;
        color: #fff
    }
    footer .footer_links ul li a.active {
        color: #2f2b75;
        font-weight: 600
    }
}

.promotion_invoice_wrapper {
    padding: 3% 7%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px
}

.promotion_invoice_wrapper.no_promo {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr
}

.promotion_wrapper h4 {
    font-size: 22px;
    color: #2f2b75;
    display: flex;
    align-items: center;
    font-weight: 600;
    text-transform: uppercase
}

.promotion_wrapper h4 img {
    width: 45px;
    margin-right: 15px
}

.promotion_wrapper .slider {
    margin-top: 40px;
    width: 100%;
    max-width: 700px
}

.promotion_wrapper .slider .item {
    position: relative;
    padding-bottom: 30px
}

.promotion_wrapper .slider .item>img {
    width: 100%;
    max-width: 700px;
    border-radius: 20px
}

.slick-dots>li>button {
    margin-right: 10px !important
}

.slick-active button {
    width: 0 !important
}

.slick-dots>li>button::before {
    width: 10px !important;
    height: 10px !important
}

.slick-dots>li.slick-active button::before {
    width: 16px !important;
    height: 10px !important
}

.recent_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
}

table {
    border-top: 2px solid rgba(235, 236, 238, .5);
    width: 100%;
    border-spacing: 0;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0
}

table tbody tr:nth-of-type(odd) {
    background-color: #f1f2f2
}

table .overdue {
    color: #2f2b75
}

table .paid {
    color: #000
}

table tbody td {
    font-weight: 400
}

table td,
table th {
    text-align: left;
    padding: 16px;
    font-size: 14px;
    font-weight: 500
}

table th {
    color: #2f2b75;
    font-size: 16px
}

.invoice_wrapper .recent_content {
    font-size: 22px;
    color: #2f2b75;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-transform: uppercase
}

.invoice_wrapper .recent_content img {
    width: 45px;
    margin-right: 15px
}

.invoice_wrapper .view_content {
    font-size: 18px;
    color: #2f2b75;
    cursor: pointer;
    font-weight: 500
}

.recent_wrapper {
    display: flex;
    align-items: center;
    padding: 25px 10px 40px
}

.padding_top_30 {
    padding-top: 30px !important;
}

.recent_wrapper .widget_inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: 250px;
    align-items: center
}

.recent_wrapper .widget_inner .widget_single {
    width: 60px
}

.recent_wrapper .widget_inner .widget_title {
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #2f2b75 !important;
    padding: 0 10px
}

.recent_wrapper .float-right {
    margin-left: auto
}

.recent_wrapper .info_container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: left;
    justify-content: space-between
}

.recent_wrapper .info_container.padding_top_50 {
    padding-top: 50px
}

.recent_wrapper .info_container .info_text {
    margin-left: 36.5%;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
    color: #2f2b75
}

@media screen and (max-width:767px) {
    .recent_wrapper .info_container .info_text {
        text-align: left
    }
}

.widget_progressbar_wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.widget_progressbar_wrapper .widget_progressbar_column {
    flex: 3;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    align-items: center
}

.widget_progressbar_wrapper .widget_progressbar_column .widget_progressbar {
    width: 100%
}

.widget_progressbar_wrapper .widget_progressbar_column .widget_progressbar.padding_bottom_80 {
    padding-bottom: 80px
}

.widget_progressbar_wrapper .widget_progressbar_column.empty_column {
    flex: 1
}

.widget_progressbar_wrapper .widget_progressbar_column.empty_column.right_border {
    border-right: 2px solid rgba(0, 0, 0, .05)
}

.widget_progressbar_wrapper .widget_progressbar_column .bar_title,
.widget_progressbar_wrapper .widget_progressbar_column .column_title {
    color: #2f2b75
}

.widget_progressbar_wrapper .widget_progressbar_column .column_title_icon {
    width: 14px;
    height: 14px
}

.widget_progressbar_wrapper .widget_progressbar_column .bar_title {
    margin-right: auto
}

.widget_progressbar_wrapper .widget_progressbar_column table {
    border: none
}

.widget_progressbar_wrapper .widget_progressbar_column table td {
    text-align: center
}

.widget_progressbar_wrapper .widget_progressbar_column .percentage_row {
    background-color: rgba(0, 0, 0, 0) !important;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.widget_progressbar_wrapper .widget_progressbar_column .percentage_row div {
    text-align: center
}

.widget_progressbar_wrapper .widget_progressbar_column .percentage_row .display-bottom {
    position: absolute;
    margin-top: 10.5%
}

.widget_progressbar_wrapper .widget_progressbar_column .color_row {
    display: flex;
    flex-wrap: wrap;
    height: 27px
}

.widget_progressbar_wrapper .widget_progressbar_column .color_row .color_1 {
    background-color: #f1aa1e
}

.widget_progressbar_wrapper .widget_progressbar_column .color_row .color_2 {
    background-color: #d2451e
}

.widget_progressbar_wrapper .widget_progressbar_column .color_row .color_3 {
    background-color: #2f2b75
}

.widget_progressbar_wrapper .widget_progressbar_column .color_row .color_empty {
    background-color: gray;
    text-align: center
}

.desktop_view .tooltip {
    position: relative;
    display: inline-block
}

.desktop_view .tooltip .tooltiptext {
    display: flex;
    align-items: center;
    visibility: hidden;
    width: 300px;
    height: 80px;
    background-color: #2f2b75;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px;
    position: absolute;
    z-index: 2 !important;
    left: -80%;
    margin-left: -60px;
    font-size: 14px;
    line-height: 21px;
    top: 100%
}

.tooltip {
    opacity: 100 !important;
    z-index: unset !important;
}

.desktop_view .tooltip .tooltiptext::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #2f2b75
}

.desktop_view .tooltip:hover .tooltiptext {
    visibility: visible
}

.mobile_view .tooltip {
    position: relative;
    display: inline-block
}

.mobile_view .tooltip .tooltiptext {
    display: flex;
    align-items: center;
    visibility: hidden;
    width: 300px;
    height: 80px;
    background-color: #2f2b75;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px;
    position: absolute;
    z-index: 2 !important;
    left: -80%;
    margin-left: -60px;
    font-size: 14px;
    line-height: 21px;
    top: 100%
}

.mobile_view .tooltip .tooltiptext::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #2f2b75
}

.mobile_view .tooltip:active .tooltiptext {
    visibility: visible
}

.mobile_view .widget_inner .tooltiptext {
    left: 80%
}

.item_offers_wrapper {
    position: absolute;
    top: 0;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

.item_offers_wrapper span {
    font-size: 32px;
    color: #fff;
    font-weight: 600
}

.item_offers_wrapper a {
    color: #fcff00;
    font-size: 24px;
    font-weight: 500;
    margin-right: 10px
}

.other_header {
    height: 80px;
    background: url(indigo_home.24c1c67da9f6882e5a65.jpg);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99
}

.other_header:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: 0 0
}

.routing_part {
    margin-top: 80px;
    position: relative;
    min-height: 800px
}

.home_header+.routing_part {
    margin-top: 0
}

.latest_invoice_wrapper,
.manage_account_wrapper {
    padding: 3% 5%
}

.latest_invoice_header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media screen and (max-width:768px) {
    .latest_invoice_header {
        flex-direction: column-reverse;
        align-items: flex-start
    }
    .latest_invoice_header .select_box_main {
        margin-bottom: 30px
    }
}

.latest_invoice_header h2 {
    display: flex;
    align-items: center
}

.latest_invoice_header h2:nth-of-type(1) {
    color: #2f2b75;
    font-size: 28px;
    font-weight: 600
}

.latest_invoice_header h2:nth-of-type(1)>img {
    margin-right: 15px;
    width: 45px
}

.latest_invoice_header h2:nth-of-type(2) {
    font-size: 18px;
    color: #3d3d3d;
    display: flex;
    align-items: center;
    font-weight: 500
}

.latest_invoice_header h2:nth-of-type(2) img:nth-of-type(1) {
    margin-right: 15px
}

.latest_invoice_header h2:nth-of-type(2) img:nth-of-type(2) {
    margin-left: 20px
}

.latest_invoice_inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 7fr 3fr;
    grid-template-columns: 7fr 3fr;
    grid-column-gap: 30px;
    margin-top: 30px
}

.latest_invoice_left {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px 10px;
    padding: 20px
}

.latest_invoice_left>div h2 {
    padding-bottom: 15px;
    color: #3d3d3d
}

.latest_invoice_left>div span {
    font-weight: 400
}

@media screen and (max-width:479px) {
    .latest_invoice_left {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
    .latest_invoice_left>div {
        width: 48%;
        margin-bottom: 35px;
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }
    .latest_invoice_left>div:first-child {
        width: 100%;
        text-align: left
    }
    .latest_invoice_left>div:last-child {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0
    }
    .latest_invoice_left>div:last-child h2 {
        padding-bottom: 30px
    }
    .latest_invoice_left>div:last-child>div {
        width: 100%;
        justify-content: space-between;
        display: flex
    }
    .latest_invoice_left>div:last-child>div a {
        width: 46%;
        margin-right: 0
    }
    .latest_invoice_left>div:last-child>div button {
        margin-right: 0;
        width: 46%
    }
    .latest_invoice_left>div h2 {
        line-height: 1
    }
    .latest_invoice_left>div span {
        font-size: 17px !important
    }
    .recent_invoice_right>div>div {
        padding-left: 0 !important;
        width: 45%
    }
}

.invoice_overdue h2 {
    color: #2f2b75 !important
}

.invoice_overdue .overdue_btns button {
    background-color: #fdb913;
    border: none;
    outline: 0;
    text-align: center;
    padding: 7px 10px;
    color: #fff;
    font-size: 18px;
    cursor: pointer
}

@media screen and (max-width:1280px) {
    .invoice_overdue .overdue_btns button {
        font-size: 15px;
        padding: 7px
    }
}

.invoice_overdue .overdue_btns a {
    background-color: #fdb913;
    border: none;
    outline: 0;
    text-align: center;
    padding: 7px 10px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    margin-right: 15px
}

@media screen and (max-width:1280px) {
    .invoice_overdue .overdue_btns a {
        font-size: 15px;
        padding: 7px;
        border: 1px solid #0255a8
    }
}

.invoice_overdue .overdue_btns button:nth-of-type(1) {
    margin-right: 30px
}

.invoice_overdue .overdue_btns button.overdue_dwnld {
    background-color: #fff;
    border: 1px solid #fdb913;
    color: #fdb913
}

.latest_invoice_inner>div {
    border: 1px solid rgba(204, 204, 204, .4)
}

.latest_invoice_right {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fcfcfc
}

.latest_invoice_right div {
    font-size: 22px;
    line-height: 2;
    font-weight: 500;
    padding-left: 100px;
    position: relative
}

.latest_invoice_right div::before {
    content: "";
    position: absolute;
    left: -40px;
    background-size: contain !important;
    top: 50px;
    width: 80px;
    height: 80px
}

.recent_invoice_wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}

.recent_invoice_left_header {
    margin-bottom: 30px
}

.recent_invoice_right {
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.recent_invoice_right>div>span {
    line-height: 3;
    font-size: 22px;
    text-align: center;
    display: block;
    font-weight: 500
}

.recent_invoice_right>div>span.underline {
    width: 40px;
    text-align: center;
    height: 2px;
    background-color: rgba(61, 61, 61, .2);
    display: inline-block;
    margin: 0 auto 16px
}

.recent_invoice_right>div>div h6 {
    margin-bottom: 10px;
    color: #3d3d3d
}

@media screen and (max-width:479px) {
    .recent_invoice_right>div>span {
        width: 100%;
        margin-bottom: 10px;
        color: #fff
    }
    .recent_invoice_right>div>span.underline {
        display: none
    }
    .recent_invoice_right>div>div h6 {
        color: #fff
    }
}

.recent_invoice_right>div>div h2 {
    margin-bottom: 10px;
    color: #3d3d3d;
    font-weight: 500
}

@media screen and (max-width:479px) {
    .recent_invoice_right>div>div h2 {
        color: #fff
    }
    .recent_invoice_right>div {
        align-items: center;
        display: flex;
        flex-direction: row !important;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between
    }
    .slideshow-container {
        min-height: 245px !important
    }
    .slideshow-container a {
        background-size: contain !important
    }
}

.recent_invoice_left_header h4 {
    padding-bottom: 30px;
    border-bottom: 2px solid #c8ccce;
    color: #2f2b75;
    display: flex;
    align-items: center;
    font-size: 28px;
    margin-bottom: 50px
}

.recent_invoice_left_header h4>img {
    margin-right: 15px;
    width: 45px
}

@media screen and (max-width:479px) {
    .recent_invoice_left_header h4 {
        color: #fff
    }
}

.recent_invoice_left_header>span {
    position: relative
}

.recent_invoice_left_header>span::before {
    content: '';
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwNTM2NjJDQUI2MDExRThBQjU1REJGQThCRDgxQzU0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwNTM2NjJEQUI2MDExRThBQjU1REJGQThCRDgxQzU0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODA1MzY2MkFBQjYwMTFFOEFCNTVEQkZBOEJEODFDNTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODA1MzY2MkJBQjYwMTFFOEFCNTVEQkZBOEJEODFDNTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4zucTaAAAAt0lEQVR42mJkYGCIB2JFBuqD+////1/IBGQIMdAGgM0FWbAMiL9R2fBvUHMZGKEC4tCg4qKS4QuB+CUwiOAWUMsSuOEgDroFlFqCYjguC8i1BMNwfBaQaglWwwlZQKwlOA0nxgJCluA1HGYBEwELQJr34pDbi89wGGAiIoz/kihOsgUUgVELRi2gjwV/aW3BNSA+R2sfbALiFeRUrSwkqL0BxE+A2A+I5YH4FTGaGEElHi0BQIABAN/+Q7L4xdWLAAAAAElFTkSuQmCC);
    background-size: 18px 18px;
    position: absolute;
    top: 10px;
    left: 8px;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat
}

.recent_invoice_left_header>span select {
    padding-left: 30px;
    height: 34px;
    font-size: 16px;
    outline: 0
}

.recent_invoice_left_header>span select option {
    padding: 0
}

.recent_invoice_left>img {
    width: 100%
}

.invoice_history_wrapper {
    padding: 3% 5%
}

.invoice_history_header>span {
    position: relative
}

.invoice_history_header>span::before {
    content: '';
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwNTM2NjJDQUI2MDExRThBQjU1REJGQThCRDgxQzU0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwNTM2NjJEQUI2MDExRThBQjU1REJGQThCRDgxQzU0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODA1MzY2MkFBQjYwMTFFOEFCNTVEQkZBOEJEODFDNTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODA1MzY2MkJBQjYwMTFFOEFCNTVEQkZBOEJEODFDNTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4zucTaAAAAt0lEQVR42mJkYGCIB2JFBuqD+////1/IBGQIMdAGgM0FWbAMiL9R2fBvUHMZGKEC4tCg4qKS4QuB+CUwiOAWUMsSuOEgDroFlFqCYjguC8i1BMNwfBaQaglWwwlZQKwlOA0nxgJCluA1HGYBEwELQJr34pDbi89wGGAiIoz/kihOsgUUgVELRi2gjwV/aW3BNSA+R2sfbALiFeRUrSwkqL0BxE+A2A+I5YH4FTGaGEElHi0BQIABAN/+Q7L4xdWLAAAAAElFTkSuQmCC);
    background-size: 18px 18px;
    position: absolute;
    top: 10px;
    left: 8px;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat
}

.invoice_history_header>span select {
    padding-left: 30px;
    height: 34px;
    font-size: 16px;
    outline: 0
}

.invoice_history_header h4 {
    font-size: 26px;
    color: #2f2b75;
    display: flex;
    align-items: center;
    padding-bottom: 30px;
    padding-left: 10px
}

@media screen and (max-width:479px) {
    .invoice_history_header h4 {
        justify-content: flex-start
    }
}

.invoice_history_header h4>img {
    margin-right: 15px;
    width: 45px
}

.manage_account_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.contact_detail_content .manage_account_header {
    border-bottom: 1px solid rgba(204, 204, 204, .4)
}

.concession_card_content div.concession_card_details,
.concession_card_content div.concession_card_title {
    display: flex;
    align-items: center
}

.concession_card_content div.concession_card_details img,
.concession_card_content div.concession_card_title img {
    width: 45px;
    margin-right: 15px
}

.manage_account_header h2:nth-of-type(1) {
    color: #2f2b75;
    font-size: 28px;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    font-weight: 600
}

.manage_account_header h2:nth-of-type(1)>img {
    width: 45px;
    margin-right: 15px
}

.manage_account_header h2:nth-of-type(2) {
    font-size: 18px;
    color: #3d3d3d;
    display: flex;
    align-items: center;
    font-weight: 500
}

.manage_account_header h2:nth-of-type(2) img:nth-of-type(1) {
    margin-right: 15px
}

.manage_account_header h2:nth-of-type(2) img:nth-of-type(2) {
    margin-left: 20px
}

.manage_account_content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 7fr 3fr;
    grid-template-columns: 7fr 3fr;
    grid-column-gap: 30px;
    margin-top: 30px;
    align-items: start
}

@media screen and (max-width:768px) {
    .manage_account_content {
        margin-top: 0
    }
    .contract_details_wrapper .manage_account_header .save_btn {
        display: flex
    }
}

.manage_account_content>div>div.common_main {
    border: 1px solid rgba(204, 204, 204, .4);
    padding: 20px
}

.manage_account_content>div>div.common_main:last-child {
    margin-top: 30px
}

.manage_account_content .login_info {
    border: 1px solid rgba(204, 204, 204, .4);
    padding: 20px;
    width: 100%;
    margin-bottom: 25px
}

.manage_account_content .manage_account_header {
    border-bottom: 1px solid rgba(204, 204, 204, .4)
}

@media screen and (max-width:479px) {
    .manage_account_content>div.account_details {
        border: none;
        padding: 0
    }
    .manage_account_content .manage_account_header {
        justify-content: flex-start
    }
}

.manage_account_header span {
    cursor: pointer;
    font-weight: 500
}

.contact_detail_content table {
    border: none
}

.contact_detail_content table thead>tr>th:last-child {
    text-align: left !important
}

.account_detail_content {
    display: -ms-grid;
    display: grid;
    grid-column-gap: 10px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 30px;
    margin-top: 20px;
    grid-column-gap: 40px
}

.detailed_content h6[contentEditable=true] {
    border: 1px solid rgba(204, 204, 204, .4);
    padding: 10px;
    background: 0 0
}

.account_detail_content h2 {
    margin-bottom: 10px
}

.account_detail_content h6 {
    font-weight: 400
}

.account_detail_content.detailed_content {
    display: block;
    margin-top: -10px
}

.amt_status {
    display: flex
}

.amt_status .amount_pending {
    width: 80px
}

.login_info_content {
    margin-top: 20px
}

.login_info_content div h2 {
    margin-bottom: 10px
}

.login_info_content div h6 {
    font-weight: 300;
    margin-bottom: 30px
}

.login_info_content button {
    width: 200px;
    height: 40px;
    cursor: pointer
}

.contact_details_wrapper {
    padding: 3% 5%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 7fr 3fr;
    grid-template-columns: 7fr 3fr;
    grid-column-gap: 30px
}

.contact_details_wrapper .container input {
    height: 36px;
    padding: 0 10px;
    width: 100%;
    font-size: 16px;
    min-width: 150px
}

.contact_details_wrapper table input {
    height: 36px;
    padding: 0 10px;
    width: 100%;
    font-size: 16px;
    min-width: 250px
}

.contact_details_wrapper .container .add_action {
    text-align: center;
    padding: 0
}

.contact_details_wrapper .container .add_action button {
    background-color: #fdb913;
    color: #fff;
    font-size: 14px;
    border: none;
    height: 40px;
    cursor: pointer;
    padding: 10px 20px;
    margin-top: 12px;
    margin-left: 35px
}

.contact_details_wrapper table select {
    height: 36px
}

.contact_detail_right {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 2
}

.contact_detail_content .contact_detail_right {
    display: none
}

@media screen and (max-width:479px) {
    .contact_detail_right {
        display: none
    }
    .contact_detail_content .contact_detail_right {
        display: block;
        margin-top: 22px
    }
}

.add_new_contact {
    background-color: #fdb913;
    color: #fff;
    font-size: 18px;
    border: none;
    height: 40px;
    cursor: pointer;
    padding: 10px 15px;
    margin-top: 30px;
    font-weight: 500
}

.add_new_contact span {
    border: 2px solid;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
    line-height: 18px;
    margin-right: 10px;
    font-weight: 600
}

.concession_card_wrapper {
    padding: 20px 5% 3%
}

.concession_card_content {
    border: 1px solid rgba(204, 204, 204, .4);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.concession_card_content div.concession_card_title {
    font-size: 22px;
    color: #2f2b75;
    font-weight: 600
}

.concession_card_content div.concession_card_details {
    font-size: 18px
}

.concession_card_content button {
    background-color: #fdb913;
    color: #fff;
    font-size: 18px;
    border: none;
    height: 40px;
    cursor: pointer;
    padding: 10px 15px;
    font-weight: 500
}

.contract_details_wrapper {
    padding: 3% 5%
}

@media screen and (max-width:1660px) {
    .contract_details_wrapper {
        padding: 3%
    }
}

.contract_details_wrapper>div {
    border: 1px solid rgba(204, 204, 204, .4);
    padding: 20px
}

.contract_details_wrapper>div:first-child {
    border-bottom: none
}

.contract_details_wrapper>div:last-child {
    margin-top: 0;
    border-top: none
}

.contract_details_wrapper .main_contract {
    border-bottom: 1px solid rgba(204, 204, 204, .4);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.contract_details_wrapper .manage_account_header {
    border-bottom: 1px solid rgba(204, 204, 204, .4)
}

.contract_detail_contact {
    display: -ms-grid;
    display: grid;
    font-size: 22px;
    color: #3d3d3d;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 20px
}

.contract_detail_contact>div h2 {
    color: #403e3e;
    margin-bottom: 10px
}

.contract_detail_contact>div h6 {
    font-weight: 500
}

.contract_detail_contact>div select {
    height: 36px;
    font-size: 16px
}

.myusage_main_wrapper {
    padding: 3% 5%;
    min-height: calc(100vh - 150px)
}

.myusage_main_wrapper .myusage_main_header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media screen and (max-width:479px) {
    .contract_details_wrapper .manage_account_header .cancel_btn {
        display: none
    }
    .myusage_main_wrapper .myusage_main_header {
        flex-direction: column-reverse;
        align-items: flex-start
    }
}

.myusage_main_wrapper .myusage_main_header h2:nth-of-type(1) {
    color: #2f2b75;
    font-size: 24px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 0
}

@media screen and (max-width:768px) {
    .myusage_main_wrapper .myusage_main_header h2:nth-of-type(1) {
        padding-left: 0;
        width: 100%;
        justify-content: flex-start;
        position: relative
    }
}

.myusage_main_wrapper .myusage_main_header h2:nth-of-type(1)>img {
    margin-right: 15px;
    width: 45px
}

.myusage_main_wrapper .myusage_main_header h2:nth-of-type(2) {
    font-size: 18px;
    color: #3d3d3d;
    display: flex;
    align-items: center;
    font-weight: 500
}

.myusage_main_wrapper .myusage_main_header h2:nth-of-type(2) img:nth-of-type(1) {
    margin-right: 15px
}

.myusage_main_wrapper .myusage_main_header h2:nth-of-type(2) img:nth-of-type(2) {
    margin-left: 20px
}

.myusage_download_filter {
    display: -ms-grid;
    display: grid;
    grid-column-gap: 20px;
    -ms-grid-columns: 3fr 2fr;
    grid-template-columns: 3fr 2fr;
    margin-top: 15px
}

.date_wrapper {
    display: flex;
    align-items: center;
    margin-right: 10px
}

.date_wrapper>div {
    margin-right: 10px;
    margin-bottom: 15px
}

.common_wrapper .form-group {
    display: flex;
    flex-direction: column
}

.format_wrapper {
    display: flex;
    justify-content: flex-end
}

.common_wrapper .form-group>div {
    display: flex;
    position: relative;
    align-items: center
}

.common_wrapper .form-group>div .check-inner-form-group label {
    padding: 0 15px;
    margin-top: -20px;
    margin-right: 15px;
    background: #fff;
    color: #3d3d3d;
    cursor: pointer;
    border: 1px solid #ccc;
    height: 35px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400
}

.common_wrapper .form-group>div .check-inner-form-group:last-child label {
    margin-right: 0
}

.common_wrapper .form-group>div .check-inner-form-group input[type=radio] {
    opacity: 0
}

.duration_wrapper {
    position: relative;
    margin-left: 30px
}

.duration_wrapper:before {
    content: "";
    position: absolute;
    height: 33px;
    width: 1px;
    background-color: #ccc;
    left: -20px;
    top: 40px
}

.common_wrapper .form-group>div .check-inner-form-group input[type=radio]:checked+label {
    background: #fdb913;
    color: #fff;
    border: 1px solid transparent
}

.format_wrapper .form-group>div button {
    padding: 0 7px;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 35px;
    margin-left: 0
}

.format_wrapper .form-group>div button img {
    margin-right: 5px
}

.date_wrapper .inner-form-group {
    margin-top: 15px;
    position: relative
}

.date_wrapper .inner-form-group input {
    height: 35px;
    color: #3d3d3d;
    font-size: 16px;
    padding: 0 30px 0 5px;
    border-color: rgba(61, 61, 61, .2) !important;
    border-width: 1px;
}

.date_wrapper .inner-form-group:before {
    position: absolute;
    content: "";
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBGOERBNzBDQUQwMDExRThBQ0QyRjgzNURGRTc1RkQxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBGOERBNzBEQUQwMDExRThBQ0QyRjgzNURGRTc1RkQxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEY4REE3MEFBRDAwMTFFOEFDRDJGODM1REZFNzVGRDEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEY4REE3MEJBRDAwMTFFOEFDRDJGODM1REZFNzVGRDEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7LF/OhAAABxElEQVR42ryVzUrDQBSFpyXV1r8iInZRi2uhFAVXFkFc6EbqRp/CVxHRpQ8hiCvBvRRFRDdFRdxUBBGjVupPQjwjJzAdJ02gaS98LTO5c+/MPZMbIVptCNSBB57BhIhmU8DmunuQaudcoKNPMWKSsrYuqz60+D8GvgIC9IUkuwqYl1XpZ0XEOvjgbkwn0ed0CgEnKTPuRhI/u2BAdMdk3B2ZJKdMel1IlLOUwSQ4Adsgz1regNmQINL3AuyBUXAHXhmvZfeSWy5QTS6qhmhSNVz1POP9+SS0EjXBKfgGaVACwxFK8g7OgMvbOAcy/sNEl3RosaTogVnaeJ9id2rTYNUkfIPli2vzTT+2ehJH0Ue+sQdsDY+gwqZ3yBv3wp3+0C/HTVZ4fR22qbR+EltJWDS0iYKhnWTbNFS/K3tBwruGcdS5UOF9q4E13vk3lqLBEmVY7zp9V8AI361akEimcsVhtkl41cYpssV2vUQRj/iNkKIug09wzAvi8KRPUU/SE+Edwzhozmuz7p/wSU34RaVcPgtKuR7oOw8GmaCm9MSU2iBdJcEWuI5BdFm2TXXiMuR70SkyvpgB5zxRnMFdxi39CjAAIa7RS9t80ZMAAAAASUVORK5CYII=);
    top: 7px;
    right: 8px;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.myusage_download_filter .inner-form-group label {
    font-size: 16px
}

.date_wrapper .form-group label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.myusage_main_inner {
    border: 1px solid rgba(204, 204, 204, .4);
    padding: 20px 30px;
    margin-top: 30px
}

@media screen and (max-width:768px) {
    .common_wrapper .form-group>div .check-inner-form-group label {
        padding: 0 20px
    }
    .myusage_main_inner {
        padding: 20px 15px;
        display: flex;
        flex-direction: column-reverse
    }
    .contact_form_listing ul li {
        margin-bottom: 15px
    }
}

.account_graph_wrapper {
    margin-top: 90px
}

.account_graph_wrapper img {
    width: 100%
}

.contact_main_wrapper {
    padding: 3% 5%
}

.contact_form_wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 3fr 7fr;
    grid-template-columns: 3fr 7fr;
    margin-top: 50px;
    grid-column-gap: 25px
}

@media screen and (max-width:479px) {
    .myusage_main_wrapper .myusage_main_header h2:nth-of-type(1)>img {
        width: 40px
    }
    .contact_form_wrapper {
        margin-top: 20px
    }
}

.contact_form_listing {
    padding: 15px 0;
    background: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    border: 1px solid rgba(204, 204, 204, .4)
}

.contact_form_listing span {
    font-size: 18px;
    padding: 0 15px;
    margin-bottom: 10px;
    width: 100%
}

.contact_form_listing ul {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%
}

.contact_form_listing ul li {
    width: 100%;
    display: flex
}

.contact_form_listing ul li:last-child {
    margin-bottom: 0
}

.contact_form_listing ul li a {
    font-size: 20px;
    color: #2f2b75;
    padding: 10px 15px;
    width: 100%;
    display: flex;
    align-items: center
}

.contact_form_listing ul li a img {
    margin-right: 15px;
    height: auto;
    width: 45px;
    display: none !important
}

.contact_form_listing ul li a.active {
    color: #fff;
    position: relative
}

.contact_form_listing ul li a img.white_logo {
    display: none
}

.contact_form_listing ul li a.active img.white_logo {
    display: block
}

.contact_form_listing ul li a.active img.blue_logo {
    display: none
}

.contact_form_listing ul li a.active::after {
    border-bottom: 9px solid transparent;
    border-top: 9px solid transparent;
    content: "";
    display: inline-block;
    right: -19px;
    position: absolute;
    top: 14px
}

.contact_form_wrapper_right {
    width: 100%;
    border: 1px solid rgba(204, 204, 204, .4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    background-color: #ebf0f2
}

.contact_inner_header {
    padding-top: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(204, 204, 204, .4);
    color: #2f2b75;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative
}

.contact_inner_header img {
    width: 45px;
    margin-right: 15px
}

.form_routing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 15px;
    width: 100%
}

.form_routing .two_common {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.form_routing .two_common>div {
    width: 47%
}

.form_routing>div {
    margin-bottom: 20px
}

.mobile_input {
    width: 47%
}

.contact_form_wrapper .form-group {
    position: relative
}

.contact_form_wrapper .form-group .invalid-feedback {
    position: absolute;
    bottom: 0;
    color: red;
    right: 0;
    font-size: 13px
}

.status_amt {
    color: #2f2b75
}

.status_amt.paid {
    color: #000
}

.form-group.subject_input,
.textarea.form-group {
    width: 100%
}

.textarea.form-group textarea {
    width: 100%;
    padding: 5px;
    min-height: 100px;
    font-size: 18px;
    resize: none;
    border-color: rgba(204, 204, 204, .4)
}

.form_routing label {
    font-size: 16px;
    margin-bottom: 7px;
    display: flex;
    font-weight: 500
}

.form_routing input {
    width: 100%;
    padding: 5px;
    height: 35px;
    font-size: 18px;
    border: 1px solid rgba(204, 204, 204, .4);
    margin-bottom: 20px
}

.contact_content_wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 3fr 7fr;
    grid-template-columns: 3fr 7fr;
    grid-column-gap: 25px
}

.contact_us_wrapper,
.fault_wrapper {
    background: #fff;
    padding: 15px;
    border: 1px solid rgba(204, 204, 204, .4)
}

.adress_common_main_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px
}

.adress_common_main_wrapper h4 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px
}

@media screen and (max-width:360px) {
    .adress_common_main_wrapper h4 {
        flex-direction: column
    }
}

.adress_common_main_wrapper h4 span:nth-of-type(1) {
    width: 140px;
    font-size: 18px
}

.adress_common_main_wrapper h4 span:nth-of-type(2) {
    width: 100%;
    font-size: 18px;
    font-weight: 400
}

.main_right_address_wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px
}

.footer_img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px
}

@media screen and (max-width:768px) {
    .contact_form_listing ul li:last-child a {
        padding-bottom: 0
    }
    .contact_form_listing ul li:last-child a img {
        width: auto;
        height: 28px
    }
    .contact_form_listing ul li a {
        font-size: 18px
    }
    .contact_form_listing ul li a img {
        width: 40px
    }
    .contact_form_listing ul li a.active {
        color: #2f2b75;
        background: 0 0
    }
    .contact_form_listing ul li a.active img.white_logo {
        display: none
    }
    .contact_form_listing ul li a.active img.blue_logo {
        display: block
    }
    .contact_form_listing ul li a.active::after {
        display: none
    }
    .contact_form_wrapper_right {
        background: #fff
    }
    .main_right_address_wrapper {
        grid-row-gap: 00px
    }
    .footer_img {
        display: none
    }
}

.myusage_wrapper.data_main,
.recent_invoice_left {
    min-height: 350px
}

.myusage_graph>img {
    width: 100%
}

.recent_invoice_right>div>div {
    position: relative;
    padding-left: 80px;
    display: inline-block
}

.recent_invoice_right>div>div:before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    left: 0;
    top: 30px;
    height: 45px;
    width: 45px;
    background-size: 100%
}

.account_detail_content_address {
    display: -ms-grid;
    display: grid;
    grid-column-gap: 10px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
    margin-top: 20px
}

.account_detail_content_address h2 {
    margin-bottom: 10px
}

h2.address_custom {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.account_detail_content_address>div>div {
    font-size: 22px;
    width: 100%;
    resize: none;
    height: auto;
    line-height: 1.5;
    font-weight: 400
}

.account_detail_content_address>div>div[contentEditable=true] {
    border: 1px solid #ccc;
    padding: 10px;
    background: 0 0
}

.custom_check_supply {
    position: relative;
    margin-left: 30px
}

.custom_check_supply input {
    left: -9999px;
    position: absolute
}

.custom_check_supply label {
    padding-left: 40px;
    font-size: 16px;
    color: #fdb913
}

@media screen and (max-width:768px) {
    .custom_check_supply label {
        padding-left: 0
    }
}

.custom_check_supply label:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    height: 14px;
    width: 14px;
    border: 2px solid #12c158;
    border-radius: 50%
}

.custom_check_supply input:checked+label::before {
    background-color: #12c158;
    border: 2px solid transparent
}

.for_mobile,
.for_web {
    display: none
}

.select_box_main select {
    background: 0 0;
    border: none;
    color: #fff;
    font-size: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0;
    width: 100%;
    padding-right: 42px;
    padding-left: 60px
}

.bills_drop select,
.select_box_main select option {
    color: #222
}

.home_banner .select_box_main select {
    font-size: 27px
}

@media screen and (max-width:1440px) {
    .select_box_main select {
        font-size: 20px
    }
    .home_banner .select_box_main select {
        font-size: 24px
    }
}

.select_inner {
    position: relative;
    display: flex;
    min-width: 400px;
    align-items: center
}

.select_inner>img.location_icon {
    position: absolute;
    left: 5px;
    top: -3px;
    pointer-events: none;
    width: 30px
}

.select_inner select {
    color: #222;
    font-weight: 500
}

.home_banner img.location_icon {
    width: 40px
}

@media screen and (max-width:479px) {
    .home_banner .select_box_main select {
        font-size: 20px
    }
    .home_banner img.location_icon {
        width: 30px
    }
}

.home_banner .select_inner>img.drop_icon {
    width: 20px !important;
    height: 14px !important;
    top: 6px
}

.select_inner>img.drop_icon {
    position: absolute;
    pointer-events: none;
    right: 2px;
    width: 14px !important;
    top: 10px;
    height: 10px
}

.latest_invoice_left>div.invoice_amt span {
    font-weight: 500
}

.home_banner select {
    color: #fff
}

@media screen and (max-width:768px) {
    .select_inner {
        min-width: auto
    }
    .home_banner select {
        color: #3d3d3d
    }
    .home_banner .address_main {
        font-size: 20px
    }
}

.submit_btn_container button {
    background-color: #fdb913;
    border: none;
    text-align: center;
    color: #fff;
    outline: 0;
    max-width: 130px;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer
}

.submit_btn_container button:hover {
    background-color: #fdb913
}

.add_pop_wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 99999999;
    flex-direction: column
}

.confirmation_wrapper {
    padding: 50px;
    background: #fff;
    border-radius: 5px;
    max-width: 500px;
    width: 100%
}

.confirmation_wrapper h4 {
    font-size: 23px;
    text-transform: capitalize;
    font-weight: 400;
    text-align: center
}

.actions_confirm {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px
}

.actions_confirm>span {
    padding: 5px 25px;
    font-size: 18px;
    background: #ccc;
    color: #222;
    cursor: pointer;
    font-weight: 500;
    border-radius: 5px
}

.actions_confirm>span:last-child {
    color: #fff;
    background: #fbb445;
    margin-left: 20px
}

show-hide-password {
    width: 100%
}

show-hide-password .input-group-append {
    position: absolute;
    top: 17px;
    right: 15px;
    z-index: 99;
    opacity: 0
}

show-hide-password .input-group-append button {
    width: 20px !important;
    height: 17px
}

.slideshow-container {
    border-radius: 20px
}

.recent_invoice_right>div {
    display: flex;
    flex-direction: column
}

@media screen and (max-width:768px) {
    .address_main {
        width: 250px;
        font-size: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: flex
    }
}

.manage_account_header span.address_main {
    font-weight: 500;
    margin-left: 0
}

.snackbars {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column
}

.snackbars .snack {
    background: #323232;
    color: #fff;
    position: relative;
    min-width: 288px;
    max-width: 568px;
    border-radius: 2px;
    padding: 14px 0 14px 24px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px
}

.snack .snack-text {
    word-wrap: break-word;
    overflow: hidden;
    margin-right: 24px
}

.snack .snack-action {
    text-transform: uppercase;
    margin-left: auto;
    cursor: pointer;
    color: #2196f3;
    margin-right: 24px
}

.snackbars.bottom-left {
    left: 30px;
    bottom: 20px;
    align-items: flex-start
}

.snackbars.bottom-center {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    bottom: 20px;
    align-items: center
}

.snackbars.bottom-right {
    right: 30px;
    bottom: 20px;
    align-items: flex-end
}

.snackbars.top-left {
    left: 30px;
    top: 30px;
    align-items: flex-start
}

.snackbars.top-center {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 30px;
    align-items: center
}

.snackbars.top-right {
    right: 30px;
    top: 30px;
    align-items: flex-end
}

#chart {
    margin-top: 50px
}

.contact_main_wrapper_section my-date-picker .btnpicker {
    margin-top: 0
}

@media screen and (max-width:1660px) {
    .other_header {
        height: 80px
    }
    .contact_detail_right {
        font-size: 18px;
        line-height: 2;
        font-weight: 400;
        color: #757575
    }
    .recent_invoice_right>div {
        margin-left: 60px
    }
    .invoice_wrapper .view_content,
    table td,
    table th {
        font-size: 14px
    }
    .info_text a.view_content {
        font-size: 14px !important
    }
    .promotion_wrapper .slider .item>img {
        width: 100%;
        max-width: 500px
    }
    .navigation_wrapper ul li a,
    .navigation_wrapper>span {
        font-size: 18px;
        text-transform: none
    }
    .login_left_inner>img {
        width: 150px
    }
    .login-footer-right {
        padding-left: 50px
    }
    .login_right_inner form.login_form .input-wrapper button {
        width: 70%;
        height: 50px;
        line-height: 50px
    }
    .login_left_inner>h2 {
        font-size: 24px
    }
    .login_left_inner p {
        font-size: 16px
    }
    .login_right_inner form .input-wrapper span:nth-of-type(1) {
        height: 45px
    }
    .login_right_inner form .input-wrapper input {
        height: 45px;
        font-size: 14px
    }
    .login_right_inner form .input-wrapper a {
        font-size: 16px;
        height: 50px;
        line-height: 50px
    }
    .manage_account_header h2:nth-of-type(1) {
        font-size: 18px
    }
    .login_right_inner form .input-wrapper a.forgot_pass,
    .login_right_inner form .input-wrapper.forgot_content span {
        font-size: 14px
    }
    .account_detail_content h2,
    .account_detail_content h6,
    .account_detail_content_address>div>div {
        font-size: 18px
    }
    .concession_card_wrapper,
    .contact_details_wrapper {
        padding: 3%
    }
    .login_info_content button {
        font-size: 14px;
        width: 180px;
        font-weight: 500
    }
}

@media screen and (max-width:1660px) and (max-width:479px) {
    .login_info_content button {
        width: 150px
    }
    .recent_invoice_left_header h4 {
        justify-content: flex-start
    }
}

@media screen and (max-width:1660px) {
    .contact_details_wrapper table input {
        min-width: 250px
    }
    .concession_card_content div.concession_card_details,
    .concession_card_content div.concession_card_title {
        font-size: 18px
    }
    .add_new_contact,
    .concession_card_content button {
        font-size: 16px
    }
    .contract_detail_contact>div h2,
    .contract_detail_contact>div h6 {
        font-size: 18px
    }
    .login_right_inner form .input-wrapper {
        margin-bottom: 16px
    }
    .login_left_inner {
        padding-top: 70px
    }
    .login_right_inner {
        width: 350px
    }
    .login_right_inner .login_tabs span.active {
        font-size: 24px
    }
    .login_right_inner form .input-wrapper>button {
        height: 50px;
        line-height: 50px
    }
    .login_right_inner .login_tabs span {
        font-size: 20px
    }
    .forgot_main_wrapper {
        padding-top: 50px
    }
    .forgot_main_wrapper .close_icon {
        right: 0;
        top: -40px;
        cursor: pointer;
        padding: 10px
    }
    .contact_form_listing>ul li a,
    .contact_inner_header {
        font-size: 18px
    }
    .contact_form_listing>ul li a img {
        width: 20px
    }
    .footer_img img {
        width: 200px
    }
    .form_routing input,
    .textarea.form-group textarea {
        font-size: 14px
    }
    .adress_common_main_wrapper h4 span:nth-of-type(1),
    .adress_common_main_wrapper h4 span:nth-of-type(2) {
        font-size: 16px
    }
    .myusage_download_filter {
        -ms-grid-columns: 7fr 3fr;
        grid-template-columns: 7fr 3fr
    }
    .latest_invoice_header h2:nth-of-type(1),
    .latest_invoice_left>div h2,
    .latest_invoice_left>div span,
    .myusage_main_wrapper .myusage_main_header h2:nth-of-type(1) {
        font-size: 18px
    }
    .invoice_overdue .overdue_btns button {
        font-size: 16px
    }
    .invoice_overdue .overdue_btns button:nth-of-type(1) {
        margin-right: 10px
    }
    .recent_invoice_left_header h4 {
        padding-bottom: 20px;
        font-size: 18px
    }
    .recent_invoice_right>div>div {
        padding-left: 50px
    }
    .recent_invoice_right>div>div:nth-of-type(1),
    .recent_invoice_right>div>div:nth-of-type(2) {
        margin-left: 10px
    }
    .recent_invoice_right>div>div:before {
        height: 40px;
        width: 40px;
        top: 18px
    }
    .recent_invoice_right>div>div h6 {
        font-size: 18px
    }
    .recent_invoice_right>div>div h2 {
        font-size: 28px
    }
    .latest_invoice_right div {
        font-size: 18px;
        padding-left: 80px
    }
}

@media screen and (max-width:1660px) and (max-width:479px) {
    .latest_invoice_right div {
        padding-left: 0;
        padding-top: 70px
    }
}

@media screen and (max-width:1660px) and (max-width:768px) {
    .other_header {
        height: 95px
    }
    .contact_inner_header {
        margin-bottom: 40px
    }
    .recent_invoice_left_header h4 {
        margin-top: 20px
    }
    .banner_content_inner .amount {
        margin-bottom: 20px
    }
}

@media screen and (max-width:1660px) {
    .latest_invoice_right div>span {
        font-size: 28px
    }
    .latest_invoice_right div::before {
        height: 50px;
        width: 50px;
        left: -10px
    }
    .invoice_history_header h4 {
        font-size: 18px;
        padding-bottom: 20px
    }
    .invoice_wrapper .recent_content {
        font-size: 20px
    }
    .recent_wrapper {
        padding: 0 10px 20px
    }
    .promotion_wrapper h4 {
        font-size: 20px
    }
    .item_offers_wrapper span {
        font-size: 22px
    }
    .item_offers_wrapper a {
        color: #fcff00;
        font-size: 18px
    }
    .myusage_content div {
        font-size: 18px
    }
    .myusage_content div>span {
        font-size: 24px;
        font-weight: 500
    }
    .myusage_graph h4 {
        font-size: 20px;
        padding: 0 10px 20px
    }
    .home_banner>h2 {
        font-size: 24px
    }
    .banner_content_inner h2 {
        font-size: 22px
    }
    .banner_content_inner .overdue_amount,
    .banner_content_inner p {
        font-size: 20px
    }
    .banner_content_inner a {
        font-size: 16px;
        height: 50px
    }
    .banner_content_inner .amount {
        font-size: 24px
    }
    footer p {
        font-size: 14px
    }
}

@media screen and (max-width:1440px) {
    .recent_invoice_right>div>span.underline {
        margin-left: 60px
    }
    .home_banner {
        padding-top: 30px
    }
}

@media screen and (max-width:1440px) and (max-width:479px) {
    .recent_invoice_right>div>span.underline {
        margin-left: 40%
    }
}

@media screen and (max-width:1440px) {
    .home_banner .banner_content {
        margin-top: 70px
    }
    .banner_content_inner .overdue_amount {
        margin-bottom: 19px
    }
    .banner_content_inner h2 {
        font-size: 24px;
        font-weight: 600
    }
    .banner_content_inner p {
        font-size: 19px;
        line-height: 1.7
    }
}

@media screen and (max-width:1440px) and (max-width:768px) {
    .home_banner {
        padding-top: 0
    }
    .home_banner .banner_content {
        margin-top: 50px
    }
}

@media screen and (max-width:1024px) {
    .for_web {
        display: none
    }
    .for_mobile {
        display: block;
        position: relative
    }
    .banner_content .banner_content_inner:nth-of-type(3) {
        display: none
    }
    .home_banner .banner_content {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr
    }
    .home_banner .banner_content>div:nth-of-type(2)::before {
        display: none
    }
    .banner_content_inner.for_mobile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px
    }
    .home_header {
        height: auto
    }
    .other_header {
        height: 80px;
        z-index: 99
    }
    .myusage_wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 30px
    }
    .myusage_graph h4 {
        justify-content: center;
        font-size: 24px;
        margin-bottom: 50px;
        position: relative
    }
}

@media screen and (max-width:1024px) and (max-width:479px) {
    .myusage_graph h4 {
        font-size: 18px
    }
}

@media screen and (max-width:1024px) {
    .promotion_invoice_wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .promotion_wrapper h4 {
        justify-content: center;
        font-size: 26px
    }
    .invoice_wrapper {
        -ms-grid-row: 1;
        grid-row: 1
    }
    .promotion_wrapper {
        -ms-grid-row: 2;
        grid-row: 2;
        margin-top: 70px
    }
    .promotion_wrapper .slider,
    .promotion_wrapper .slider .item>img {
        max-width: 100%
    }
    .navigation_wrapper {
        position: fixed;
        width: 100%;
        background-size: cover;
        height: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        flex-direction: column;
        top: -200%;
        transition: 1s;
        margin-top: 0;
        padding-top: 10px;
        z-index: 11111
    }
    .navigation_wrapper ul {
        flex-direction: column;
        width: 100%;
        align-items: center
    }
    .navigation_wrapper ul li {
        width: 100%;
        margin: 20px 0
    }
    .navigation_wrapper ul li a {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        color: #fdb913;
        font-size: 24px;
        font-weight: 500
    }
}

@media screen and (max-width:1024px) and (max-width:640px) {
    .navigation_wrapper ul li a {
        padding: 15px 30px;
        font-size: 22px
    }
}

@media screen and (max-width:1024px) {
    .navigation_wrapper ul li a.active {
        width: 90%;
        margin: 0 auto;
        background-color: #fdb913;
        text-align: center
    }
    .navigation_wrapper ul li a.active:before {
        display: none
    }
    .navigation_wrapper>span {
        width: 100%;
        justify-content: center;
        color: #db2626;
        font-size: 24px;
        font-weight: 500
    }
    .navigation_wrapper>span img {
        display: none
    }
    span.close {
        border: 2px solid #000;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer
    }
    .menu_header_wrapper {
        display: flex;
        justify-content: space-between;
        padding: 15px 30px;
        align-items: center;
        width: 100%;
        background: #2f2b75
    }
    .menu_header_wrapper img {
        width: 140px
    }
    .menu_icon img {
        height: 40px;
        width: 40px;
        cursor: pointer
    }
    .manage_account_content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 30px
    }
    .recent_invoice_wrapper {
        grid-column-gap: 50px;
        padding: 5%
    }
}

@media screen and (max-width:1024px) and (max-width:768px) {
    .navigation_wrapper ul li {
        margin: 10px 0
    }
    .manage_account_content {
        display: flex;
        flex-direction: column-reverse
    }
    .recent_invoice_wrapper.space_back_main {
        background: #2f2b75
    }
}

@media screen and (max-width:1024px) {
    .latest_invoice_right div::before {
        content: "";
        position: absolute;
        left: 0;
        background-size: 100%;
        top: 50%;
        width: 60px;
        height: 60px;
        -webkit-transform: translatey(-50%);
        transform: translatey(-50%)
    }
    .latest_invoice_left {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr
    }
    .contact_content_wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 30px
    }
    .footer_img {
        justify-content: inherit
    }
    .contact_form_wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 30px
    }
    .contact_form_listing>ul li a.active::after {
        display: none
    }
    .myusage_download_filter {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 30px
    }
    .format_wrapper {
        justify-content: flex-start
    }
    .login_left_inner {
        padding-left: 20px;
        width: 420px
    }
    .login_left_inner>h2 {
        font-size: 28px
    }
    .login_left_inner>img {
        width: 200px
    }
    .login_content {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr
    }
    .login_right_content {
        padding-left: 0
    }
    .date_wrapper {
        flex-wrap: wrap
    }
    .myusage_content {
        justify-content: center
    }
    .contact_details_wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 30px
    }
}

@media screen and (max-width:1024px) and (max-width:479px) {
    .latest_invoice_right div::before {
        top: 8px;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        left: 0;
        width: 60px;
        height: 60px
    }
}

@media screen and (max-width:1024px) and (max-width:768px) {
    .contact_details_wrapper {
        display: flex;
        flex-direction: column-reverse
    }
    .contact_details_wrapper .contact_detail_right {
        padding-bottom: 20px
    }
}

@media screen and (max-width:1024px) and (max-width:768px) and (max-width:479px) {
    .contact_details_wrapper .contact_detail_right {
        border-bottom: 1px solid rgba(204, 204, 204, .4)
    }
}

@media screen and (max-width:768px) and (max-width:479px) {
    .concession_card_content {
        margin-bottom: 30px
    }
}

@media screen and (max-width:768px) {
    .manage_account_header {
        margin-top: 0
    }
    .format_wrapper .form-group>div button {
        margin-left: 0;
        height: 35px;
        font-size: 16px;
        padding: 0 20px
    }
    .recent_wrapper {
        margin-top: 40px
    }
    .recent_invoice_right>div {
        margin-left: 0
    }
    .contact_details_wrapper {
        padding: 5% 4%;
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr))
    }
    .contact_detail_right {
        text-align: center
    }
    .contract_detail_contact {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px
    }
    .latest_invoice_inner,
    .recent_invoice_wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 30px
    }
    .recent_invoice_right {
        text-align: center
    }
    .responsive_table {
        overflow-x: auto;
        white-space: nowrap
    }
    .responsive_table::-webkit-scrollbar {
        height: 7px
    }
    .responsive_table::-webkit-scrollbar-track {
        border-radius: 10px;
        webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
    }
    .responsive_table::-webkit-scrollbar-thumb {
        background-color: #2f2b75;
        webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5)
    }
    .latest_invoice_header h2:nth-of-type(2) {
        font-size: 18px
    }
    .latest_invoice_header h2:nth-of-type(1) {
        font-size: 20px
    }
    .main_right_address_wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .duration_wrapper {
        margin-left: 0;
        margin-top: 30px
    }
    .duration_wrapper:before {
        display: none
    }
    .myusage_main_wrapper .myusage_main_header {
        margin-top: 30px
    }
    .myusage_main_wrapper .myusage_main_header h2:nth-of-type(1) {
        color: #2f2b75;
        font-size: 20px;
        margin-top: 30px
    }
    .myusage_main_wrapper .myusage_main_header h2:nth-of-type(2) {
        font-size: 18px
    }
    .login_content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 50px
    }
    .login_right_content {
        justify-content: center;
        margin-top: 0;
        align-items: center;
        padding-top: 0
    }
    .login_left_content {
        background-image: url(banner_login_mobole.0ec83715159a0921784e.png);
        height: 470px
    }
    .login_left_inner {
        padding: 50px 0 0;
        display: flex;
        align-items: flex-start;
        width: 80%;
        flex-direction: column;
        margin: 0 auto;
        text-align: left
    }
    .login-footer-right {
        position: inherit;
        margin-top: 100px;
        padding-left: 0;
        font-size: 14px
    }
    .login_right_content {
        flex-direction: column
    }
    .latest_invoice_right {
        padding: 20px;
        justify-content: flex-start
    }
    .latest_invoice_right br {
        display: none
    }
    .manage_account_header h2:nth-of-type(1) {
        margin-bottom: 00px;
        font-size: 20px;
        text-align: center
    }
}

@media screen and (max-width:768px) and (max-width:768px) {
    .myusage_main_wrapper .myusage_main_header {
        margin-top: 0
    }
}

@media screen and (max-width:479px) {
    .manage_account_header {
        margin-top: 0;
        flex-direction: column-reverse;
        align-items: flex-start
    }
    .manage_account_header span {
        font-size: 14px
    }
    h2.address_custom {
        flex-wrap: wrap
    }
    .custom_check_supply {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        padding-left: 30px
    }
    .custom_check_supply label:before {
        top: 4px;
        left: 0
    }
    .cancel_btn_address,
    .save_btn_address {
        font-size: 14px !important
    }
    .myusage_download_filter {
        margin-top: 0
    }
    .home_banner .banner_content {
        flex-direction: column;
        margin-top: 70px
    }
    .myusage_main_inner {
        padding: 20px 15px;
        display: flex;
        flex-direction: column-reverse
    }
    .home_banner .banner_content .banner_content_inner {
        margin-bottom: 70px
    }
    .banner_content_inner a {
        font-size: 16px;
        padding: 0 30px;
        height: 40px
    }
    .banner_content_inner h2 {
        font-size: 22x;
        margin-bottom: 15px
    }
    .banner_content_inner .overdue_amount {
        margin-bottom: 19px;
        font-size: 17px;
        margin-top: 7px
    }
    .banner_content_inner .amount {
        font-size: 22px
    }
    .banner_content_inner p {
        font-size: 17px;
        padding: 0 10px
    }
    .banner_content_inner p br {
        display: none
    }
    .myusage_content {
        margin-top: 00px
    }
    .myusage_content div {
        padding: 0 20px 20px;
        line-height: 2;
        font-size: 20px
    }
    .myusage_content div>span {
        font-size: 26px
    }
    .promotion_invoice_wrapper {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
    }
    .item_offers_wrapper a {
        font-size: 13px
    }
    .item_offers_wrapper span {
        font-size: 16px
    }
    .home_banner .banner_content>div::before {
        display: none
    }
    .manage_account_wrapper>.manage_account_header h2:nth-of-type(1) {
        font-size: 20px;
        margin-top: 20px;
        display: none
    }
    .manage_account_header h2:nth-of-type(1) {
        margin-bottom: 0
    }
    .account_detail_content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .contact_details_wrapper {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
    }
    .contract_detail_contact>div h6 {
        font-size: 18px
    }
    .contract_detail_contact>div h2 {
        font-size: 16px
    }
    .concession_card_content div.concession_card_details,
    .concession_card_content div.concession_card_title {
        font-size: 15px
    }
    .manage_account_header h2:nth-of-type(1)>img {
        width: 40px
    }
    .account_detail_content_address h2,
    .account_detail_content_address>div>div {
        font-size: 18px
    }
    .account_detail_content h2,
    .account_detail_content h6 {
        font-size: 17px
    }
    .login_info_content div h2 {
        font-size: 18px
    }
    .responsive_table {
        overflow-x: scroll;
        white-space: nowrap
    }
    .invoice_wrapper .recent_content {
        font-size: 18px
    }
    .invoice_wrapper .recent_content img {
        width: 40px;
        height: auto
    }
    .promotion_wrapper h4 {
        font-size: 18px;
        justify-content: flex-start
    }
    .invoice_wrapper .view_content {
        font-size: 16px
    }
    .latest_invoice_header h2:nth-of-type(1) {
        margin-top: 30px;
        font-size: 18px;
        width: 100%;
        text-align: center;
        justify-content: flex-start
    }
    .latest_invoice_left {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .invoice_history_wrapper {
        padding: 5%
    }
    .invoice_history_header h4 {
        font-size: 20px;
        margin-top: 20px
    }
    .invoice_history_header h4>img {
        width: 40px
    }
    .recent_invoice_right>div>div h2 {
        font-size: 20px;
        margin-left: 10px
    }
    .recent_invoice_right>div>div:before {
        left: 0
    }
    .latest_invoice_wrapper {
        padding: 5%
    }
    .form_routing .two_common {
        flex-direction: column
    }
    .form_routing .two_common>div {
        width: 100%;
        margin: 10px 0
    }
    .mobile_input {
        width: 100%
    }
    .contact_main_wrapper>h2 {
        margin-top: 30px;
        font-size: 20px
    }
    .contact_inner_header {
        font-size: 18px
    }
}

@media screen and (max-width:479px) and (max-width:479px) {
    .banner_content_inner .amount {
        margin-bottom: 20px
    }
    .contact_inner_header {
        justify-content: flex-start;
        margin-top: 0
    }
}

.contact_main_wrapper input[type=checkbox]+label {
    display: block;
    margin: .2em;
    cursor: pointer;
    padding: .2em;
    line-height: 1.9
}

.contact_main_wrapper input[type=checkbox] {
    display: none
}

.contact_main_wrapper input[type=checkbox]+label:before {
    content: "\2714";
    border: .1em solid #000;
    border-radius: .2em;
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-left: .2em;
    padding-bottom: .3em;
    margin-right: .2em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s
}

@media screen and (max-width:479px) {
    .contact_form_listing>ul li a {
        font-size: 18px
    }
    .contact_form_listing>ul li a img {
        width: 22px
    }
    .contact_inner_header img {
        width: 40px
    }
    .footer_img img {
        width: 200px
    }
    .common_wrapper .form-group>div .check-inner-form-group label {
        font-size: 14px
    }
    .common_wrapper .form-group>div .check-inner-form-group:last-child label {
        margin-right: 5px
    }
    .login_content {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
    }
    .login_right_inner {
        width: 80%
    }
    .login_left_inner p {
        font-size: 16px
    }
    .login_left_inner>img {
        width: 150px
    }
    .login_right_inner form .input-wrapper.forgot_wrapper {
        flex-direction: column
    }
    .login_right_inner form .input-wrapper.forgot_wrapper a {
        margin-bottom: 30px
    }
    .login_left_inner>h2 {
        font-size: 20px
    }
    .login_right_content {
        align-items: center;
        margin-top: 0
    }
    .login_right_inner .login_tabs span {
        font-size: 22px
    }
    .login_right_inner .login_tabs span.active {
        font-size: 30px
    }
    .forgot_main_wrapper .close_icon {
        right: -20px;
        top: -80px;
        cursor: pointer;
        padding: 10px
    }
    .contact_main_wrapper input[type=checkbox]+label:before {
        line-height: 1.4em
    }
}

.contact_main_wrapper input[type=checkbox]+label:active:before {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.contact_main_wrapper input[type=checkbox]:checked+label:before {
    background-color: #fdb913;
    border-color: #fdb913;
    color: #fff
}

.contact_main_wrapper input[type=checkbox]:disabled+label:before {
    -webkit-transform: scale(1);
    transform: scale(1);
    border-color: #aaa
}

.contact_main_wrapper input[type=checkbox]:checked:disabled+label:before {
    -webkit-transform: scale(1);
    transform: scale(1);
    background-color: #bfb;
    border-color: #bfb
}

.contact_main_wrapper .date_picker_main .invalid-feedback {
    bottom: -15px !important
}

.load-bar {
    position: relative;
    margin-top: 0;
    width: 100%;
    height: 6px;
    background-color: #fdba2c
}

.bar {
    content: "";
    display: inline;
    position: absolute;
    width: 0;
    height: 100%;
    left: 50%;
    text-align: center
}

.bar:nth-child(1) {
    background-color: #da4733;
    -webkit-animation: 3s linear infinite loading;
    animation: 3s linear infinite loading
}

.bar:nth-child(2) {
    background-color: #3b78e7;
    -webkit-animation: 3s linear 1s infinite loading;
    animation: 3s linear 1s infinite loading
}

.bar:nth-child(3) {
    background-color: #fdba2c;
    -webkit-animation: 3s linear 2s infinite loading;
    animation: 3s linear 2s infinite loading
}

.fixed_back {
    background: url(indigo_home.24c1c67da9f6882e5a65.jpg)
}

.fixed_back:before {
    background-color: transparent;
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .9
}

.loader_main {
    background: url(indigo_home.24c1c67da9f6882e5a65.jpg)
}

.loader_main::before {
    background-color: transparent
}

.recent_invoice_right>div>div:before {
    background-image: url(data:image/png;base64,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)
}

.recent_invoice_right>div>div:nth-of-type(2):before {
    background-image: url(data:image/png;base64,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)
}

.latest_invoice_right div::before {
    background: url(data:image/png;base64,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) no-repeat
}

.login_left_content {
    background-image: url(indigo_home.24c1c67da9f6882e5a65.jpg)
}

.home_header {
    background-image: #2f2b75
}

@media screen and (max-width:1024px) {
    .navigation_wrapper {
        background: url(indigo_home.24c1c67da9f6882e5a65.jpg) no-repeat #fff
    }
}

@-webkit-keyframes loading {
    from {
        left: 50%;
        width: 0;
        z-index: 100
    }
    33.3333% {
        left: 0;
        width: 100%;
        z-index: 10
    }
    to {
        left: 0;
        width: 100%
    }
}

@keyframes loading {
    from {
        left: 50%;
        width: 0;
        z-index: 100
    }
    33.3333% {
        left: 0;
        width: 100%;
        z-index: 10
    }
    to {
        left: 0;
        width: 100%
    }
}

.myusage_wrapper.heading {
    padding: 70px 7% 0;
    width: 100%;
    -ms-grid-columns: 10fr;
    grid-template-columns: 10fr
}

@media screen and (max-width:479px) {
    .myusage_wrapper.heading {
        padding-top: 35px
    }
}

.myusage_wrapper.heading h4 {
    justify-content: space-between;
    width: 100%
}

.myusage_wrapper.heading h4 span {
    display: flex;
    align-items: center
}

.myusage_wrapper.heading h4 span img {
    width: 45px;
    margin-right: 15px
}

.myusage_wrapper.heading h4 span.view_content {
    font-size: 18px;
    color: #2f2b75;
    cursor: pointer;
    font-weight: 500
}

@media screen and (max-width:1660px) {
    .myusage_wrapper.heading h4 span.view_content {
        font-size: 14px
    }
}

@media screen and (max-width:1660px) and (max-width:479px) {
    .myusage_wrapper.heading h4 span.view_content {
        font-size: 16px
    }
}

.myusage_wrapper.data_main {
    padding: 0 7% 70px;
    width: 100%
}

@media screen and (max-width:768px) {
    .myusage_wrapper.heading h4 span img {
        width: 40px
    }
    .myusage_wrapper.data_main {
        padding-bottom: 10px
    }
    .myusage_wrapper.data_main .desktop_view {
        display: none
    }
}

.myusage_content.mobile_view {
    width: 100%;
    margin: 0;
    padding: 15px;
    background-color: #fff;
    display: none
}

.button-row span.add_btn,
.button-row span.save_btn {
    padding-right: 10px
}

.select-text-center {
    text-align-last: left
}

.input_instruction_wrapper {
    font-size: 12px;
    text-align: right
}

.input-wrapper.logout {
    font-size: 12px;
    color: #0255a8
}

.logged-out .input-wrapper.logout {
    margin-top: 20px
}

td>div.td-error-container {
    position: relative
}

td>div.td-error-container>div.error-fields {
    bottom: -15px;
    right: 0;
    left: unset
}

@media screen and (max-width:479px) {
    .account_details .manage_account_header,
    .contact_detail_content .manage_account_header {
        flex-direction: row
    }
}

@media screen and (min-width:768px) {
    .mobile_view {
        display: none
    }
}

@media screen and (max-width:640px) {
    .select_box_main {
        margin-bottom: 20px;
        margin-top: 20px
    }
    .contact_detail_content {
        padding: 20px;
        border: 1px solid rgba(204, 204, 204, .4)
    }
    .contact_detail_content .manage_account_header {
        flex-wrap: nowrap
    }
    .contact_detail_content .manage_account_header .desktop_view {
        display: none !important
    }
}

.contact_detail_content .manage_account_header .mobile_view {
    display: none;
    text-transform: uppercase;
    color: #0255a8;
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 10px
}

@media screen and (max-width:640px) {
    .contact_detail_content .manage_account_header .mobile_view {
        display: flex
    }
}

.fixed_back {
    position: fixed;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 50px;
    left: 0;
    width: 100%
}

@media screen and (max-width:768px) {
    .myusage_content.mobile_view {
        display: flex;
        padding-bottom: 70px
    }
    .button-row span.save_btn {
        display: none
    }
    .select-text-center.mobile_view {
        display: flex
    }
    .desktop_view,
    .responsive_table .desktop_view {
        display: none
    }
    .fixed_back {
        height: 100%
    }
}

.home_screen_wrapper {
    background: #fff
}

.fixed_back+.home_header {
    background: 0 0
}

.manage_account_header {
    position: relative
}

@media screen and (max-width:479px) {
    .fixed_back {
        height: 100%
    }
    .account_detail_content.mobile_screen {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
    .account_detail_content.mobile_screen>div {
        width: 47%;
        margin-bottom: 35px
    }
    .account_detail_content.mobile_screen>div:first-child {
        width: 100%
    }
    .account_detail_content.mobile_screen>div:last-child {
        width: 100%;
        margin-bottom: 0
    }
    .manage_account_header .button-row {
        position: absolute;
        top: 7px;
        right: 0
    }
    .pop_mob_overlay.active_pop {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        z-index: 9999;
        margin-top: 0 !important;
        padding-top: 15px !important
    }
    .pop_mob_overlay.active_pop .common_main {
        border: 1px solid rgba(204, 204, 204, .4);
        padding: 20px
    }
    .pop_mob_overlay.active_pop .common_main .manage_account_header .button-row {
        display: none
    }
    .pop_mob_overlay.active_pop .address_main_wrapper {
        background: #fff;
        max-height: 75vh;
        overflow: hidden;
        overflow-y: auto
    }
    .address_main_wrapper .button-row.mobile_new {
        position: relative;
        display: flex;
        justify-content: flex-end
    }
    .address_main_wrapper .button-row.mobile_new span {
        padding: 14px;
        width: auto
    }
}

.address_main_wrapper .button-row {
    display: none
}

.mobile_pop_section {
    width: 100%
}

.contact_inner_header img.mobile_icon_drop {
    display: none
}

@media screen and (max-width:479px) {
    .address_main_wrapper {
        margin-top: 25px;
        position: relative
    }
    .address_main_wrapper .button-row {
        text-align: right;
        display: block;
        position: absolute;
        top: 8px;
        right: 15px
    }
    .address_main_wrapper .button-row span {
        color: #fe9e70;
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        width: 100%
    }
    .address_main_wrapper .button-row span:last-child {
        margin-left: 15px;
        padding-right: 0
    }
    .address_main_wrapper .button-row+div {
        margin-top: 0
    }
    .contact_inner_header .mobile_select_section {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1
    }
    .contact_inner_header img.mobile_icon_drop {
        display: inline;
        margin-left: 15px;
        width: 14px;
        height: 10px
    }
    .submit_btn_container {
        width: 100%;
        text-align: center
    }
    .form_routing>div {
        margin-bottom: 0
    }
    .date_picker_section {
        margin-bottom: 5px
    }
    .date_picker_section .error_line {
        position: absolute;
        width: 252px;
        left: -252px;
        display: flex;
        justify-content: flex-end;
        top: 0
    }
}

.main_header_container {
    position: relative;
    z-index: 1
}

.main_header_container .select_box_main {
    position: absolute;
    bottom: -95px;
    right: 95px;
    z-index: 1
}

.my_usage_wrapper .cross_btn_form {
    display: none
}

.filter_date {
    display: none
}

@media screen and (max-width:768px) {
    .format_wrapper {
        margin-top: 40px
    }
    .my_usage_wrapper {
        display: none
    }
    .my_usage_wrapper.active_pop {
        position: fixed;
        background: rgba(0, 0, 0, .5);
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 15px;
        z-index: 99999
    }
    .my_usage_wrapper.active_pop>div {
        background: #fff;
        padding: 15px;
        position: relative
    }
    .my_usage_wrapper.active_pop>div .cross_btn_form {
        border: 2px solid #4e4e4e;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        position: absolute;
        right: -13px;
        top: -17px;
        background: #fff
    }
    .filter_date {
        display: block;
        position: absolute;
        right: 0;
        top: 5px;
        width: 20px !important;
        height: 20px !important
    }
    .login_info_content {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .login_info_content div h6 {
        font-size: 17px;
        margin-bottom: 0
    }
    .login_info_content .login_info_content button {
        width: 150px
    }
}

.contact_mobile_section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    padding: 15px 0
}

.contact_mobile_section>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 48%;
    margin-bottom: 22px
}

.contact_mobile_section>div h4 {
    font-size: 16px;
    color: #fdb913;
    font-weight: 500;
    margin-bottom: 12px
}

.contact_mobile_section>div h6 {
    font-size: 14px;
    font-weight: 500
}

.contact_mobile_section>div:last-child {
    margin-bottom: 22px
}

.contact_mobile_section>div:last-child(1) {
    margin-bottom: 22px
}

.contact_form_wrapper_right .cross_btn_form {
    display: none
}

@media screen and (max-width:768px) {
    .contact_form_wrapper_right .cross_btn_form {
        display: block
    }
    .container.mobile_view_add_form {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
        left: 0;
        top: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: inherit;
        padding: 50px 15px 15px;
        z-index: 999
    }
    .container.mobile_view_add_form .inner_form {
        border: 1px solid rgba(204, 204, 204, .4);
        padding: 20px;
        max-width: 680px;
        width: 100%
    }
    .container.mobile_view_add_form>form {
        background: #fff;
        display: flex;
        position: relative;
        padding-top: 25px
    }
    .container.mobile_view_add_form>form .cross_btn_form {
        border: 2px solid #4e4e4e;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        position: absolute;
        right: -13px;
        top: -17px;
        background: #fff
    }
    .container.mobile_view_add_form .inline-fields {
        display: inline-block;
        color: #66676c;
        min-width: 49%;
        padding: 10px;
        font-weight: 300;
        background: 0 0;
        position: relative;
        height: auto
    }
}

@media screen and (max-width:768px) and (max-width:479px) {
    .container.mobile_view_add_form {
        padding-top: 20px
    }
}

@media screen and (max-width:768px) and (max-width:768px) {
    .container.mobile_view_add_form .inline-fields {
        width: 100%;
        margin-top: 15px;
        margin-bottom: 0
    }
}

@media screen and (max-width:768px) {
    .contact_form_wrapper_right.contact_page {
        display: none
    }
    .contact_form_wrapper_right.contact_page.active_pop {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        overflow-y: auto
    }
    .contact_form_wrapper_right.contact_page.active_pop .cross_btn_form {
        font-weight: 700;
        float: right;
        width: 100%;
        text-align: right;
        font-size: 20px
    }
    .contact_form_wrapper_right.contact_page.activate_pop {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        overflow-y: auto
    }
    .contact_form_wrapper_right.contact_page.activate_pop .cross_btn_form {
        font-weight: 700;
        float: right;
        width: 100%;
        text-align: right;
        font-size: 20px
    }
    .public_usage_wrapper {
        display: none
    }
}

.public_usage_wrapper .cross_btn_form,
.public_usage_wrapper.hidden {
    display: none
}

.public_usage_wrapper.active_pop {
    position: fixed;
    background: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    z-index: 1000
}

.public_usage_wrapper.active_pop>div {
    background: #fff;
    padding: 15px;
    position: relative
}

.public_usage_wrapper.active_pop>div .cross_btn_form {
    border: 2px solid #4e4e4e;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    position: absolute;
    right: -13px;
    top: -17px;
    background: #fff
}

.public_usage_wrapper .footer_btn_my_usage {
    display: none;
    width: 100%;
    display: flex;
    justify-content: flex-end
}

.public_usage_wrapper .footer_btn_my_usage>span {
    padding: 8px 20px;
    font-size: 17px;
    margin-top: 20px;
    background: #ccc;
    color: #3d3d3d
}

.public_usage_wrapper .footer_btn_my_usage>span:last-child {
    background: #2f2b75;
    color: #fff;
    margin-left: 15px
}

.contact_section_main {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(204, 204, 204, .4);
    padding: 20px 10px;
    flex-wrap: wrap;
    position: relative
}

.contact_section_main:first-child {
    margin-top: 20px
}

.contact_section_main:last-child {
    border-bottom: none
}

.contact_section_main .remove_btn {
    position: absolute;
    right: 55px;
    top: 26px;
    border: none;
    background: 0 0;
    cursor: pointer
}

.contact_section_main .remove_btn.edit_icon {
    right: 10px
}

.contact_section_main>div {
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.contact_section_main>div.contact_list_header {
    width: 100%;
    margin: 15px 0;
    border-bottom: 1px solid rgba(204, 204, 204, .4);
    font-size: 16px;
    color: #3d3d3d;
    padding-bottom: 7px;
    text-transform: uppercase
}

.contact_section_main>div h4 {
    font-size: 18px;
    color: #2f2b75;
    margin-bottom: 12px;
    font-weight: 600
}

@media screen and (max-width:768px) {
    .contact_section_main:first-child {
        margin-top: 00px
    }
    .contact_section_main>div h4 {
        font-size: 15px
    }
}

.contact_section_main>div h6 {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    width: 100%;
    overflow-wrap: break-word
}

.contact_section_main>div h6 input {
    padding: 5px 10px
}

.mobile_pop_buttons {
    display: none
}

.home_banner .select_inner>img:first-child+img {
    display: none
}

@media screen and (max-width:768px) {
    .contact_section_main>div h6 {
        font-size: 17px
    }
    .home_banner h2.select_box_main,
    .menu_extend,
    .routing_part h2.select_box_main {
        position: fixed;
        top: -200%;
        display: flex;
        justify-content: center;
        width: 100%;
        transition: 1s;
        z-index: 9999;
        margin-top: 128px;
        left: 0
    }
    .home_banner h2.select_box_main .select_inner>img:first-child {
        display: none
    }
    .home_banner .select_inner>img:first-child+img {
        display: block
    }
    .contact_details input,
    .contact_details select {
        border: 1px solid rgba(204, 204, 204, .4) !important;
        background: #fff !important
    }
}

@media screen and (max-width:479px) {
    .contact_section_main {
        padding-top: 70px
    }
    .contact_section_main>div {
        width: 48%;
        margin-bottom: 25px
    }
    .mobile_pop_buttons {
        display: flex
    }
    .main_contract .button-row {
        right: 18px;
        top: 22px
    }
    .main_right_address_wrapper>div:last-child {
        margin-top: 0
    }
    .contact_header {
        margin-top: 30px
    }
}

.form_heading_mobile {
    display: none
}

@media screen and (max-width:768px) {
    .form_heading_mobile {
        display: flex;
        width: 100%;
        align-items: center;
        text-transform: uppercase;
        font-size: 20px;
        color: #fdb913;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(204, 204, 204, .4)
    }
    .form_heading_mobile img {
        width: 40px;
        margin-right: 15px
    }
}

.footer_btn_my_usage {
    display: none
}

@media screen and (max-width:1024px) {
    .menu_icon.for_mobile {
        display: flex
    }
    .navigation_wrapper ul li.logout_btn>span {
        font-size: 24px !important;
        font-weight: 500 !important
    }
}

.main_form_wrapper {
    width: 100%
}

@media screen and (max-width:479px) {
    .moving_out .date_picker_section {
        margin-bottom: 17px
    }
    .contact_select {
        font-size: 14px
    }
    .contact_section_main>div.no_margin_required {
        margin-bottom: 0
    }
    footer .footer_links ul li a.active {
        color: #fdb913
    }
}

.chart_main {
    min-height: 350px
}

.icon_home img {
    height: 90px
}

@media screen and (max-width:1440px) {
    .icon_home img {
        height: 70px
    }
}

.contact_detail_content {
    border: 1px solid rgba(204, 204, 204, .4);
    padding: 20px
}

.contact_section_main>div.mobile_pop_buttons {
    display: none
}

@media screen and (max-width:768px) {
    .footer_btn_my_usage {
        width: 100%;
        display: flex;
        justify-content: flex-end
    }
    .footer_btn_my_usage>span {
        padding: 8px 20px;
        font-size: 17px;
        margin-top: 20px;
        background: #ccc;
        color: #3d3d3d
    }
    .footer_btn_my_usage>span:last-child {
        background: #2f2b75;
        color: #fff;
        margin-left: 15px
    }
    .adress_common_main_wrapper>h4:last-child {
        margin-bottom: 0
    }
    .main_form_wrapper {
        border: 1px solid rgba(204, 204, 204, .4);
        padding: 20px
    }
    .contact_section_main>div.mobile_pop_buttons {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        flex-direction: row
    }
    .contact_section_main>div.mobile_pop_buttons>span {
        display: flex;
        justify-content: center;
        font-weight: 500;
        float: right;
        margin-top: 20px;
        margin-right: 20px;
        color: #2f2b75;
        font-size: 14px
    }
    .myusage_wrapper.data_main {
        background: #fff
    }
}

.mobile_view_add_form {
    border-top: 1px solid rgba(204, 204, 204, .4);
    padding-top: 20px
}

.mobile_view_add_form .contact_section_main {
    margin-top: 0;
    padding: 0
}

@media screen and (max-height:560px) {
    .home_header {
        height: 100%
    }
    .other_header {
        height: 80px
    }
}

.contact_pop .confirmation_wrapper h4 {
    font-size: 24px;
    color: #0255a8;
    margin-bottom: 30px
}

.button-row.edit_mode>span {
    display: none
}

.account_detail_content_address .button-row span.save_btn {
    display: flex
}

.spinner {
    color: #999;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.spinner,
.spinner:after,
.spinner:before {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    -webkit-animation: 1.8s ease-in-out infinite spin7;
    animation: 1.8s ease-in-out infinite spin7
}

.spinner:after,
.spinner:before {
    content: '';
    position: absolute;
    top: 0
}

.spinner:before {
    left: -3.5em;
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

.spinner:after {
    left: 3.5em;
    -webkit-animation-delay: .32s;
    animation-delay: .32s
}

@-webkit-keyframes spin7 {
    0%,
    100%,
    80% {
        box-shadow: 0 2.5em 0 -1.3em
    }
    40% {
        box-shadow: 0 2.5em 0 0
    }
}

@keyframes spin7 {
    0%,
    100%,
    80% {
        box-shadow: 0 2.5em 0 -1.3em
    }
    40% {
        box-shadow: 0 2.5em 0 0
    }
}

.login_info_content button,
.overdue_dwnld,
.overdue_paynow,
.view_content {
    text-transform: uppercase
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s
}

input:checked+.slider {
    background-color: #f1aa1e
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px)
}

input:focus+.slider {
    box-shadow: 0 0 1px #f1aa1e
}

.slider.round {
    border-radius: 34px
}

.slider.round:before {
    border-radius: 50%
}

.home_widget_wrapper .widget_line {
    padding-top: 35px;
    border-top: 2px solid rgba(235, 236, 238, .5)
}

.home_widget_wrapper .promotion_invoice_wrapper {
    background: #fff
}

@media screen and (min-width:768px) {
    .home_widget_wrapper.mobile_view {
        display: none
    }
    .home_widget_wrapper.desktop_view {
        display: unset
    }
}

@media screen and (max-width:767px) {
    .home_widget_wrapper.mobile_view {
        display: unset
    }
    .home_widget_wrapper.desktop_view {
        display: none
    }
}

.justify_content_center {
    justify-content: center;
    display: flex
}

div.overdue_amount.due_today {
    color: orange
}

div.overdue_amount_value {
    color: red
}

.fixed_back {
    background-position: bottom;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .2)
}

.address_main,
.contact_detail_right,
.latest_invoice_inner,
.myusage_content div,
.navigation_wrapper ul li a,
h2,
h4,
h6 {
    color: #2f2b75 !important
}

label {
    color: #2f2b75
}

.banner_content_inner a {
    color: #fff;
    background: #fdb913
}

.navigation_wrapper ul li a.active:before {
    bottom: 0;
    top: auto;
    width: 50px
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #2f2b75
}

.format_wrapper .form-group>div button,
.invoice_overdue .overdue_btns>a,
.invoice_overdue .overdue_btns>button,
.login_info_content button,
.view_content {
    color: #fdb913 !important;
    background: 0 0 !important;
    border: none !important;
    padding-left: 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    text-align: left;
    text-decoration: underline
}

.view_content {
    color: #fdb913 !important;
    text-decoration: underline
}

.footer_img>img {
    width: 200px
}

.contact_form_listing ul li a.active {
    background: #fdb913
}

td,
td span {
    color: #2f2b75
}

h2 {
    font-weight: 600 !important
}

.banner_content_inner h2 {
    color: #fff !important
}

.myusage_wrapper {
    background: #f1f2f2
}

tspan {
    fill: #2f2b75
}

.highcharts-legend-box {
    stroke: none !important
}

.top_nav {
    background: #fff
}

.logout_btn>span {
    color: #2f2b75 !important
}

.account_detail_content_address>div>div {
    color: #2f2b75
}

.aos-init,
.more_less {
    font-size: 18px !important;
    font-weight: 400 !important
}

.latest_invoice_left>div h2,
.latest_invoice_left>div span {
    font-size: 16px
}

.latest_invoice_right div>span {
    font-weight: 600;
    font-size: 32px
}

.recent_invoice_right>div>div h6 {
    font-size: 18px;
    font-weight: 400
}

.recent_invoice_right>div>div h2 {
    font-size: 32px
}

.latest_invoice_header h2,
.manage_account_header h2,
.myusage_main_wrapper .myusage_main_header h2,
h4 {
    font-size: 22px !important;
    font-weight: 600 !important
}

.recent_invoice_right>div>span {
    color: #2f2b75
}

.routing_part {
    min-height: calc(100vh - 150px)
}

.contact_form_listing ul li a.active::after {
    border-left: 15px solid #fdb913
}

.submit_btn_container button {
    text-transform: uppercase;
    border-radius: 30px;
    width: 100px;
    height: 40px;
    line-height: 19px;
    font-size: 16px
}

.contact_detail_right {
    font-weight: 400;
    font-size: 18px
}

.account_detail_content div,
.account_detail_content h2,
.account_detail_content h4,
.account_detail_content h6,
.account_detail_content_address div,
.account_detail_content_address h2,
.account_detail_content_address h4,
.account_detail_content_address h6,
.contact_section_main div div,
.contact_section_main div h2,
.contact_section_main div h4,
.contact_section_main div h6,
.contract_detail_contact>div div,
.contract_detail_contact>div h2,
.contract_detail_contact>div h4,
.contract_detail_contact>div h6,
.login_info_content div div,
.login_info_content div h2,
.login_info_content div h4,
.login_info_content div h6 {
    font-size: 16px !important
}

.contact_inner_header {
    font-size: 22px !important;
    font-weight: 600
}

.contact_form_listing :first-child {
    font-weight: 600
}

.contact_form_listing span {
    color: #2f2b75;
    font-weight: 400
}

.inner-form-group input {
    border-color: #2f2b75 !important
}

.adress_common_main_wrapper h4 span {
    font-size: 16px
}

.adress_common_main_wrapper h4 span:nth-of-type(1) {
    font-weight: 600
}

.promotion_wrapper {
    display: none
}

.promotion_invoice_wrapper {
    -ms-grid-columns: unset;
    grid-template-columns: unset
}

.logout_btn span {
    text-transform: capitalize;
    font-size: 18px !important;
    padding-left: 45px
}

.logout_btn span img {
    display: none
}

.profile_wrapper>.manage_account_wrapper>.manage_account_header {
    display: flex;
    flex-direction: row-reverse
}

.profile_wrapper>.manage_account_wrapper>.manage_account_header h2:first-child {
    display: none
}

.format_wrapper .form-group>div button {
    text-decoration: none;
    font-size: 14px
}

.format_wrapper .form-group>div button img {
    width: 24px;
    height: 24px
}

.download_invoice img {
    cursor: pointer;
    width: 24px
}

.contact_inner_header img {
    display: none
}

.address_main {
    font-weight: 400 !important;
    font-size: 18px !important
}

.menu_header_wrapper {
    background: #fff
}

.close {
    border-color: #2f2b75 !important;
    color: #2f2b75
}

.home_banner .address_main {
    display: inline;
    font-size: 20px !important
}

.space_back_main {
    background: #fff !important
}

.contact_bottom_wrapper,
.recent_invoice_wrapper {
    background: #f1f2f2 !important;
    padding: 3% 5%
}

.banner_content_inner .overdue_amount {
    color: #fff
}

.spinner.hidden {
    display: none !important;
}

.color-empty {
    background-color: gray;
    text-align: center;
}

.select-button {
    padding: 8px 20px;
    font-size: 17px;
    margin-top: 20px;
    color: white !important;
    background: #2f2b75;
}

.select-button:hover {
    padding: 8px 20px;
    font-size: 17px;
    margin-top: 20px;
    color: white !important;
    background: #2f2b75;
    opacity: 0.8;
}

.cancel-button {
    padding: 8px 20px;
    font-size: 17px;
    margin-top: 20px;
    background: #ccc;
    color: #3d3d3d;
}

.cancel-button:hover {
    padding: 8px 20px;
    font-size: 17px;
    margin-top: 20px;
    background: #ccc;
    color: #3d3d3d;
    opacity: 0.8;
}