@import "ws-common";
@import "ws-vars";
@import "ws-mixins";

::ng-deep .comptency_main_div {
    width: 100%;
}

.main_title_text {
    @include breakpoint-xs {
        margin-top: 0.5rem;
    }
    @include breakpoint-s {
        margin-top: 0.5rem;
    }
}
.left_card_box {
    // width: 890px;
    width: 75%;
    float: left;

    @include breakpoint-m {
        width: 100%;
    }

    .top_search_box {
        width: 100%;
        overflow: hidden;
        justify-content: space-between;

        .search_box_inner {
            max-width: 585px;
            float: left;

            @media (max-width: 768px) {
                width: 49%;
                max-width: 49%;
            }

            .search_box_main {
                width: 100%;
                max-width: 585px;

                @media (max-width: 768px) {
                    max-width: 100%;
                }

                mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix {
                    border-top-width: 8px !important;
                    padding: 12px 10px 12px 12px;
                }

                form {
                    width: 100%;

                    .search_form {
                        width: 100%;
                    }
                }
            }

            .search_tag_box {
                width: 100%;

                a.single_tag {
                    display: inline-block;
                    padding: 8px 12px;
                    margin: 8px 8px;
                    border-radius: 20px 20px;
                    background-color: rgba(0, 0, 0, 0.08);
                    color: #000;

                    .mat-icon {
                        vertical-align: middle;
                        margin-left: 15px;
                    }
                }
            }
        }

        // .item_dropdown_box {
        //     float: right;
        //     width: 210px;
        //     box-sizing: border-box;

        //     @media (max-width:768px) {
        //         width: 49%;
        //     }

        //     .item {
        //         .mat-form-field-outline  {
        //             background-color: #f0f3f4;
        //             // border:1px solid rgba(0, 0, 0, 0.08);
        //             // padding: 0px 12px;
        //             // border-radius: 4px 4px;
        //             // box-sizing: border-box;
        //         }
        //         .theme-igot.day-mode .mat-form-field-appearance-legacy .mat-form-field-underline {
        //             background-color:none;
        //         }

        //     }
        // }
    }

    .main_card_box {
        width: 100%;
        margin-top: 35px;

        a.load_more_link {
            margin: 35px auto 0 auto;
            text-align: center;
            display: block;
        }
    }
}

.right_sidebar_box {
    width: 23%;
    float: right;
    background-color: #fff;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 4px;

    @media (max-width: 992px) {
        width: 100%;
    }
}

a.hint_span {
    cursor: pointer;
    .mat-icon {
        vertical-align: middle;
    }
}

[wsCompTooltipDirective] {
    position: relative;
}

.tooltip {
    position: absolute;
    opacity: 1;
    z-index: 99;
    // top:auto;
    // left: auto;
    padding: 5px;
    // background: #fff;
    // box-shadow: 0 2px 1px rgba(0,0,0,.6);

    @media (max-width: 380px) {
        left: 0;
        padding: 0;
    }
}

::ng-deep.mat-form-field-wrapper {
    flex: 1;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-prefix {
    top: 6px!important;
    margin-right: 6px;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    top: 0px!important;
}
