.course .course_cost {
        margin-left         : 15px;
    }

    .price span {
        border              : 1px solid black;
        background          : white;
        padding             : 2px;
        display             : inline-block;
        margin-right        : 4px;
        vertical-align      : middle;
        padding-left        : 2px;
        font-weight         : bold;
        border-radius       : 3px;
        color               : black;
    }

    .price span img {
        vertical-align      : middle;
    }

    .course_description {
        margin-left         : 25px;
    }

    .course_details  {
        margin-left         : 15px;
    }

    span.radio {
        width               : 25px;
        display             : inline-block;
    }

    #course_listing_box {
        margin-top          : 8px;
        padding             : 0px;
    }

    .course td {
        border-top          : 1px solid var(--main-dark-grey);
    }

    tr.course.first td {
        border-top          : none !important;
    }

    .course_img {
        border              : 1px solid var(--main-item-border);
        background          : var(--main-item-back);
    }

    .course ul {
        font-size           : 85%;
    }

    .course h4, .course ul {
        margin-top          : 4px;
        margin-bottom       : 0px;
    }

    .course.even {
        background-color    : var(--main-darken);
    }

    .course.unavailable {
        background-color    : #dcc;
    }

    .course.unavailable.even {
        background-color    : var(--main-darken-heavy);
    }

    .training_table {
        display               : grid;
        grid-template-columns : 150px 2fr 1fr;
        gap: 20px;
    }

    .training_groph_preview {
        text-align          : center;
    }

    .training_table hr {
        display: none;
    }

    .training_table li {
        font-size           : 80%;
    }

    .training_table h4, .training_table ul {
        margin-top          : 4px;
        margin-bottom       : 4px;
    }

    @media screen and (max-width: 800px) {
        .training_table {
            grid-template-columns : 150px 1fr;
        }
        .training_groph_preview {
            grid-row: span 2;
        }
    }

    @media screen and (max-width: 500px) {
        .training_table {
            display : flex;
            flex-direction: column;
            align-items: center;
        }

        .training_table hr {
            display: block;
            width: 100%;
        }
    }