table {
    width: 100%;
}

#surveyMatRadioGroup mat-radio-button label.mat-radio-label {
    font-size: small !important;
}

.mat-icon {
    font-family: "Material Icons" !important;
}

.warning-message-text {
    color: #10cfbd;
}

.blue-grey-50-bg-custom {
    background-color: var(--blue-grey-50-bg-custom-color) !important;
}

.blue-100-bg-custom {
    background-color: var(--blue-100-bg-custom-color) !important;
}

.accent-600-bg-custom {
    background-color: var(--accent-600-bg-custom-color);
    box-shadow: var(--shadow) !important;
}

.mat-header-cell {
    font-size: 16px !important;
    font-weight: 900;
    background-color: var(--table-header-color) !important;
    width: initial;
    color: var(--black-color) !important;
}

.bond-grid {
    border: 1px solid #80808045;
    width: 100% !important;
}

formly-group.bond-group-grid {
    width: 100% !important;
}

formly-group.card-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
}

.bond-grid.bondData div.mat-form-field-underline {
    display: none !important;
}

.bond-checkbx {
    border: 1px solid #80808045;
    width: 100%;
    padding: 51% !important;
}

.disabledInputHighLight {
    color: black !important;
    caret-color: transparent !important;
}

.disable-autocomplete {
    pointer-events: none !important;
    opacity: 0.8 !important;
}

.hide-arrow .mat-select-arrow {
    opacity: 0.1 !important;
}

.page-layout.simple.fullwidth>.header,
.page-layout.simple.inner-sidebar>.header {
    min-height: 20px !important;
    max-height: 66px !important;
}

mat-card {
    height: 100%;
}

mat-card.mat-card.chat-card {
    padding: 0px !important;
}

mat-paginator.vc-elements .mat-paginator-page-size {
    display: none !important;
}

.vc-elements .mat-paginator-range-label {
    display: none !important;
}

.custom-asterisk {
    color: red !important;
}

.mat-menu-item.help-popups {
    padding-top: 4px !important;
    padding-bottom: 20px !important;
    height: 100% !important;
    line-height: 20px !important;
    background: whitesmoke !important;
}

.mat-menu-panel.help-texts {
    overflow: hidden !important;
    padding: 0px !important;
    max-width: 420px;
}

.mat-menu-content:not(:empty) {
    padding: 0px !important;
}

.help-header.h-20 {
    height: 30px !important;
    min-height: 20px !important;
    max-height: 40px !important;
    align-items: center;
    background-color: #23879c;
    color: papayawhip;
    text-align: center;
    padding: 6px;
}

.example-full-width {
    width: 100% !important;
}

.pull-right {
    float: right !important;
}

.center {
    text-align: center;
}

.error-snackbar {
    background-color: rgb(244, 67, 54) !important;
    color: white !important;
}

.warning-snackbar {
    background-color: #ff7007 !important;
    color: white !important;
}

.error-snackbar>.mat-simple-snackbar-action {
    color: white !important;
}

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

.bg-white-state-query {
    background: var(--state-query-hero-section-color) !important;
}

full-screen-modal {
    height: 100vh;
    width: 100vh;
    max-width: 100vh;
}

.active-viewers .mat-chip-list-wrapper {
    padding: 8px !important;
}

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

.text-wrap {
    word-wrap: break-word;
}

.nowrap {
    text-wrap: nowrap;
}

.balanceWrap {
    text-wrap: balance !important;
}

.autoWrap {
    text-wrap: auto !important;
}

.example-container {
    max-height: 1500px;
    min-height: auto;
    overflow: auto;
}

.touch-action {
    touch-action: auto !important;
}

.mat-cell,
.mat-header-cell {
    border-right: 1px solid var(--table-border-color) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

td.mat-cell,
td.mat-footer-cell,
th.mat-header-cell {
    border-bottom-width: 1px !important;
    border-right: 1px solid var(--table-border-color) !important;
    border-bottom: 1px solid var(--table-border-color) !important;
}

tr.mat-header-cell {
    border-bottom: 1px solid var(--table-border-color) !important;
}

.zero-index {
    z-index: 0;
}

th.mat-header-cell .mat-form-field-wrapper {
    padding-bottom: unset !important;
}

th.mat-header-cell .mat-form-field-appearance-legacy .mat-form-field-underline {
    bottom: 1px !important;
}


/* for paginator alignment */

mat-form-field.mat-paginator-page-size-select .mat-form-field-wrapper {
    padding-bottom: 1.25em !important;
}

mat-form-field.mat-paginator-page-size-select {
    width: auto !important;
}

mat-form-field.mat-paginator-page-size-select div.mat-form-field-underline {
    bottom: auto !important;
}

mat-paginator div.mat-paginator-page-size {
    align-items: center !important;
}

.mat-table-sticky:first-child {
    border-right: 1px solid var(--table-border-color);
}

.mat-table-sticky:last-child {
    border-left: 2px solid var(--table-border-color);
}

.myapp-no-padding-dialog .mat-dialog-container {
    padding: 0px;
}

.mat-form-field.mat-form-field-type-mat-select .mat-form-field-infix {
    width: 50px !important;
}

.backdrop {
    opacity: 0.2 !important;
}

.edit-permission-schema-dialog .mat-dialog-container {
    padding: 0px;
}

.terms-conditions .mat-dialog-container {
    padding: 0px !important;
    overflow: hidden !important;
}

.edit-agency-dialog .mat-dialog-container {
    padding: 0px;
}

.color-white {
    color: white !important;
}

.view-no-padding-dialog .mat-dialog-container {
    padding: 0px;
    overflow: auto;
}

.mat-step-icon-state-done.mat-step-icon {
    background-color: yellowgreen;
}

.mat-step-icon-state-edit.mat-step-icon.mat-step-icon-selected {
    background-color: cornflowerblue;
}

mat-dialog-content.mat-dialog-content.terms {
    max-height: 80vh !important;
}

.app-no-padding-dialog .mat-dialog-container {
    padding: 0px;
    overflow: hidden;
}

.print-no-padding-dialog .mat-dialog-container {
    padding: 0px;
    overflow: hidden;
}

.edit-no-padding-dialog .mat-dialog-container {
    padding: 0px;
    overflow: hidden;
}

.notify-main-dialog .mat-dialog-container {
    padding: 0px;
    overflow: hidden;
}

.no-padding-dialog .mat-dialog-container {
    padding: 8px;
    overflow: hidden;
    overflow-x: hidden !important;
}

.no-padding-modal .mat-dialog-container {
    overflow-x: hidden;
    padding: 0px !important;
}

.mat-dialog-container .mat-card-content {
    padding: 22px;
}

#addTransitionLogNotesModal .mat-dialog-container {
    display: block;
    overflow: hidden;
}

mat-card-actions.video-actions {
    background-color: #6b6666 !important;
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
    padding-bottom: 0 !important;
}

.mat-toolbar-row,
.mat-toolbar-single-row {
    height: 65px !important;
}

.repeat-section-border {
    border-right: 1px solid !important;
}

mat-card-header.document-card.card-header {
    background-color: #4e9ce6;
    color: #fff;
    margin-bottom: 20px;
}

.navbar-header.fuse-navy-900 {
    background-color: var(--navbar-header-color) !important;
    color: #fff !important;
    height: 65px !important;
}

.hint-text {
    font-size: 16px !important;
}

.mat-step-header .mat-step-icon-state-settings_applications.mat-step-icon,
.mat-step-header .mat-step-icon-state-attach_file.mat-step-icon,
.mat-step-header .mat-step-icon-state-person_add.mat-step-icon,
.mat-step-header .mat-step-icon-state-email.mat-step-icon {
    background-color: cornflowerblue !important;
    color: white !important;
}

.mat-step-header .mat-step-icon-state-done.mat-step-icon {
    background-color: rgb(98, 168, 27) !important;
    color: white !important;
}

.charge-btn {
    background-color: #3d455a !important;
    color: white !important;
}

.file-browse-button {
    background-color: #3d455a !important;
    color: white !important;
}

.navbar-content.fuse-navy-700 {
    background-color: var(--navbar-background-color) !important;
    color: #fff !important;
}

.icon-font-sz {
    font-size: 22px !important;
}

.app-footer {
    position: -webkit-sticky;
    /* For macOS/iOS Safari */
    position: fixed !important;
    bottom: 0 !important;
    max-height: 25vh !important;
    width: 100% !important;
    text-align: center !important;
    background: rgb(2, 0, 36) !important;
    color: white;
    font-weight: 600;
    z-index: 1000 !important;
    /* Ensure that your app's content doesn't overlap the toolbar */
}

.login-bar {
    height: 4.5vh !important;
    background: rgb(0, 0, 0) !important;
    max-height: 20vh;
}

.img-icon-class {
    object-fit: contain !important;
    width: 75%;
}

iframe #resource-container {
    padding: 4px !important;
}

.loginGradient {
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right bottom, #3498db, #2c3e50);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right bottom, #3498db, #2c3e50);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: white !important;
}

.toll-btn {
    width: 267px !important;
    height: 35px;
    border-radius: 0% !important;
}

.toll-btn-mob {
    width: 200px !important;
    height: 30px;
    color: white !important;
    align-items: flex-start !important;
}

.fs-width {
    /* width: 90%; */
    object-fit: contain;
    height: 100%;
    margin-left: 70px;
}

.fs-width-mob {
    width: 60% !important;
    object-fit: contain;
    height: 100% !important;
}

.scroll-body {
    max-height: 760px !important;
    overflow-y: scroll !important;
}

.scroll-body-mobile {
    max-height: 700px !important;
    overflow-y: scroll !important;
    overflow-y: auto !important;
}

mat-card-content.video-content {
    margin-bottom: 0px !important;
}

.cancel {
    background-color: #cdcbcb !important;
}

.content .mat-dialog-container {
    padding: 0px;
}

.mat-select-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.mat-select-search-panel {
    min-width: calc(100% + 22px) !important;
}

.mat-mini-select-search-panel {
    min-width: calc(100% + 22px) !important;
    width: 55px !important;
    max-height: 200px !important;
}

.modal-header {
    background-color: var(--light-blue-color) !important;
    padding: 16px !important;
    color: white !important;
}

.mat-dialog-container .mat-card-content.card-border {
    padding: 18px !important;
    border: 2px solid !important;
}

.tour-header {
    background-color: #d5dde0 !important;
    padding: 12px !important;
    color: black !important;
}

.mat-menu-panel.tour-step {
    overflow: hidden !important;
    border-radius: 6px !important;
    width: 300px !important;
    max-width: 300px !important;
}

.mat-card-content.panel-class-tour {
    margin-bottom: 0px !important;
    /* background-color: #e3f7382b !important; */
}

.mat-card-actions.actions-tour {
    background-color: #e3f73838 !important;
    margin-bottom: 0px !important;
}

.modal-header-recall {
    background-color: #3c4252 !important;
    padding: 12px !important;
    color: white !important;
}

.font-14 {
    font-size: 13px !important;
}

.font-18 {
    font-size: 18px !important;
}

.bold-cls {
    font-weight: bolder;
}

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

.mat-expansion-panel-header {
    /* background-color: rgba(241, 241, 241, 0.96) !important; */
}

.mat-expansion-panel-body {
    padding: 0 4px 4px !important;
}

.mat-tooltip {
    font-size: 12px !important;
}

.myPanelClass {
    margin-top: 4px !important;
}

.myPanel {
    margin-top: 30px !important;
}

.select-all {
    padding: 8px;
    background-color: var(--main-expansion-panel-header-color);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.mat-dialog-container {
    padding: 0px !important;
}

.md-drppicker.drops-down-right.ltr.shown.double {
    display: flex !important;
}

@media screen and (min-width:300px) and (max-width:1024px) {
    .md-drppicker.drops-down-right.ltr.shown.double {
        display: flex !important;
        flex-direction: column !important;
    }
}

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

cg-main-screen {
    display: block !important;
}

.initials-content {
    width: 120px !important;
    height: 48px !important;
    margin-left: 34px !important;
    margin-top: 12px !important;
    border: 1px solid grey !important;
}

body.theme-default {
    background-color: white !important;
}

.color-gray {
    color: var(--title-color);
}

iframe.myIframe-mob {
    height: 1200px !important;
}

.ngx-timepicker-control__input {
    font-size: 1.75rem !important;
}

.ngx-timepicker {
    border-bottom: 0px solid rgba(0, 0, 0, 0.12) !important;
    align-items: start !important;
    margin-bottom: -3.25rem;
}

.info-row .mat-icon.mat-warn.material-icons {
    margin-top: 7px !important;
}

.info-row .mat-icon.mat-primary.material-icons {
    color: lawngreen !important;
    font-weight: 800 !important;
    margin-top: 7px !important;
}

.password-popup {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--password-popup-background-color);
    border: 1px solid #ccc;
    font-size: 14px;
    z-index: 1000;
    width: 350px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.password-popup p {
    margin: 0;
    padding: 5px 0;
    position: relative;
}

.password-popup p mat-icon {
    display: inline-block;
    margin-right: 8px;
    font-size: 16px;
    vertical-align: middle;
    margin-left: 7px;
    color: red;
}

.password-popup p .checkmark {
    display: inline-block;
    margin-left: 8px;
    font-size: 16px;
    color: #039be5;
}

.displayAsPopup {
    position: absolute;
    z-index: 1;
}

.period-control__button {
    font-size: 1.5rem !important;
    top: 4px !important;
}

.ngx-timepicker__time-colon {
    font-size: 19px !important;
}

formly-field-mat-radio mat-radio-group mat-radio-button {
    margin-left: 12px !important;
}

.btn-align {
    float: right;
}

.recall-no-padding-dialog .mat-dialog-container {
    padding: 0px;
    overflow-y: auto;
}

.advisment-no-padding-dialog .mat-dialog-container {
    padding: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.set-bond-modal .mat-dialog-container {
    padding: 0px;
    overflow: auto;
}

.delete-permission-dialog .mat-dialog-container {
    padding: 0px;
}

.scheduler-header {
    background-color: #3c4252 !important;
    color: white !important;
}

.select-all-items {
    padding: 8px;
    background-color: lavender;
}

.ps {
    overflow: auto !important;
}

.ps__thumb-y {
    width: 0px !important;
}

.ng-scroll-content {
    display: block !important;
}

.loader {
    border: 2px solid #fff;
    border-radius: 50%;
    border-top: 3px solid #000;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
    margin: auto;
}

.ck-editor__editable_inline {
    min-height: 50vh;
}

#radioContainerAlignment .mat-radio-container {
    margin-top: 4% !important;
}

.disable-point-events {
    pointer-events: none;
}

.enable-point-events {
    pointer-events: auto;
}

.collapseBorder {
    border-collapse: collapse;
}

.iconShadow {
    box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.3);
}

.font-italic {
    font-style: italic;
}

.backIconPosition {
    left: 3%;
    position: fixed;
  }

.highlight-content {
    background-color: yellow;
    font-weight: bold;
}

.fixed-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ScrollBar Height without Content Header */
.scrollbar-height {
    height: 85dvh !important;
}


/* Flex Layout Classes Alternative */

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

.align-items-end {
    display: flex;
    align-items: flex-end;
}

.flex-column {
    display: flex;
    flex-direction: column;
}


/* Warrant Exchange CSS */
.wx-notes-requestdata-bg {
    background-color: var(--blue-grey-50-bg-custom-color) !important;
}

.labelBeforeSlide {
    vertical-align: top;
    line-height: 24px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

#stateQueryPacket .mat-content.mat-content-hide-toggle {
    margin-right: 0px !important;
}

/* FlexBox Classes */
.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-grow-2 {
    flex-grow: 2 !important;
}

.flex-grow-3 {
    flex-grow: 3 !important;
}

.flex-grow-4 {
    flex-grow: 4 !important;
}

/* CSS Grid */
.custom-grid-layout {
    display: grid;
    width: 100%;
    gap: 8px 30px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: center
  }
  
  /* For mobile devices */
  @media (max-width: 600px) {
    .custom-grid-layout {
      grid-template-columns: repeat(1, 1fr); /* 1 column */
    }
  }
  
  /* For tablets and small screens */
  @media (min-width: 601px) and (max-width: 900px) {
    .custom-grid-layout {
      grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
  }
  
  /* For larger devices */
  @media (min-width: 901px) {
    .custom-grid-layout {
      grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
  }
  

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 1024px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 52% !important;
    }
    .mat-card-content.warrant-doc formly-form formly-field formly-group {
        display: grid;
    }
    #dashboard .content {
        display: grid;
        overflow: auto;
    }
    #my-plan[_ngcontent-c32] .fuse-card-custom[_ngcontent-c32] {
        max-width: 312px !important;
    }
    #my-plan[_ngcontent-c32] .custom-height[_ngcontent-c32] {
        height: 145px !important;
    }
    #header .back-btn {
        padding-left: 8px !important;
        font-size: 12px !important;
    }
    .btn-invite {
        font-size: 10px !important;
        margin-top: 0px !important;
    }
    #error-404 .content .error-code {
        font-size: 60px !important;
    }
    #notify-main .mat-dialog-container .mat-card-content {
        padding: 14px !important;
    }
    #notify-main mat-radio-group mat-radio-button.sms-radio-btn {
        margin-left: 0px !important;
    }
    #notify-email .content {
        padding: 4px !important;
    }
    #notify-main .mat-card-actions {
        margin-bottom: 0px !important;
        padding: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .notify-main-dialog .mat-dialog-container {
        padding: 0px !important;
        overflow: auto !important;
    }
    .align-update-assignee {
        margin-right: 15px !important;
    }
    .recall-no-padding-dialog .mat-dialog-container {
        padding: 0px;
        overflow: auto !important;
    }
    .set-bond-modal .mat-dialog-container {
        padding: 0px;
        overflow: auto !important;
    }
    .sidenav[_ngcontent-c32] .chatcard[_ngcontent-c32] {
        position: fixed;
        top: 0;
        padding: 0px !important;
        left: 85%;
        width: 400px;
        border: 1px solid black;
    }
    .container .agency-creation {
        max-width: 100% !important;
    }
    .container .agency-creation div div mat-slide-toggle {
        margin-left: 16px !important;
    }
    .container .partition {
        max-width: 100% !important;
    }
    .container.agency-page-creation {
        display: block !important;
    }
    .container div.max-align {
        max-width: 100% !important;
    }
    .data-section {
        display: contents !important;
    }
    .full-align {
        max-width: 100% !important;
    }
    .edit-agency-dialog .mat-dialog-container {
        padding: 0px !important;
    }
    .cdk-overlay-pane.edit-agency-dialog {
        max-width: 100vw !important;
        pointer-events: auto;
        width: 100vw !important;
        height: 180vw !important;
        position: static;
        margin-right: 0px !important;
        overflow: auto !important;
    }
    .cdk-overlay-pane.edit-permission-schema-dialog {
        max-width: 100vw !important;
        pointer-events: auto;
        width: 100vw !important;
        height: 145vw !important;
        position: static;
        margin-right: 0px !important;
    }
    .cdk-overlay-pane.terms-conditions {
        max-width: 100vw !important;
        pointer-events: auto;
        width: 100vw !important;
        height: 181vw !important;
        position: static;
        margin-right: 0px !important;
    }
    .cdk-overlay-pane.edit-no-padding-dialog {
        max-width: 100vw !important;
        width: 500px !important;
        height: 452px !important;
    }
    .cdk-overlay-pane.delete-permission-dialog {
        width: 72vw !important;
    }
    .scroll-content {
        overflow: auto !important;
    }
    #addEditModal .mat-radio-button~.mat-radio-button {
        margin-left: 0px !important;
    }
    .not-own-profile {
        padding-left: 0px !important;
    }
    .scroll-table {
        overflow: auto !important;
    }
    .padding {
        padding-right: 0px !important;
        padding-left: 0px !important;
        padding-top: 0px !important;
    }
    .clear-all-margin {
        margin-right: 165px !important;
    }
    .example-margin {
        padding: 4px !important;
    }
    .card-content {
        padding: 0px !important;
    }
    .header-font {
        font-size: 18px !important;
    }
    .add-btn {
        margin-left: 480px !important;
    }
    .print-no-padding-dialog .mat-dialog-container {
        padding: 0px;
        overflow: auto !important;
    }
    .cdk-overlay-pane.print-no-padding-dialog {
        max-width: 100vw !important;
        pointer-events: auto;
        max-height: 100%;
        position: static;
    }
    .print-content {
        overflow: auto !important;
    }
    div.relative {
        width: 320px !important;
        height: 280px !important;
    }
    #subscriberDiv .OT_root.OT_subscriber.OT_fit-mode-cover {
        width: 320px !important;
        height: 280px !important;
    }
    .container-btn {
        float: left !important;
        width: 100% !important;
        height: 100px !important;
        margin-right: 20px !important;
    }
    div.absolute {
        position: absolute !important;
        top: 298px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
    #screen .footer {
        list-style-type: none !important;
        float: left !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-color: #333 !important;
        position: fixed !important;
        bottom: 0 !important;
        border-radius: 30px 30px 10px 10px !important;
        width: 56% !important;
    }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
    /* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
    div.absolute {
        position: absolute;
        top: 210px !important;
        right: 0;
        width: 100%;
        height: 200px;
    }
}

@media screen and (min-width: 900px) and (max-width: 1240px) {
    /* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
    div.absolute {
        position: absolute;
        top: 228px !important;
        right: 0;
        width: 100%;
        height: 200px;
    }
}

@media screen and (max-width: 320px)
/* Phones Browser Video Calls */

{
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 33% !important;
    }
    div.relative {
        width: 100% !important;
        height: 280px !important;
    }
    .table-tr-th {
        font-size: 6px !important;
    }
    div.absolute {
        top: 54px !important;
        width: 200px !important;
        height: 196px !important;
    }
    #screen .footer {
        list-style-type: none !important;
        float: left !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-color: #333 !important;
        position: fixed !important;
        bottom: 0 !important;
        border-radius: 30px 30px 10px 10px !important;
        width: 56% !important;
    }
    .fab-background {
        font-size: 16px !important;
        width: 40px;
        height: 40px;
    }
    .back-btn {
        font-size: 12px !important;
    }
    .res-toggle {
        max-width: 16% !important;
        margin-top: 4px !important;
    }
    .res-btn {
        max-width: 32% !important;
    }
    .res-icon {
        max-width: 14% !important;
    }
    div.message-row:nth-child(odd) .message {
        line-height: 3.2 !important;
        white-space: pre-wrap !important;
        background-color: #e2e3e4 !important;
        padding: 4px !important;
        width: 220px;
        border-radius: 16px !important;
        border: 1px solid !important;
    }
    form.chatform {
        width: 56vw !important;
    }
}

@media screen and (min-width: 391px) and (max-width: 800px)
/* Phablets */

{
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 40% !important;
    }
    .table-tr-th {
        font-size: 8px !important;
    }
    div.relative {
        width: 100% !important;
        height: 280px !important;
    }
    div.absolute {
        top: -2px !important;
        width: 200px !important;
        height: 196px !important;
    }
    cg-conference .modal-header {
        background-color: #3c4252 !important;
        height: 37px;
        font-size: 12px;
        color: white !important;
    }
    .OT_mirrored.OT_root.OT_publisher.OT_fit-mode-cover.OT_mini {
        height: 20vh;
    }
    #screen .footer {
        list-style-type: none !important;
        float: left !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-color: #333 !important;
        position: fixed !important;
        bottom: 0 !important;
        border-radius: 30px 30px 10px 10px !important;
        width: 56% !important;
    }
    .fab-background {
        font-size: 14px !important;
        width: 40px;
        height: 40px;
    }
    .back-btn {
        font-size: 16px !important;
    }
    .res-toggle {
        max-width: 18% !important;
        margin-top: 4px !important;
    }
    .res-btn {
        max-width: 30% !important;
    }
    .res-icon {
        max-width: 12% !important;
    }
    form.chatform {
        width: 56vw !important;
    }
}

@media screen and (min-width: 400px) and (max-width: 870px)
/* X-Phablets */

{
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 44% !important;
    }
    .table-tr-th {
        font-size: 8px !important;
    }
    div.relative {
        width: 100% !important;
        height: 280px !important;
    }
    div.absolute {
        top: 2px !important;
        width: 200px !important;
        height: 196px !important;
    }
    #screen .footer {
        list-style-type: none !important;
        float: left !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-color: #333 !important;
        position: fixed !important;
        bottom: 0 !important;
        border-radius: 30px 30px 10px 10px !important;
        width: 56% !important;
    }
    form.chatform {
        width: 56vw !important;
    }
}

@media screen and (min-width: 740px) and (max-width: 1080px)
/* TABS/PADS */

{
    .table-tr-th {
        font-size: 8px !important;
    }
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 40% !important;
    }
    div.relative {
        width: 100% !important;
        height: 760px !important;
    }
    .mobVerticleLayout .OT_root.OT_subscriber.OT_fit-mode-cover {
        width: 100% !important;
        height: 450px !important;
    }
    .mobVerticleLayout .OT_mirrored.OT_root.OT_publisher.OT_fit-mode-cover {
        width: 100% !important;
        height: 450px !important;
    }
    .sidenav[_ngcontent-c32] .chatcard[_ngcontent-c32] {
        position: fixed;
        top: 0;
        padding: 0px !important;
        left: 60%;
        width: 400px;
        border: 1px solid black;
    }
    div.absolute {
        top: 110px !important;
        width: 200px !important;
        height: 196px !important;
    }
    #screen .footer {
        list-style-type: none !important;
        float: left !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-color: #333 !important;
        position: fixed !important;
        bottom: 0 !important;
        border-radius: 30px 30px 10px 10px !important;
        width: 56% !important;
    }
    form.chatform {
        width: 36vw !important;
    }
    .scroll-body-mobile {
        max-height: 920px !important;
        overflow-y: scroll !important;
        overflow-y: auto !important;
    }
    iframe.myIframe-mob {
        height: 1400px !important;
    }
}

@media screen and (min-width: 600px) and (max-width: 800px) {
    /* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
    div.absolute {
        top: 42px !important;
        width: 200px !important;
        height: 196px !important;
    }
}

@media screen and (min-width: 1400px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 51% !important;
    }
    div.absolute {
        position: absolute !important;
        top: 400px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
    iframe.myIframe-mob {
        height: 1400px !important;
    }
}

@media screen and (min-width: 1600px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 51% !important;
    }
    div.absolute {
        position: absolute !important;
        top: 529px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 96px !important;
    }
}

.bond-checkbx-width
{
    width: 8.5vw !important;
    min-width: 8.5vw !important;
    padding-left: 4vw !important;
}

@media screen and (min-width: 1800px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 51% !important;
    }
    div.absolute {
        position: absolute !important;
        top: 586px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
}

@media screen and (min-width: 1900px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 51% !important;
    }
    div.absolute {
        position: absolute !important;
        top: 587px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
}

@media screen and (min-width: 2000px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 51% !important;
    }
    div.absolute {
        position: absolute !important;
        top: 698px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
}

@media screen and (min-width: 2200px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 68% !important;
    }
    div.absolute {
        position: absolute !important;
        top: 690px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
}

@media screen and (min-width: 2400px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 58% !important;
    }
    div.absolute {
        position: absolute !important;
        top: 1037px !important;
        right: 0 !important;
        width: 300px !important;
        height: 200px !important;
    }
}

@media screen and (min-width: 3400px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 111% !important;
    }
}

@media screen and (min-width: 3500px) and (max-width: 5000px) {
    .bond-checkbx {
        border: 1px solid #80808045;
        width: 100%;
        padding: 72% !important;
    }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .mat-select-panel {
        max-width: 100% !important;
    }
}

@media (min-width: 1024px) and (max-width: 1100px) {
    .fs-width {
        object-fit: contain;
        height: 100%;
    }
    .login-cls {
        max-width: 34% !important;
    }
    .back-clr {
        padding: 14px !important;
    }
    .login-contact-cls {
        margin-right: 14px !important;
    }
    .twitter-icon {
        padding-right: 90px !important;
    }
    .large-screen-font {
        font-size: 15px !important;
    }
}

@media (min-width: 1100px) and (max-width: 1300px) {
    .fs-width {
        object-fit: contain;
        margin-left: 64px !important;
    }
    .login-cls {
        max-width: 33% !important;
    }
    .back-clr {
        padding: 20px !important;
    }
    .login-contact-cls {
        margin-right: 14px;
    }
    .twitter-icon {
        padding-right: 88px !important;
    }
    .large-screen-font {
        font-size: 12px !important;
    }
    .scroll-body {
        max-height: 500px !important;
        overflow-y: scroll !important;
    }
    iframe.myIframe {
        height: 1200px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1100px) {
    iframe.myIframe {
        height: 1350px !important;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    iframe.myIframe {
        height: 1350px !important;
    }
}

@media (min-width: 1400px) and (max-width: 1600px) {
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 100px !important;
    }
    .login-cls {
        max-width: 30% !important;
    }
    .back-clr {
        padding: 40px !important;
    }
    .login-contact-cls {
        margin-right: 30px;
    }
    .twitter-icon {
        padding-right: 124px !important;
    }
    .large-screen-font {
        font-size: 24px !important;
    }
    .scroll-body {
        max-height: 600px !important;
        overflow-y: scroll !important;
    }
    iframe.myIframe {
        height: 1200px !important;
    }
}

@media (min-width: 2400px) {
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 120px !important;
    }
    .login-cls {
        margin-right: 90px !important;
        max-width: 30% !important;
        padding: 40px !important;
    }
    .back-clr {
        padding: 70px !important;
    }
    .login-contact-cls {
        margin-right: 90px;
    }
    .twitter-icon {
        padding-right: 200px !important;
    }
    .large-screen-font {
        font-size: 28px !important;
    }
    .scroll-body {
        max-height: 1200px !important;
        overflow-y: scroll !important;
    }
    iframe.myIframe {
        height: 1200px !important;
    }
}

@media (min-width: 2000px) and (max-width: 2500px) {
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 100px !important;
    }
    .login-cls {
        margin-right: 74px !important;
        max-width: 30% !important;
        padding: 40px !important;
    }
    .back-clr {
        padding: 40px !important;
    }
    .login-contact-cls {
        margin-right: 70px;
    }
    .twitter-icon {
        padding-right: 164px !important;
    }
    .large-screen-font {
        font-size: 28px !important;
    }
    .scroll-body {
        max-height: 1200px !important;
        overflow-y: scroll !important;
    }
    iframe.myIframe {
        height: 440px !important;
    }
    .btn-colors {
        padding-right: 316px !important;
        float: right !important;
        margin-top: 600px !important;
    }
}

@media (min-width: 1800px) and (max-width: 2000px) {
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 60px !important;
    }
    .login-cls {
        margin-right: 70px !important;
        max-width: 30% !important;
    }
    .back-clr {
        padding: 40px !important;
    }
    .login-contact-cls {
        margin-right: 33px;
    }
    .twitter-icon {
        padding-right: 112px !important;
    }
    .large-screen-font {
        font-size: 28px !important;
    }
    .scroll-body {
        max-height: 900px !important;
        overflow-y: scroll !important;
    }
    iframe.myIframe {
        height: 1200px !important;
    }
}

@media screen and (min-width: 1024px) {
    .login-cls {
        margin-right: 54px !important;
    }
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 64px !important;
    }
    .fs-width-safari {
        object-fit: contain;
        height: 100%;
        margin-left: -38px !important;
    }
}

@media screen and (min-width: 1280px) {
    .login-cls {
        margin-right: 62px !important;
    }
    .login-contact-cls {
        margin-right: 22px !important;
    }
    .twitter-icon {
        padding-right: 98px !important;
    }
}

@media screen and (min-width: 1366px) {
    .login-cls {
        margin-right: 74px !important;
    }
    .login-contact-cls {
        margin-right: 40px !important;
    }
    .twitter-icon {
        padding-right: 120px !important;
    }
}

@media screen and (min-width: 1440px) {
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 80px !important;
    }
    .twitter-icon {
        padding-right: 110px !important;
    }
    .login-contact-cls {
        margin-right: 38px !important;
    }
    .fs-width-safari {
        object-fit: contain;
        height: 100%;
        margin-left: -8px !important;
    }
}

@media screen and (min-width: 1680px) {
    .login-cls {
        margin-right: 100px !important;
    }
    .login-contact-cls {
        margin-right: 60px !important;
    }
    .twitter-icon {
        padding-right: 140px !important;
    }
    .fs-width {
        margin-left: 98px !important;
    }
    .fs-width-safari {
        object-fit: contain;
        height: 100%;
        margin-left: 20px !important;
    }
}

@media screen and (min-width: 1920px) {
    .login-cls {
        margin-right: 104px !important;
    }
    .login-contact-cls {
        margin-right: 64px !important;
    }
    .twitter-icon {
        padding-right: 144px !important;
    }
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 116px !important;
    }
    .fs-width-safari {
        object-fit: contain;
        height: 100%;
        margin-left: 20px !important;
    }
}

@media screen and (min-width: 2048px) {
    .login-contact-cls {
        margin-right: 104px !important;
    }
    .twitter-icon {
        padding-right: 184px !important;
    }
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 136px !important;
    }
    .fs-width-safari {
        object-fit: contain;
        height: 100%;
        margin-left: 30px !important;
    }
}

@media screen and (min-width: 2560px) {
    .login-cls {
        margin-right: 124px !important;
    }
    .login-contact-cls {
        margin-right: 124px !important;
    }
    .twitter-icon {
        padding-right: 200px !important;
    }
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 168px !important;
    }
    .fs-width-safari {
        object-fit: contain;
        height: 100%;
        margin-left: 66px !important;
    }
}

@media (min-width: 1300px) and (max-width: 1800) {
    .fs-width {
        object-fit: contain;
        height: 100%;
        margin-left: 60px !important;
    }
    .login-cls {
        margin-right: 44px !important;
        max-width: 30% !important;
        padding: 40px !important;
    }
    .back-clr {
        padding: 40px !important;
    }
    .login-contact-cls {
        margin-right: 30px;
    }
    .twitter-icon {
        padding-right: 124px !important;
    }
    .large-screen-font {
        font-size: 24px !important;
    }
    .scroll-body {
        max-height: 700px !important;
        overflow-y: scroll !important;
    }
    iframe.myIframe {
        height: 700px !important;
    }
}

@media screen and (max-width:780px) {
    .bond-grid {
        border: none;
        width: 100% !important;
    }
    .bond-checkbx {
        border: none;
        padding: 0px !important;
        margin-left: 8px;
        padding-top: 0px !important;
    }
}

.signature-svg-cursor {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='35'%3E%3Crect x='0' y='0' width='110' height='35' style='fill-opacity:0.6; fill: %2398abe3; stroke-width: 3; stroke: rgb(0,0,0);'/%3E%3Ctext x='55' y='17' dominant-baseline='middle' font-weight='bold' text-anchor='middle' id='text4'%3ESign%3C/text%3E%3C/svg%3E%0A"), auto;
}

.initial-svg-cursor {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='35'%3E%3Crect x='0' y='0' width='110' height='35' style='fill-opacity:0.6; fill: %2398abe3; stroke-width: 3; stroke: rgb(0,0,0);'/%3E%3Ctext x='55' y='17' dominant-baseline='middle' font-weight='bold' text-anchor='middle' id='text4'%3EInitial%3C/text%3E%3C/svg%3E%0A"), auto;
}

.date-svg-cursor {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='35'%3E%3Crect x='0' y='0' width='110' height='35' style='fill-opacity:0.6; fill: %2398abe3; stroke-width: 3; stroke: rgb(0,0,0);'/%3E%3Ctext x='55' y='17' dominant-baseline='middle' font-weight='bold' text-anchor='middle' id='text4'%3EDate%3C/text%3E%3C/svg%3E%0A"), auto;
}

.backdropBackground {
    backdrop-filter: blur(10px) !important;
}

@import "~@angular/material/theming";
@import "~jsoneditor/dist/jsoneditor.min.css";
.mat-checkbox-layout {
    white-space: normal !important;
}

@include mat-core();

/* Below CSS is for to hide show password button on Edge Browser */

@supports (-ms-ime-align:auto) {
    input[type="password"] {
        -webkit-text-security: disc !important;
    }
}

input[type="password"]::-ms-reveal {
    display: none;
}