/*------------------------
      admin thumbnil table
    --------------------------*/
    .main-table-wrapper {
        .table-inner{
            width: 100%;
            border-collapse: collapse;
            tr{
                border-bottom: 1px solid #d6d6d6;
            }
            th{
                background-clip: padding-box;
                color: $white;
                padding:10px;
                position: relative;
                vertical-align: middle;
                background-color: $byi-talbe-admin-color;
                font-weight: 600;
                text-align: left;
                font-size: 13px;
                line-height: 16px;
                transition: background-color 0.1s linear;
                cursor: pointer;
                z-index: 1;
                border: 1px solid #8a837f;
                &.width-s{
                    width: 115px;
                    text-align: center;
                }
                &.width-m{
                    width: 300px;
                    text-align: center;
                }
                &:first-child{
                    border-left-color: #8a837f;
                }
                &:focus,&:hover{
                    background-color: #5f564f;
                }
            }
            td{
                background-color: #ffffff;
                border-left: 1px solid $byi-table-admin-border;
                border-right: 1px solid $byi-table-admin-border;
                color: $byi-table-text-color;
                padding: 10px;
                text-align: center;
                &.layout-name{
                    text-align: left;
                }
                a{
                    color: #007bdb;
                    text-decoration: none;
                }
                .apply-link{
                    color: #007bdb;
                    background: none;
                    border: none;
                    outline: none;
                    cursor: pointer;
                }
                button{
                    border: none;
                    background: none;
                    cursor: pointer;
                }
                .byi-admin-icon{
                    width: 28px;
                    height: 28px;
                    display: block;
                    font-weight: 400;
                }
                svg{
                    fill: #807f7f;
                    transition: .2s ease all;
                }
            }
          
        }
        .bottom-button{
            .byi-fill-button{
                margin-right: 20px;
                }
        }
    }
    
    
    /*------------------------
          style for subtab
        --------------------------*/
    .main-layout-title {
        color: #41362f;
        word-break: break-all;
        font-size: 18px;
        margin: 10px 0 20px;
        display: block;
    }
    .layout-input {
        font-size: 18px;
        border: none;
        border-bottom: 1px solid #41362f;   
        padding: 3px 0;
        position: relative;
    
        &:focus{
            border: none!important;
        border-bottom: 1px solid #41362f!important;
    
        }
        &.ng-invalid{
            border-color: red;
        }
    }
    .btn-sticky {
        .mat-mdc-dialog-container {
            .btn-sticky.mat-mdc-dialog-actions {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 5px;
                background: #fff;
                justify-content: center!important;
            }
        }
    }
    .mat-mdc-dialog-container{
        .mdc-dialog__container{
            .mat-mdc-dialog-title{
                padding: 0;
                margin-bottom: 15px;
                font-size: 18px;
            }
            .mat-mdc-dialog-surface{
                display: block;
                padding: 24px;
                border-radius: 4px;
                box-sizing: border-box;
                overflow: auto;
                outline: 0;
                width: 100%;
                height: 100%;
                min-height: inherit;
                max-height: inherit;
                .mdc-dialog__title{
                    &:before{
                        display: none;
                    }
                }
            }
            .mat-mdc-dialog-content{
                padding: 0;
                .mat-mdc-form-field{
                    &:hover{
                        .mat-mdc-form-field-focus-overlay{
                            display: none;
                        }
                    }
                }
            }
            .mdc-text-field--filled {
                &:not(.mdc-text-field--disabled) {
                    background-color: transparent;
                }
                .mat-mdc-form-field-focus-overlay{
                    display: none;
                }
            }
        }
    }
    .mat-mdc-tab-group{
       
        .mat-ink-bar{
            &.mat-ink-bar{
                display: none;
            }
        }
        &.mat-mdc-tab-group-stretch-tabs{
            >.mat-mdc-tab-header{
                 border-bottom: 1px solid #dddddd;
                 .mat-mdc-tab{
                    border: 1px solid #cfcfcf;
                    border-bottom: none;
                    background-color: #fff;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                    margin-right: 18px;
                    min-width: 160px;
                    height: 40px;
                    flex-grow: 0 !important;
                    color: #000;
                    opacity: 1;
                    font-weight: 600;
                    .mdc-tab-indicator{
                        display: none;
                    }
                    &.mdc-tab--active{
                        .mdc-tab__text-label{
                            color: #f05929;
                        }
                    }
                }
            }
        }
        .mat-mdc-tab-body-wrapper{
            .copy-admin {
                display: block;
                width: 100%;
                text-align: right;
                margin: 10px 0 10px;
                .copy-admin-icon{
                    width: 22px;
                    height: 22px;
                    display: inline-block;
                    vertical-align: middle;
                }
                button{
                    font-size: 13px;
                    background: none;
                    border: none;
                    text-decoration: underline;
                    cursor: pointer;
                }
               
    
            }
            .all-tab-wrapper{
                max-width: 100%;
                display: flex;
                width: 100%;
                justify-content: space-between;
                .col-md-6{
                    max-width: 45%;
                    flex: 0 0 45%;
                    @media screen and (max-width: 1400px){
                        max-width: 40%;
                        flex: 0 0 40%;
                        &:first-child{
                            flex: 0 0 55%;
                            max-width: 55%;
                        }
                    }
                }
                .all-tab-head{
                    display: flex;
                    justify-content: space-between;
                    margin: 5px 0 15px;
                    .reser-icon{
                        display: inline-block;
                        width: 22px;
                        margin: 0;
                        vertical-align: middle;
    
                    }
                    span{
                        color: #41362f;
                        word-break: break-all;
                        font-size: 21px;
                        margin: 0;
                        display: block;
                        font-weight: 600;
                    }
                    .reset{
                        text-decoration: underline;
                        background: none;
                        border: none;
                        outline: none;
                        cursor: pointer;
                        font-size: 13px;
                        line-height: 15px;
                    }
                    .edit-button{
                        margin-left: auto;
                        margin-right: 15px;
                    }
                }
                .example-list{
                    background: none;
                    background-color: none;
                    border: none;
                }
                
                .sub-tab{
                    width: 100%;
                }
                
               
                .bottom-row{
                    margin: 10px 0 20px;
                    .byi-admin-checkbox{
                        margin-right: 10px;
                    }
                }
            }
        }
        .additional-list{
            display: flex;
            flex-wrap: wrap;
            &:after{
                content: "";
                display: block;
                clear: both;
            }
            li{
                padding: 0 10px 10px 0;
                flex-grow: 1;
                flex-basis: 50%;
                max-width: 33.33%;
    
            }
        }
    }
    
    
    /*------------------------
         style for pagination
        --------------------------*/
    .mat-paginator-container{
        .mat-form-field-wrapper{
            padding-bottom: 10px;
        }
        .mat-paginator-page-size-label,.mat-paginator-range-label{
            font-size: 14px;
            color: $black;
        }
        .mat-select-arrow{
            border: none;
            position: relative;
            &:after{
                content: "";
                width: 8px;
                height: 8px;
                background: transparent;
                position: absolute;
                top: -6px;
                border-top: 1px solid $black;
                border-left: 1px solid $black;
                transform: rotate( 
            -135deg
             );
                left: -11px;
            }
        }
    }
    .mat-select-panel{
        border: 1px solid #adadad!important;
        border-radius: 0!important;
    }
    
    
    /*------------------------
       Configure Category
        --------------------------*/
    .example-tree{
        .mat-tree-node{
            .nester-button{
                background: none;
                border: none;
                .toggle-arrow{
                    width: 30px;
                    height: 30px;
                    position: relative;
                    &.disable{
                        opacity: 0;
                        visibility: hidden;
                    }
                    &.active{
                        &:after{
                            transform: rotate( 
                                225deg
                                 );;
                        }
                    }
                    &:after{
                        content: "";
                        width: 8px;
                        height: 8px;
                        background: transparent;
                        position: absolute;
                        top: 9px;
                        border-top: 1px solid $black;
                        border-left: 1px solid $black;
                        transform: rotate( 
                    135deg
                     );
                        left: 5px;
                    }
                }
            } 
        }
        .nested-category {
            padding-left: 20px;
        }
    }
    .mat-mdc-dialog-actions{
        .byi-fill-button{
            margin-right: 10px;
        } 
    }
    /*------------------------
       // Configure Category -search
        --------------------------*/
    .mat-mdc-form-field-infix    {
        
        input[type=text]{
            &:focus{
                border: none;
            }
        }
        .byi-search--icon{
            width: 15px;
            height: 15px;
            display: inline-block;
            position: absolute;
            &.icon-close{
                right: 0;
                top: 0;
            }
        }
        .mat-form-field-label {
            padding-left: 20px;
        }
    }
    .mat-tree{
        padding: 0 10px;
    }
    .mat-form-field-label{
        &:not(.mat-form-field-empty){
            font-size: 17px;
            color: #717171;
        }
    }
    .sub-tab{
        width: 100%;
    }
    .example-box{
        border: 1px solid #8f929d!important;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 10px;
        padding:0!important;
    
    }
    .mat-form-field-underline{
        display: none;
    
    }
    input.mat-mdc-input-element{
        height: 24px;
        font-size: 13px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
        padding: 0 28px;
        border: none;
        border-bottom: 1px solid #cecece!important;
        margin-bottom: 10px;
        max-width: 450px!important;
        display: block;
    }
    /*------------------------
       // design for top dragabble area 
        --------------------------*/
    .top-accordian{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 10px 15px 35px;
        background: #f1f2f5;
        position: relative;
    
        .example-handle {
            position: absolute;
            left: 14px;
            width: 30px;
            height: 30px;
            border: none;
            padding:0;
            background:none;
            top: 50%;
            transform: translateY(-50%);
            svg{
                fill: #9ba2b7;
            }
        }
        .select-all{
            font-size: 13px;
            color: #303030;
            margin-left: 10px;
            font-weight: 500;
            span{
                margin-left: 0;
                display: flex;
                align-items: center;
            }
        }
        .toggle-arrow {
            width: 40px;
            height: 20px;
            cursor: pointer;
            font-size: 0;
            position: relative;
            button{
                opacity: 0;
                z-index: 9;
                position: absolute;
                cursor: pointer;
                left: -8px;
    
            }
            &:after{
                content: "";
                width: 10px;
                height: 10px;
                background: transparent;
                position: absolute;
                top: 3px;
                border-top: 1px solid #000;
                border-left: 1px solid #000;
                transform: rotate(
            -135deg
            );
                left: 10px;
            }
        }
    }
    /*------------------------
       // design for bottom accordian
        --------------------------*/
    .bottom-accordian{
        ul{
            padding: 25px 30px;
            display: flex;
            flex-wrap: wrap;
            @media screen and (max-width: 1400px){
                padding: 25px 20px;
            }
    
            &:after{
                content: "";
                display: block;
                clear: both;
            }
            li{
                margin-bottom: 15px;
                margin-right: 10px;
                flex-grow: 1;
                flex-basis: 50%;
                max-width:calc(33.33% - 10px);
            }
        }
    }
    /*------------------------
         style for delete module
        --------------------------*/
    .main-delete-wrapper{
        &.mat-mdc-form-field    {
            width: 100%;
        }
    
    }    
    .notice-label{
        background: #ffb300ad;
    padding: 9px 10px;
    border: 1px solid #ffa700;
    margin: 10px 0;
    border-radius: 8px;
    
    
    }
    .alert{
        &.alert-danger{
            font-size: 18px;
            color: red;
            padding: 10px 0;
        }
    }
    .toast-msg__icon--close{
        width: 20px;
        height: 20px;
        svg{
            fill: white;
    
        }
    }
    .bottom-error{
        display: inline-block;
        padding: 20px 10px;
        color: red;
        span{
            background: rgba(255,179,0,.6784313725490196);
            border: 1px solid #ffa700;
            padding: 9px 10px;
        }
    }
    .bottom-button {
        text-align: right;
        padding: 10px 0;
        float: right;
    }
    .error-notification{
    
    ul{
        &.category {
            padding-left: 15px;
            text-align: left;
            > li {
                > span {
             font-weight: 600;
             position: relative;
             &:after{
                 content: "";
                width: 8px;
                height: 8px;
                background: transparent;
                position: absolute;
                top: 5px;
                border-top: 1px solid #000;
                border-left: 1px solid #000;
                transform: rotate( 
            135deg
             );
                left: -16px;
             }
                        }
                 > ul {
             padding-left: 10px;
                     }
             }
         }
    }
    }
    .top-title-wrapper,.edit-page-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    
        .mat-form-field-infix{
            border: 1px solid #adadad;
            min-width: 70px;
            padding: 9px 10px!important;
        }
        .mat-icon-button{
            background: #e3e3e3;
            border-radius: 0;
            border: 1px solid #adadad;
            margin: 0 5px;
            line-height: 25px;  
            .mat-paginator-icon{
                fill: #41362f;
            }
    
        }
    }
    // top succes error warning message
    .toast-msg{
        display: inline-block;
        width: 100%;
        height: auto;
        border: none;
        border-radius: 0;
        color: #333333;
        font-size: 16px;
        margin: 0 0 1px;
        padding: 10px 15px;
        position: relative;
        text-shadow: none;
        &--success{
            background: #fffbbb;
        }
        &--error{
            background: #ffbbbb;
        }
        &__inner{
            display: flex;
            align-items: center;
        }
        &.toast-msg--success{
            .icon{
                fill: #79a257;
            }
        }
        &__icon{
            width: 15px;
            height: 15px;
            margin-right: 10px;
    
        }
    }
    // manage layout intro design
    .example-list {
        padding: 10px 10px;
        max-width: 1000px;
    
    }
    .tool-detail{
        padding: 15px 20px;
        textarea{
            min-height: 115px;
        }
        input,textarea{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-family: Roboto, sans-serif;
            display: inline-block;
            font-weight: 400;
            color: #262626;
            padding: 6px 24px 6px 10px;
            border-bottom: 1px solid #cecece;
            background-color: #fff;
            outline: none;
            border: 1px solid #CCCCCC;
            border-radius: 5PX;
            vertical-align: MIDDLE;
            width: 270px;
    
            &:focus{
                border: 1px solid #CCCCCC;
            }
        }
    }
    label{
        &.tool-title,&.tool-status{
            margin-bottom: 10px;
        }
        &.tool-title ,&.tool-intro,&.tool-status{
            font-size: 13px;
            text-transform: capitalize;
            margin-right: 10px;
            color: #313131;
            font-weight: 500;
            display: block;
            span{
                &.title{
                    min-width: 130px;
                    display: inline-block;
                }
            }
        }
    }
.switch-wrapper{
    text-align: left;
    display: inline-block;

}    
.byi-switch{
    position: relative;
    width: 38px;
    height: 22px;
    display: inline-block;
    .checkbox{
        width: 0;
        height: 0;
        opacity: 0;
        &:checked{
            +.byi-switch-slider{
                background-color: #f05929;
                &::before{
                    -webkit-transform: translateX(16px);
                    transform: translateX(16px);
                }
            }
        }
    }
    .byi-switch-slider{
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 35px;
        transition: .25s ease all;
        background-color: #999;
        &:before{
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            border-radius: 35px;
            background-color: #fff;
            transition: .25s ease all;
        }
    }
}