/* You can add global styles to this file, and also import other style files */

@import './styles-variables.scss';
@import "~ng-pick-datetime/assets/style/picker.min.css";
// @import "~angular2-multiselect-dropdown/themes/default.theme.css";
// @import url(./assets/css/placeholder-loading.css);
@font-face {
    font-family: "Roboto-Light";
    /* Not used */
    src: url("./assets/fonts/Roboto/Roboto-Light.ttf");
}

@font-face {
    font-family: "Roboto-Regular";
    /* Most used */
    src: url("./assets/fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto-Medium";
    /* Less used */
    src: url("./assets/fonts/Roboto/Roboto-Medium.ttf");
}

@font-face {
    font-family: "Roboto-Bold";
    /* Used to highlight as well as indicate selected text */
    src: url("./assets/fonts/Roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: "Roboto-Black";
    /* Not used */
    src: url("./assets/fonts/Roboto/Roboto-Black.ttf");
}

body {
    overflow: hidden;
    font-family: $fontFamilyBase;
    height: 100vh;
    font-size: $fontSizeBase;
    #iframe {
        height: 100vh;
        width: 100vw;
    }
}

.dropdown-menu {
    font-size: 0.84rem !important;
}

.pageHeading {
    font-family: $fontFamilyMedium;
    font-size: 1.4rem;
    color: $text-color-base;
    border-bottom: 1px solid $container-borderClr !important;
    padding-bottom: 0.8rem;
}

.app-container {
    height: 100vh;
    font-family: $fontFamilyBase;
    font-size: $fontSizeBase;
    overflow: hidden;
    width: 100vw;
}

.cc-head {
    position: absolute;
    top: 15px;
    left: 14px;
}

// Container class if nothing present other than header
.main-content {
    overflow: auto;
    height: calc(100vh - 64px);
    // margin-top: 5px;
    background-color: $tree-bg;
    padding-top: 10px;
}

// container only if breadcrumb is present
.sub-main-content {
    overflow: auto;
    height: calc(100vh - 35px - 35px - 35px - 3px);
}

// Container class if breadcrumb and button panel present
.sub-main-content-with-panel {
    overflow: auto;
    height: calc(100vh - 35px - 35px - 35px - 3.5rem);
}

// nav bar style --- starts here
.nav {
    .nav-item {
        margin-left: 20px;
        padding: 4px 0px;
        cursor: pointer;
        // font-weight: 600;
        font-family: $fontFamilyMedium;
        opacity: 1;
        color: $text-color-dark;
    }
    .nav-clock {
        position: absolute;
        right: 2rem;
        padding: 4px 0px;
        font-family: $fontFamilyMedium;
        opacity: 1;
        color: $text-color-dark;
    }
    .nav-item:hover {
        color: $nav-itemHoverClr;
    }
    .active {
        border-bottom: 3px solid $nav-itemHoverClr;
        opacity: 1;
        color: $text-color-base;
    }
}

// navbar style ends here
// custom nav bar style --- starts here
.container-body {
    padding: 10px 20px;
    border: 1px solid $container-borderClr;
    height: 89%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: $color-white;
}

.container-body-with-breadcrumb {
    height: calc(100vh - 10.7rem);
    overflow: auto;
}

.nav-cards {
    .nav-item {
        background: $nav-itembgClr 0% 0% no-repeat padding-box;
        border: 1px solid $nav-itemBorderClr;
        border-radius: 4px 4px 0px 0px;
        // opacity: 0.7;
        margin-right: 2px;
        margin-left: 0;
        padding: 5px 20px;
        margin-bottom: -1px;
        z-index: 1;
    }
    .nav-item:hover {
        color: $nav-itemHoverClr;
        // font-weight: 600;
    }
    .active {
        // font-weight: 600;
        opacity: 1;
        background: $activeClr 0% 0% no-repeat padding-box;
        border-color: $nav-itemBorderClr $nav-itemBorderClr $color-white;
    }
}

// custom navbar style ends here
// Main Header styles ends here
// scrollbar styles starts here
::-webkit-scrollbar {
    width: 7px;
    height: 8px;
}


/* Track */

::-webkit-scrollbar-track {
    background: $webkit-scrollbar-trackBgClr;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: $webkit-scrollbar-thumbBgClr;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: $webkit-scrollbar-thumbHoverBgClr;
}

// Scrollbar styles ends here
// ====================== For Angular Tree Module ====================================
body {
    margin: auto;
}


/* You can add global styles to this file, and also import other style files */

// @import '~@circlon/angular-tree-component/css/angular-tree-component.css';
.expand-tree .tree-children.tree-children-no-padding {
    padding-left: 0;
}

.expand-tree .tree-children {
    padding-left: 20px;
    overflow: hidden;
}

.expand-tree .node-drop-slot {
    display: block;
    height: 2px;
}

.expand-tree .node-drop-slot.is-dragging-over {
    background: $node-drop-slotBgClr;
    height: 20px;
    border: 2px dotted $node-drop-slotBrderClr;
}

.expand-tree .toggle-children-wrapper-expanded .toggle-children {
    /*transform: rotate(90deg) */
}

.expand-tree .toggle-children-wrapper-collapsed .toggle-children {
    /*transform: rotate(0);*/
}

.expand-tree .toggle-children-wrapper {
    padding: 8px 10px;
}


/* tslint:disable */

.expand-tree .toggle-children {
    //   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC');
    height: 15px;
    width: 16px;
    background-size: contain;
    display: inline-block;
    position: relative;
    top: 1px;
    background-repeat: no-repeat;
    background-position: center;
}

.expand-tree .toggle-children-placeholder {
    display: inline-block;
    height: 10px;
    width: 10px;
    position: relative;
    top: 1px;
    padding-right: 3px;
}

.expand-tree .node-content-wrapper {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border-radius: 2px;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.expand-tree .node-wrapper {
    display: flex;
    align-items: flex-start;
}

.expand-tree .node-content-wrapper-active,
.expand-tree .node-content-wrapper.node-content-wrapper-active:hover,
.expand-tree .node-content-wrapper-active.node-content-wrapper-focused {
    background: $node-content-wrapper-activeBgClr;
}

.expand-tree .node-content-wrapper-focused {
    background: $node-content-wrapper-focusedBgClr;
}

.expand-tree .node-content-wrapper:hover {
    background: $node-content-wrapperHoverBgClr;
}

.expand-tree .node-content-wrapper-active,
.expand-tree .node-content-wrapper-focused,
.expand-tree .node-content-wrapper:hover {
    box-shadow: inset 0 0 1px $node-content-wrapperHoverBoxShadow;
}

.expand-tree .node-content-wrapper.is-dragging-over {
    background: $is-dragging-overBg;
    box-shadow: inset 0 0 1px $node-content-wrapperHoverBoxShadow;
}

.expand-tree .node-content-wrapper.is-dragging-over-disabled {
    opacity: 0.5;
}

.expand-tree tree-viewport {
    // height: 100%;
    height: 93%;
    overflow: auto;
    display: block;
}

.hierachy-tree tree-viewport {
    height: auto !important;
}

.expand-tree .tree-children {
    padding-left: 20px;
}

.expand-tree .empty-tree-drop-slot .node-drop-slot {
    height: 20px;
    min-width: 100px;
}

.expand-tree .angular-tree-component {
    width: 100%;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* non-prefixed version, currently not supported by any browser */
}

.expand-tree tree-root .angular-tree-component-rtl {
    direction: rtl;
}

.expand-tree tree-root .angular-tree-component-rtl .toggle-children-wrapper-collapsed .toggle-children {
    transform: rotate(180deg) !important;
}

.expand-tree tree-root .angular-tree-component-rtl .tree-children {
    padding-right: 20px;
    padding-left: 0;
}

.expand-tree div.angular-tree-component div.tree-children::before,
.expand-tree div.angular-tree-component::before {
    content: "";
    position: absolute;
    border-left: 1px dotted $expand-treeBorder-leftClr;
    height: 100%;
    top: -10px;
    left: 6px;
}

.expand-tree div.angular-tree-component {
    padding: 0;
    margin: 0;
}

.expand-tree div.angular-tree-component div.tree-children {
    position: relative;
    padding-left: 0;
    margin-left: 16px;
}

.expand-tree div.angular-tree-component div.tree-children::before {
    left: 5px;
}

.expand-tree .node-drop-slot {
    height: 2px;
}

.expand-tree div.angular-tree-component tree-node>div>.node-wrapper {
    margin-left: 24px;
}

.expand-tree div.angular-tree-component tree-node>div>.node-wrapper>.node-content-wrapper {
    margin-left: 4px;
}

.expand-tree div.angular-tree-component tree-node>div.tree-node-leaf .node-wrapper {
    margin-left: 0;
    position: relative;
}

.expand-tree div.angular-tree-component tree-node>div::before {
    content: "";
    position: absolute;
    border-bottom: 1px dotted $expand-treeBorder-leftClr;
    width: 7px;
    margin-top: 12px;
    left: 6px;
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper {
    width: 10px;
    height: 5px;
    border: 1px solid $expand-treeBorder-leftClr;
    position: relative;
    margin-top: 3px;
    margin-left: 14px;
    display: inline-block;
    background-color: $color-white;
    z-index: 1;
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper::before {
    content: "";
    display: inline-block;
    width: 8px;
    border-top: 1px solid $expand-treeBorder-leftClr;
    position: absolute;
    top: 45%;
    left: 25%;
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
    content: "";
    display: inline-block;
    height: 7px;
    border-left: 1px solid $expand-treeBorder-leftClr;
    position: absolute;
    top: 4.5px;
    left: 8.5px;
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper .toggle-children {
    display: none;
}

.expand-tree div.angular-tree-component tree-node>div .node-content-wrapper {
    margin: 0;
    padding: 3px 0px 0px 5px;
    box-shadow: none;
    background: none;
}

.expand-tree div.angular-tree-component>tree-node>div::before {
    left: 14px;
}

.sports {
    background-position: -96px -72px;
}

.icons-medium {
    // background: url(./assets/angular-tree/blank-file.svg);
    background-repeat: no-repeat;
    padding-left: 20px;
    height: 10px;
    width: 10px;
}

.navbar-dark .navbar-nav .nav-link {
    color: $nav-linkClr !important;
}

.navbar {
    .nav-item {
        &.nav-link {
            &.dropdown-toggle:hover {
                background: $nav-dropdownHoverBgClr 0% 0% no-repeat padding-box;
            }
        }
    }
}

// Main Header styles ends here
.overflow-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre;
}

// Main Header styles ends here
.cursor-pointer {
    cursor: pointer;
}

// Table custom classes for columns starts here
.long-width {
    min-width: 250px !important;
    max-width: 250px !important;
}

.medium-width {
    min-width: 220px !important;
    max-width: 220px !important;
}

.medium-width2 {
    min-width: 185px !important;
    max-width: 185px !important;
}

.action-good {
    color: $action-goodClr !important;
}

.action-danger {
    color: $action-dangerClr !important;
}

.action-info {
    color: $clickable-element-clr !important;
}

// Table custom classes for columns ends here
// Table styles (general)
.table {
    thead {
        background-color: $table-header-bg-clr;
    }
    tbody {
        background-color: $color-white;
    }
}

//Button custom styles are given below
.btn {
    font-size: inherit !important;
}

.btn-primary {
    border-color: $btn-primary-border-color !important;
    background-color: $btn-primary-background-color !important;
    color: $btn-primary-text-color !important;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-primary:hover {
    border-color: $btn-primary-hover-border-color !important;
    background-color: $btn-primary-hover-background-color !important;
    color: $btn-primary-hover-text-color !important;
}

.btn:active:focus,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    // box-shadow: 0 0 0 0.2rem #498493 !important;
    box-shadow: none !important;
}

//secondary button css
.btn-secondary {
    background-color: transparent !important;
    color: $btn-secondary-text-color !important;
    border-color: $btn-secondary-border-color !important;
}

.btn-secondary:hover {
    background-color: $btn-secondary-hover-background-color !important;
    color: $btn-secondary-hover-text-color !important;
    border-color: $btn-secondary-hover-border-color !important;
}

.button-panel {
    position: fixed;
    bottom: 2rem;
    width: 100vw;
    padding: 10px 0;
    height: 3.3rem;
}

// Toaster Style starts here
.toast-close-button,
button.toast-close-button {
    padding: 11px !important;
}

.toast-container>div {
    width: 400px !important;
}

// Toaster Style ends here
// Heading style starts
.main-heading {
    color: $text-color-base;
    font-family: $fontFamilyMedium;
    font-size: 18px;
}

.sub-heading {
    color: $zs-main-color;
    font-family: $fontFamilyMedium;
}

.grey-label {
    font-family: $fontFamilyMedium;
    color: $text-color-base;
}

.info-clr {
    color: #A8A8A8 !important;
}

// Heading style ends
// Form Control style overrideing start
.form-control {
    font-size: inherit !important;
}

.form-control:focus {
    box-shadow: none !important;
}

.required::after {
    content: "*";
    color: $action-dangerClr;
}

// Form Control style overrideing end
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 0 !important;
}

.no-table-rows div.paging_simple_numbers {
    display: none !important;
}

.activePointer {
    pointer-events: pointer;
}

.clickable-element {
    color: $clickable-element-clr !important;
    cursor: pointer !important;
    &:hover {
        text-decoration: underline !important;
    }
}


/* DataTable Styles*/

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid $color-white !important;
}

div.dataTables_scrollBody>table>tbody>tr>td {
    padding-left: 16px !important;
    &.table-cell,
    &.table-cell-action {
        cursor: default;
    }
    &.table-cell.row-click-active,
    .clickable-element {
        cursor: pointer;
    }
}

div.dataTables_scrollBody>table {
    padding-top: 0 !important;
}

.dataTables_scroll .dataTables_scrollHeadInner {
    min-width: 100%;
}

.table-filter-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
}

div.dt-buttons {
    position: relative !important;
    float: right !important;
}

.color-light-gray {
    background-color: $bg-gray;
}

span.ph-item {
    min-height: 20px;
    pointer-events: none;
}

.cell-processing .form-control,
.cell-processing .checkbox-span {
    display: none;
}

.text-hide {
    font: 0/0 a !important;
    color: transparent !important;
    text-shadow: none !important;
    background-color: $bg-gray !important;
    border: 0 !important;
}

.customSelect .ng-select-container {
    background: transparent !important;
    border: 0px !important;
    // border-bottom: 1px solid gray !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.customSelect .ng-select-container .ng-value-container .ng-placeholder {
    // color: #888c9b !important;
    // font-weight: 500 !important;
    color: $placeholder-clr !important;
    font-family: $fontFamilyBase;
}

.customSelect .ng-select-single .ng-select-container .ng-value-container .ng-value {
    color: $text-color-base !important;
    // font-weight: 400 !important;
}

.customSelect.ng-select.ng-select-single .ng-select-container .ng-value-container,
.customSelect.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value {
    padding-left: 0px !important;
}

.customSelect.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
    padding-left: 0 !important;
}

.customSelect,
.ng-select div,
.ng-select input,
.customSelect span {
    font-weight: 400 !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid $container-borderClr !important;
}

.serverside-table {
    .dataTables_scrollBody {
        thead {
            visibility: collapse;
        }
    }
}

.serverside-table .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .5rem .75rem !important;
    border: 1px solid $container-borderClr !important;
    color: $text-color-dark !important;
    border-radius: 0px !important;
    margin-left: unset !important;
    &:hover {
        text-decoration: none !important;
        background: $hover-Bg-clr !important;
        border-color: $container-borderClr !important;
        color: $text-color-dark !important;
    }
}

.serverside-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.serverside-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: $nav-itemBorderClr !important;
    color: $text-color-base !important;
    border-color: $pagination-bg-clr !important;
    font-family: $fontFamilyMedium !important;
}

.serverside-table .dataTables_wrapper .dataTables_paginate .previous {
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}

.serverside-table .dataTables_wrapper .dataTables_paginate .next {
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

// modal style --- starts
.standard-modal-dqm {
    .modal-dialog {
        max-width: 1020px;
    }
}

// modal style --- ends
.page-item.active .page-link {
    background-color: $nav-itemBorderClr !important;
    color: $text-color-base !important;
    border-color: $pagination-bg-clr !important;
    font-family: $fontFamilyMedium !important;
}

.page-link {
    color: $text-color-dark !important;
}

.page-link :focus {
    box-shadow: 0 0 0 0.2rem #327f9740 !important;
}

.clickable {
    color: $clickable-element-clr;
    cursor: pointer;
}

// accordion
.accordion-header {
    font-size: 0.9rem;
    font-family: $fontFamilyMedium;
    color: $text-color-base;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    font-size: 0.85rem;
}

.ng-dropdown-panel .ng-dropdown-panel-items {
    max-height: 180px !important;
}

.ng-select .ng-clear-wrapper {
    padding-left: 5px !important;
}

.ng-select.ng-select-disabled>.ng-select-container {
    background-color: $hover-Bg-clr !important;
}

// .ng-select {
//     .ng-select-container {
//         .ng-value-container {
//             flex-wrap: wrap;
//             min-width: 0;
//             .ng-value {
//                 white-space: nowrap;
//                 min-width: 0;
//                 display: flex;
//                 max-width: 95%;
//                 .ng-value-label {
//                     // @include wrapt-text;
//                     white-space: nowrap;
//                     overflow: hidden;
//                     text-overflow: ellipsis;
//                 }
//             }
//         }
//     }
// }
.records-available {
    color: $bg-gray;
    font-size: 25px !important;
    font-size: 1.875rem !important;
}

.modal-content {
    font-size: $fontSizeBase;
}

.modal-header {
    padding: 1rem 2rem !important;
    .close {
        background: none;
        border: 0;
        font-size: 1.5rem;
    }
}

.modal-body {
    padding: 1rem 2rem !important;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
    // position: relative;
    // padding-left: 28px;
    // cursor: pointer;
    // line-height: 20px;
    // display: inline-block;
    // color: #666;
}

[type="radio"]:checked+label:before {
    content: "";
    position: absolute;
    left: -1px;
    top: 2px;
    width: 15px;
    height: 15px;
    border: 1px solid #888282;
    border-radius: 100%;
    background: #fff;
}

[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
    content: "";
    width: 9px;
    height: 9px;
    background: #ed8b00;
    position: absolute;
    top: 5px;
    left: 2px;
    border-radius: 100%;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

input[type="checkbox"] {
    border: 1px solid #888282;
    appearance: none;
    padding: 8px !important;
    border-radius: 2px;
    margin-top: 2px;
}

input[type="checkbox"]:checked {
    background-color: $clickable-element-clr !important;
}

input[type="checkbox"]+label {
    padding-left: 4px;
}

input[type="checkbox"]+label::before {
    content: '\2713';
    display: inline-block;
    color: white;
    position: absolute;
    left: 4px;
}

//multi-select dropdown position
.sub-headaing {
    color: $zs-main-color;
    font-weight: bold;
}

button[aria-label="Close"]:focus {
    outline: none;
}

.is-invalid {
    .ng-select-container {
        border-color: #dc3545 !important;
    }
}

// For bigger popups
.standard-modal-full-width {
    .modal-lg,
    .modal-xl {
        max-width: calc(100vw - 1rem);
        .modal-body {
            height: calc(100vh - 9.4rem);
            max-height: calc(100vh - 9.4rem);
        }
    }
}


/*media quieries for tablet device*/

@media screen and (min-width:760px) and (max-width: 630px) {
    .card-link,
    .card-text {
        font-size: 0.75rem !important;
    }
}

@media screen and (max-width: 768px) {
    .inner-container {
        height: 60vh !important;
    }
    .welcome-text {
        font-size: 1.2rem !important;
    }
    .description {
        font-size: 18px !important;
    }
}

// @media screen and (max-width: 768px){
//     .card-subtitle{width:100% !important;}
// }
@media screen and (max-width:768px) and (min-width:634px) {
    .tablet-view {
        width: 121px !important;
    }
    .responsive {
        width: 121px !important;
    }
    .nav-clock {
        margin-left: 20px;
        position: unset !important;
    }
}

@media only screen and (min-width:760px) and (max-width:630px) {
    .landscape {
        width: 296px !important;
    }
}


/*Desktop*/

@media only screen and (min-width: 992px) {
    .card-subtitle {
        width: 126px !important;
    }
}


/*Huge*/

@media only screen and (min-width: 1280px) {
    .card-subtitle {
        width: 126px !important;
    }
}


/*portrait for tablet-view*/

@media only screen and (min-width:630px) and (max-width:760px) {
    // #portrait-mode{
    //     padding: 0px 0px !important;
    //     width: 12% !important;
    //     text-align: center;
    //     font-size: 13px;
    //     font-weight: bolder;
    //     // overflow-x: scroll;
    // }
}

@media only screen and (min-width:630px) and (max-width:760px) {
    #portrait-mode {
        overflow-x: auto;
    }
    .full {
        display: none !important;
    }
    .head {
        margin-left: 177px !important;
        padding: 0px 31px !important;
    }
    .visibility {
        display: none !important;
    }
    #dropdownAction {
        display: none !important;
    }
    .placement {
        margin-left: 416px !important;
    }
    .top {
        margin-top: -64px;
    }
    .portrait-visibility {
        display: none !important;
    }
    .img-logo {
        margin-left: -12px !important;
    }
    // app-table-server-side div.dt-buttons {
    //     position: relative !important;
    //     float: right !important;
    // }
    // app-table-server-side .dataTables_wrapper .dataTables_info,
    // .dataTables_wrapper .dataTables_paginate {
    //     float: left !important;
    // }
    // app-table-server-side .dataTables_wrapper .dataTables_paginate {
    //     float: right !important;
    //     margin-top: 0px !important;
    // }
    .bottom-header {
        overflow-x: auto !important;
    }
    // .bottom-header{
    //     overflow-x: auto !important;
    // }
    // .horiz{
    //     display: inline-block !important;
    //     text-align: center;
    // }
}

@media only screen and (min-width:500px) and (max-width:629px) {
    .full {
        display: none !important;
    }
    .visibility {
        display: none !important;
    }
    .portrait-visibility {
        display: none !important;
    }
    #headers {
        margin-left: 72px !important;
    }
    // #portrait-mode{
    //     overflow-x:auto;
    // }
    /*CRITICAL BUGS*/
    // app-table-server-side div.dt-buttons {
    //     position: relative !important;
    //     float: right !important;
    // }
    // app-table-server-side .dataTables_wrapper .dataTables_info,
    // .dataTables_wrapper .dataTables_paginate {
    //     float: left !important;
    // }
    // app-table-server-side .dataTables_wrapper .dataTables_paginate {
    //     float: right !important;
    //     margin-top: 0px !important;
    // }
    #dropdownAction {
        display: none !important;
    }
    // .placement{
    //     margin-left: 361px;
    // }
    .top {
        margin-top: -64px;
    }
    #portrait-mode {
        overflow-x: auto;
    }
}

//header placement
@media screen and (min-width:600px) and (max-width:632px) {
    #headers {
        margin-left: 156px !important;
    }
}

@media screen and (min-width:575px) and (max-width:599px) {
    #headers {
        margin-left: 140px !important;
    }
}

@media screen and (min-width:555px) and (max-width:574px) {
    #headers {
        margin-left: 118px !important;
    }
}

@media only screen and (min-width:526px) {
    .placement {
        margin-left: 310px !important;
    }
}

@media only screen and (min-width:550px) {
    .placement {
        margin-left: 333px !important;
    }
}

@media only screen and (min-width:551px) {
    .placement {
        margin-left: 337px !important;
    }
}

@media only screen and (min-width:576px) {
    .placement {
        margin-left: 350px !important;
    }
}

@media only screen and (min-width:577px) {
    .placement {
        margin-left: 360px !important;
    }
}

@media only screen and (min-width:634px) {
    .placement {
        margin-left: 410px !important;
    }
}

@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: unset !important;
    }
}

@media screen and (min-width: 630px) and (max-width:740px) {
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        // float: right !important;
        text-align: unset !important;
    }
}

@media only screen and (min-width:768px) {
    .short {
        display: none !important;
    }
    #dropdownAction {
        display: none !important;
    }
    .placement {
        margin-left: 299px !important;
    }
}

// @media only screen and (min-width:634px){
//     .portrait{
//         width:296px  !important;
//     }
// }
@media screen and (min-width:321px) and (max-width:760px) {
    #main-text {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
    #headers {
        font-size: 1rem;
        display: flex !important;
        flex-direction: row !important;
    }
    #header {
        .top-header {
            // height: 35px;
            padding: 0.1rem 1.5rem !important;
        }
    }
    #style {
        font-size: 0.8rem;
    }
}

@media screen and (min-width:768px) and (max-width:1024px) {
    #portrait-mode {
        overflow-x: auto;
    }
}

.owl-dt-container {
    z-index: 1100 !important;
}

.cdk-overlay-container {
    z-index: 1060 !important;
}

//ipad
@media screen and (min-width:1023px) {
    // .ipad{
    //     width: 1779px !important;
    // }
    // .ipad-mini{
    //     width: 1779px !important;
    // }
    .cards {
        min-height: 182px !important;
        border-radius: 0;
    }
    .cards-text {
        font-size: 13px !important;
    }
    .cards-body {
        min-height: 173px !important;
    }
    // .ipad-minis {
    //     flex: 0 0 16.666667%;
    //      max-width: 20% !important; 
    //     }
    //     .ipads {
    //         flex: 0 0 16.666667%;
    //          max-width: 20% !important; 
    //         }
}

@media screen and (min-width:767px) {
    .cards {
        min-height: 190px !important;
        border-radius: 0;
    }
    .cards-text {
        font-size: 17x !important;
    }
    .cards-body {
        min-height: 190px !important;
    }
    // .margins{
    //     padding-left:3rem !important;
    // }
}

@media screen and (min-width:767px) and (max-width:1024px) {
    .margins {
        padding-left: 3rem !important;
    }
}

ngb-typeahead-window {
    left: $typeahead-search-position-left !important;
    max-width: $typeahead-search-max-width !important;
    max-height: $typeahead-search-max-width !important;
    overflow: auto !important;
    .dropdown-item {
        white-space: unset !important;
        border-bottom: 1px solid $bg-gray;
    }
}

.invalid-feedback {
    width: auto !important;
}

.custom-toast-wait {
    background-color: #ECF5FF !important;
    opacity: 1 !important;
    font-weight: bolder;
}

.custom-toast-error {
    background-color: #FEF1F2 !important;
    color: black !important;
    opacity: 1 !important;
    font-weight: bolder;
}

.custom-icon-wait {
    color: #0044CF !important;
    background-repeat: no-repeat;
    background-image: url("data:image/gif;base64,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") !important;
}

.custom-icon-info {
    color: #0044CF !important;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAACMklEQVRIid2UTU8TURSGnzOXGqFUIyHhS4tt/AESCWniQhbWreDWpQupNfwG5B8oBkJw7UIXoEvcsDMBoy5MSAjlu4QASoy1TZyP48JMpcDMAGHFu5p77znvc87ckwvnRRIVkB6vJD3P6ROVLKKdwBVgD5VV0GlLzVQh37B+KkhqotQif/SZCo+AuhAPW+GVEYYKucT2sSGdY7+7LPXeAdfCKjygTcTrX85dno2EpMZ+9qDWDFB/AoCvsljWnaWB+KdASGqi1IKtX4C2UwB8w6Ll0LU4mNjx96yaCFuHwwDdbYbn2YvcajWBEIUON8bQAfA/pccrSXWdAiGX/Pp+PZl2w8eiy8P3lbCGbOOY9OJgw0ZNJ57rPggDALydt1nc83gzb4eFAcTcOrffX1RNBe5GZU4uOEwuOFFhvmMWGKmBIJpEw9N6k4aedsPspsvMmhsB0aT/Vf1dojRF1ZbpMAx0XSDTEXzxVT9oPgRR+B6ZeQIpHDXCsnaWEKDq978T0Q9nDJk+BDGemQQiZ/OYsm0xU/6i5lm5PvprVCAXlNnaKDTXC7sVZasUOoojy08Sg/6i5lkxwpBAMShzq6R82/GiAOsxo8P7N2oghVxiG7X6gXKYS4jKnmf1LTy+tBsIAVjKx+dU5Tb7puM4EiiKWr2rT+OfD54dggCs5Bu/GoduhFGih8FGeVln9OZSPj4XUEC4brwoX3Vjbh8q90A7EZpQfgArwLQtZmoj1xB4j+dLfwEtubwYaPCJ1QAAAABJRU5ErkJggg==") !important;
}

.custom-icon-error {
    color: #D7182C !important;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAFAAAAAAnxZisAAAB8ElEQVQ4EbVVPUjDQBS+d22gHUSwk6BVtBGjVnCw0E1XQXCpzo7+IDjpIghOiiCIP+DoaFd3nV0Ei1YMilrBSUGqtFCb817sJZc0bfwNhPf7fS8v9+4OiMfDUqmAfpLZAAL9HuEqFyPsTE3E5yGdLruD4HagrbdrU8xgO16xWj6gMK3eZnfd8aoCud7epkLeuCKERdzJ9W14CjfQrtbz82c5j8oG6sVXY+X75IhkkU8s6vbj6OC6Ix433kunjJCAnWJrClU0tEpGKWt7bY2TlWlQGei8yWSE19GBUS5t1iIXgHoSscgh51gF9GhPijEyJAd/oiMHcgmsWSCXTIYJsHXh/LXkXCYnJzILFB9fFhhj0V8TVwiQCznRBBzLYr78wP9f2K+A3yLLeL7ghVBDoMVaAzn4lzo1Nwala39JanJxTuQ2Owg1N64CwL1fET7/+/j65SEXcmKetdHMMSXGgR/4K3EgdFy9v0g7CqCht3Uf1dsL/MsO+TBQwthIrUIA5Fi9uxwWccci04Ayh9tdBB0SSD6W6BtTJydGeeNvjljFQCxyyDHrFwmn3qZt8TmeEbYs+f2wyA+1EO9iWfYLnXe4rd5lZ4WNsqrAvx/XOFpAyZL8FV/REeO+CxAX9ALHBvv2+JWpfefKRAy5rT7FPwDJ2rFHVmveFQAAAABJRU5ErkJggg==") !important;
}

.custom-icon-success {
    color: #279D4D !important;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACVElEQVRIDcWVz0uUQRjHn+fdhSUIvSyCEXhol0UvElQexU666SVDQWWPJenfUFvnjiHS0QLxbtqpZW+mlzqk6G6QIHXZSyLkxrpP833fndnZt3nzzYgGdmfmmef5fGee+fES/ePCcfiZV2MDLDzIIlfgL8xf1N/7SuH13nnxkQKZjbGUV6PFJsk8CWWcIKaqsi9Rmpeq+c26y8cpkF3JDwnJGon0uYJ+sTEfeonE1MHs+nZ4zAsbVDruKXA5NhwANZFmo1HOvsxPhnkdK8DMAVezT4UdY/ZPvWRy2F6JEUDOqUb7fzRzl6pKF6Upp/fEpAgb+tdwCGLfavJQaxsB/7Roa8x65OrND7O5iS2HuxHwU4RzTmfy0eEYaQL8xe2n10Tk7MbaFB3/OOm2nZkTA7gn/gpwiezB89oaDr8Hpcefw/AgXq6jbgkENzQYaP/P5O5sAda2ENnw+28ffSod7TgnxyS9iDN7YEPQ7kpd/la8tdCPNGiRuHCb5Qv4b4ttVe3j+kk3lq+aDJEnQwtl1HD73cwxjqKZLQHpSEPgQoTlKxjeG5rJjQ+jjgOHn3DAbF+0ldFK1KOG1CyPFHvnS8WvUTkH1BT1CFYLb7LoJ7XRI15Wd+GZ7ts1oIOrd7+fNuo9tj2qDZYeM5vcTNNzwjWPKAp+KWKo06wYPqtlNQJ4O5h4Wv2c73onxd1DLBj6HYKXEUCnUth4Jwmau4gIYhALBli6mE3WBtQX+eBg5mE4WE4BDMT9ZPqHQ+2fnRbE6xIpoB1Quz76OOfVuc1d2++/tH8C8uUApJlTpVUAAAAASUVORK5CYII=") !important;
}

.custom-icon-warning {
    color: #E9C232 !important;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVCAYAAABCIB6VAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFqADAAQAAAABAAAAFQAAAABbgUmKAAACBElEQVQ4EaVU30sUURi9d3bGWNEl9KEeyk1EK5XAgoS1l6DnXiJ83Cf1nxAUtL+mf0EIahsSDHzQfhJpT/Zg5ezW4sy98/md0R3v2PyiLtzZb853zrmH5bsjRMnlvby2gF2SLmQZYnezPhr4+iO4Tl/lZnV2/2uRzioioB/44SoROdjBsVopoylM7Lk3bgkV7JAQFRiyQAvbma419j7kHVCcWKu1nimMopqxPFP0chP/duszWqu3REmelIIsy7k7MLe3nXVAbmKt9HpsKkWT7ZswAhZq9SzLFHhmYs+tN0ip1z2xtJ3bqEkF788xe67W2Hd77+ZvdmKt101iap3DSTXuvBp5xKP1MNXMAMEB14DiMtU4FGFx2jOLLO5fxl7r+mNOMhsfXVCAC81FWsKYSTxIVDijF02gibRGI2HM/9c8E+4Y/bgkHdzHjgGjgAZaAzofN6KnlXbLfcczOmESytZ8aT4NPmhMSvlcQxMnbrfeNP/VFEbQwgM1VnRBaHeqz/vx6zN/CEZO4eQTV1iSjMaPixe4eUnG2ZsU32pDl8fl1K4fJe4cHi1lmUYSkj5dGtjB5iP8VFOAHKzz82gRpaSte/3tP9+/kKCrALIWRzxEj79uw1kc4FLIg8H+K2O21z14wu+5phAUGYKDhYDwtO2qvRF2w+VQkHPa+r+nJWRgVa2NE24O2oZKHqV+AAAAAElFTkSuQmCC") !important;
}

.custom-toast-warning {
    background-color: #FEF8E0 !important;
    color: black !important;
    opacity: 1 !important;
    font-weight: bolder;
}

.custom-toast-success {
    background-color: #DDFCE5 !important;
    opacity: 1 !important;
    font-weight: bolder;
}

.custom-toast-info {
    background-color: #ECF5FF !important;
    opacity: 1 !important;
    font-weight: bolder;
}

.toast-message a,
.toast-message label {
    color: black !important;
}

.toast-message a:hover {
    color: black !important;
}

.toast-close-button,
button.toast-close-button {
    color: black !important;
}

@media screen and (min-width:1023px) {
    .ipad {
        flex: 0 0 16.666667% !important;
        max-width: 20% !important;
    }
    .ipad-mini {
        flex: 0 0 16.666667% !important;
        max-width: 20% !important;
    }
}

@media (min-width: 768px) {
    .ipad-mini {
        flex: 0 0 19.666667%;
        max-width: 20% !important;
    }
    .ipad {
        flex: 0 0 16.666667%;
        max-width: 20% !important;
    }
    .cards-body {
        min-height: 97px !important;
    }
}

.selected-list .c-list .c-token {
    background-color: #ebf5ff !important;
}

.selected-list .c-list .c-token .c-label {
    color: black !important;
}

// .inner-container{
//     padding: 10px 10px !important;
// }
// .dropdown-list .tagToBody {
//     position: auto !important; 
// }
// .dropdown-list {
//     position: auto !important; 
// }
.dropdown-list .tagToBody {
    position: static !important;
}

.dataTables_scrollBody table {
    border: 0 !important;
}

.dataTables_scrollBody::-webkit-scrollbar {
    // width: 3px !important;
}

// .help-icon {
//     display: none !important;
// }
.dataTables_scrollBody {
    overflow-y: overlay !important;
}

// app-monitor-data .dataTables_scrollBody{
//     position: relative;
//     overflow: auto;
//     width: 100%;
//     height: calc(100vh - 472px);
// }
.custom-date~.cdk-overlay-connected-position-bounding-box {
    .owl-dt-calendar-control {
        display: none !important;
    }
    .owl-dt-calendar-main {
        padding-top: 10px !important;
    }
}

.modal-md {
    max-width: 700px !important;
}

.icon-clock {
    position: absolute;
    right: 1px;
    top: 1px;
}

.bodyContent {
    tbody {
        td:nth-child(2) {
            word-wrap: break-word !important;
            max-width: 13rem;
            padding: 6px;
            padding-left: 9px !important;
        }
    }
}

.bodyContent {
    tbody {
        td:nth-child(5) {
            word-wrap: break-word !important;
            max-width: 13rem;
            padding: 6px;
            padding-left: 9px !important;
        }
    }
}

.bodyContent {
    tbody {
        td:nth-child(3) {
            word-wrap: break-word !important;
            max-width: 13rem;
            padding: 6px;
            padding-left: 9px !important;
        }
    }
}

.bodyContent {
    tbody {
        td:nth-child(4) {
            word-wrap: break-word !important;
            max-width: 13rem;
            padding: 6px;
            padding-left: 9px !important;
        }
    }
}


/* auto reSize popup modal */

.modal-xl {
    max-width: 90rem !important;
    // max-width: 80rem !important;
    .modal-body {
        max-height: 35rem !important;
        overflow: auto !important;
    }
}

.font-1rem {
    font-size: 1rem !important;
}

.main-header {
    background: $main-headerBgClr;
    color: $btn-primary-text-color;
    padding: 6px 0;
}

.toast {
    &:not(.show) {
        display: flex !important;
    }
}

.text-grey {
    color: grey !important;
}