#nprogress {
    pointer-events: none
}

    #nprogress .bar {
        background: #e79a00;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px
    }

    #nprogress .peg {
        display: block;
        position: absolute;
        right: 0px;
        width: 100px;
        height: 100%;
        box-shadow: 0 0 10px #e79a00,0 0 5px #e79a00;
        opacity: 1;
        transform: rotate(3deg) translate(0px, -4px)
    }

    #nprogress .spinner {
        display: block;
        position: fixed;
        z-index: 100;
        top: 15px;
        right: 15px
    }

    #nprogress .spinner-icon {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        border: solid 2px transparent;
        border-top-color: #fff;
        border-left-color: #fff;
        border-radius: 50%;
        -webkit-animation: nprogress-spinner 400ms linear infinite;
        animation: nprogress-spinner 400ms linear infinite
    }

.nprogress-custom-parent {
    overflow: hidden;
    position: relative
}

    .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar {
        position: absolute
    }

@-webkit-keyframes nprogress-spinner {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes nprogress-spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

#nprogress .bar, #nprogress .spinner {
    z-index: 999999
}

@font-face {
    font-family: 'Proxima';
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regular-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regular-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regular-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regular-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regular-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'Proxima';
    font-style: italic;
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regitalic-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regitalic-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regitalic-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regitalic-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-regitalic-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'Proxima';
    font-weight: 300;
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-light-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-light-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-light-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-light-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-light-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'Proxima';
    font-weight: 600;
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibold-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibold-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibold-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibold-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibold-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'Proxima';
    font-weight: 600;
    font-style: italic;
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibolditalic-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibolditalic-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibolditalic-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibolditalic-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-semibolditalic-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'Proxima';
    font-weight: bold;
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-bold-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-bold-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-bold-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-bold-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-bold-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'Proxima';
    font-weight: bold;
    font-style: italic;
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-boldit-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-boldit-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-boldit-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-boldit-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-boldit-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

@font-face {
    font-family: 'Proxima';
    font-weight: 900;
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-extrabold-webfont.eot?1307578394");
    src: url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-extrabold-webfont.eot?iefix") format("eot"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-extrabold-webfont.woff?1307578394") format("woff"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-extrabold-webfont.ttf?1307578394") format("truetype"),url("http://assets.teachablecdn.com/fonts/proxima-nova/proximanova-extrabold-webfont.svg#webfont2rpW2ohz") format("svg");
    font-display: swap
}

.btn-primary, .btn-primary:active, .btn-primary:focus {
    background: #e79a00 !important;
    border: 1px solid #e79a00 !important;
    font-weight: 600 !important;
    outline: none !important;
    color: #fff;
    border-radius: 20px;
    padding: 3px 18px !important
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:focus:hover, .btn-primary:focus:focus {
        outline: none !important;
        text-decoration: none;
        background: #fb8b8b !important;
        border: 1px solid #fb8b8b !important;
        color: #fff
    }

@media screen and (max-width: 767px) {
    .btn-primary, .btn-primary:active, .btn-primary:focus {
        font-size: 15px
    }
}

.btn-primary img, .btn-primary:active img, .btn-primary:focus img {
    margin-right: 10px
}

.btn-secondary, .btn-secondary:active, .btn-secondary:focus {
    background: #666 !important;
    border: 1px solid #666 !important;
    font-weight: 600 !important;
    outline: none !important;
    color: #fff;
    border-radius: 20px;
    padding: 3px 18px !important
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:focus:hover, .btn-secondary:focus:focus {
        outline: none !important;
        text-decoration: none;
        background: #595959 !important;
        border: 1px solid #595959 !important;
        color: #fff
    }

@media screen and (max-width: 767px) {
    .btn-secondary, .btn-secondary:active, .btn-secondary:focus {
        font-size: 15px
    }
}

.btn-secondary img, .btn-secondary:active img, .btn-secondary:focus img {
    margin-right: 10px
}

.btn-inverse, .btn-inverse:hover, .btn-inverse:active, .btn-inverse:focus {
    background: #fff !important;
    border: 1px solid #bdc3c7 !important;
    font-weight: 600 !important;
    outline: none !important;
    color: #e79a00;
    border-radius: 20px
}

    .btn-inverse:hover, .btn-inverse:hover:hover, .btn-inverse:active:hover, .btn-inverse:focus:hover {
        outline: none !important;
        text-decoration: none;
        color: #fb8b8b !important;
        border: 1px solid #afb6bb !important
    }

@media screen and (max-width: 767px) {
    .btn-inverse, .btn-inverse:hover, .btn-inverse:active, .btn-inverse:focus {
        font-size: 15px
    }
}

.btn-inverse img, .btn-inverse:hover img, .btn-inverse:active img, .btn-inverse:focus img {
    margin-right: 10px
}

.btn-inverse[disabled], .btn-inverse[disabled]:hover, .btn-inverse[disabled]:active, .btn-inverse[disabled]:focus {
    opacity: 0.5
}

.btn-sm, .btn-sm:active, .btn-sm:focus {
    border-radius: 5px !important;
    padding: 0px 13px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 26px !important
}

.btn-md, .btn-md:active, .btn-md:focus {
    display: inline-block;
    border-radius: 50px !important;
    font-size: 13px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 30px !important;
    padding-right: 30px !important
}

.btn-hg, .btn-hg:active, .btn-hg:focus {
    font-size: 17px !important;
    border-radius: 32px !important;
    padding: 12px 30px !important;
    display: inline-block
}

.btn-white-border {
    background: none;
    border: 1px solid #fff;
    color: #fff
}

    .btn-white-border:hover {
        background: #fff;
        border: 1px solid #fff
    }

.btn-enroll {
    margin-bottom: 60px
}

.verify-card.profile {
    margin-top: 20px
}

.btn-teachable-block {
    min-width: 200px
}

.btn-orange, .btn-orange:hover, .btn-orange:active, .btn-orange:focus {
    border-color: #ff7f45 !important;
    background-color: #ff7f45 !important
}

    .btn-orange:hover, .btn-orange:active, .btn-orange:focus, .btn-orange:hover:hover, .btn-orange:hover:active, .btn-orange:hover:focus, .btn-orange:active:hover, .btn-orange:active:active, .btn-orange:active:focus, .btn-orange:focus:hover, .btn-orange:focus:active, .btn-orange:focus:focus {
        border-color: #ff6d2c !important;
        background-color: #ff6d2c !important
    }

    .btn-orange[disabled], .btn-orange[disabled]:hover, .btn-orange[disabled]:active, .btn-orange[disabled]:focus {
        background-color: #ff7f45 !important
    }

.btn-teachable-inverse, .btn-teachable-inverse:hover, .btn-teachable-inverse:active, .btn-teachable-inverse:focus {
    background: #fff !important;
    border: 1px solid #9cd4d0 !important;
    font-weight: 600 !important;
    outline: none !important;
    color: #09a59a;
    border-radius: 20px
}

    .btn-teachable-inverse:hover, .btn-teachable-inverse:hover:hover, .btn-teachable-inverse:active:hover, .btn-teachable-inverse:focus:hover {
        outline: none !important;
        text-decoration: none;
        color: #088d83 !important;
        border: 1px solid #8accc8 !important
    }

@media screen and (max-width: 767px) {
    .btn-teachable-inverse, .btn-teachable-inverse:hover, .btn-teachable-inverse:active, .btn-teachable-inverse:focus {
        font-size: 15px
    }
}

.btn-teachable-inverse img, .btn-teachable-inverse:hover img, .btn-teachable-inverse:active img, .btn-teachable-inverse:focus img {
    margin-right: 10px
}

.btn-teachable-inverse[disabled], .btn-teachable-inverse[disabled]:hover, .btn-teachable-inverse[disabled]:active, .btn-teachable-inverse[disabled]:focus {
    opacity: 0.5
}

.btn-teachable, .btn-teachable:hover, .btn-teachable:active, .btn-teachable:focus {
    color: #fff !important;
    background-image: url("http://assets.teachablecdn.com/icons/teachable-icon-white-rebrand.svg") !important;
    background-repeat: no-repeat !important;
    padding-left: 48px !important;
    margin: auto;
    background-size: 22px 22px !important;
    background-position: 11px 50% !important
}

    .btn-teachable:hover, .btn-teachable:hover:hover, .btn-teachable:active:hover, .btn-teachable:focus:hover {
        background-image: url("http://assets.teachablecdn.com/icons/teachable-icon-white-rebrand.svg") !important;
        background-position: 11px 50% !important;
        background-repeat: no-repeat !important;
        background-size: 22px 22px !important
    }

@media screen and (max-width: 460px) {
    .btn-teachable, .btn-teachable:hover, .btn-teachable:active, .btn-teachable:focus {
        background-image: none !important;
        padding-left: 21px !important;
        width: 100%
    }
}

.btn-block, .btn-block:hover, .btn-block:focus {
    display: block
}

.btn-inline-block {
    min-width: 300px;
    position: relative
}

.btn-price .price {
    color: rgba(255,255,255,0.5);
    font-weight: normal;
    padding-left: 16px
}

.btn-upsell {
    white-space: inherit
}

    .btn-upsell .btn-content {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

        .btn-upsell .btn-content .btn-text {
            margin: auto;
            padding-right: 16px;
            word-break: break-word
        }

        .btn-upsell .btn-content .btn-divider {
            border-left: 1px solid rgba(255,255,255,0.5);
            height: 100%;
            position: absolute;
            right: 90px
        }

.btn-price-description {
    font-size: 12px;
    margin-top: 10px;
    color: #b0b0b0
}

a.btn, a.btn:hover, a.btn:focus {
    display: inline-block
}

label.control-default {
    font-weight: 300;
    line-height: 27px
}

input.form-control {
    padding: 5px 10px;
    height: 40px;
    font-weight: 200;
    margin-bottom: 14px;
    transition: all 0.3s ease;
    box-shadow: none
}

    input.form-control:focus {
        border-color: #fff;
        outline: 0;
        box-shadow: none
    }

    input.form-control::-webkit-input-placeholder {
        opacity: 0.7
    }

    input.form-control.search {
        border-bottom-left-radius: 6px !important;
        border-top-left-radius: 6px !important;
        font-size: 17px;
        height: 45px;
        padding-left: 18px
    }

    input.form-control.error {
        border-color: var(--red-herring)
    }

.inline-error {
    color: var(--red-herring);
    font-size: 14px
}

select.form-control {
    height: 40px
}

.form-group.field {
    margin-bottom: 0px
}

div.custom-radio {
    background: #fff;
    display: block;
    width: 16px;
    height: 16px;
    min-height: 16px;
    border-radius: 10px;
    border: 2px solid #ccc;
    margin: auto;
    top: 10px;
    transition: all 0.1s linear;
    position: relative;
    cursor: pointer
}

    div.custom-radio .selected {
        background: #fff;
        display: block;
        width: 1px;
        height: 1px;
        top: 6px;
        left: 5px;
        position: absolute;
        border-radius: 10px;
        transition: all 0.1s linear
    }

.active div.custom-radio, .checked div.custom-radio {
    border: 2px solid #e79a00
}

    .active div.custom-radio .selected, .checked div.custom-radio .selected {
        background: #e79a00;
        width: 8px;
        height: 8px;
        top: 2px;
        left: 2px
    }

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("../../../assets.teachablecdn.com/icons/select-up-down.png") right 12px center #fff no-repeat;
    background-size: 15px;
    padding: 5px 15px;
    border: 1px solid #ccc;
    box-shadow: none;
    margin-bottom: 14px;
    border-radius: 4px
}

    select.form-control:focus {
        outline: 0;
        box-shadow: none !important;
        border: 1px solid #09a59a !important
    }

.has-success .form-control {
    border-color: #09a59a !important;
    box-shadow: none
}

.wistia_menu_item {
    padding: 8px;
    hover-background: #fcfcfc
}

.open > .dropdown-menu {
    transform: scale(1, 1)
}

    .open > .dropdown-menu li a {
        color: #000
    }

.dropdown-menu li a {
    color: #fff
}

.dropdown-menu {
    transform-origin: top;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(1, 0);
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out
}

@-moz-document url-prefix() {
    .dropdown-menu {
        display: none
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .dropdown-menu {
        display: none
    }
}

.dropup .dropdown-menu {
    transform-origin: bottom
}

.dropdown-menu.left-caret:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0,0,0,0.2);
    content: ''
}

.dropdown-menu.left-caret:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: ''
}

.dropdown-menu.left-caret:before, .dropdown-menu.pull-left:before {
    left: 17px;
    right: auto
}

.dropdown-menu.left-caret::after, .dropdown-menu.pull-left:after {
    left: 18px;
    right: auto
}

.modal-header {
    border-bottom: 0px;
    z-index: 1300 !important
}

    .modal-header .close {
        color: #fff;
        opacity: 1;
        font-weight: 100;
        font-size: 40px;
        margin-right: 20px;
        margin-top: 20px
    }

        .modal-header .close:focus {
            outline: 0 !important
        }

.modal-body {
    z-index: 1100 !important
}

.modal-backdrop.in {
    filter: alpha(opacity=80);
    opacity: 0.8
}

.custom-toggle {
    position: absolute;
    margin-left: -9999px;
    opacity: 0
}

    .custom-toggle + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

input.custom-toggle-round + label {
    padding: 2px;
    width: 35px;
    height: 18px;
    background-color: #dddddd;
    border-radius: 60px
}

    input.custom-toggle-round + label:before, input.custom-toggle-round + label:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: ''
    }

    input.custom-toggle-round + label:before {
        right: 1px;
        background-color: #f1f1f1;
        border-radius: 30px;
        transition: background 0.2s ease-out
    }

    input.custom-toggle-round + label:after {
        width: 17px;
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        background-color: #fafafa;
        transition: margin 0.2s ease-out
    }

input.custom-toggle-round:checked + label:before {
    background-color: #e2fce5
}

input.custom-toggle-round:checked + label:after {
    margin-left: 17px;
    background: #8ce196;
    border: 1px solid #76cd81
}

.switch-toggle a, .switch-light span span {
    display: none
}

@media only screen {
    .switch-toggle {
        display: block;
        height: 23px;
        position: relative;
        padding: 0 !important;
        border-radius: 14px;
        margin-top: -1px;
        margin-bottom: 14px
    }

        .switch-toggle * {
            box-sizing: border-box;
            padding: 0px 10px 1px 9px
        }

        .switch-toggle a {
            display: block;
            transition: all 0.2s ease-out
        }

        .switch-toggle label, .switch-toggle > span {
            line-height: 1.875em;
            vertical-align: middle
        }

        .switch-toggle input:focus ~ a, .switch-toggle input:focus + label {
            outline: 1px dotted #888
        }

        .switch-toggle input {
            position: absolute;
            opacity: 0
        }

            .switch-toggle input + label {
                position: relative;
                z-index: 2;
                float: left;
                width: 50%;
                height: 100%;
                margin: 0;
                text-align: center;
                font-weight: 200;
                font-size: 11px;
                cursor: pointer;
                color: var(--black)
            }

            .switch-toggle input:checked + label {
                outline: 0
            }

        .switch-toggle a {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            z-index: 1;
            width: 50%;
            height: 100%;
            background: #8ce196;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            border: 1px solid #76cd81
        }

        .switch-toggle input:last-of-type:checked ~ a {
            left: 50%
        }

        .switch-toggle.switch-3 label, .switch-toggle.switch-3 a {
            width: 33.33333%
        }

        .switch-toggle.switch-3 input:checked:nth-of-type(2) ~ a {
            left: 33.33333%
        }

        .switch-toggle.switch-3 input:checked:last-of-type ~ a {
            left: 66.66667%
        }

        .switch-toggle.switch-4 label, .switch-toggle.switch-4 a {
            width: 25%
        }

        .switch-toggle.switch-4 input:checked:nth-of-type(2) ~ a {
            left: 25%
        }

        .switch-toggle.switch-4 input:checked:nth-of-type(3) ~ a {
            left: 50%
        }

        .switch-toggle.switch-4 input:checked:last-of-type ~ a {
            left: 75%
        }

        .switch-toggle.switch-5 label, .switch-toggle.switch-5 a {
            width: 20%
        }

        .switch-toggle.switch-5 input:checked:nth-of-type(2) ~ a {
            left: 20%
        }

        .switch-toggle.switch-5 input:checked:nth-of-type(3) ~ a {
            left: 40%
        }

        .switch-toggle.switch-5 input:checked:nth-of-type(4) ~ a {
            left: 60%
        }

        .switch-toggle.switch-5 input:checked:last-of-type ~ a {
            left: 80%
        }
}

@media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 80em) {
    .switch-light, .switch-toggle {
        -webkit-animation: webkitSiblingBugfix infinite 1s
    }
}

@-webkit-keyframes webkitSiblingBugfix {
    from {
        -webkit-transform: translate3d(0, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0)
    }
}

.table th, .table td {
    padding: 24px
}

.table th {
    line-height: 32px
}

.alert {
    font-weight: 600
}

    .alert .gray-link {
        font-size: 12px;
        text-decoration: underline;
        color: #95a5a6
    }

    .alert .help-block {
        color: inherit;
        margin: inherit;
        margin-bottom: 0px
    }

.alert-info, .alert-info a {
    color: #4e9abf
}

.alert-danger, .alert-danger a {
    color: #a56b6a
}

.alert-success a {
    text-decoration: underline;
    color: #3c763d
}

.alert-default {
    border: 1px solid #ccc;
    background: #fff
}

.alert-teachable {
    background: #09a59a url("http://assets.teachablecdn.com/icons/teachable-icon-white-rebrand.svg") no-repeat !important;
    background-position: 14px 14px !important;
    background-size: 20px 20px !important;
    border: none;
    padding-left: 50px;
    color: #fff;
    font-weight: 600
}

    .alert-teachable a, .alert-teachable a:hover {
        color: #fff;
        text-decoration: underline
    }

.modal {
    text-align: center
}

    .modal .modal-header .close {
        position: absolute;
        top: 0px;
        right: 0px;
        color: #cadae9
    }

    .modal .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle
    }

        .modal .modal-dialog.modal-md {
            width: 750px
        }

        .modal .modal-dialog.modal-lg {
            width: 1070px
        }

@media screen and (max-width: 1070px) {
    .modal .modal-dialog.modal-lg {
        max-width: 90%;
        position: absolute;
        left: 3%;
        margin-left: 20px;
        margin-right: 24px
    }

        .modal .modal-dialog.modal-lg .modal-footer {
            padding-top: 70px
        }

            .modal .modal-dialog.modal-lg .modal-footer .pull-left {
                margin-top: 0px;
                width: 100%;
                text-align: center;
                padding-left: 30px;
                padding-right: 30px
            }
}

@media screen and (max-width: 820px) {
    .modal .modal-dialog.modal-lg .modal-icon {
        display: none
    }

    .modal .modal-dialog.modal-lg .modal-footer {
        padding-top: 20px
    }

    .modal .modal-dialog.modal-lg .btn {
        margin-bottom: 20px;
        width: 100%
    }
}

.modal .modal-dialog .modal-header, .modal .modal-dialog .modal-body {
    border: 0;
    padding: 40px
}

.modal .modal-dialog .modal-subtitle {
    font-size: 0.95em
}

.modal .modal-dialog .modal-header {
    padding-top: 40px;
    padding-bottom: 22px
}

    .modal .modal-dialog .modal-header .modal-title {
        font-weight: 600;
        font-size: 22px;
        color: #101010;
        padding-left: 10px
    }

    .modal .modal-dialog .modal-header .close {
        opacity: 1;
        font-weight: 100;
        font-size: 40px;
        margin-right: 30px;
        margin-top: 30px
    }

.modal .modal-dialog .modal-icon {
    float: left;
    margin-right: 30px;
    margin-top: 35px;
    margin-left: 40px;
    width: 240px;
    height: 200px;
    background-repeat: no-repeat
}

    .modal .modal-dialog .modal-icon.conversion-icon {
        background: url("http://assets.teachablecdn.com/icons/icon-conversion.svg")
    }

.modal .modal-dialog .modal-body {
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px
}

    .modal .modal-dialog .modal-body p {
        font-size: 13px;
        line-height: 25px;
        font-weight: 500;
        color: #8592a6
    }

.modal .modal-dialog .modal-footer {
    background: none;
    border: 0;
    padding-top: 5px;
    padding-bottom: 50px
}

    .modal .modal-dialog .modal-footer .btn {
        margin-right: 10px;
        font-weight: 600
    }

.modal.vertically-centered:before {
    display: inline-block;
    vertical-align: middle;
    content: ' ';
    height: 100%
}

@media screen and (max-width: 767px) {
    .modal.vertically-centered:before {
        display: block;
        vertical-align: top;
        height: auto
    }

    .modal .modal-dialog.modal-sm, .modal .modal-dialog.modal-md, .modal .modal-dialog.modal-lg {
        width: 96%
    }
}

.confetti-mask {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(transparent, #fff) left repeat;
    pointer-events: none;
    opacity: 1;
    transition: opacity 2s ease-in
}

    .confetti-mask.fader {
        opacity: 0
    }

.confetti-canvas {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 4s ease-in
}

    .confetti-canvas.fader {
        opacity: 0
    }

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-LightItalic.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-LightItalic.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-LightItalic.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Regular.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Regular.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Regular.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-BlackItalic.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-BlackItalic.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-BlackItalic.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic
}

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Light.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Light.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Light.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Bold.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Bold.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Bold.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Italic.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Italic.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Italic.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic
}

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-BoldItalic.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-BoldItalic.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-BoldItalic.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic
}

@font-face {
    font-family: 'Lato';
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Black.eot");
    src: url("http://assets.teachablecdn.com/fonts/lato/Lato-Black.eot?#iefix") format("embedded-opentype"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Black.woff") format("woff"),url("http://assets.teachablecdn.com/fonts/lato/Lato-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal
}

html {
    min-height: 100%;
    position: relative;
    font-size: 100%
}

body {
    overflow: auto;
    background-image: none;
    background-size: none;
    background: none;
    font-family: "Lato";
    margin: 0 !important;
    color: var(--squid-ink)
}

a {
    color: #e79a00
}

    a:hover, a:active {
        color: #f94141
    }

    a, a:active, a:hover, a:focus {
        text-decoration: none
    }

p {
    font-size: 18px;
    font-weight: 200;
    line-height: 28px
}

h3 {
    line-height: 33px
}

.bold {
    font-weight: 700 !important
}

.nav > li > a:focus {
    background: none !important;
    outline: 0
}

.lecture-attachment:not(.lecture-attachment-type-video) h2, .post h2, .block.rich_text h2 {
    font-size: 26px;
    font-weight: 600
}

.lecture-attachment:not(.lecture-attachment-type-video) p, .post p, .block.rich_text p {
    font-size: 17px;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 22px
}

    .lecture-attachment:not(.lecture-attachment-type-video) p.lecture-description, .post p.lecture-description, .block.rich_text p.lecture-description {
        margin-bottom: 17px
    }

    .lecture-attachment:not(.lecture-attachment-type-video) p:empty, .post p:empty, .block.rich_text p:empty {
        margin: 0
    }

        .lecture-attachment:not(.lecture-attachment-type-video) p:empty::after, .post p:empty::after, .block.rich_text p:empty::after {
            clear: both;
            content: '';
            display: table
        }

.lecture-attachment:not(.lecture-attachment-type-video) ul li, .lecture-attachment:not(.lecture-attachment-type-video) ol li, .post ul li, .post ol li, .block.rich_text ul li, .block.rich_text ol li {
    font-size: 17px;
    font-weight: normal;
    line-height: 26px;
    margin-bottom: 15px
}

.lecture-attachment:not(.lecture-attachment-type-video) blockquote, .post blockquote, .block.rich_text blockquote {
    margin: 30px 0px;
    line-height: 33px
}

.lecture-attachment:not(.lecture-attachment-type-video) img, .post img, .block.rich_text img {
    max-width: 100%
}

.container-row {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--clinical)
}

.gray-layout {
    background: var(--fog);
    padding-bottom: 100px
}

.full-width-height-bg {
    height: 100vh;
    position: absolute;
    width: 100vw;
    top: 0
}

.large-img-rounded {
    border-radius: 50%;
    margin: auto
}

.section-title {
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 600
}

.checkout-page {
    background-color: var(--clinical)
}

.rebrand-2020 a {
    color: var(--obsidian);
    text-decoration: underline
}

    .rebrand-2020 a:hover, .rebrand-2020 a:active {
        color: var(--plumette);
        -webkit-text-decoration-color: var(--teachable-green);
        text-decoration-color: var(--teachable-green)
    }

    .rebrand-2020 a.isolate {
        text-decoration: none;
        border-bottom: 2px solid var(--obsidian);
        transition: 0.3s
    }

        .rebrand-2020 a.isolate:hover, .rebrand-2020 a.isolate:active {
            border-color: var(--teachable-green)
        }

.v1-header, .lecture-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 101
}

.navbar-fedora {
    background-color: #030303;
    position: relative;
    margin-bottom: 0px;
    top: 0px;
    transition: none
}

    .navbar-fedora .gravatar {
        width: 30px;
        height: 30px;
        border-radius: 15px
    }

    .navbar-fedora .navbar-current-user {
        display: none
    }

    .navbar-fedora .navbar-enrolled {
        display: none
    }

    .navbar-fedora .navbar-header {
        width: 100%
    }

    .navbar-fedora .navbar-brand {
        font-weight: normal;
        color: #fff;
        font-size: 30px;
        line-height: 30px;
        height: 60px
    }

        .navbar-fedora .navbar-brand.header-logo {
            max-width: 250px;
            padding-top: 0px;
            padding-bottom: 0px;
            display: flex;
            align-items: center
        }

            .navbar-fedora .navbar-brand.header-logo img {
                height: auto;
                max-width: 100%
            }

@media screen and (max-width: 767px) {
    .navbar-fedora .navbar-brand {
        font-size: 18px
    }
}

.navbar-fedora .link-to-admin {
    width: 108px
}

.navbar-fedora .navbar-toggle {
    margin-top: 14px;
    color: #fff
}

    .navbar-fedora .navbar-toggle .icon-bar {
        background: #fff !important
    }

.navbar-fedora .navbar-collapse {
    box-shadow: none !important;
    max-height: none !important
}

    .navbar-fedora .navbar-collapse.in, .navbar-fedora .navbar-collapse.collapsing {
        background: #030303 !important;
        position: absolute;
        right: 0px;
        top: 48px;
        width: 100%;
        z-index: 300
    }

        .navbar-fedora .navbar-collapse.in .nav.navbar-nav, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav {
            margin: -0.5px -15px
        }

            .navbar-fedora .navbar-collapse.in .nav.navbar-nav > li .fedora-navbar-link, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav > li .fedora-navbar-link {
                color: #fff !important
            }

                .navbar-fedora .navbar-collapse.in .nav.navbar-nav > li .fedora-navbar-link.active, .navbar-fedora .navbar-collapse.in .nav.navbar-nav > li .fedora-navbar-link:hover, .navbar-fedora .navbar-collapse.in .nav.navbar-nav > li .fedora-navbar-link:focus, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav > li .fedora-navbar-link.active, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav > li .fedora-navbar-link:hover, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav > li .fedora-navbar-link:focus {
                    background-color: #000 !important;
                    color: #fff !important
                }

            .navbar-fedora .navbar-collapse.in .nav.navbar-nav ul.dropdown-menu, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav ul.dropdown-menu {
                margin: 0
            }

                .navbar-fedora .navbar-collapse.in .nav.navbar-nav ul.dropdown-menu li a, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav ul.dropdown-menu li a {
                    color: #fff;
                    margin-top: -3px;
                    font-weight: 200
                }

                    .navbar-fedora .navbar-collapse.in .nav.navbar-nav ul.dropdown-menu li a:hover, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav ul.dropdown-menu li a:hover {
                        background-color: #000 !important
                    }

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background: #000 !important
}

.nav.navbar-nav > li > a {
    line-height: 30px;
    font-weight: 200
}

.nav.navbar-nav > li .fedora-navbar-link {
    font-size: 15px;
    color: #fff !important;
    cursor: pointer
}

    .nav.navbar-nav > li .fedora-navbar-link.active, .nav.navbar-nav > li .fedora-navbar-link:hover, .nav.navbar-nav > li .fedora-navbar-link:focus {
        background-color: #000 !important;
        color: #fff !important
    }

    .nav.navbar-nav > li .fedora-navbar-link:focus {
        outline: 5px auto Highlight;
        outline: 5px auto -webkit-focus-ring-color
    }

.nav.navbar-nav > li .btn-primary {
    margin-top: 11px !important;
    font-size: 14px;
    margin-left: 10px;
    color: #fff
}

.navbar-course-hero {
    background: none;
    background-color: rgba(3,3,3,0.97);
    border: 0
}

    .navbar-course-hero.is-at-top {
        border: 0
    }

        .navbar-course-hero.is-at-top .navbar-brand, .navbar-course-hero.is-at-top a.fedora-navbar-link {
            color: #fff !important
        }

            .navbar-course-hero.is-at-top .navbar-brand:hover, .navbar-course-hero.is-at-top a.fedora-navbar-link:hover {
                background: none !important;
                color: #ccc !important
            }

        .navbar-course-hero.is-at-top .icon-bar {
            background: #fff !important
        }

.is-above-the-fold.show-nav-background-color, .is-at-top.show-nav-background-color, .navbar-fedora.is-at-top.is-not-signed-in.show-nav-background-color {
    background: rgba(3,3,3,0.97);
    background-color: rgba(3,3,3,0.97)
}

.admin-header {
    bottom: 0px;
    z-index: 200
}

    .admin-header .navbar-dark {
        background-color: rgba(34,34,34,0.9)
    }

.logged-in-header {
    top: 0px;
    background-color: #030303;
    z-index: 100
}

.full-width {
    background-color: #030303;
    position: static;
    width: 100%
}

    .full-width .nav-icon-back {
        width: 40px;
        font-size: 29px;
        padding: 20px;
        padding-left: 15px;
        padding-right: 15px;
        cursor: pointer;
        color: #eeeeee;
        line-height: 66px;
        vertical-align: middle;
        opacity: 0.9
    }

        .full-width .nav-icon-back:hover {
            opacity: 1
        }

        .full-width .nav-icon-back i {
            background: #fff;
            width: 40px;
            height: 40px;
            padding: 0px;
            text-align: center;
            font-size: 26px;
            padding-top: 6px;
            border-radius: 25px;
            font-weight: 200;
            color: #030303
        }

    .full-width .nav-back-link {
        padding: 15px;
        cursor: pointer;
        color: #eeeeee;
        color: #fff
    }

    .full-width .admin-header-content {
        color: var(--slate)
    }

    .full-width .admin-nav-icon-back {
        width: 50px !important;
        height: 50px;
        padding: 10px;
        line-height: 20px;
        display: block;
        float: left;
        text-align: center;
        color: #ffffff;
        opacity: 1
    }

        .full-width .admin-nav-icon-back i {
            color: #ffffff;
            background: none;
            width: 25px;
            height: 25px;
            font-size: 20px;
            padding-top: 2px
        }

        .full-width .admin-nav-icon-back:hover {
            text-decoration: none
        }

    .full-width .navbar-fedora {
        width: 100%;
        border-radius: 0;
        z-index: 200;
        min-height: 0 !important
    }

        .full-width .navbar-fedora .navbar-header-collapse {
            float: right;
            padding-right: 40px
        }

        .full-width .navbar-fedora .navbar-nav {
            width: 100%;
            margin: 0px !important;
            padding: 0px !important
        }

    .full-width .navbar-toggle {
        margin-top: 6px;
        margin-right: 15px;
        margin-bottom: 6px
    }

.alert-header {
    background: #e3ffe3;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #dbdbdb;
    font-size: 13px;
    line-height: 22px;
    display: none;
    margin-bottom: 0px
}

    .alert-header .bolded {
        font-weight: bold
    }

    .alert-header a {
        text-decoration: underline
    }

    .alert-header .close {
        float: right;
        font-size: 17px;
        color: #374734;
        font-weight: 100;
        padding-top: 2px
    }

    .alert-header input {
        margin-left: 10px;
        display: inline-block;
        font-weight: normal;
        padding-left: 5px;
        margin-top: -2px;
        font-size: 14px
    }

    .alert-header .center-container {
        text-align: center;
        margin: auto
    }

    .alert-header .green, .alert-header .green a {
        color: #789b71
    }

@media screen and (max-width: 480px) {
    .full-width .navbar-fedora .navbar-collapse.in, .full-width .navbar-fedora .navbar-collapse.collapsing {
        top: 47px
    }

    .navbar-fedora {
        min-height: 60px
    }

        .navbar-fedora .navbar-collapse.in .nav.navbar-nav, .navbar-fedora .navbar-collapse.collapsing .nav.navbar-nav {
            margin: 0
        }

        .navbar-fedora .dropdown-menu {
            background-color: #292e2e
        }

        .navbar-fedora .navbar-header-courses {
            position: absolute;
            height: 100%
        }

        .navbar-fedora .navbar-current-user {
            display: inline-block;
            padding-left: 5px
        }

        .navbar-fedora .navbar-enrolled {
            display: block
        }

            .navbar-fedora .navbar-enrolled .sidebar-nav-link {
                color: #fff
            }

            .navbar-fedora .navbar-enrolled .sidebar-nav {
                display: block;
                padding-left: 0;
                margin: 0
            }

            .navbar-fedora .navbar-enrolled .lecture-sidebar-icon {
                display: none
            }
}

@media screen and (min-width: 768px) {
    .alert-header {
        display: block
    }

    .alert-wrapper {
        margin-top: 101px
    }
}

@media screen and (max-width: 990px) {
    .navbar-collapse .btn-primary {
        background-color: transparent !important;
        padding: 15px 18px 15px 10px !important;
        border-radius: 0 !important;
        float: left !important;
        margin: 0 !important;
        border: 0 !important;
        text-align: left;
        width: 100%
    }

        .navbar-collapse .btn-primary.active, .navbar-collapse .btn-primary:hover, .navbar-collapse .btn-primary:focus {
            background-color: #000 !important;
            color: #fff !important
        }
}

footer {
    bottom: 0;
    width: 100%;
    background-color: #030303;
    position: absolute;
    color: #bac1c7;
    padding: 39px 0 42px
}

    footer .footer-column {
        text-align: center
    }

    footer .navbar-brand {
        font-size: 24px;
        margin-top: -4px;
        padding: 0
    }

    footer .title {
        font-size: 13px;
        font-weight: 700;
        margin-top: 0
    }

    footer a {
        color: inherit
    }

        .active footer a, footer a:hover, footer a:focus {
            color: #e79a00
        }

    footer .label, footer .badge {
        vertical-align: middle
    }

    footer .bottom-links {
        font-size: 14px;
        line-height: 1.286
    }

        footer .bottom-links:before, footer .bottom-links:after, footer .bottom-icons:before, footer .bottom-icons:after {
            content: ' ';
            display: table
        }

        footer .bottom-links:after, footer .bottom-icons:after {
            clear: both
        }

    footer li.divider {
        height: 15px
    }

    footer a {
        color: #bac1c7
    }

        footer a:hover, footer a:focus {
            color: #fff;
            text-decoration: none
        }

            footer a:hover .powered-by-logo, footer a:focus .powered-by-logo {
                opacity: 1
            }

    footer .powered-by {
        font-size: 16px
    }

        footer .powered-by .powered-by-logo {
            width: 79px;
            height: 17.3px;
            vertical-align: -3px;
            margin-left: 2px;
            opacity: 0.7
        }

.you-div {
    margin-top: -20px;
    padding-top: 55px;
    padding-bottom: 105px
}

    .you-div .container {
        margin-top: 30px
    }

.btn-lg.discover-courses {
    font-size: 20px
}

@media screen and (max-width: 767px) {
    .footer-column {
        margin-bottom: 20px
    }
}

.dsp-flex-xs {
    display: flex
}

.flex-align-items-center-xs {
    align-items: center
}

.flex-justify-content-space-between-xs {
    justify-content: space-between
}

.m-r-3-xs {
    margin-right: 16px
}

.p-h-3-xs {
    padding-left: 16px;
    padding-right: 16px
}

.p-v-2-xs {
    padding-top: 8px;
    padding-bottom: 8px
}

.preview-bar {
    position: relative;
    font-family: -apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif
}

    .preview-bar.full-width {
        background-color: rgba(34,34,34,0.9);
        height: 60px;
        width: 100%
    }

    .preview-bar.admin-header {
        z-index: 2000
    }

        .preview-bar.admin-header .preview-navbar-dark {
            background-color: rgba(34,34,34,0.9)
        }

    .preview-bar .preview-navbar-header {
        float: none;
        width: 100%
    }

    .preview-bar .link-to-admin {
        display: flex;
        height: 60px
    }

    .preview-bar .admin-header-text, .preview-bar .admin-header-text > p {
        display: none;
        color: #b0b0b0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

@media screen and (min-width: 992px) {
    .preview-bar .admin-header-text, .preview-bar .admin-header-text > p {
        display: block
    }
}

.preview-bar .admin-header-text {
    margin-top: 20px;
    margin-left: 20px
}

.preview-bar li.admin-header-text {
    margin-left: 0
}

.preview-bar .preview-navbar-nav {
    margin: 0px -15px;
    list-style: none;
    padding-left: 0
}

.preview-bar .nav.preview-navbar-nav > li > a {
    font-weight: 600
}

.preview-bar .nav.preview-navbar-nav > li .fedora-navbar-link {
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    padding-top: 16px !important;
    padding-right: 30px;
    padding-left: 24px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s
}

    .preview-bar .nav.preview-navbar-nav > li .fedora-navbar-link:hover {
        color: #fff;
        background-color: #080808 !important
    }

    .preview-bar .nav.preview-navbar-nav > li .fedora-navbar-link .admin-nav-icon-back {
        width: 9px !important;
        height: 15px;
        padding: 0;
        margin: -1px 16px 0px 16px;
        display: block
    }

        .preview-bar .nav.preview-navbar-nav > li .fedora-navbar-link .admin-nav-icon-back::before {
            width: 50px;
            display: inline-block
        }

.preview-bar .preview-navbar-nav > li > ul.dropdown-menu {
    background-color: #fff;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.05)
}

    .preview-bar .preview-navbar-nav > li > ul.dropdown-menu li {
        color: #333
    }

        .preview-bar .preview-navbar-nav > li > ul.dropdown-menu li a {
            padding: 3px 11px
        }

.preview-bar .nav .open > a, .preview-bar .nav .open > a:hover, .preview-bar .nav .open > a:focus {
    background-color: #494949 !important;
    outline: none;
    border-color: #b0b0b0;
    box-shadow: 0 0 3px #b0b0b0
}

.preview-bar .open > .dropdown-menu li a {
    color: #333
}

.preview-bar .preview-navbar-nav > li.dropdown.preview-selector {
    display: flex;
    align-items: center;
    margin: 0px 16px
}

    .preview-bar .preview-navbar-nav > li.dropdown.preview-selector a.dropdown-toggle, .preview-bar .preview-navbar-nav > li.dropdown.preview-selector button.dropdown-toggle {
        font-family: -apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        line-height: 21px;
        padding: 5px 12px !important;
        background-color: #494949;
        border-radius: 4px
    }

        .preview-bar .preview-navbar-nav > li.dropdown.preview-selector a.dropdown-toggle:hover, .preview-bar .preview-navbar-nav > li.dropdown.preview-selector a.dropdown-toggle:focus, .preview-bar .preview-navbar-nav > li.dropdown.preview-selector button.dropdown-toggle:hover, .preview-bar .preview-navbar-nav > li.dropdown.preview-selector button.dropdown-toggle:focus {
            color: #fff;
            background-color: #494949 !important
        }

        .preview-bar .preview-navbar-nav > li.dropdown.preview-selector a.dropdown-toggle i.caret, .preview-bar .preview-navbar-nav > li.dropdown.preview-selector button.dropdown-toggle i.caret {
            border-top: 4px solid #fff;
            margin-left: 8px
        }

.preview-bar .v2-dropdown {
    display: flex;
    position: relative
}

    .preview-bar .v2-dropdown button.menu-trigger {
        margin: 0
    }

        .preview-bar .v2-dropdown button.menu-trigger i.caret {
            margin-top: 4px
        }

    .preview-bar .v2-dropdown.open button.menu-trigger {
        background-color: #494949;
        outline: none;
        border-color: #b0b0b0;
        box-shadow: 0 0 3px #b0b0b0
    }

.preview-bar .preview-navbar-nav > li.v2-dropdown > ul.dropdown-menu li > a {
    color: #333;
    font-size: 14px;
    display: block;
    padding: 3px 11px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143
}

    .preview-bar .preview-navbar-nav > li.v2-dropdown > ul.dropdown-menu li > a.bold {
        font-weight: 700
    }

    .preview-bar .preview-navbar-nav > li.v2-dropdown > ul.dropdown-menu li > a:hover, .preview-bar .preview-navbar-nav > li.v2-dropdown > ul.dropdown-menu li > a:focus {
        text-decoration: none;
        background-color: #f5f5f5
    }

.preview-bar .edit-button {
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    border-radius: 4px;
    background-color: #21cd9c;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s
}

    .preview-bar .edit-button:hover {
        background-color: #18eaae
    }

.current-user-layout {
    display: grid;
    width: 100%;
    min-height: 100vh;
    grid-template-columns: 350px 1fr;
    grid-template-rows: 46px 1fr;
    grid-template-areas: 'header header' 'sidebar main'
}

    .current-user-layout .student-settings-header {
        grid-area: header
    }

    .current-user-layout .course-sidebar {
        grid-area: sidebar;
        margin-top: 46px
    }

    .current-user-layout .course-mainbar {
        grid-area: main;
        justify-self: start;
        margin-left: 0px;
        width: 100%
    }

        .current-user-layout .course-mainbar * {
            font-family: inherit !important
        }

@media screen and (min-width: 768px) and (max-width: 991px) {
    .current-user-layout {
        grid-template-columns: 300px 1fr
    }
}

@media screen and (max-width: 767px) {
    .current-user-layout {
        grid-template-columns: 1fr;
        grid-template-areas: 'header' 'main'
    }
}

.alignment-left {
    padding-left: 0 !important
}

.alignment-left-google {
    padding-left: 2px !important
}

.button-right {
    float: right;
    padding-right: 0;
    padding-top: 3px
}

.link-right {
    float: right;
    padding-right: 6px
}

.alert-banner {
    height: 50px;
    border-bottom: 1px solid;
    position: relative;
    z-index: 10
}

    .alert-banner a {
        text-decoration: underline;
        color: var(--obsidian);
        font-weight: 600;
        transition: 0.3s
    }

@media screen and (max-width: 767px) {
    .alert-banner {
        height: auto
    }
}

.current-user-banner {
    margin-top: -16px;
    margin-left: -40px;
    margin-right: -40px
}

@media screen and (max-width: 767px) {
    .current-user-banner {
        margin-top: -40px
    }
}

.warning {
    background-color: var(--blush);
    border-color: var(--rose)
}

.maintenance-page {
    background-color: #030303;
    color: #fff;
    display: table;
    height: 100%;
    min-height: 100%;
    width: 100%;
    text-align: center
}

    .maintenance-page h3 {
        margin-top: 0px;
        text-align: center
    }

    .maintenance-page .inner {
        display: table-cell;
        vertical-align: top
    }

        .maintenance-page .inner h1 {
            color: #fff !important
        }

        .maintenance-page .inner a, .maintenance-page .inner a:hover {
            color: #fff !important;
            text-decoration: underline
        }

@media screen and (min-width: 992px) {
    .maintenance-page .inner {
        vertical-align: middle
    }
}

.maintenance-page .logo {
    max-height: 120px;
    max-width: 300px;
    margin-bottom: 18px
}

.maintenance-page .half-opaque {
    opacity: 0.5
}

.maintenance-page .hero {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #e79a00;
    padding: 10px 50px 40px 40px;
    border-radius: 15px;
    text-align: left;
    margin-top: 40px
}

    .maintenance-page .hero p {
        font-size: 1.4em;
        margin-bottom: 0px
    }

    .maintenance-page .hero h1, .maintenance-page .hero h2, .maintenance-page .hero h3, .maintenance-page .hero h4, .maintenance-page .hero h5 {
        color: #fff !important;
        font-size: 1.8em
    }

.unlaunched-page {
    color: #fff;
    background-color: #212338;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh
}

    .unlaunched-page a {
        text-decoration: none
    }

    .unlaunched-page .top {
        justify-content: center;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .unlaunched-page .bottom {
        margin-bottom: 30px
    }

    .unlaunched-page .top, .unlaunched-page .bottom {
        margin-left: 10px;
        margin-right: 10px
    }

    .unlaunched-page .header {
        position: absolute;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.15)
    }

    .unlaunched-page .logged-in-as-student {
        font-size: 1.4rem;
        display: block;
        padding-top: 20px;
        padding-bottom: 20px;
        flex-grow: 1;
        text-align: center
    }

        .unlaunched-page .logged-in-as-student a {
            text-decoration: underline;
            color: #fff
        }

    .unlaunched-page .navbar {
        align-items: center
    }

        .unlaunched-page .navbar button {
            font-family: inherit
        }

    .unlaunched-page .navbar__menu__list, .unlaunched-page .navbar__menu__list .inner-menu {
        color: #212338;
        margin: 0;
        padding: 0;
        list-style: none
    }

        .unlaunched-page .navbar__menu__list li, .unlaunched-page .navbar__menu__list .inner-menu li {
            margin: 0;
            padding: 0
        }

        .unlaunched-page .navbar__menu__list .caret, .unlaunched-page .navbar__menu__list .inner-menu .caret, .unlaunched-page .menu-trigger .caret {
            display: inline-block;
            width: 0;
            height: 0;
            vertical-align: middle;
            border-top: 4px solid #212338;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            margin-left: 5px
        }

@media only screen and (min-width: 768px) {
    .unlaunched-page .navbar__menu__list, .unlaunched-page .navbar__menu__list .inner-menu, .unlaunched-page .menu-trigger {
        font-size: 12px
    }
}

.unlaunched-page h1, .unlaunched-page h2, .unlaunched-page p {
    text-shadow: 0px 2px 4px rgba(0,0,0,0.05);
    text-align: center
}

.unlaunched-page h1, .unlaunched-page h2 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-style: normal;
    font-weight: 600
}

.unlaunched-page h1 {
    color: #6b6d7c;
    font-size: 22px;
    line-height: 34px
}

.unlaunched-page h2 {
    color: #ffffff;
    font-size: 46px;
    line-height: 69px
}

.unlaunched-page p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12.642px;
    line-height: 19px;
    color: #cbcbd0;
    margin-top: 10px;
    margin-bottom: 40px;
    max-width: 60%
}

.unlaunched-page a.btn-admin, .unlaunched-page .powered-by-wrapper {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px
}

.unlaunched-page a.btn-admin {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 54px !important;
    width: 104px;
    height: 38px
}

.unlaunched-page .powered-by-wrapper {
    color: rgba(255,255,255,0.5)
}

.unlaunched-page .powered-by-logo {
    display: inline-block;
    -webkit-mask: url("http://assets.teachablecdn.com/icons/teachable-logomark-white.svg") no-repeat center/contain;
    mask: url("http://assets.teachablecdn.com/icons/teachable-logomark-white.svg") no-repeat center/contain;
    background-color: rgba(255,255,255,0.5);
    width: 79px;
    height: 17.3px;
    vertical-align: -3px
}

.create-school {
    background-color: #030303;
    color: #fff;
    display: table;
    height: 100%;
    min-height: 100%;
    width: 100%;
    text-align: center
}

    .create-school .inner {
        padding: 20px;
        display: table-cell;
        vertical-align: top
    }

        .create-school .inner h1, .create-school .inner h2, .create-school .inner h3, .create-school .inner h4, .create-school .inner h5 {
            color: #fff !important
        }

        .create-school .inner a, .create-school .inner a:hover {
            color: #fff !important;
            text-decoration: underline
        }

@media screen and (min-width: 992px) {
    .create-school .inner {
        vertical-align: middle
    }
}

.create-school .logo {
    max-height: 120px;
    max-width: 500px;
    margin-bottom: 18px
}

.create-school .hero {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #e79a00;
    padding: 20px 50px 30px 50px;
    border-radius: 15px
}

    .create-school .hero p {
        font-size: 1.4em
    }

    .create-school .hero h1, .create-school .hero h2, .create-school .hero h3, .create-school .hero h4, .create-school .hero h5 {
        color: #fff !important;
        font-size: 1.8em
    }

.comments {
    padding-bottom: 30px
}

    .comments .comment-arrow-border, .comments .comment-arrow {
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-top-color: transparent;
        border-bottom-color: transparent
    }

    .comments .comment-arrow-border {
        position: absolute;
        left: -12px;
        top: 22px;
        border-width: 12px 12px 12px 0
    }

    .comments .comment-arrow {
        position: relative;
        top: -10px;
        left: 2px;
        border-width: 10px 10px 10px 0;
        border-right-color: #efd3ba
    }

    .comments .comments__heading {
        font-weight: 600;
        margin-top: 15px;
        margin-bottom: 30px;
        font-size: 18px
    }

        .comments .comments__heading .comments-pagination-link {
            cursor: pointer
        }

    .comments .comments__wrapper {
        max-width: 1000px;
        margin: auto
    }

        .comments .comments__wrapper .comments__block {
            margin-top: 30px;
            margin-bottom: 35px;
            display: flex;
            flex-direction: row
        }

            .comments .comments__wrapper .comments__block .commenter-profile {
                display: inline-block;
                width: 100px;
                height: auto;
                text-align: center;
                vertical-align: center
            }

        .comments .comments__wrapper .comments__block--indent-level-1 {
            margin-left: 90px
        }

        .comments .comments__wrapper .comments__block--indent-level-2 {
            margin-left: 180px
        }

        .comments .comments__wrapper .comments__block--indent-level-3 {
            margin-left: 270px
        }

        .comments .comments__wrapper .comments__block--student .comments__block-box {
            border: 1px solid var(--subtle);
            background-color: var(--fog)
        }

        .comments .comments__wrapper .comments__block--student .comment-arrow-border {
            border-right-color: var(--subtle)
        }

            .comments .comments__wrapper .comments__block--student .comment-arrow-border .comment-arrow {
                border-right-color: var(--fog)
            }

        .comments .comments__wrapper .comments__block--student hr {
            border-top-color: var(--subtle)
        }

        .comments .comments__wrapper .comments__block--owner .comments__block-box, .comments .comments__wrapper .comments__block--author .comments__block-box {
            background: #fff8f2;
            border: 1px solid #efd3ba
        }

            .comments .comments__wrapper .comments__block--owner .comments__block-box .comment-arrow-border, .comments .comments__wrapper .comments__block--author .comments__block-box .comment-arrow-border {
                border-right-color: #efd3ba
            }

                .comments .comments__wrapper .comments__block--owner .comments__block-box .comment-arrow-border .comment-arrow, .comments .comments__wrapper .comments__block--author .comments__block-box .comment-arrow-border .comment-arrow {
                    border-right-color: #fff8f2
                }

            .comments .comments__wrapper .comments__block--owner .comments__block-box hr, .comments .comments__wrapper .comments__block--author .comments__block-box hr {
                border-top-color: #efd3ba
            }

        .comments .comments__wrapper .comments__block--owner .comments__block-box__meta-tag-instructor, .comments .comments__wrapper .comments__block--author .comments__block-box__meta-tag-instructor {
            display: block;
            padding: 2px 12px;
            border-radius: 30px;
            border: 1px solid #efd3ba;
            color: #fd7b48;
            font-size: 13px;
            line-height: 24px;
            margin: 0 auto 10px;
            background-color: #fff8f2
        }

@media screen and (max-width: 992px) {
    .comments .comments__wrapper .comments__block--owner .comments__block-box__meta-tag-instructor, .comments .comments__wrapper .comments__block--author .comments__block-box__meta-tag-instructor {
        display: inline-block;
        margin-left: 14px;
        margin-top: 8px
    }
}

.comments .comments__wrapper .comments__block--awaiting_review .comments__block-box {
    background: #fff3d9;
    border: 1px solid #efd3ba
}

    .comments .comments__wrapper .comments__block--awaiting_review .comments__block-box .comment-arrow-border {
        border-right-color: #efd3ba
    }

        .comments .comments__wrapper .comments__block--awaiting_review .comments__block-box .comment-arrow-border .comment-arrow {
            border-right-color: #fff3d9
        }

    .comments .comments__wrapper .comments__block--awaiting_review .comments__block-box hr {
        border-top-color: #efd3ba
    }

.comments .comments__wrapper .comments__block--awaiting_review .comments__block-box__meta-tag-review {
    display: block
}

.comments .comments__wrapper .comments__block img.gravatar {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px
}

.comments .comments__wrapper .comments__block hr {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 100%
}

.comments .comments__wrapper .comments__block ul.comment-attachments {
    display: block;
    width: 98%;
    margin: 0 auto;
    padding: 20px 15px;
    list-style: none
}

    .comments .comments__wrapper .comments__block ul.comment-attachments li {
        display: inline-block;
        height: 60px;
        margin: 0 8px 0 0;
        padding: 0;
        box-sizing: border-box
    }

        .comments .comments__wrapper .comments__block ul.comment-attachments li img {
            height: 60px;
            border-radius: 3px
        }

.comments .comments__wrapper .comments__block-box {
    background: #f8f8f8;
    border-radius: 5px;
    padding: 0;
    margin-left: 25px;
    width: 99%;
    font-size: 15px;
    position: relative
}

    .comments .comments__wrapper .comments__block-box .alert {
        display: none;
        padding: 10px 15px;
        margin-top: 12px;
        margin-bottom: 12px;
        border: none
    }

    .comments .comments__wrapper .comments__block-box .alert-success {
        background: none
    }

    .comments .comments__wrapper .comments__block-box .alert-success {
        padding: 18px 15px;
        margin-top: 12px;
        margin-bottom: 12px;
        border: none;
        text-align: center;
        background: none;
        color: #e79a00
    }

        .comments .comments__wrapper .comments__block-box .alert-success i.fa {
            font-size: 60px;
            width: 100px;
            height: 100px;
            left: 0;
            text-align: center;
            margin: auto;
            display: block;
            line-height: 100px;
            font-weight: 100;
            border-radius: 50%;
            z-index: 5000;
            margin-bottom: 30px;
            color: #fff;
            background: #e79a00
        }

    .comments .comments__wrapper .comments__block-box .alert img {
        width: 18px;
        margin-left: 4px;
        opacity: 0.3
    }

    .comments .comments__wrapper .comments__block-box:after {
        border-color: rgba(136,183,213,0);
        border-right-color: #f8f8f8;
        border-width: 13px;
        margin-top: -10px
    }

.comments .comments__wrapper .comments__block-box__body {
    padding: 15px 20px;
    text-align: left;
    white-space: pre-wrap
}

.comments .comments__wrapper .comments__block-box__meta {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 23px;
    height: 25px;
    color: #636c83;
    padding: 15px 20px 0 20px
}

.comments .comments__wrapper .comments__block-box__meta-name {
    float: left
}

.comments .comments__wrapper .comments__block-box__meta-tag {
    margin-left: 10px;
    float: left;
    padding: 4px 7px;
    line-height: 12px;
    display: none
}

.comments .comments__wrapper .comments__block-box__meta-time, .comments .comments__wrapper .comments__block-box__meta-now {
    color: #afb7ce;
    float: left;
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    margin-left: 15px
}

    .comments .comments__wrapper .comments__block-box__meta-time a, .comments .comments__wrapper .comments__block-box__meta-now a {
        color: #b7b7b7
    }

.comments .comments__wrapper .comments__block-box__meta-now {
    display: none
}

.comments .comments__wrapper .comments__block-box__meta-actions {
    display: inline-block;
    float: right;
    font-size: 14px;
    line-height: 13px
}

    .comments .comments__wrapper .comments__block-box__meta-actions a {
        display: inline-block;
        text-align: center
    }

        .comments .comments__wrapper .comments__block-box__meta-actions a .comment-action-tooltip {
            display: block;
            position: relative;
            top: 6px;
            opacity: 0
        }

        .comments .comments__wrapper .comments__block-box__meta-actions a:hover .comment-action-tooltip {
            opacity: 1
        }

.comments .comments__wrapper .comments__block-box__meta-actions-edit, .comments .comments__wrapper .comments__block-box__meta-actions-delete, .comments .comments__wrapper .comments__block-box__meta-actions-permalink {
    color: #999999
}

    .comments .comments__wrapper .comments__block-box__meta-actions-edit:hover, .comments .comments__wrapper .comments__block-box__meta-actions-delete:hover, .comments .comments__wrapper .comments__block-box__meta-actions-permalink:hover {
        color: #737373
    }

.comments .comments__wrapper .comments__block-box form {
    margin: 15px 20px
}

.comments .comments__wrapper .comments__block-box input[type='submit'] {
    margin: 0 0 25px 0
}

.comments .comments__wrapper .comments__block-box .comment-editor {
    display: block;
    margin-bottom: 12px
}

    .comments .comments__wrapper .comments__block-box .comment-editor textarea {
        border-radius: 5px 5px 0 0;
        border: 1px solid #d7d7d7;
        padding: 14px;
        font-size: 15px;
        height: 120px;
        width: 100%;
        margin-bottom: 0
    }

        .comments .comments__wrapper .comments__block-box .comment-editor textarea:focus {
            outline: 0
        }

    .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor {
        display: block;
        width: 100%;
        margin: -5px auto 0;
        padding: 10px;
        border-style: solid;
        border-color: #d7d7d7;
        border-width: 0 1px 1px 1px;
        border-radius: 0px 0px 5px 5px;
        background-color: var(--fog)
    }

        .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor .add-attachment {
            display: inline-block;
            margin: 6px 8px 0 10px;
            width: 36px;
            height: 50px;
            padding: 4px 0;
            vertical-align: center;
            float: left
        }

        .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor .attachments {
            display: inline-block;
            height: 50px;
            width: 86%;
            margin: 0 auto;
            padding: 3px 0 0 0;
            list-style: none;
            vertical-align: center
        }

            .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor .attachments li {
                position: relative;
                display: inline-block;
                margin: 0 0 0 8px;
                padding: 0;
                vertical-align: center;
                max-height: 50px;
                max-width: 50px
            }

                .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor .attachments li img {
                    height: 43px;
                    border-radius: 3px;
                    margin: 0 auto
                }

                .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor .attachments li:hover {
                    background-color: #fff
                }

                    .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor .attachments li:hover img {
                        opacity: 0.5
                    }

                    .comments .comments__wrapper .comments__block-box .comment-editor .attachments-editor .attachments li:hover:after {
                        position: absolute;
                        display: block;
                        top: 5px;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        padding: 0
                    }

@media screen and (max-width: 992px) {
    .comments .comments__wrapper .comments__block {
        flex-direction: column
    }

        .comments .comments__wrapper .comments__block .comment-arrow-border, .comments .comments__wrapper .comments__block .comment-arrow {
            display: none
        }

        .comments .comments__wrapper .comments__block .commenter-profile {
            width: 100%;
            margin-bottom: 10px;
            text-align: left;
            height: 45px
        }

            .comments .comments__wrapper .comments__block .commenter-profile img.gravatar {
                display: inline-block;
                float: left;
                width: 45px;
                height: 45px
            }

    .comments .comments__wrapper .comments__block__alert--posted, .comments .comments__wrapper .comments__block__alert--posted {
        display: none !important;
        margin-top: 0
    }

    .comments .comments__wrapper .comments__block .comments__block-box {
        margin-left: 0px;
        padding: 20px 25px
    }

    .comments .comments__wrapper .comments__block .comments__block-box--owner:after, .comments .comments__wrapper .comments__block .comments__block-box--author:after {
        border-bottom-color: #f9f8f0
    }

    .comments .comments__wrapper .comments__block .comments__block-box--awaiting_review {
        margin-top: 0
    }

        .comments .comments__wrapper .comments__block .comments__block-box--awaiting_review:after {
            border-bottom-color: #fff3d9
        }
}

@media screen and (max-width: 767px) {
    .comments .comments__wrapper .comments__block {
        margin-top: 15px;
        margin-bottom: 25px
    }

        .comments .comments__wrapper .comments__block .comments__block-box {
            background-color: transparent;
            border-width: 0;
            border-radius: 0;
            margin-left: 0;
            padding: 0
        }

        .comments .comments__wrapper .comments__block.comments__block--indent-level-1 {
            border-left: 1px solid var(--subtle);
            padding-left: 8px;
            margin-top: 6px 0 10px 60px;
            margin-left: 60px !important
        }

        .comments .comments__wrapper .comments__block.comments__block--indent-level-2 {
            border-left: 1px solid var(--subtle);
            padding-left: 8px;
            margin-top: 6px 0 10px 60px;
            margin-left: 90px !important
        }

        .comments .comments__wrapper .comments__block.comments__block--indent-level-3 {
            border-left: 1px solid var(--subtle);
            padding-left: 8px;
            margin-top: 6px 0 10px 60px;
            margin-left: 120px !important
        }
}

@-webkit-keyframes zoomShow {
    to {
        transform: scale(1)
    }
}

@keyframes zoomShow {
    to {
        transform: scale(1)
    }
}

.bg-all {
    margin-top: -40px;
    margin-bottom: -40px;
    padding-bottom: 40px;
    padding-top: 40px
}

.course-block, .block {
    padding-bottom: 50px;
    padding-top: 50px;
    background-color: #fff
}

    .course-block.homepage_hero, .course-block.hero, .course-block.coupon_banner, .course-block.liquid_html, .course-block.html, .course-block.liquid, .course-block.full_width_image, .course-block.embedded_form, .course-block.email_leads_form, .course-block.checkout_button, .block.homepage_hero, .block.hero, .block.coupon_banner, .block.liquid_html, .block.html, .block.liquid, .block.full_width_image, .block.embedded_form, .block.email_leads_form, .block.checkout_button {
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: transparent
    }

    .course-block.coupon_banner, .block.coupon_banner {
        display: none
    }

    .course-block.odd-stripe, .block.odd-stripe {
        background-color: #f7f7f7
    }

    .course-block.even-stripe, .block.even-stripe {
        background-color: #fff
    }

    .course-block.bio .author-name, .block.bio .author-name {
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold
    }

    .course-block.checkout h2, .block.checkout h2 {
        text-align: center;
        font-weight: bold
    }

        .course-block.checkout h2.no-products, .block.checkout h2.no-products {
            margin-bottom: 70px
        }

    .course-block.video_embed h2, .block.video_embed h2 {
        font-size: 26px;
        font-weight: 600
    }

@media screen and (max-width: 767px) {
    .course-block.video_embed .wistia_embed, .block.video_embed .wistia_embed {
        max-width: 100%
    }
}

.course-block .full-width-image-bg, .block .full-width-image-bg {
    background-size: cover !important;
    background-position: center !important;
    padding-top: 100px;
    padding-bottom: 100px;
    color: #fff;
    position: relative
}

    .course-block .full-width-image-bg.embedded-form, .block .full-width-image-bg.embedded-form {
        padding-top: 20px;
        padding-bottom: 40px
    }

        .course-block .full-width-image-bg.embedded-form .preenrollment-form-wrapper, .block .full-width-image-bg.embedded-form .preenrollment-form-wrapper {
            background: none
        }

            .course-block .full-width-image-bg.embedded-form .preenrollment-form-wrapper .btn-primary.btn-hg, .block .full-width-image-bg.embedded-form .preenrollment-form-wrapper .btn-primary.btn-hg {
                font-size: 18px !important;
                text-transform: uppercase
            }

    .course-block .full-width-image-bg.background-not-set h3.signup-form-title, .block .full-width-image-bg.background-not-set h3.signup-form-title {
        color: #101010 !important
    }

.course-block .checkout-button, .block .checkout-button {
    background-size: cover !important;
    background-position: center !important;
    padding-top: 100px;
    padding-bottom: 100px;
    color: #fff;
    position: relative
}

    .course-block .checkout-button.background-not-set h3.signup-form-title, .block .checkout-button.background-not-set h3.signup-form-title {
        color: #101010 !important
    }

.course-block.testimonial .large-img-rounded, .block.testimonial .large-img-rounded {
    width: 100px;
    height: 100px
}

.course-block.testimonial p.testimonial-quote, .block.testimonial p.testimonial-quote {
    font-size: 20px;
    margin-top: 7px;
    line-height: 30px
}

.course-block.featured_courses, .block.featured_courses {
    text-align: center
}

    .course-block.featured_courses .container h2, .block.featured_courses .container h2 {
        margin-top: 0;
        padding-bottom: 20px;
        font-weight: 200;
        font-size: 31px
    }

@media screen and (max-width: 767px) {
    .course-block img, .block img {
        display: block;
        margin: auto;
        max-width: 100%
    }
}

.enrolled-in-course-alert {
    text-align: center;
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 99;
    line-height: 14px;
    padding-right: 20px;
    padding-left: 20px
}

.audioloader__audio {
    width: 100%
}

.audioloader__button {
    border: 0;
    cursor: pointer;
    outline: 0;
    background: transparent
}

.audioloader__name {
    margin-left: 5px
}

.audioloader__placeholder {
    align-items: center;
    background-color: #f9f9f9;
    color: #505050;
    display: flex;
    height: 32px;
    margin-bottom: 6px;
    padding-left: 16px;
    width: 100%
}

[data-pdfviewer] {
    height: 80vh;
    height: calc(100vh - 100px)
}

[data-imageloader] {
    opacity: 0;
    transition: opacity 800ms ease-out;
    will-change: opacity
}

.is-loaded[data-imageloader] {
    opacity: 1
}

.course-box__footer {
    padding: 16px
}

.course-listing {
    background-color: #f7f7f7;
    box-shadow: 0px 1px #fff;
    border: 1px solid #fff;
    padding: 0px;
    border-radius: 9px;
    cursor: pointer;
    margin-bottom: 50px;
    height: 390px;
    position: relative
}

    .course-listing.bundle {
        height: 335px
    }

    .course-listing:hover {
        box-shadow: 0px 0px 0px 1px #fff;
        border: 1px solid #fff;
        transition: all linear 0.1s
    }

        .course-listing:hover .course-listing-title {
            color: #e79a00;
            transition: all linear 0.1s
        }

    .course-listing .course-box-image-container {
        overflow: hidden;
        max-height: 208px
    }

        .course-listing .course-box-image-container .course-box-image {
            display: block;
            margin: auto;
            border-top-left-radius: 9px;
            border-top-right-radius: 9px;
            border-bottom: 1px solid #ededed;
            width: 100%
        }

        .course-listing .course-box-image-container .bundle-icon-container {
            position: absolute;
            right: 24px;
            top: 8px
        }

            .course-listing .course-box-image-container .bundle-icon-container .tooltiptext::after {
                content: '';
                position: absolute;
                bottom: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent transparent var(--squid-ink) transparent
            }

            .course-listing .course-box-image-container .bundle-icon-container .tooltiptext {
                visibility: hidden;
                width: 120px;
                background-color: var(--squid-ink);
                color: var(--clinical);
                text-align: center;
                padding: 8px;
                border-radius: 6px;
                position: absolute;
                z-index: 1;
                top: 135%;
                left: 50%;
                margin-left: -60px;
                opacity: 0;
                transition: opacity 0.3s
            }

            .course-listing .course-box-image-container .bundle-icon-container:hover .tooltiptext {
                visibility: visible;
                opacity: 1
            }

        .course-listing .course-box-image-container .bundles-icon {
            width: 30px;
            height: 30px;
            padding: 8px;
            border-radius: 100%;
            background-color: var(--squid-ink);
            color: var(--clinical)
        }

    .course-listing .course-listing-title {
        color: #101010;
        line-height: 25px;
        padding: 16px 16px 4px 16px;
        font-weight: bold;
        font-size: 18px;
        max-height: 65px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .course-listing .course-listing-subtitle, .course-listing .listing-desc {
        color: #434343;
        padding: 5px 16px;
        font-weight: 200;
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 45px
    }

    .course-listing .course-listing-subtitle {
        min-height: 0px
    }

    .course-listing .course-listing-extra-info {
        display: flex;
        justify-content: space-between;
        bottom: 0;
        left: 0;
        padding: 16px;
        position: absolute;
        width: 100%
    }

        .course-listing .course-listing-extra-info .img-circle {
            width: 30px;
            height: 30px
        }

        .course-listing .course-listing-extra-info .course-author-name {
            max-height: 30px;
            max-width: 225px;
            line-height: 30px;
            font-weight: 200;
            font-size: 15px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-left: 5px
        }

        .course-listing .course-listing-extra-info .course-price {
            color: #e79a00;
            font-size: 15px;
            font-weight: bold;
            max-width: 120px;
            padding-top: 5px
        }

        .course-listing .course-listing-extra-info .course-progress {
            color: #e79a00;
            font-size: 11px;
            font-weight: normal;
            text-align: right
        }

            .course-listing .course-listing-extra-info .course-progress .percentage {
                font-size: 18px;
                line-height: 19px;
                font-weight: bold
            }

        .course-listing .course-listing-extra-info .course-bundle {
            line-height: 30px;
            font-size: 15px;
            font-weight: 200
        }

    .course-listing .course-listing-enrolled {
        padding-bottom: 100px
    }

    .course-listing .course-access-limit {
        font-size: 12.642px;
        line-height: 19px;
        color: #434343;
        padding-top: 10px
    }

@media (min-width: 0px) and (max-width: 767px) {
    .course-listing {
        height: auto !important
    }

        .course-listing .course-box-image-container {
            max-height: none !important
        }

        .course-listing .course-listing-subtitle {
            margin-bottom: 70px;
            max-height: 85px;
            min-height: 85px;
            -webkit-line-clamp: 4
        }

        .course-listing .course-listing-extra-info {
            position: relative
        }
}

.view-directory .course-listing {
    background-color: rgba(255,255,255,0.7)
}

.course-single > div {
    margin-left: 33.33%
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .course-listing.bundle {
        height: 380px
    }

    .course-single > div {
        margin-left: auto
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .course-listing.bundle .course-listing-subtitle {
        max-height: 44px
    }

    .course-single > div {
        margin-left: 25%
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .course-listing .course-author-name {
        width: 120px !important
    }
}

@media screen and (min-width: 768px) {
    .course-listing.bundle {
        height: 400px !important
    }
}

.filter-label {
    font-size: 21px;
    margin-right: 10px;
    color: #989898;
    float: left
}

.course-filter {
    padding-top: 5px;
    padding-left: 15px;
    background: #fff;
    padding-right: 16px;
    padding-bottom: 6px;
    border-radius: 20px;
    margin-bottom: 25px;
    margin-left: 15px
}

    .course-filter .dropdown-menu li a {
        color: black;
        line-height: 26px;
        font-size: 15px;
        padding-left: 15px;
        text-transform: capitalize
    }

.btn-default.btn-lg.btn-course-filter.dropdown-toggle {
    background: none;
    border: 0;
    color: #e79a00 !important;
    padding: 0px;
    font-size: 21px;
    top: 3px;
    text-transform: capitalize
}

    .btn-default.btn-lg.btn-course-filter.dropdown-toggle:focus {
        outline: 5px auto Highlight;
        outline: 5px auto -webkit-focus-ring-color
    }

    .btn-default.btn-lg.btn-course-filter.dropdown-toggle:hover, .btn-default.btn-lg.btn-course-filter.dropdown-toggle:active {
        background: none !important;
        border: 0 !important;
        -webkit-box-shadow: none !important;
        outline: 0
    }

.open .btn-default.btn-lg.btn-course-filter.dropdown-toggle {
    color: #030303;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: none !important
}

.pagination {
    background: #fff;
    border-radius: 30px;
    margin-top: 40px;
    margin-bottom: 60px;
    font-size: 16px;
    font-weight: bold;
    color: #030303
}

    .pagination .previous_page, .pagination .current, .pagination a {
        padding: 12px 20px 10px 20px;
        display: inline-block;
        border-right: 1px solid #dee8e9;
        margin-right: -4px
    }

    .pagination .first a {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px
    }

    .pagination .last a {
        padding: 12px 20px 10px 20px;
        display: inline-block;
        border-right: 0 !important;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        margin-right: 0px
    }

    .pagination .current, .pagination a:hover {
        background: #e79a00;
        color: #fff
    }

    .pagination .disabled {
        opacity: 0.5
    }

.product-list {
    margin: 0;
    padding: 0;
    margin-bottom: 45px;
    padding-top: 20px
}

.product_remaining_seats_text {
    background-color: #101010;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    padding: 3px 8px;
    border-radius: 4px
}

.checkout-button-group {
    color: #101010;
    background: #f0f0f0;
    width: 100%;
    border: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid white;
    font-size: 15px;
    text-align: left;
    transition: 0.1s linear all;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text
}

    .checkout-button-group input[type='radio'] {
        display: none !important
    }

    .checkout-button-group .product-radio, .checkout-button-group .product-details, .checkout-button-group .product-price {
        padding: 19px 16px
    }

    .checkout-button-group .product-radio {
        text-align: center;
        max-width: 80px
    }

        .checkout-button-group .product-radio .custom-radio {
            top: 8px
        }

    .checkout-button-group .product-details {
        border-left: 1px solid white;
        border-right: 1px solid white
    }

        .checkout-button-group .product-details h3.product-name {
            margin: 0;
            font-size: 17px;
            font-weight: bold;
            white-space: normal;
            margin-bottom: 10px !important;
            line-height: 22px
        }

            .checkout-button-group .product-details h3.product-name .discount {
                font-weight: normal;
                text-transform: uppercase;
                font-size: 13px;
                margin-left: 8px;
                color: #399a5f
            }

        .checkout-button-group .product-details p.description {
            font-size: 15px;
            margin-bottom: 0px;
            white-space: normal;
            line-height: 22px
        }

        .checkout-button-group .product-details .detailed-description {
            display: none;
            color: #7f8c8d;
            transition: 0 !important;
            font-weight: 200;
            font-size: 14px;
            margin-top: 10px;
            white-space: normal
        }

            .checkout-button-group .product-details .detailed-description p {
                white-space: normal;
                font-size: 16px;
                line-height: 22px
            }

            .checkout-button-group .product-details .detailed-description li {
                white-space: initial;
                line-height: 21px;
                margin-bottom: 4px
            }

            .checkout-button-group .product-details .detailed-description img {
                max-width: 100%
            }

    .checkout-button-group .product-price {
        margin: 0;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        padding: 19px 16px;
        font-style: italic;
        color: #969696;
        overflow-y: auto;
        white-space: normal
    }

    .checkout-button-group:hover {
        background: #f0f0f0;
        color: black
    }

    .checkout-button-group:active {
        background: #e6e6e6;
        color: black;
        box-shadow: none
    }

        .checkout-button-group:active .custom-radio {
            box-shadow: 0px 0px 5px #cccccc inset
        }

    .checkout-button-group .discounted-price {
        color: #308186
    }

    .checkout-button-group .product-enroll {
        display: none
    }

    .checkout-button-group.active {
        background-color: rgba(252,164,164,0.15);
        color: #030303;
        box-shadow: none
    }

        .checkout-button-group.active h3.product-name, .checkout-button-group.active p.description, .checkout-button-group.active .product-price {
            color: #e79a00
        }

        .checkout-button-group.active .detailed-description {
            display: block
        }

        .checkout-button-group.active .product-enroll {
            display: block;
            margin: auto;
            margin-top: 10px;
            font-style: normal
        }

@media screen and (max-width: 767px) {
    .checkout-button-group .product-radio {
        float: left
    }

    .checkout-button-group .product-details {
        padding-bottom: 5px;
        border: 0
    }

    .checkout-button-group .product-name, .checkout-button-group .description, .checkout-button-group .detailed-description {
        margin-left: 33px !important
    }

    .checkout-button-group .product-price {
        padding: 20px;
        font-size: 14px
    }

        .checkout-button-group .product-price .btn {
            height: 40px;
            font-size: 18px !important;
            width: 100%
        }
}

.progressbar {
    width: 100%;
    border-radius: 99px;
    -moz-border-radius: 99px;
    -webkit-border-radius: 99px;
    margin-top: 15px;
    text-align: right;
    font-size: 0.7em;
    height: 8px;
    line-height: 40px;
    padding: 0px;
    background: var(--gravel)
}

    .progressbar .progressbar-fill {
        float: left;
        -webkit-border-top-right-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
        -moz-border-radius-topright: 3px;
        -moz-border-radius-bottomright: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        -webkit-border-top-left-radius: 99px;
        -webkit-border-bottom-left-radius: 99px;
        -moz-border-radius-topleft: 99px;
        -moz-border-radius-bottomleft: 99px;
        border-top-left-radius: 99px;
        border-bottom-left-radius: 99px;
        border-radius: 99px;
        -moz-border-radius: 99px;
        -webkit-border-radius: 99px;
        background-color: #e79a00;
        text-align: left;
        height: 8px;
        background: #e79a00
    }

.content-box {
    background: var(--clinical);
    border-radius: 6px;
    padding-left: 0px;
    padding: 30px 45px;
    position: relative;
    text-align: left;
    width: 100%;
    margin-bottom: 70px
}

    .content-box h1 {
        color: var(--slate);
        padding-bottom: 22px;
        font-size: 20px;
        text-align: center;
        font-weight: 700;
        line-height: 28px
    }

        .content-box h1.no-padding {
            padding-bottom: 0px
        }

        .content-box h1.left-align {
            text-align: left
        }

    .content-box i.fa.fa-check {
        background: var(--money);
        border-radius: 50%;
        padding: 8px;
        font-size: 12px;
        color: var(--clinical);
        vertical-align: 5px;
        margin-right: 5px
    }

    .content-box.extra-top-padding {
        padding-top: 255px
    }

    .content-box .agree-to-terms {
        display: flex;
        font-size: 11px;
        line-height: 20px
    }

        .content-box .agree-to-terms input[type='checkbox'] {
            margin-right: 8px
        }

    .content-box .button-group {
        margin-top: 45px;
        display: block
    }

    .content-box .control-input {
        font-size: 13px;
        line-height: 21px
    }

        .content-box .control-input .img-circle {
            float: left;
            width: 45px;
            margin-right: 17px
        }

    .content-box .form-group {
        margin-bottom: 20px
    }

    .content-box .field_with_errors {
        display: inline
    }

        .content-box .field_with_errors .form-control, .content-box .field_with_errors select.form-control {
            box-shadow: 0px 1px 1px 0px var(--rose);
            background: var(--subtle)
        }

    .content-box p {
        display: block;
        line-height: 21px;
        font-size: 14px;
        color: var(--slate);
        padding-bottom: 12px
    }

        .content-box p.description {
            text-align: center;
            margin-top: 0px
        }

    .content-box .avatar {
        border-radius: 50% 50%;
        margin: 15px auto 30px auto
    }

    .content-box .form-control, .content-box select.form-control {
        background: transparent;
        border: 1px solid var(--magic);
        color: var(--squid-ink);
        box-shadow: none
    }

        .content-box .form-control:focus, .content-box select.form-control:focus {
            outline: 0;
            border: 1px solid var(--magic);
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)
        }

        .content-box .form-control[disabled], .content-box .form-control[disabled]:focus, .content-box .form-control[readonly], .content-box .form-control[readonly]:focus, .content-box select.form-control[disabled], .content-box select.form-control[disabled]:focus, .content-box select.form-control[readonly], .content-box select.form-control[readonly]:focus {
            box-shadow: none !important;
            background-color: var(--subtle) !important
        }

    .content-box .alert {
        font-size: 13px;
        font-weight: 600;
        border-radius: 4px;
        margin-bottom: 30px;
        border: 0px;
        padding-bottom: 13px
    }

        .content-box .alert.alert-danger, .content-box .alert.alert-danger p {
            color: var(--red-herring);
            background-color: var(--blush)
        }

        .content-box .alert p {
            font-size: 12px;
            font-weight: 600;
            line-height: 17px;
            margin-bottom: -10px
        }

        .content-box .alert ul {
            padding-left: 20px;
            margin-top: 7px
        }

            .content-box .alert ul li {
                font-weight: normal;
                margin-top: 4px;
                font-size: 12px;
                margin-bottom: 3px
            }

    .content-box label {
        color: var(--plumette);
        font-size: 13px;
        font-weight: 500;
        line-height: 29px
    }

        .content-box label.description {
            color: var(--slate);
            font-size: 12px;
            line-height: 24px
        }

            .content-box label.description .highlight-text {
                color: var(--plumette)
            }

        .content-box label.checkbox-label {
            font-size: 12px;
            color: var(--slate);
            width: 100%;
            font-weight: 400;
            line-height: 24px
        }

            .content-box label.checkbox-label input {
                margin-right: 6px
            }

    .content-box .link-below-button {
        font-size: 12px;
        color: var(--concrete);
        display: block;
        text-decoration: underline;
        margin-top: 10px
    }

        .content-box .link-below-button:hover {
            color: #e79a00
        }

    .content-box .g-recaptcha {
        width: 304px;
        height: 78px;
        margin-left: calc(50% - 152px);
        margin-top: 20px
    }

    .content-box.welcome-back-sso {
        text-align: center
    }

        .content-box.welcome-back-sso p {
            max-width: 400px
        }

        .content-box.welcome-back-sso .sso-profile-card {
            text-align: center
        }

            .content-box.welcome-back-sso .sso-profile-card img {
                padding: 5px;
                border: 1px solid var(--nebulous)
            }

            .content-box.welcome-back-sso .sso-profile-card h3 {
                margin-top: 15px;
                line-height: 19px;
                font-size: 18px;
                color: var(--plumette);
                font-weight: 600
            }

            .content-box.welcome-back-sso .sso-profile-card p {
                font-size: 12px;
                color: var(--slate);
                font-weight: 500;
                line-height: 11px;
                margin-bottom: 14px;
                margin-left: auto;
                margin-right: auto
            }

        .content-box.welcome-back-sso .sso-continue-as-disclaimer {
            line-height: 15px;
            font-size: 11px;
            color: var(--nebulous);
            max-width: 300px;
            margin: auto;
            text-align: center;
            margin-bottom: 12px;
            margin-top: 26px
        }

        .content-box.welcome-back-sso .sso-continue-as-disclaimer-alert {
            text-align: center;
            border: 1px dashed var(--matcha);
            background: none;
            padding: 15px 30px;
            line-height: 21px;
            margin: auto;
            font-weight: normal
        }

            .content-box.welcome-back-sso .sso-continue-as-disclaimer-alert a {
                color: var(--money);
                text-decoration: underline
            }

    .content-box .box-footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 40px -45px -41px;
        height: auto;
        min-height: 80px;
        text-align: center;
        color: var(--nebulous);
        font-size: 13px;
        line-height: 70px;
        font-weight: 400;
        border-top: 1px solid var(--subtle);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px
    }

        .content-box .box-footer .box-full {
            width: 100%
        }

            .content-box .box-footer .box-full:hover, .content-box .box-footer .box-half:first-child:hover, .content-box .box-footer .box-half:last-child:hover {
                height: -webkit-fit-content;
                height: -moz-fit-content;
                height: fit-content;
                background: var(--matcha);
                color: var(--clinical)
            }

        .content-box .box-footer .box-half {
            width: 50%;
            float: left;
            line-height: 69px;
            text-align: center
        }

            .content-box .box-footer .box-half:first-child {
                border-right: 1px solid var(--subtle)
            }

                .content-box .box-footer .box-half:first-child:hover {
                    border-bottom-left-radius: 5px
                }

            .content-box .box-footer .box-half:last-child:hover {
                border-bottom-right-radius: 5px
            }

            .content-box .box-footer .box-half a {
                text-decoration: none
            }

        .content-box .box-footer a {
            font-weight: 600;
            font-size: 12px;
            color: var(--nebulous)
        }

            .content-box .box-footer a img {
                margin-right: 10px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                vertical-align: -6px
            }

            .content-box .box-footer a:hover {
                color: var(--slate)
            }

.my-teachable-layout {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
}

    .my-teachable-layout .content-box {
        padding-top: 40px;
        padding-bottom: 40px
    }

        .my-teachable-layout .content-box .box-footer a {
            color: var(--matcha)
        }

            .my-teachable-layout .content-box .box-footer a.box-half {
                color: var(--matcha);
                font-weight: 500
            }

        .my-teachable-layout .content-box .skip-wrapper {
            margin-top: 32px;
            text-align: center
        }

        .my-teachable-layout .content-box .skip-wrapper__link {
            cursor: pointer
        }

.on-a-school-layout .content-box {
    margin-top: 70px
}

@media screen and (max-width: 767px) {
    .on-a-school-layout .content-box {
        margin-top: 0px
    }

    .content-box {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        width: calc(100% + 40px);
        margin: 0 0 0 -20px
    }

        .content-box .checkout-sidebar {
            padding-top: 50px;
            padding-bottom: 0px
        }

        .content-box .box-footer {
            background: var(--clinical);
            border-top: 1px solid var(--subtle);
            margin-bottom: 10px;
            flex-direction: column
        }
}

@media screen and (max-width: 992px) {
    .content-box .box-footer .box-half {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%;
        box-shadow: 0 10px 21px var(--subtle);
        background: var(--clinical)
    }

        .content-box .box-footer .box-half:first-child {
            border-right: 0;
            border-bottom: 1px solid var(--subtle)
        }

        .content-box .box-footer .box-half:last-child {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px
        }
}

.code-viewer-label {
    background: #0a0a14;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #ddd;
    font-size: 11px;
    margin-bottom: -3px;
    padding: 0.5em 1em;
    text-transform: uppercase
}

.code-viewer code {
    white-space: pre
}

.code-viewer .hljs {
    padding: 0.5em 1em
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #abb2bf;
    background: #282c34
}

.hljs-comment, .hljs-quote {
    color: #5c6370;
    font-style: italic
}

.hljs-doctag, .hljs-keyword, .hljs-formula {
    color: #c678dd
}

.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
    color: #e06c75
}

.hljs-literal {
    color: #56b6c2
}

.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
    color: #98c379
}

.hljs-built_in, .hljs-class .hljs-title {
    color: #e6c07b
}

.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
    color: #d19a66
}

.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
    color: #61aeee
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: bold
}

.hljs-link {
    text-decoration: underline
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.Quiz {
    position: relative
}

.Quiz-item {
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 300ms ease,transform 300ms ease;
    width: 100%;
    will-change: opacity, transform
}

.Quiz-item-enter-active {
    opacity: 0;
    transform: translate3d(10px, 0, 0);
    transition: none
}

.Quiz-item-exit-done, .Quiz-item-exit-active {
    opacity: 0;
    transform: translate3d(-10px, 0, 0)
}

.Quiz-complete {
    -webkit-animation: fadeIn 750ms ease forwards;
    animation: fadeIn 750ms ease forwards;
    will-change: opacity
}

.Quiz .quiz-question-outer {
    transition: height 300ms ease
}

.quiz-wrapper .quiz {
    max-width: 480px;
    margin: 0 auto
}

    .quiz-wrapper .quiz .quiz-progress {
        text-align: center;
        margin-bottom: 20px;
        font-size: 20px;
        color: #ccc
    }

    .quiz-wrapper .quiz .quiz-question {
        text-align: center;
        margin: 0 -50px 30px;
        font-size: 24px
    }

    .quiz-wrapper .quiz .quiz-question-outer {
        position: relative
    }

    .quiz-wrapper .quiz .quiz-answer-container.selected .quiz-answer {
        border: 1px solid #d7dada;
        color: #000;
        background: var(--grey-area)
    }

    .quiz-wrapper .quiz .quiz-answer-container .quiz-answer {
        background-color: white;
        word-wrap: break-word;
        border: 1px solid #eee;
        padding: 10px 20px;
        margin-bottom: 10px;
        border-radius: 5px;
        width: 100%;
        cursor: pointer;
        transition: 0.1s ease-in-out all;
        -webkit-transition: 0.1s ease-in-out all;
        color: #818181
    }

        .quiz-wrapper .quiz .quiz-answer-container .quiz-answer:hover {
            color: #000;
            border: 1px solid var(--obsidian)
        }

        .quiz-wrapper .quiz .quiz-answer-container .quiz-answer:focus {
            outline: none;
            border: 1px solid var(--obsidian);
            box-shadow: 0 0 0 5px rgba(34,34,34,0.1)
        }

    .quiz-wrapper .quiz .quiz-answer-container .quiz-answer-icon i {
        line-height: 40px;
        color: green;
        float: right;
        margin-top: -50px;
        margin-right: -30px;
        display: none
    }

        .quiz-wrapper .quiz .quiz-answer-container .quiz-answer-icon i.quiz-answer-icon-correct {
            color: #2ecc71
        }

        .quiz-wrapper .quiz .quiz-answer-container .quiz-answer-icon i.quiz-answer-icon-incorrect {
            color: #e74c3c
        }

    .quiz-wrapper .quiz.answered .quiz-answer-container .quiz-answer {
        cursor: default
    }

    .quiz-wrapper .quiz.answered .quiz-answer-container.correct .quiz-answer {
        border: 1px solid #2ecc71
    }

    .quiz-wrapper .quiz.answered .quiz-answer-container.correct.selected .quiz-answer-icon-correct {
        display: block;
        color: #2ecc71
    }

    .quiz-wrapper .quiz.answered .quiz-answer-container.selected.incorrect {
        color: #e74c3c !important
    }

        .quiz-wrapper .quiz.answered .quiz-answer-container.selected.incorrect .quiz-answer {
            border: 1px solid #e74c3c !important
        }

        .quiz-wrapper .quiz.answered .quiz-answer-container.selected.incorrect .quiz-answer-icon-incorrect {
            display: block
        }

    .quiz-wrapper .quiz.answered.multiple .quiz-answer-container.correct:not(.selected) .quiz-answer-icon-missed {
        display: block;
        color: #2ecc71
    }

.quiz-controls {
    margin-top: 30px;
    position: relative
}

    .quiz-controls button:disabled {
        opacity: 0
    }

    .quiz-controls button {
        position: absolute;
        pointer-events: none
    }

        .quiz-controls button.pull-right {
            right: 0
        }

        .quiz-controls button.half-opacity {
            cursor: default;
            opacity: 0.5
        }

        .quiz-controls button.is-visible {
            opacity: 1;
            pointer-events: auto
        }

            .quiz-controls button.is-visible.half-opacity {
                opacity: 0.5
            }

.quiz-finished {
    margin-top: 32px;
    text-align: center
}

    .quiz-finished i {
        font-size: 90px;
        margin-bottom: 20px
    }

        .quiz-finished i.success {
            color: #2ecc71
        }

        .quiz-finished i.failure {
            color: #e74c3c
        }

    .quiz-finished .quiz-finished-text {
        font-size: 22px;
        font-stretch: normal;
        font-style: normal;
        font-weight: normal;
        line-height: 2.05;
        text-align: center
    }

    .quiz-finished .quiz-finished-message {
        color: #8b8b8b;
        font-size: 18px;
        font-stretch: normal;
        font-style: normal;
        font-weight: normal;
        line-height: 1.67;
        text-align: center
    }

    .quiz-finished .btn-primary {
        font-size: 13px;
        font-stretch: normal;
        font-style: normal;
        font-weight: bold;
        line-height: 0.67;
        margin-top: 40px;
        min-width: 215px;
        padding: 14px 18px !important;
        text-align: center
    }

@media screen and (max-width: 992px) {
    .quiz-wrapper .quiz .quiz-question {
        margin: 20px 0px
    }
}

.student-referral {
    background-color: var(--fog);
    margin-left: -40px;
    margin-right: -40px
}

.student-referral-content {
    overflow: auto;
    border: 1px solid var(--grey-area);
    border-radius: 5px;
    background-color: var(--clinical);
    max-width: 400px;
    margin: auto
}

@media all and (min-width: 768px) {
    .student-referral-content {
        max-width: 900px
    }
}

.student-referral__card {
    border: 1px solid var(--grey-area);
    background-color: var(--white);
    max-width: 56rem;
    width: 85%
}

.student-referral__button {
    background-color: var(--cornflower-blue);
    border-radius: 1.5rem;
    border: 1px solid var(--cornflower-blue);
    color: var(--white);
    height: 2.5rem
}

.lecture-tooltip {
    background-color: #36414d;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    left: 0;
    line-height: 1.5;
    padding: 10px 15px;
    position: fixed;
    top: 0;
    width: 90px;
    z-index: 10000
}

    .lecture-tooltip.locked-complete-button {
        width: 226px
    }

    .lecture-tooltip .tooltip-content-arrow {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #36414d;
        height: 0;
        left: 50%;
        margin-left: -5px;
        position: absolute;
        top: -5px;
        width: 0
    }

.is-fetching[data-x-origin-download] {
    opacity: 0.5;
    cursor: progress
}

.toastWrapper {
    bottom: 0;
    position: fixed;
    right: 0;
    z-index: 100000
}

.toast-wrapper {
    bottom: -40px;
    position: fixed;
    z-index: 100000;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@media only screen and (min-width: 576px) {
    .toast-wrapper {
        right: 10px;
        margin-left: 40px;
        max-width: 360px;
        word-break: break-word
    }
}

@media only screen and (max-width: 575px) {
    .toast-wrapper {
        width: 100%;
        right: -11px
    }

        .toast-wrapper .toast {
            display: flex;
            align-items: center;
            justify-content: center
        }
}

@keyframes cssAnimation {
    to {
        visibility: hidden
    }
}

@-webkit-keyframes cssAnimation {
    to {
        visibility: hidden
    }
}

.text-with-icon {
    display: flex;
    align-items: center
}

    .text-with-icon svg {
        margin-right: 3px;
        min-width: 19px
    }

.toast {
    border-radius: 3px;
    padding-bottom: 10px;
    transition: transform 200ms
}

    .toast[data-transition='entering'] {
        transform: translate3d(125%, 0, 0)
    }

    .toast[data-transition='entered'] {
        transform: translate3d(0, 0, 0)
    }

    .toast[data-transition='exiting'] {
        transform: translate3d(125%, 0, 0)
    }

    .toast.success {
        background-color: var(--obsidian);
        color: var(--white)
    }

    .toast.error {
        background-color: var(--white);
        border: 1px solid var(--red-herring);
        color: var(--red-herring)
    }

.checkout-page {
    background: #f5f6f7;
    padding-bottom: 220px
}

    .checkout-page .checkout-container {
        margin-top: 60px
    }

    .checkout-page .checkout-main-content {
        margin-top: 50px
    }

        .checkout-page .checkout-main-content h1 {
            padding-left: 5px;
            font-size: 19px;
            font-weight: 600;
            margin-top: 0px;
            margin-bottom: 20px;
            color: #101010
        }

    .checkout-page .checkout-sidebar {
        padding-top: 50px;
        padding-bottom: 50px;
        background-repeat: no-repeat;
        color: #101010
    }

        .checkout-page .checkout-sidebar.with-teachable-badge {
            background-image: url("http://assets.teachablecdn.com/icons/badge-powered-by-teachable.svg");
            background-position: 15px 1px;
            padding-top: 150px;
            background-size: 120px
        }

        .checkout-page .checkout-sidebar p, .checkout-page .checkout-sidebar ul li {
            font-size: 13px;
            line-height: 27px;
            font-weight: 400;
            color: #434343
        }

            .checkout-page .checkout-sidebar p.pitch {
                font-weight: 600;
                margin-bottom: 30px;
                font-size: 14px !important;
                line-height: 25px !important
            }

        .checkout-page .checkout-sidebar .list-heading {
            font-weight: 600;
            font-size: 14px;
            line-height: 28px;
            margin-bottom: 6px;
            margin-top: 0px
        }

        .checkout-page .checkout-sidebar ul.icon-list {
            list-style: none;
            margin-left: 7px;
            margin-top: 20px;
            margin-bottom: 0px
        }

            .checkout-page .checkout-sidebar ul.icon-list li {
                margin-bottom: 20px;
                line-height: 23px;
                color: #758296
            }

                .checkout-page .checkout-sidebar ul.icon-list li.one-click:before {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-one-click.svg")
                }

                .checkout-page .checkout-sidebar ul.icon-list li.ios-app:before {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-ios-app.svg");
                    background-size: 22px
                }

                .checkout-page .checkout-sidebar ul.icon-list li.lock:before {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-payment-secure.svg");
                    background-size: 28px
                }

                .checkout-page .checkout-sidebar ul.icon-list li:before {
                    background-size: 24px;
                    content: '';
                    display: inline-block;
                    width: 28px;
                    height: 34px;
                    background-repeat: no-repeat;
                    left: 23px;
                    margin-top: 2px;
                    position: absolute
                }

        .checkout-page .checkout-sidebar .checkout-sidebar-iframe {
            width: 350px;
            height: 100%
        }

@media screen and (max-width: 900px) {
    .checkout-page .checkout-sidebar .checkout-sidebar-iframe {
        width: 100%
    }
}

.checkout-page .price-adjustment {
    display: block;
    clear: both;
    margin-top: 20px
}

    .checkout-page .price-adjustment .price-adjustment-link {
        margin-top: 20px;
        display: block;
        font-weight: 600;
        text-align: right;
        padding-left: 30px
    }

    .checkout-page .price-adjustment .price-adjustment-form {
        height: 20px;
        width: 100%;
        position: relative;
        margin-bottom: 60px
    }

        .checkout-page .price-adjustment .price-adjustment-form input.form-control {
            border-radius: 30px;
            padding-left: 20px;
            padding-right: 20px;
            float: left;
            height: 53px;
            width: 70%;
            line-height: 22px
        }

@media screen and (max-width: 1199px) {
    .checkout-page .price-adjustment .price-adjustment-form input.form-control {
        width: 65%
    }
}

@media screen and (max-width: 991px) {
    .checkout-page .price-adjustment .price-adjustment-form input.form-control {
        width: 55%
    }
}

.checkout-page .payment-secure {
    font-size: 14px;
    color: #758296;
    font-weight: 500;
    line-height: 22px;
    padding-left: 5px;
    margin-bottom: 20px
}

    .checkout-page .payment-secure img {
        margin-right: 10px
    }

.checkout-page .billing-form .payment-methods {
    margin-top: -31px;
    margin-left: -45px;
    margin-right: -46px;
    margin-bottom: 40px
}

    .checkout-page .billing-form .payment-methods .payment-method-tab {
        display: inline-block;
        margin: 0 auto;
        padding: 0px 0px 0px;
        line-height: 39px;
        min-height: 53px;
        text-align: center;
        border-bottom: 1px solid #dfdfdf;
        font-size: 15px;
        font-weight: bold;
        vertical-align: bottom;
        cursor: pointer;
        color: #ccc;
        margin-top: 0 !important
    }

        .checkout-page .billing-form .payment-methods .payment-method-tab.checked {
            border-top: 2px solid #e79a00;
            min-height: 54px;
            border-bottom: 0px
        }

            .checkout-page .billing-form .payment-methods .payment-method-tab.checked .method-label {
                color: #e79a00
            }

            .checkout-page .billing-form .payment-methods .payment-method-tab.checked img {
                opacity: 1
            }

        .checkout-page .billing-form .payment-methods .payment-method-tab.cc {
            border-right: 1px solid #dfdfdf
        }

        .checkout-page .billing-form .payment-methods .payment-method-tab img {
            vertical-align: -5px;
            opacity: 0.6
        }

        .checkout-page .billing-form .payment-methods .payment-method-tab .custom-radio {
            display: inline-block;
            float: none
        }

        .checkout-page .billing-form .payment-methods .payment-method-tab .method-label {
            vertical-align: -7px
        }

        .checkout-page .billing-form .payment-methods .payment-method-tab .section-radio {
            padding-top: 10px;
            padding-bottom: 0px;
            line-height: 23px;
            margin-top: 10px;
            margin-bottom: 0px
        }

            .checkout-page .billing-form .payment-methods .payment-method-tab .section-radio.checked h4 {
                color: #e79a00
            }

            .checkout-page .billing-form .payment-methods .payment-method-tab .section-radio h4 {
                cursor: pointer;
                font-weight: bold;
                margin-top: -9px;
                margin-bottom: 4px;
                margin-left: 0px;
                margin-right: 0px;
                line-height: 37px
            }

            .checkout-page .billing-form .payment-methods .payment-method-tab .section-radio .custom-radio {
                float: left
            }

.checkout-page .billing-form .payment-form .current-cc {
    color: #199472
}

    .checkout-page .billing-form .payment-form .current-cc .card-ends-in {
        font-size: 13px;
        font-weight: 600;
        color: green;
        margin-bottom: 0
    }

    .checkout-page .billing-form .payment-form .current-cc .use-another-card {
        font-size: 15px;
        margin-bottom: -8px
    }

.checkout-page .billing-form .payment-form .card-info .form-group {
    margin-bottom: 5px
}

.checkout-page .billing-form .payment-form .card-info.hidden {
    max-height: 0px;
    opacity: 0;
    margin-top: 0
}

.checkout-page .billing-form .payment-form p {
    font-size: 15px
}

.checkout-page .billing-form .payment-form .cc-number {
    width: calc(100% - 150px)
}

.checkout-page .billing-form .payment-form .saved-cc {
    font-weight: bold
}

.checkout-page .billing-form .payment-form .card-logos {
    position: absolute;
    right: 22px;
    top: 43px
}

    .checkout-page .billing-form .payment-form .card-logos .center-button {
        text-align: center
    }

.checkout-page .billing-form .payment-form #country-select {
    margin-bottom: 0
}

.checkout-page .billing-form .payment-form a.action-link {
    text-decoration: underline;
    display: block;
    font-size: 13px;
    margin: 15px auto 8px;
    font-weight: bold;
    text-align: center
}

.checkout-page .half-width {
    width: 50%
}

.checkout-page .statement {
    padding: 10px;
    text-align: center;
    color: #aeaeae;
    font-size: 12px;
    font-weight: 200
}

@media screen and (max-width: 767px) {
    .checkout-page .img-responsive {
        margin: auto;
        margin-bottom: 20px
    }

    .checkout-page .checkout-sidebar.with-teachable-badge {
        background: none;
        padding-top: 60px;
        padding-bottom: 60px
    }
}

.review-order-box {
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px
}

    .review-order-box .itemized-row {
        text-align: left;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee
    }

        .review-order-box .itemized-row .item-name {
            color: #47505e
        }

        .review-order-box .itemized-row .field-value {
            text-align: right
        }

        .review-order-box .itemized-row .card-logos {
            line-height: 67px
        }

        .review-order-box .itemized-row .slash {
            margin: auto;
            margin-top: 6px;
            font-size: 24px;
            font-weight: 100;
            padding-left: 0px;
            padding-right: 0px;
            width: 10px;
            color: #b8b8b8
        }

        .review-order-box .itemized-row.discount {
            font-weight: 600;
            color: green
        }

            .review-order-box .itemized-row.discount .item-name {
                color: green
            }

        .review-order-box .itemized-row.additional-charge {
            color: #a2a2a2
        }

            .review-order-box .itemized-row.additional-charge .item-name {
                color: #a2a2a2
            }

    .review-order-box .total-row {
        padding-bottom: 0px;
        font-weight: 600;
        line-height: 17px;
        border-bottom: 0px
    }

        .review-order-box .total-row .item-name {
            text-transform: uppercase;
            color: #47505e
        }

        .review-order-box .total-row .field-value {
            font-size: 14px
        }

    .review-order-box .box-footer {
        background: #fff;
        margin-top: 23px;
        margin-left: -30px;
        margin-right: -30px;
        padding: 20px 30px 25px 30px
    }

.checkout-breadcrumbs {
    height: 65px;
    margin-top: 60px;
    background: #1d1d1d
}

    .checkout-breadcrumbs ol {
        color: #fff;
        margin: 0;
        padding: 0;
        height: 20px;
        margin-top: 20px;
        font-size: 13px;
        list-style: none;
        position: relative
    }

        .checkout-breadcrumbs ol li {
            counter-increment: item;
            float: left;
            font-size: 12px;
            margin-right: 25px;
            opacity: 0.51
        }

            .checkout-breadcrumbs ol li:before {
                margin-top: 1px;
                margin-right: 15px;
                content: counter(item);
                border-radius: 100%;
                color: #fff;
                border: 1px solid #fff;
                width: 25px;
                height: 25px;
                font-weight: 600;
                padding-left: 0px;
                font-size: 12px;
                line-height: 23px;
                text-align: center;
                display: inline-block
            }

            .checkout-breadcrumbs ol li.current-step {
                color: #fff;
                opacity: 1
            }

                .checkout-breadcrumbs ol li.current-step:before {
                    opacity: 1;
                    background: white;
                    color: #101010;
                    border-color: #fff
                }

            .checkout-breadcrumbs ol li:first-child:after {
                margin-left: 19px;
                content: '›';
                border-radius: 100%;
                color: rgba(255,255,255,0.51);
                font-size: 19px;
                vertical-align: -2px;
                text-align: center;
                display: inline-block
            }

.payment-errors {
    background: #ffe9e9;
    color: #d57676;
    background-image: url("http://assets.teachablecdn.com/icons/icon-card-error.svg");
    background-position: 19px 12px;
    border: 0.5px solid rgba(211,111,111,0.44);
    background-repeat: no-repeat;
    border-radius: 4px;
    padding: 13px 20px;
    font-size: 14px;
    padding-left: 60px;
    margin-bottom: 25px;
    font-weight: 600
}

.course-top-row.checkout-top {
    padding-top: 20px;
    padding-bottom: 20px
}

    .course-top-row.checkout-top .course-header-container {
        padding-top: 0px !important
    }

        .course-top-row.checkout-top .course-header-container .course-title {
            font-size: 27px !important;
            line-height: 31px;
            padding-top: 6px
        }

        .course-top-row.checkout-top .course-header-container .course-subtitle {
            font-size: 16px !important;
            line-height: 22px;
            margin-top: 12px;
            margin-bottom: 0px !important
        }

        .course-top-row.checkout-top .course-header-container .course-price {
            color: #e79a00;
            font-weight: bold;
            font-size: 19px;
            margin-top: 15px;
            line-height: 20px
        }

            .course-top-row.checkout-top .course-header-container .course-price .discount {
                font-weight: normal;
                text-transform: uppercase;
                font-size: 13px;
                margin-left: 8px;
                color: #adadad
            }

    .course-top-row.checkout-top .course-splash-media {
        margin-right: 0px !important;
        margin-bottom: 0px !important
    }

        .course-top-row.checkout-top .course-splash-media .img-responsive {
            margin-bottom: 5px
        }

@media screen and (max-width: 991px) {
    .course-top-row.checkout-top .course-splash-media {
        margin-left: 33.33333%
    }
}

.enrollment-step-indicator {
    border-radius: 33px;
    margin-top: 40px;
    height: 60px
}

    .enrollment-step-indicator .current-step .step-name {
        opacity: 1 !important
    }

    .enrollment-step-indicator .current-step .step-number {
        opacity: 1 !important;
        background: #fff
    }

    .enrollment-step-indicator .step-1, .enrollment-step-indicator .step-2, .enrollment-step-indicator .step-3 {
        font-size: 19px;
        color: #e79a00
    }

        .enrollment-step-indicator .step-1 .step-name, .enrollment-step-indicator .step-2 .step-name, .enrollment-step-indicator .step-3 .step-name {
            opacity: 0.3
        }

        .enrollment-step-indicator .step-1 .step-number, .enrollment-step-indicator .step-2 .step-number, .enrollment-step-indicator .step-3 .step-number {
            text-align: center;
            background: none;
            margin-right: 7px;
            border-radius: 20px;
            width: 35px;
            height: 35px;
            float: none;
            display: inline-block;
            vertical-align: 0px;
            padding-top: 1px;
            border: 2px solid;
            opacity: 0.3
        }

        .enrollment-step-indicator .step-1.step-1, .enrollment-step-indicator .step-2.step-1, .enrollment-step-indicator .step-3.step-1 {
            text-align: left
        }

        .enrollment-step-indicator .step-1.step-2, .enrollment-step-indicator .step-2.step-2, .enrollment-step-indicator .step-3.step-2 {
            text-align: center
        }

        .enrollment-step-indicator .step-1.step-3, .enrollment-step-indicator .step-2.step-3, .enrollment-step-indicator .step-3.step-3 {
            text-align: right
        }

@media screen and (max-width: 1199px) {
    .enrollment-step-indicator .step-1, .enrollment-step-indicator .step-2, .enrollment-step-indicator .step-3 {
        font-size: 16px !important
    }

        .enrollment-step-indicator .step-1 .step-number, .enrollment-step-indicator .step-2 .step-number, .enrollment-step-indicator .step-3 .step-number {
            padding-top: 4px
        }
}

#react-address-profile .billing_address_form .form_section > label span, #react-address-profile .shipping_address_form .form_section > label span {
    color: #212338 !important
}

#react-address-profile .billing_address_form .form_section > div, #react-address-profile .shipping_address_form .form_section > div {
    border: none !important;
    box-shadow: none !important;
    padding-left: 0px
}

.spc {
    background: #f5f6f7;
    color: #363e48;
    font-weight: 600;
    padding-bottom: 220px;
    padding-top: 0;
    transition: opacity 300ms ease
}

.spc__breadcrumbs {
    align-items: center;
    display: flex;
    margin-top: 60px
}

@media (max-width: 399px) {
    .spc__breadcrumbs {
        padding-bottom: 10px;
        padding-top: 10px
    }
}

@media (min-width: 400px) {
    .spc__breadcrumbs {
        height: 65px
    }
}

.spc__breadcrumbs-inner {
    padding: 0 30px
}

.spc__breadcrumbs-list {
    margin: 0;
    padding: 0
}

.spc__breadcrumbs-item {
    display: inline-block
}

    .spc__breadcrumbs-item::before {
        border: 1px solid white;
        border-radius: 50%;
        content: '';
        display: inline-block;
        height: 30px;
        line-height: 30px;
        margin-right: 10px;
        text-align: center;
        width: 30px
    }

    .spc__breadcrumbs-item:nth-child(1)::before {
        content: '1'
    }

    .spc__breadcrumbs-item:nth-child(2)::before {
        background-color: white;
        color: black;
        content: '2'
    }

    .spc__breadcrumbs-item:nth-child(1) {
        opacity: 0.5
    }

@media (max-width: 399px) {
    .spc__breadcrumbs-item:nth-child(1) {
        margin-bottom: 10px
    }
}

@media (min-width: 400px) and (max-width: 767px) {
    .spc__breadcrumbs-item {
        margin-right: 10px
    }
}

@media (min-width: 768px) {
    .spc__breadcrumbs-item:nth-child(1)::after {
        content: '>';
        display: inline-block;
        padding: 0px 20px
    }

    .spc__breadcrumbs-item:nth-child(1) {
        margin-left: 0
    }
}

.spc__inner {
    padding-top: 40px
}

@media screen and (max-width: 767px) {
    .spc__inner {
        margin-right: 25px
    }
}

.spc__section--review {
    margin-bottom: 30px
}

    .spc__section--review .spc__box {
        padding-top: 34px
    }

    .spc__section--review .spc__summary-item {
        margin-bottom: 20px
    }

    .spc__section--review .spc__inline-form {
        margin-bottom: 25px
    }

    .spc__section--review .spc__row {
        border-bottom: 1px solid #f5f6f7;
        margin-bottom: 25px
    }

    .spc__section--review .spc__row--total {
        border-bottom: 0;
        margin-bottom: 0
    }

        .spc__section--review .spc__row--total .spc__summary-item {
            margin: 0
        }

.spc__section--terms {
    margin-top: 30px
}

    .spc__section--terms label {
        font-size: 13px;
        font-weight: 500
    }

.spc__terms-text {
    text-align: center;
    font-weight: normal;
    width: 100%
}

    .spc__terms-text label {
        display: flex;
        justify-content: center
    }

#react-checkout {
    width: calc(100% + 30px) !important
}

    #react-checkout > div > div > div {
        padding-left: 0px
    }

    #react-checkout .section-hed + div > div:first-child {
        padding-top: 0px;
        padding-left: 0px
    }

@media screen and (max-width: 767px) {
    .spc__log-out {
        display: block;
        float: none
    }

    .cc__existing-useAnother {
        width: auto
    }
}

.payment-information {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important
}

@media screen and (max-width: 767px) {
    .spc__section--pay {
        margin-left: 20px;
        width: calc(100% - 35px)
    }
}

.spc__wait {
    height: 70vh;
    min-height: 250px;
    padding: 30px;
    text-align: center
}

    .spc__wait::before {
        content: '';
        height: 100%
    }

    .spc__wait::before, .spc__wait-inner {
        display: inline-block;
        vertical-align: middle
    }

.spc__wait-title {
    font-weight: bold;
    margin: 40px 0 20px
}

.spc__wait-message {
    font-size: 14px;
    font-weight: bold;
    opacity: 0.6
}

.spc__wait-spinner {
    border-radius: 50%;
    box-sizing: border-box;
    height: 75px;
    margin: 0 auto;
    position: relative;
    width: 75px
}

    .spc__wait-spinner::before {
        -webkit-animation: spin 750ms linear infinite;
        animation: spin 750ms linear infinite;
        background-image: linear-gradient(#e79a00, rgba(252,164,164,0.1) 40%);
        content: '';
        border-radius: 50%;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        will-change: transform
    }

    .spc__wait-spinner::after {
        background: #fff;
        border-radius: 50%;
        content: '';
        height: calc(100% - 3px);
        left: 1px;
        position: absolute;
        top: 1px;
        width: calc(100% - 3px);
        z-index: 1
    }

.view-directory {
    padding-top: 50px
}

    .view-directory.course-directory {
        background: #fafafa
    }

    .view-directory .search {
        margin-bottom: 30px
    }

    .view-directory .filter-title {
        margin-bottom: 30px
    }

        .view-directory .filter-title h2 {
            margin-top: 2px;
            margin-bottom: 3px
        }

        .view-directory .filter-title img.large-img-rounded {
            float: left;
            width: 65px
        }

.enrolled-course-layout {
    width: 100%;
    min-height: calc(100vh - 46px);
    overflow: scroll
}

.course-mainbar {
    margin-left: 350px;
    background: #fff;
    padding: 16px 40px;
    height: auto
}

    .course-mainbar h2.section-title {
        margin-bottom: 30px;
        font-weight: bold
    }

    .course-mainbar .next-lecture-wrapper {
        background: #f8ebeb;
        border-radius: 40px;
        margin-bottom: 20px
    }

        .course-mainbar .next-lecture-wrapper .start-next-lecture {
            margin-right: 12px;
            line-height: 35px;
            font-size: 19px;
            border-radius: 40px
        }

    .course-mainbar .course-section .btn-primary {
        margin-right: -65px
    }

.course-sidebar {
    position: fixed;
    height: 100%;
    width: 350px;
    min-width: 350px;
    background-color: #f7f7f7;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 30px;
    border-right: 1px solid #d7dadb;
    overflow: scroll;
    z-index: 100
}

    .course-sidebar img.course-image {
        display: block;
        width: 100%;
        margin: 0
    }

    .course-sidebar h2 {
        font-size: 20px;
        padding-left: 25px;
        padding-right: 25px;
        font-weight: bold;
        margin-top: 25px;
        line-height: 29px
    }

    .course-sidebar .course-progress {
        padding-left: 25px;
        padding-right: 25px;
        text-align: center;
        margin-top: 10px !important;
        margin-bottom: 25px;
        font-size: 13px;
        color: #e79a00
    }

        .course-sidebar .course-progress .course-progress-percentage {
            margin-top: 10px !important;
            margin-bottom: 25px
        }

        .course-sidebar .course-progress .percentage {
            font-size: 20px;
            font-weight: bold
        }

    .course-sidebar .course-access-limit {
        font-size: 12.642px;
        line-height: 19px;
        color: #101010;
        padding-top: 10px
    }

    .course-sidebar .course-access-limit-tool-tip-icon {
        color: #434343
    }

    .course-sidebar ul.sidebar-nav {
        margin: 0;
        padding: 0
    }

        .course-sidebar ul.sidebar-nav li {
            font-size: 17px;
            padding: 0px
        }

            .course-sidebar ul.sidebar-nav li a {
                font-size: var(--fs0);
                line-height: var(--lh0);
                padding: 13px 18px;
                color: #101010;
                display: block;
                margin-top: 1px
            }

                .course-sidebar ul.sidebar-nav li a i {
                    margin-top: 4px;
                    vertical-align: -1px;
                    font-size: 22px;
                    margin-right: 10px
                }

                .course-sidebar ul.sidebar-nav li a svg {
                    margin-top: 4px
                }

                .course-sidebar ul.sidebar-nav li a:hover {
                    text-decoration: none;
                    background: #e6e6e6
                }

            .course-sidebar ul.sidebar-nav li.selected {
                border-left: 3px #000 solid;
                font-weight: 600
            }

                .course-sidebar ul.sidebar-nav li.selected a {
                    background: #ffffff;
                    border-right: 1px solid #fff
                }

.course-access-limit-tool-tip {
    width: 190px
}

@media screen and (max-width: 767px) {
    .course-mainbar {
        margin-left: 0;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 40px
    }

        .course-mainbar h2.section-title {
            margin-top: 0px
        }

        .course-mainbar .next-lecture-name {
            display: none
        }

    .course-sidebar {
        display: none;
        width: 100%
    }

        .course-sidebar .sticky {
            width: 100% !important
        }

    .sidebar-nav-link {
        font-size: 15px;
        padding: 10px 15px;
        color: #101010;
        display: block;
        line-height: 30px;
        font-weight: 200
    }
}

@media screen and (min-width: 767px) and (max-width: 991px) {
    .course-sidebar {
        width: 300px !important;
        min-width: 300px !important
    }

        .course-sidebar .sticky {
            width: 299px !important
        }

    .course-mainbar {
        margin-left: 300px
    }
}

@media screen and (min-width: 767px) {
    .course-sidebar.collapse {
        overflow: scroll !important
    }
}

.coupon-container {
    margin-top: 30px
}

.hidden-section {
    display: none
}

.social-icon {
    font-size: 42px;
    text-align: center
}

.course_desc p {
    font-size: 18px;
    margin-top: 20px
}

.course_desc li {
    font-size: 18px
}

.section {
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    padding-top: 18px
}

.lecture {
    font-size: 18px;
    padding: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    cursor: pointer
}

.nav-tabs .active a {
    font-weight: bold
}

.course-container {
    margin: 0px auto;
    padding: 0px
}

#main {
    background: #3b3b3b;
    height: 430px
}

.redeem_field {
    margin-top: 7px
}

.content {
    padding: 10px 44px
}

.text {
    border-bottom: 1px solid #262626;
    margin-top: 40px;
    padding-bottom: 40px;
    text-align: center
}

    .text h2 {
        color: #e5e5e5;
        font-size: 20px;
        font-style: normal;
        font-variant: normal;
        font-weight: lighter
    }

.counter {
    background: #2c2c2c;
    box-shadow: inset 0 0 5px #000000;
    min-height: 100px;
    text-align: center
}

p.margin-left {
    margin-left: 20px
}

.counter h3 {
    color: #e5e5e5;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    padding-top: 20px;
    margin-bottom: 30px
}

#countdown {
    color: #fff
}

    #countdown span {
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        text-shadow: 0px 0px 1px #000
    }

.curriculum-table {
    padding: 0px;
    width: 100%;
    margin-bottom: 20px
}

.curriculum-cell {
    border-right: 0px;
    padding-top: 7px;
    padding-bottom: 7px
}

.lecture-icon {
    font-size: 16px
}

.curriculum-lecture-name {
    font-size: 17px
}

.label-draft {
    border-radius: 11px;
    color: #6b6d7c;
    background: #cbcbd0;
    font-size: 12.642px;
    font-weight: 500
}

.not-enrolled-page {
    margin-top: -20px;
    padding-top: 55px;
    padding-bottom: 105px
}

.not-enrolled-container {
    margin-top: 30px
}

.not-enrolled-box {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 35px;
    margin-bottom: 25px;
    font-size: 18pt;
    opacity: 0.85;
    color: #101010;
    margin-top: 50px
}

.not-enrolled-link {
    font-size: 20px
}

.ta-container .ta-title, .ta-container .profile {
    display: block
}

.ta-container a, .ta-container p {
    display: inline-block;
    padding: 12px;
    line-height: 18px;
    margin: 5px;
    font-size: 14px
}

.ta-title p, .ta-container .profile p.name, .ta-container a {
    font-size: 14px;
    font-weight: 600
}

.ta-container .email {
    font-weight: none;
    padding-left: 0;
    font-size: 13px;
    color: #b0b0b0
}

.ta-container .profile img {
    display: inline-block;
    border-radius: 50% 50%;
    margin: 5px 0px 5px 5px;
    max-height: 40px;
    width: auto
}

.ta-container .profile {
    border: 1px solid #e3e3e3;
    border-radius: 2px
}

.ta-title p {
    margin-left: 0;
    padding-left: 8px
}

.ta-icon {
    background: transparent url("http://assets.teachablecdn.com/icons/teachable-circle-green.svg") no-repeat center !important;
    background-size: 100% 100% !important;
    width: 28px;
    height: 28px
}

.ta-icon, .ta-title h6, .ta-container .sidebar, .ta-container .sidebar li {
    display: inline-block;
    vertical-align: middle
}

.ta-container .sidebar {
    display: inline-block;
    list-style: none;
    margin: 0;
    float: right
}

    .ta-container .sidebar li {
        border-left: 1px solid #e3e3e3
    }

    .ta-container .sidebar .unlink {
        color: red
    }

.ta-auth-modal .form-group {
    border: 0
}

.ta-auth-modal .modal-body {
    margin: 0 auto
}

.ta-auth-modal .modal-footer {
    text-align: center;
    margin-top: 30px
}

@media screen and (max-width: 915px) {
    .ta-container .sidebar {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        float: none
    }

    .ta-container .profile {
        border-radius: 0
    }

    .ta-container .sidebar li {
        width: 50%;
        margin: 0;
        padding: 0;
        border: 0;
        border-top: 1px solid #e3e3e3;
        text-align: center;
        border-radius: 0
    }

        .ta-container .sidebar li:last-child {
            padding-left: 1px
        }

        .ta-container .sidebar li:first-child {
            border-right: 1px solid #e3e3e3
        }

    .ta-container .single-btn {
        width: 100% !important;
        border-right: 0px
    }
}

.lecture-page-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: calc(100vh - 46px);
    overflow: scroll
}

    .lecture-page-layout .lecture-content .full-width-content {
        overflow: auto;
        width: 100%
    }

@media screen and (max-width: 767px) {
    .lecture-page-layout {
        flex-direction: column
    }
}

header.half-height {
    z-index: 101;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

    header.half-height .navbar-nav {
        margin-right: 30px !important;
        float: right;
        margin-top: 0px
    }

    header.half-height .lecture-left {
        width: 349px;
        float: left;
        display: flex;
        justify-content: space-between
    }

        header.half-height .lecture-left .nav-icon-back {
            width: 50px !important;
            height: 50px;
            padding: 10px;
            line-height: 20px;
            display: block;
            float: left;
            text-align: center
        }

            header.half-height .lecture-left .nav-icon-back i {
                width: 25px;
                height: 25px;
                font-size: 20px;
                padding-top: 2px
            }

            header.half-height .lecture-left .nav-icon-back:hover {
                text-decoration: none
            }

        header.half-height .lecture-left .nav-icon-settings, header.half-height .lecture-left .nav-icon-list {
            width: 50px;
            padding: 10px;
            background: none;
            color: #fff;
            float: right;
            text-align: center;
            height: 100%;
            display: block
        }

            header.half-height .lecture-left .nav-icon-settings.nav-icon-list, header.half-height .lecture-left .nav-icon-list.nav-icon-list {
                background: #e79a00
            }

                header.half-height .lecture-left .nav-icon-settings.nav-icon-list.collapsed, header.half-height .lecture-left .nav-icon-list.nav-icon-list.collapsed {
                    background: none
                }

            header.half-height .lecture-left .nav-icon-settings i, header.half-height .lecture-left .nav-icon-list i {
                width: 25px;
                height: 25px;
                font-size: 20px;
                padding-top: 4px
            }

            header.half-height .lecture-left .nav-icon-settings:hover, header.half-height .lecture-left .nav-icon-list:hover {
                text-decoration: none;
                background: #e79a00 !important;
                color: #fff
            }

        header.half-height .lecture-left .open .dropdown-toggle {
            background: #e79a00 !important
        }

        header.half-height .lecture-left .nav-focus:focus, header.half-height .lecture-left .nav-focus:focus-within {
            outline: 5px auto Highlight;
            outline: 5px auto -webkit-focus-ring-color
        }

        header.half-height .lecture-left .settings-dropdown {
            float: right
        }

            header.half-height .lecture-left .settings-dropdown ul.dropdown-menu {
                margin-top: 0px;
                width: 220px;
                border: 1px solid #d5d5d5;
                padding: 0px
            }

                header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li {
                    padding: 18px 15px;
                    border-bottom: 1px solid #e4e5e5;
                    color: #6c6c6c;
                    font-size: 13px
                }

                    header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li .switch {
                        float: right;
                        margin-top: 3px
                    }

                    header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li:last-child {
                        border-bottom: 0
                    }

                    header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li .playback-speed {
                        color: #e79a00;
                        border: 0
                    }

                        header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li .playback-speed:hover {
                            color: #fa7373;
                            cursor: pointer
                        }

    header.half-height .lecture-nav {
        display: flex;
        min-height: 50px;
        margin-left: 349px
    }

        header.half-height .lecture-nav a.nav-btn {
            align-items: center;
            color: #fff;
            display: flex;
            flex: 1;
            font-size: 16px;
            justify-content: center;
            border-left: 1px solid rgba(215,218,219,0.3)
        }

            header.half-height .lecture-nav a.nav-btn.complete, header.half-height .lecture-nav a.nav-btn:hover {
                background: #e79a00;
                color: #fff;
                text-decoration: none
            }

            header.half-height .lecture-nav a.nav-btn.disabled {
                cursor: default;
                opacity: 0.2
            }

@media screen and (min-width: 768px) and (max-width: 991px) {
    header.half-height .course-mainbar {
        margin-left: 300px !important
    }

    header.half-height .lecture-left {
        width: 300px
    }

    header.half-height .lecture-nav {
        margin-left: 300px
    }
}

@media screen and (max-width: 767px) {
    header.half-height .lecture-left {
        width: 150px
    }

    header.half-height .lecture-nav {
        margin-left: 150px
    }

        header.half-height .lecture-nav .nav-text {
            display: none
        }

    header.half-height .nav-icon-settings, header.half-height .nav-icon-list {
        border-left: 1px solid rgba(215,218,219,0.3)
    }

    header.half-height a.nav-btn {
        width: 50%
    }
}

.course-sidebar .course-progress.lecture-page.sticky {
    position: fixed;
    top: 36px;
    z-index: 100;
    width: 349px;
    background: rgba(242,242,242,0.97) !important;
    padding-bottom: 0px;
    transition: 0.3s background ease;
    border-bottom: 1px solid #d7dadb
}

    .course-sidebar .course-progress.lecture-page.sticky .course-progress-percentage {
        margin-bottom: 10px
    }

.course-sidebar .row.lecture-sidebar {
    margin-right: 0px !important;
    padding-right: 0px;
    padding-bottom: 100px
}

    .course-sidebar .row.lecture-sidebar .course-section {
        margin-bottom: 20px;
        padding-right: 0px
    }

        .course-sidebar .row.lecture-sidebar .course-section .section-title {
            border-bottom: 1px solid rgba(252,164,164,0.1)
        }

        .course-sidebar .row.lecture-sidebar .course-section .section-item {
            border-bottom: 1px solid rgba(252,164,164,0.1) !important
        }

            .course-sidebar .row.lecture-sidebar .course-section .section-item.next-lecture {
                border-bottom: none !important
            }

        .course-sidebar .row.lecture-sidebar .course-section .btn-primary {
            margin-right: -4px !important
        }

        .course-sidebar .row.lecture-sidebar .course-section .title-container {
            padding-right: 0px !important
        }

.course-sidebar.navbar-sidebar-collapse {
    transition: 0.5s height ease
}

    .course-sidebar.navbar-sidebar-collapse.collapse.in {
        z-index: 100
    }

.lecture-content.course-mainbar {
    background: #fff;
    flex-grow: 1;
    padding: 16px 40px;
    height: auto
}

.lecture-content .well.locked {
    background-color: transparent;
    border: none;
    box-shadow: none
}

.lecture-content h2.section-title {
    line-height: 41px;
    margin-bottom: 18px;
    margin-top: 10px
}

.lecture-content .lecture-contents-locked, .lecture-content .drip-lecture-locked {
    color: #454545;
    font-size: 22px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.05;
    text-align: center
}

    .lecture-content .lecture-contents-locked .already-enrolled, .lecture-content .drip-lecture-locked .already-enrolled {
        color: #8b8b8b;
        font-size: 18px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        text-align: center
    }

    .lecture-content .lecture-contents-locked .content-available-time, .lecture-content .drip-lecture-locked .content-available-time {
        color: #8b8b8b;
        font-size: 18px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        text-align: center
    }

    .lecture-content .lecture-contents-locked a.btn.btn-md.btn-primary, .lecture-content .drip-lecture-locked a.btn.btn-md.btn-primary {
        font-size: 18px !important;
        font-stretch: normal;
        font-style: normal;
        font-weight: 600;
        line-height: 0.67;
        margin-top: 40px;
        text-align: center
    }

.lecture-content .drip-lecture-locked {
    font-size: 28px;
    color: #8c8c8c;
    padding: 100px
}

.lecture-content .lecture-attachment {
    margin-bottom: 20px;
    margin-top: 30px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

    .lecture-content .lecture-attachment .attachment {
        background-color: #f7f7f7;
        margin: 0px;
        font-size: 14px;
        padding: 6px 13px;
        line-height: 25px;
        font-weight: bold;
        border-bottom: 1px solid #fff
    }

        .lecture-content .lecture-attachment .attachment .attachment-link {
            color: #e79a00;
            cursor: pointer
        }

            .lecture-content .lecture-attachment .attachment .attachment-link:hover {
                color: #fa7373
            }

    .lecture-content .lecture-attachment .attachment-block-wrapper {
        border: 1px solid #d7dada;
        border-radius: 5px
    }

        .lecture-content .lecture-attachment .attachment-block-wrapper .attachment-block-label {
            background: #030303;
            color: #fff;
            display: block;
            height: 27px;
            line-height: 28px;
            border-radius: 3px;
            text-align: center;
            margin-top: -35px;
            margin-left: -35px;
            font-weight: bold;
            font-size: 15px;
            float: left;
            padding: 0px 15px
        }

        .lecture-content .lecture-attachment .attachment-block-wrapper.quiz-wrapper {
            padding: 35px 35px 80px 35px
        }

        .lecture-content .lecture-attachment .attachment-block-wrapper.comments {
            padding: 35px
        }

    .lecture-content .lecture-attachment .attachment-pdf-embed .label {
        background-color: #030303;
        font-size: 16px;
        color: #fff;
        padding: 4px 16px;
        display: flex;
        align-items: center
    }

        .lecture-content .lecture-attachment .attachment-pdf-embed .label svg {
            margin-right: 4px
        }

    .lecture-content .lecture-attachment .attachment-pdf-embed .wrapper {
        border-top: 6px solid #030303;
        border-bottom: 6px solid #030303;
        border-radius: 8px;
        border-top-left-radius: 0;
        overflow: hidden
    }

        .lecture-content .lecture-attachment .attachment-pdf-embed .wrapper .pdf-viewer {
            width: 100%
        }

    .lecture-content .lecture-attachment .attachment-wistia-player {
        margin: auto;
        height: 100%;
        width: 100%
    }

    .lecture-content .lecture-attachment .attachment-title {
        text-align: left !important
    }

    .lecture-content .lecture-attachment .video-options {
        margin-bottom: 65px
    }

        .lecture-content .lecture-attachment .video-options a {
            float: left;
            margin-right: 4px;
            background-color: #f7f7f7;
            padding: 10px 16px;
            cursor: pointer;
            color: #e79a00;
            font-weight: bold;
            font-size: 13px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px
        }

            .lecture-content .lecture-attachment .video-options a:hover {
                color: #fa7373;
                text-decoration: none
            }

    .lecture-content .lecture-attachment *::-webkit-media-controls {
        overflow: hidden !important
    }

    .lecture-content .lecture-attachment *::-webkit-media-controls-enclosure {
        width: calc(100% + 32px);
        margin-left: auto
    }

@media screen and (max-width: 992px) {
    .lecture-content .attachment-block-wrapper.comments {
        border: 0 !important;
        padding-right: 10px !important;
        padding-left: 10px !important
    }
}

@media screen and (max-width: 991px) {
    .lecture-content h2.section-title {
        font-size: 24px !important;
        line-height: 34px
    }

    .lecture-content .lecture-contents-locked, .lecture-content .drip-lecture-locked {
        font-size: 16px;
        padding: 30px 0px
    }

    .lecture-content .drip-lecture-locked {
        padding: 20px
    }
}

.ql-align-right {
    text-align: right
}

.ql-align-center {
    text-align: center
}

.wistia_responsive_padding {
    height: 0;
    padding-bottom: 56.25%;
    position: relative
}

.wistia_responsive_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.compliance-banner {
    background-color: #e1efda;
    color: #4d4d4d;
    font-size: 16px;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    padding: 30px;
    position: relative;
    width: 100%
}

.course-section {
    margin-bottom: 10px
}

    .course-section.course-section-locked .section-lock, .course-section.progress-locked .section-lock {
        display: inline;
        opacity: 0.5;
        font-size: 16px
    }

    .course-section.course-section-locked .item, .course-section.progress-locked .item {
        opacity: 0.5
    }

    .course-section.course-section-locked .title-container .btn-primary, .course-section.progress-locked .title-container .btn-primary {
        display: none
    }

    .course-section.course-section-locked .section-days-to-drip, .course-section.progress-locked .section-days-to-drip {
        display: block;
        float: right;
        font-size: 14px;
        font-weight: 600;
        margin-top: 1px;
        opacity: 0.5
    }

    .course-section.progress-locked .current-item .item {
        opacity: 1 !important
    }

    .course-section.progress-locked .current-item .title-container .btn-primary {
        display: block
    }

    .course-section .section-lock, .course-section .section-days-to-drip, .course-section .section-days-logged-in, .course-section .section-days-logged-out {
        display: none
    }

    .course-section .section-title {
        background: #e8e8e8;
        padding: 10px 16px;
        margin: 0;
        font-size: 15px;
        font-weight: bold;
        border-bottom: 1px solid #fff
    }

    .course-section .course-item {
        background: #f7f7f7;
        padding: 10px 16px;
        margin: 0;
        font-size: 17px;
        font-weight: normal;
        border-bottom: 1px solid #fff
    }

    .course-section ul.section-list {
        margin: 0;
        padding: 0
    }

        .course-section ul.section-list .section-item {
            margin: 0;
            padding: 0;
            list-style-type: none;
            border-bottom: 1px solid #fff
        }

            .course-section ul.section-list .section-item .item {
                display: block;
                padding: 11px 16px;
                background: #f0f0f0;
                list-style-type: none;
                font-size: 15px;
                color: #2a2a2a;
                text-decoration: none;
                font-weight: 200
            }

                .course-section ul.section-list .section-item .item:hover {
                    color: #fa7373;
                    background: #f8ebeb
                }

                .course-section ul.section-list .section-item .item .lecture-icon {
                    padding-right: 5px
                }

                .course-section ul.section-list .section-item .item .btn-primary {
                    margin-top: -3px;
                    margin-right: -5px
                }

            .course-section ul.section-list .section-item .status-container {
                margin-top: -11px;
                float: left;
                height: 45px;
                margin-left: 5px;
                padding-top: 11px;
                margin-right: 20px;
                padding-right: 16px
            }

            .course-section ul.section-list .section-item .title-container {
                border-left: 1px solid rgba(252,164,164,0.1);
                margin: -11px;
                padding: 10px;
                margin-left: 41px;
                padding-right: 70px
            }

            .course-section ul.section-list .section-item .status-icon {
                width: 20px;
                height: 20px;
                float: left;
                border-radius: 14px
            }

            .course-section ul.section-list .section-item .lecture-name {
                font-weight: 200
            }

            .course-section ul.section-list .section-item .lecture-start {
                opacity: 0.5
            }

            .course-section ul.section-list .section-item.completed .item {
                color: #b8b8b8;
                background: #f0f0f0
            }

                .course-section ul.section-list .section-item.completed .item:hover {
                    color: #ababab;
                    background: #e6e6e6
                }

                    .course-section ul.section-list .section-item.completed .item:hover .status-icon {
                        background-color: #ababab
                    }

            .course-section ul.section-list .section-item.completed .status-icon {
                background: url("../../../assets.teachablecdn.com/icons/course-complete.png") 1px 0px #b8b8b8;
                background-size: 96%
            }

            .course-section ul.section-list .section-item.completed .btn-primary {
                display: none
            }

            .course-section ul.section-list .section-item.incomplete .status-icon {
                background: none;
                box-shadow: inset 0px 0px 0px 2px #e79a00
            }

            .course-section ul.section-list .section-item.incomplete .item:hover .status-icon {
                box-shadow: inset 0px 0px 0px 2px #fa7373
            }

            .course-section ul.section-list .section-item.next-lecture .item {
                color: #101010;
                background: #f8ebeb
            }

            .course-section ul.section-list .section-item.next-lecture .status-icon {
                background: url("../../../assets.teachablecdn.com/icons/course-incomplete.png") 1px 0px #101010;
                box-shadow: inset 0px 0px 0px 2px #101010
            }

            .course-section ul.section-list .section-item.next-lecture .item:hover {
                color: #101010;
                background: #f8ebeb
            }

                .course-section ul.section-list .section-item.next-lecture .item:hover .status-icon {
                    box-shadow: inset 0px 0px 0px 2px #101010 !important
                }

#more_lecture_sections {
    display: none !important
}

    #more_lecture_sections.collapsed {
        display: inline-block !important;
        padding: 5px 12px !important
    }

.revamped_lecture_player .enrolled-course-layout {
    width: 100%;
    min-height: unset;
    height: calc(100vh - 60px);
    overflow: scroll;
    display: flex
}

.revamped_lecture_player .course-mainbar {
    width: 100%;
    background: #fff;
    padding: 40px;
    padding-top: 55px;
    height: auto;
    margin-left: 0px
}

    .revamped_lecture_player .course-mainbar.enforce-maximum-content-width {
        max-width: 840px;
        margin: 0 auto
    }

    .revamped_lecture_player .course-mainbar h2.section-title {
        margin-bottom: 30px;
        font-size: var(--fs3);
        line-height: var(--lh3);
        font-weight: 600
    }

    .revamped_lecture_player .course-mainbar .next-lecture-wrapper {
        background: #f8ebeb;
        border-radius: 6px;
        margin-bottom: 20px
    }

        .revamped_lecture_player .course-mainbar .next-lecture-wrapper .start-next-lecture {
            margin-right: 12px;
            font-size: var(--fs1);
            line-height: var(--lh1);
            font-weight: 600;
            border-radius: 6px
        }

        .revamped_lecture_player .course-mainbar .next-lecture-wrapper .next-lecture-name {
            font-size: var(--fs-1);
            line-height: var(--lh-1);
            font-weight: 400
        }

.revamped_lecture_player .course-sidebar {
    width: 350px;
    box-shadow: 0px 6px 20px rgba(32,39,45,0.15);
    background-color: var(--white);
    padding-left: 0px;
    padding-right: 0px;
    position: -webkit-sticky;
    position: sticky;
    overflow: auto;
    display: inline-block;
    flex: 0 0 auto;
    height: 100%;
    top: 0
}

.revamped_lecture_player .course-sidebar-head {
    background-color: var(--linen)
}

.revamped_lecture_player .course-sidebar img.course-image {
    display: block;
    width: 100%;
    margin: 0
}

.revamped_lecture_player .course-sidebar h2 {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 25px;
    margin-top: 0;
    font-size: var(--fs1);
    line-height: var(--lh1);
    font-weight: 600
}

.revamped_lecture_player .course-sidebar .course-progress {
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    margin-top: 10px !important;
    margin-bottom: 25px;
    font-size: var(--fs0);
    line-height: var(--lh0);
    font-weight: 600;
    color: var(--obsidian);
    border-bottom: 1px solid var(--gravel)
}

    .revamped_lecture_player .course-sidebar .course-progress .course-progress-percentage {
        margin-top: 10px !important;
        margin-bottom: 25px
    }

.revamped_lecture_player .course-sidebar .course-access-limit {
    font-size: 12.642px;
    line-height: 19px;
    color: #101010;
    padding-top: 10px
}

.revamped_lecture_player .course-sidebar .course-access-limit-tool-tip-icon {
    color: #434343
}

.revamped_lecture_player .course-sidebar ul.sidebar-nav {
    margin: 0;
    padding: 0
}

.revamped_lecture_player .course-sidebar ul.sidebar-nav-link .lecture-sidebar-icon {
    margin-right: 4px
}

.revamped_lecture_player .course-sidebar ul.sidebar-nav li {
    font-size: 17px;
    padding: 0px;
    border-left: 3px solid transparent
}

    .revamped_lecture_player .course-sidebar ul.sidebar-nav li a {
        font-size: 16px;
        padding: 13px 18px;
        color: #101010;
        display: flex;
        align-items: center;
        margin-top: 1px
    }

        .revamped_lecture_player .course-sidebar ul.sidebar-nav li a i {
            margin-top: 4px;
            vertical-align: -1px;
            font-size: 22px;
            margin-right: 10px
        }

        .revamped_lecture_player .course-sidebar ul.sidebar-nav li a svg {
            margin-right: 4px
        }

        .revamped_lecture_player .course-sidebar ul.sidebar-nav li a:hover {
            text-decoration: none;
            background: #e6e6e6
        }

    .revamped_lecture_player .course-sidebar ul.sidebar-nav li.selected {
        border-color: #000;
        font-weight: 600
    }

        .revamped_lecture_player .course-sidebar ul.sidebar-nav li.selected a {
            background: #ffffff;
            border-right: 1px solid #fff
        }

.revamped_lecture_player .course-access-limit-tool-tip {
    width: 190px
}

@media screen and (max-width: 767px) {
    .revamped_lecture_player .course-mainbar {
        margin-left: 0;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 85px
    }

        .revamped_lecture_player .course-mainbar h2.section-title {
            margin-top: 0px
        }

        .revamped_lecture_player .course-mainbar .next-lecture-name {
            display: none
        }

    .revamped_lecture_player .course-sidebar {
        display: none;
        width: 100%
    }

        .revamped_lecture_player .course-sidebar .sticky {
            width: 100% !important
        }

    .revamped_lecture_player .sidebar-nav-link {
        font-size: 15px;
        padding: 10px 15px;
        color: #101010;
        display: block;
        line-height: 30px;
        font-weight: 200
    }
}

@media screen and (min-width: 767px) and (max-width: 991px) {
    .revamped_lecture_player .course-sidebar {
        width: 300px !important
    }

        .revamped_lecture_player .course-sidebar .sticky {
            width: 299px !important
        }
}

@media screen and (min-width: 767px) {
    .revamped_lecture_player .course-sidebar.collapse {
        height: 100% !important;
        overflow: scroll !important
    }
}

.revamped_lecture_player .coupon-container {
    margin-top: 30px
}

.revamped_lecture_player .hidden-section {
    display: none
}

.revamped_lecture_player .social-icon {
    font-size: 42px;
    text-align: center
}

.revamped_lecture_player .course_desc p {
    font-size: 18px;
    margin-top: 20px
}

.revamped_lecture_player .course_desc li {
    font-size: 18px
}

.revamped_lecture_player .section {
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    padding-top: 18px
}

.revamped_lecture_player .lecture {
    font-size: 18px;
    padding: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    cursor: pointer
}

.revamped_lecture_player .nav-tabs .active a {
    font-weight: bold
}

.revamped_lecture_player .course-container {
    margin: 0px auto;
    padding: 0px
}

.revamped_lecture_player #main {
    background: #3b3b3b;
    height: 430px
}

.revamped_lecture_player .redeem_field {
    margin-top: 7px
}

.revamped_lecture_player .content {
    padding: 10px 44px
}

.revamped_lecture_player .text {
    border-bottom: 1px solid #262626;
    margin-top: 40px;
    padding-bottom: 40px;
    text-align: center
}

    .revamped_lecture_player .text h2 {
        color: #e5e5e5;
        font-size: 20px;
        font-style: normal;
        font-variant: normal;
        font-weight: lighter
    }

.revamped_lecture_player .counter {
    background: #2c2c2c;
    box-shadow: inset 0 0 5px #000000;
    min-height: 100px;
    text-align: center
}

.revamped_lecture_player p.margin-left {
    margin-left: 20px
}

.revamped_lecture_player .counter h3 {
    color: #e5e5e5;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    padding-top: 20px;
    margin-bottom: 30px
}

.revamped_lecture_player #countdown {
    color: #fff
}

    .revamped_lecture_player #countdown span {
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        text-shadow: 0px 0px 1px #000
    }

.revamped_lecture_player .curriculum-table {
    padding: 0px;
    width: 100%;
    margin-bottom: 20px
}

.revamped_lecture_player .curriculum-cell {
    border-right: 0px;
    padding-top: 7px;
    padding-bottom: 7px
}

.revamped_lecture_player .lecture-icon {
    font-size: 16px
}

.revamped_lecture_player .curriculum-lecture-name {
    font-size: 17px
}

.revamped_lecture_player .label-draft {
    border-radius: 11px;
    color: #6b6d7c;
    background: #cbcbd0;
    font-size: 12.642px;
    font-weight: 500
}

.revamped_lecture_player .not-enrolled-page {
    margin-top: -20px;
    padding-top: 55px;
    padding-bottom: 105px
}

.revamped_lecture_player .not-enrolled-container {
    margin-top: 30px
}

.revamped_lecture_player .not-enrolled-box {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 35px;
    margin-bottom: 25px;
    font-size: 18pt;
    opacity: 0.85;
    color: #101010;
    margin-top: 50px
}

.revamped_lecture_player .not-enrolled-link {
    font-size: 20px
}

.revamped_lecture_player .ta-container .ta-title, .revamped_lecture_player .ta-container .profile {
    display: block
}

.revamped_lecture_player .ta-container a, .revamped_lecture_player .ta-container p {
    display: inline-block;
    padding: 12px;
    line-height: 18px;
    margin: 5px;
    font-size: 14px
}

.revamped_lecture_player .ta-title p, .revamped_lecture_player .ta-container .profile p.name, .revamped_lecture_player .ta-container a {
    font-size: 14px;
    font-weight: 600
}

.revamped_lecture_player .ta-container .email {
    font-weight: none;
    padding-left: 0;
    font-size: 13px;
    color: #b0b0b0
}

.revamped_lecture_player .ta-container .profile img {
    display: inline-block;
    border-radius: 50% 50%;
    margin: 5px 0px 5px 5px;
    max-height: 40px;
    width: auto
}

.revamped_lecture_player .ta-container .profile {
    border: 1px solid #e3e3e3;
    border-radius: 2px
}

.revamped_lecture_player .ta-title p {
    margin-left: 0;
    padding-left: 8px
}

.revamped_lecture_player .ta-icon {
    background: transparent url("http://assets.teachablecdn.com/icons/teachable-circle-green.svg") no-repeat center !important;
    background-size: 100% 100% !important;
    width: 28px;
    height: 28px
}

.revamped_lecture_player .ta-icon, .revamped_lecture_player .ta-title h6, .revamped_lecture_player .ta-container .sidebar, .revamped_lecture_player .ta-container .sidebar li {
    display: inline-block;
    vertical-align: middle
}

.revamped_lecture_player .ta-container .sidebar {
    display: inline-block;
    list-style: none;
    margin: 0;
    float: right
}

    .revamped_lecture_player .ta-container .sidebar li {
        border-left: 1px solid #e3e3e3
    }

    .revamped_lecture_player .ta-container .sidebar .unlink {
        color: red
    }

.revamped_lecture_player .ta-auth-modal .form-group {
    border: 0
}

.revamped_lecture_player .ta-auth-modal .modal-body {
    margin: 0 auto
}

.revamped_lecture_player .ta-auth-modal .modal-footer {
    text-align: center;
    margin-top: 30px
}

@media screen and (max-width: 915px) {
    .revamped_lecture_player .ta-container .sidebar {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        float: none
    }

    .revamped_lecture_player .ta-container .profile {
        border-radius: 0
    }

    .revamped_lecture_player .ta-container .sidebar li {
        width: 50%;
        margin: 0;
        padding: 0;
        border: 0;
        border-top: 1px solid #e3e3e3;
        text-align: center;
        border-radius: 0
    }

        .revamped_lecture_player .ta-container .sidebar li:last-child {
            padding-left: 1px
        }

        .revamped_lecture_player .ta-container .sidebar li:first-child {
            border-right: 1px solid #e3e3e3
        }

    .revamped_lecture_player .ta-container .single-btn {
        width: 100% !important;
        border-right: 0px
    }
}

.revamped_lecture_player .lecture-page-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: unset;
    height: calc(100vh - 71px);
    overflow: scroll
}

    .revamped_lecture_player .lecture-page-layout .lecture-content .full-width-content {
        overflow: auto;
        width: 100%
    }

@media screen and (max-width: 767px) {
    .revamped_lecture_player .lecture-page-layout {
        flex-direction: column
    }
}

.revamped_lecture_player header.half-height {
    z-index: 101;
    position: -webkit-sticky;
    position: sticky;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

    .revamped_lecture_player header.half-height .nav.navbar-nav > li .fedora-navbar-link:hover {
        background-color: transparent !important
    }

    .revamped_lecture_player header.half-height .lecture-left {
        width: 350px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

        .revamped_lecture_player header.half-height .lecture-left .nav-icon-back {
            width: 50px;
            padding: 12px;
            background: none;
            color: #fff;
            text-align: center;
            height: 71px;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

            .revamped_lecture_player header.half-height .lecture-left .nav-icon-back:hover {
                text-decoration: none;
                color: #fff
            }

        .revamped_lecture_player header.half-height .lecture-left .nav-icon-settings, .revamped_lecture_player header.half-height .lecture-left .nav-icon-list {
            width: 50px;
            padding: 12px;
            background: none;
            color: #fff;
            float: right;
            text-align: center;
            height: 71px;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

            .revamped_lecture_player header.half-height .lecture-left .nav-icon-settings.nav-icon-list, .revamped_lecture_player header.half-height .lecture-left .nav-icon-list.nav-icon-list {
                background: none
            }

                .revamped_lecture_player header.half-height .lecture-left .nav-icon-settings.nav-icon-list.collapsed, .revamped_lecture_player header.half-height .lecture-left .nav-icon-list.nav-icon-list.collapsed {
                    background: none
                }

            .revamped_lecture_player header.half-height .lecture-left .nav-icon-settings i, .revamped_lecture_player header.half-height .lecture-left .nav-icon-list i {
                width: 25px;
                height: 25px;
                font-size: 20px;
                padding-top: 4px
            }

            .revamped_lecture_player header.half-height .lecture-left .nav-icon-settings:hover, .revamped_lecture_player header.half-height .lecture-left .nav-icon-list:hover {
                color: #fff;
                background: none !important
            }

        .revamped_lecture_player header.half-height .lecture-left .open .dropdown-toggle {
            background: none !important
        }

        .revamped_lecture_player header.half-height .lecture-left .settings-dropdown {
            float: right;
            border-right: 1px solid #d7dadb
        }

            .revamped_lecture_player header.half-height .lecture-left .settings-dropdown ul.dropdown-menu {
                margin-top: 0px;
                width: 220px;
                box-shadow: 0px 6px 20px rgba(32,39,45,0.15);
                padding: 0px;
                background-color: var(--white)
            }

                .revamped_lecture_player header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li {
                    padding: 12px 24px;
                    color: var(--black);
                    font-size: var(--fs-1);
                    line-height: var(--lh-1);
                    font-weight: 400
                }

                    .revamped_lecture_player header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li .switch {
                        float: right;
                        color: var(--black);
                        margin-top: 3px
                    }

                    .revamped_lecture_player header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li:last-child {
                        border-bottom: 0
                    }

                    .revamped_lecture_player header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li .playback-speed {
                        color: var(--black);
                        background-color: var(--gravel);
                        border: 0;
                        border-radius: 4px
                    }

                        .revamped_lecture_player header.half-height .lecture-left .settings-dropdown ul.dropdown-menu li .playback-speed:hover {
                            background-color: var(--nantucket);
                            cursor: pointer
                        }

    .revamped_lecture_player header.half-height .lecture-nav {
        display: flex;
        align-items: center;
        float: right;
        height: 71px;
        margin-left: 0;
        margin-right: 16px
    }

@media screen and (min-width: 768px) and (max-width: 991px) {
    .revamped_lecture_player header.half-height .lecture-left {
        width: 300px
    }
}

@media screen and (max-width: 767px) {
    .revamped_lecture_player header.half-height .lecture-left {
        width: 150px
    }

    .revamped_lecture_player header.half-height .lecture-nav .nav-text {
        display: none
    }

    .revamped_lecture_player header.half-height .nav-icon-settings {
        border-left: 1px solid rgba(215,218,219,0.3)
    }

    .revamped_lecture_player header.half-height .nav-icon-list {
        border-left: 0px
    }

    .revamped_lecture_player header.half-height a.nav-btn {
        width: 50%
    }
}

.revamped_lecture_player .complete-and-continue-btn, .revamped_lecture_player .lecture-content a.lecture-complete, .revamped_lecture_player header.half-height .lecture-nav a.nav-btn {
    align-items: center;
    color: #fff;
    display: flex;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 6px;
    padding: 9px 16px;
    margin-right: 8px;
    font-size: var(--fs0);
    line-height: var(--lh0);
    font-weight: 600;
    flex: none
}

    .revamped_lecture_player .complete-and-continue-btn svg, .revamped_lecture_player .lecture-content a.lecture-complete svg, .revamped_lecture_player header.half-height .lecture-nav a.nav-btn svg {
        height: 1.3em
    }

    .revamped_lecture_player .complete-and-continue-btn:hover, .revamped_lecture_player .lecture-content a.lecture-complete:hover, .revamped_lecture_player header.half-height .lecture-nav a.nav-btn:hover {
        color: #fff;
        border-color: #fff;
        background: none
    }

    .revamped_lecture_player .complete-and-continue-btn.complete, .revamped_lecture_player .lecture-content a.complete.lecture-complete, .revamped_lecture_player header.half-height .lecture-nav a.complete.nav-btn {
        background: #e79a00;
        color: #fff;
        text-decoration: none
    }

        .revamped_lecture_player .complete-and-continue-btn.complete:hover, .revamped_lecture_player .lecture-content a.complete.lecture-complete:hover, .revamped_lecture_player header.half-height .lecture-nav a.complete.nav-btn:hover {
            background: #fff
        }

    .revamped_lecture_player .complete-and-continue-btn.disabled, .revamped_lecture_player .lecture-content a.disabled.lecture-complete, .revamped_lecture_player header.half-height .lecture-nav a.disabled.nav-btn {
        cursor: default;
        border-color: var(--nantucket);
        color: var(--nantucket)
    }

    .revamped_lecture_player .complete-and-continue-btn.complete.disabled, .revamped_lecture_player .lecture-content a.complete.disabled.lecture-complete, .revamped_lecture_player header.half-height .lecture-nav a.complete.disabled.nav-btn {
        background: var(--nantucket);
        color: #fff
    }

.revamped_lecture_player .course-sidebar .course-progress.lecture-page.sticky {
    position: fixed;
    top: 36px;
    z-index: 100;
    width: 349px;
    background: rgba(242,242,242,0.97) !important;
    padding-bottom: 0px;
    transition: 0.3s background ease;
    border-bottom: 1px solid #d7dadb
}

    .revamped_lecture_player .course-sidebar .course-progress.lecture-page.sticky .course-progress-percentage {
        margin-bottom: 10px
    }

.revamped_lecture_player .course-sidebar .row.lecture-sidebar {
    margin-right: 0px !important;
    padding-right: 0px;
    padding-bottom: 100px
}

    .revamped_lecture_player .course-sidebar .row.lecture-sidebar .course-section {
        margin-bottom: 20px;
        padding-right: 0px
    }

        .revamped_lecture_player .course-sidebar .row.lecture-sidebar .course-section .section-title {
            background: var(--white)
        }

        .revamped_lecture_player .course-sidebar .row.lecture-sidebar .course-section .section-item.next-lecture {
            border-bottom: none !important
        }

        .revamped_lecture_player .course-sidebar .row.lecture-sidebar .course-section .btn-primary {
            margin-right: -4px !important
        }

        .revamped_lecture_player .course-sidebar .row.lecture-sidebar .course-section .title-container {
            padding-right: 0px !important;
            border-left: 1px solid var(--white)
        }

.revamped_lecture_player .course-sidebar.navbar-sidebar-collapse {
    transition: 0.5s height ease
}

    .revamped_lecture_player .course-sidebar.navbar-sidebar-collapse.collapse.in {
        z-index: 100;
        display: inline-block
    }

.revamped_lecture_player .lecture-content {
    padding-top: 40px
}

    .revamped_lecture_player .lecture-content.course-mainbar {
        background: #fff;
        flex-grow: 1;
        padding: 16px 40px;
        height: auto
    }

    .revamped_lecture_player .lecture-content.enforce-maximum-content-width {
        max-width: 840px;
        margin: 0 auto
    }

    .revamped_lecture_player .lecture-content a.lecture-complete {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 32px auto
    }

    .revamped_lecture_player .lecture-content .well.locked {
        background-color: transparent;
        border: none;
        box-shadow: none
    }

    .revamped_lecture_player .lecture-content .lecture-contents-locked, .revamped_lecture_player .lecture-content .drip-lecture-locked {
        color: #454545;
        font-size: 22px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 2.05;
        text-align: center
    }

        .revamped_lecture_player .lecture-content .lecture-contents-locked .already-enrolled, .revamped_lecture_player .lecture-content .drip-lecture-locked .already-enrolled {
            color: #8b8b8b;
            font-size: 18px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.67;
            text-align: center
        }

        .revamped_lecture_player .lecture-content .lecture-contents-locked .content-available-time, .revamped_lecture_player .lecture-content .drip-lecture-locked .content-available-time {
            color: #8b8b8b;
            font-size: 18px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.67;
            text-align: center
        }

        .revamped_lecture_player .lecture-content .lecture-contents-locked a.btn.btn-md.btn-primary, .revamped_lecture_player .lecture-content .drip-lecture-locked a.btn.btn-md.btn-primary {
            font-size: 18px !important;
            font-stretch: normal;
            font-style: normal;
            font-weight: 600;
            line-height: 0.67;
            margin-top: 40px;
            text-align: center;
            border-radius: 6px
        }

    .revamped_lecture_player .lecture-content .drip-lecture-locked {
        font-size: 28px;
        color: #8c8c8c;
        padding: 100px
    }

    .revamped_lecture_player .lecture-content .lecture-attachment {
        margin-bottom: 20px;
        margin-top: 30px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-all;
        word-break: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto
    }

        .revamped_lecture_player .lecture-content .lecture-attachment .attachment {
            background-color: #f7f7f7;
            margin: 0px;
            font-size: 14px;
            padding: 6px 13px;
            line-height: 25px;
            font-weight: bold;
            border-bottom: 1px solid #fff
        }

            .revamped_lecture_player .lecture-content .lecture-attachment .attachment .attachment-link {
                color: #e79a00;
                cursor: pointer
            }

                .revamped_lecture_player .lecture-content .lecture-attachment .attachment .attachment-link:hover {
                    color: #fa7373
                }

        .revamped_lecture_player .lecture-content .lecture-attachment .attachment-block-wrapper {
            border: 1px solid #d7dada;
            border-radius: 5px
        }

            .revamped_lecture_player .lecture-content .lecture-attachment .attachment-block-wrapper .attachment-block-label {
                background: #030303;
                color: #fff;
                display: block;
                height: 27px;
                line-height: 28px;
                border-radius: 3px;
                text-align: center;
                margin-top: -35px;
                margin-left: -35px;
                font-weight: bold;
                font-size: 15px;
                float: left;
                padding: 0px 15px
            }

            .revamped_lecture_player .lecture-content .lecture-attachment .attachment-block-wrapper.quiz-wrapper {
                padding: 35px 35px 80px 35px
            }

            .revamped_lecture_player .lecture-content .lecture-attachment .attachment-block-wrapper.comments {
                padding: 35px
            }

        .revamped_lecture_player .lecture-content .lecture-attachment .attachment-pdf-embed .label {
            background-color: #030303;
            font-size: 16px;
            color: #fff;
            padding: 4px 16px
        }

        .revamped_lecture_player .lecture-content .lecture-attachment .attachment-pdf-embed .wrapper {
            border-top: 6px solid #030303;
            border-bottom: 6px solid #030303;
            border-radius: 8px;
            border-top-left-radius: 0;
            overflow: hidden
        }

            .revamped_lecture_player .lecture-content .lecture-attachment .attachment-pdf-embed .wrapper .pdf-viewer {
                width: 100%
            }

        .revamped_lecture_player .lecture-content .lecture-attachment .attachment-wistia-player {
            margin: auto;
            height: 100%;
            width: 100%
        }

        .revamped_lecture_player .lecture-content .lecture-attachment .attachment-title {
            text-align: left !important
        }

        .revamped_lecture_player .lecture-content .lecture-attachment .video-options {
            margin-bottom: 65px
        }

            .revamped_lecture_player .lecture-content .lecture-attachment .video-options a {
                float: left;
                margin-right: 4px;
                background-color: #f7f7f7;
                padding: 10px 16px;
                cursor: pointer;
                color: #e79a00;
                font-weight: bold;
                font-size: 13px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px
            }

                .revamped_lecture_player .lecture-content .lecture-attachment .video-options a:hover {
                    color: #fa7373;
                    text-decoration: none
                }

        .revamped_lecture_player .lecture-content .lecture-attachment *::-webkit-media-controls {
            overflow: hidden !important
        }

        .revamped_lecture_player .lecture-content .lecture-attachment *::-webkit-media-controls-enclosure {
            width: calc(100% + 32px);
            margin-left: auto
        }

@media screen and (max-width: 992px) {
    .revamped_lecture_player .lecture-content .attachment-block-wrapper.comments {
        border: 0 !important;
        padding-right: 10px !important;
        padding-left: 10px !important
    }
}

@media screen and (max-width: 991px) {
    .revamped_lecture_player .lecture-content .lecture-contents-locked, .revamped_lecture_player .lecture-content .drip-lecture-locked {
        font-size: 16px;
        padding: 30px 0px
    }

    .revamped_lecture_player .lecture-content .drip-lecture-locked {
        padding: 20px
    }
}

.revamped_lecture_player .ql-align-right {
    text-align: right
}

.revamped_lecture_player .ql-align-center {
    text-align: center
}

.revamped_lecture_player .wistia_responsive_padding {
    height: 0;
    padding-bottom: 56.25%;
    position: relative
}

.revamped_lecture_player .wistia_responsive_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.revamped_lecture_player .compliance-banner {
    background-color: #e1efda;
    color: #4d4d4d;
    font-size: 16px;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    padding: 30px;
    position: relative;
    width: 100%
}

.revamped_lecture_player .course-section {
    margin-bottom: 10px
}

    .revamped_lecture_player .course-section.course-section-locked .section-lock, .revamped_lecture_player .course-section.progress-locked .section-lock {
        display: inline;
        font-size: 16px
    }

    .revamped_lecture_player .course-section.course-section-locked .title-container .btn-primary, .revamped_lecture_player .course-section.progress-locked .title-container .btn-primary {
        display: none
    }

    .revamped_lecture_player .course-section.course-section-locked .section-days-to-drip, .revamped_lecture_player .course-section.progress-locked .section-days-to-drip {
        display: block;
        float: right;
        font-size: 14px;
        font-weight: 600;
        margin-top: 1px
    }

    .revamped_lecture_player .course-section.progress-locked .current-item .title-container .btn-primary {
        display: block
    }

    .revamped_lecture_player .course-section .section-lock, .revamped_lecture_player .course-section .section-days-to-drip, .revamped_lecture_player .course-section .section-days-logged-in, .revamped_lecture_player .course-section .section-days-logged-out {
        display: none
    }

    .revamped_lecture_player .course-section .section-title {
        background: var(--white);
        padding: 10px 16px;
        margin: 0;
        font-size: var(--fs0);
        line-height: var(--lh0);
        font-weight: 600;
        border-bottom: 1px solid #fff
    }

    .revamped_lecture_player .course-section .course-item {
        background: #f7f7f7;
        padding: 10px 16px;
        margin: 0;
        font-size: 17px;
        font-weight: normal;
        border-bottom: 1px solid #fff
    }

    .revamped_lecture_player .course-section ul.section-list {
        margin: 0;
        padding: 0
    }

        .revamped_lecture_player .course-section ul.section-list .section-item {
            margin: 0;
            padding: 0;
            list-style-type: none;
            border-bottom: 1px solid #fff
        }

            .revamped_lecture_player .course-section ul.section-list .section-item .item {
                display: flex;
                align-items: center;
                padding: 0px;
                background-color: var(--linen);
                list-style-type: none;
                font-size: var(--fs-1);
                line-height: var(--lh-1);
                font-weight: 400;
                color: #2a2a2a;
                text-decoration: none
            }

                .revamped_lecture_player .course-section ul.section-list .section-item .item:hover {
                    color: #2a2a2a;
                    background: #fff
                }

                .revamped_lecture_player .course-section ul.section-list .section-item .item .lecture-icon {
                    padding-right: 8px;
                    display: inline-flex
                }

                .revamped_lecture_player .course-section ul.section-list .section-item .item .lecture-name {
                    vertical-align: middle
                }

                .revamped_lecture_player .course-section ul.section-list .section-item .item .btn-primary {
                    margin-top: 0px;
                    margin-right: 0px
                }

            .revamped_lecture_player .course-section ul.section-list .section-item .status-container {
                float: left;
                height: auto;
                margin: 0;
                padding: 16px
            }

            .revamped_lecture_player .course-section ul.section-list .section-item .title-container {
                margin: 0px;
                padding: 10px;
                margin-left: 0px;
                width: 100%
            }

            .revamped_lecture_player .course-section ul.section-list .section-item .status-icon {
                width: 20px;
                height: 20px;
                float: left;
                border-radius: 14px
            }

            .revamped_lecture_player .course-section ul.section-list .section-item .lecture-start {
                opacity: 0.5
            }

            .revamped_lecture_player .course-section ul.section-list .section-item.completed .item:hover {
                background-color: #fff
            }

                .revamped_lecture_player .course-section ul.section-list .section-item.completed .item:hover .status-icon {
                    background-color: #e79a00;
                    box-shadow: inset 0px 0px 0px 2px #e79a00 !important
                }

            .revamped_lecture_player .course-section ul.section-list .section-item.completed .status-icon {
                background: url("../../../assets.teachablecdn.com/icons/course-complete.png") 1px 0px #e79a00;
                background-size: 96%
            }

            .revamped_lecture_player .course-section ul.section-list .section-item.completed .btn-primary {
                display: none
            }

            .revamped_lecture_player .course-section ul.section-list .section-item.incomplete .item:hover {
                background-color: #fff
            }

            .revamped_lecture_player .course-section ul.section-list .section-item.incomplete .status-icon {
                background: none;
                box-shadow: inset 0px 0px 0px 2px #e79a00
            }

            .revamped_lecture_player .course-section ul.section-list .section-item.next-lecture .item {
                color: #101010;
                background-color: #fff
            }

                .revamped_lecture_player .course-section ul.section-list .section-item.next-lecture .item:hover .status-icon {
                    background-color: #e79a00;
                    box-shadow: inset 0px 0px 0px 2px #e79a00 !important
                }

            .revamped_lecture_player .course-section ul.section-list .section-item.next-lecture .status-icon {
                background: url("../../../assets.teachablecdn.com/icons/course-incomplete.png") 1px 0px #e79a00;
                box-shadow: inset 0px 0px 0px 2px #e79a00
            }

.revamped_lecture_player #more_lecture_sections {
    display: none !important
}

    .revamped_lecture_player #more_lecture_sections.collapsed {
        display: inline-block !important;
        padding: 5px 12px !important
    }

.course-top-row {
    background-color: #f7f7f7;
    padding-bottom: 50px;
    padding-top: 50px
}

    .course-top-row .course-splash-media {
        margin-right: 10px;
        margin-bottom: 20px
    }

        .course-top-row .course-splash-media.video {
            margin-right: 50px
        }

        .course-top-row .course-splash-media img {
            width: 100%
        }

@media screen and (max-width: 991px) {
    .course-top-row .course-splash-media {
        margin-right: 0px;
        text-align: center
    }

        .course-top-row .course-splash-media.video {
            margin-right: 30px !important
        }
}

.course-top-row .course-header-container {
    padding-top: 10px
}

    .course-top-row .course-header-container .course-title {
        font-weight: bold;
        line-height: 45px;
        margin-top: 0px;
        margin-bottom: 0px;
        color: #101010
    }

    .course-top-row .course-header-container .course-subtitle {
        color: #2a2a2a;
        margin-top: 10px;
        margin-bottom: 50px;
        font-weight: 200;
        overflow: hidden;
        font-size: 18px;
        line-height: 28px !important
    }

@media screen and (min-width: 1199px) {
    .course-top-row .course-header-container .course-title {
        font-size: 38px
    }
}

@media screen and (max-width: 1199px) {
    .course-top-row .course-header-container .course-title {
        font-size: 30px !important
    }

    .course-top-row .course-header-container .course-subtitle {
        font-size: 17px !important;
        margin-bottom: 30px !important;
        min-height: 150px
    }

    .course-top-row .course-header-container .btn-hg {
        font-size: 20px !important
    }
}

@media screen and (max-width: 991px) {
    .course-top-row .course-header-container {
        text-align: center
    }
}

.course-top-row.has-hero-image {
    background-size: cover !important;
    background-position: center !important;
    margin-top: -60px;
    padding-top: 150px;
    padding-bottom: 50px;
    position: relative
}

    .course-top-row.has-hero-image .course-splash-media {
        display: none
    }

    .course-top-row.has-hero-image .course-header-container {
        padding-top: 10px;
        width: 100%;
        text-align: center;
        margin-bottom: 50px
    }

        .course-top-row.has-hero-image .course-header-container .course-title {
            font-weight: bold;
            font-size: 49px !important;
            color: #fff
        }

        .course-top-row.has-hero-image .course-header-container .course-subtitle {
            font-size: 34px !important;
            line-height: 49px !important;
            margin-top: 30px;
            margin-bottom: 50px !important;
            padding-top: 30px;
            max-width: 750px;
            margin: auto;
            color: #fff
        }

        .course-top-row.has-hero-image .course-header-container .btn-hg {
            margin-bottom: 20px !important
        }

        .course-top-row.has-hero-image .course-header-container form {
            float: none;
            margin: auto;
            display: inline-block
        }

    .course-top-row.has-hero-image.checkout-top {
        padding-top: 80px;
        padding-bottom: 20px
    }

.course-top-row .preenrollment-form-wrapper {
    margin-top: -30px
}

.black-overlay {
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0
}

h3.signup-form-title {
    margin-bottom: 19px;
    color: #fff !important;
    font-weight: bold;
    opacity: 0.8;
    margin-top: 0px
}

    h3.signup-form-title.success {
        margin-top: 19px;
        color: #55d047 !important
    }

.preenrollment-form-wrapper {
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    padding-bottom: 14px;
    margin-top: 5px;
    padding-top: 14px
}

.flash-error {
    text-align: center;
    color: red;
    opacity: 0.7;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 14px
}

.signup-form input[type='text'] {
    height: 59px;
    font-size: 18px;
    padding-left: 20px;
    margin-bottom: 0px
}

.signup-form .col-sm-4, .signup-form .col-xs-4 {
    padding-left: 2px;
    padding-right: 2px
}

.signup-form .btn-primary {
    width: 100%;
    box-shadow: none;
    padding: 13px 20px !important;
    border-radius: 5px !important
}

@media screen and (max-width: 767px) {
    .course-top-row.has-hero-image .course-header-container .course-title {
        font-size: 49px !important;
        line-height: 55px
    }

    .course-top-row.has-hero-image .course-header-container .course-subtitle {
        font-size: 29px !important;
        line-height: 38px !important
    }
}

.description-row, .description_with_share_icons {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff;
    font-size: 18px;
    font-weight: 200;
    line-height: 28px
}

    .description-row h2, .description-row h3, .description-row h4, .description-row h5, .description_with_share_icons h2, .description_with_share_icons h3, .description_with_share_icons h4, .description_with_share_icons h5 {
        font-size: 22px;
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 25px
    }

    .description-row h3, .description_with_share_icons h3 {
        font-size: 18px
    }

    .description-row h4, .description_with_share_icons h4 {
        font-size: 16px
    }

    .description-row h5, .description_with_share_icons h5 {
        font-size: 14px
    }

    .description-row ul, .description_with_share_icons ul {
        margin-bottom: 25px
    }

    .description-row p, .description_with_share_icons p {
        font-size: 18px;
        font-weight: 200;
        line-height: 28px;
        margin-bottom: 25px
    }

.facebook-button {
    font-size: 50px;
    color: #3b5998
}

.twitter-button {
    font-size: 50px;
    color: #00aced
}

.linkedin-button {
    font-size: 50px;
    color: #007bb6
}

.instructor-row {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #ecf0f1
}

    .instructor-row .instructor-name {
        font-size: 18px;
        margin-top: 10px
    }

    .instructor-row .instructor-title {
        font-size: 31px;
        font-weight: bold
    }

    .instructor-row .author-name {
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold
    }

    .instructor-row p {
        font-size: 17px;
        margin-top: 15px
    }

.curriculum-row {
    padding-top: 50px;
    background-color: #fff
}

.bundled-courses-row {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff
}

    .bundled-courses-row h2 {
        margin-top: 0px
    }

.faq-row {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #ecf0f1
}

    .faq-row p {
        font-size: 17px;
        margin-top: 15px
    }

.faq-question {
    margin: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
    padding: 0px
}

.faq-answer {
    padding-top: 0px;
    font-weight: 200;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 30px
}

.closing-letter-row {
    padding-top: 50px;
    padding-bottom: 0px;
    background-color: #fff
}

    .closing-letter-row h2 {
        text-align: center;
        font-weight: bold
    }

        .closing-letter-row h2.no-products {
            margin-bottom: 70px
        }

.checkout-row {
    background-color: #fff;
    padding-bottom: 10px
}

    .checkout-row h3.signup-form-title {
        text-align: center;
        font-weight: bold;
        color: #101010 !important;
        font-size: 35px;
        margin-bottom: 38px
    }

    .checkout-row .flash-error {
        margin-bottom: 30px;
        color: darkred
    }

.coupon-code-applied {
    display: none;
    background: rgba(227,255,227,0.6);
    font-size: 23px;
    color: #308186;
    text-align: center;
    font-weight: bold;
    padding: 18px;
    border-top: 1px solid rgba(57,154,95,0.06);
    border-bottom: 1px solid rgba(57,154,95,0.06)
}

    .coupon-code-applied small {
        font-size: 60%
    }

.strike-through-price {
    text-decoration: line-through;
    font-weight: normal
}

.edit-settings-page .row {
    margin: 0
}

.edit-settings-page .link {
    background: none;
    border: none;
    cursor: pointer
}

.edit-settings-page .img-circle {
    width: 100px;
    height: 100px
}

.edit-settings-page .ash {
    color: var(--ash)
}

.edit-settings-page .password-container {
    position: relative
}

.edit-settings-page .icon-profile {
    position: absolute;
    top: 6px;
    right: 10px;
    opacity: 0.2
}

.edit-settings-page .edit-btn {
    position: absolute;
    top: 20px;
    right: 10px
}

.edit-settings-page .modal-content {
    border-radius: 0px;
    max-width: 800px
}

@media screen and (max-width: 1200px) {
    .edit-settings-page .modal-content {
        width: 100%;
        padding: 20px
    }
}

.edit-settings-page .new-form-group .form-label {
    color: var(--ash)
}

    .edit-settings-page .new-form-group .form-label:not(:disabled):focus:not(.error) {
        border-color: var(--obsidian)
    }

.edit-settings-page .new-form-group input:disabled {
    background-color: var(--clinical)
}

.edit-settings-page .switchInput {
    display: block;
    border-radius: 30px;
    height: 24px;
    width: 47px
}

.edit-settings-page .turnedOn {
    background-color: #e79a00
}

    .edit-settings-page .turnedOn svg {
        background: var(--white);
        color: #e79a00;
        border-radius: 50px;
        padding: 3.5px;
        width: 20px;
        height: 20px;
        margin-right: 2px;
        margin-top: 2px
    }

.edit-settings-page .turnedOff {
    background-color: var(--nantucket)
}

    .edit-settings-page .turnedOff svg {
        background: var(--white);
        color: var(--nantucket);
        border-radius: 50px;
        padding: 3.5px;
        width: 20px;
        height: 20px;
        margin-left: 2px;
        margin-top: 2px
    }

.edit-settings-page .button {
    color: var(--clinical);
    background-color: var(--cornflower-blue);
    font-weight: 700;
    font-size: 16px;
    min-width: 155px;
    height: 56px;
    border-radius: 38px !important;
    border: none;
    white-space: nowrap;
    touch-action: manipulation;
    transition: opacity 0.3s;
    cursor: pointer
}

    .edit-settings-page .button:disabled {
        opacity: 0.4;
        pointer-events: none
    }

    .edit-settings-page .button:hover:not(:disabled) {
        background-color: var(--chefchaouen)
    }

.edit-settings-page .button-scnd {
    color: var(--cornflower-blue);
    background-color: var(--white);
    font-weight: 700;
    font-size: 16px;
    min-width: 155px;
    height: 56px;
    transition: opacity 0.3s;
    cursor: pointer
}

    .edit-settings-page .button-scnd:disabled {
        opacity: 0.4;
        pointer-events: none
    }

    .edit-settings-page .button-scnd:hover:not(:disabled) {
        border-radius: 38px !important;
        border: 1px solid var(--gravel)
    }

.edit-settings-page .form-group {
    border-bottom: 1px solid #ececec
}

    .edit-settings-page .form-group:hover {
        background: #f9f9f9
    }

    .edit-settings-page .form-group.no-border {
        border-bottom: none
    }

    .edit-settings-page .form-group .boolean-checkbox label {
        cursor: pointer;
        padding: 17px 21px 6px 21px
    }

    .edit-settings-page .form-group .boolean-checkbox input[type='checkbox'] {
        margin-left: -20px;
        margin-right: 5px
    }

    .edit-settings-page .form-group label {
        font-weight: 300;
        line-height: 22px;
        padding: 17px 21px 16px 21px;
        font-size: 14px
    }

    .edit-settings-page .form-group .control-input {
        padding-top: 15px
    }

        .edit-settings-page .form-group .control-input .form-control {
            margin-bottom: 16px
        }

@media screen and (max-width: 991px) {
    .edit-settings-page .form-group label {
        line-height: 19px !important;
        margin-top: 10px !important
    }
}

.edit-settings-page .payment-form .card-logos {
    top: 35px;
    position: absolute;
    right: 26px
}

.edit-settings-page .payment-form label {
    padding: 0px !important
}

.edit-settings-page .payment-form .form-group {
    padding: 17px 10px
}

.edit-settings-contact {
    padding: 20px
}

    .edit-settings-contact label {
        font-weight: 500;
        font-size: 16px;
        margin: 16px 0
    }

    .edit-settings-contact .section-title h1 {
        margin-bottom: 48px
    }

    .edit-settings-contact .contact-submit {
        width: 192px;
        max-width: 80%
    }

    .edit-settings-contact form input {
        height: 50px
    }

    .edit-settings-contact form textarea {
        margin-bottom: 24px
    }

        .edit-settings-contact form textarea::-webkit-input-placeholder {
            color: #cccccc
        }

        .edit-settings-contact form textarea::-moz-placeholder {
            color: #cccccc
        }

        .edit-settings-contact form textarea:-ms-input-placeholder {
            color: #cccccc
        }

        .edit-settings-contact form textarea::-ms-input-placeholder {
            color: #cccccc
        }

        .edit-settings-contact form textarea::placeholder {
            color: #cccccc
        }

.form-label-info {
    background-color: var(--clinical);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    caret-color: var(--squid-ink);
    border: 0px !important;
    border-width: 0px !important
}

    .form-label-info::-webkit-input-placeholder {
        color: var(--concrete)
    }

    .form-label-info::-moz-placeholder {
        color: var(--concrete)
    }

    .form-label-info:-ms-input-placeholder {
        color: var(--concrete)
    }

    .form-label-info::-ms-input-placeholder {
        color: var(--concrete)
    }

    .form-label-info::placeholder {
        color: var(--concrete)
    }

    .form-label-info:not(:disabled):focus {
        outline: 0
    }

        .form-label-info:not(:disabled):focus:not(.error) {
            border-color: var(--obsidian)
        }

        .form-label-info:not(:disabled):focus:not(.error) {
            border-color: var(--obsidian)
        }

    .form-label-info:hover {
        border-color: var(--concrete)
    }

    .form-label-info:disabled:hover {
        border-color: var(--grey-area)
    }

    .form-label-info.error {
        border-color: var(--red-herring)
    }

.homepage-hero {
    background-size: cover;
    padding-top: 130px;
    padding-bottom: 170px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(247,247,247,0.95)
}

    .homepage-hero h2.headline {
        font-weight: bold;
        font-size: 49px
    }

    .homepage-hero h3.subtitle {
        font-weight: 200;
        font-size: 23px;
        margin-top: 25px
    }

@media screen and (max-width: 1199px) {
    .homepage-hero h2.heading {
        font-size: 38px !important
    }

    .homepage-hero h3.subtitle {
        font-size: 20px !important;
        margin-top: 18px !important;
        line-height: 27px !important
    }
}

h2.homepage-section-title {
    text-align: center;
    font-weight: 200;
    font-size: 31px;
    padding-bottom: 35px;
    padding-top: 35px
}

    h2.homepage-section-title.contact-us {
        margin-bottom: 0;
        background: #f7f7f7;
        font-size: 20px;
        line-height: 30px
    }

.navbar-fedora.is-at-top.is-not-signed-in.hide-nav-background-color {
    background: none !important;
    border-bottom: 0
}

    .navbar-fedora.is-at-top.is-not-signed-in.hide-nav-background-color .navbar-brand, .navbar-fedora.is-at-top.is-not-signed-in.hide-nav-background-color a.fedora-navbar-link {
        color: #fff !important
    }

    .navbar-fedora.is-at-top.is-not-signed-in.hide-nav-background-color a.fedora-navbar-link {
        background: none !important
    }

        .navbar-fedora.is-at-top.is-not-signed-in.hide-nav-background-color a.fedora-navbar-link:hover {
            background: none !important;
            color: #ccc !important
        }

.homepage-hero {
    margin-top: -60px;
    padding-top: 200px;
    display: block;
    position: relative;
    background: rgba(0,0,0,0.1) !important
}

    .homepage-hero::after {
        content: '';
        background: url("https://file-uploads.teachablecdn.com/6518e13102374e7da0d64d3b8a671da1/b686b2613b794b80ae9c81b82b1b2716") !important;
        background-size: cover !important;
        background-position: center center !important;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1
    }

    .homepage-hero h2.headline {
        color: #fff
    }

    .homepage-hero h3.subtitle {
        color: #fff
    }

.lecture-lock-seal {
    background-image: url("http://assets.teachablecdn.com/icons/star-seal.svg");
    display: inline-block;
    height: 74px;
    position: relative;
    width: 74px
}

    .lecture-lock-seal .lecture-lock-seal-lock-icon {
        height: 25px;
        margin: 32px 0 0 26px;
        position: absolute;
        transform: rotate(0.0001deg);
        width: 25px
    }

        .lecture-lock-seal .lecture-lock-seal-lock-icon::before {
            border: solid 2.8px #b5babf;
            border-radius: 41px;
            content: '';
            height: 18px;
            margin: -8px 0 0 -7.5px;
            position: absolute;
            width: 11px
        }

        .lecture-lock-seal .lecture-lock-seal-lock-icon .main {
            background-color: #8f989f;
            border-radius: 2.8px;
            height: 15px;
            position: absolute;
            width: 21px
        }

        .lecture-lock-seal .lecture-lock-seal-lock-icon::after {
            background-color: #d3d7dc;
            border-radius: 75.6px;
            content: '';
            height: 4.2px;
            margin: 6px 0 0 -3px;
            position: absolute;
            width: 2.9px
        }

.devise-layout {
    padding: 75px 0
}

    .devise-layout.enrollment {
        padding: 20px 0 50px 0
    }

    .devise-layout .content {
        padding: 30px;
        background-color: #fff;
        position: static
    }

        .devise-layout .content .form-wrapper {
            position: static
        }

        .devise-layout .content h1 {
            text-align: center;
            margin: 0;
            padding-bottom: 35px;
            font-weight: 600;
            font-size: 26px
        }

        .devise-layout .content h2 {
            font-size: 14px;
            color: #ab0d0d;
            margin-top: 0px;
            font-weight: 600
        }

        .devise-layout .content ul {
            margin-bottom: 0px;
            padding-left: 25px
        }

            .devise-layout .content ul li {
                margin-bottom: 8px;
                opacity: 0.8
            }

        .devise-layout .content #error_explanation {
            background: #fffbf0;
            box-shadow: 0px 0px 5px #c5c5c5;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 30px
        }

        .devise-layout .content .field_with_errors input.form-control {
            border: 1px solid #e4a8a8
        }

        .devise-layout .content input.form-control {
            padding: 5px 15px;
            height: 55px;
            font-size: 18px;
            font-weight: 200;
            margin-bottom: 14px;
            transition: all 0.3s ease;
            border-radius: 6px
        }

        .devise-layout .content label.control-label {
            font-size: 15px;
            font-weight: 200;
            color: #101010;
            width: 100%
        }

        .devise-layout .content select {
            width: 100% !important
        }

        .devise-layout .content .form-group {
            margin-bottom: 10px;
            width: auto
        }

            .devise-layout .content .form-group.agree-to-terms {
                text-align: center
            }

        .devise-layout .content .well p {
            font-size: 15px
        }

        .devise-layout .content .checkbox.checked a {
            color: #e79a00
        }

        .devise-layout .content .btn[type='submit'] {
            margin-top: 5px
        }

        .devise-layout .content .alert {
            text-align: center
        }

        .devise-layout .content .alert-registration-page {
            text-align: left
        }

        .devise-layout .content p.text-center {
            font-size: 15px
        }

            .devise-layout .content p.text-center a {
                font-weight: 600;
                text-decoration: underline
            }

.view-school {
    margin-top: 0
}

    .view-school .resend-code-container {
        min-height: 40px;
        text-align: center
    }

    .view-school .resend-code-button {
        font-weight: 500
    }

    .view-school .toast {
        font-size: 0.889rem;
        font-weight: 600;
        line-height: 1.333rem
    }

.resend-confirmation-email-button {
    background: none;
    border: none;
    text-decoration: underline;
    font-weight: 600;
    color: var(--obsidian)
}

.thank-you-header {
    margin-bottom: 20px;
    text-align: center
}

    .thank-you-header h1 {
        font-size: 24px;
        font-weight: 600;
        padding-top: 4px
    }

    .thank-you-header p {
        font-size: 15px;
        margin-top: 20px;
        font-weight: 200;
        line-height: 28px
    }

    .thank-you-header i.fa.fa-check {
        background: #26ad7f;
        border-radius: 50%;
        padding: 8px;
        font-size: 12px;
        color: #fff;
        vertical-align: 5px;
        margin-right: 5px
    }

.thank-you-content {
    margin-top: 30px;
    margin-bottom: 60px
}

    .thank-you-content .course-listing {
        height: 290px;
        margin-bottom: 12px
    }

        .thank-you-content .course-listing .course-box-image-container {
            margin-left: -15px;
            margin-right: -15px
        }

        .thank-you-content .course-listing .course-listing-subtitle, .thank-you-content .course-listing .course-listing-extra-info {
            display: none
        }

        .thank-you-content .course-listing .progressbar {
            display: none
        }

    .thank-you-content .share-icons {
        margin-top: 30px;
        font-size: 17px;
        color: #a3a3a3;
        font-weight: 200
    }

        .thank-you-content .share-icons a.share-button {
            vertical-align: -5px;
            margin-left: 2px
        }

            .thank-you-content .share-icons a.share-button i.fa {
                font-size: 30px
            }

.thank-you-confirmation-wrapper {
    background: #fff
}

.blocks-page-secure_course_sidebar .list-heading {
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 6px;
    margin-top: 0px;
    text-align: left
}

.blocks-page-secure_course_sidebar hr {
    border-top: 0.5px solid #e0e0e0;
    margin-top: 30px;
    margin-bottom: 30px
}

.blocks-page-secure_course_sidebar p, .blocks-page-secure_course_sidebar ul li {
    font-size: 14px;
    line-height: 26px;
    font-weight: 400;
    color: #434343
}

.blocks-page-secure_course_sidebar .block {
    background: none transparent;
    padding-top: 0px;
    padding-bottom: 0px
}

    .blocks-page-secure_course_sidebar .block.course_checkout_trust_badge {
        text-align: center
    }

        .blocks-page-secure_course_sidebar .block.course_checkout_trust_badge p {
            text-align: left;
            margin-bottom: 0px
        }

    .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial {
        margin-top: 15px;
        margin-bottom: 20px;
        display: flex;
        padding-right: 15px
    }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial:last-child {
            margin-bottom: 0px
        }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial img.testimonial-photo {
            margin-top: 0px;
            width: 60px;
            height: 60px;
            border-radius: 50%
        }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial .testimonial-body {
            width: 100%
        }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial .testimonial-quote {
            margin-top: 0px;
            width: 20px;
            height: 15px;
            margin-left: 15px;
            display: block;
            background-size: 20px
        }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial .testimonial-quote-start {
            float: left;
            background-image: url("http://assets.teachablecdn.com/icons/checkout-quote-start.svg")
        }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial p {
            margin-bottom: 10px;
            padding-left: 40px
        }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial .testimonial-person {
            font-size: 13px;
            line-height: 24px;
            font-weight: 600
        }

        .blocks-page-secure_course_sidebar .block.course_checkout_testimonials .checkout-testimonial:last-child {
            margin-bottom: 0px
        }

    .blocks-page-secure_course_sidebar .block.course_checkout_bullet_points ul.checkmark-list {
        list-style: none;
        margin-left: 0px;
        margin-top: 15px;
        margin-bottom: 40px
    }

        .blocks-page-secure_course_sidebar .block.course_checkout_bullet_points ul.checkmark-list li {
            color: #09a59a;
            vertical-align: 14px;
            font-weight: 600;
            margin-bottom: 15px;
            line-height: 25px;
            margin-left: 0px
        }

            .blocks-page-secure_course_sidebar .block.course_checkout_bullet_points ul.checkmark-list li:before {
                background-image: url("http://assets.teachablecdn.com/icons/checkout-checkmark.svg");
                background-size: 24px;
                content: '';
                display: inline-block;
                width: 28px;
                height: 34px;
                background-repeat: no-repeat;
                left: 5px;
                margin-top: 2px;
                position: absolute
            }

            .blocks-page-secure_course_sidebar .block.course_checkout_bullet_points ul.checkmark-list li:last-child {
                margin-bottom: 0px
            }

.cc-form.is-loading {
    cursor: wait;
    opacity: 0.65
}

.cc-form.is-inactive {
    cursor: not-allowed;
    pointer-events: none
}

.cc-success {
    color: #346b36;
    font-style: italic;
    font-weight: bold;
    padding: 20px 0
}

.blocks-page-post_purchase_page {
    padding-top: 50px;
    padding-bottom: 50px
}

    .blocks-page-post_purchase_page h1 {
        font-size: 38px;
        font-weight: 600
    }

    .blocks-page-post_purchase_page h2 {
        margin-bottom: 20px
    }

    .blocks-page-post_purchase_page h1, .blocks-page-post_purchase_page h2 {
        margin-top: 0px
    }

    .blocks-page-post_purchase_page hr {
        border-top: 0.5px solid #e0e0e0;
        margin-top: 50px;
        margin-bottom: 0px
    }

    .blocks-page-post_purchase_page p, .blocks-page-post_purchase_page ul li {
        font-size: 16px;
        line-height: 26px;
        font-weight: 300;
        color: #434343
    }

    .blocks-page-post_purchase_page .row {
        margin: 0
    }

    .blocks-page-post_purchase_page .purchase_confirmation {
        padding-bottom: 0px
    }

    .blocks-page-post_purchase_page .upsell_button {
        padding-top: 0px
    }

    .blocks-page-post_purchase_page .proceed_to_course_button .btn-block {
        width: 280px
    }

.modal-instant-checkout iframe.instant-checkout-iframe {
    width: 100%;
    border: 0px;
    margin-top: 60px;
    margin-bottom: 40px
}

.instant-checkout-iframe-body {
    margin-top: -60px
}

    .instant-checkout-iframe-body h1 {
        font-size: 19px;
        font-weight: 600;
        margin-top: 0px;
        margin-bottom: 20px;
        color: #101010
    }

    .instant-checkout-iframe-body .change-payment-method {
        font-size: 12px;
        margin-left: 10px;
        color: #8592a6;
        text-decoration: underline;
        border: 0;
        background: #fff
    }

    .instant-checkout-iframe-body .review-order-box {
        padding-top: 10px
    }

    .instant-checkout-iframe-body .payment-method {
        font-size: 13px;
        color: #8592a6
    }

        .instant-checkout-iframe-body .payment-method .payment-method-image {
            height: 26px;
            margin-right: 10px
        }

.thank-you-header {
    margin-bottom: 20px;
    text-align: center
}

    .thank-you-header h1 {
        font-size: 24px;
        font-weight: 600;
        padding-top: 4px
    }

    .thank-you-header p {
        font-size: 15px;
        margin-top: 20px;
        font-weight: 200;
        line-height: 28px
    }

    .thank-you-header i.fa.fa-check {
        background: #26ad7f;
        border-radius: 50%;
        padding: 8px;
        font-size: 12px;
        color: #fff;
        vertical-align: 5px;
        margin-right: 5px
    }

.thank-you-content {
    margin-top: 30px;
    margin-bottom: 60px
}

    .thank-you-content .course-listing {
        height: 290px;
        margin-bottom: 12px
    }

        .thank-you-content .course-listing .course-box-image-container {
            margin-left: -15px;
            margin-right: -15px
        }

        .thank-you-content .course-listing .course-listing-subtitle, .thank-you-content .course-listing .course-listing-extra-info {
            display: none
        }

        .thank-you-content .course-listing .progressbar {
            display: none
        }

    .thank-you-content .share-icons {
        margin-top: 30px;
        font-size: 17px;
        color: #a3a3a3;
        font-weight: 200
    }

        .thank-you-content .share-icons a.share-button {
            vertical-align: -5px;
            margin-left: 2px
        }

            .thank-you-content .share-icons a.share-button i.fa {
                font-size: 30px
            }

.thank-you-confirmation-wrapper {
    background: #fff
}

.my-teachable-layout {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    min-width: 330px;
    background: var(--fog)
}

    .my-teachable-layout .sidebar {
        width: 276px
    }

        .my-teachable-layout .sidebar .profile-card {
            height: 353px;
            text-align: center;
            padding: 30px
        }

            .my-teachable-layout .sidebar .profile-card .logo-wrapper {
                position: absolute;
                left: 0;
                top: 22px;
                padding-left: 30px
            }

                .my-teachable-layout .sidebar .profile-card .logo-wrapper .logo {
                    display: inline-block;
                    width: 110px
                }

            .my-teachable-layout .sidebar .profile-card .mobile-settings {
                position: absolute;
                right: 20px;
                top: 27px;
                display: none
            }

                .my-teachable-layout .sidebar .profile-card .mobile-settings img {
                    width: 21px
                }

            .my-teachable-layout .sidebar .profile-card .mobile-logout {
                font-size: 11px;
                color: rgba(255,255,255,0.68);
                text-decoration: underline;
                margin-top: 0;
                display: none
            }

            .my-teachable-layout .sidebar .profile-card .navbar-toggle {
                position: absolute;
                left: 30px;
                top: 12px;
                display: none
            }

                .my-teachable-layout .sidebar .profile-card .navbar-toggle .icon-bar {
                    background: #fff
                }

            .my-teachable-layout .sidebar .profile-card .mobile-navbar {
                background: #fff;
                height: 279px;
                left: 0px;
                padding-left: 30px;
                position: absolute;
                text-align: left;
                top: 74px;
                transition: 0.2s all ease-in;
                width: 100%;
                z-index: 1000
            }

                .my-teachable-layout .sidebar .profile-card .mobile-navbar .navbar-nav {
                    margin-top: 14px
                }

                    .my-teachable-layout .sidebar .profile-card .mobile-navbar .navbar-nav a {
                        font-weight: 600;
                        color: #8f9da5
                    }

                        .my-teachable-layout .sidebar .profile-card .mobile-navbar .navbar-nav a:hover {
                            color: #09a59a;
                            background: none
                        }

            .my-teachable-layout .sidebar .profile-card .user-info {
                margin-top: 40px
            }

                .my-teachable-layout .sidebar .profile-card .user-info h2 {
                    font-size: 16px;
                    font-weight: 500
                }

                .my-teachable-layout .sidebar .profile-card .user-info p {
                    font-size: 13px;
                    line-height: 1
                }

            .my-teachable-layout .sidebar .profile-card .avatar {
                padding: 5px;
                border: 1px solid #ccc;
                margin-top: 30px;
                border-radius: 50%;
                display: inline-block
            }

        .my-teachable-layout .sidebar .nav-sidebar {
            padding: 20px 30px
        }

            .my-teachable-layout .sidebar .nav-sidebar > li {
                background-repeat: no-repeat;
                background-position: 5px 16px;
                background-size: 50px;
                cursor: pointer
            }

                .my-teachable-layout .sidebar .nav-sidebar > li a {
                    padding-right: 0;
                    margin-left: 30px;
                    text-transform: uppercase;
                    font-weight: 500;
                    font-size: 13px;
                    color: #8592a6;
                    line-height: 35px;
                    background: #fff
                }

                    .my-teachable-layout .sidebar .nav-sidebar > li a:focus {
                        background: #fff !important
                    }

                .my-teachable-layout .sidebar .nav-sidebar > li:hover, .my-teachable-layout .sidebar .nav-sidebar > li:focus, .my-teachable-layout .sidebar .nav-sidebar > li.selected {
                    background-position: -24px 16px
                }

                    .my-teachable-layout .sidebar .nav-sidebar > li:hover a, .my-teachable-layout .sidebar .nav-sidebar > li:focus a, .my-teachable-layout .sidebar .nav-sidebar > li.selected a {
                        color: #ff7f45
                    }

                    .my-teachable-layout .sidebar .nav-sidebar > li.selected a {
                        font-weight: 600
                    }

                .my-teachable-layout .sidebar .nav-sidebar > li.nav-item-profile {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-school.svg")
                }

                .my-teachable-layout .sidebar .nav-sidebar > li.nav-item-create {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-plus.svg")
                }

                .my-teachable-layout .sidebar .nav-sidebar > li.nav-item-settings {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-settings.svg")
                }

                .my-teachable-layout .sidebar .nav-sidebar > li.nav-item-help {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-help.svg")
                }

                .my-teachable-layout .sidebar .nav-sidebar > li.nav-item-billing {
                    background-image: url("http://assets.teachablecdn.com/icons/my-teachable/icons/icon-billing.svg")
                }

                .my-teachable-layout .sidebar .nav-sidebar > li.nav-item-logout {
                    background-image: url("http://assets.teachablecdn.com/icons/icon-logout.svg")
                }

@media (max-width: 767px) {
    .my-teachable-layout .sidebar {
        width: 100%
    }

        .my-teachable-layout .sidebar .nav-sidebar {
            margin-right: 0px
        }
}

@media (min-width: 767px) {
    .my-teachable-layout .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        z-index: 1000;
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
        border-right: 1px solid #eee
    }

        .my-teachable-layout .sidebar .navbar-collapse.collapse.mobile-navbar {
            display: none !important
        }

        .my-teachable-layout .sidebar .sticky-center-container {
            transform: translate(calc(-50% + 137px), -50%)
        }
}

@media screen and (max-width: 767px) {
    .my-teachable-layout .sidebar .logo-wrapper {
        display: none
    }

    .my-teachable-layout .sidebar .profile-card {
        background-position: 0px 95%;
        background-image: url("http://assets.teachablecdn.com/teachable-bg.svg")
    }

        .my-teachable-layout .sidebar .profile-card h2, .my-teachable-layout .sidebar .profile-card p {
            color: #fff
        }

        .my-teachable-layout .sidebar .profile-card .navbar-toggle {
            display: block
        }

        .my-teachable-layout .sidebar .profile-card .mobile-settings, .my-teachable-layout .sidebar .mobile-logout {
            display: block
        }

    .my-teachable-layout .sidebar .nav-sidebar {
        display: none
    }
}

.my-teachable-layout .my-teachable-dashboard {
    padding: 20px;
    height: 100%;
    position: relative;
    width: 100%
}

    .my-teachable-layout .my-teachable-dashboard .sticky-center-container {
        margin-left: 137px
    }

    .my-teachable-layout .my-teachable-dashboard h1 {
        padding-left: 5px;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 33px;
        color: #33353a
    }

    .my-teachable-layout .my-teachable-dashboard #form-confirmation.alert-warning {
        background-color: var(--vanilla-wafer);
        border: 1px solid var(--buttermilk);
        border-radius: 4px
    }

    .my-teachable-layout .my-teachable-dashboard #form-confirmation .confirmation-text {
        color: var(--obsidian);
        font-weight: normal
    }

        .my-teachable-layout .my-teachable-dashboard #form-confirmation .confirmation-text span, .my-teachable-layout .my-teachable-dashboard #form-confirmation .confirmation-text a {
            font-weight: bold
        }

        .my-teachable-layout .my-teachable-dashboard #form-confirmation .confirmation-text a {
            color: var(--obsidian)
        }

@media screen and (max-width: 767px) {
    .my-teachable-layout .my-teachable-dashboard .sticky-center-container {
        margin-left: 0px
    }
}

@media screen and (min-width: 768px) and (max-width: 930px) {
    .my-teachable-layout .my-teachable-dashboard .sticky-center-container {
        margin-top: 0px;
        width: calc(100% - 275px)
    }
}

@media screen and (min-width: 768px) {
    .my-teachable-layout .my-teachable-dashboard {
        position: absolute;
        padding-right: 50px;
        padding-top: 28px;
        padding-left: 325px
    }
}

.my-teachable-layout .sticky-center-container {
    position: absolute;
    top: 50%;
    width: 550px;
    left: 50%
}

    .my-teachable-layout .sticky-center-container .settings-form-wrapper a {
        text-decoration: underline;
        cursor: pointer
    }

    .my-teachable-layout .sticky-center-container .content-box {
        border: 0 !important;
        width: 100%;
        margin-bottom: 0
    }

        .my-teachable-layout .sticky-center-container .content-box p.center-explanation {
            font-size: 14px;
            max-width: 400px;
            font-weight: 500;
            line-height: 22px;
            margin-bottom: 10px;
            color: var(--nebulous)
        }

        .my-teachable-layout .sticky-center-container .content-box a.link-below-button {
            display: block;
            margin-top: 32px;
            color: var(--nebulous);
            font-size: 12px;
            font-weight: 500;
            text-decoration: underline
        }

        .my-teachable-layout .sticky-center-container .content-box .button-group {
            margin-top: 45px;
            display: block
        }

@media screen and (max-width: 767px) {
    .my-teachable-layout .sticky-center-container {
        width: 100%;
        border-radius: 0px;
        transform: none;
        top: 0px;
        left: 0px;
        margin-top: -20px;
        border-top: 1px solid var(--fog);
        margin-bottom: 0px
    }

        .my-teachable-layout .sticky-center-container.pinned {
            transform: none;
            margin-top: -1px;
            position: absolute;
            top: 0%;
            left: 0%
        }

        .my-teachable-layout .sticky-center-container .content-box {
            box-shadow: none;
            border-radius: 0px;
            min-height: 100%;
            margin-left: 0px
        }

    .my-teachable-layout .my-teachable-center {
        padding: 0px
    }

        .my-teachable-layout .my-teachable-center .sticky-center-container {
            border-radius: 0px
        }
}

@media screen and (min-width: 768px) and (max-width: 930px) {
    .my-teachable-layout .sticky-center-container.pinned {
        transform: translate(-50%, 0%);
        top: 0%
    }
}

@media screen and (min-width: 768px) {
    .my-teachable-layout .sticky-center-container {
        width: 550px;
        transform: translate(-50%, -50%)
    }

        .my-teachable-layout .sticky-center-container.pinned {
            transform: translate(-50%, 0%);
            top: 0%
        }
}

.my-teachable-layout .content-box select {
    background: url("../../../assets.teachablecdn.com/icons/select-up-down.png") right 12px center #fff no-repeat
}

.my-teachable-layout .wide-sticky-center-wrapper {
    padding-left: 0px;
    top: 0px;
    height: 100%
}

    .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar {
        position: absolute;
        height: 100%;
        left: 0px;
        z-index: 1000;
        background: #fff;
        border-right: 1px solid #efeff5;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        width: 383px
    }

    .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar__img {
        position: absolute;
        height: 288px;
        width: 194px;
        top: 0;
        left: 0;
        background-image: url("http://assets.teachablecdn.com/admin/assets/images/onboarding-survey-bg.svg");
        background-size: cover;
        background-repeat: no-repeat
    }

    .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar__text-wrapper {
        position: absolute;
        top: 32%;
        left: 0;
        right: 0;
        z-index: 100
    }

    .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar__text-wrapper__password {
        padding: 0 16px;
        line-height: 1.4
    }

    .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar h2 {
        color: #1e2327;
        text-align: center;
        margin: 0;
        font-size: 20px;
        font-weight: 600
    }

@media screen and (min-width: 0px) and (max-width: 930px) {
    .my-teachable-layout .wide-sticky-center-wrapper {
        position: relative;
        margin-top: 0px
    }

        .my-teachable-layout .wide-sticky-center-wrapper .sticky-center-container {
            margin-top: -1px;
            top: 0%
        }

        .my-teachable-layout .wide-sticky-center-wrapper.create-school-wrapper .brand-sidebar {
            height: 220px
        }

        .my-teachable-layout .wide-sticky-center-wrapper.create-school-wrapper .brand-sidebar__text-wrapper {
            top: 26%
        }

        .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar {
            width: 100%;
            position: relative;
            min-height: 100px;
            border-radius: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            border-right: none;
            border-bottom: 1px solid #efeff5
        }

        .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar__img {
            display: none
        }

        .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar__text-wrapper {
            top: 40%
        }

        .my-teachable-layout .wide-sticky-center-wrapper .brand-sidebar > h2 {
            margin-top: 0px;
            padding-top: 40px;
            padding-bottom: 40px;
            margin-bottom: 0px
        }
}

@media screen and (min-width: 931px) {
    .my-teachable-layout .wide-sticky-center-wrapper .sticky-center-container {
        width: 930px;
        padding-left: 378px
    }

        .my-teachable-layout .wide-sticky-center-wrapper .sticky-center-container .content-box {
            min-height: 300px
        }
}

.my-teachable-layout .contact-form-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh
}

    .my-teachable-layout .contact-form-wrapper .help-logo {
        max-width: 150px;
        max-height: 180px
    }

@media (max-width: 768px) {
    .my-teachable-layout .contact-form-wrapper .text-container {
        max-width: 85%
    }
}

.my-teachable-layout .contact-form-wrapper .text-container h2 {
    font-family: 'Reckless-Light';
    text-align: center;
    font-weight: 300;
    font-size: 32px;
    line-height: 125%;
    margin-top: 0
}

.my-teachable-layout .contact-form-wrapper .text-container p.description {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    max-width: 556px
}

.my-teachable-layout .contact-form-wrapper a {
    color: inherit;
    text-decoration: underline
}

.my-teachable-layout .contact-form-wrapper .contact-form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem
}

.my-teachable-layout .contact-form-wrapper .oauth-button {
    height: 48px;
    touch-action: manipulation;
    transition: opacity 0.3s;
    cursor: pointer;
    white-space: nowrap;
    padding: 12px 20px;
    margin: 0;
    background-color: var(--clinical);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.5px;
    border: 1px solid var(--obsidian);
    border-radius: 6px
}

    .my-teachable-layout .contact-form-wrapper .oauth-button:disabled {
        opacity: 0.4;
        pointer-events: none
    }

    .my-teachable-layout .contact-form-wrapper .oauth-button:hover:not(:disabled) {
        color: var(--iron-ore);
        border-color: var(--iron-ore);
        background-color: var(--clinical)
    }

    .my-teachable-layout .contact-form-wrapper .oauth-button img {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: -6px
    }

.my-teachable-layout .content-box-main {
    text-align: center
}

.my-teachable-layout .tickets-app-container {
    min-height: 100%
}

.my-teachable-layout .contact-header {
    position: absolute;
    top: 28px;
    width: 550px;
    right: 30px;
    text-align: right
}

@media screen and (max-width: 767px) {
    .my-teachable-layout .contact-header {
        position: static;
        width: 100%;
        text-align: center;
        padding-left: 15px
    }

        .my-teachable-layout .contact-header .contact-header-section {
            display: inline-block;
            float: none !important;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }
}

.my-teachable-layout .contact-header .contact-header-section {
    padding-left: 5%;
    text-align: left;
    float: right;
    position: relative
}

    .my-teachable-layout .contact-header .contact-header-section .contact-header-link {
        text-transform: uppercase;
        color: #8592a6;
        font-weight: 500
    }

        .my-teachable-layout .contact-header .contact-header-section .contact-header-link:hover {
            color: #69788f
        }

.my-teachable-layout .contact-header .badge {
    background: #d5518a;
    margin-left: 5px;
    padding: 4px 11px;
    vertical-align: 1px
}

.my-teachable-layout .contact-header #HW_badge_cont {
    background: #d5518a;
    margin-left: 5px;
    padding: 4px 11px;
    font-size: 12px;
    height: 20px;
    font-weight: 700;
    border-radius: 22px;
    vertical-align: 1px;
    display: inline !important;
    float: right
}

.my-teachable-layout .contact-header #HW_badge {
    margin-top: -6px
}

.my-teachable-layout .contact-popover {
    background: #fff;
    position: absolute;
    border-radius: 5px;
    width: 500px;
    right: -11px;
    top: 34px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 20px #e3e7ea;
    transition: transform 0.4s cubic-bezier(0.23, 1.5, 0.32, 1),opacity 0.5s cubic-bezier(0.23, 1.5, 0.32, 1);
    transform-origin: 99% 0%;
    z-index: 1
}

@media (max-width: 767px) {
    .my-teachable-layout .contact-popover {
        left: 0;
        margin: 5% !important;
        position: fixed;
        top: 0;
        width: 90% !important
    }

        .my-teachable-layout .contact-popover::before {
            background: #fff;
            border: none !important;
            border-radius: 50%;
            box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
            content: '×' !important;
            font-size: 22px;
            height: 20px !important;
            line-height: 19px;
            text-align: center;
            width: 20px !important;
            z-index: 1
        }
}

.my-teachable-layout .contact-popover.show-popover {
    opacity: 1;
    transform: scale(1)
}

.my-teachable-layout .contact-popover.hide-popover {
    opacity: 0;
    transform: scale(0)
}

.my-teachable-layout .contact-popover:before {
    width: 0px;
    height: 0px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #e0e0e0;
    content: '';
    position: absolute;
    right: 17px;
    margin-top: -8px;
    display: inline-block
}

.my-teachable-layout .contact-popover:after {
    width: 0px;
    height: 0px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    content: '';
    position: absolute;
    right: 17px;
    top: 1px;
    margin-top: -7px;
    display: inline-block
}

.my-teachable-layout .contact-popover .section-title {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
    color: #6a727d;
    padding-left: 20px;
    border-bottom: 1px solid #e4ebf5;
    margin-bottom: 0px;
    padding-bottom: 18px
}

.my-teachable-layout .contact-popover .popover-item-list {
    margin-top: 7px;
    margin-bottom: 7px
}

    .my-teachable-layout .contact-popover .popover-item-list .popover-item {
        display: block;
        padding-left: 20px;
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        margin-bottom: 0px;
        cursor: pointer
    }

        .my-teachable-layout .contact-popover .popover-item-list .popover-item:hover {
            background: #f5f5f5
        }

        .my-teachable-layout .contact-popover .popover-item-list .popover-item .popover-item-title {
            color: #09a59a;
            font-size: 13px;
            font-weight: 600
        }

            .my-teachable-layout .contact-popover .popover-item-list .popover-item .popover-item-title.see-all {
                color: #7a97a5;
                font-size: 11px
            }

        .my-teachable-layout .contact-popover .popover-item-list .popover-item .popover-item-description {
            font-size: 12px;
            margin-top: 1px;
            line-height: 19px;
            color: #909090
        }

.my-teachable-layout .contact-main {
    background-color: #f5f6f7
}

    .my-teachable-layout .contact-main.ng-enter {
        transition: 0.5s;
        opacity: 0
    }

    .my-teachable-layout .contact-main.ng-enter-active {
        opacity: 1
    }

    .my-teachable-layout .contact-main .back-caret {
        font-size: 12px;
        left: 320px;
        display: block;
        top: 30px;
        position: absolute;
        text-transform: uppercase;
        color: #758296;
        font-weight: 600
    }

        .my-teachable-layout .contact-main .back-caret i {
            font-size: 17px;
            vertical-align: -1px;
            margin-right: 3px
        }

        .my-teachable-layout .contact-main .back-caret:hover {
            color: #47505e
        }

@media screen and (max-width: 767px) {
    .my-teachable-layout .contact-main .back-caret {
        display: none
    }
}

.my-teachable-layout .contact-main h2 {
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    margin-top: 120px
}

.my-teachable-layout .contact-main p.description {
    text-align: center;
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    color: #52565a;
    max-width: 620px;
    margin: auto
}

.my-teachable-layout .contact-main p.subtitle {
    text-align: center
}

.my-teachable-layout .contact-main .banner {
    margin-top: 40px;
    margin-bottom: 30px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    background-size: 350px
}

    .my-teachable-layout .contact-main .banner.banner-people {
        background-image: url("http://assets.teachablecdn.com/bg/background-form-people.svg")
    }

    .my-teachable-layout .contact-main .banner.banner-support {
        background-image: url("http://assets.teachablecdn.com/illustrations/illustration-support.svg")
    }

    .my-teachable-layout .contact-main .banner.ng-enter {
        transition: 0.5s;
        opacity: 0
    }

    .my-teachable-layout .contact-main .banner.ng-enter-active {
        opacity: 1
    }

.my-teachable-layout .contact-main .ticket-type-disclaimer {
    text-align: center;
    font-size: 11px;
    line-height: 21px;
    font-weight: 600;
    margin-top: 20px !important;
    margin-bottom: 10px;
    max-width: 600px;
    color: #5fbfb7;
    background: #eefbf8;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #b4d7d5;
    margin: auto
}

    .my-teachable-layout .contact-main .ticket-type-disclaimer .hours {
        font-size: 13px;
        margin-top: 4px;
        padding-bottom: 7px;
        margin-bottom: 6px;
        border-bottom: 1px dashed #b4d6d4;
        color: #46857f
    }

    .my-teachable-layout .contact-main .ticket-type-disclaimer .hours-except {
        color: #9fb5b5
    }

.my-teachable-layout .contact-main .form-control.search-box {
    padding-left: 25px;
    font-size: 13px;
    border-color: #e0e0e0;
    background-position: calc(100% - 18px) 14px;
    background-size: 19px;
    background-image: url("http://assets.teachablecdn.com/icons/icon-magnifying-glass.svg");
    background-repeat: no-repeat;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-bottom: 40px;
    border-radius: 30px;
    height: 50px
}

    .my-teachable-layout .contact-main .form-control.search-box:focus {
        border-color: #afafaf
    }

.my-teachable-layout .contact-main .help-categories {
    max-width: 1024px;
    margin: auto;
    margin-top: 40px
}

    .my-teachable-layout .contact-main .help-categories.ng-enter {
        transition: 0.5s;
        opacity: 0
    }

    .my-teachable-layout .contact-main .help-categories.ng-enter-active {
        opacity: 1
    }

    .my-teachable-layout .contact-main .help-categories .help-category-row {
        display: flex;
        justify-content: center;
        position: relative
    }

        .my-teachable-layout .contact-main .help-categories .help-category-row .contact-popover {
            z-index: 1000;
            margin-top: 25px;
            width: calc(100% - 27px);
            right: 15px
        }

            .my-teachable-layout .contact-main .help-categories .help-category-row .contact-popover .section-title {
                text-align: left;
                margin-top: 20px
            }

            .my-teachable-layout .contact-main .help-categories .help-category-row .contact-popover .popover-item-list {
                padding-left: 0px
            }

                .my-teachable-layout .contact-main .help-categories .help-category-row .contact-popover .popover-item-list .popover-item {
                    font-size: 13px
                }

        .my-teachable-layout .contact-main .help-categories .help-category-row .help-category {
            cursor: pointer;
            width: 46%;
            margin-left: 2%;
            margin-right: 2%;
            margin-bottom: 40px;
            min-height: 150px;
            border-radius: 5px;
            background: #fff;
            display: flex;
            flex-direction: column;
            padding: 38px;
            box-shadow: 0px 10px 21px 0px #e6e9ec;
            transition: 0.15s all ease-in;
            text-align: center;
            align-items: center
        }

            .my-teachable-layout .contact-main .help-categories .help-category-row .help-category.ng-enter {
                transition: 0.5s;
                opacity: 0
            }

            .my-teachable-layout .contact-main .help-categories .help-category-row .help-category.ng-enter-active {
                opacity: 1
            }

            .my-teachable-layout .contact-main .help-categories .help-category-row .help-category .category-image {
                display: block;
                margin-bottom: 25px;
                width: 56px
            }

            .my-teachable-layout .contact-main .help-categories .help-category-row .help-category .category-title {
                font-size: 15px;
                line-height: 20px;
                display: block;
                font-weight: 600;
                margin-bottom: 10px;
                color: #212338
            }

            .my-teachable-layout .contact-main .help-categories .help-category-row .help-category .category-description {
                color: #6b6d7c;
                line-height: 21px;
                font-size: 13px;
                font-weight: 300;
                display: block
            }

@media screen and (min-width: 768px) {
    .my-teachable-layout .contact-main .help-categories .help-category-row .article-search-input {
        width: 80%
    }
}

.my-teachable-layout .contact-main .help-categories .help-category-row a.help-category:hover {
    border-color: #ff7f45;
    box-shadow: 0 30px 100px rgba(50,50,93,0.12),0 10px 20px rgba(50,50,93,0.1);
    border-width: 2px
}

    .my-teachable-layout .contact-main .help-categories .help-category-row a.help-category:hover .category-title {
        color: #09a59a
    }

@media screen and (max-width: 767px) {
    .my-teachable-layout .contact-main .help-categories .help-category-row {
        flex-direction: column
    }

        .my-teachable-layout .contact-main .help-categories .help-category-row .help-category {
            width: 97%
        }
}

.my-teachable-layout .contact-main .help-categories .help-category-row .help-block {
    color: #a94442;
    font-weight: bold;
    font-size: 12px
}

.my-teachable-layout .contact-main .contact-form-success {
    margin-top: 80px;
    padding: 60px 40px;
    text-align: center;
    border: 0
}

.my-teachable-layout .contact-main .contact-form {
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    box-shadow: 0 8px 20px #e3e7ea;
    background: #fff;
    border-radius: 4px
}

    .my-teachable-layout .contact-main .contact-form .form-group {
        padding: 18px 30px;
        border-bottom: 1px solid #e2e2e2;
        margin-bottom: 0
    }

        .my-teachable-layout .contact-main .contact-form .form-group.ng-enter {
            transition: 0.5s;
            opacity: 0
        }

        .my-teachable-layout .contact-main .contact-form .form-group.ng-enter-active {
            opacity: 1
        }

        .my-teachable-layout .contact-main .contact-form .form-group.form-group-prompt {
            font-weight: 700;
            padding-top: 20px;
            color: #434d5d;
            padding-bottom: 19px
        }

            .my-teachable-layout .contact-main .contact-form .form-group.form-group-prompt p {
                margin-bottom: 0px;
                font-weight: 600
            }

        .my-teachable-layout .contact-main .contact-form .form-group.form-group-prompt, .my-teachable-layout .contact-main .contact-form .form-group.schema-form-message-us, .my-teachable-layout .contact-main .contact-form .form-group.schema-form-submit {
            background: #fbfbfb
        }

        .my-teachable-layout .contact-main .contact-form .form-group.schema-form-message-us {
            padding-bottom: 30px
        }

        .my-teachable-layout .contact-main .contact-form .form-group.schema-form-submit {
            padding: 30px
        }

            .my-teachable-layout .contact-main .contact-form .form-group.schema-form-submit a, .my-teachable-layout .contact-main .contact-form .form-group.schema-form-message-us a {
                text-decoration: none
            }

        .my-teachable-layout .contact-main .contact-form .form-group .control-label, .my-teachable-layout .contact-main .contact-form .form-group label {
            color: #47505e;
            font-weight: 500;
            line-height: 29px;
            font-size: 13px
        }

        .my-teachable-layout .contact-main .contact-form .form-group span.glyphicon {
            display: none
        }

        .my-teachable-layout .contact-main .contact-form .form-group .form-control, .my-teachable-layout .contact-main .contact-form .form-group select {
            margin-bottom: 7px;
            line-height: 25px;
            font-size: 13px
        }

            .my-teachable-layout .contact-main .contact-form .form-group .form-control:focus, .my-teachable-layout .contact-main .contact-form .form-group select:focus {
                border: 1px solid #949494 !important;
                box-shadow: none
            }

        .my-teachable-layout .contact-main .contact-form .form-group .control-input {
            font-size: 13px;
            line-height: 21px
        }

            .my-teachable-layout .contact-main .contact-form .form-group .control-input .img-circle {
                float: left;
                width: 45px;
                margin-right: 17px
            }

        .my-teachable-layout .contact-main .contact-form .form-group p, .my-teachable-layout .contact-main .contact-form .form-group ul li {
            font-size: 13px;
            font-weight: 500;
            line-height: 26px
        }

        .my-teachable-layout .contact-main .contact-form .form-group .fa {
            margin-right: 5px
        }

        .my-teachable-layout .contact-main .contact-form .form-group a {
            text-decoration: underline;
            font-weight: bold
        }

    .my-teachable-layout .contact-main .contact-form .form-group-success {
        background: #f7fffd
    }

        .my-teachable-layout .contact-main .contact-form .form-group-success .control-label {
            color: #2b867f;
            line-height: 24px;
            margin-bottom: 3px;
            font-size: 13px;
            font-weight: 800
        }

        .my-teachable-layout .contact-main .contact-form .form-group-success div, .my-teachable-layout .contact-main .contact-form .form-group-success p, .my-teachable-layout .contact-main .contact-form .form-group-success a {
            color: #2b867f
        }

            .my-teachable-layout .contact-main .contact-form .form-group-success p:last-child {
                margin-bottom: 0
            }

    .my-teachable-layout .contact-main .contact-form .form-group-info {
        background: #fbf9f1
    }

        .my-teachable-layout .contact-main .contact-form .form-group-info .control-label {
            color: #fd7e41;
            line-height: 24px;
            margin-bottom: 3px;
            font-size: 13px;
            font-weight: 800
        }

        .my-teachable-layout .contact-main .contact-form .form-group-info .fa-question {
            margin-right: 5px;
            background: #fd7e41;
            color: #fff;
            padding: 4px 5px;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            line-height: 10px
        }

        .my-teachable-layout .contact-main .contact-form .form-group-info div, .my-teachable-layout .contact-main .contact-form .form-group-info p, .my-teachable-layout .contact-main .contact-form .form-group-info a {
            color: #8a7c7c
        }

            .my-teachable-layout .contact-main .contact-form .form-group-info p:last-child {
                margin-bottom: 0
            }

    .my-teachable-layout .contact-main .contact-form .form-group-problem {
        background: #fbfbfb
    }

        .my-teachable-layout .contact-main .contact-form .form-group-problem .control-label {
            color: #986670;
            line-height: 24px;
            margin-bottom: 3px;
            font-size: 13px;
            font-weight: 800
        }

        .my-teachable-layout .contact-main .contact-form .form-group-problem .fa-question {
            margin-right: 5px;
            background: #986670;
            padding: 4px 5px;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            line-height: 10px;
            color: white
        }

        .my-teachable-layout .contact-main .contact-form .form-group-problem div, .my-teachable-layout .contact-main .contact-form .form-group-problem p, .my-teachable-layout .contact-main .contact-form .form-group-problem a {
            color: #986670
        }

.my-teachable-layout .contact-main .ngProgressLiteBar {
    background: #ff7f45
}

.my-teachable-layout .contact-main textarea {
    height: 300px;
    padding: 9px 13px;
    font-size: 13px;
    box-shadow: none;
    font-weight: 200;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border-radius: 4px
}

    .my-teachable-layout .contact-main textarea::-webkit-input-placeholder {
        color: #b9b9b9 !important
    }

    .my-teachable-layout .contact-main textarea::-moz-placeholder {
        color: #b9b9b9 !important
    }

    .my-teachable-layout .contact-main textarea:-ms-input-placeholder {
        color: #b9b9b9 !important
    }

    .my-teachable-layout .contact-main textarea::-ms-input-placeholder {
        color: #b9b9b9 !important
    }

    .my-teachable-layout .contact-main textarea::placeholder {
        color: #b9b9b9 !important
    }

.my-teachable-layout .contact-main select {
    width: 100%
}

    .my-teachable-layout .contact-main select:focus {
        border: 1px solid #ccc !important
    }

.my-teachable-layout .contact-main .has-success select, .my-teachable-layout .contact-main .has-success .form-control {
    border: 1px solid #ccc !important
}

    .my-teachable-layout .contact-main .has-success select:focus, .my-teachable-layout .contact-main .has-success .form-control:focus {
        border: 1px solid #949494 !important
    }

.my-teachable-layout .contact-loader {
    position: absolute;
    top: 50%;
    left: calc(50% + 118px);
    z-index: -1
}

@media screen and (max-width: 767px) {
    .my-teachable-layout .contact-loader {
        left: 50%;
        margin-top: 30%
    }
}

.my-teachable-layout .contact-loader .line {
    -webkit-animation: expand 1s ease-in-out infinite;
    animation: expand 1s ease-in-out infinite;
    border-radius: 10px;
    display: inline-block;
    transform-origin: center center;
    margin: 0 3px;
    width: 1px;
    height: 15px
}

    .my-teachable-layout .contact-loader .line:nth-child(1) {
        background: #ff7f45
    }

    .my-teachable-layout .contact-loader .line:nth-child(2) {
        -webkit-animation-delay: 180ms;
        animation-delay: 180ms;
        background: #ff7f45
    }

    .my-teachable-layout .contact-loader .line:nth-child(3) {
        -webkit-animation-delay: 360ms;
        animation-delay: 360ms;
        background: #ff7f45
    }

    .my-teachable-layout .contact-loader .line:nth-child(4) {
        -webkit-animation-delay: 540ms;
        animation-delay: 540ms;
        background: #ff7f45
    }

@-webkit-keyframes expand {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(2)
    }
}

@keyframes expand {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(2)
    }
}

.my-teachable-layout .ngProgressLiteBar {
    background: #ff7f45
}

.my-teachable-layout #HW_frame_cont.HW_visible {
    top: 60px !important
}

.my-teachable-layout .plans-wrapper {
    clear: both;
    display: flex
}

    .my-teachable-layout .plans-wrapper .coupon-applied {
        background: #fff0a9;
        position: absolute;
        font-size: 11px;
        font-weight: 600;
        line-height: 20px;
        padding: 2px 10px;
        left: 50%;
        margin-top: 1px;
        color: #ff7f45;
        translatey: -50%;
        transform: translate(-50%, -50%);
        width: 120px;
        border-radius: 3px;
        text-align: center
    }

    .my-teachable-layout .plans-wrapper .plan {
        background: #fff;
        border-radius: 5px;
        border: 1px solid #cad8ee;
        display: block;
        float: left;
        font-size: 21px;
        line-height: 75px;
        margin-right: 10px;
        margin-top: auto;
        margin-bottom: 0px;
        min-width: 143px;
        width: 33%;
        text-align: left;
        position: relative
    }

@media screen and (max-width: 600px) {
    .my-teachable-layout .plans-wrapper .plan {
        width: 100%
    }

        .my-teachable-layout .plans-wrapper .plan img.badge-overlay {
            position: absolute;
            right: 39px;
            margin-top: -4px
        }
}

.my-teachable-layout .plans-wrapper .plan.plan-selected, .my-teachable-layout .plans-wrapper .plan:hover {
    background: #fff;
    border-color: #a2a2a2
}

.my-teachable-layout .plans-wrapper .plan.plan-selected {
    background: #fff;
    border-color: #ff7f45
}

    .my-teachable-layout .plans-wrapper .plan.plan-selected .plan-check {
        display: block
    }

.my-teachable-layout .plans-wrapper .plan .plan-check {
    background-image: url("http://assets.teachablecdn.com/icons/icon-check.svg");
    width: 24px;
    height: 25px;
    position: absolute;
    right: -6px;
    top: -6px;
    display: none
}

.my-teachable-layout .plans-wrapper .plan .plan-name {
    font-size: 13px;
    text-align: center;
    color: #575757;
    font-weight: 600;
    margin-top: 13px
}

.my-teachable-layout .plans-wrapper .plan .plan-price {
    margin-bottom: 20px;
    font-size: 13px;
    margin-top: 7px;
    max-width: 379px;
    margin-left: auto;
    margin-right: auto;
    line-height: 19px;
    text-align: center;
    color: #8592a6;
    font-weight: 100
}

    .my-teachable-layout .plans-wrapper .plan .plan-price .plan-price-amount {
        font-size: 13px;
        color: #849296;
        font-weight: 600
    }

    .my-teachable-layout .plans-wrapper .plan .plan-price a {
        color: #90d8d2
    }

.my-teachable-layout .plans-wrapper .plan .plan-icon {
    background-repeat: no-repeat;
    background-position: 50% 25px;
    background-size: 63px;
    height: 86px
}

.my-teachable-layout .plans-wrapper .plan input.form-control {
    padding: 5px 15px;
    height: 48px;
    font-size: 14px;
    box-shadow: none;
    font-weight: 200;
    margin-bottom: 14px;
    transition: all 0.3s ease;
    border-radius: 4px
}

@media screen and (max-width: 600px) {
    .my-teachable-layout .plans-wrapper .plan {
        width: 95%
    }
}

.my-teachable-layout .plans-wrapper .plan label.description {
    font-family: 'Domine';
    font-size: 13px;
    color: #8e8e8e;
    line-height: 22px;
    font-weight: 100
}

.my-teachable-layout .plans-wrapper .plan .bottom-breadcrumb {
    position: absolute;
    background: #f6f6f6;
    width: 100%;
    text-align: right;
    margin-left: -40px;
    border-radius: 8px;
    margin-top: 30px;
    border-top-right-radius: 0;
    border-top-left-radius: 0px;
    line-height: 32px
}

    .my-teachable-layout .plans-wrapper .plan .bottom-breadcrumb .next-step {
        display: inline;
        font-size: 9px;
        color: #a5a5a5;
        margin-right: 4px
    }

    .my-teachable-layout .plans-wrapper .plan .bottom-breadcrumb .step-name {
        display: inline;
        font-size: 9px;
        color: #929292;
        font-weight: 600;
        margin-right: 10px
    }

.my-teachable-layout .plans-wrapper .plan.plan-free .plan-icon {
    background-image: url("http://assets.teachablecdn.com/admin/assets/images/plan-free.svg")
}

.my-teachable-layout .plans-wrapper .plan.plan-basic .plan-icon {
    background-image: url("http://assets.teachablecdn.com/admin/assets/images/plan-basic.svg")
}

.my-teachable-layout .plans-wrapper .plan.plan-professional img.badge-overlay {
    position: absolute;
    right: -2px;
    margin-top: -2px
}

.my-teachable-layout .plans-wrapper .plan.plan-professional .plan-icon {
    background-image: url("http://assets.teachablecdn.com/admin/assets/images/plan-professional.svg")
}

.my-teachable-layout .plans-wrapper .plan.plan-high_volume .plan-icon {
    background-image: url("http://assets.teachablecdn.com/admin/assets/images/plan-high-volume.svg")
}

.my-teachable-layout .welcome-banner {
    width: 100%;
    z-index: 100;
    padding: 40px 50px 50px 330px;
    background-image: url("http://assets.teachablecdn.com/icons/icon-myteachable.svg");
    background-repeat: no-repeat;
    background-position: 60px 40px;
    background-color: #fff;
    background-size: 220px;
    box-shadow: 0 8px 20px #e3e7ea;
    margin-bottom: 80px;
    position: relative;
    margin-top: 20px;
    border-radius: 6px
}

@media screen and (max-width: 767px) {
    .my-teachable-layout .welcome-banner {
        padding: 190px 30px 30px 30px;
        background-position: 30px 40px;
        background-size: 130px;
        position: absolute;
        top: -350px;
        width: calc(100% - 41px)
    }
}

@media screen and (min-width: 767px) and (max-width: 1100px) {
    .my-teachable-layout .welcome-banner {
        padding: 190px 50px 30px 50px;
        background-position: 50px 40px;
        background-size: 130px
    }
}

@media screen and (min-width: 1100px) and (max-width: 1300px) {
    .my-teachable-layout .welcome-banner {
        background-size: 150px;
        padding-left: 240px;
        background-position: 50px 40px
    }
}

.my-teachable-layout .welcome-banner p:last-child {
    margin-bottom: 0
}

.my-teachable-layout .welcome-banner .close-icon {
    position: absolute;
    font-weight: 100;
    font-size: 26px;
    color: #cadae9;
    top: 30px;
    right: 30px;
    background: url("http://assets.teachablecdn.com/icons/icon-close.svg");
    width: 16px;
    height: 17px;
    background-repeat: no-repeat;
    opacity: 0.7
}

    .my-teachable-layout .welcome-banner .close-icon:hover {
        opacity: 1
    }

.my-teachable-layout .welcome-banner .illustration-left {
    position: absolute;
    top: 58px
}

.my-teachable-layout .welcome-banner .user-info-wrapper {
    width: 100%;
    float: left
}

    .my-teachable-layout .welcome-banner .user-info-wrapper .user-info {
        background: #f5f6f7;
        display: block;
        float: left;
        color: #000;
        border-radius: 30px;
        margin-right: 20px;
        margin-bottom: 22px
    }

        .my-teachable-layout .welcome-banner .user-info-wrapper .user-info .user-info-label {
            color: #33353a;
            border-right: 1px solid #e6e6e6;
            padding: 10px 16px 11px 20px;
            line-height: 16px;
            display: block;
            font-size: 12px;
            float: left
        }

        .my-teachable-layout .welcome-banner .user-info-wrapper .user-info .user-info-value {
            width: 222px;
            padding: 0px;
            font-size: 10px;
            line-height: 38px;
            word-wrap: break-word;
            padding-top: 6px;
            color: #8592a6;
            padding-left: 15px;
            padding-right: 20px
        }

@media screen and (max-width: 600px) {
    .my-teachable-layout .welcome-banner .user-info-wrapper .user-info {
        border-radius: 10px;
        margin-right: 20px;
        padding: 14px 0px;
        width: 100%
    }

        .my-teachable-layout .welcome-banner .user-info-wrapper .user-info .user-info-label {
            float: none;
            border-right: 0px;
            line-height: 3px
        }

        .my-teachable-layout .welcome-banner .user-info-wrapper .user-info .user-info-value {
            width: 100%;
            display: block;
            line-height: 20px;
            padding-top: 2px
        }
}

@media screen and (min-width: 767px) and (max-width: 1000px) {
    .my-teachable-layout .welcome-banner .user-info-wrapper .user-info {
        border-radius: 10px;
        margin-right: 20px;
        padding: 14px 0px;
        width: 100%
    }

        .my-teachable-layout .welcome-banner .user-info-wrapper .user-info .user-info-label {
            float: none;
            border-right: 0px;
            line-height: 3px
        }

        .my-teachable-layout .welcome-banner .user-info-wrapper .user-info .user-info-value {
            width: 100%;
            display: block;
            line-height: 20px
        }
}

.my-teachable-layout .welcome-banner h1 {
    font-size: 20px;
    padding-left: 0px;
    max-width: 600px;
    margin-top: 5px
}

@media screen and (max-width: 600px) {
    .my-teachable-layout .welcome-banner h1 {
        font-size: 16px
    }
}

.my-teachable-layout .welcome-banner p {
    font-size: 13px;
    max-width: 600px;
    line-height: 24px;
    margin-bottom: 19px;
    color: #8592a6
}

    .my-teachable-layout .welcome-banner p.bold {
        color: #47505e;
        font-weight: 600
    }

    .my-teachable-layout .welcome-banner p a {
        font-weight: 600;
        text-decoration: underline
    }

.my-teachable-layout .label-user-type {
    vertical-align: 2px;
    margin-left: 5px;
    margin-right: 6px;
    font-size: 9px;
    font-weight: 700;
    padding-top: 7px;
    padding-bottom: 6px;
    padding-left: 13px;
    padding-right: 13px;
    text-transform: uppercase;
    border-radius: 16px
}

    .my-teachable-layout .label-user-type.label-owner {
        background: #c9f3f0;
        color: #1c8a82;
        border: 1px solid #b1d6d3
    }

    .my-teachable-layout .label-user-type.label-student {
        background: #cbf1fe;
        color: #35758e;
        border: 1px solid #adc8d2
    }

    .my-teachable-layout .label-user-type.label-author, .my-teachable-layout .label-user-type.label-affiliate {
        background: #ffdddf;
        color: #bb7073;
        border: 1px solid #d6bdbe
    }

    .my-teachable-layout .label-user-type.label-free, .my-teachable-layout .label-user-type.label-school-trial, .my-teachable-layout .label-user-type.label-school-offline {
        background: #efefef;
        color: #5f5f5f
    }

    .my-teachable-layout .label-user-type.label-basic, .my-teachable-layout .label-user-type.label-professional, .my-teachable-layout .label-user-type.label-high_volume, .my-teachable-layout .label-user-type.label-business {
        background: #fdece4;
        color: #e97e0b
    }

    .my-teachable-layout .label-user-type.label-school-offline, .my-teachable-layout .label-user-type.label-school-trial {
        position: absolute;
        top: 10px;
        left: 5px
    }

.my-teachable-layout .schools-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row
}

@media (min-width: 767px) {
    .my-teachable-layout .schools-list {
        margin: -10px 0 0 -10px
    }
}

.my-teachable-layout .schools-list.no-animations .school-card {
    transition: none
}

    .my-teachable-layout .schools-list.no-animations .school-card:hover {
        box-shadow: 0 8px 20px #e3e7ea;
        transform: none
    }

.my-teachable-layout .schools-list .school-card {
    display: block;
    margin: 20px 20px 40px 20px;
    padding: 0px;
    min-height: 350px;
    position: relative;
    border-radius: 5px;
    background-size: 130%;
    background-repeat: no-repeat;
    box-shadow: 0 8px 20px #e3e7ea;
    transition: 0.15s all ease-in;
    background-position: center top
}

    .my-teachable-layout .schools-list .school-card:hover {
        background-repeat: no-repeat;
        box-shadow: 0 30px 100px rgba(50,50,93,0.12),0 10px 20px rgba(50,50,93,0.1);
        transform: translateY(-4px)
    }

        .my-teachable-layout .schools-list .school-card:hover .school-name {
            color: #09a59a
        }

    .my-teachable-layout .schools-list .school-card .school-favicon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: -30px;
        left: 30px;
        z-index: 10;
        background-color: #fff;
        box-shadow: 0px 2px 21px 0 #c1c5c5
    }

    .my-teachable-layout .schools-list .school-card .school-info {
        background: #fff;
        position: absolute;
        width: 100%;
        bottom: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 40px 20px 30px 30px;
        min-height: 160px
    }

        .my-teachable-layout .schools-list .school-card .school-info span {
            color: black
        }

    .my-teachable-layout .schools-list .school-card .school-name {
        color: #000;
        font-size: 16px;
        font-weight: 600;
        line-height: 23px;
        margin-top: 2px;
        margin-bottom: 0px;
        word-wrap: break-word
    }

    .my-teachable-layout .schools-list .school-card .school-url {
        font-size: 13px;
        padding-bottom: 14px;
        color: #8f9da5;
        font-weight: 500;
        line-height: 17px;
        margin-top: 6px;
        margin-bottom: 4px;
        word-wrap: break-word
    }

    .my-teachable-layout .schools-list .school-card .raquo {
        line-height: 35px;
        float: right;
        font-size: 28px;
        font-weight: 100;
        font-family: inherit;
        color: #a7a7a7
    }

    .my-teachable-layout .schools-list .school-card .school-card-footer {
        display: flex;
        align-items: end;
        justify-content: space-between
    }

        .my-teachable-layout .schools-list .school-card .school-card-footer .action-required-wrapper {
            font-size: 9px;
            border-radius: 18px;
            background-color: #ffe5e5;
            color: #cc0000;
            padding: 2px 6px;
            font-weight: 900px;
            text-transform: uppercase
        }

@media screen and (min-width: 0px) and (max-width: 500px) {
    .my-teachable-layout .schools-list {
        flex-direction: column
    }

        .my-teachable-layout .schools-list .school-card {
            flex-basis: 100%
        }
}

@media screen and (min-width: 500px) and (max-width: 767px) {
    .my-teachable-layout .schools-list .school-card {
        flex-basis: calc(50% - 40px)
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    .my-teachable-layout .schools-list {
        flex-direction: column
    }

        .my-teachable-layout .schools-list .school-card {
            flex-basis: 100%
        }
}

@media screen and (min-width: 1000px) and (max-width: 1250px) {
    .my-teachable-layout .schools-list .school-card {
        flex-basis: calc(50% - 40px)
    }
}

@media screen and (min-width: 1250px) and (max-width: 1600px) {
    .my-teachable-layout .schools-list .school-card {
        flex-basis: calc(33% - 40px)
    }
}

@media screen and (min-width: 1600px) {
    .my-teachable-layout .schools-list .school-card {
        flex-basis: calc(25% - 40px)
    }
}

.my-teachable-layout .content-box.connect, .my-teachable-layout .content-box.unlink {
    display: block;
    min-height: 550px;
    max-height: 550px;
    background-color: #ffffff
}

    .my-teachable-layout .content-box.connect.unlink, .my-teachable-layout .content-box.unlink.unlink {
        padding-top: 25%
    }

    .my-teachable-layout .content-box.connect .btn, .my-teachable-layout .content-box.unlink .btn {
        min-width: 295px
    }

    .my-teachable-layout .content-box.connect .alert, .my-teachable-layout .content-box.unlink .alert {
        max-width: 480px
    }

    .my-teachable-layout .content-box.connect .confirm-connect, .my-teachable-layout .content-box.unlink .confirm-connect {
        padding-top: 4%
    }

    .my-teachable-layout .content-box.connect .connected-error, .my-teachable-layout .content-box.unlink .connected-error {
        padding-top: 15%
    }

    .my-teachable-layout .content-box.connect h4, .my-teachable-layout .content-box.unlink h4 {
        font-size: 20px;
        font-weight: bold;
        color: #47505e;
        margin: 0 auto 20px auto
    }

    .my-teachable-layout .content-box.connect p, .my-teachable-layout .content-box.unlink p {
        max-width: 400px
    }

    .my-teachable-layout .content-box.connect form, .my-teachable-layout .content-box.unlink form {
        text-align: left
    }

    .my-teachable-layout .content-box.connect .form-group, .my-teachable-layout .content-box.unlink .form-group {
        padding: 5px 70px;
        margin-bottom: 0
    }

    .my-teachable-layout .content-box.connect .email, .my-teachable-layout .content-box.unlink .email {
        font-weight: 600
    }

    .my-teachable-layout .content-box.connect form .btn, .my-teachable-layout .content-box.unlink form .btn {
        margin: 0 auto
    }

    .my-teachable-layout .content-box.connect .modal-footer, .my-teachable-layout .content-box.unlink .modal-footer {
        display: block;
        width: calc(100% + 120px);
        padding: 0;
        margin: 0;
        text-align: center;
        padding-top: 25px;
        margin-top: 40px;
        margin-left: -60px
    }

        .my-teachable-layout .content-box.connect .modal-footer a, .my-teachable-layout .content-box.unlink .modal-footer a {
            font-size: 13px;
            color: #8592a6;
            line-height: 25px;
            text-decoration: underline;
            font-weight: 500
        }

.my-teachable-layout.my-teachable-dashboard {
    padding: 20px;
    height: 100%;
    position: relative;
    width: 100%
}

    .my-teachable-layout.my-teachable-dashboard .sticky-center-container {
        margin-left: 137px
    }

    .my-teachable-layout.my-teachable-dashboard h1 {
        padding-left: 5px;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 33px;
        color: var(--plumette)
    }

@media screen and (max-width: 767px) {
    .my-teachable-layout.my-teachable-dashboard .sticky-center-container {
        margin-left: 0px
    }
}

@media screen and (min-width: 768px) and (max-width: 930px) {
    .my-teachable-layout.my-teachable-dashboard .sticky-center-container {
        left: 50%;
        margin-top: 0px;
        width: calc(100% - 275px)
    }
}

@media screen and (min-width: 768px) {
    .my-teachable-layout.my-teachable-dashboard {
        position: absolute;
        padding-right: 50px;
        padding-top: 28px;
        padding-left: 325px
    }
}

.auth-flow {
    background-color: var(--clinical)
}

.auth-flow__top-bar {
    height: 64px;
    position: absolute;
    background-color: var(--clinical);
    border-bottom: 1px solid var(--obsidian)
}

.auth-flow__content {
    flex: 1 1 auto;
    height: 100%;
    padding-top: 104px
}

.auth-flow .form-error {
    margin-left: auto;
    margin-right: auto;
    max-width: 364px
}

.onboarding-flow {
    height: 100vh;
    position: relative;
    background-color: var(--clinical)
}

.onboarding-flow__progress-bar {
    position: absolute;
    height: 8px;
    top: 0px;
    left: 0px;
    background-color: var(--grey-area)
}

.onboarding-flow__progress-bar-indicator {
    height: 100%;
    width: 33%;
    background-color: var(--teachable-green);
    border-radius: 0 4px 4px 0
}

.onboarding-flow__content {
    max-width: 600px
}

.onboarding-flow__skip, .onboarding-flow__submit {
    position: absolute;
    width: calc(100% - 64px);
    left: 32px
}

.onboarding-flow__skip {
    text-align: center;
    bottom: 32px
}

.onboarding-flow__submit {
    bottom: 76px
}

@media (min-width: 415px) {
    .onboarding-flow__skip, .onboarding-flow__submit {
        position: static;
        width: auto
    }
}

.password-flow__content {
    max-width: 578px;
    background-color: var(--white);
    border-radius: 6px
}

.password-flow__form-wrapper {
    flex: 1 0 auto
}

.password-flow__form {
    max-width: 325px
}

.password-flow__header {
    word-break: break-word
}

    .password-flow__header.heading2 {
        font-family: 'Reckless-Light', 'Palatino', Garamond, Georgia, serif;
        margin-bottom: 32px;
        font-weight: 300;
        -webkit-animation: fadeIn 250ms cubic-bezier(0.32, 0, 0.67, 0);
        animation: fadeIn 250ms cubic-bezier(0.32, 0, 0.67, 0)
    }

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-filter: blur(2px);
        filter: blur(2px)
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-filter: blur(2px);
        filter: blur(2px)
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px)
    }
}

.password-flow__links {
    flex: 0 0 auto;
    flex-direction: column
}

.password-flow__link {
    height: 64px
}

.auth-form:not(.auth-form--error) {
    height: 100%;
    flex-flow: column nowrap
}

.auth-form__header {
    word-break: break-word
}

    .auth-form__header.heading2 {
        font-family: 'Reckless-Light', 'Palatino', Garamond, Georgia, serif;
        margin-bottom: 32px;
        font-weight: 300;
        -webkit-animation: fadeIn 250ms cubic-bezier(0.32, 0, 0.67, 0);
        animation: fadeIn 250ms cubic-bezier(0.32, 0, 0.67, 0)
    }

    .auth-form__header.school_heading {
        max-width: 240px
    }

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-filter: blur(2px);
        filter: blur(2px)
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-filter: blur(2px);
        filter: blur(2px)
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px)
    }
}

.auth-form__subheader {
    color: var(--slate)
}

    .auth-form__subheader strong {
        color: var(--obsidian);
        font-weight: 600
    }

.auth-form__form {
    max-width: 300px
}

.auth-form .footer__links {
    border-top: 1px solid var(--gravel)
}

.auth-form .footer__link {
    display: block
}

    .auth-form .footer__link img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: -4px
    }

.auth-form .subheading {
    max-width: 300px
}

.auth-form .icon-e {
    float: right;
    margin-left: -30px;
    margin-top: 12px;
    position: absolute;
    z-index: 2;
    opacity: 0.4
}

.rebrand-2020 .form-label {
    color: var(--slate)
}

.rebrand-2020 .form-input {
    background-color: var(--clinical);
    height: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    caret-color: var(--squid-ink);
    border-radius: 5px;
    border: 1px solid var(--grey-area);
    transition: border-color 0.2s ease
}

    .rebrand-2020 .form-input::-webkit-input-placeholder {
        color: var(--concrete)
    }

    .rebrand-2020 .form-input::-moz-placeholder {
        color: var(--concrete)
    }

    .rebrand-2020 .form-input:-ms-input-placeholder {
        color: var(--concrete)
    }

    .rebrand-2020 .form-input::-ms-input-placeholder {
        color: var(--concrete)
    }

    .rebrand-2020 .form-input::placeholder {
        color: var(--concrete)
    }

    .rebrand-2020 .form-input:not(:disabled):focus {
        outline: 0
    }

        .rebrand-2020 .form-input:not(:disabled):focus:not(.error) {
            border-color: var(--plumette)
        }

    .rebrand-2020 .form-input:hover {
        border-color: var(--concrete)
    }

    .rebrand-2020 .form-input:disabled:hover {
        border-color: var(--grey-area)
    }

    .rebrand-2020 .form-input.error {
        border-color: var(--red-herring)
    }

.rebrand-2020 .message, .rebrand-2020 .form-error {
    color: var(--squid-ink);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px
}

.rebrand-2020 .message--success {
    background-color: var(--air-plant);
    border-color: var(--vintage-mint)
}

.rebrand-2020 .message--issue, .rebrand-2020 .form-error {
    background-color: var(--petal-pink);
    border-color: var(--carnation)
}

.rebrand-2020 .message--info {
    background-color: var(--summer-breeze);
    border-color: var(--purple-haze)
}

.rebrand-2020 .message--warning {
    background-color: var(--vanilla-wafer);
    border-color: var(--buttermilk)
}

.rebrand-2020 .message svg, .rebrand-2020 .form-error svg {
    flex: 0 0 auto
}

.rebrand-2020 .message ul, .rebrand-2020 .form-error ul {
    padding: 0px;
    margin-bottom: 0px;
    list-style: none
}

.rebrand-2020 .inline-error {
    margin-top: 4px
}

.rebrand-2020 .button {
    color: var(--clinical);
    background-color: var(--obsidian);
    max-width: 570px;
    min-width: 120px;
    border-radius: 6px;
    border: none;
    white-space: nowrap;
    touch-action: manipulation;
    transition: opacity 0.3s;
    cursor: pointer
}

    .rebrand-2020 .button:disabled {
        opacity: 0.4;
        pointer-events: none
    }

    .rebrand-2020 .button:hover:not(:disabled) {
        background-color: var(--black)
    }

.rebrand-2020 .secondary-button {
    color: var(--obsidian);
    background-color: var(--clinical);
    max-width: 570px;
    min-width: 120px;
    border-radius: 6px;
    border: 1px solid var(--gravel);
    white-space: nowrap;
    touch-action: manipulation;
    transition: opacity 0.3s;
    cursor: pointer
}

    .rebrand-2020 .secondary-button:disabled {
        opacity: 0.4;
        pointer-events: none
    }

    .rebrand-2020 .secondary-button:hover:not(:disabled) {
        border: 1px solid var(--iron-ore)
    }

.checkbox {
    min-height: 16px;
    position: relative;
    width: 16px;
    height: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    left: 0;
    top: 0;
    border: 0
}

    .checkbox:hover {
        cursor: pointer
    }

    .checkbox:after {
        display: block;
        position: absolute;
        content: '';
        width: 16px;
        height: 16px;
        border: 1px solid var(--obsidian);
        border-radius: 2px;
        left: 0;
        top: 0
    }

    .checkbox:checked:before {
        display: block;
        position: absolute;
        content: '';
        left: 4px;
        top: 5px;
        border-left: 2px solid var(--obsidian);
        border-bottom: 2px solid var(--obsidian);
        height: 4px;
        width: 8px;
        transform: rotate(-45deg);
        outline: 0;
        transition: outline 0.2s ease
    }

input[type='checkbox']:focus {
    outline: 0;
    box-shadow: 0px 0px 1px 3px var(--gravel)
}

.authorizations-new-container {
    background-color: var(--clinical);
    min-height: 100vh
}

    .authorizations-new-container .top-bar {
        height: 64px;
        background-color: var(--clinical);
        border-bottom: 1px solid var(--obsidian)
    }

    .authorizations-new-container .header-text {
        padding-top: 60px;
        text-align: center
    }

    .authorizations-new-container .authorize-form {
        padding: 10px;
        margin-left: auto;
        margin-right: auto
    }

    .authorizations-new-container .auth-buttons {
        display: inline-flex;
        padding-bottom: 20px
    }

    .authorizations-new-container .profile-card {
        text-align: center
    }

        .authorizations-new-container .profile-card img {
            border: 2px solid var(--fog)
        }

        .authorizations-new-container .profile-card label {
            padding-top: 20px
        }

    .authorizations-new-container .auth-details {
        padding: 10px
    }

    .authorizations-new-container ul.detail-list {
        display: inline-block;
        background: var(--linen);
        padding: 20px;
        list-style: none;
        position: relative;
        text-align: left
    }

        .authorizations-new-container ul.detail-list .detail-header {
            padding: 5px;
            left: 30px
        }

        .authorizations-new-container ul.detail-list li {
            margin-left: 15px;
            padding: 12px
        }

            .authorizations-new-container ul.detail-list li:before {
                background-image: url("http://assets.teachablecdn.com/icons/checkout-checkmark.svg");
                background-size: 18px;
                content: '';
                width: 18px;
                height: 18px;
                background-repeat: no-repeat;
                left: 20px;
                position: absolute
            }

            .authorizations-new-container ul.detail-list li:last-child {
                margin-bottom: 0px
            }

.white-link-box {
    background-color: #fff
}

.form-control::-moz-placeholder {
    color: #b2bcc5;
    opacity: 1
}

.page_div {
    background: none repeat
}

    .page_div .container {
        background: #fff;
        padding-top: 30px
    }

.full-height {
    height: 100%
}

.convert-existing {
    white-space: pre-wrap
}