@import 'scss/material.variables';
@import 'scss/material.themes';
@import 'scss/mixins/bi-app/bi-app-ltr';
// Core Variables and Mixins
@import 'scss/app.variables';
@import 'scss/components/_table.scss';
@import 'scss/mixins';
// Core Styles
// @import 'scss/_ngxtable.scss';
@import 'scss/core';
@import 'scss/material';
@import 'scss/utilities/utilities';
@import 'scss/elastic';
// @import 'scss/components/table';
//@import "scss/components/perfect-scrollbar";
// Perfect Scrollbar
//@import "~perfect-scrollbar/src/css/main";
#kohsaar-logo {
    margin-right: 20px;
    .mat-fab {
        width: 55px;
        height: 55px;
        position: relative;
        top: 50%;
        transform: translateY(3%);
        background: white;
        @include media-breakpoint-down(xs) {
            width: 49px;
            height: 49px;
            transform: translateY(3%);
        }
        #logo-img {
            width: 49px;
            height: 49px;
            position: relative;
            transform: translateY(0%);
            @include media-breakpoint-down(xs) {
                width: 45px;
                height: 45px;
            }
        }
    }
    .log {
        width: 55px;
        height: 55px;
        position: relative;
        margin-left: 30%;
        transform: translateY(3%);
        cursor: pointer;
        @include media-breakpoint-down(xs) {
            width: 49px;
            height: 49px;
            margin-left: 10%;
        }
        #logo-img {
            width: 49px;
            height: 49px;
            position: relative;
            transform: translateY(0%);
            @include media-breakpoint-down(xs) {
                top: 10%;
                width: 38px;
                height: 38px;
            }
        }
    }
}

.boldd {
    font-weight: bold;
}

.ngx-datatable {
    @include media-breakpoint-down(xs) {
        .shrink {
            width: unset !important;
        }
        .expand {
            width: 20% !important;
            margin-left: 0.1em !important;
        }
        .expanded {
            .actions {
                margin-left: 0.5em;
            }
        }
        .mr {
            margin-right: 0.3em !important;
        }
        .ml {
            margin-left: 10px !important;
            width: 20% !important;
        }
    }
    &.product-info {
        .datatable-body-cell-label {
            //  line-height: 3;
            height: 1.9rem !important; // background: black;
        } // .long{
        //   padding: 5rem;
        //   line-height: 2rem !important;
        //   height: 100rem !important;
        //   background: black;
        // }
        .datatable-body-row {
            height: 4rem !important;
        }
        .datatable-body-cell {
            height: 4rem !important;
        }
    }
    &.cam {
        @include media-breakpoint-down(xs) {
            .url {
                width: 50px !important;
            }
            .img {
                width: auto !important;
            }
        }
        .datatable-header-cell {
            text-align: center !important;
            font-weight: bold;
        }
    }
    &.boxless {
        box-shadow: unset;
        .datatable-footer-inner {
            .page-count {
                display: none;
            }
        }
    }
    &.custom-table {
        //   .center-allign {
        .left {
            .datatable-body-cell-label {
                text-align: left !important; //       text-align: center;
                //       align-self: center;
            }
            .datatable-header-cell {
                text-align: left !important;
            }
        }
        .datatable-body-cell-label {
            text-align: center !important; //       text-align: center;
            //       align-self: center;
        }
        .datatable-header-cell {
            text-align: center !important;
            font-weight: bolder;
        }
        @include media-breakpoint-down(xs) {
            .product-img {
                width: auto !important;
                min-width: 4rem !important;
            }
            .sku {
                width: auto !important;
                min-width: 2rem !important;
                max-width: 5rem;
            }
            .datatable-row-detail {
                width: 22.5rem;
                background: unset;
            }
            &.product-variant {
                .mat-form-field-infix {
                    line-height: 1.6 !important;
                }
                .datatable-body-cell {
                    width: unset !important;
                    margin-left: 7px !important;
                    overflow-y: hidden;
                }
                .datatable-row-detail {
                    overflow-x: hidden; // width: 22.5rem;
                    background: unset;
                }
            }
        }
    }
    &.group-table {
        .datatable-body-cell-label {
            margin-left: 25px;
        }
        .datatable-icon-right:before,
        .datatable-icon-down:before {
            font-size: unset;
            background: unset;
            color: unset;
            border-radius: unset;
        }
        .datatable-group-header {
            border-top: transparent !important;
            background: unset !important;
            border-bottom: solid 1px #d9d8d9 !important;
        }
        .group-header {
            padding-left: 5px;
            cursor: pointer;
            padding: 10px;
        }
    }
    .datatable-icon-right:before {
        font-size: x-large;
        background: #2f3343;
        color: white;
        border-radius: 30px;
    }
    .datatable-icon-down:before {
        font-size: x-large;
        background: #2f3343;
        color: white;
        border-radius: 30px;
    }
}

// .boxless.ngx-datatable.material {
// }
.fuse-search-bar {
    // min-width: 64px;
    // height: 64px;
    // font-size: 13px;
    // border-color: transparent;
    // @include media-breakpoint-down('xs') {
    //   height: 56px;
    // }
    .fuse-search-bar-collapser {
        .mat-icon {
            color: black;
        }
        cursor: pointer;
        padding: 0 20px;
        margin: 0;
        width: 64px !important;
        height: 64px !important;
        line-height: 64px !important;
        @include media-breakpoint-down(xs) {
            height: 56px !important;
            line-height: 56px !important;
        }
    }
    .fuse-search-bar-loader {
        width: 64px !important;
        height: 64px !important;
        line-height: 64px !important;
        @include media-breakpoint-down(xs) {
            height: 56px !important;
            line-height: 56px !important;
        }
    }
    .fuse-search-bar-collapser {
        display: none;
    }
    #fuse-search-bar-input {
        border: none !important;
        border-radius: 0 !important;
        margin-left: 24px !important;
        display: none;
        min-height: 56px;
        background-color: transparent;
        font-size: 16px;
        &:focus {
            outline: unset !important;
        }
    }
    &.expanded {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        background-color: white;
        #fuse-search-bar-input {
            display: block;
        }
        .fuse-search-bar-collapser {
            display: block;
        }
        .datatable-icon-right:before {
            font-size: x-large;
            background: #2f3343;
            color: white;
            border-radius: 30px;
        }
    }
}

.small-icons {
    &.blur {
        .mat-icon-button {
            opacity: 0.4;
        }
    }
    .mat-icon-button {
        width: 1.72em;
        height: 1.72em;
        margin-left: 3.7px;
        line-height: 2.1; // background-color: darkgrey;
        // color: white;
        // &#black {
        //   &:hover {
        //     background-color: black;
        //   }
        // }
        &:hover {
            // background-color: #f44336;
            opacity: 1;
        }
        .mat-icon {
            overflow: hidden;
            font-size: 1.3em; // margin-right: 5px;
            // padding-right: 2px;
            // left: 2px;
            width: 20px;
            line-height: 1.1;
        }
    }
    .del {
        &.mat-icon-button {
            width: 1.6em;
            height: 1.6em;
            margin-left: 3.7px;
            line-height: 2.1;
            .mat-icon {
                overflow: hidden;
                font-size: 1.2em; // margin-right: 5px;
                // padding-right: 2px;
                // left: 2px;
                width: 20px;
                line-height: 1.1;
            }
        }
    }
}

.bindico {
    .mat-icon {
        font-size: 1.5em;
        color: darkgrey;
    }
}

.hrow {
    border-top: solid 1px #e0e0e0; // background-color: #e0e0e0;
    // width: 90%;
    // margin: 10px 0;
}

.mn-0 {
    min-width: 0;
}

hr {
    border-top: unset;
}

.mat-chip:not(.mat-basic-chip)+.mat-chip:not(.mat-basic-chip) {
    margin-bottom: 0.3rem !important;
}

.img-upload {
    .img-ul-clear {
        visibility: hidden;
        width: 0;
        height: 0;
    } //    background-color: #dd3;
    //    border-radius: 5px;
    //    margin:5px;
    //    width: 500px;
    .img-ul-upload {
        width: 20px;
        height: 20px;
        margin-top: 5px;
        border-radius: 50px;
        background-image: url('./../images/upload.jpg');
        background-repeat: no-repeat;
        background-position: center center;
    } //    .img-ul-clear {
    //        background-color: #B819BB !important;
    //    }
    .img-ul-drag-box-msg {
        border: dashed 1px rgba(0, 0, 0, 0.61);
        width: 160px;
        padding-bottom: 10px;
        text-align: center;
        font-size: 15px;
    }
    &.small {
        .img-ul-drag-box-msg {
            width: unset;
            max-width: 160px;
            padding: 6px;
            margin-top: 8px;
        }
    } //    .img-ul-container {
    //        background-color: #FF6CAD !important;
    //    }
}

.form-wizard-page {
    >.bottom-border {
        .mat-tab-header {
            box-shadow: 0 2px 1px rgba(0, 0, 0, 0.23) !important; // @include mat-elevation(2);
        }
    } // padding-top:0;
    .mat-tab-header {
        padding: 0 10px !important;
        border-bottom: none !important;
        z-index: 10 !important;
        .mat-tab-labels {
            justify-content: center !important;
            .mat-tab-label {
                font-weight: 400 !important;
                color: #737373 !important;
                opacity: 1 !important;
                height: 45px !important;
                padding: 0 32px !important;
                align-items: center !important;
                justify-content: center !important;
                display: flex !important;
                line-height: normal !important;
                &.mat-tab-label-active {
                    font-weight: 500 !important;
                    color: #000 !important;
                    .notification-label {
                        background-color: black;
                        border: 4px solid black;
                    }
                }
            }
        }
    }
    .mat-tab-body {
        margin-top: 10px !important;
    }
}

.notification-label {
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px; //background-color: #455A64;
    //border: 4px solid #455A64;
    background-color: #647e88;
    border: 4px solid #67848e;
    color: white;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.config {
    .title {
        font-size: 110%;
        padding-top: 0.7rem;
        .small {
            zoom: 0.7;
        }
    }
}

.mat-datetimepicker-clock-cell {
    // border: solid 1px rgba(0, 0, 0, 0.26);
    &.mat-datetimepicker-clock-cell-selected {
        font-size: 110%;
        .clock-hours {
            .format {
                opacity: 1;
            }
        }
    }
    .clock-hours {
        display: grid;
        text-align: center;
        line-height: 1.2;
        .format {
            font-size: 70%;
            opacity: 0.5;
        }
    }
}