@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700,800);


/* MASTER FONT FAMILIES */
html, .button, input, textarea, button {
    font-family: 'Avenir Next', Avenir, 'Open Sans', helvetica, sans-serif;
}



/* MASTER COLOR PALETTE */

/* LIGHT BACKGROUND COLOR */
html, body, .list li {
    background: white;
}

.white, .white a, .white a:hover, .yellowbg {
    color: white;
}



/* DARK TEXT COLOR */
body, a:hover, button:active, .black, header a, footer a {
    color: #231f20;
}



/* DARK BACKGROUND COLOR */
.darkgraybg {
    background-color: #333;
}



/* LIGHT GRAY */
.lightgray {
    color: #eaebec;
}
.lightgraybg {
    background: #eaebec;
}



/* GRAY */
.gray {
    color: #aaa;
}
.graybg {
    background: #aaa;
}
hr {
    background-color: #aaa;
    border: 0; height: 1px;
    margin: 15px 0;
}
.metric_spacer {
    background: #aaa;
}


/* BLUE */
.bluebg {
    background-color: #53b4d9; /* 00add9 */
}
a, .blue {
    color: #53b4d9;
}


/* CYAN ACCENT */
.cyan {
    color: #1eb1db;
}


/* YELLOW */
.yellowbg {
    background: #f4c70b;
}


/* GREEN */
.greenbg {
    background: #0fc46a;
}


/* RED */
.redbg, .chart_red {
    background: #ed344c;
}


/* AQUA */
.aquabg {
    background: #65c6ca;
}








.full_width_box {
    width: 100%;
}

main {
    width: auto;
    max-width: 960px;
    padding: 15px 25px;
}

main.scorecard {
    width: 960px;
}

.form_wrapper p {
    max-width: 450px;
}

#main_form {
    max-width: 750px;
}



h1, h2, h3, h4, h5, h6 { margin: 0.25em 0 0.5em 0; line-height: 1.4; font-weight: 700; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; font-weight: normal; }

p { font-size: 0.9em; }

.small { font-size: 0.8em; }

.allcaps { text-transform: uppercase; letter-spacing: 0.04em; }









header {
    padding: 0;
    margin: 0;
}

#header_inner {
    padding: 8px 35px;
    font-size: 14px;
    letter-spacing: 0.5px;
    overflow: auto;
}

#header_left {
    padding-top: 2px;
    float: left;
}

#header_left b {
    font-size: 16px;
}

#header_left a:hover {
    text-decoration: none;
}

#header_logo {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    margin-right: 3px;
    float: left;
}

#header_right {
    float: right;
    margin-top: 2px;
}

#header_right a, #header_right button {
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 15px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
}

#header_right a:hover, #header_right button:hover {
    text-decoration: underline;
}




footer {
    margin-top: 50px;
}

#footer_inner {
    height: 150px;
    padding: 40px 25px 0px 25px;
    letter-spacing: 0.5px;
    text-align: left;
}

#footer_left {
    float: left;
    font-size: 18px;
}

#footer_left b {
    font-size: 25px;
}

#footer_logo {
    width: 28px;
    height: 28px;
    margin-top: 2px;
    margin-right: 5px;
    float: left;
}

#footer_right {
    float: right;
    font-size: 12px;
    padding-top: 11px;
}

#footer_right a {
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 15px;
}

#copyright {
    font-size: 12px;
    margin-top: 6px;
    font-weight: normal;
}







.edit_buttons {
    margin: 15px 0;
}







.scorecard_header {
    padding: 20px 40px 0px 10px;
    overflow: auto;
}

.district_logo {
    float: left;
    height: auto;
    width: 80px;
    margin-top: 2px;
    margin-right: 20px;
}

.district_logo img {
    max-width: 100%;
    height: auto;
}

.district_name {
    overflow: hidden;
}

/*
.scorecard_header .district_header {
    overflow: hidden;
}
*/

.scorecard_header h1 {
    font-size: 33px;
    line-height: 1.4;
    margin: 0;
}

.scorecard_header .online_scorecard {
    font-weight: normal;
}

.scorecard_header p {
    margin: 6px 0;
}

.district_mission {
    max-width: 725px;
    font-size: 0.9em;
}




.goal_header {
    padding: 15px;
    border-radius: 8px;
    color: white;
    margin: 40px 0 0 0;
    overflow: hidden;
    clear: both;
}

.goal_header:first-child {
    margin-top: 10px;
}

.goal_header h2 {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 5px 0;
}

.goal_number {
    font-weight: normal;
    padding-right: 2px;
}

.goal_header p {
    margin: 0 0 5px 0;
    line-height: 1.5;
}

.goal_header .edit_buttons {
    margin-bottom: -7px;
}




.metric {
    padding: 14px 8px 10px 8px;
    line-height: 1.5;
    overflow: auto;
    cursor: pointer;
}

.metric_left p {
    font-size: 0.9em;
}

.metric_right {
    float: right;
    margin-left: 15px;
    text-align: right;
    margin-bottom: 5px;
    position: relative;
    z-index: 20;
}

.metric h3 {
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.metric p {
    margin: 5px 0;
}




.goal_header .draft_bar, .metric .draft_bar, .metric_details_outer .draft_bar {
    background-image: url(/images/main/draft_dark.png);
    background-repeat: repeat;
    background-size: 100px;
    height: 21px;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: bold;
}

.goal_header .draft_bar {
    background-image: url(/images/main/draft_light.png);
    margin: -15px -15px 10px -15px;
    padding: 4px 0 0 16px;
    opacity: 0.7;
}

.metric .draft_bar, .metric_details_outer .draft_bar {
    padding: 4px 0 0 10px;
    opacity: 0.5;
}

.metric .draft_bar {
    margin: -5px -8px 10px -8px;
}

.metric_details_outer .draft_bar {
    margin: -5px 0px 5px 0px;
}





.padlock_goal {
    float: right;
    width: 12px;
    height: 12px;
    margin: -2px -7px 5px 5px;
    opacity: 0.5;
}

.padlock_metric {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 0px;
    top: -2px;
}

.padlock_chart {
    width: 12px;
    height: 12px;
    float: right;
    margin-right: 2px;
    margin-top: 6px;
}





.coming_soon {
    padding: 20px 0;
    /*font-size: 20px;
    color: #999;*/
    font-size: 1.2em;
    letter-spacing: 0.3px;
}

.metric_chart_circle {
    width: 88px;
    height: 88px;
    border-radius: 44px;
    float: right;
    text-align: center;
    position: relative;
}

.metric_chart_circle .value {
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 28px;
    width: 88px;
}

.metric_chart_circle .value_small {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 31px;
    width: 88px;
}

.metric_chart_circle .arrow_up, .metric_chart_circle .arrow_down {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 36px;
    top: 8px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.metric_chart_circle .arrow_upd_up, .metric_chart_circle .arrow_upd_down {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 21px;
    top: 19px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.arrow_up, .arrow_upd_up {
    background-image: url(/images/main/arrow_up.png);
}

.arrow_down, .arrow_upd_down {
    background-image: url(/images/main/arrow_down.png);
}

.binary_no, .binary_yes {
    position: absolute;
    width: 36px;
    height: 36px;
    left: 26px;
    top: 26px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.binary_no {
    background-image: url(/images/main/binary_no.png);
}

.binary_yes {
    background-image: url(/images/main/binary_yes.png);
}

.metric_chart_left {
    padding: 0px 10px 0px 20px;
    height: 88px;
    text-align: right;
    vertical-align: middle;
    display: table-cell;
    font-size: 12px;
    line-height: 1.6;
}

.metric_details_outer {
    display: none;
    padding: 0 15px 25px 15px;
    clear: both;
    overflow: auto;
}

.metric_details_outer p {
    margin: 8px 0;
}

.metric_details_outer .edit_buttons {
    margin-bottom: 0;
}

/*
.child_metric_wrapper {
    padding: 35px 0 0 0;
    margin-top: 35px;
    clear: both;
    border-top: 1px dashed #939597;
}

.child_metric_wrapper h5 {
    margin: 0 0 2px 0;
    font-size: 14px;
}
*/

.metric_spacer {
    height: 1px;
}

.metric_spacer_nested {
    border-top: 1px dashed #ccc;
    /*margin-left: 15px;*/
}

.metric_detail_no_data {
    text-align: center;
    margin-top: -15px;
    padding-bottom: 20px;
    font-size: 1.2em;
    letter-spacing: 0.3px;
}

.metric_note {
    padding-top: 10px;
    max-width: 700px;
}

.metric_note ul, .metric_note ol, .metric_note table, .metric_note td, .metric_note th {
    font-size: 0.8em;
    margin-top: 0px;
}


.chart_canvas_wrapper {
    margin: 0 auto;
    height: 250px;
}

.chart_labels {
    overflow: auto;
    text-align: center;
    margin-top: 5px;
}

.chart_label_item {
    margin-right: 20px;
    font-size: 0.8em;
    display: inline-block;
}

.chart_label_bar {
    width: 29px;
    height: 16px;
    margin-right: 6px;
    display: inline-block;
    margin-bottom: -3px;
}

.chart_label_tri {
    width: 29px;
    height: 16px;
    margin-right: 6px;
    display: inline-block;
    margin-bottom: -3px;
    background-image: url(/images/main/tri_mask.png);
    background-size: 100% 100%;
}

.chart_label_line {
    width: 29px;
    height: 3px;
    border-radius: 2px;
    margin-right: 6px;
    display: inline-block;
    margin-bottom: 3px;
}

.chart_label_linedash {
    width: 29px;
    height: 2px;
    margin-right: 6px;
    display: inline-block;
    margin-bottom: 1px;
}

.chart_spacer {
    border-top: 1px dashed #ccc;
    margin-top: 15px;
    margin-bottom: 15px;
}










.key {
    margin: 25px 0 0 10px;
    font-size: 12px;
    max-width: 700px;
}

.key .element {
    display: inline-block;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 133px;
}

.key .circle, .key .arrow_up, .key .arrow_down, .key .bin_yes, .key .bin_no {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin-bottom: -6px;
    margin-right: 4px;
}

.key .arrow_up, .key .arrow_down, .key .bin_yes, .key .bin_no {
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: center center;
}

.key .arrow_up {        background-image: url(/images/main/arrow_up.png); }
.key .arrow_down {      background-image: url(/images/main/arrow_down.png); }
.key .bin_yes {         background-image: url(/images/main/binary_yes.png); }
.key .bin_no {          background-image: url(/images/main/binary_no.png); }



.expand_all_wrapper {
    float: right;
    margin-top: 10px;
    margin-bottom: 4px;
}

.expand_all_wrapper button {
    font-size: 12px;
    min-width: 72px;
    margin-right: 0;
}

.expand_all_wrapper button:focus { outline:0; }






#circlecolorpicker_wrapper, #arrowpicker_wrapper {
    height: 50px;
}

.circlecolorpicker, .arrowpicker {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    float: left; margin-right: 12px;
    box-sizing: border-box;
    cursor: pointer;
}

.circlecolorpicker_selected, .arrowpicker_selected {
    border: 4px solid #333 !important;
}

.arrowpicker_up, .arrowpicker_down {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
}

.arrowpicker {
    font-size: 11px;
    padding-top: 13px;
    text-align: center;
    border: 4px solid #eaebec;
}

.arrowpicker_up {
    background-image: url(/images/main/arrow_up_black.png);
}

.arrowpicker_down {
    background-image: url(/images/main/arrow_down_black.png);
}







.data_edit_table_wrapper {
    margin-bottom: 10px;
    overflow: auto;
    max-width: 100%;
    padding-bottom: 15px;
}

.data_edit_table, .data_edit_table th, .data_edit_table td {
    border: none;
    text-align: center;
    white-space: nowrap;
}

.data_edit_table th {
    border-bottom: 2px solid #666;
}

.data_edit_table td {
    border-bottom: 1px solid #ccc;
}

.data_edit_table th, .data_edit_table td {

    padding: 6px 10px;
}

.data_edit_table .col_add {
    cursor: pointer;
}

.data_edit_table input {
    display: inline-block;
    width: 48px;
    text-align: center;
    border: none;
    font-size: 1.1em;
    background: #f3f3f3;
}







/* Responsive */

@media screen and (max-width: 959px) {
    main.scorecard, main {
        width: 100%;
    }
}

@media screen and (max-width: 699px) {

    main, .full_width_box_inner {
        width: 100%;
        padding: 15px;
    }
    
    #header_inner, #footer_inner {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    hr {
        margin: 10px 0;
    }
    
    .scorecard_header {
        padding: 0 0 0 0;
    }
    
    .district_logo {
        width: 50px;
        margin-right: 10px;
    }
    
    .scorecard_header h1 {
        font-size: 26px;
        line-height: 1.3;
    }
    
    .district_mission {
        font-size: 0.8em;
    }
     
    .goal_header {
        margin: 30px 0 0 0;
    }
    
    .metric {
        padding: 15px 0 10px 0px;
    }
    
    .metric_left h3 {
        font-size: 1.1em;
    }
    
    .metric_left p {
        font-size: 0.8em;
    }
    
}

@media screen and (max-width: 599px) {
    .scorecard_header h1 {
        font-size: 22px;
    }
}



.metric, .chart_labels, .data_edit_table th {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* input placeholder text color */
::-webkit-input-placeholder {   color: #888; }
:-moz-placeholder {             color: #888; }
::-moz-placeholder {            color: #888; }
:-ms-input-placeholder {        color: #888; }