/* =========================================================
   SITE RULES
========================================================= */

.rules-box {

    width: 100%;

    margin-top: 25px;

    padding: 8px 28px 10px;

    background: #b8b8b8;

    border: 1px solid #888888;

    border-radius: 4px;

    box-shadow:
        0 3px 8px rgba(0,0,0,.22);
}


/* =========================================================
   RULE ITEM
========================================================= */

.rule-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 15px 4px;

    border-bottom: 1px solid #999999;
}


.rule-item:last-child {

    border-bottom: 0;

}


/* =========================================================
   RULE NUMBER
========================================================= */

.rule-number {

    width: 31px;

    height: 31px;

    flex: 0 0 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 1px;

    background: #a0522d;

    color: #ffffff;

    border-radius: 50%;

    font-size: 14px;

    font-weight: bold;

    line-height: 31px;

    box-shadow:
        0 2px 4px rgba(0,0,0,.25);
}


/* =========================================================
   RULE TEXT
========================================================= */

.rule-item p {

    margin: 0;

    padding: 2px 0 0;

    color: #222222;

    font-size: 15px;

    line-height: 23px;

    text-align: left;
}


.rule-item strong {

    color: #000000;

    font-weight: bold;
}


/* =========================================================
   ADD SITE BUTTON
========================================================= */

.rules-action {

    display: flex;

    justify-content: center;

    margin-top: 25px;

}


.rules-add-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 190px;

    padding: 11px 25px;

    background: #a0522d;

    color: #ffffff;

    border-radius: 3px;

    font-size: 16px;

    font-weight: bold;

    box-shadow:
        0 2px 5px rgba(0,0,0,.25);

    transition:
        background-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}


.rules-add-button:hover {

    background: #cd853f;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow:
        0 5px 10px rgba(0,0,0,.25);
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 600px) {


    .rules-box {

        margin-top: 20px;

        padding: 5px 12px 7px;
    }


    .rule-item {

        gap: 10px;

        padding: 12px 2px;
    }


    .rule-number {

        width: 27px;

        height: 27px;

        flex-basis: 27px;

        font-size: 12px;

        line-height: 27px;
    }


    .rule-item p {

        padding-top: 1px;

        font-size: 13px;

        line-height: 20px;
    }


    .rules-action {

        margin-top: 20px;

    }


    .rules-add-button {

        width: 100%;

        min-width: 0;

        padding: 10px 20px;

        font-size: 15px;
    }

}