landing-scheme {
    font-family: Roboto, normal;
    width: 100%;
    display: block;
    overflow: hidden;
    aspect-ratio: 540 / 800;
    max-width: 1200px;
}

landing-scheme[type="desktop"] {
    aspect-ratio: 1200 / 550;
}

landing-scheme {
    @keyframes arrowLeftAnimation {
        0% {
            opacity: 0.5;
            transform: translateX(0px);
        }

        100% {
            opacity: 0;
            transform: translateX(-10px);
        }
    }

    @keyframes arrowRightAnimation {
        0% {
            opacity: 0.5;
            transform: translateX(0px);
        }

        100% {
            opacity: 0;
            transform: translateX(10px);
        }
    }

    * {
        box-sizing: border-box;
    }

    #divider {
        cursor: pointer;
    }

    #divider path {
        stroke: var(--text-color-primary);
    }

    #divider rect {
        stroke: var(--text-color-primary);
        fill: var(--background-color-primary);
    }

    .header rect {
        fill: none;
        stroke: var(--text-color-primary);
    }

    .header text {
        dominant-baseline: central;
        line-height: 30px;
        font-size: 16px;
        fill: var(--text-color-primary);
    }

    .header.user text {
        text-anchor: start;
    }

    .header.officer text {
        text-anchor: end;
    }

    .risk circle {
        fill-opacity: 0.2;
    }

    .risk.Low circle {
        fill: rgb(38, 103, 99);
        stroke: rgb(38, 103, 99);
    }

    .risk.Medium circle {
        fill: rgb(208, 192, 24);
        stroke: rgb(208, 192, 24);
    }

    .risk.High circle {
        fill: rgb(255, 133, 98);
        stroke: rgb(255, 133, 98);
    }

    .risk text {
        dominant-baseline: central;
        text-anchor: middle;
        font-family: Roboto;
        font-size: 12px;
        font-weight: 900;
    }

    .risk.Low text {
        fill: rgb(38, 103, 99);
    }

    .risk.Medium text {
        fill: rgb(208, 192, 24);
    }

    .risk.High text {
        fill: rgb(255, 133, 98);
    }

    .label {
        text-anchor: middle;
        fill: var(--text-color-primary);
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
    }

    .background {
        opacity: 0.05;
    }

    #officer .background {
        fill: var(--landing-scheme-background1);
    }

    #user .background {
        fill: var(--landing-scheme-background2);
    }

    .divider-arrow-left {
        animation: 1.5s ease 0s infinite normal none running arrowLeftAnimation;
    }

    .divider-arrow-right {
        animation: 1.5s ease 0s infinite normal none running arrowRightAnimation;
    }

    .user #officer {
        display: none;
    }

    .officer #user {
        display: none;
    }
}