$border-spacing: 0.2rem;

.via-obstruida-component {
    .via-obstruida-content {
        right: 5.5rem !important;

        .justificativas-container{
            width: 100%;
            height: 100%;
        }

        i.green{
            color: green;
        }

        i.red{
            color: red;
        }

        i.yellow{
            color: #d9d916;
        }

        .galeria-via-obstruida {
            margin-bottom: 2rem;

            a {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 6rem;
                height: 6rem;
                border: 0.2rem solid;
                position: relative;
                overflow: hidden;
                margin-right: 1rem;

                img {
                    display: block;
                    width: 14rem;
                    position: absolute;

                }
            }
        }
    }

    .tabs-content-container {
        position: relative;
        margin-bottom: 0.5rem;
        width: 50rem;
        height: 65rem;

        @media screen and (max-height: 1080px) {
            height: 65rem;
        }

        @media screen and (max-height: 1024px) {
            height: 55rem;
        }

        @media screen and (max-height: 900px) {
            height: 45rem;
        }

        @media screen and (max-height: 768px) {
            height: 35rem;
        }

        @media screen and (max-width: 1600px) {
            width: 48rem;
        }

        @media screen and (max-width: 1400px) {
            width: 41rem;
        }

    }

    .tab-content-ocorrencia {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }

    .pop-over-trigger{
        margin-top: 0.5rem;
    }

    .table-scrollable-container {
        border-top: 2.1rem solid transparent;
        border-bottom: none;
        height: 100%;
    }

    .table-scrollable-wrapper {
        height: 100%;
    }

    .table-justificativas {
        @extend .table-default;
        border-spacing: $border-spacing;
        border-collapse: separate;
        background-color: $color-snow;

        tbody tr th {
            color: transparent;
            padding: 0;
            font-family: inherit;

            .heading-content {
                border-left: $border-spacing solid $color-snow;
                color: darken($color-smoke-dark, 50%);
                background: lighten($color-main-neutral, 12%);
                padding: 0.5rem 1rem;
                margin-left: -$border-spacing;
            }
        }

        tbody tr th div {
            top: 0;
        }

        tr {
            &:nth-child(even) td {
                background: $color-snow-extra-dark;
            }

            &:hover td {
                background-color: $color-hovered;
            }

            td {
                font-size: 1.1rem;
                color: darken($color-smoke-dark, 50%);
                text-overflow: ellipsis;
                overflow: hidden;
                border: none;
                max-width: 12rem;
            }
        }

        tr td, tr th {
            @media screen and (max-width: 1600px) {
                font-size: 1.1rem;
            }

            @media screen and (max-width: 1400px) {
                font-size: 0.9rem;
            }
        }
    }
}
