@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900);

* {
    box-sizing: border-box;
}

.clearfix {
    *zoom: 1;
}

    .clearfix:before, .clearfix:after {
        content: '';
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

html,
body {
    width: 100%;
    height: 100%;
    font-family: Source Sans Pro;
    font-size: 14px;
}

html {
    /*font-size: 16px;*/
    -webkit-font-smoothing: antialiased;
    background: #EDF2F6;
}

h1 {
    padding: 0 15px;
    font-weight: 600;
    color: #fff;
    position: relative;
    top: 19px;
}

a {
    text-decoration: none;
    color: inherit;
}

select {
    outline: none;
    -webkit-appearance: none;
    /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
    -moz-appearance: none;
    /*REMOVES DEFAULT FIREFOX STYLE*/
    border: 0;
    width: 90%;
    font-family: inherit;
    /*font-size: 1.4em;*/
    cursor: pointer;
    /*background: url("/images/caret.png") no-repeat center right;
    background-size: 20px auto;
    filter: contrast(4%);*/
}

.shortSelect {
    width: 50%;
    margin-right: 25px;
}

.clearWidth {
    width: auto;
}

.sidebar {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    background: #354053;
    transition: all 0.3s ease-in-out;
}

    .sidebar .logo {
        display: inline-block;
        padding: 5px;
        margin-bottom: 100px;
        width: 100%;
        /*height: 50px;*/
    }

        .sidebar .logo img {
            width: 100%;
            height: 100%;
            background: #fff;
        }

    .sidebar nav {
        position: relative;
    }

        .sidebar nav .active {
            background: #30394A;
            border-left: 5px solid #5EFFCB;
        }

            .sidebar nav .active img {
                fill: #fff;
            }

        .sidebar nav li {
            margin-bottom: 20px;
            padding: 10px;
            padding-left: 20px;
        }

            .sidebar nav li h1 {
                top: 0px;
                font-weight: 700;
                text-transform: uppercase;
                line-height: 30px;
                color: #fff;
            }

            .sidebar nav li img {
                margin-right: 15px;
                width: 30px;
                height: auto;
                float: left;
            }

        .sidebar nav .hidden-menu {
            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(100%);
            display: none;
            width: 70px;
            height: 50px;
            text-align: center;
            background: #354053;
            cursor: pointer;
            box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.3);
        }

            .sidebar nav .hidden-menu h1 {
                /*font-size: 1.4em;*/
                font-weight: 600;
                color: #fff;
                text-transform: uppercase;
            }

.hide {
    transform: translateX(0);
}

main {
    margin-top: 50px;
    padding: 30px;
    float: right;
    height: calc(100vh - 50px);
    width: calc(100vw - 250px);
    overflow: auto;
}

.topbar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 250px;
    height: 50px;
    width: calc(100vw - 250px);
    background: #fff;
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.3);
}

.welcome-title {
    float: left;
    height: 100%;
    margin-left: 15px;
    /*font-size: 1.4em;*/
}

    .welcome-title h1 {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        color: #000;
    }

.right-items, .header-date {
    height: 100%;
    float: right;
}

    .header-date time {
        position: relative;
        display: inline-block;
        margin: 0 40px;
        top: 50%;
        transform: translateY(-50%);
        /*font-size: 1.4em;*/
        color: #000;
    }


a.link-button {
    border: 1px solid darkgray;
    margin: 10px;
    padding: 7px 15px;
    display: inline-block;
}

section {
    margin-bottom: 50px;
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.3);
    background-color: #FFF;
    display: block;
}

    section.resources {
        margin-bottom: 15px;
    }

div.title {
    background: #707E95;
    height: 50px;
}

    div.title.short {
        display: block;
        float: left;
        width: 135px;
    }

    div.title.line {
        padding-top: 15px;
        padding-left: 150px;
        padding-right: 15px;
        background-color: #FFF;
        height: 50px;
        vertical-align: middle;
    }

table {
    width: 100%;
}

th {
    font-weight: 700;
    text-align: right;
    padding-right: 15px;
}

    td:first-child, th:first-child {
        padding-left: 15px;
    }

table tr.fixedRow, table.fixedRow tr {
    height: 50px;
    border-top: 1px solid #838383;
}

    table tr.fixedRow td, table.fixedRow tr td, table tr.fixedRow th, table.fixedRow tr th {
        vertical-align: middle;
    }

table.nested, table.nested tr, table.nested td {
    border: none;
    padding: 3px;
    height: initial;
    margin-bottom: 10px;
}

.nested table.rcTable tr {
    border: none;
}


.edit-buttons {
    position: relative;
    padding: 10px;
    background: #d3d3d3;
}

    .edit-buttons button, .edit-buttons input {
        padding: 5px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: #a8a8a8;
        border: 0;
    }

.content {
    padding: 15px;
}

.resources ul {
    padding: 15px;
}

ul li {
    line-height: 1.25em;
}

    ul li a {
        text-decoration: underline;
    }

nav ul li a {
    text-decoration: none;
}

#ctl00_MainContent_RadTabStrip1 {
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.3);
}

.attention {
    font-weight: bold;
}

.red {
    color: red;
}

.buttonTd input[type="image"], .buttonTd img {
    margin: 10px 5px 0 5px;
    border: none;
}

.dropbtn {
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 500;
    text-align: left;
}

    .dropdown-content a {
        color: black;
        padding: 6px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

#adminMenu {
    display: inline-block;
    background-color: #e0dfe1;
    margin-left: -20px;
    margin-right: -10px;
    margin-top: 10px;
    margin-bottom: -30px;
}

    #adminMenu ul {
        margin-bottom: 0;
        padding: 7px;
        margin-right: 28px;
       
    }

    #adminMenu li {
        padding: 3px;
        padding-left: 55px;
        margin-bottom: 0;
        text-transform: uppercase;
        
    }

    #adminMenu .active {
        border-left: none;
        background: none;
        font-weight: bold;
    }

.invalid {
    background-color:#ffdddd !important;
}
/*goals section*/
.goals-section {
    text-align: left;
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.3);
}

    .goals-section .title {
        height: 50px;
        background: #707E95;
    }

    /*.goals-section .title h1 {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 15px;
            font-size: 1.4em;
            font-weight: 600;
            color: #fff;
        }*/

    .goals-section .caret {
        margin-right: 15px;
    }

        .goals-section .caret img {
            top: 0;
            transform: rotate(-90deg);
            width: 20px;
            filter: contrast(5%);
        }

    .goals-section table {
        display: inline-block;
        float: left;
        background: #fff;
        width: 50%;
        width: unset;
    }

    .goals-section th:first-child {
        text-align: left;
    }

    .goals-section table figure {
        position: relative;
        height: 100%;
        text-align: center;
    }

        .goals-section table figure img {
            width: 30px;
        }

    .goals-section table .active {
        background: #e0e0e0;
    }

    .goals-section table tr {
        height: 50px;
        border: 1px solid #838383;
        border-width: 1px 0 1px 0;
    }

    .goals-section table th {
        /*font-size: 1.4em;*/
        font-weight: 600;
        color: #000;
        vertical-align: middle;
    }

    .goals-section table td {
        vertical-align: middle;
        color: #000;
    }

        .goals-section table td:first-child,
        .goals-section table th:first-child {
            padding-left: 15px;
        }

    .goals-section table th:nth-child(2) {
        text-align: center;
    }

    .goals-section table tbody tr {
        cursor: pointer;
    }

    .goals-section .selected-goal {
        padding: 15px;
        overflow: auto;
        height: 100%;
        background: white;
        border: 1px solid #838383;
        border-width: 1px 0 0 1px;
    }

        .goals-section .selected-goal h1 {
            /*font-size: 1.4em;*/
            font-weight: 600;
            color: #000;
            position: inherit;
            padding-left: 0;
        }

        .goals-section .selected-goal .activities h1 {
            margin-bottom: 5px;
        }

        .goals-section .selected-goal .activities ul li:not(:last-child) {
            margin-bottom: 10px;
        }

        .goals-section .selected-goal .activities ul label {
            /*font-size: 1.4em;*/
            color: #000;
            display: block;
            padding-left: 15px;
            text-indent: -20px;
            line-height: 1.5em;
        }

        .goals-section .selected-goal .goal-status {
            margin: 15px auto;
        }

            .goals-section .selected-goal .goal-status h1 {
                display: inline-block;
            }

            .goals-section .selected-goal .goal-status .progress-status-wrapper {
                width: 50%;
                display: inline-block;
                margin-left: 15px;
                border: 1px solid #838383;
                padding: 10px;
            }

                .goals-section .selected-goal .goal-status .progress-status-wrapper select {
                    -webkit-appearance: none;
                    /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
                    -moz-appearance: none;
                    /*REMOVES DEFAULT FIREFOX STYLE*/
                    border: 0;
                    width: 100%;
                    font-family: inherit;
                    /*font-size: 1.4em;*/
                    cursor: pointer;
                    background: url("../img/caret.png") no-repeat center right;
                    background-size: 20px auto;
                    filter: contrast(4%);
                }

        .goals-section .selected-goal .progress-questions li:not(:last-child) {
            margin-bottom: 15px;
        }

        .goals-section .selected-goal .progress-questions li h1 {
            margin-bottom: 5px;
        }

        .goals-section .selected-goal .progress-questions li textarea {
            display: block;
            width: 100%;
            font-family: inherit;
            /*font-size: 1.4em;*/
        }

    /*.goals-section .selected-goal input[value="Update"] {
            display: inline-block;
            margin: 10px;
            padding: 5px 10px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 0;
            background: #a8a8a8;
            font-family: inherit;
         
        } */

    .goals-section .edit-buttons {
        background: none;
            }
    .goals-section div.edit-buttons {
       text-align:center;
    }

        .goals-section .edit-buttons input {
            margin: 5px 10px;
        }

    .goals-section .modify-goals {
        clear: both;
        padding: 10px;
        background: #d3d3d3;
    }

        .goals-section .modify-goals button {
            padding: 5px 10px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: #a8a8a8;
            border: 0;
            /*font-family: inherit;*/
            /*font-size: 1.4em;*/
        }

        .goals-section .modify-goals .selection {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 110;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.75);
        }

        .goals-section .modify-goals .goals-wrapper {
            position: relative;
            top: 200px;
            left: 300px;
            /*transform: translate(-50%, -50%);*/
            width: 70vw;
            height: 70vh;
            background: #fff;
        }

            .goals-section .modify-goals .goals-wrapper form {
                position: relative;
                height: 100%;
            }

            .goals-section .modify-goals .goals-wrapper header {
                padding: 10px 10px 0 10px;
                width: 100%;
                height: 50px;
                background: #707E95;
            }

                .goals-section .modify-goals .goals-wrapper header > h1 {
                    display: inline-block;
                    /*font-size: 1.4em;*/
                    font-weight: 600;
                    color: #fff;
                    top: 0;
                }

.goals-wrapper header input, #finishSelection {
    float: right;
    padding: 5px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 0;
    font-family: inherit;
    margin-right: 20px;
    /*font-size: 1.4em;*/
    display: inline-block;
}

.goals-wrapper header img {
    border: none;
    float: right;
    padding: 5px;
    display: inline-block;
    margin-left:0;
}

.goals-section .modify-goals .goals-wrapper header .num-selected-goals h1 {
    margin-top: 5px;
    font-family: inherit;
    font-size: 1.2em;
    color: #fff;
}

.goals-section .modify-goals .goals-wrapper .list-of-goals {
    position: absolute;
    top: 50px;
    left: 0;
    width: 50%;
    height: calc(100% - 50px);
    overflow-y: auto;
}

    .goals-section .modify-goals .goals-wrapper .list-of-goals .active {
        background: #e0e0e0;
    }

    .goals-section .modify-goals .goals-wrapper .list-of-goals li {
        height: 50px;
        cursor: pointer;
        border-top: 1px solid #838383;
    }

        .goals-section .modify-goals .goals-wrapper .list-of-goals li:first-child {
            border-top: 0;
        }

        .goals-section .modify-goals .goals-wrapper .list-of-goals li:last-child {
            border-bottom: 0;
        }

        .goals-section .modify-goals .goals-wrapper .list-of-goals li .caret {
            margin-right: 15px;
            display: inline-block;
            width: 20px;
            float: right;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

        .goals-section .modify-goals .goals-wrapper .list-of-goals li label {
            padding-left: 15px;
            display: inline-block;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            /*font-size: 1.4em;*/
            color: #000;
            max-width: 270px;
        }

.goals-section .modify-goals .goals-wrapper .mod-goals-selected {
    position: absolute;
    top: 50px;
    right: 0;
    padding: 15px;
    width: 50%;
    height: calc(100% - 50px);
    overflow-y: auto;
    border: 1px solid #838383;
    border-width: 0 0 0 1px;
}

    .goals-section .modify-goals .goals-wrapper .mod-goals-selected h1 {
        /*font-size: 1.4em;*/
        font-weight: 600;
        color: #000;
        padding-left: 0;
        top: unset;
    }

    .goals-section .modify-goals .goals-wrapper .mod-goals-selected .mod-goals-select-activities {
        margin-top: 15px;
    }

        .goals-section .modify-goals .goals-wrapper .mod-goals-selected .mod-goals-select-activities > li {
            margin-bottom: 15px;
        }

            .goals-section .modify-goals .goals-wrapper .mod-goals-selected .mod-goals-select-activities > li h1 {
                /*margin-bottom: 5px;*/
                margin-top: 10px;
            }

        .goals-section .modify-goals .goals-wrapper .mod-goals-selected .mod-goals-select-activities label {
            /*font-size: 1.4em;*/
            color: #000;
            display: block;
            padding-left: 15px;
            text-indent: -20px;
            line-height: 1.5em;
        }

    .goals-section .modify-goals .goals-wrapper .mod-goals-selected .selected-activities-counter h1 {
        display: inline-block;
    }

    .goals-section .modify-goals .goals-wrapper .mod-goals-selected .selected-activities-counter p {
        display: inline-block;
        /*font-size: 1.4em;*/
    }

    select.studentRatings{
        -webkit-appearance: none;
    }

@media screen and (max-width: 1080px) {
    .sidebar nav .hidden-menu {
        display: block;
    }

    .hide {
        transform: translateX(-250px);
    }

    main {
        width: 100vw;
    }

        main .topbar {
            width: calc(100vw - 70px);
            left: 70px;
        }

    .goals-section .selected-goal .goal-status .progress-status-wrapper {
        margin-left: 0;
        margin-top: 5px;
        width: 100%;
    }
}