

.teach-cards
{
    transition: border 0.1s, transform 0.3s;
}

    .teach-cards:hover
    {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        cursor: pointer;
    }

.custom-card
{
    box-shadow: 0 10px 16px rgba(90,94,94,.29);
}


.describe-copy
{
    width: 95%;
    margin-bottom: 30px;
}

    .describe-copy p, .describe-copy li
    {
        font-size: 18px;
        line-height: 25px;
        text-align: justify;
        margin: 15px 0;
    }

    .describe-copy#privacy ul li
    {
        font-size: 18px;
        line-height: 25px;
        text-align: justify;
        margin: 0 45px;
    }


a
{
    color: #037a91;
    text-decoration: underline;
    cursor: pointer;
}


#lessonsheetHeroRight a.btn
{
    color: #494f56;
    font-size: 1rem !important;
    text-decoration: none !important;
}
#lessonsheetHeroRight .btn[data-toggle="collapse"]
{
    min-width: 16rem;
}
/* Default: when closed (aria-expanded is false) show a down arrow */
#lessonsheetHeroRight .btn[data-toggle="collapse"]::after
{
    font-family: "Font Awesome 5 Free"; /* Adjust if using a different version */
    font-weight: 900; /* Needed for solid icons */
    content: "\f078"; /* Font Awesome chevron-down */
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

/* When the accordion is expanded (aria-expanded="true") show an up arrow */
#lessonsheetHeroRight .btn[data-toggle="collapse"][aria-expanded="true"]::after
{
    content: "\f077"; /* Font Awesome chevron-up */
}

a:hover
{
    text-decoration: underline;
}

a img
{
    border: 0;
}

.custom_btn a
{
    color: #fff
}

.underline-div
{
    border-bottom: 1px solid;
    margin-bottom: 3px;
    padding-bottom: 2px;
    line-height: 1.1em;
    display: inline-block;
}

.overline-div
{
    border-top: 1px solid;
    margin-top: 3px;
    padding-top: 10px;
}

#modalOverlay
{
    background-color: #333;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    vertical-align: middle;
    width: 100%;
    z-index: 1001;
}

.center
{
    text-align: center;
}

.v-top
{
    vertical-align: top;
}

.hide
{
    display: none;
}

.show
{
    display: inline-block;
}

.instrList
{
    font-size: 16px;
    line-height: 21px;
}

    .instrList li
    {
        list-style-type: decimal;
        list-style-position: inside;
        text-indent: 1em;
    }

ol.instrList li select
{
    border: 1px solid #037a91;
    color: #037a91;
    font-size: 1em;
    margin: 3px 0;
    padding: 2px;
    width: 200px;
}

.as-in
{
    font-size: .9em;
    margin-left: 25px;
}


.sublistA li
{
    list-style-type: lower-alpha;
    list-style-position: inside;
    text-indent: 3em;
}


.sublistB li
{
    list-style-type: disc;
    list-style-position: inside;
    text-indent: 3em;
}

.page-instructions
{
    border: 2px solid #037a91;
    display: inline-block;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
}

.page-message
{
    border: 2px solid #037a91;
    margin: 50px auto;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 10px;
    display: inline-block;
}

ol.instrList li strong
{
    color: #c31a09;
}

.imperative-label
{
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-size: 18px;
    font-weight: normal;
    line-height: 20px;
    display: inline-block;
    width: 100%;
    text-align: center;
}

#classLesson
{
    display: block;
    font-size: 1em;
    text-align: left;
    font-style: italic;
}

    #classLesson span
    {
        font-style: normal;
        font-weight: bold;
    }

/*vocab page*/
.double-def
{
    font-style: italic;
}

.ph-v
{
    font-weight: bold;
}

.prev-t
{
    background-color: #eee;
}




#about
{
    font-size: 16px;
    line-height: 24px;
}

    #about p
    {
        margin: 20px;
    }

.alert-message
{
    color: #c31a09;
    font-size: 1.1em;
    margin-bottom: 10px;
}

#flash-card
{
    margin: 0 !important;
}

.info-box
{
    padding: 10px;
    margin: 0 10px;
}

#symbolKey
{
    margin: 0 0 20px;
    padding: 0;
    line-height: 10px;
    text-align: center;
    width: 80%;
}

/*.tooltip {
    -webkit-text-shadow: 1px 1px 1px rgba(247, 244, 75, 0.72);
    text-shadow: 1px 1px 1px rgba(247, 244, 75, 0.72);
}*/
/*SA Test Different Buttons Style */
/* .btn {
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 61px;
    font-size: 22px;
    line-height: 42px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
} */
.btn.dropdown-toggle
{
    color: #666;
}

.btn:hover
{
    text-decoration: none;
    position: relative;
    top: 1px;
}

.btn span
{
    position: absolute;
    top: 0;
    height: 61px;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.prev
{
    background-image: url(images/btn-prev.png);
    background-position: right 0;
    padding: 0 25px 0 10px;
    font-size: 18px;
    margin-left: 38px;
}

    .prev span
    {
        background-image: url(images/btn-prev-l.png);
        left: -41px;
        width: 41px;
    }

.save
{
    float: right;
    background-image: url(images/btn-save.png);
    font-size: 18px;
    padding-left: 28px;
    margin-right: 31px;
}




@media(max-width:440px)
{
    .prev, .save
    {
        font-size: 12px;
    }
}

.red
{
    background-image: url(images/btn-red.png);
    padding-left: 25px;
}

    .red span
    {
        background-image: url(images/btn-red-r.png);
        right: -31px;
        width: 31px;
    }

/* .blue {
    background-image: url(images/btn-blue.png);
    padding-left: 21px;
} */

.blue .aftspan
{
    background-image: url(images/sheets1.png);
    right: -32px;
    width: 32px;
}

.yellow
{
    background-image: url(images/btn-yellow.png);
    padding-left: 18px;
}

    .yellow .aftspan
    {
        background-image: url(images/sheets1.png);
        right: -34px;
        width: 34px;
    }

.orange
{
    background-image: url(images/btn-orange.png);
    padding-left: 17px;
}

    .orange .aftspan
    {
        background-image: url(images/sheets1.png);
        right: -34px;
        width: 34px;
    }

.box
{
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 35px;
    display: block;
    color: #fff;
    position: relative;
    margin-left: 108px;
    padding: 33px 29px;
    font-size: 28px;
    line-height: 28px;
    text-transform: uppercase;
    text-decoration: none;
}

.box-blue
{
    background-image: url(images/box-blue.png);
    width: 432px;
}

.box-yellow
{
    background-image: url(images/box-yellow.png);
    width: 469px;
}

.box-orange
{
    background-image: url(images/box-orange.png);
    width: 502px;
}

.box:hover
{
    top: 1px;
}

.buttons
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media(min-width:768px)
{
    .buttons
    {
        margin-bottom: 100px;
    }
}

@media(max-width:767px)
{
    .buttons
    {
        margin-bottom: 140px;
    }
}

#urlSubmit .buttons
{
    margin-bottom: 0;
}

.buttons input.btn
{
    border: 0;
    cursor: pointer;
    height: 61px;
    padding-bottom: 10px;
    background-color: transparent;
    white-space: nowrap;
    overflow: hidden;
}

    .buttons input.btn:hover
    {
        top: 0;
    }

.pub-btn
{
    background: url(images/btn-blue-r.png) no-repeat right 0;
    height: 61px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

    .pub-btn:hover
    {
        top: 1px;
    }


a.btn.prev
{
    color: #fff;
}

.txt-btn
{
    background: none;
    border: none;
    font-size: inherit;
    text-decoration: underline;
}


.custom_btn:focus
{
    outline: none;
}
/*PURE CSS BUTTONS
do not require images form containing div*/
/*RED*/
/*customized_btn::after
.blue span
.yellow span
.orange span*/


@media(max-width: 992px)
{
    .option a em
    {
        left: 154px;
    }

    .option .custom_btn
    {
        height: 70px;
    }

        .option .custom_btn::after
        {
            height: 48px;
            width: 55px;
            right: -25px;
            top: 9px;
            transform: rotate(45deg);
            -webkit-transform: rotate(46deg);
        }
}

.option a em
{
    line-height: 17px;
}

@media only screen and (max-width : 480px)
{
}


.custom_pill_btn
{
    line-height: .9em;
    background: #c31a09;
    display: inline-block;
    color: #fff !important;
    text-transform: uppercase;
    height: 60px;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 7px;
    border: 2px solid #fff;
    position: relative;
    z-index: 2;
    box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.3);
}

.custom_btn
{
    line-height: .9em;
    background: #c31a09;
    display: inline-block;
    color: #fff !important;
    text-transform: uppercase;
    height: 55px;
    padding: 19px 15px;
    text-decoration: none;
    border-radius: 7px;
    border: 2px solid #fff;
    position: relative;
    z-index: 2;
    box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.3);
}





    .custom_btn:hover
    {
        top: 1px;
    }

    .custom_btn::after
    {
        height: 41px;
        width: 41px;
        display: block;
        position: absolute;
        right: -17px;
        top: 5px;
        z-index: -1;
        border: 2px solid #fff;
        content: "";
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        background: #c31a09;
        border-bottom: none;
        border-left: none;
        border-radius: 7px;
    }

    .custom_btn.left::after
    {
        transform: rotate(225deg);
        right: auto;
        left: -17px;
    }


.option .custom_btn::after
{
    height: 55px;
    width: 52px;
    display: block;
    position: absolute;
    right: -22px;
    top: 7px;
}

.blue, .custom_btn.blue, .custom_btn.blue:after
{
    background: #037a91;
}

.yellow, .custom_btn.yellow, .custom_btn.yellow:after
{
    background: #C6BD2D
}

.orange, .custom_btn.orange, .custom_btn.orange:after
{
    background: #f28102
}

.custom_btn.custom_pill_button.orange:after
{
    display: none !important;
}

button.custom_pill_btn a
{
    color: #FFF !important;
}

#dict-btns .custom_pill_btn, .no-ht
{
    height: unset;
}
/*ARROW BUTTONS*/
.inner-navigation .btn-arrow-right,
.inner-navigation .btn-arrow-left
{
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
}

.inner-navigation .btn-arrow-right
{
    padding-left: 36px;
}

.inner-navigation .btn-arrow-left
{
    padding-right: 36px;
}

@media(max-width: 440px)
{
    .inner-navigation .btn-arrow-right
    {
        padding-right: 9px;
    }

    .inner-navigation .btn-arrow-right
    {
        padding-left: 16px;
    }
}

.inner-navigation .btn-arrow-right:before,
.inner-navigation .btn-arrow-right:after,
.inner-navigation .btn-arrow-left:before,
.inner-navigation .btn-arrow-left:after
{
    /* make two squares (before and after), looking similar to the button */

    content: "";
    position: absolute;
    top: 4px;
    /* move it down because of rounded corners */

    width: 22px;
    /* same as height */

    height: 22px;
    /* button_outer_height / sqrt(2) */

    background: inherit;
    /* use parent background */

    border: inherit;
    /* use parent border */

    border-left-color: transparent;
    /* hide left border */

    border-bottom-color: transparent;
    /* hide bottom border */

    border-radius: 0px 4px 0px 0px;
    /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */

    -webkit-border-radius: 0px 4px 0px 0px;
    -moz-border-radius: 0px 4px 0px 0px;
}

.inner-navigation .btn
{
    height: unset;
    font-size: unset;
    line-height: unset;
}

    .inner-navigation .btn span
    {
        position: unset;
    }

.inner-navigation .btn-arrow-right:before,
.inner-navigation .btn-arrow-right:after
{
    transform: rotate(45deg);
    /* rotate right arrow squares 45 deg to point right */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.inner-navigation .btn-arrow-left:before,
.inner-navigation .btn-arrow-left:after
{
    transform: rotate(225deg);
    /* rotate left arrow squares 225 deg to point left */

    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
}

.inner-navigation .btn-arrow-right:before,
.inner-navigation .btn-arrow-left:before
{
    /* align the "before" square to the left */

    left: -10px;
}

.inner-navigation .btn-arrow-right:after,
.inner-navigation .btn-arrow-left:after
{
    /* align the "after" square to the right */

    right: -11px;
}

.inner-navigation .btn-arrow-right:after,
.inner-navigation .btn-arrow-left:before
{
    /* bring arrow pointers to front */
    /*   z-index:-2;*/
}

.inner-navigation .btn-arrow-right:before,
.inner-navigation .btn-arrow-left:after
{
    /* hide arrow tails background */

    background-color: white;
}


.form-box
{
    border-right: 1px solid gray;
}

    .form-box fieldset
    {
        padding: 0;
    }

.pagedisplay.form-control
{
    width: 33%;
}



.social-login
{
    border: 1px solid #ccc;
    margin: 20px 3px 10px 30px;
}

    .social-login img
    {
        border-right: 1px solid #ccc;
        margin: 3px;
        padding: 3px 8px 3px 3px;
        display: inline;
    }

    .social-login span
    {
        position: relative;
        top: -18px;
    }

/**/

/* Headings */


.widget p
{
    font-size: 18px;
    line-height: 22px;
}



.h2Sub
{
    margin-left: 15px;
    font-style: italic;
    font-size: 16px;
    font-variant-caps: normal;
    display: inline-block;
}

.pageTitle
{
    font-size: 36px;
    line-height: 43px;
    font-weight: normal;
    text-align: center;
}

.pageSubTitle
{
    font-size: 20px;
    font-weight: normal;
    line-height: 27px;
    margin: 10px 0 10px 3px;
    text-align: center;
}

.highlight-yellow
{
    background-color: #fcfc56;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: 1.2px;
}





h3
{
    font-size: 23px;
    line-height: 28px;
    color: #666;
    font-weight: normal;
}



h5
{
    font-size: 20px;
    font-weight: normal;
    line-height: 27px;
}

    h5.imperative a
    {
        color: #fc4a10;
        font-weight: 600;
    }

.card-body > h5
{
    margin-bottom: .75rem;
    margin-top: .75rem;
    color: unset;
}

.card-img-top
{
    width: 100%;
    height: 180px;
    object-fit: cover;
}



.global-label
{
    border: 1px solid #2d98ad;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #2d98ad;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
    display: inline-block;
    padding: 6px;
    margin-right: 10px;
    width: unset;
}

    .global-label.gold
    {
        border: 1px solid #f28102;
        background-color: rgba(247, 148, 3, 0.76);
    }

    .global-label.green
    {
        border: 1px solid #005a3c;
        background-color: #2e8b57;
    }

.spacePipe
{
    display: inline;
    margin: 0 5%;
}

span.target-descriptor
{
    font-style: italic;
    font-size: .9em;
    float: right;
    margin-top: 7px;
}


#symbolKey > div.global-label
{
    float: left;
    margin-top: 5px;
}

#shareKey
{
    display: inline;
}

#assignKey
{
    display: inline;
}

    #assignKey > .tooltip, #shareKey > .tooltip
    {
        margin-right: 5px;
    }

.box-title
{
    position: relative;
    top: 10px;
    left: 10px;
}

h6
{
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
}

h3.step
{
    font-size: 24px;
    display: inline;
    font-weight: normal;
    text-transform: uppercase;
}

.stepDescription
{
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 3px 0;
}

    .stepDescription span
    {
        font-size: .7em;
    }

/* ====================================================================
   Step-Row Shell — .lw-step-row
   Phase 1 standardization (UI-STEP-LAYOUT-PHASE1-CSS-WRAPPER-STANDARDIZATION-001)
   Applied to all "Step N:" wrapper rows across teacher/admin views.
   ==================================================================== */
.lw-step-row {
    align-items: center;
}

.lw-step-row h3 {
    margin-bottom: 0;
}

.headerSub
{
    margin-left: 15px;
    font-style: italic;
    font-size-adjust: .35;
}

.fa-info-circle
{
    color: #037a91;
}

.cl
{
    display: block;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
    clear: both;
}

.notext
{
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
}

.left, .alignleft
{
    float: left;
    display: inline;
}

.right, .alignright
{
    float: right;
    display: inline;
}

#wrap td.textAlignLeft
{
    text-align: left;
}

#wrap td.textAlignRight
{
    text-align: right;
}

td.textAlignLeft
{
    text-align: left;
}

td.textAlignRight
{
    text-align: right;
}

.shell
{
    width: 1100px;
    margin: 0 auto;
    position: relative;
}

.main .shell
{
    min-height: 400px;
}

.teach-page .shell
{
    min-height: 279px;
}

.wrapper
{
    background: #fff;
    flex: 1 0 auto;
}

.header
{
    position: relative;
    height: 100%;
    padding-bottom: 38px;
}

.header1
{
    align-items: center;
}
/* padding-bottom:38px;

/* Home Pade Navigation */


#home-navigation ul
{
    list-style: none outside;
}

    #home-navigation ul li
    {
    }

        #home-navigation ul li a
        {
            font-size: 18px;
            text-transform: uppercase;
        }

            #home-navigation ul li a.reg
            {
                color: #037a91;
            }

@media (max-width:768px)
{
    .navbar-brand img
    {
        max-width: 90%;
    }

    .navbar-brand
    {
        margin-right: 0;
    }
}

@media (max-width:556px)
{
    .navbar-brand img
    {
        max-width: 80%;
    }

    .navbar-toggler
    {
        padding: .25rem .5rem;
        font-size: 1rem;
    }

    a.navbar-brand
    {
        width: 326px;
    }
}

@media (max-width:430px)
{
    .navbar-toggler
    {
        padding: .25rem .35rem;
        font-size: .75rem;
    }

    a.navbar-brand
    {
        width: 226px;
    }
}




.account
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666;
    padding: 5px 0 5px 0;
    background-color: #f7f7f7;
}

#account-info
{
    text-transform: capitalize;
}

.account a.name
{
}






/* Navigation when logged in */
#navigation
{
}

    #navigation ul
    {
        list-style: none outside;
    }

        #navigation ul li
        {
            padding-left: 5px;
        }

            #navigation ul li a
            {
                font-size: 22px;
                text-transform: uppercase;
            }
/*                    #navigation ul li.teach a {
                        background-image: url(images/nav01.png);
                    }

                    #navigation ul li.manage a {
                        background-image: url(images/nav02.png);
                    }

                    #navigation ul li.collaborate a {
                        background-image: url(images/nav03.png);
                    }

                    #navigation ul li.help a {
                        background-image: url(images/nav04.png);
                    }*/
@media (max-width:992px)
{
    #navigation
    {
        background-color: #f3f1fd;
        padding-right: 5px;
    }

        #navigation ul li a
        {
            background-repeat: no-repeat;
            background-position: 0 0;
            height: 45px;
            line-height: 25px;
            font-size: 17px;
            text-transform: uppercase;
            padding-left: 0;
            float: none;
        }

        #navigation ul li.teach a
        {
            background-image: none;
        }

        #navigation ul li.manage a
        {
            background-image: none;
        }

        #navigation ul li.collaborate a
        {
            background-image: none;
        }

        #navigation ul li.help a
        {
            background-image: none;
        }

        #navigation ul li a:hover
        {
            background-color: #bcbcbc;
        }
}

#navigation ul li.teach.nav-item.dropdown.dropdown-item > div a
{
    background-image: none !important;
}

#navigation ul li a:hover
{
    text-decoration: none;
    background-position: 0 1px;
}


#print-sheet-nav
{
    padding-bottom: 5px;
}

    #print-sheet-nav ul
    {
        list-style: none outside;
    }

        #print-sheet-nav ul li
        {
            float: left;
            padding-left: 5px;
        }

            #print-sheet-nav ul li a
            {
                background-repeat: no-repeat;
                background-position: 0 0;
                height: 66px;
                line-height: 20px;
                font-size: 17px;
                text-transform: uppercase;
                padding-left: 65px;
                float: left;
            }



#print-sheet-nav
{
    text-align: center;
}

    #print-sheet-nav li a
    {
        line-height: 20px;
    }

.main
{
    min-height: 600px;
}

/* .main-top {
            min-height: 286px;
        } */

@media (max-width:992px)
{
    .main-top
    {
        min-height: 110px;
    }
}

@media (max-width:768px)
{
    .main-top
    {
        min-height: 100px;
    }
}

.main h3 :not(.ui-accordion-header)
{
    font-size: 24px;
    text-transform: uppercase;
}
/*bootstrap accordion overrides*/

.card-header
{
    padding: 0;
}

    .card-header .btn
    {
        color: #3598ab;
        font-size: 18px;
        font-weight: bold;
        padding-left: .2rem;
    }

/* .card-body {
            padding: 0 0 0 1rem
        } */
.card-text
{
    font-size: 1rem;
    line-height: 1.35rem;
}

.card-body ol
{
    margin-bottom: 0;
}

.card-body li
{
    padding: 5px 0;
    font-size: 16px;
}


.h2sub
{
    width: auto;
    margin: 7px 0 10px 10px;
    font-size: 20px;
    font-weight: normal;
    line-height: 27px;
    display: inline-block;
    font-style: italic;
}


.printPagePDF
{
    background-image: url(images/pdf.png);
}

.printPagePrint
{
    background-image: url(images/printer.jpg);
}

.printPageWord
{
    background-image: url(images/word.jpg);
}

.small-height
{
    min-height: 0;
}

    .small-height h2
    {
        padding-top: 16px;
    }


.home-cnt
{
    float: right;
    width: 394px;
}
    /* padding-top:25px; */
    .home-cnt h2
    {
        padding-bottom: 15px;
        text-align: left;
        text-transform: none;
    }

    .home-cnt h3
    {
        padding-bottom: 19px;
    }


/* .home-actions a.more {
            line-height: 53px;
            font-size: 20px;
            text-transform: uppercase;
            padding-right: 16px;
            background: url(images/arrow.png) no-repeat right center;
            padding-left: 10px;
        } */

/* Inner Page Navigation with dropdown menu */
.inner-navigation .btn
{
    color: #fff;
    /*        background: url(images/inner-nav-bg.png) no-repeat;
        height: 37px;
        padding: 2px 0 10px 10px;
        position: relative;
        float: left;
        margin: 9px 0 10px -10px;*/
}

.inner-navigation ul
{
    list-style: none outside;
    float: left;
}

    .inner-navigation ul li
    {
        float: left;
        position: relative;
        z-index: 5;
    }

        .inner-navigation ul li:hover
        {
            /*    z-index: 5;*/
        }


@media(max-width: 768px)
{
    .inner-navigation ul li a
    {
        font-size: 16px;
    }
}

@media(max-width: 600px)
{
    .inner-navigation ul li a
    {
        font-size: 14px;
    }
}

@media(max-width: 485px)
{
    .inner-navigation ul li a
    {
        font-size: 12px;
    }
}



span.teach-nav-arrow
{
    position: absolute;
    top: 0px;
    right: -27px;
    width: 27px;
    height: 39px;
    display: block;
    background: url(images/inner-nav-arrow.png) no-repeat;
    z-index: 100;
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
}

.inner-navigation ul li.first a
{
    padding-left: 14px;
}

.inner-navigation ul li a:hover,
.inner-navigation ul li:hover > a
{
    text-decoration: none;
}

    .inner-navigation ul li a:hover span,
    .inner-navigation ul li:hover a span
    {
        background-position: 0 bottom;
    }

/* Dropdown */
.dd
{
    display: none;
    height: 41px;
    position: absolute;
    /*        top: 38px;
        left: 3px;*/
}

.inner-navigation ul li ul
{
    white-space: nowrap;
    float: none;
    height: 41px;
    padding-right: 5px;
}

.inner-navigation ul li.last .dd
{
    left: auto;
    right: 0;
}

.inner-navigation ul li ul li
{
    padding: 0 11px;
    position: static;
    float: none;
    display: inline;
}

    .inner-navigation ul li ul li:hover > a
    {
        background: transparent;
    }

    .inner-navigation ul li ul li a
    {
        font-size: 14px;
        line-height: 40px;
        color: #c11217;
        background: transparent;
        text-transform: none;
        padding: 0;
        float: none;
        display: inline;
    }

        .inner-navigation ul li ul li a:hover,
        .inner-navigation ul li ul li a.active
        {
            background: transparent;
            color: #3598ab;
        }

/*    .inner-nav-right
    {
        position: absolute;
        top: 0;
        right: -30px;
        background: url(images/inner-nav-right.png) no-repeat;
        width: 30px;
        height: 50px;
        z-index: 0;
        font-size: 0;
        line-height: 0;
        text-indent: -4000px;
    }*/

.stick
{
    position: fixed !important;
    top: 0;
    z-index: 1000;
}
/* Tables */
.table-holder
{
    padding-bottom: 40px;
}

.table-headings
{
    padding-top: 2px;
    position: relative;
    height: 100%;
}

    .table-headings span.tleft,
    .table-headings span.tright
    {
        position: absolute;
        background: url(images/top-right.png) no-repeat;
        width: 5px;
        height: 5px;
        top: 1px;
        left: -1px;
        border-right: 0;
        padding: 0;
        display: block;
        z-index: 15;
    }

    .table-headings span.tright
    {
        left: auto;
        right: -1px;
        background-position: right 0;
    }

    .table-headings table
    {
        background: #eee;
        position: relative;
        border: 1px solid #dadada;
    }

        .table-headings table th
        {
            height: 53px;
            font-size: 18px;
            font-family: Arial, sans-serif;
            color: #333;
            font-weight: normal;
            padding-left: 42px;
            text-align: left;
        }

.table-words
{
    max-height: 310px;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 1px solid #dadada;
    position: relative;
}

    .table-words table
    {
        border: 1px solid #dadada;
        border-top: 0;
        border-bottom: 0;
        font-size: 14px;
        color: #333;
    }

        .table-words table td
        {
            border-bottom: 1px solid #dadada;
            padding: 8px 0 7px 42px;
            vertical-align: top;
        }

            .table-words table td:first-child
            {
                width: 267px;
            }

            .table-words table td.second
            {
                width: 316px;
            }

            .table-words table td input
            {
                position: absolute;
                top: 4px;
                left: -27px;
                margin: 0;
                width: 13px;
                height: 13px;
                display: block;
            }

        .table-words table tr.blue-line td
        {
            background: #f2f8ff;
        }

        .table-words table tr.purple-line td
        {
            background: #f3f1fd;
        }

        .table-words table tr.ocher-line td
        {
            background: #fbf0e4;
        }

        .table-words table tr.last td
        {
            border-bottom: 0;
        }

.cell-entry
{
    position: relative;
}

.editTable
{
    margin: 10px 0px;
    table-layout: fixed;
}

.editTable.lw-auto-width-table
{
    table-layout: auto;
}

.editTable .lw-shrink-col
{
    width: 1%;
    white-space: nowrap;
}

.editTable .lw-fill-col
{
    width: auto;
}

    .editTable.respTable
    {
        table-layout: auto;
    }

    .editTable, .editTable td
    {
        border: 1px solid #CCC;
        border-collapse: collapse;
    }

        .editTable th, .editTable .headerRow
        {
            background: #eee;
            color: #666;
            padding: 5px 10px;
            border: 1px solid #CCC;
        }

        .editTable .highlight th, .editTable .highlight td
        {
            background: #E60000;
            color: #fff;
        }

        .editTable .highlightRed th, .editTable .highlightRed td
        {
            background: #E60000;
            color: #fff;
        }

        .editTable tr td
        {
            padding: 3px;
            color: #666;
            word-wrap: break-word;
            font-size: 13px;
        }

#lit-sprt td
{
    height: 3rem;
    width: 8rem;
}

#lit-sprt td, #lit-sprt th
{
    text-align: center;
}

@media only screen and (max-width : 480px)
{
    .editTable tr td
    {
        font-size: 11px;
    }
}

.card .editTable
{
    margin: 0;
}

#wordsDiv > table > tbody > tr > td:nth-child(3)
{
    word-wrap: break-word
}

#wordsDiv > table > tbody > tr > td:nth-child(4)
{
    word-wrap: break-word
}

@media(max-width: 768px)
{
    .reverse-order
    {
    }

    .learnmore-table
    {
        order: 1
    }
}




table.tablesorter.shareTable
{
    margin-bottom: 0;
}


.editTable th, .editTable .headerRow .lesson-component-option-header
{
    font-size: 16px;
    background-color: #f5f5f5;
    color: #333;
    text-align: left;
}

#tchr
{
    width: 20%;
}

#sbj
{
    width: 10%;
}

#grd
{
    width: 5%;
}

#act
{
    width: 10%;
}

@media (max-width:1200px)
{
    .editTable th, .editTable .headerRow .lesson-component-option-header
    {
        font-size: 14px;
    }

    #tchr
    {
        width: 20%;
    }

    #sbj
    {
        width: 10%;
    }

    #grd
    {
        width: 8%;
    }

    #act
    {
        width: 10%;
    }
}

@media (max-width:767px)
{
    .editTable th, .editTable .headerRow .lesson-component-option-header
    {
        font-size: 12px;
    }

    #tchr
    {
        width: 20%;
    }

    #sbj
    {
        width: 12%;
    }

    #grd
    {
        width: 10%;
    }

    #act
    {
        width: 12%;
    }
}

@media (max-width:767px)
{
    .editTable th, .editTable .headerRow .lesson-component-option-header
    {
        font-size: 10px;
    }

    #tchr
    {
        width: 20%;
    }

    #sbj
    {
        width: 14%;
    }

    #grd
    {
        width: 12%;
    }

    #act
    {
        width: 14%;
    }
}

.ex-words
{
    font-weight: normal;
    padding: 0 10px;
    font-style: italic;
}

.keytable
{
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 80%;
    margin-bottom: 15px;
}

.types
{
    background: url(images/step2.png) no-repeat;
    width: 967px;
    height: 16px;
    padding: 20px 21px 24px 21px;
    margin-bottom: 30px;
    font-size: 18px;
}

    .types label
    {
        float: left;
        margin-right: 54px;
        padding: 0 0 0 24px;
        position: relative;
        cursor: pointer;
        font-size: inherit;
        width: auto;
    }

        .types label input
        {
            height: 13px;
            width: 13px;
            position: absolute;
            top: 3px;
            left: 0;
        }
/*DICTIONARY*/
#definition, #sentence
{
    padding: 5px;
    line-height: 1.5rem;
}

#base, #past, #progressive, #third_person, #past_participle
{
    padding: 1px;
}
/*HELP*/
a#SupportTicketLink
{
}
/*Video display*/



.video-display
{
    margin-bottom: 200px;
    display: inline-block;
}


/* Options (widget-style) Section*/
.options
{
    padding: 15px 86px 0 86px;
}

    .options h3
    {
        padding-bottom: 40px;
    }

#printFlashCards, #printQuestionList
{
    border: 1px solid #037b91;
    margin-left: 4px;
}

#FlashCardsTable
{
    overflow: hidden;
    border-left: 2px dotted black;
    border-right: 2px dotted black;
}

.FlashCardsRow
{
    margin-bottom: 10px;
    margin-top: 5px;
    border-bottom: 2px dotted black;
    border-top: 2px dotted black;
    padding: 0;
}

.FlashCardsLeft
{
    display: inline-block;
    border-right: 2px dotted black;
    margin: 0;
    line-height: 8rem;
}

@media (max-width: 500px)
{
    .FlashCardsLeft
    {
        font-size: 1.2rem;
    }
}

.FlashCardsRight
{
    display: inline-block;
    margin: 0;
    line-height: 1.5rem;
}

#interactiveFlashCards
{
    border: 1px solid #037b91;
    margin-left: 4px;
}

.option
{
    padding-bottom: 35px;
}

    .option .custom_btn
    {
        line-height: 1em;
    }

    .option a .aftspan
    {
        position: absolute;
        top: -18px;
        left: -107px;
        background-position: 0 0;
        background-repeat: no-repeat;
        width: 86px;
        height: 92px;
        display: block;
    }

    .option a.box-blue span
    {
        background-image: url(images/sheets1.png);
    }

    .option a.box-yellow span
    {
        background-image: url(images/sheets2.png);
    }

    .option a.box-orange span
    {
        background-image: url(images/sheets3.png);
    }

    .option a .em
    {
        font-style: normal;
        font-size: 15px;
        line-height: 18px;
        text-transform: none;
    }

    .option .custom_btn
    {
        height: 4.5rem;
    }

@media (max-width: 1200px)
{
    .option .custom_btn::after
    {
        height: 52px;
    }
}

@media(max-width: 992px)
{
    .option .custom_btn
    {
        height: 4.1rem;
    }

    .option a em
    {
        left: 154px;
    }

    .option .custom_btn::after
    {
        height: 46px;
        width: 51px;
        right: -25px;
        top: 8px;
        transform: rotate(45deg);
        -webkit-transform: rotate(46deg);
    }

    .option a em
    {
        line-height: 17px;
    }
}

@media(max-width: 767px)
{
    .option .custom_btn
    {
        height: 4rem;
    }

    .option a em
    {
        left: 161px;
        top: 17px;
    }
}

@media(max-width: 576px)
{
    .option .custom_btn
    {
        height: 3.5rem;
    }

    .option a em
    {
        left: 115px;
        top: 17px;
    }

    .aftspan
    {
        top: 6px;
        left: -55px;
        width: 50px;
        height: 50px;
    }

    .blue span, .yellow span, .orange span
    {
        background-size: contain;
    }

    .option .custom_btn::after
    {
        height: 42px;
        width: 42px;
        right: -21px;
        top: 5px;
    }
}

.option a.box-blue em
{
    width: 200px;
}

.option a.box-yellow em
{
    width: 275px;
}

.option a.box-orange em
{
    width: 275px;
}


@media(max-width:472px)
{
    .option a em
    {
        left: 95px;
        top: 17px;
        font-size: 12px;
    }
}



.main-bottom
{
    /* background: #3598ab; */
    padding: 18px 0 21px 0;
}

@media only screen and (min-width: 992px)
{
    .main-bottom
    {
        min-height: 390px;
    }
}

.main-bottom img.bg-img
{
    position: absolute;
    bottom: -9px;
    left: 176px;
    display: block;
}


.tab-page-h2
{
    margin: 100px 0 50px 0;
}

.main-bottom.teach-page
{
    margin-top: 200px;
}

.main-bottom.manage-page
{
    margin-top: 160px;
}

.bg-color-wrapper
{
    background: #3598ab;
}

.teach-box
{
    padding-bottom: 200px;
}

@media (max-width:992px)
{
    h2
    {
        font-size: 22px;
    }

    .tab-page-h2
    {
        margin: 25px 0 0px 0;
    }

    .main-bottom.teach-page
    {
        margin-top: 120px;
    }

    .teach-box
    {
        padding-bottom: 0;
    }

        .teach-box.last
        {
            padding-bottom: 100px;
        }
}



/* Home Page Widget Section */
.widget
{
    border-radius: 3px;
    background-color: #037a91;
}



    .widget h4
    {
        padding-bottom: 10px;
    }

    .widget ul
    {
        list-style: none outside;
    }

        .widget ul li
        {
            padding-bottom: 20px;
        }





    .widget a
    {
        font-size: 14px;
        color: #fff;
        position: relative;
        height: 100%;
    }

        .widget a.play-ico
        {
            padding: 10px 0 0 0;
        }

        .widget a span
        {
            position: absolute;
            top: 0;
            left: -64px;
            background-position: 0 0;
            background-repeat: no-repeat;
            display: block;
            width: 49px;
            height: 51px;
        }

        .widget a.play-ico span
        {
            width: 37px;
            height: 38px;
            left: -49px;
        }

        .widget a.teach-ico span
        {
            background-image: url(images/service01.png);
        }

        .widget a.manage-ico span
        {
            background-image: url(images/service02.png);
        }

        .widget a.collaborate-ico span
        {
            background-image: url(images/service03.png);
        }

        .widget a.blog-ico span
        {
            background-image: url(images/service04.png);
        }

        .widget a.fb-ico span
        {
            background-image: url(images/fb.png);
        }

        .widget a.tw-ico span
        {
            background-image: url(images/tw.png);
        }

        .widget a.play-ico span
        {
            background-image: url(images/video.png);
        }

        .widget a:hover span
        {
            background-position: 0 1px;
        }

@media(max-width:768px)
{
    .widget ul li
    {
        padding-bottom: 36px;
    }

    /* .widget.last {
                margin-bottom: 150px;
            } */
}




/* Services (widget-style) Section */
.service
{
    padding: 0 17px 43px 0;
    position: relative;
    height: 100%;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
}

    .service.last
    {
        padding-right: 0;
    }

    .service img
    {
        position: absolute;
        top: -266px;
    }

.service-2-3-mobile
{
    display: none;
}



.service h3
{
    position: absolute;
    top: -83px;
    left: -5px;
    background: url(images/title-large.png) no-repeat;
    height: 65px;
    padding-left: 57px;
    font-size: 28px;
    color: #fff;
    text-transform: uppercase;
    line-height: 90px;
}

    .service h3 span
    {
        background: url(images/title-large-shadow.png) no-repeat right 0;
        height: 65px;
        padding-right: 57px;
        display: block;
        position: relative;
        margin-right: -44px;
    }

.service div
{
    padding-left: 10px;
}

.service ul
{
    padding: 2px 0 5px 22px;
}

.service li
{
    line-height: 1.3em;
    padding-bottom: 10px;
}

.service a.btn
{
    font-size: 18px;
    line-height: 54px;
    margin-left: 14px;
}

.service-text
{
    min-height: 100px;
}


@media (max-width: 1200px)
{
    .service img
    {
        max-width: 85%;
        top: -225px;
    }
}

@media (max-width: 575px)
{
    .service-img
    {
        display: none;
    }

    .service-text
    {
        min-height: 140px;
    }

    .service-2-3-mobile
    {
        background-color: #fff;
        height: 60px;
        display: block;
        margin: 0 -18px 0 0px;
    }

    .service-2-3-h3
    {
        top: -5px !important;
    }

    .second .bullet, .last .bullet
    {
        top: 46px;
    }

    .second .service-2-3-mobile, .last .service-2-3-mobile
    {
        height: 60px;
        margin: 0px 0px 0 0px;
    }

    .teach-box.second h3, .teach-box.last h3
    {
        top: 45px;
    }
}

@media(min-width: 576px) and (max-width: 767px)
{
    .service img
    {
        display: none;
    }

    .service-text
    {
        min-height: 140px;
    }

    .service-2-3-mobile
    {
        background-color: #fff;
        height: 60px;
        display: block;
        margin: 0 -130px 0 -113px;
    }

    .service-2-3-h3
    {
        top: -5px !important;
    }

    .second .bullet, .last .bullet
    {
        top: 46px;
    }

    .second .service-2-3-mobile, .last .service-2-3-mobile
    {
        height: 60px;
        margin: 0 -113px 0 -114px;
    }

    .teach-box.second h3, .teach-box.last h3
    {
        top: 45px;
    }
}

@media (min-width: 768px) and (max-width: 991px)
{
    .service img
    {
        display: none;
    }

    .service-text
    {
        min-height: 140px;
    }

    .service-2-3-mobile
    {
        background-color: #fff;
        height: 60px;
        display: block;
        margin: 0 -152px 0 -136px;
    }

    .service-2-3-h3
    {
        top: -5px !important;
    }
}




@media (max-width:768px)
{
    .serv2 h3, .serv3 h3
    {
        top: -5px;
    }
}
/* Teaching Page widgets */



@media (max-width:992px)
{
    .teach-box h3, .manage-box h3
    {
        display: none;
    }
}



.teach-box ul
{
    list-style: none outside;
    padding: 13px 20px 0 38px;
}

    .teach-box ul li
    {
        background: url(images/bullet-small.png) no-repeat;
        padding: 0 0 27px 36px;
    }

        .teach-box ul li a
        {
            font-size: 20px;
            line-height: 2rem;
            text-transform: initial;
        }

@media (min-width:992px)
{
    .teach-box ul li a
    {
        color: #fff;
    }

    .bullet
    {
        position: absolute;
        top: -110px;
        left: 38px;
    }
}

@media (min-width: 768px) and (max-width:992px)
{
    .second .bullet, .last .bullet
    {
        top: 46px;
    }

    .second .service-2-3-mobile, .last .service-2-3-mobile
    {
        height: 60px;
        margin: 0 -135px 0 -135px;
    }

    .teach-box.second h3, .teach-box.last h3
    {
        top: 45px;
    }
}

.bullet a
{
    font-size: 24px;
    text-transform: uppercase;
    line-height: 37px;
}

@media (max-width:1200px)
{
    .bullet a
    {
        font-size: 22px;
    }
}

.bullet a span
{
    background: url(images/bullet.png) no-repeat;
    width: 41px;
    height: 42px;
    float: left;
    position: relative;
    margin-left: -41px;
    text-align: center;
    color: #fff;
    padding-left: 7px;
    margin-right: 5px;
}

.bullet a:hover
{
    text-decoration: none;
}

    .bullet a:hover span
    {
        top: 1px;
    }


/* Manage Page widgets */
.manage-box
{
    float: left;
    position: relative;
    height: 100%;
    padding-right: 60px;
}

    .manage-box.second
    {
        padding-right: 20px;
    }

    .manage-box.last
    {
        padding-right: 0;
    }

    .manage-box h3, .teach-box h3
    {
        position: absolute;
        top: -73px;
        left: 20px;
        height: 55px;
        background: url(images/title.png) no-repeat;
        padding-left: 55px;
        font-size: 18px;
        font-style: italic;
        text-transform: none;
        line-height: 86px;
        color: #fff;
    }

        .manage-box h3 span, .teach-box h3 span
        {
            background: url(images/title-shadow.png) no-repeat right bottom;
            height: 55px;
            padding-right: 90px;
            display: block;
            position: relative;
            margin-right: -32px;
        }

.teach-box h4
{
    color: #037a91
}

.manage-box ul
{
    list-style: none outside;
    padding: 13px 20px 0 35px;
}

    .manage-box ul li
    {
        background: url(images/bullet-small.png) no-repeat;
        padding: 0 0 27px 36px;
    }

        .manage-box ul li a
        {
            font-size: 20px;
            line-height: 20px;
            color: #fff;
            text-transform: uppercase;
        }




/* Footer Layout */
.footer
{
    font-family: 'ProximaNovaRgRegular', sans-serif;
    border-top: 2px solid #fff;
    padding: 38px 0 45px 0;
    color: #fff;
    background-color: #037a91;
    flex-shrink: 0;
    /*position: fixed;
            bottom: 0;
            left:0;
            right:0;*/
}

    .footer p.headline
    {
        font-size: 17px;
    }

@media (max-width:552px)
{
    .footer
    {
        padding: 20px 0 10px 0;
    }

        .footer p.headline
        {
            font-size: 14px;
        }
}


.footer-nav ul
{
    list-style: none outside;
}

    .footer-nav ul li
    {
        display: inline;
        padding-right: 22px;
    }

        .footer-nav ul li a
        {
            font-size: 15px;
            color: #fff;
        }




.taskstep
{
    margin: 10px 0;
    font-size: 14px;
    background: #E7F7F2;
    line-height: 2em;
}

    .taskstep input[type="radio"], .taskstep input[type="checkbox"]
    {
        margin-left: 20px;
    }

    .taskstep label
    {
        padding: 0px 2px;
        display: inline;
        text-align: left;
        font-weight: bold;
        font-size: 14px;
        vertical-align: middle;
    }

#prompts
{
    margin-bottom: 5px;
}

.design-page-accordion
{
    padding: 0px !important;
}

.design-display-row
{
    padding: 10px 0;
    max-width: 770px;
    border-bottom: 1px solid gray;
    text-align: justify;
}

.design-display-image-wrap
{
    display: inline-block;
    vertical-align: middle;
}

    .design-display-image-wrap img
    {
        max-width: 700px !important;
    }

.design-display-row input[type="radio"]
{
    vertical-align: middle;
}

.design-subcategory
{
    padding-left: 45px;
}

.additional-icons
{
    text-align: center;
    max-width: none;
}

    .additional-icons img
    {
        max-width: 100px !important;
        max-height: 100% !important;
        vertical-align: text-top;
        padding: 0 10px;
    }
/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
fieldset
{
    border: none;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

    fieldset legend
    {
        display: none;
    }

#message-create fieldset
{
    padding-left: 0;
}


.form-row-instructions + .form_row
{
    padding-top: 2px;
}





label, .label
{
    font-size: 14px;
    line-height: 1em;
}

.label-hang
{
    padding-left: 120px;
}

#helpForm label
{
    padding: 10px 0;
    display: inline-block;
    text-align: left;
    width: 85px;
}

#groupCreationFields > div > label
{
    text-align: left;
    width: 99px;
}

.loginPage label
{
    padding: 5px 0 0 0;
    text-align: left;
}

#sheltered-instruction-accordion
{
    width: 90%;
}

#diff-group-form > label
{
    width: 100%;
}

#questions
{
    font-size: 60%;
}

div#messages fieldset
{
    padding-left: 0;
}

#messages label, #message-create label
{
    font-weight: bold;
    width: 60px;
}

.unread
{
    font-weight: bold;
    color: green;
}

#message-create label, #message-archive > fieldset > span.label
{
    font-weight: bold;
}

#message-archive > fieldset > div.field
{
    display: inline-block
}

#messages div.form_row
{
    padding: 2px 0;
}

.thismessage
{
    width: 570px;
    padding: 5px;
    overflow: auto;
}

    .thismessage:nth-of-type(odd)
    {
        background: #fffed5;
        border: #f6f49b 2px solid;
    }

    .thismessage:first-of-type
    {
        background: #ecfff4;
        border: #d6fee7 2px solid;
    }



#reply textarea
{
    color: #000;
    margin: 3px 0 5px 3px;
}

#RememberMe
{
    margin-top: 4px;
}

.describe
{
    padding: 5px 0;
    border-style: dashed;
    border-width: 1px;
    display: inline-block;
    text-align: left;
    float: right;
    width: 400px;
    font-size: 12px;
    line-height: 100%;
    vertical-align: middle;
}

label.error
{
    float: none;
    color: #c11217;
    padding-left: .5em;
    width: auto;
    vertical-align: middle !important;
}

input.error, select.error, textarea.error
{
    border: 2px solid #c11217 !important;
    border-radius: 3px;
}


/* for mvc genereated forms */
#embedCodeRow > span > span
{
    vertical-align: top !important;
}



#message-create #tabs
{
    border: none;
    width: 78%;
    float: right;
    margin-right: 162px;
}



#message-create textarea
{
    width: 60%;
}


div.editor-label
{
    padding: 10px 5px;
    text-align: left;
    font-size: 16px;
}

div.editor-field
{
    padding: 5px 0;
    margin: 5px;
}

div.editor-explain
{
    padding: 10px 0;
    float: right;
    text-align: left;
    width: 300px;
    font-size: 14px;
    border-style: dashed;
}

/* #contact-form #clientCaptcha {
        float: right;
    } */

#ContactFormSubmitted
{
    margin: 30px;
}



div.register-label
{
    padding: 10px 0;
    text-align: left;
    font-size: 16px;
}

.two-line-validation span
{
    display: block;
    text-align: center;
}



.register-label label
{
    font-size: 16px;
}

@media only screen and (max-width : 480px)
{
    .register-label label
    {
        margin-left: 1rem;
    }
}




textarea
{
    min-height: 75px;
    border: 1px solid #4E4E4E;
}



#message-create input[type="text"]
{
    width: 60%;
}

.approvePage
{
    float: left;
}

.buttonBox
{
    float: right;
    width: 50px;
}

.field-validation-error, .field-required
{
    color: red;
    font-size: .9em;
    position: absolute;
    left: 33px;
    top: 9px;
}

    .field-validation-error.videoValidation
    {
        left: -103px;
    }

    .field-required.adjusted-star
    {
        left: 11px;
        top: 0;
    }

    .field-required.reg-fix
    {
        left: -5px;
    }

#pastetext .field-required
{
    left: 9px;
    top: -2px;
}

#pastetext .field-validation-error
{
    left: -42px;
}

#titleEdit .field-validation-error
{
    top: -19px;
}

#logonForm .field-validation-error
{
    display: none;
}

#message-create .field-required
{
    position: unset !important;
}

/*NOTE 2/21/12: this will become dynamic and with values from design page*/
.component-rules
{
    width: 100%;
    text-align: center;
}

.center-contents
{
    margin: 0 auto;
}

.lesson-section-header
{
    margin-bottom: 30px;
}

.reading-header
{
    display: inline-block;
    width: 550px;
    border: 1px solid black;
    padding: 5px;
}

.component-top
{
    min-height: 100px;
    padding: 10px 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid black;
    background-color: rgba(128, 128, 128, 0.08);
}

    .component-top h4
    {
        color: #000;
    }

.component-icon
{
    padding-right: 20px;
    float: left;
    vertical-align: middle;
}



.component-title
{
    padding-right: 20px;
    float: left;
    vertical-align: middle;
}

.component-instruction
{
    display: inline-block;
}

.question-wrapper
{
    background-color: rgba(128, 128, 128, 0.08);
    padding: 5px 5px 40px 5px;
    border: 1px solid black;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
    border-radius: 0.25rem;
}

.whole-component
{
    width: 100%;
    border: 1px solid black;
    padding-bottom: 60px;
    margin: 25px 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}

    .whole-component > table
    {
        width: 90%;
        margin: 0 auto;
        border-width: 2px;
        border-style: Solid;
    }

.instructional-rule
{
    border: 1px solid;
    padding: 10px;
}

.lessonsheetContainer
{
    line-height: 1.5;
}

    .lessonsheetContainer img
    {
        max-width: 100%;
    }

input#print-save-share-btn
{
    background-color: #fff;
    border: none;
}

/*#lessonsheetHeroRight a:not([href]){
    color: #ca2f15
}*/



.card.character-study tr
{
    height: 40px;
}


#lessonsheet-header
{
    padding-left: 50%;
}

    #lessonsheet-header ul
    {
        list-style-type: none;
        line-height: 1.5em;
    }

#p-s-s-button
{
    float: right;
}

#lessonsheet-cp
{
    font-size: .8em;
    width: 50%;
    display: inline-block;
}

#lessonsheetHero .card-body
{
    padding: .125rem;
}

#___savetodrive_0
{
    margin: auto !important;
}

.list-item-name
{
    margin-right: 2px;
    border: none;
    font-weight: bold;
    display: inline;
}

.bottom-border
{
    width: 80%;
    border-bottom: 1px solid #000000;
    margin-left: 20%;
}

.lessonsheetContainer p.instructions
{
    font-size: 1.1em;
    margin-bottom: 15px;
    font-style: italic;
}

.lessonsheetContainer p
{
    margin: 15px 0;
}

.lesson-p
{
    overflow: hidden;
    max-width: 80ch;
}

.lessonsheetContainer span.direction
{
    font-weight: bold;
    text-decoration: underline;
    font-style: normal;
}

.lessonsheetContainer ol
{
    margin-left: 20px;
    padding-left: 20px;
}

.lessonsheetContainer .lesson-component-border
{
    border: 1px solid black;
    padding: 10px;
    line-height: 1.5em;
}


#heroAccLabel
{
    width: 89%;
}



.vocab-content
{
    display: inline-block;
}

.lesson-p
{
    max-width: 75ch;
    overflow: hidden;
}

span.QuestionDisplay
{
    font-weight: bold;
}

.wordbank
{
    border: 1px solid rgba(0,0,0,.125);
}

table.wordbanktable
{
    width: 100%;
    border: none;
}

.matching-list
{
    float: right;
    border: 1px solid;
    padding-right: 10px;
    margin-right: 5px;
    background-color: rgba(128, 128, 128, 0.08);
    line-height: 2.5em;
}

.write-sentences-line
{
    border-bottom: 2px solid black;
    margin-top: 40px;
    float: left;
    width: 90%;
}

.write-sentences span
{
    float: left;
    padding: 25px 10px 0 0;
    margin-left: 10px;
}

ol#fill-in-the-blank
{
    line-height: 2em;
}



.center-child-div
{
    display: inline-block;
    text-align: justify;
}

.center-parent-div
{
    text-align: center;
}

.component-directions
{
    margin: 10px 0;
}

.lessonsheetContainer h4
{
    color: #037A91;
}

.lessonsheetContainer .fullUnderline
{
    border-bottom: 2px solid black;
    margin: 40px 10px 0 10px;
    width: 95%;
}

#lines .fullUnderline
{
    border-bottom: 2px solid black;
    margin-top: 40px;
    width: 100%;
}

#myTabContent svg
{
    font-size: 3rem;
}


#printFlashCards .fullUnderline
{
    border-bottom: 2px solid black;
    margin-top: 40px;
    width: 100%;
}

/* lessonplan */
#lessonplan
{
    padding: 10px;
}

    #lessonplan ul
    {
        list-style-type: disc;
    }

    #lessonplan ol
    {
        list-style-type: decimal;
    }

        #lessonplan ul li, #lessonplan ol li
        {
            list-style-type: inherit;
        }

    #lessonplan li
    {
        margin-left: 20px;
        padding-left: 10px;
    }

    #lessonplan h3
    {
        padding: 20px 0 10px 0;
    }

    #lessonplan div.ActivitiesHeader,
    #lessonplan div.PronunciationActivity,
    #lessonplan div.VocabActivity,
    #lessonplan div.TasksActivity,
    #lessonplan div.grammaractivity,
    #lessonplan div.rootsstemsActivity,
    #lessonplan div.SummaryActivity
    {
        border-bottom: 2px solid black;
        margin-bottom: 20px;
        padding-bottom: 10px;
        clear: both;
    }

    #lessonplan div.AnswerKey
    {
        border-bottom: 2px solid black;
        margin-bottom: 20px;
        padding-bottom: 10px;
        clear: both;
    }

    #lessonplan div.ActivitiesHeader div,
    #lessonplan div.PronunciationActivity div,
    #lessonplan div.VocabActivity div,
    #lessonplan div.TasksActivity div,
    #lessonplan div.grammaractivity div,
    #lessonplan div.rootsstemsActivity div,
    #lessonplan div.SummaryActivity div
    {
        display: inline-block;
        padding: 1%;
        text-align: left;
        vertical-align: top;
        width: 22%;
    }

.socal_signin_box
{
    float: right;
    padding: 2px;
    width: 420px;
}

    .socal_signin_box div
    {
        float: left;
        border: 1px solid white;
        width: 181px;
        margin: 40px 10px 0px 0px;
        padding: 2px;
    }

        .socal_signin_box div:hover
        {
            background-color: red;
        }

.warning_box
{
    border: 1px solid #000;
    padding: 20px;
    margin: 15px 0;
}

.success_box
{
    border: 1px solid #81d348;
    padding: 20px;
    margin: 15px 0;
}

.dictionary-success-box
{
    border: 1px solid #81d348;
    background-color: #81d348;
    padding: 20px;
    margin: 15px 0;
    font-size: 1rem;
    font-weight: 700;
}

.notice_box
{
    border: 3px solid #5aa6ea;
    padding: 20px;
    margin: 15px 0;
}

.error_box
{
    background: #fff;
    color: red;
    border: 3px solid red;
    margin: 20px 0;
    padding: 10px 10px 10px 20px;
    width: 60%;
}



.download_box
{
    border: 3px solid #43f270;
    padding: 20px;
    margin: 15px 0;
}

.premium_box
{
    font-size: 18px;
    line-height: 1.5em;
    background: #fff;
    border: 1px solid #c11217;
    padding: 20px;
    border-radius: 5px;
    -webkit-box-shadow: -3px 2px 5px 0px rgba(44, 45, 44, 0.38);
    -moz-box-shadow: -3px 2px 5px 0px rgba(44, 45, 44, 0.38);
    box-shadow: -3px 2px 5px 0px rgba(44, 45, 44, 0.38);
}

#currIndex > div.premium_box
{
    width: 32%;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
}


#lessonsheetCTA
{
    margin: 10px 10px 10px 0;
    padding: 10px;
    line-height: 1.2em;
    width: 90%;
}

    #lessonsheetCTA > p
    {
        padding: 10px;
    }

#premium_line a, #mobile-flash-cta a
{
    color: #ca2f15;
    text-decoration: underline;
}

#mobile-flash-cta
{
    margin-left: 10%;
}

#account-edit
{
    width: 100%;
}

    #account-edit ul
    {
        margin: 10px 0;
    }

    #account-edit li
    {
        margin-left: 30px;
    }

#videostart, #messageinbox, #setshare
{
    margin-bottom: 50px;
}

#premium_line
{
    padding: 1px 2px;
    margin: 2px 0 2px 20px;
}

li #premium_line
{
    padding: 1px 2px;
    margin: 1px 0 1px 0;
    font-size: 16px;
}

button.ui-multiselect.ui-widget.ui-state-default.ui-corner-all
{
    width: 290px !important;
}

.ui-multiselect-checkboxes label
{
    width: 260px !important;
}

/* Print Styles */
@media print
{

    .noPrint, .header, .footer
    {
        display: none !important;
    }

    .whole-component
    {
        -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
        page-break-inside: avoid; /* Firefox */
        break-inside: avoid; /* IE 10+ */
        border: 1px solid black;
    }


    .shell
    {
        width: 100%;
        margin: 0;
        float: none;
    }

    .FlashCardsRow
    {
        margin-bottom: 10px;
        margin-top: 5px;
        border-bottom: 2px dotted black;
        border-top: 2px dotted black;
        display: block;
        padding: 0;
        width: 7in;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .breakhere
    {
        -webkit-column-break-after: always;
        page-break-after: always;
        break-after: always;
    }

    .FlashCardsLeft
    {
        display: inline-block !important;
        border-right: 2px dotted black;
        width: 38% !important;
        text-align: center;
        font-size: 40px;
        padding: 50px;
        margin: 0;
        width: 3in;
    }

    .FlashCardsRight
    {
        width: 3.5in;
        box-sizing: border-box;
        display: inline-block !important;
        width: 38% !important;
        text-align: center;
        padding: 50px;
        font-size: 20px;
        margin: 0;
    }
}
/* media queries */
@media only screen and (max-device-width:767px)
{
    .shell
    {
        width: 100%;
    }

    .header
    {
        display: none;
    }

    h2
    {
        font-size: 28px;
    }

    div.register-left
    {
        width: 100%;
        padding-right: 0px;
        padding-left: 2px;
    }

    .form-box
    {
        width: 100%;
    }

    .social-signin-box
    {
        display: none;
    }

    /*buy now premium*/
    #buynowpremium h2, #buynowpremium h5, #buynowpremium div
    {
        margin: 5px;
    }

    #buynowpremium > div > table > tbody > tr:nth-child(1) > td:nth-child(1) > img
    {
        display: none;
    }

    #buynowpremium > div > table > tbody > tr:nth-child(2) > td > table > tbody > tr:nth-child(2)
    {
        height: 50px;
    }
}



.footer-nav ul
{
    margin-top: 5px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.footer-nav li
{
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
}


/* Student Login styles */


body.studentlogin
{
    background: transparent;
}

#navigation ul li.learn a
{
    background-image: url(images/nav-learn.png);
}

#navigation ul li.review a
{
    background-image: url(images/nav-review.png);
}

#navigation ul li.share a
{
    background-image: url(images/nav-share.png);
}


.studentlogin #header
{
    background: #037a91;
    padding-bottom: 12px;
    padding-top: 49px;
}

.studentlogin #logo
{
    top: -19px;
    left: 3px;
}

    .studentlogin #logo a
    {
        background: url('images/login-logo.png') no-repeat 0 0;
        width: 570px;
        height: 107px;
    }

.studentlogin #navigation li
{
    padding-left: 8px;
}

.studentlogin #navigation a
{
    color: #fff;
    padding-left: 72px;
}

.studentlogin .account
{
    padding: 0;
    position: absolute;
    top: -36px;
    right: 0;
    color: #fff;
}

    .studentlogin .account a
    {
        color: #fff;
    }

#login
{
    padding: 96px 69px 96px 34px;
    background: url('images/login-bg.png') no-repeat right bottom;
    min-height: 443px;
    width: 904px;
}

    #login .entry
    {
        font-size: 16px;
        line-height: 20px;
        width: 540px;
    }

        #login .entry p
        {
            padding-bottom: 20px;
        }

        #login .entry ul
        {
            padding-left: 16px;
        }

        #login .entry li
        {
            padding-left: 8px;
            background: url('images/login-list-item.png') no-repeat 0 9px;
            list-style: none;
        }

#sign-up
{
    width: 100%;
    padding-bottom: 37px;
}

    #sign-up label, #sign-up .field
    {
        float: left;
    }

    #sign-up label
    {
        color: #037a92;
        font-size: 24px;
        line-height: 28px;
        padding-right: 10px;
        text-transform: uppercase;
    }

    #sign-up .field
    {
        font-family: 'ProximaNovaSoftRegular', sans-serif;
        font-size: 16px;
        color: #333333;
    }

    #sign-up .field
    {
        border: 1px solid #514f4e;
        padding: 5px 5px 6px;
        width: 214px;
        margin-right: 15px;
    }

    #sign-up .button
    {
        width: 155px;
        height: 63px;
        background: url('images/login-btn.png') no-repeat 0 0;
        font-size: 18px;
        padding-right: 21px;
        border: 0;
        padding-bottom: 6px;
    }

    #sign-up .button
    {
        float: right;
        color: #fff;
        cursor: pointer;
        position: relative;
        margin-top: -10px;
        font-family: 'ProximaNovaSoftRegular', sans-serif;
    }

#holder
{
    padding-top: 71px;
}

    #holder h4
    {
        font-size: 24px;
        line-height: 28px;
        text-transform: uppercase;
        padding-bottom: 26px;
        padding-left: 3px;
    }


.classes
{
    border: 1px solid #a8a7a6;
    padding: 2px;
}

    .classes ul li
    {
        list-style: none;
        display: block;
        padding-bottom: 2px;
    }

    .classes > ul > li > a
    {
        background: #81bdc8;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        display: block;
        color: #fff;
        text-transform: uppercase;
        font-size: 16px;
        padding: 6px 5px 7px 48px;
        position: relative;
    }

    .classes ul li a .arrow
    {
        position: absolute;
        display: block;
        top: 10px;
        left: 19px;
        width: 14px;
        height: 14px;
        background: url('images/login-menu-arrow.png') no-repeat 0 0;
    }

    .classes > ul > li > a:hover, .classes > ul > li.active > a
    {
        text-decoration: none;
        background: none;
        color: #037a91;
    }

    .classes ul li a:hover .arrow, .classes ul li.active a .arrow
    {
        background-position: 0 -14px;
    }

    .classes .sub-menu
    {
        display: none;
        padding: 0 54px;
    }

        .classes .sub-menu li
        {
            padding-bottom: 6px;
        }

        .classes .sub-menu a
        {
            font-family: Arial, serif;
            font-size: 14px;
            line-height: 18px;
            color: #333333;
        }


#wrap.report-wrap
{
    width: 100%;
}

#wrap .wrap-table
{
    width: 100%;
    position: relative;
}

#wrap .tleft, #wrap .tright
{
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    top: 0;
}

#wrap .tleft
{
    left: 0;
    background: url('images/wrap-top-left.jpg') no-repeat 0 0;
}

#wrap .tright
{
    right: 0;
    background: url('images/wrap-top-right.jpg') no-repeat 0 0;
}

#wrap table
{
    border-collapse: collapse;
    border: 1px solid #bcbcbc;
}

    #wrap table .title
    {
        padding: 10px 10px 10px 26px;
        text-align: left;
    }

#wrap th
{
    font-weight: normal;
    text-transform: uppercase;
    border: 1px solid #bcbcbc;
}

#wrap td
{
    text-align: center;
    font-family: Arial, serif;
    padding: 5px;
    border: 1px solid #bcbcbc;
}

    #wrap td a
    {
        color: #c11217;
        font-weight: bold;
    }


.red-text
{
    color: #c11217 !important;
}

.definitionli
{
    border-bottom: 1px solid #808080;
    padding-bottom: 2px;
}

#printQuestionList .fullunderline
{
    border-bottom: 2px solid black;
    margin-top: 40px;
    width: 100%;
}

#print-question-lists-xchoice
{
    list-style-type: lower-alpha;
    margin-left: 20px;
}

.QuestionList-question
{
    margin-bottom: 10px;
}

a.back-to-top
{
    display: none;
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background: #27AE61 url('images/up-arrow.png') no-repeat center 43%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
/*purchase*/
.products ul
{
    font-size: 18px;
    line-height: 24px;
    margin-left: 50px;
}

#schoolpurchase > form
{
    width: 60%;
    min-height: 200px;
    margin-top: 30px;
}

.pricingTable
{
    display: none;
}

#cost
{
    font-weight: bold;
}

.instructions
{
    font-size: 20px;
    line-height: 27px;
}

#schoolpurchase > form > div > div.save-btn
{
    margin-left: 0;
}

div#schoolpurchase table
{
    width: 100%;
}
/*dashboard widgets*/
.dashboardwidget
{
    background: #E8FFFF;
    border: 1px solid;
    border-color: #5aa6ea;
    padding: 15px;
    margin: 15px;
    display: inline-block;
}

.user-cp-div
{
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #666666;
    border-radius: 3px;
    background-color: #fffefe;
}

    .user-cp-div ul
    {
        margin-left: 30px;
    }

    .user-cp-div table.tablesorter
    {
        width: 100%;
    }

    .user-cp-div.scrollable
    {
        max-height: 250px;
        overflow: auto;
    }

#schoolpurchase > .user-cp-div
{
    margin: 20px 0;
    width: 40%;
}

#schoolpurchase > .buttons
{
    justify-content: flex-end;
}

#schoolpurchase.buttons
{
    align-items: flex-start;
}

#schoolpurchase label
{
    text-align: left;
}

#schoolName
{
    display: inline-block;
    width: 60%;
}
/* #schoolpurchase > div:nth-child(1) > div > label {width:150px;}
#schoolpurchase > div:nth-child(1) > div > div > label {width:375px;} */
#howMany, #howManyDsply
{
    width: 50px;
}

/*principal */
button#btnDelete
{
    border: none;
    background: none;
    color: #ca2f15;
    text-decoration: none;
    cursor: pointer;
}

    button#btnDelete:hover
    {
        text-decoration: underline;
    }
/*Reports*/
#reportHeader
{
    align-self: center;
    font-weight: bold;
}

#reportSelect
{
    padding-bottom: 10px;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
}

    #reportSelect label
    {
        width: auto;
    }

.report-group-name
{
    font-weight: bold;
    margin-top: 10px;
}

.se-pre-con
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/lw_loading.gif') center no-repeat rgba(0, 0, 0, 0.35);
}

.check-box
{
    height: 20px;
}

.scroll
{
    overflow: auto;
}

    .scroll .editTable
    {
        margin: 0;
    }

.card
{
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}

[data-toggle="tooltip"]
{
    color: #fff;
    border-radius: .5rem;
    font-size: 1rem;
}

.sticker
{
    display: inline-block;
    padding: 0 3px;
    height: 13px;
    border-radius: 2px;
    line-height: 13px;
    font-size: 9px;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    bottom: -2px;
    left: 3px;
    text-transform: uppercase;
}

.premium-sticker
{
    background: #037b91;
    color: #fff;
}

.school-sticker
{
    background: #f3ca63;
    color: #1a1d21;
}

/*modal overrides*/
.modal-dialog
{
    max-width: unset;
}

/* Teach: Continue/Prev button styles (moved from views) */
input.Continue
{
    float: right;
    font-size: 20px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    background-color: #00CC00;
}

input.Prev
{
    float: left;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    background-color: #999999;
}
