.key-section .standard-content-block {
    padding: 30px 0px;
  }
  
  .form-control-label {
      font-size: 16px;
  }
  
  .form-control-label h2 {
      display: inline-block;
      margin-right: 6px;
      padding: 20px 0px 15px 0px;
      font-size: 22px;
  }
  
  .form-control-label h3 {
      display: inline-block;
      margin-right: 6px;
      padding: 0px 0px 10px 0px;
      font-size: 20px;
  }
  
  p.form-control-note {
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
  }
  
  .standard-form-control {
      clear: left;
      margin-top: 60px;
  }
  
  .top-form-control {
      clear: left;
      margin-top: 20px;
  }
  
  .form-control .standard-input,
  .form-control .standard-menu,
  .form-control .standard-textarea { 
      font-size: 16px;
  }
  
  .form-control .standard-input.error, 
  .form-control .standard-input.error:focus {
      border: 1px solid rgb(186,55,46);
      background-color: #F7C8C5;
      box-shadow: inset 0 0 0 1px rgb(186,55,46);
  }
  
  .form-control .textarea.hidden {
      visibility: hidden;
  }
  
  .modified-textarea {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      min-height: 200px;
      resize: none;
      background-color: #FFF;
      border-radius: 0;
      outline: none;
      border: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: 17px;
      line-height: 160%;
      -moz-transition: background-color 0.2s;
      -webkit-transition: background-color 0.2s;
      -o-transition: background-color 0.2s;
      transition: background-color 0.2s;
      overflow-y: hidden;
  }
  
  .narrative-control.empty .modified-textarea {
      background-color: transparent;
  }
  
  .control-scroll-container {
      overflow-x: auto;
  }
  
  .narrative-control {
      position: relative;
      clear: both;
      padding: 8px;
      border: 1px solid #CCC;
  }
  
  .narrative-placeholder {
      position: absolute;
      top: 8px;
      left: 8px;
      color: #DBDBDB;
      color: #CCC;
      font-family: "Roboto", sans-serif;
      font-size: 16px;
      font-weight: 700;
      -moz-transition: font-size 0.2s;
      -webkit-transition: font-size 0.2s;
      -o-transition: font-size 0.2s;
      transition: font-size 0.2s;
  }
  
  .narrative-control.empty .narrative-placeholder {
      font-size: 20px;
  }
  
  .narrative-markup {
      display: none;
      position: relative;
      min-height: 200px;
      background-color: #FFF;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: 17px;
      line-height: 160%;
      word-wrap: break-word;
  }
  
  .markup-toggle-container {
      clear: left;
      display: inline-block;
      margin: 0 0 4px 0;
  }
  
  .markup-toggle {
      display: inline-block;
      cursor: pointer;
      padding: 0 4px 0 0;
  }
  
  .markup-toggle label {
      display: inline;
      position: relative;
      top: -0.25em;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      cursor: pointer;
  }
  
  .markup-toggle p {
      position: relative;
      top: -0.25em;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
  }
  
  .markup-toggle-checkbox {
      display: inline-block;
      position: relative;
      width: 16px;
      height: 16px;
      margin: 0px 4px 0px 0px;
      border: 1px solid #000;
  }
  
  .markup-toggle.active .markup-toggle-checkbox:after {
      position: absolute;
      content: "";
      top: 4px;
      left: 4px;
      width: 8px;
      height: 8px;
      background-color: #CCC;
  }
  
  .narrative-markup span.edit-insert {
      background: #D6EDDF;
      color: #0E682F;
  } 
  
  .narrative-markup span.edit-delete {
      background: #FAE3E2;
      color: #B5423D;
  }
  
  .narrative-markup span.edit-ignore {
      text-decoration: line-through;
  }
  
  .special-symbol-buttons {
      margin-bottom: 4px;
  }
  
  .special-symbol-anchor {
      float: right;
      margin-bottom: 4px;
  }
  
  .special-symbol-icon {
      width: 14px;
      margin: 0px 0px 0px 4px;
      padding: 0px 4px;
      background-color: #F3F3F3;
      border: 1px solid #E0E0E0;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
  }
  
  .special-symbol-anchor:hover .special-symbol-icon {
      display: none;
  }
  
  .insert-symbol-button, 
  .insert-superscript-button, 
  .insert-citation-button {
      float: left;
      min-width: 14px;
      margin: 0px 0px 0px 4px;
      padding: 0px 4px;
      background-color: #F3F3F3;
      border: 1px solid #E0E0E0;
      border-radius: 2px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
  }
  
  .insert-citation-button {
      font-style: italic;
  }
  
  .insert-symbol-button:hover, 
  .insert-superscript-button:hover, 
  .insert-citation-button:hover {
      background-color: #E0E0E0;
  }
  
  #special-symbol-toolbar .insert-symbol-button,
  #special-symbol-toolbar .insert-citation-button {
      display: none;
  }
  
  .special-symbol-anchor:hover #special-symbol-toolbar .insert-symbol-button,
  .special-symbol-anchor:hover #special-symbol-toolbar .insert-citation-button {
      display: inline-block;
  }
  
  .table-scroll-container {
      overflow-x: auto;
  }
  
  #class-geo-unit-select {
      width: 100%;
  }
  
  .clipboard-add-button {
      position: relative;
      width: 48px;
      height: 48px;
      margin-bottom: 10px;
      background-color: #58A1FF;
      opacity: 0.7;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
  }
  
  .clipboard-add-button:hover {
      opacity: 1;
  }
  
  .clipboard-add-button-icon {
      width: 16px;
      height: 16px;
      margin: 16px;
      background-image: url("../images/icons/edit-clipboard-icon-white-122283bd17ea92557a5d93525d80e8ea.png");
      -moz-background-size: 16px 16px;
      -webkit-background-size: 16px 16px;
      -o-background-size: 16px 16px;
      background-size: 16px 16px;
      background-repeat: no-repeat, repeat;
  }
  
  .delete-x {
      display: inline-block;
      position: relative;
      margin: 0px 0px 5px 8px;
  }
  
  .delete-x::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 14px;
      height: 2px;
      margin-top: -1px;
      margin-left: -7px;
      background-color: #FFF;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  .delete-x::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 14px;
      height: 2px;
      margin-top: -1px;
      margin-left: -7px;
      background-color: #FFF;
      -moz-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
  
  .standard-input-table,
  .custom-input-table {
      border: none;
      margin-top: 6px;
  }
  
  .standard-input-table th,
  .custom-input-table th {
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 16px; 
  }
  
  .standard-input-table .row-header,
  .custom-input-table .row-header {
      text-align: left;
  }
  
  .standard-input-table td,
  .custom-input-table td {
      padding: 4px;
  }
  
  .standard-input-table .table-edits th {
      font-size: 0;
  }
  
  .standard-input-table .table-edits td {
      padding: 0px 9px 0px 9px;
      vertical-align: top;
  }
  
  .standard-input-table .table-edits span {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
  }
  
  .standard-input-table .standard-input,
  .standard-input-table .standard-menu,
  .standard-input-table .standard-textarea { 
      width: 100%;
      padding: 5px;
      font-size: 15px;
  }
  
  .standard-input-table .standard-menu option {   
      padding: 0px 5px;
  }
  
  .column-group-header {
      font-style: italic;
  }
  
  .group-spacer {
      width: 12px;
  }
  
  .custom-input-table tr th:nth-child(1) {
      padding-left: 9px;
      text-align: left;
  }
  
  .custom-input-table select:disabled,
  .custom-input-table input[type="text"]:disabled {
      color: #CCC;
      background-color: #F3F3F3;
  }
  
  .custom-input-remove-button {
      display: block;
      position: relative;
      width: 18px;
      height: 18px;
      margin: 0 auto;
      cursor: pointer;
  }
  
  .standard-remove::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 3px;
      margin-top: -1px;
      margin-left: -9px;
      border-radius: 1px;
      background-color: #E34037;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  .standard-remove::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 3px;
      margin-top: -1px;
      margin-left: -9px;
      border-radius: 1px;
      background-color: #E34037;
      -moz-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
  
  .custom-input-table tr.new-entry .custom-input-remove-button {
      visibility: hidden;
  }
  
  #subunit-list {
      margin-top: 20px;
      list-style: none;
  }
  
  .subunit {
      position: relative;
      padding: 0px 0px 80px 0px;
  }
  
  .subunit-input-control {
      float: left;
      margin: 0px 16px 16px 0px;
      width: 120px;
  }
  
  .subunit-narrative-control {
      clear: left;
  }
  
  .subunit-control-label {
      display: block;
      margin-bottom: 6px;
      margin-bottom: 4px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 16px;
  }
  
  .remove-subunit-button {
      position: absolute;
      top: 20px;
      right: 10px;
      width: 20px;
      height: 20px;
      cursor: pointer;
  }
  
  .subunit-template .remove-subunit-button {
      display: none;
  }
  
  .image-collection-list {
      display: inline-block;
      width: 100%;
      list-style-type: none;
  }
  
  .image-collection-card {
      position: relative;
      float: left;
      width: 256px;
      margin: 8px 16px 8px 0;
      border: 1px solid #9E9E9E;
      overflow: hidden;
      cursor: pointer;
  }
  
  .image-collection-frame {
      position: relative;
      height: 150px;
      background-color: #FFF;
      border-bottom: 1px solid #9E9E9E;
      overflow: hidden;
      cursor: pointer;
  }
  
  .image-collection-card canvas {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
  }
  
  .image-collection-placeholder {
      float: left;
      height: 261px;
      width: 256px;
      margin: 8px;
      background-color: #F8F8F8;
      border: 1px dashed #9E9E9E;
  
  }
  
  .image-collection-image {
      position:absolute;
      top: -200%;
      bottom: -200%;
      right: 0;
      left: 0;
      width: 256px;
      height: auto;
      margin: auto;
  }
  
  .image-collection-wide-image {
      position: absolute;
      top: 0;
      bottom: 0;
      right: -200%;
      left: -200%;
      width: auto;
      height: 150px;
      margin: auto;
  }
  
  .image-collection-caption {
      height: 110px;
  }
  
  .image-collection-message { 
      margin-bottom: 30px;
  }
  
  .image-collection-zoom-button {
      display: block;
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 99;
      height: 20px;
      padding: 6px;
      background-color: rgba(0,0,0,0.5);
      border-radius: 2px;
      opacity: 0;
      -moz-transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      -o-transition: opacity 0.3s;
      transition: opacity 0.3s;
      -moz-transition-delay: 0.3s;
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
      cursor: pointer;
  }
  
  .image-collection-card:hover .image-collection-zoom-button,
  .image-collection-zoom-button:focus {
      opacity: 1;
  }
  
  .image-collection-edit-button {
      display: block;
      position: absolute;
      top: 12px;
      left: 48px;
      z-index: 99;
      height: 20px;
      padding: 6px;
      background-color: rgba(0,0,0,0.5);
      border-radius: 2px;
      opacity: 0;
      -moz-transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      -o-transition: opacity 0.3s;
      transition: opacity 0.3s;
      -moz-transition-delay: 0.3s;
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
      cursor: pointer;
  }
  
  .image-collection-card:hover .image-collection-edit-button,
  .image-collection-edit-button:focus {
      opacity: 1;
  }
  
  .image-collection-delete-button {
      display: block;
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 99;
      width: 12px;
      padding: 4px;
      background-color: #FFF;
      border: 1px solid #AAA;
      border-radius: 50%;
      opacity: 0;
      -moz-transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      -o-transition: opacity 0.3s;
      transition: opacity 0.3s;
      -moz-transition-delay: 0.3s;
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
      cursor: pointer;
  }
  
  .image-collection-card:hover .image-collection-delete-button,
  .image-collection-delete-button:focus {
      opacity: 1;
  }
  
  .image-collection-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgb(0,0,0);
      background: -webkit-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
      background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
      background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
      -moz-transition: opacity 0.3s linear;
      -webkit-transition: opacity 0.3s linear;
      -o-transition: opacity 0.3s linear;
      transition: opacity 0.3s linear;
      -moz-transition-delay: 0.3s;
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
  }
  
  .image-collection-name-container {
      margin: 10px 5px 5px 5px;
  }
  
  .image-collection-card input[name="image-name"] {
      box-sizing: border-box;
      display: block;  
      width: 100%;
      padding: 5px;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      background-color: transparent;
      border: 0;
      border-radius: 0;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
  }
  
  .image-collection-card input[name="image-name"]:focus {
      color: #000;
      background-color: #FFF;
  } 
  
  .image-collection-name {
      display: none;
      margin: 11px;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
  }
  
  .image-collection-card textarea {     
      box-sizing: border-box;
      width: 100%;
      padding: 8px;
      background-color: #FFF;
      border: none;
      border-radius: 0;
      outline: none; 
      resize: none;
      overflow: auto; 
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px; 
      line-height: 130%;  
      -webkit-box-shadow: none;
      box-shadow: none;   
      -webkit-appearance: none;
      -moz-appearance: none;
  }
  
  .image-collection-add-card {
      position: relative;
      float: left;
      width: 256px;
      height: 262px;
      margin: 8px 16px 8px 0;
      background-color: #353535;
      overflow: hidden;
  }
  
  .image-load-form-controls {
      position: absolute;
      top: 0;
      left: 0;
  }
  
  .image-collection-add-frame {
      position: absolute;
      top: 15%;
      bottom: 15%;
      right: 15%;
      left: 15%;
      padding: 46px 35px 0px 35px;
      opacity: 0.5;
      -moz-transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      -o-transition: opacity 0.3s;
      transition: opacity 0.3s;
      cursor: pointer;
  }
  
  .image-collection-add-frame.over {
      opacity: 0.8;
  }
  
  .image-collection-add-frame:hover {
    opacity: 0.8;
  }
  
  .add-image-button {
      display: block;
      width: 70px;
      margin: 0 auto;
  }
  
  p.add-image-text {
      margin-top: 10px;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      text-align: center;
  }
  
  .image-collection-add-card input[type="file"] {
      visibility: hidden;
  }
  
  .image-collection-upload-content {
      position: relative;
      height: 260px;
      background-color: #FFF;
  }
  
  .image-collection-alert {
      display: block;
      position: relative;
      margin: 0 auto;
      padding-top: 30px;
      width: 50px;
  }
  
  .image-collection-upload-content p { 
      padding: 20px 50px 50px 50px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px; 
      text-align: center;
      word-wrap: break-word;
  }
  
  #image-editor-overlay {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 998;
      background-color: #000;
      background-color: rgba(0,0,0,0.9);
  }
   
  #image-editor-close-button {
      top: 20px;
      right: 20px;
  }
  
  #image-editor-close-button::before {
      border-top: 1.8px solid #FFF;
  }
  
  #image-editor-close-button::after {
      border-top: 1.8px solid #FFF;
  }
  
  #image-editor-toolbar {
      position: absolute;
      top: 10px;
      left: 20px;
  }
  
  #image-editor-crop-button {
      display: inline-block;
      margin-right: 20px;
      padding: 10px;
      background-color: #000;   
      background-color: rgba(255,255,255,0.2);
      border-radius: 2px;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
      text-transform: uppercase;
      -moz-transition: background-color 200ms;
      -webkit-transition: background-color 200ms;
      -o-transition: background-color 200ms;
      transition: background-color 200ms;
      cursor: pointer;
  }
  
  #image-editor-crop-button:hover,
  #image-editor-crop-button:focus {
      background-color: rgba(255,255,255,0.4);   
  }
  
  #image-editor-width-input,
  #image-editor-height-input {
      box-sizing: border-box;
      width: 100px;
      margin-right: 20px;
      padding: 10px;
      background-color: #000;   
      background-color: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 0;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      font-weight: 400;
  }
  
  #image-editor-width-input:focus,
  #image-editor-height-input:focus { 
      background-color: rgba(255,255,255,0.4); 
  }
  
  #image-editor-crop-label {
      display: inline-block;
      padding: 10px 0px;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
  }
   
  #image-editor-content {
      position: absolute;
      top: 60px;
      bottom: 20px;
      right: 20px;
      left: 20px;
      overflow: hidden;
  }
  
  #image-editor-img {
      display: block;
      position: relative;
      margin: 0 auto;
      visibility: hidden;
  }
  
  #plant-search-dialog-container {
      max-width: 600px; 
      margin-right: auto;
      margin-left: auto;
      padding: 0px 20px; 
  }
  
  .plant-search-control {
      margin: 20px 0px;
  }
  
  #state-plant-list-menu {
      width: 100%;
      margin: 6px 0px;
      font-size: 16px;
  }
  
  #plant-search-box {
      display: inline-block;
      position: relative;
      width: 100%;
      margin: 6px 0px;
      border: 1px solid #888;
  }
  
  #plant-search-box input {
      width: 100%;
      padding-right: 50px;
      font-size: 16px;
      border: none;
  }
  
  #plant-search-button {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 40px;
      background-color: #3268AD;
      -moz-transition: background-color 0.2s;
      -webkit-transition: background-color 0.2s;
      -o-transition: background-color 0.2s;
      transition: background-color 0.2s;
      cursor: pointer;
  }
  
  #plant-search-button:hover,
  #plant-search-button:focus {
      background-color: #4E82C7;
  }
  
  #plant-search-button img {
      position: absolute;
      top: 50%;
      right: 10px;
      width: 20px;
      margin-top: -10px;
  }
  
  #plant-search-result {
      margin: 20px 0px 40px 0px;
  }
  
  #plant-search-list {
      min-height: 100px;
      border: 1px solid #888;
      list-style: none;
  }
  
  #plant-search-list li {
      padding: 4px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
      cursor: pointer;
  }
  
  #plant-search-list li:hover {
      background-color: #F3F3F3;
  }
  
  #plant-search-list li.selected {
      background-color: #DCE7F5;
  }
  
  #plant-search-list-msg {
      margin: 6px 0px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
  }
  
  .species-add-button {
      display: inline-block;
      position: relative;
      padding: 8px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      text-transform: uppercase;
      cursor: pointer;
  }
  
  #citation-dialog-container {
      max-width: 1020px; 
      margin: 0 auto;
      padding: 0px 20px; 
  }
  
  #citation-all-container {
      width: 100%;
      margin: 6px 9px;
  }
  
  #citation-all-container label {
      margin-left: 6px;
      color: #000;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
  }
  
  #modal-citation-list {
      position: relative;
      height: 500px;
      margin: 5px 0px;
      padding: 0px 10px 0px 0px;
      overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
  }
  
  #citation-sort-container,
  #citation-search-container {
      display: inline-block;
      margin: 10px 0px 10px 14px;
  }
  
  #citation-sort-label,
  #citation-search-label, 
  #citation-sort-select,
  #citation-search-box {
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
  }
  
  #citation-sort-select {    
      box-sizing: border-box;
      min-width: 110px;
      margin: 0px 6px;
  }
  
  #citation-search-box {    
      box-sizing: border-box;
      min-width: 219px;
      margin: 0px 6px;
  }
  
  .citation-page-list {
      float: right;
      list-style: none;
      margin: 10px 10px 10px 10px;
  }
  
  .citation-page-list-label {
      margin-right: 6px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
  }
  
  .citation-page-button {
      display: inline-block;
      font-size: 14px;
      width: 3em;
      height: 1em;
      padding: 1em 0;
      background-color: #F3F3F3;
      border: 1px solid #FFF;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      text-align: center;
      line-height: 100%;
      cursor: pointer;
  }
  
  .citation-page-button:not(.active):hover {
      background-color: #E0E0E0;
      color: #222;
  }
  
  .citation-page-button.active {
      background-color: #404040;
      background-color: #8BBEFF;
      color: #FFF;
      cursor: default;
  }
  
  .previous-citation-page-button,
  .next-citation-page-button {
      display: inline-block;
      font-size: 16px;
      width: 2.625em;
      height: 1em;
      padding: 0.8125em 0;
      background-color: #F3F3F3;
      border: 1px solid #FFF;
      color: #AAA;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      text-align: center;
      line-height: 100%;
      cursor: not-allowed;
  }
  
  .previous-citation-page-button {
      border-radius: 5px 0px 0px 5px;
  }
  
  .next-citation-page-button {
      border-radius: 0px 5px 5px 0px;
  }
  
  .previous-citation-page-button.active,
  .next-citation-page-button.active {
      background-color: #F3F3F3;
      color: #222;
      cursor: pointer;
  }
  
  .previous-citation-page-button.active:hover,
  .next-citation-page-button.active:hover {
      background-color: #E0E0E0;
  }
  
  .selectable-citation,
  .removable-citation {  
      padding: 14px 50px 14px 14px;
  }
  
  .selectable-citation:hover,
  .removable-citation:hover {
      background-color: #F3F3F3;
  }
  
  .citation-remove-button {
      display: block;
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;  
      opacity: 0;
      cursor: pointer;
  }
  
  .citation-list li:hover .citation-remove-button {    
      opacity: 1;
  }
  
  .citation-remove-button:focus {    
      opacity: 1;
  }
  
  .selectable-citation {
      cursor: pointer;
  }
  
  .citation-select-button {
      display: block;
      position: absolute;
      top: 14px;
      right: 10px;
      width: 14px;
      height: 14px;
      padding: 4px;    
      border: 2px solid #E0E0E0;
      border-radius: 2px;
      cursor: pointer;
  }
  
  .selectable-citation.selected .citation-select-button,
  .selectable-citation.selected:hover .citation-select-button,
  .selectable-citation.selected .citation-select-button:focus  {
      background-color: #8BBEFF;
      border: 2px solid #8BBEFF;
  }
  
  .citation-select-button::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 7px;
      width: 5px;
      height: 12px;
      border: solid #E0E0E0;
      border-width: 0 3px 3px 0;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  .selectable-citation.selected .citation-select-button::after {
      border: solid #FFF;
      border-width: 0 3px 3px 0;
  }
  
  .citation-dialog-option-block {
      margin: 10px 0px;
  }
  
  .citation-dialog-option-block label {
      padding-left: 4px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight:400;
      font-size: 16px;
      cursor: pointer;
  }
  
  #citation-button-container {
      display: inline-block;
  }
  
  #selected-citation-toggle {
      cursor: pointer;
  }
  
  #subclass-checklist-header {
      padding: 4px 10px;
      color: #3268AD;
      font-family: "Roboto", sans-serif;
      font-weight:400;
      font-size: 16px;  
  }
  
  #subclass-checklist {  
      margin: 4px 0px 0px 0px;  
      list-style-type: none;
      height: 300px;
      background-color: #FFF;
      border: 1px solid #CCC;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
  }
  
  #subclass-checklist li {
      padding: 4px 10px;
      color: #000;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;  
  }
  
  .subclass-checklist-name {
      margin-left: 6px;
  }
  
  #contributor-list {  
      margin: 4px 0px 0px 0px;  
      list-style-type: none;
      background-color: #FFF;
      border: 1px solid #CCC;
  }
  
  .species-list {   
      margin: 4px 0px 0px 0px;
      list-style-type: none;
      height: 132px;
      background-color: #FFF;
      border: 1px solid #CCC;
      overflow-y: auto;
  }
  
  #contributor-list li,
  .species-list li {
      position: relative;
      padding: 3px 42px 3px 25px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;  
      border-bottom: 1px solid #F2F2F2;
  }
  
  #contributor-list li.contributor-list-template {
      padding: 2px 40px 2px 0px;
  }
  
  .species-list li span {
      display: inline-block;
      padding: 3px 8px; 
  }
  
  .contributor-remove-button {
      display: block;
      position: absolute;
      left: 8px;
      top: 12px;
      width: 18px;
      height: 18px;
      margin: 0 auto;
      cursor: pointer;
  }
  
  .species-remove-button {
      display: block;
      position: absolute;
      left: 8px;
      top: 7px;
      width: 18px;
      height: 18px;
      margin: 0 auto;
      cursor: pointer;
  }
  
  .contributor-list-template .contributor-remove-button {
      display: none;
  }
  
  .contributor-list-swap,
  .species-swap-button {
      display: block;
      position: absolute;
      right: 10px;
      top: -15px;
      height: 30px;
      cursor: pointer;
  }
  
  .contributor-list-template .contributor-list-swap {
      display: none;
  }
  
  #contributor-list input {     
      box-sizing: border-box;
      width: 100%;
      padding: 8px;
      background-color: #FFF;
      border: none;
      border-radius: 0;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;   
      -webkit-appearance: none;
      -moz-appearance: none; 
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;   
      font-size: 16px;
  }
  
  .contributor-list-template input::-webkit-input-placeholder { 
      color: #AAA;
  }
  
  .top-contributor,
  .top-species {
      display: none;
  }
  
  #add-citations-button {
      display: inline-block;
      margin: 30px 0px 8px 0px;
      color: #000;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 18px;
      cursor: pointer;
  }
  
  #add-citations-button img {
      display: block;
      float: left;
      width: 22px;
      margin-right: 8px;
  } 
  
  #key-tree-reset-button,
  #key-from-text-button {
      margin: 20px 10px 0px 0px;
  }
  
  #key-menu, 
  #key-sequence-menu {
      font-size: 15px;
  }
  
  #key-menu {
      width: 240px;
      float: left;
  }
  
  #key-sequence-menu {
      width: 60px;
  }
  
  #add-key-button {
      display: inline-block;
      margin-top: 6px;
      margin-left: 10px;
      color: #000;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
      opacity: 1;
      cursor: pointer;
  }
  
  #add-key-button:hover {
      opacity: 0.6;
  }
  
  #add-key-button  img {
      display: block;
      float: left;
      width: 22px;
      margin-right: 8px;
      font-size: 0;
  }
  
  .key-input-control, 
  .key-textarea-control {
      font-size: 15px;
      width: 100%;
  }
  
  .key-input-control:focus, 
  .key-textarea-control:focus {
      border: 1px solid #222;
  }
  
  .key-textarea-control {
      resize: none;
  }
  
  #text-editor-buttons {
      display: inline-block;
      width: 100%;
  }
  
  #text-editor-special-symbol-buttons {
      float: right;
  }
  
  textarea[name='key-text-editor'] {
      margin-bottom: 1px;
      resize: none;
  }
   
  #add-key-note-button {
      display: inline-block;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 12px;
      text-transform: uppercase;
      cursor: pointer;
  }
  
  .key-editable-note {
      box-sizing: border-box;
      clear: left;
      display: inline-block;
      position: relative;
      width: 100%;
      margin-top: 10px;
      padding-right: 30px;
      background-color: #F3F3F3;
      border: 1px solid #222;
  }
  
  .remove-key-note-button {
      display: block;
      position: absolute;
      top: 0px;
      right: 0px;
      width: 14px;
      padding: 8px;
      cursor: pointer;
  }
  
  .key-editable-note.note-template .remove-key-note-button {
      display: none;
  }
  
  .key-editable-note textarea {
      float: left;
      font-size: 14px;
      resize: none;
  }
  
  .key-editable-note textarea:nth-child(1) {
      width: 15%;
  }
  
  .key-editable-note textarea:nth-child(2) {
      width: 20%;
  }
  
  .key-editable-note textarea:nth-child(3) {
      width: 65%;
  }
  
  #key-tree-popup-option {
      margin: 0px 0px 6px 0px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
  }
  
  #key-tree-popup-option input {
      cursor: pointer;
  }
  
  #key-tree-popup-option label {
      margin: 0px 20px 0px 0px;
      padding-left: 6px;
      cursor: pointer;
  }
  
  #key-tree-diagram-block {
      position: relative;
      border: 1px solid #E0E0E0;
      min-height: 800px;
      overflow-x: scroll; 
      -webkit-overflow-scrolling: touch;
  }
  
  #key-tree-diagram-container {
      position: relative;
      display: block;
      min-width: 1000px;
  }
  
  .key-tree-node {
      cursor: pointer;
  }
  
  .key-tree-node.node-leaf .key-node-circle {
      fill: #58A1FF;
  }
  
  .key-tree-node.node-internal .key-node-circle {
      fill: #3268AD;
  }
  
  .key-node-label {
      font: 12px sans-serif;
      fill: #FFF;    
      cursor: pointer;
  }
  
  .key-node-target-text {
      font: 12px sans-serif;
      fill: #222;
  }
  
  .key-node-criteria-text {
      visibility: hidden;
      opacity: 0;
      font: 13px sans-serif;
      fill: #222; 
      -moz-transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      transition: opacity 0.3s;
  }
  
  .key-tree-node.node-leaf:hover .key-node-criteria-text {
      visibility: visible;
      opacity: 1;
  }
  
  .key-tree-node.node-internal:hover .key-node-criteria-text {
      visibility: visible;
      opacity: 1;
  }
  
  .key-tree-tooltip {
      position: absolute;
      width: 200px;
      visibility: hidden;
      opacity: 0;
      background-color: #FFF;
      box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      font: 13px sans-serif;
      text-align: center;
  }
  
  .key-tree-node.node-internal .key-node-target-text {
      display: none;
  }
  
  .key-tree-node.node-leaf:nth-of-type(odd) .key-node-target-text {
      margin-top: 0;
  }
  
  .key-tree-node.node-leaf:nth-of-type(even) .key-node-target-text {
      margin-top: 40px;
  }
  
  .link {
      fill: none;
      stroke: #555;
      stroke-opacity: 0.4;
      stroke-width: 1.5px;
  }
  
  
  #key-tree-popup-anchor {
      visibility: hidden;
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      font-size: 15px;
      z-index: 99;
  }
  
  #key-tree-popup {
      display: none;
      position: absolute;
      width: 460px;
      background-color: #FFF;
      border: 2px solid #222;
      -webkit-box-shadow: 0px 1px 8px rgba(0,0,0,0.4);
      -ms-box-shadow: 0px 1px 8px rgba(0,0,0,0.4);
      box-shadow: 0px 1px 8px rgba(0,0,0,0.4);
      font-size: 15px;
      z-index: 99;
  }
  
  #key-tree-popup:before {
      position: absolute;
      height: 0;
      width: 0;
      content: " ";
      border: solid transparent;
      pointer-events: none;
      border-width: 12px;
  }
  
  #key-tree-popup.popup-top {
      top: -40px;
  }
  
  #key-tree-popup.popup-bottom{
      bottom: -40px;
  }
  
  #key-tree-popup.popup-center{
      top: -126px;
  }
  
  #key-tree-popup.popup-right {
      left: 26px;
  }
  
  #key-tree-popup.popup-left {
      right: 26px;
  }
  
  #key-tree-popup.popup-right:before {
      right: 100%;
      border-right-color: #222;
  }
  
  #key-tree-popup.popup-left:before {
      left: 100%;
      border-left-color: #222;
  }
  
  #key-tree-popup.popup-top:before {
      top: 26px;
  }
  
  #key-tree-popup.popup-center:before {
      top: 112px;
  }
  
  #key-tree-popup.popup-bottom:before {
      bottom: 26px;
  }
  
  #key-tree-popup-wrapper {
      min-height: 40px;
      padding: 10px;
  }
  
  #key-tree-popup-buttons {
      padding: 10px;
      background-color: #F5F5F5;
      border-top: 1px solid #BFBFBF;
  }
  
  #key-tree-popup-close {
      display: block;
      position: absolute;
      top: 0;
      right: 0px;
      padding: 10px;
      width: 18px;
      height: 18px;
      cursor: pointer;
      opacity: 1;
  }
  
  #key-tree-popup-close:hover {
      opacity: 0.7;
  }
  
  #key-tree-popup-close::before {
      content: "";
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 0;    
      margin-top: -2px;
      margin-left: -10px;
      border-top: 3.8px solid #222;
      transform: rotate(45deg);
      transform-origin: center;
  }
  
  #key-tree-popup-close::after {
      content: "";
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 0;    
      margin-top: -2px;
      margin-left: -10px;
      border-top: 3.8px solid #222;
      transform: rotate(-45deg);
      transform-origin: center;
  }
  
  #key-tree-popup .special-symbol-buttons {
      float: right;
  }
  
  .key-tree-popup-sequence-option { 
      box-sizing: border-box;
      float: left;
      width: 28px;
      height: 28px;
      margin: 0px 10px 4px 0px;
      padding: 4px 0px;
      border: 2px solid #AAA; 
      border-radius: 50%;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 14px;
      text-transform: uppercase;
      text-align: center;
      cursor: pointer;
  }
  
  .key-tree-popup-sequence-option:hover, 
  .key-tree-popup-sequence-option.active {
      border: 2px solid #58A1FF;
      background: #58A1FF;
      color: #FFF;
  }
  
  .key-tree-popup-control {
      clear: left;
      display: inline-block;
      width: 100%;
      margin-top: 8px;
  }
  
  #key-tree-popup-lead-label label, 
  #key-tree-popup-lead-criteria label {
      float: left;
      margin: 8px 8px 4px 0px;
  }
  
  #key-tree-popup-label-control-wrapper {
      float: left;
      width: 80px;
  }
  
  .key-control-label {
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 16px;
  }
  
  #key-tree-popup-lead-target-list .key-control-label {
      display: block;
  }
  
  #key-tree-popup-target-sort-menu {
      float: left;
      width: 240px;
      margin-bottom: 8px;
      background-color: #FFF;
      border: 1px solid #9E9E9E;
      border-radius: 0;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
  }
  
  #key-tree-popup-target-sort-menu option {
      padding: 0px 4px;
  }
  
  #key-tree-popup-all-target-control {
      float: right;
      margin-right: 20px;
  }
  
  #key-tree-popup-all-target-control label {
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
      cursor: pointer;
  }
  
  #key-tree-popup-all-target-checkbox {
      cursor: pointer;
  }
  
  #key-tree-target-table-container { 
      clear: both;
      height: 286px;
      overflow-y: scroll;
      border: 1px solid #9E9E9E;
  }
  
  #key-tree-target-table { 
      table-layout: fixed;  
      border-collapse: collapse;
      border-spacing: 0;
      padding: 0px 1px;
  }
  
  .key-tree-target-select-button {
      cursor: pointer;  
  }
  
  #key-tree-target-table td {
      padding: 5px;
      border-bottom: 1px solid #F3F3F3; 
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
  }
  
  #key-tree-target-table td:nth-child(1) {
      width: 40px;
  }
  
  #key-tree-target-table td:nth-child(2) {
      width: 120px;
  }
  
  #key-tree-target-table td:nth-child(3) {
      width: 260px;
  }
  
  .key-tree-target-check {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #E0E0E0; 
  }
  
  .key-tree-target-select-button.selected .key-tree-target-check {
      background-color: #58A1FF;
  }
  
  .key-tree-target-check::after {
      content: "";
      display: inline-block;
      position: absolute;
      top: 5px;
      left: 8px;
      width: 7px;
      height: 14px;
      margin: 0px 10px 0px 2px;
      border: solid #FFF;
      border-width: 0 3px 3px 0;
      transform: rotate(45deg);
  }
  
  #key-tree-popup-update-button, 
  #key-tree-popup-add-button, 
  #key-tree-popup-target-button, 
  #key-tree-popup-delete-button {
      display: inline-block;
      padding: 4px 14px;
      background-color: #3268AD;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      text-transform: uppercase;
      border-radius: 2px;
      -moz-transition: background-color 0.2s;
      -webkit-transition: background-color 0.2s;
      transition: background-color 0.2s;
      cursor: pointer; 
  }
  
  #key-tree-popup-update-button, 
  #key-tree-popup-add-button {
      margin-right: 10px;
  }
  
  #key-tree-popup-delete-button {
      float: right;
  }
  
  #key-tree-popup-update-button:hover, 
  #key-tree-popup-add-button:hover, 
  #key-tree-popup-delete-button:hover,
  #key-tree-popup-update-button:focus, 
  #key-tree-popup-add-button:focus, 
  #key-tree-popup-delete-button:focus {
      background-color: #1C6BBA;    
      color: #FFF;
  }
  
  .form-control .state-sequence-select {
      width: 60px;
  }
  
  .form-control .transition-type-select {
      max-width: 200px;
  }
  
  .form-control .interpretation-type-select {
      max-width: 240px;
      margin: 10px 10px 0px 0px;
  }
  
  #survey-area-menu-container {
      margin-top: 10px;
  }
  
  #survey-area-menu {
      width: 100%;
  }
  
  .sortable-table-container {
      margin-top: 10px;
      overflow-x: auto;
  }
  
  .sortable-table {
      width: 100%;
      border-collapse: collapse;
  }
  
  .sortable-table th {
      position: relative;
      padding: 10px 20px 10px 8px;
      background-color: #2B5894;
      border: 1px solid #FFF;
      color: #FFF;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      text-align: left;
      vertical-align: bottom;
      cursor: pointer;
  }
  
  .sortable-table-toggle {
      position: absolute;
      bottom: 14px;
      right: 6px;
      width: 0; 
      height: 0; 
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #FFF;
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      -moz-transform-origin: center;
      transform-origin: center;
  }
  
  .sortable-table th.desc .sortable-table-toggle {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      transform: rotate(180deg);
  }
  
  .sortable-table td {
      padding: 10px 8px;
      border: 1px solid #FFF;
      color: #4E6582;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      vertical-align: middle;
      cursor: pointer;
  }
  
  .sortable-table tr {
      background-color: #DCE7F5;
  }
  
  .sortable-table tr.sortable-table-option:hover {
      background-color: rgba(220,231,245,0.7);
  }
  
  .sortable-table-checkbox {
      position: relative;
      width: 26px;
      height: 26px;
      margin: 0px 20px;
      background-color: rgba(255,255,255,0.3);
      border: 3px solid #FFF;
      border-radius: 4px;
  }
  
  .sortable-table-option[aria-selected="true"] .sortable-table-checkbox {
      background-color: #6CE6A5;
  }
  
  .sortable-table-option[aria-selected="true"] .sortable-table-checkbox::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 9px;
      margin-top: -7px;
      margin-left: -4px;
      border: solid #FFF;
      border-width: 0 4px 4px 0;
      transform: rotate(45deg);
  }
  
  .interpretation-table-container input[name="interpretation-type"] {
      display: none;   
      margin-top: 10px;
      width: 240px;
  }
  
  .interpretation-table textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 5px;
      resize: none;
      background: none;
      border: 1px solid transparent;
      border-radius: 0;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
  }
  
  .interpretation-table textarea:focus {
      background: #FFF;
      border: 1px solid #222;
  }
  
  p.remove-interpretation-button, 
  p.add-interpretation-button {
      padding: 0;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 12px;
      text-transform: uppercase;
      cursor: pointer;
      word-break: initial;
  }
  
  p.remove-interpretation-button {
      margin: 0px 10px;
  }
  
  p.add-interpretation-button {
      display: inline-block;
      margin: 14px 10px;
  }
  
  .resource-concern-category {
      display: inline-block;
      width: 100%;
      margin: 3px 0px;
  }
  
  .resource-concern-radio-group {
      display: inline-block;
      float: left;
      width: 150px;
  }
  
  .resource-concern-radio {
      display: inline-block;
      box-sizing: border-box;
      width: 50px;
      padding: 8px 0px;
      border: 1px solid #9E9E9E;
      color: #CCC;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 12px;
      text-transform: uppercase;
      text-align: center;
      overflow: hidden;
      cursor: pointer;
  }
  
  .resource-concern-radio[aria-checked="false"]:hover {
      color: #222;
  }
  
  .resource-concern-radio.low {
      border-right: none;
  }
  
  .resource-concern-radio.med {
      border-right: none;
  }
  
  .resource-concern-radio.low[aria-checked="true"] {
      background-color: #60CD93;
      color: #FFF;
  }
  
  .resource-concern-radio.med[aria-checked="true"] {
      background-color: #FFE863;
      color: #FFF;
  }
  
  .resource-concern-radio.high[aria-checked="true"] {
      background-color: #B83F32;
      color: #FFF;
  }
  
  .resource-concern-category span {
      display: inline-block;
      float: left;
      margin: 6px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      
  }
  
  .attribute-resource-list li input[type="text"] {
      width: 100%;
      box-sizing: border-box;
      margin-top: 4px;
      padding: 5px;
      background-color: #FFF;
      border: none;
      border-radius: 0;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
  }
  
  .attribute-resource-remove-button {
      display: block;
      position: absolute;
      right: 10px;
      top: 10px;
      width: 18px;
      height: 18px;
      cursor: pointer;
  }
  
  .attribute-resource-template .attribute-resource-remove-button {
      display: none;
  }
  
  .extendable-table { 
      table-layout: fixed;
      border-collapse: collapse;
      background-color: #F8F8F8;
      border: 1px solid #222;
  }
  
  .extendable-table th { 
      padding: 10px 5px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 14px;
      text-align: left;
      vertical-align: bottom;
      background-color: #E0E0E0;
  }
  
  .extendable-table th:nth-child(n+2) {
      border-left: 1px solid transparent;
  }
  
  .extendable-table-data { 
      background-color: #FFF;
  }
  
  .extendable-table-data.editing { 
      display: none;
  }
  
  .extendable-table td { 
      border-top: 1px solid #CCC;
  }
  
  .extendable-table td:nth-child(n+2) {
      border-left: 1px solid #CCC;
  }
  
  .extendable-table-template, 
  .extendable-table-edit-row  {
      display: none;
  }
  
  #extendable-table-edit-highlight {  
      display: none;
      position: absolute;
      top: -1px;
      bottom: -1px;
      right: -1px;
      left: -1px;
      z-index: 99;
      border: 2px solid #58A1FF;
  }
  
  .extendable-table-edit-row #extendable-table-edit-highlight  {  
      display: block;
  }
  
  .extendable-table-edit-row td {
      position: relative;
  }
  
  .extendable-table-edit-button {
      display: block;
      height: 14px;
      margin: 5px auto; 
      cursor: pointer;
  }
  
  .extendable-table-data .data {
      padding: 6px 5px; 
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
      cursor: pointer;
  }
  
  .extendable-table-data .data.error {
      background-color: #F7C8C5;
      box-shadow: inset 0 0 0 2px rgb(186,55,46);
  }
  
  .extendable-table select, 
  .extendable-table input, 
  .extendable-table textarea { 
      position: relative;
      box-sizing: border-box;
      width: 100%;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
      background-color: #FFF;
      border: none;
      border-radius: 0;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none; 
      -webkit-appearance: none;
      -moz-appearance: none;
  }
  
  .extendable-table textarea {
      resize: none;
  }
  
  
  .extendable-table-edit-row select, 
  .extendable-table-edit-row input, 
  .extendable-table-edit-row textarea { 
      padding: 5px;
  }
  
  .extendable-table select:focus, 
  .extendable-table input:focus, 
  .extendable-table textarea:focus {
      z-index: 98;
      box-shadow: inset 0 0 0 1px #58A1FF, 0 0 0 1px #58A1FF;
  }
  
  .extendable-table-increment-label {
      padding: 5px; 
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
  }
  
  .extendable-table option {   
      padding: 0px 5px;
  }
  
  p.extendable-table-add-button, 
  p.community-composition-add-button {
      display: inline-block;
      padding: 10px 5px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      text-transform: uppercase;
      cursor: pointer;
  }
  
  .extendable-table-spreadsheet-input {
      overflow: hidden;
      padding: 10px 5px;
  }
  
  .plant-symbol-cell {
      box-sizing: border-box;
      position: relative;
  }
  
  .plant-symbol-search-button {
      display: block;
      position: absolute;
      padding: 5px 5px;
      top: 2px;
      right: 2px;
      z-index: 99;
      width: 15px;
      background-color: #FFF;
      opacity: 0.5;
      cursor: pointer;
  }
  
  p.community-composition-edit-button {
      display: inline-block;
      padding: 5px;
      color: #3268AD;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      text-transform: uppercase;
      cursor: pointer;
  }
  
  .extendable-table-remove-cell {
      width: 36px;
  }
  
  .extendable-table-remove-button,
  .community-composition-remove-button {
      display: block;
      position: relative;
      width: 14px;
      height: 14px;
      margin: 0 auto;
      cursor: pointer;
  }
  
  .extendable-table-category {
      border-bottom: 1px solid #222;
  }
  
  .custom-model-diagram {
      margin-bottom: 20px;
  }
  
  .community-subsection .standard-input-table {
      margin-top: 20px;
  }
  
  .community-subsection .standard-input-table input {
      width: 60px;
  }
  
  .overstory-cover-table.standard-input-table {
      margin-top: 0;
  }
  
  .forest-overstory-species-table {
      min-width: 840px;
  }
  
  .forest-understory-species-table {
      min-width: 840px;
  }
  
  .community-total-production-table {
      min-width: 840px;
  }
  
  .community-composition-group-table {
      min-width: 840px;
  }
  
  .community-composition-species-table {
      min-width: 840px;
  }
  
  .community-growth-curve-table {
      min-width: 840px;
  }
  
  .forest-overstory-species-table tr.default-header th:nth-child(n+1):nth-child(-n+3),
  .forest-overstory-species-table td:nth-child(n+1):nth-child(-n+3) {
      width: 100px;
  }
  
  .forest-overstory-species-table tr.default-header th:nth-child(n+4):nth-child(-n+11),
  .forest-overstory-species-table td:nth-child(n+4):nth-child(-n+11) {
      width: 50px;
  }
  
  .forest-understory-species-table tr.default-header th:nth-child(1),
  .forest-understory-species-table td:nth-child(1),
  .forest-understory-species-table tr.default-header th:nth-child(3),
  .forest-understory-species-table td:nth-child(3) {
      width: 100px;
  }
  
  .forest-understory-species-table tr.default-header th:nth-child(2),
  .forest-understory-species-table td:nth-child(2) {
      width: 300px;
  }
  
  .forest-understory-species-table tr.default-header th:nth-child(n+4):nth-child(-n+7),
  .forest-understory-species-table td:nth-child(n+4):nth-child(-n+7) {
      width: 50px;
  }
  
  .community-total-production-table td:nth-child(1),
  .community-total-production-table th:nth-child(1) {
      width: 460px;
  }
  
  .community-total-production-table td:nth-child(n+2):nth-child(-n+4),
  .community-total-production-table th:nth-child(n+2):nth-child(-n+4) {
      width: 100px;
  }
  
  .community-composition-group-table  tr.default-header th:nth-child(1),
  .community-composition-group-table td:nth-child(1) {
      width: 50px;
  }
  
  .community-composition-group-table  tr.default-header th:nth-child(2),
  .community-composition-group-table td:nth-child(2) {
      width: 50px;
  }
  
  .community-composition-group-table  tr.default-header th:nth-child(3),
  .community-composition-group-table td:nth-child(3) {
      width: 100px;
  }
  
  .community-composition-group-table  tr.default-header th:nth-child(4),
  .community-composition-group-table td:nth-child(4) {
      width: 220px;
  }
  
  .community-composition-group-table  tr.default-header th:nth-child(n+5):nth-child(-n+6),
  .community-composition-group-table td:nth-child(n+5):nth-child(-n+6) {
      width: 70px;
  }
  
  .community-composition-group-table  tr.default-header th:nth-child(7),
  .community-composition-group-table td:nth-child(7) {
      width: 100px;
  }
  
  .community-composition-group-table  tr.default-header th:nth-child(n+8):nth-child(-n+9),
  .community-composition-group-table td:nth-child(n+8):nth-child(-n+9) {
      width: 30px;
  }
  
  .community-composition-species-table  tr.default-header th:nth-child(1),
  .community-composition-species-table td:nth-child(1) {
      width: 60px;
  }
  
  .community-composition-species-table tr.default-header th:nth-child(2),
  .community-composition-species-table td:nth-child(2) {
      width: 260px;
  }
  
  .community-composition-species-table tr.default-header th:nth-child(n+3):nth-child(-n+6),
  .community-composition-species-table td:nth-child(n+3):nth-child(-n+6) {
      width: 100px;
  }
  
  .community-composition-group-up-button,
  .community-composition-group-down-button {
      display: block;
      width: 14px;
      margin: 0 auto;
      cursor: pointer;
  }
  
  .woody-ground-cover-table tr.default-header th:nth-child(4):nth-child(4),
  .woody-ground-cover-table td:nth-child(4):nth-child(4) {
      width: 140px;
  }
  
  .community-growth-curve-table td:nth-child(1),
  .community-growth-curve-table th:nth-child(1) {
      width: 800px;
  }
  
  .canopy-structure-table {
      width: 840px;
  }
  
  .woody-ground-cover-table {
      width: 840px;
      margin-bottom: 30px;
  }
  
  .form-control .community-growth-curve-state-menu {
      width: 100px;
      margin-bottom: 20px;
  }
  
  .community-growth-curve-state-control p {
      margin-bottom: 4px;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
  }
  
  .comment-list {
      list-style: none;
  }
  
  .comment {
      margin-bottom: 40px;
      padding: 20px;
      background-color: #DCE7F5;
      background-color: #D1F0DF;
  }
  
  .comment-icon {
      float: left;
      width: 40px;
      margin-right: 20px;
      opacity: 0.1;
  }
  
  .comment-header {
      float: left;
  }
  
  .comment-header p {
      padding: 0;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 15px;
      line-height: 130%;
  }
  
  p.comment-content {
      clear: left;
      color: #222;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: 17px;
      line-height: 130%;
  }
  
  @media only screen and (max-width: 600px) {
      #modal-citation-list {
         height: 360px;
         padding: 0;
      }
      .citation-page-list {
          margin: 0px 14px 10px 10px;
      }
      .citation-page-list.top {
          display: none;
      }
      .key-editable-note textarea:nth-child(1), 
      .key-editable-note textarea:nth-child(2) {
          width: 100%;
          border-bottom: 1px solid #9E9E9E;
      }
      .key-editable-note textarea:nth-child(3) {
          width: 100%;
      }
      #image-editor-width-input,
      #image-editor-height-input {
          display: none;
      }
  }
  
  @media only screen and (max-width: 530px) {
      #photo-collection-contents {
          height: 200px;
      }
      #photo-collection-animation {
          top: 90px;
      }
      .photo-card {
          float: none;
          margin-right: auto;
          margin-left: auto;
      }
      .form-control .standard-input, 
      .form-control .standard-menu,
      .form-control .standard-textarea,
      .form-control .modified-textarea {
          font-size: 16px;   
      }
      .narrative-markup {
          font-size: 16px; 
      }
      .subunit-input-control {
          float: none;
      }
  }
  
  @media only screen and (max-width: 400px) {
      #citation-sort-container,
      #citation-search-container {
          margin: 10px 14px;
      }
      #citation-sort-select,
      #citation-search-box {
          width: 100%;
          margin: 4px 0px 0px 0px;
      }
  }