.content
{
    width: 100%;
    height: 100%;
}

.rules
{
    width: 90%;
    height: 100%;
    margin: auto;
}

.rules .title
{
    height: 60px;
    width: 95%;
    margin: auto;
    display: flex;
    align-items: center;
}

.rules .title .name
{
    font-size: 18pt;
    font-weight: bold;
    color: rgba(0,0,0,0.6);
}

.line-separator
{
    position: relative;
    background-color: rgba(0,0,0,0.2);
    height: 1pt;
}

.rules .contents .card
{
    border: none;
}

.rules .contents .card-header
{
    background-color: white;
    border: none;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
    0 1px 8px 0 rgba(0, 0, 0, 0.12),
    0 3px 3px -2px rgba(0, 0, 0, 0.4);
}

.rules .contents .card-header .btn-link
{
    width: 100%;
    font-size: 16pt;
    text-decoration: none;
    font-weight: bold;
    color: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
}

.rules .contents .card-header .btn-link .icon
{
    position: absolute;
    left: 0;
}

.rules .contents .card-header .btn-link .icon.icon-right-arrow:before
{
    transition: transform 0.2s ease-in-out;
    transform: rotate(90deg);
}

.rules .contents .card-header .btn-link.clicked .icon.icon-right-arrow:before
{
    transform: rotate(-90deg);
    transition: transform 0.2s ease-in-out;
}

.rules .contents .card-body
{
    font-size: 12pt;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    text-align: justify;
    background-color: rgba(128, 128, 128, 0.05);
    box-shadow: inset 0 0 5px 5px rgba(128, 128, 128, 0.1);
}

.rules .contents .card-body .rule-group .rule:before
{
    content: "\2022";
    font-size: 15pt;
    color: grey;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-right: -1em;
}

@media only screen and (max-width: 768px){
    .content
    {
        height: auto;
    }

    .rules .title
    {
        height: 30px;;
    }

    .rules .title .name
    {
        font-size: 14pt;
    }

    .rules .contents .card-header
    {
        padding: 6px 8px;
    }

    .rules .contents .card-header .btn-link
    {
        font-size: 12pt;
    }

    .rules .contents .card-body
    {
        font-size: 10pt;
    }

    .rules .contents .card-body .rule-group
    {
        padding-right: 10px;
    }

    .rules .contents .card-body .rule-group .rule:before
    {
        margin-right: -0.2em;
    }
}