body, html {
            font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
            line-height: 1.5;
            position: relative;
            margin: 0;
            padding: 0;
            border: 0;
            vertical-align: baseline;
        }

        @media screen and (max-width: 850px) {
            p.pad {
                padding: 0 30px;
            }

            footer {
                padding: 30px;
            }
        }
        
        @media screen and (max-width: 760px) {
            .checklist-top {
                margin-right: -30%;
            }
        }


        @media screen and (max-width: 600px) {
            .checklist-top {
                margin-right: -65%;
            }}     
        
        @media screen and (max-width: 495px) {
            .checklist-top {
                margin-right: -100%;
            }}

        @media screen and (max-width: 400px) {
            .checklist-top {
            margin-right: -130%;
        }}
        
        /*CHECKBOXES*/
        /* The container */
        .check-container {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 20px;
            color: #555764;
            font-size: 18px;
            cursor: pointer;
            font-style: italic;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media only screen and (max-width: 800px) {
            .check-container {
                font-size: 1em;
            }
        }

        /* Hide the browser's default checkbox */
        .check-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #d8d8d8;
        }

        /* On mouse-over, add a grey background color */
        .check-container:hover input ~ .checkmark {
            background-color: #d4e6e9;
        }

        /* When the checkbox is checked, add a blue background */
        .check-container input:checked ~ .checkmark {
            background-color: #78CCC7;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .check-container input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .check-container .checkmark:after {
            left: 9px;
            top: 3px;
            width: 5px;
            height: 14px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }


        div h1 {
            margin-top: 0.6em;
            font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
            font-weight: 500;
        }

        footer {
            color: #e1e1e1;
            padding-top: 40px;
            font-size: 75%;
        }

        .section-content {
            margin-left: auto;
            margin-right: auto;
            width: 90%;
            max-width: var(--max-content-width);
            padding-top: 3rem;
            padding-bottom: 4rem;
            font-size: 1rem;
        }

        .table {
            display: flex;
            flex-direction: column;
            border: 1px solid #f2f2f2;
            font-size: 1rem;
            margin: 0.5rem;
            line-height: 1.5;
            justify-content: space-between;
        }

        .table-header {
            font-weight: 700;
            background-color: #defdec;
        }

        .table-row {
            display: -webkit-box;
            display: -moz-box;
            display: box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: row nowrap;
            -moz-flex-flow: row nowrap;
            flex-flow: row nowrap;
        }

        .table-row:nth-of-type(even) {
            background-color: #ffffff;
        }

        .table-row:nth-of-type(odd) {
            background-color: #f2f2f2;
        }

        .table-row-item {
            display: flex;
            min-width: 70px;
            padding: 0.4em;
        }

        .table-row-item-course {
            display: flex;
            padding: 0.4em;
            min-width: 200px;
        }

        /*Change color of checkmarks and check*/
        .checkmark {
            border-style: solid;
            border-color: #34363E;
            border-width: 1px;
            background-color: #fff;

        }

        .check-container input:checked ~ .checkmark {
            background-color: #7a77b9;
            border: none;
        }

        .checklist-top {
            height: 300px;
            background-color: #7a77b9;
            margin-top: -110px;
        }

        .sm-title {
            color: #fff;
            padding-top: 160px;
            margin-left: 15%;
            font-size: 2.3em;
        }

        .section-content {
            width: 800px;
        }


        .clear-button {
            display: block;
            color: #fff;
            width: 140px;
            font-style: normal;
            font-size: inherit;
            margin: .5rem auto;
            padding: .5rem;
            border: none;
            border-radius: .25rem;
            margin-top: 1.5rem;
        }

        .clear-button {
            background-color: rgba(66, 198, 207, .6);
        }

        .clear-button:hover {
            background-color: #f06a6a;
        }