//
// outside_system.scss
//
.square {
    height: 100px;
    width: 100px;
    position: absolute;
    z-index: -1;
}

.dia-top-left-bottom-right:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;

    top: 0;
    left: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 2px),
        black,
        transparent calc(50% + 2px)
    );
}

.dia-top-right-bottom-left:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
        to top left,
        transparent calc(50% - 2px),
        black,
        transparent calc(50% + 2px)
    );
}

.outside-system-wrapper {
    background-image: url("/public/images/bg-dashboard.jpg");
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.7);
    max-width: 90vw;
}

.outside-system-wrapper::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
}