@import '../functions.less';
@import '../../../../files/config/colors.less';


.drs-article-01 {
    * { .fx(); }
    max-width: 1100px;
    margin: 0 auto;
    .category {
        .flex(20px);
        justify-content: center;
        font-size: 1.4em;
        padding-bottom: 20px;
        border-bottom: 1px solid #1234;
        a {
            display: block;
            text-decoration: none;
            color: @corLink;
            span {
                .grid(auto auto; 5px; center);
                img {
                    display: block;
                    height: 25px;
                }
            }
            &:hover {
                opacity: 50%;
            }
        }
    }
    .tema {
        border-top: 1px solid #1234;
        border-bottom: 1px solid #1234;
        padding: 10px;
        text-align: center;
        margin-top: 60px;
        a {
            border: 2px solid @corLink;
            color: @corLink;
            padding: 5px 10px;
            border-radius: 3px;
            display: inline-block;
            margin: 2px;
            &:hover {
                background: @corLink;
                color: white;
            }
        }
    }
    .data-autor {
        text-align: center;
        font-size: .8em;
        padding: 30px 0;
        span {
            color: #800;
            text-transform: uppercase;
        }
    }
    .titulo {
        font-size: 2.5em;
        font-weight: normal;
        text-align: center;
    }
    .subtitulo:not(:empty) {
        opacity: 65%;
        padding: 20px 10%;
        font-size: 1.2em;
        text-align: center;
    }
    .imagem {
        padding: 10px 0;
        img {
            display: block;
            width: 100%;
            border-radius: 5px;
        }
        p {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px 0;
            font-size: 12px;
            line-height: 20px;
            color: #000;
            &:not(:empty){
                margin-bottom: 20px;
            }
        }
    }
    .desc {
        max-width: 800px;
        line-height: 26px;
        font-size: 1.1em;
        text-align: justify;
        a {
            color: @corLink;
            text-decoration: none;
            &:hover {
                color: @corLinkHover;
            }
        }
        .box-txt-image {
            margin:40px auto;
            img {
                display: block;
                width: 100%;
                margin-bottom: -5px;
                border-radius: 5px;
            }
            .legenda, span {
                display: block;
                max-width: 800px;
                margin: 0 auto;
                font-size: 12px;
                margin-bottom: 20px;
                font-style: normal;
                color: #000;
                padding: 6px 10px;
                line-height: 22px;
            }
        }
        .comment-textarea {
            border-left: 8px solid #1234;
            padding: 20px 15px 20px 15px;
            background: #7891;
            border-radius: 3px;
            margin: 10px 0;
            &.no-space p {
                margin: 0;
            }
        }
        .textbox-textarea {
            border: 4px solid #1234;
            background: #7891;
            padding: 15px;
            margin: 40px 0;
            font-size: .95em;
            border-radius: 5px;
            p {
                margin: -4px 0;
                line-height: 19px;
            }
        }
        .fieldset-textarea {
            white-space: normal;
            background: #7891;
            padding: 10px 20px 5px 20px;
            margin: 45px 0;
            border-radius: 5px;
            legend {
                display: inline;
                position: absolute;
                margin-top: -42px;
                padding: 2px 20px;
                font-size: 15px;
                border-radius: 3px;
                background: #345;
                color: #FFF;
            }
            > div {
                font-size: .95em;
            }
        }
        .textarea-separator {
            border-top: 1px solid #123B;
            margin: -5px 0 20px 0;
        }
    }
    .fonte {
        margin-top: 15px;
    }
    .paragraph-generate {
        margin: 0 auto;
        color: ~"@{textoHtml}DD";
        p:not(:last-child) {
            margin-bottom: 15px;
        }
    }
    a[onclick="history.back()"] {
        .botao2();
        display: block;
        max-width: 150px;
        text-align: center;
        font-size: 1em;
        margin: 0 auto;
    }
}


@media screen and ( max-width: 1000px ){
    .drs-article-01 {
        .titulo {
            font-size: 2.3em;
        }
    }
}

@media screen and ( max-width: 800px ){
    .drs-article-01 {
        .data-autor b {
            display: block;
            opacity: 0;
            font-size: 5px;
        }
        .titulo {
            font-size: 2.1em;
        }
        .subtitulo:not(:empty) {
            padding: 20px 5%;
        }
        .desc {
            text-align: left;
            font-size: 1.1em;
        }
    }
}

@media screen and ( max-width: 600px ){
    .drs-article-01 {
        .category {
            font-size: 1.1em;
        }
        .titulo {
            font-size: 1.8em;
        }
        .subtitulo:not(:empty) {
            padding: 20px 0;
        }
    }
}