.yandex-direct-data{
    & table{
        width: 100%;
        &.cost{
            width: 40%;
        }
        & thead{

            & th{
                height: 25px;
                background-color: rgba( 128,128,128, 0.8 );
            }

            & th[data-name="Дата"]{  width: 10%;  }
            & th[data-name="Название компании"]{  width: 15%;  }
            & th[data-name="Регион"]{  width: auto;  }
            & th[data-name="Показы"]{  width: 5%;  }
            & th[data-name="Клики"]{  width: 5%;  }
            & th[data-name="Цена"]{  width: 5%;  }
        }

        & tbody {
            & tr:hover{
                background-color: rgba( 255,165, 0,  0.3 ) !important;
            }
            & tr:nth-child(even) {
                background-color: rgba( 128,128,128, 0.3 );

                & td {

                }
            }

        }
    }

    & .search-block{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        & div{
            & label{
                display: inline-block;
                margin-right: 20px;
                color: #fff;
                white-space: nowrap;
            }
            & input{
                border-radius: 4px;
                flex-grow: 1;
            }
        }
    }

    ul{
        & > li{
            position: relative;
            list-style: none;
            border: 1px solid rgba(209, 209, 209, 0.6);
            padding: 15px;
            transition: all ease-in-out .25s;
            height: 20px;
            overflow: hidden;

            & span.name{
                display: inline-block;
                width: 35%;
            }

            & > ul{
                transition: all ease-in-out .5s;
                margin: 15px 0 0 0;
                padding: 0;
                opacity: 0;
                & > li{
                    color: #666;
                    padding: 10px;
                    border:unset;
                    border-bottom: 1px solid rgba(209, 209, 209, 0.6);
                    &.open:after,
                    &:after{
                        content: '';
                    }
                    &:hover{
                        color: #fff;
                        background-color: #ff1921 !important;
                    }
                    &:nth-child(even) {
                        background-color: rgba( 128,128,128, 0.1 );
                    }
                }

            }

            &.hidelist{
                cursor: pointer;
                &:after {
                    content: '\25BC';
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    width: 15px;
                    height: 15px;
                }
            }

            &.hidelist.open{
                &:after{
                    content: '\25B2';
                }

                & > ul{
                    opacity: 1;
                }
            }
        }
    }
}

body {
    position: relative;
    padding: 0;
    margin: 0;
    /* background: url(/wp-content/themes/beyond/assets/img/home-sl-6h3.jpg) center/cover no-repeat; */
    background-attachment: fixed;
    &::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: '';
        background: rgba( 0,0,0, 0.4 );
    }
}

.wrapper {
    position: relative;
    min-height: 100vh;
    color: #666;
    font-size: 18px;
    font-family: Helvetica, Verdana, Arial, sans-serif;

}

header {
    position: fixed;
    padding: 36px;
}

.center_block {
    max-width: 1680px;
    margin: 0 auto;
}

.title_h3 {
    text-align: center;
    color: #fff;
    font-size: 36px;
    margin-bottom: 46px;
    & > br {display: none;}
}

.form_direct {
    max-width: 960px;
    margin: 0 auto 46px;
}

.yandex-direct-data {
    position: relative;
    padding: 8% 15px 40px;
    & input {
        height: 46px;
        box-shadow: 1px 1px 4px rgba(39, 39, 39, 0.24);
        color: #666;
        background-color: #ffffff;
        font-family: Helvetica, Verdana, Arial, sans-serif;
        font-weight: 500;
        font-size: 17px;
        letter-spacing: 1.02px;
        padding: 0 24px;
        border: none;
    }
}

.group_btn {
    display: flex;
    margin-left: 20px;
    & button {
        width: 188px;
        height: 46px;
        color: #fff;
        font-size: 18px;
        border: none;
        background-color: #ff1921;
        box-shadow: 1px 1px 4px rgba(39, 39, 39, 0.24);
        border-radius: 5px;
        transition: all .3s;
        cursor: pointer;
        &:hover {
            background-color:  #666;
        }
        & + button {
            margin-left: 20px;
        }
    }
}

.list_direct_box {
    max-width: 960px;
    margin: auto;
    color: #fff;
}

.list_direct {
    color: #666;
    padding: 0;
    background-color: #fff;
    box-shadow: 1px 1px 4px rgba(39, 39, 39, 0.24);
}

.logo_direct {
    width: 190px;
}


.search-block-item {
    margin-left: 28px;
}

.group_field {
    display: flex;
}

.list_direct_inside {
    border-top: 2px solid #ff1921;
}

.group_field_item {
    display: flex;
    align-items: center;
    width: 50%;
}

.post-password-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    & p {
        color: #fff;
        font-size: 20px;
        text-align: center;
        margin: 0 0 20px; 
    }
    & input {
        height: 46px;
        box-shadow: 1px 1px 4px rgba(39, 39, 39, 0.24);
        color: #666;
        background-color: #ffffff;
        font-family: Helvetica, Verdana, Arial, sans-serif;
        font-weight: 500;
        font-size: 17px;
        letter-spacing: 1.02px;
        padding: 0 24px;
        margin: 0 0 0 10px;
        border: none;
        border-radius: 5px;
    }
    & input[type="submit"] {
        width: 188px;
        height: 46px;
        color: #fff;
        font-size: 18px;
        border: none;
        background-color: #ff1921;
        box-shadow: 1px 1px 4px rgba(39, 39, 39, 0.24);
        border-radius: 5px;
        transition: all .3s;
        cursor: pointer;
        &:hover {
            background-color: #666;
        }
    }
}

.wrapper_direct {
    position: relative;
    padding: 0;
    margin: 0;
    background: url(/wp-content/themes/beyond/assets/img/office-bg.webp) center/cover no-repeat;
    min-height: 100vh;
    &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
    }
}



@media (max-width: 990px) {
    .yandex-direct-data .search-block {flex-direction: column;}
    .group_field {justify-content: center; margin-bottom: 1em;}
    .group_btn {justify-content: center;margin-left: 0;}
    .group_btn button {width: 260px;}
    .title_h3 {font-size: 32px;}
    .yandex-direct-data {padding: 14vh 15px 30px;}
    .group_field_item {width: 260px;}
    .yandex-direct-data input {flex-grow: 1;padding: 0 16px;}
    .search-block-item {margin-left: 20px;}
    .post-password-form {width: 93%;}
    .post-password-form input[type="submit"] {width: 100%; margin: 16px 0 0;}

    
}

@media (max-width: 540px) {
    .group_field {flex-direction: column;}
    .group_btn  {flex-direction: column;}
    .group_btn button {width: 100%;}
    .group_btn button + button {margin: 10px 0 0;}
    .yandex-direct-data .search-block div label {width: 68px;text-align: right;}
    .search-block-item {margin-left: 0;}
    .title_h3 {font-size: 22px;line-height: 135%;}
    .yandex-direct-data .search-block div input {flex-grow: 1;}
    .search-block-item {margin-top: 10px;}
    .list_direct {font-size: 14px;}
    .yandex-direct-data ul  > li span.name {width: 46%;}
    .form_direct {margin-bottom: 28px;}
    .title_h3 > br {display: block;}
    .logo_direct {width: 150px;}
    header {padding: 20px;}
    .group_field_item {width: auto;}

    .post-password-form label {display: flex;justify-content: space-between;align-items: center;}
    .post-password-form input {flex-grow: 1;}

    
            
}