/*------------------------------------------------------------------------------
CLEAR THE DECKS
------------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markupol> */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
div, td , th, input[type=text], table {
    box-sizing: border-box;
}

/*------------------------------------------------------------------------------
HIGHSITE HTML PREFERENCES
------------------------------------------------------------------------------*/	
html {
    position: relative;
    min-height: 100%;
}
body {
    font-size: 100%
}
h1, h2, h3, h4, h5, h6, p, th, td, li, div, ul, input, select, option, textarea {
   font-family:	"acumin-pro-semi-condensed";
   font-weight: 300;
   line-height: 1.2em;
   font-size: 1.025em;
   color: #666666;
}

h1, h2, h3, h4, h5, h6, p {
    margin-bottom: .8em;
}

h1, h2, h3, h4 {
    letter-spacing: -.02em;
}
h1, h2, h3, h4, h5, h6 { 
    word-spacing: 0.25px;
}
p {
    color: #444;
}
i, em {
    font-style: italic;
}
a, i, em, span, q {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}
b, strong {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
}

/*------------------------------------------------------------------------------
SITE-WIDE HTML
------------------------------------------------------------------------------*/	
body {
    margin: 0 0 60px 0;

}

a { text-decoration: none; }
a:link { color: #999999; }
/* 
a:visited { color: #999; }
 */
a:hover { color: #bbb; }
a:active { color: #999999; }

/*------------------------------------------------------------------------------
SITE-WIDE DIVS
------------------------------------------------------------------------------*/

@media print {
    section.menuv  {
        display: none;
   }

   div.form, div.form_topper {
        float: left;
   }
}	

/* the version below doesn't require an hr, but no absolutes outside  the margin */
#container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    min-height: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
header, section {
   width: 100%;
   overflow: hidden;
}
header {
   float: left;
   height: 130px;
   background-color: #999999;
}

@media screen and (max-width: 768px) {
    header .logo {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    header a.show_menu {
        border: solid 1px;
        padding: 7px;
        color: white;
        float: right;
        margin: 28px;
    }
}

header img.branding {
    height: 80px;
    margin-top: 25px;
}

header img.title {
    position: absolute;
    top: 80px;
    right: 10px;
    width: 460px;
}

@media screen and (max-width: 768px) {
    header img.title {
        max-width: 90%;
        padding: 8px 30px;
    }
}

@media screen and (max-width: 600px) {
    header img.title {
        max-width: 90%;
        padding: 20px;
    }
}

header ul.utility {
    color: #fff;
    float: right;
    margin: 25px 0 0 0;
}

@media screen and (max-width: 768px) {
    header ul.utility {
        float: left;
        margin: 27px 11px;
        max-width: 76%
    }
}

header ul.utility li {
   display: inline;
   padding: 0 10px;
   color: #fff;
}

@media screen and (max-width: 768px) {
    header ul.utility li {
        display: block;
    }
}

header ul.utility li:first-of-type {
   font-weight: 700;

}
header ul.utility li a:link, header ul.utility li a, header ul.utility li a:visited {
    color: #fff;
}

footer {
    position: absolute;
    left: 0;
    bottom: 10px;
    height: 60px;
    width: 100%;
}
footer p {
   color: #888;
   text-align: center
}
footer p.csbp {
   color: #af9c66;
   text-align: center;
   font-size: 1.2em;
   letter-spacing: .5em;
}

/*----------------------- LOG IN --------------------------*/
body.login div.bar {
    height: 110px;
    width: 100%;
    background: #af9c66;
}
body.login .banner {
    position: relative;
    margin: 0 auto;
    width: 1196px;
}
body.login .banner img {
    margin-top: 6px;
}

body.login .form {
    width: 300px;
    float: none; 
    position: relative;
    margin: 100px auto;
    padding-top: 50px; 
}
body.login h3 {
    text-transform: uppercase;
    font-size: 1.8em;
     color: #892334
}

body.login p.wrap, 
body.login p.wrap label, 
body.login a.submit_button_row,
body.login footer p a
{
    color: #888
}
body.login input.button {
    background-color: #892334;
}

body.login footer {
    position: fixed;
    left: 0;
    bottom: 10px;
    height: 60px;
    width: 100%;
}


/*------------------------------------------------------------------------------
MAIN MENU
------------------------------------------------------------------------------*/
section.menuv {
    position: absolute;
    top: 130px;
    width: 210px;
    padding: 20px 0 40px 30px;
    z-index: 99;
    border-radius: 0px 0px 20px 20px;
    background: #efebe3;
}

@media screen and (max-width: 768px) {
    section.menuv {
        display: none;
    }
}
.menu_show {
    display: none;
    position: absolute;
    top: 130px;
    width: 210px;
    z-index: 99;
    border-radius: 0px 0px 10px 10px;
    padding-top: 20px;
    height: 40px;
    background: #efebe3;
    text-align: center;
}
.menu_hide, .menu_show {
    cursor: pointer;
}

section.dashmenu {
    float: left;
    position: relative;
    top: 10px;
    width: 100%;
    border-radius: 0;
    background: #fff;
}

@media screen and (max-width: 768px) {
    section.menuv {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    section.menuv.dashmenu {
        display: block;
        padding: 0;
    }
}

section.menuv ul {
    float: left;
}
section.menuv ul li {
    display: block;
    padding-top: 4px;  
}
section.menuv ul li a {
    color:  #666666;
}
section.menuv h3 {
    font-size: 1.2em;
}
div.dashboard_wrap header.branded section.menuv {
    display: none;
} 

/*------------------------------------------------------------------------------
LIST ARCHIVE/DELETE DIVS
------------------------------------------------------------------------------*/
#deletebox, #archivebox {
   margin-top: 20px;
   display: none;
}
#archivebox {
   /* width: 600px; */
   height: auto;
}
#deletebox h6, #archivebox h6 {
   margin: 0 30px 20px 0;
   color: #666666;
}
#deletebox h4, #archivebox h4 {
   font-size: 1.2em;
   margin: 10px 30px 10px 30px;
   color: #666666;
}
#archivebox p, #deletebox p {  
   margin: 0 30px 12px 30px;
}
p.wrap.viewing {
   margin: 0 0 10px 0;
}
.hideit {
   display: none;
}
p.add_button {
   margin: 20px 0 10px 0;
}

/*------------------------------------------------------------------------------
GLOBAL FORM DIVS 
------------------------------------------------------------------------------*/	
div.form, div.form_topper {
   width: 900px;
   overflow: hidden; /* expands depth of relative positioned depth with floats */
   margin: 0;
   float: right;   
}

@media screen and (max-width: 768px) {
    div.form, div.form_topper {
        max-width: 90%;
    }
}
div.form {
   margin-bottom: 40px;
}  
div.form_topper {
    text-transform: uppercase;
    font-size: 1.8em;
    margin:30px 0 20px 0;
}
.col {
   float: left; 
   width: 50%; 
}

/*------------------------------------------------------------------------------	
GENERAL FORM ELEMENTS 
------------------------------------------------------------------------------*/	

input[type="text"], input[type="password"], input[type="file"] { 
    width: 280px;
    margin-top: 0; 
    height: 36px;
    padding: 0 4px 2px 5px;
    color: #444;
}
input[type="checkbox"] {margin: 0 5px 4px 0 } 
input[type="radio"] {margin: 5px 2px 0 0 } 

textarea {
   height: 100px;
   width: 240px;
}
select {
   border: 1px solid #bbb;
   border-radius: 4px;
   height: 32px;
   overflow: hidden;
   width: 250px;
   background: #e7e7e7; /* Old browsers */
   padding-bottom: 4px;
}

p.wrap  {
   margin: 8px 0 0 0;
   width: 100%;
   clear:both;
   color: #444;
}	
p.wrap span.text_under_field {
   display: block;
   padding: 10px 0 0 0;
   line-height: 18px;
}
p.wrap span {
   display: inline;
   margin: 4px 0 4px 2px;
   font-style: italic;
}
p.inline {
 margin: 9px 0 0 0;
}
label {
   display: block;
}
.label, .blabel {
   line-height: 18px;
   padding-right: 7px;
   margin: 0 0 5px 2px;
}
.label, .blabel, select {
   color: #666666;
}
.blabel {
   font-weight: 700;
}
.error_label, .blabel.error_label {
   color: #c00;
}
input[id=submitBtn] {margin: 10px  0 0 } 

label.nextto { display: inline } 

input.counter {
   width: 50px;
   display: block;
   text-align: right;
}
input:not(.button), textarea {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; 
    border: 2px solid #ddd;
}
input:not(.button):focus, textarea:focus {
   background: #fff;
}

select[multiple=multiple] {
   height: auto;
   background: #fff;
   overflow-x: hidden;
   overflow-y: scroll;
}
input[type="text"].small {
   width: 50px;
}
p.submit_button_row {
   margin: 20px 0 20px 2px;
}
p.submit_links_row {
   margin: 10px 0 20px 2px;
}
a.submit_button_row:link, a.submit_button_row:visited {
   color: #666666;
}
a.submit_button_row:hover {
   color: #999999;
}
p.error {
   padding: 3px 0 2px 22px;
   background: url(/images/error.png) no-repeat;
}
p.success {
   color: #00b100;
   margin-top: 20px;
}
#msgs { 
   display: none; 
   margin-bottom:20px;
}
#msgs a {
  display: block;
  margin: 10px 10px 10px;
}
#msgs a+a {
  padding-left: 20px;
}
#msgs a img {
   position: relative;
   top: 6px;
}
input::placeholder {
    color: #ccc;
}

/* ----------------------------------------------------------------------
BUTTONS
---------------------------------------------------------------------- */
a.button, input.button, a.small_button, input.small_button, button {
    text-transform: uppercase;
    border: none;
    background: #999999; 
    color:#fff;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
    border-radius:4px;
    display:inline-block;
    font-size: 1.1em;
    padding: 6px 20px 8px;
    text-decoration:none;
    font-weight: 300;
}
a.button:hover, input.button:hover, button:hover {
   background: #ccc;
}
a.button:active, input.button:active, a.small_button:active, input.small_button:active, button:active {
   position:relative;
   top: 1px;
}
a.small_button, input.small_button, button.small {
    text-transform: uppercase;
    border: none;
    border: none;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background: #999999;
    color: #fff;
    font-size: 14px;
    padding: 4px 8px 6px 9px;
} 
a.small_button:hover, input.small_button:hover, button.small:hover  {
    background: #ccc;
}

/*------------------------------------------------------------------------------	
TABLES
------------------------------------------------------------------------------*/	
table {
    width: 100%;
    margin: 0;
}

.follow_mouse tr:hover td { background: #e7e7e7; }

.odd_row { background: #efebe3 }

/*------------------- LIST TABLES-------------------*/
.list {
    width: 100%;
    margin: 10px 0 0 0;
    color: #666666;
}
.list th {
    font-weight: 700;
    padding: 5px 0px 6px 6px;
    background-color: #e1d8c7; 
    text-align:left;
}
.list td {
    padding: 5px 0 6px 6px;
}
.list td i.fa {
    color: #e1d8c7;   
}
.list td i.fa:hover {
    color: #c1ae8b;  
}
.list a.hide_shown {
    display: none;  
}

div.list_uploads .list td:nth-of-type(2) {
    min-width: 80px;
}
div.list_uploads .list td:nth-of-type(3) {
    min-width: 110px;
}
div.list_uploads .list td:last-of-type {
    max-width: 600px;
}

.list_criteria table.list th:nth-child(n+2):nth-child(-n+3) {
    background-image: url(../images/bg.gif);
    background-position: right center; 
    background-repeat: no-repeat;
}


/*------------------------------------------------------------------------------
INDIVIDUAL FORMS
------------------------------------------------------------------------------*/
.my_account div.form {
   margin: 0 auto 400px;
   width: 900px;
}
/*------------------- USERS -------------------*/
.users .col {
   float: left; 
   width: 40%; 
}
/*------------------- UPLOADS -------------------*/
.uploads .form {
   /* width: 690px; */
   padding-left: 20px;
   padding-right: 20px;
}
.uploads .col {
   border-radius: 6px;
   background-color: #ffffff;
   padding: 20px;
   margin-right: 20px;
   margin-top: 10px;
   width: 50%;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}    
.uploads .col h4 {
   text-transform: uppercase;
   margin: 0 0 20px 0;
   color: #666666;
   font-size: 1.2em;
   letter-spacing: .2em;
}
.uploads p.wrap span {
   display: block;
}
.col p.notes {
   margin: 20px 20px 0 0;
}
.uploads .category_dropdown {
    display: none;
}

/*------------------------------------------------------------------------------
INDIVIDUAL PAGES
------------------------------------------------------------------------------*/
/*------------------- DASHBOARD-------------------*/
.form.dashboard form {
    float: left;
    clear: both;
    margin-top: 10px;    
}
.dashboard_group { 
   font-size: 1.1em;
   font-weight: 700; 
   margin: 16px 0 0 0;
   width: 100%;
   color: #666666;
   float: left;
}

.popover2 {
   padding-left: 20px;
}
p.zendesk {
    float: left;
    clear: both;
    margin-top: 20px;
}

/*------------------- EVALUATIONS-------------------*/
table.criteria td, table.criteria th {
   padding: 4px 10px;
   border-right: 1px solid #999;
}
table.criteria tr td {
   border-left: 1px solid #999;
}
table.criteria tr td+td {
   border-left: 0;
}
table.criteria tr td+td+td+td {
   border-left: 4px solid #999;
}
table.criteria tr.title td, table.criteria tr.levels td, table.criteria th {
   border-top: 1px solid #999;
   border-bottom: 1px solid #999;
}
table.criteria tr.title td {
    border-right: none;
}
table.criteria tr.title td+td {
    border-left: none; /*4px solid #8B2332;*/
    border-right: 1px solid #999;
}
table.criteria tr td+td {
   width: 31%;
}
ul.criteria_links {
    position: absolute;
    top: 160px;
    right: 0;
}
ul.criteria_links li {
   display: block;
   padding: 0 20px 0 0;
}
ul.criteria_links li a, ul.criteria_links li a:visited {
   color: #999999;
}
ul.criteria_links li a:hover {
   color: #999999;
   text-decoration: underline;
}
table.criteria th {
   padding: 8px 0;
   color: #666666;
   border-bottom: none;
   border-right: none;
}
table.criteria tr.levels td  {
   color: #fff;
   text-transform: uppercase;
   background-color: rgba(188,176,150,0.25);
   border-right: 1px solid #fff;
/*    border-left: 1px solid #999; */
   border-top: none;
   border-bottom: none;
}
table.criteria tr.levels td+td {
   background-color: rgba(188,176,150,0.50);
}
table.criteria tr.levels td+td+td {
   background-color: rgba(188,176,150,0.75);
}
table.criteria tr.levels td+td+td+td {
   background-color: rgba(188,176,150,1.0);
   border-left: 4px solid #fff; /*#8B2332;*/
   border-right: 1px solid #999;
}
table.criteria tr.levels + tr td {
    border-top: none;
}
.view table.criteria tr.contents + tr {
    background-color: #efebe3
}
table.criteria tr.title td {
   font-weight: 700;
   color: #666666;
   border-right: 1px solid #999;
}
table.criteria tr:last-child td { 
   border-bottom: 1px solid #999;
}
table.criteria tr.answers td span {
   color: #36a929;   
}
table.criteria tr.answers td {
    border-bottom: 1px solid #999;
}
.evaluation_criteria table {
   margin: 20px 0 0 0;
   background: none;
}
.evaluation_criteria th {
   font-weight: 700; 
   padding: 6px 0;
}
.evaluation_criteria td {
   padding-right: 40px;
}
.evaluation_criteria td + td {
   color: #888;
}
table.criteria td em {
   color: #666666;
}
.evaluate #msgs {
   margin-bottom: 20px;
}
/* --- for evaluee's remarks --- */
.evaluate table.criteria table.comments {
    width: 100%;
}
.evaluate table.criteria table.comments tr td {
    border: none;
    padding: 0 0 6px 0;
}
.evaluate table.criteria table.comments tr.other_remarks td:first-of-type {
    width: 13%;
    padding-right: 6px;
    text-align: right;
}
.evaluate table.criteria table.comments tr.other_remarks td+td {
    width: 89%;
}
.evaluate table.criteria .comments tr td textarea {
   width: 100%;
   height: 50px;
}
.evaluate td.remark {
   color: #666666;
}
body.evaluate_printout h3 {
    font-size: 1.4em;
    margin: 6pt 0;
}

body.evaluate_printout td.level_title {
    border-top: 1px solid #999;
    text-transform: uppercase;
}
.evaluate_printout #container {
    max-width: 1000px;
    margin: 0;
}
.evaluate_printout table.criteria {
    table-layout: fixed;
}

select#evaluation_type {
   width: 400px;
}

/*------------------- NARRATIVES -------------------*/
#container #signature {
    display: none;
}
#signhere {
    padding: 30px 40px 40px 40px;
    width: 300px;
}
#signhere span {
    font-size: 32px;
    font-weight: normal; /* was 500 */
    color: blue;
    font-style: Italic; /* was not here */
    font-family: 'Times New Roman','Times';
}
label.signlabel {
    margin-bottom: 20px;
}
span.okay_to_view {
   display: none;
}
.narrative_preview {
    padding: 40px;
}

/*------------------- GOALS ------------------*/
.list_goals td:nth-of-type(2) {
   width: 60%;
}
.goals table {
    margin-top: 20px;
}
.goals table td {
    white-space: normal;
    padding: 0 20px 10px 0;
    width: 25%;
}
.goals table thead th {
    vertical-align: bottom;
    padding: 0 20px 10px 0;
    font-weight: 700;
}
.goals table td textarea {
    width: 100%;
    height: 150px;
}

div#headingform {
    display: none;
    margin-bottom: 20px;
}
#column1, #column2, #column3, #column4 {
    width: 600px;
}
#number_of_rows {
    width: 40px;
}
#reflection {
	width: 880px;
	height: 150px;
}
.submit_links_row.delete_link {
    position: absolute;
    right: 0;
    bottom: 54px;
}

/*-------------------  SURVEY RESPONSES -------------------*/
.survey_responses textarea {
    height: 200px;
    width: 880px;
}
.survey_responses input[type=text] {
    width: 600px;
}

/*-------------------  CRITERIA -------------------*/
.criteria_content textarea {
   width: 290px;
   height: 180px;
   padding: 10px;
} 
.criteria_content p.wrap {
   margin: 0 0 10px 0;
}
.criteria .criteria_content {
    display: none
}
.deactiviate_note {
    padding: 10px 40px 0 0;
    display: none;
}

.fa-question-circle {
    cursor: pointer;
}
    
/*------------------- USERS-------------------*/
#depart_head_of, p.see_all {
   display: none;
   margin-top: 6px;
}

input[name="area_code"], input[name="phone_front"] {
   width: 30px;
}
input[name="phone_back"], input[name="extension"], input[name="order_of"] {
   width: 50px;
}
input#zip_code, input#postal_code {
   width: 100px;
}
select#privileges {
   width: 300px;
}

/*------------------- OBSERVATIONS -------------------*/
.observations .mce-container {
    margin: 0 0 20px 0;
}

.observations textarea {
    width: 670px;
    height: 300px
}
.observations label span, .view_observation label span {
   font-weight: 700;
}
.observations input[type=text] {
   width: 100px;
}
.observations input#subject {
   width: 300px;
}

.observations .notes {
   margin: 20px 0;
}
.observations .notes div {
   width: 700px;
   border: 2px solid #ccc;
   padding: 5px 10px 10px 10px;
   border-radius: 4px;
}
.view_observation .notes {
   width: 675px;
}
.view_observation .notes label {
   margin-top: 20px;
}

.view_observation .notes ul {
   list-style: disc;
   margin-left: 24px;
}
.view_observation .notes ol {
   list-style: decimal;
   margin-left: 24px;
}

/*------------------- ORGANIZATIONS-------------------*/
.organizations p.wrap span, .users p.wrap span {
   display: block;
}

/*------------------- OPENING LETTER -------------------*/
div#opening_letter {
   width: 750px;
   position: absolute;
   z-index: 99;
   height: 600px;
   overflow: scroll;
   top: 100px;
   left: 100px;
   padding: 20px 40px;
   border: 2px solid #ddd;
   background: #fff;
   -moz-border-radius:12px;
   -webkit-border-radius:12px;
   border-radius:12px;
}
div#opening_letter p {
   color: #666;
}
div#opening_letter h3 {
  font-size: 1.2em;
  color: #666666;
}
.close_letter.button {
    background: #af9c66;
}
div#opening_letter p:last-child {
    margin: 20px 0 60px 0;
}

/*-------------------- BRANDING ----------------------*/
.branding input.jscolor {
    width: 80px;
}

/*-------------------- COMPENSATION ------------------*/
.constants input[type=text] {
    width: 100px;
    text-align: right;
    padding: 0 6px 4px 6px;
}
.constants th {
    padding: 5px 4px 10px 4px;
    text-align: center;
}
.constants td {
    padding: 4px;
    text-align: center;
}
.constants .model td:nth-of-type(5) {
    font-style: italic;
    text-align: left;
}
.constants .model {
    margin-bottom: 10px;
}
.constants .points {
    margin-top: 10px;
    margin-bottom: 20px;
}
.constants .points td:nth-of-type(3), .constants .points td:nth-of-type(5) {
    text-align: right;
    padding-left: 20px;
}
.constants th.title {
    text-align: right;
    font-weight: bold;
}
.constants .model th.title {
    text-align: left;
    font-weight: bold;
}
.constants .points input[type=text], .constants input#cost_of_living_base {
    width: 60px;
    text-align: right;
    padding: 0 6px 4px 6px;
}

.constants table.flat_rate {
    margin: 20px 0;
    background: #efebe3;
    padding: 10px;
}
.constants table.flat_rate th.title {
    text-align: left;
}
.constants table.flat_rate td {
    text-align: left;
}
.annual textarea {
    width: 600px;
    height: 200px;
}
#calculated {
    display: none;
}

.annual input[type=text] {
    width: 150px;
    text-align: right;
    padding: 4px 6px 4px 4px;
}
#sliding_factor, input.bank_this, input.parttime {
    width: 75px;
    text-align: right;
}
.list_annual td:first-of-type, .list_calculations td:first-of-type {
    width: 75px;
    text-align: center;
}
.list_annual td:last-of-type {
    width: 120px;
    text-align: center;
}
form#compensation_calculate span {
    font-style: normal;
    font-weight: bold;
}
form#compensation_calculate input[type=text] {
    padding: 4px;
}
.calculations table#salary_stats, 
.calculations table#evaluation_stats, 
.calculations div#worksheet,
.calculations p.bonus_box,
.calculations p.select_classroom,
.calculations p.select_overall {
    display: none;
}

#compensation_calculate .cancel {
    display:none;
}

#compensation_calculate table {
    width: 100%;
    margin: 20px 0;
}
#compensation_calculate td, #compensation_calculate th {
    border: 1px solid #ddd;
    text-align: center;
    padding: 6px 0;
}
#compensation_calculate th {
    font-weight: bold;
}
#compensation_calculate tr:nth-child(1) th {
    text-align: left;
    padding-left: 10px;
    background-color: #ededed;
}
table#salary_stats td:nth-of-type(1) {
    width: 20%;
}
table#salary_stats td:nth-of-type(n+2):nth-of-type(-n+5) {
    width: 10%;
}
table#salary_stats td:nth-last-of-type(2) {
    width: 20%;
}
table#salary_stats tr:nth-child(5) {
    display: none;
}
table#salary_stats tr:nth-child(5) td:nth-last-of-type(-n+2) {
    width: 20%;
}
table#evaluation_stats th:nth-last-child(-n+7) {
    width: 11%;
}
table#evaluation_stats th:nth-child(1) {
    width: 18%;
}
input.adjustment, input.sliding, input.bonus, input.catchup { 
    width: 100px;
    text-align: right;
}
.comments {
    width: 600px;
}
.annual div#leftcol, .annual div#rightcol {
    float: left;
    width: 40%;
}
.annual div#rightcol {
    padding: 20px;
    border-radius: 10px;
    background-color: #efebe3;
    width: 50%;
}
.calculations_edit #log {
    margin: 30px 0;
}
.calculations_edit #log h3 {
    font-weight: bold;
}
.calculations_edit #log table td, .calculations_edit #log table th {
    text-align: left;
    padding: 2px 4px 2px 4px;
}
tr.leadbonus {
    display:none;
}
.report .scroller {
    width: 900px;
    margin: 0;
    float: right;  
    display: flex;
    overflow-x: auto;
    margin-bottom: 20px;
}
.report .border {
    border: 1px solid #ccc;
}
.report table {
    display: block;
    flex: 0 0 auto;
    width: 1800px;
}
.report table td, .report table th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 2px 6px 4px 6px;
}
.report table th {
    font-weight: 700;
    vertical-align: bottom;
}
.report table tr:nth-child(2) th {
    font-weight: 300;
}
.report table tr:nth-child(1) th {
    background-color: tan;
    text-align: center;
    color: #fff !important
}

#interface td:nth-child(-n + 2) {
    width: 120px;
}
#interface td:nth-child(n+3):nth-child(-n+9)  {
    text-align: center;
}
#interface td:nth-child(n+10):nth-child(-n+13)  {
    text-align: right;
    width: 80px;
}
#interface td:nth-last-child(1) {
    text-align: right;
}
#interface tr:nth-child(odd) {
    background-color: #eee;
}
#summary td:nth-child(odd) {
    width: 300px;
}
#summary td:nth-child(even) {
    width: 100px;
    text-align: right;
}
#performance th {
    font-weight: 700;
}
#performance td {
    width: 75px;
}
#performance td:nth-child(even) {
    text-align: right;
}
/* teacher dashboard and control sheet */

.teacher_dashboard h2 {
    font-size: 1.3rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.teacher_dashboard .evaluations {
    width: 350px;
    margin: 0 0 50px 0;
}
.teacher_dashboard .files {
    width: 800px;
    margin: 0 0 60px 0;
}
.teacher_dashboard .observations,
.teacher_dashboard .goals,
.teacher_dashboard .narratives,
.teacher_dashboard .salary {
    width: 250px;
    display: inline-block;
    margin: 0 50px 40px 0;
}
.teacher_dashboard table.eval ,
.teacher_dashboard table.files {
    table-layout: fixed;
    border: 1px solid #ddd;
}
.teacher_dashboard th,
.teacher_dashboard td {
    font-weight: normal;
    padding: 4px;
}
.teacher_dashboard table tbody,
.teacher_dashboard table thead {
    display: block;
}
.teacher_dashboard table tbody { 
   overflow: auto;
   height: 100px;
}
.teacher_dashboard table.files tbody { 
   overflow: auto;
   height: 150px;
}
.teacher_dashboard table td:first-of-type,
.teacher_dashboard table th:first-of-type {
    width: 75px;
}
.teacher_dashboard td:nth-of-type(n+2):nth-of-type(-n+3),
.teacher_dashboard th:nth-of-type(n+2):nth-of-type(-n+3) {
    width: 150px;
}

.teacher_dashboard .files th:nth-of-type(3),
.teacher_dashboard .files td:nth-of-type(3) {
    width: 200px;
}
.teacher_dashboard .files th:nth-last-of-type(1),
.teacher_dashboard .files td:nth-last-of-type(1) {
    width: 600px;
}

.control_sheet table {
    max-width: 800px;
    margin-bottom: 100px;
}
.control_sheet th {
    font-weight: bold;
}

.control_sheet td,
.control_sheet th {
    padding: 4px;
    border-bottom: 1px solid #ddd;
}
.control_sheet td:nth-child(even) {
    background: #F4F1ED
}
.control_sheet td:nth-child(n+2) {
    text-align: center;
} 

/* Footer popovers */
footer #terms, footer #privacy, footer #help { /* it must be hidden within the wrapper element */
   display:none;     /*  set to display: none */
}
/* specific specs for div */
footer .pop {
    width: 800px;
    height: 600px;
    background: #fff;
    padding: 20px;
}
footer h3 {
    text-transform: uppercase;
    font-size: 1.8em;
    color: #892334
}

#container #help, #container #help2  { /*it must be hidden within the wrapper/container */
  display: none;
}
#help, #help2 {
   width: 900px;
   height: 740px;
}
#help p {
    line-height: 1.3em;
    color: #444;
    text-align: left;
}
#help ol, #help ul {
    margin-top: 10px;
}
#help ol li {
    line-height: 1.2em;
    color: #444;
    margin-left: 30px;
    margin-bottom: 8px;
}
#help ul li {
    line-height: 1.2em;
    list-style-type: disc;
    color: #444
}
#help h2 {
    font-size: 1.8em;
    margin: 20px 0;

}
#help h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-transform: capitalize;
}
#help h4 {  
    text-align: center;
    font-size: 1.3em;
    margin: 20px 0;
}
#help p.image {
    text-align: center;
}

#help2 {
   height: 600px;
}

#help h6 {
    font-weight: 700;
    color: #000;
    margin-bottom: 4px;
}

.print_rubrics {
    background: #fff;
}
.print_rubrics #container {
    padding-top: 20px;
}
.print_rubrics table.criteria td {
    width: 25%;
}
.print_rubrics table.criteria tr.title td  {
    font-weight: 300;
    text-transform: uppercase;
}
.print_rubrics table.criteria tr.levels td  {
    font-weight: 300;
    text-transform: uppercase;
    background: #fff;
    color: #666666;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}
.print_rubrics table.criteria tr.category_title td  {
    font-weight: 700;
    border-top: 3px solid #999;
}
.print_rubrics table.criteria tr td + td + td + td {
    border-left: none; /* 1px solid #999; */
}
.print_rubrics h2 {
    font-size: 2em;
    color: #666666;
}

@media print {

    @page {
        margin: .70cm;
    }  
    .print_rubrics {
        float: left;
        width: 24.2cm;
    }
    .print_rubrics table.criteria {
        table-layout: fixed;
        margin-bottom: 40px;
    }

    .print_rubrics table td {
        padding-bottom: 10px;
    }    
    .print_rubrics table.content {
        page-break-after: always;
    }
    
    .print_rubrics tr {
        page-break-inside: avoid;
    }
    .print_rubrics tr.title {
        page-break-after: avoid;
    }
    
/* 
    .evaluate_printout div.form_topper {
        float: left;
        width: 24.5cm;  
    }
 */

}