@color-blue: #6cc3d9;

#settings-info {
    position: relative;
    padding-bottom: 20px;
    margin: 0;

    .content-block {
        padding: 0 5%;
    }

    .bet-amount {
        text-align: center;
        font-size: 18px;
    }

    .branding {
        max-width: 60%;

        @media @portrait {
            max-width: 80%;
        }
    }

    .infoHeader {
        max-width: 100%;
    }

    .paytable-logo {
        max-height: 250px;
        max-width: 100%;
        margin: 3vh auto 0;
    }

    .section-title {
        font-family: @font-family;
        color: #85dc4d;
        font-size: 30px;
        text-align: center;
        padding: 2vh 0 0 0;
        margin: 0 auto 2vh;
        width: 105%;
        min-width: 150px;
    }

    .feature-bet-amount,
    .game-date-version {
        font-family: @font-family;
        color: #b69dc4;
        margin: 0 auto;
    }

    .feature-bet-amount {
        margin-bottom: 20px;
    }

    .sub-title {
        font-family: @font-family;
        color: #85dc4d;
        font-size: 32px;
        text-align: center;
        padding: 2vh 0 0 0;
        margin: 0 auto 2vh;
        width: 100%;
        min-width: 150px;
    }

    .win-title {
        font-family: @font-family;
        color: #85dc4d;
        font-size: 30px;
        text-align: center;
        padding: 2vh 0 0 0;
        margin: 0 auto 2vh;
        width: 90%;
        min-width: 300px;
    }

    .header-section {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .web {
        max-height: 100px;
    }

    .paytable-img {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        max-height: 500px;
        width: 100%;
        max-width: 500px;
    }

    .paytable-img-small {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        width: 40%;

        @media @portrait {
            width: 70%;
        }
    }

    .symbols-img {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        width: 100%;
        padding-right: 2%;

        @media @portrait {
            width: 120%;
            margin-left: -4%;
        }
    }

    .paytable-grid {
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        font-size: 1.4vw;

        @media @portrait {
            width: 120%;
            margin-left: -4%;
            font-size: 4vw;
        }
    }

    .paytable-row {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #888888;
        padding: 1% 0;
        font-family: @font-family;
        color: #b69dc4 !important;

        &:first-child {
            border-top: 1px solid #888888;
        }

        .paytable-row-n {
            width: 18%;
            color: #85dc4d;

            @media @portrait {
                width: 16%;
            }
        }

        .paytable-value {
            width: 22%;

            @media @portrait {
                width: 34%;
            }
        }

        .paytable-dot {
            width: 0;
        }
    }

    .desc-text {
        width: 600px;
        max-width: 90%;
        color: #b69dc4;
        text-align: center;
    }

    .logo,
    .separator,
    .random-feature-preview {
        max-width: 70%;

        @media @portrait {
            max-width: 90%;
        }
    }

    .paylines.flex-container {
        margin-bottom: 5%;
        max-width: 80%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;

        .flex-container {
            display: flex;
            flex-flow: row wrap;
            margin: 0.7em;
        }

        .square {
            border: 1px solid black;
            border-width: 1px 1px 0px 0px;
        }

        p {
            max-width: 100% !important;
            margin-bottom: 0;
            font-size: 18px;
        }
    }
}