/* global elements */
/*************************************************************

Contains base font styles and base colors

**************************************************************/
/*************************************************************
  GLOBAL FONT SIZES
**************************************************************/
/*************************************************************
  GLOBAL FONT COLORS
**************************************************************/
/*************************************************************
  GLOBAL SHADES OF GRAY
**************************************************************/
/*************************************************************
  GLOBAL STATUS COLORS
**************************************************************/
.submitted-check {
  color: #AD70ED;
  font-size: 30px;
}
.mssv-blank {
  background-color: #dfdfdf !important;
  width: 98%;
  position: relative;
}
.mssv-blank:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: -15px;
  border-style: solid;
  border-width: 12px 0 15px 15px;
  border-color: transparent transparent transparent #dfdfdf !important;
  z-index: 10;
}
.mssv-started {
  background-color: #BFE0F6 !important;
  width: 98%;
  position: relative;
}
.mssv-started:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: -15px;
  border-style: solid;
  border-width: 12px 0 15px 15px;
  border-color: transparent transparent transparent #BFE0F6 !important;
  z-index: 10;
}
.mssv-proof {
  background-color: #FFE87C !important;
  width: 98%;
  position: relative;
}
.mssv-proof:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: -15px;
  border-style: solid;
  border-width: 12px 0 15px 15px;
  border-color: transparent transparent transparent #FFE87C !important;
  z-index: 10;
}
.mssv-approved {
  background-color: #B2D67D !important;
  width: 98%;
  position: relative;
}
.mssv-approved:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: -15px;
  border-style: solid;
  border-width: 12px 0 15px 15px;
  border-color: transparent transparent transparent #B2D67D !important;
  z-index: 10;
}
.mssv-submitted {
  background-color: #AD70ED !important;
  width: 98%;
  height: 28px !important;
  position: relative;
  color: #fff !important;
}
.mssv-submitted:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: -15px;
  border-style: solid;
  border-width: 12px 0 15px 15px;
  border-color: transparent transparent transparent #AD70ED !important;
  z-index: 10;
}
.active-mssv-blank {
  background-color: #BFE0F6 !important;
  font-weight: bold;
  width: 110px;
  height: 45px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
.active-mssv-started {
  background-color: #BFE0F6 !important;
  font-weight: bold;
  width: 110px;
  height: 45px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
.active-mssv-proof {
  background-color: #FFE87C !important;
  font-weight: bold;
  width: 110px;
  height: 45px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
.active-mssv-approved {
  background-color: #B2D67D !important;
  font-weight: bold;
  width: 110px;
  height: 45px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
.active-mssv-submitted {
  background-color: #AD70ED !important;
  font-weight: bold;
  width: 110px !important;
  height: 45px !important;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px !important;
  z-index: 1212;
  position: absolute !important;
  top: -8px;
  right: 0;
}
.view-all-blank {
  background-color: #dfdfdf !important;
}
.view-all-started {
  background-color: #BFE0F6 !important;
}
.view-all-proof {
  background-color: #FFE87C !important;
}
.view-all-approved {
  background-color: #B2D67D !important;
}
.view-all-submitted {
  background-color: #AD70ED !important;
  color: #fff !important;
  left: 25% !important;
}
.view-all-submitted-check {
  color: #fff;
  font-size: 12px;
}
.view-all-background {
  background-color: #dfdfdf;
}
.thumbnail-blank-background {
  background-color: transparent !important;
}
.activeSpacer {
  margin-right: 0.5em;
}
.activeSpreads {
  /*background-color: #585465 !important;*/
  border-bottom: 3px solid #585465;
}
/*.activeSpreads:hover {*/
/*  background-color: #585465 !important;*/
/*}*/
.activeSpreads a {
  color: #585665 !important;
}
.linkSpreads {
  color: #2093df !important;
}
.activeBlank {
  /*background-color: #FFDADA;*/
  border-bottom: 3px solid #FFCCB0;
}
.activeBlank a {
  color: #585665 !important;
}
.linkBlank {
  color: #2093df !important;
}
.linkBlank a {
  color: #585665 !important;
}
.activeStarted {
  /*background-color: #CBE5F7;*/
  border-bottom: 3px solid #BBDFF7;
}
.activeStarted a {
  color: #585665 !important;
}
.linkStarted {
  color: #2093DF !important;
}
.activeProof {
  /*background-color: #FFEDA0;*/
  border-bottom: 3px solid #FFE397;
}
.activeProof a {
  color: #585665 !important;
}
.linkProof {
  color: #2093df !important;
}
.linkProof a {
  color: #2093df !important;
}
.activeApproved {
  /*background-color: #C3E097;*/
  border-bottom: 3px solid #BCD993;
}
.activeApproved a {
  color: #585665 !important;
}
.linkApproved {
  color: #2093df !important;
}
.activeSubmitted {
  /*background-color: #D4B1F7;*/
  border-bottom: 3px solid #CEA6F1;
}
.activeSubmitted a {
  color: #585665 !important;
}
.linkSubmitted {
  color: #2093df !important;
}
#home-ladder-spacing {
  height: 36px !important;
}
.gutter-adjust {
  height: 1px;
}
.gutter-adjust-print {
  height: 1px;
  min-width: 8px !important;
  padding: 0 !important;
  max-height: 61px !important;
}
.chad-Started {
  background-color: #BFE0F6 !important;
  opacity: 1;
  height: 100% !important;
  width: 8px !important;
  float: right;
}
.chad-Proof {
  background-color: #FFE87C !important;
  opacity: 1;
  height: 100% !important;
  width: 8px !important;
  float: right;
}
.chad-Approved {
  background-color: #B2D67D !important;
  opacity: 1;
  height: 100% !important;
  width: 8px !important;
  float: right;
}
.chad-Submitted {
  background-color: #AD70ED !important;
  opacity: 1;
  height: 100% !important;
  width: 8px !important;
  float: right;
}
/******************* InDesign Homepage and Multistate Shipment Modal ************************/
.chad-RECEIVED {
  background-color: #BFE0F6 !important;
  opacity: 1;
  height: 100% !important;
  width: 10px !important;
  margin-left: -2px;
  float: right;
}
.chad-PROOFING {
  background-color: #FFE87C !important;
  opacity: 1;
  height: 100% !important;
  width: 10px !important;
  margin-left: -2px;
  float: right;
}
.chad-RETURNED {
  background-color: #B2D67D !important;
  opacity: 1;
  height: 100% !important;
  width: 10px !important;
  margin-left: -2px;
  float: right;
}
.chad-PRINTED {
  background-color: #AD70ED !important;
  opacity: 1;
  height: 100% !important;
  width: 10px !important;
  margin-left: -2px;
  float: right;
}
/*************************************************************
  UNSURE - TRYING TO LOGICALLY ORGANIZE OR REMOVE
**************************************************************/
/*************************************************************

  DESCRIPTION OF FILE: Contains global elements (spacing,
  tables, form elements, top navigation, footer elements,
  base modals, etc...

**************************************************************/
.modal {
  overflow: hidden;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  color: #fff;
  opacity: 0.5;
}
label {
  vertical-align: bottom !important;
}
body {
  color: #585665 !important;
}
.printSpinner {
  background-color: red;
  display: block;
  height: 700px;
  width: 700px;
  z-index: 4022;
  opacity: 1;
}
/*************************************************************
  GLOBAL SPACING VARIABLES
**************************************************************/
.row {
  margin-left: 0;
  margin-right: 0;
}
/*************************************************************
  BODY AND FORM ELEMENTS
**************************************************************/
body {
  font-size: 15px;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-stretch: normal;
}
.black-div-bg {
  background-color: black;
  display: none;
  z-index: 100;
  position: fixed;
  height: 100%;
  width: 100%;
  opacity: 0.5;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none;
}
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.no-left-right-padding {
  padding-left: 0;
  padding-right: 0;
}
.margin-left-0 {
  margin-left: 0;
}
@media (max-width: 768px) {
  .student-upload-container {
    width: 600px;
  }
}
.space-it {
  margin-bottom: 1em;
}
.gray-scroll-bg::-webkit-scrollbar-track {
  background-color: #dfdfdf !important;
}
/*************************************************************
  SCROLL BARs
**************************************************************/
.od4-scroll {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
.od4-scroll::-webkit-scrollbar {
  width: 15px;
  overflow-y: scroll;
}
.od4-scroll::-webkit-scrollbar-track {
  background-color: white;
}
.od4-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #98989b;
  min-height: 20px;
}
::-webkit-scrollbar {
  width: 15px;
  overflow-y: scroll;
}
::-webkit-scrollbar-track {
  background-color: white;
}
::-webkit-scrollbar-track:horizontal {
  background-color: #dfdfdf;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #98989b;
  min-height: 20px;
}
/*::-webkit-scrollbar              { !* 1 *! }
::-webkit-scrollbar-button       { !* 2 *! }
::-webkit-scrollbar-track        { !* 3 *! }
::-webkit-scrollbar-track-piece  { !* 4 *! }
::-webkit-scrollbar-thumb        { !* 5 *! }
::-webkit-scrollbar-corner       { !* 6 *! }
::-webkit-resizer                { !* 7 *! }

  .od4-scroll-horizontal::-webkit-scrollbar {
  background: transparent !important;
  height: 6px;
  padding-top: 5px;
}

.od4-scroll-horizontal::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 3px;

}

.od4-scroll-horizontal::-webkit-scrollbar-thumb {
  background: @gray1;
  border-radius: 10px;

}*/
/*************************************************************
  FORM FIELD
**************************************************************/
textarea {
  resize: none;
}
/*************************************************************
  BASE LADDER
**************************************************************/
.od-table {
  width: 100%;
  padding: 4px;
  margin: 0;
  border-collapse: collapse;
}
/* re-fix a fix */
.remove-padding {
  padding: 0;
  margin-right: 0;
}
/*************************************************************
TOOL TIPS
**************************************************************/
.tooltipp {
  position: relative;
}
.tooltipp .tooltiptext {
  visibility: hidden;
  width: 99px;
  background-color: #585665;
  color: #fff;
  font-size: 12px ;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1002;
  top: 150%;
  left: 50%;
  margin-left: -50px;
}
.tooltipp .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #585665 transparent;
}
.tooltipp:hover .tooltiptext {
  visibility: visible;
}
.tooltipp:hover .tooltipptext {
  visibility: visible;
}
.tooltipp .tooltipptext {
  visibility: hidden;
  width: 75%;
  flex: 1;
  background-color: #585665;
  color: #fff;
  font-size: 12px ;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  white-space: nowrap;
  /* Position the tooltip */
  position: absolute;
  z-index: 999999999999;
  top: 150%;
  left: 0%;
  margin-right: -50px;
}
.tooltipp .tooltipptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #585665 transparent;
}
.icon {
  display: inline-block;
  width: 23px;
  height: 18px;
  background-size: cover;
  margin: 5px 15px 0 0 ;
}
.iconPhotopea {
  background-image: url("../../../resources/icons/Edit_Photo_icon_white.svg");
}
.iconPhotopea:hover {
  background-image: url("../../../resources/icons/photopea-icon-01.svg");
}
i.fa-question-circle:hover {
  color: #afd9f4 !important;
}
/*************************************************************
  TOP NAVIGATION
**************************************************************/
/*remove padding from bootstraps css, add border-bottom*/
/* override bootstrap's css */
.navbar-nav.navbar-right:last-child {
  margin-right: 0px;
}
label {
  font-weight: normal;
  vertical-align: middle;
}
[disabled],
.disabled,
.locked {
  color: #999;
}
[disabled]:hover:not(.no-hover),
.disabled:hover:not(.no-hover),
.locked:hover:not(.no-hover),
[disabled] *:hover:not(.no-hover),
.disabled *:hover:not(.no-hover),
.locked *:hover:not(.no-hover) {
  cursor: default;
}
/*************************************************************
  NAVIGATION
**************************************************************/
/* Navigation specific */
/*************************************************************
  SUB MENU NAVIGATION
**************************************************************/
.chevron-down {
  content: ' \f078';
  font-family: FontAwesome;
}
.chevron-up {
  content: ' \f077';
  font-family: FontAwesome;
}
.dropdown-custom {
  font-size: 16px;
}
.dropdown-toggle:hover {
  background-color: #2D6CA2;
}
.dropdown-toggle.chevron:after {
  content: ' \f078';
  font-family: FontAwesome;
}
.dropdown-toggle:not(.chevron) .ddarrow:after {
  content: ' \f078';
  font-family: FontAwesome;
}
.open .dropdown-toggle.chevron:after {
  content: ' \f077';
  font-family: FontAwesome;
}
.open .dropdown-toggle:not(.chevron) .ddarrow:after {
  content: ' \f077';
  font-family: FontAwesome;
}
.open .dropdown-toggle.btn.clear-button:after {
  content: ' \f077';
  font-family: FontAwesome;
}
.dropup .dropdown-toggle.chevron:after {
  content: ' \f078';
  font-family: FontAwesome;
}
.dropup .dropdown-toggle:not(.chevron) .staff-button:after {
  content: ' \f078';
  font-family: FontAwesome;
}
.dropup.open .dropdown-toggle.chevron:after {
  content: ' \f077';
  font-family: FontAwesome;
  text-transform: none;
}
.dropup.open .dropdown-toggle:not(.chevron) .staff-button:after {
  content: ' \f077';
  font-family: FontAwesome;
}
#coverage .dropdown-toggle.chevron:after {
  color: #1E93DF;
}
.no-border-dropdown {
  box-shadow: none !important;
}
.no-border-dropdown:hover {
  background-color: #fff;
}
.top-nav-ula:focus {
  background-color: #fff !important;
}
.list-group,
.list-group-item,
.list-group-item:first-child,
.list-group-item:last-child {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.container-fluid {
  max-width: 1600px;
  padding: 0 !important;
  overflow: hidden;
}
.navbar-adjust {
  position: relative;
  /* min-height: 50px; */
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.navbar-default {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-image: none;
  background-repeat: no-repeat;
  background-color: transparent;
  background: none;
  box-shadow: none;
  border-width: 0 0 1px;
  margin-bottom: 0;
  width: 238px;
  background-color: #2093DF;
}
.navbar-default:hover {
  background-color: #2D6CA2;
}
.navbar-default .navbar-collapse {
  padding-right: 0px;
  padding-left: 0px;
}
.navbar-default .as-dropdown {
  width: 100%;
}
.navbar-default .smallblocktest {
  display: block;
  line-height: 18px;
  width: 50px;
  float: left;
  vertical-align: text-bottom;
}
.navbar-default .smallblocktest:hover {
  color: #585665 !important;
}
.navbar-default .student-face {
  background-size: cover;
  background-position: top center;
  width: 50px;
  height: 50px;
}
.navbar-default .staff-button {
  font-size: 30px;
  padding: 0 20px;
  color: #fff;
  float: left;
  width: 130px;
  white-space: nowrap;
}
.navbar-default .ddarrow {
  font-size: 30px;
  color: #fff;
  float: right;
}
.navbar-default .dropdown {
  width: 100%;
}
.navbar-default .dropdown > a {
  color: #fff;
  padding: 0;
  margin: 0;
}
.navbar-default .dropdown .dropdown-menu {
  background-color: #1E93DF;
  width: 240px;
  left: -1px;
}
.navbar-default .dropdown .dropdown-menu a {
  padding: 0;
  color: #585665 !important;
  font-size: 16px;
}
.navbar-default .dropdown .dropdown-menu a:hover {
  background: #d6ebf9 !important;
}
.navbar-default .dropdown .dropdown-menu a .thumbs {
  min-height: 40px;
  min-width: 40px;
  margin-right: 5px;
}
.navbar-default .dropdown .dropdown-menu .last-staff {
  height: 50px;
  padding: 8px;
}
#od-home .navbar-default .staff-dropdown,
#view-all-spreads-modal .navbar-default .staff-dropdown,
#activity-details-modal .navbar-default .staff-dropdown,
#messages-modal .navbar-default .staff-dropdown,
#to-do-modal-list .navbar-default .staff-dropdown {
  width: 100% !important;
  height: 30px !important;
}
#od-home .navbar-default .staff-dropdown .dropdown-menu,
#view-all-spreads-modal .navbar-default .staff-dropdown .dropdown-menu,
#activity-details-modal .navbar-default .staff-dropdown .dropdown-menu,
#messages-modal .navbar-default .staff-dropdown .dropdown-menu,
#to-do-modal-list .navbar-default .staff-dropdown .dropdown-menu {
  width: 240px;
}
#od-home .navbar-default .staff-dropdown .staff-button-container,
#view-all-spreads-modal .navbar-default .staff-dropdown .staff-button-container,
#activity-details-modal .navbar-default .staff-dropdown .staff-button-container,
#messages-modal .navbar-default .staff-dropdown .staff-button-container,
#to-do-modal-list .navbar-default .staff-dropdown .staff-button-container {
  width: 100%;
}
#od-home .navbar-default .staff-dropdown .staff-button-container .all-staff-button,
#view-all-spreads-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button,
#activity-details-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button,
#messages-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button,
#to-do-modal-list .navbar-default .staff-dropdown .staff-button-container .all-staff-button {
  width: 100%;
  padding-top: 4px;
  padding-left: 10px;
  padding-right: 10px;
}
#od-home .navbar-default .staff-dropdown .staff-button-container .all-staff-button .truncate-text,
#view-all-spreads-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button .truncate-text,
#activity-details-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button .truncate-text,
#messages-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button .truncate-text,
#to-do-modal-list .navbar-default .staff-dropdown .staff-button-container .all-staff-button .truncate-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}
#od-home .navbar-default .staff-dropdown .staff-button-container .all-staff-button .ddarrow,
#view-all-spreads-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button .ddarrow,
#activity-details-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button .ddarrow,
#messages-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button .ddarrow,
#to-do-modal-list .navbar-default .staff-dropdown .staff-button-container .all-staff-button .ddarrow {
  float: right;
  margin-left: 0px;
  margin-top: -2px;
  margin-right: 0px;
}
#od-home .navbar-default .staff-dropdown .staff-button-container .all-staff-button span.staff-button-thumbnail,
#view-all-spreads-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button span.staff-button-thumbnail,
#activity-details-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button span.staff-button-thumbnail,
#messages-modal .navbar-default .staff-dropdown .staff-button-container .all-staff-button span.staff-button-thumbnail,
#to-do-modal-list .navbar-default .staff-dropdown .staff-button-container .all-staff-button span.staff-button-thumbnail {
  padding: 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  line-height: 1;
  margin: -4px 5px 0px -10px;
}
/*************************************************************
  SUB-MENU SPACING
**************************************************************/
.sub-menu-break {
  /* position content underneath floating top navigation  */
  margin-top: 20px;
  padding-top: 0px;
}
.no-sub-menu-break {
  /* position content underneath floating top navigation  */
  margin-top: 55px;
}
/*************************************************************
  CHECKBOX AND RADIO BUTTONS
**************************************************************/
/* custom checkboxes & radio buttons */
label.checkbox,
label.radio {
  width: 20px;
  height: 20px;
  border: 1px solid #c4c4cc;
  color: #585665;
  font-size: 15px;
  display: inline-block;
  margin: 0;
  padding: 0;
  background-color: white;
}
label.checkbox.radio,
label.radio.radio {
  border-radius: 10px;
}
input[wpc-checkbox],
input[wpc-radio] {
  display: none;
}
input[wpc-checkbox][disabled] + label,
input[wpc-radio][disabled] + label {
  cursor: not-allowed;
}
input[wpc-checkbox]:checked + label.checkbox,
input[wpc-radio]:checked + label.checkbox,
input[wpc-checkbox]:checked + label.radio,
input[wpc-radio]:checked + label.radio {
  background-image: url('img/font-awesome-sprite.png');
  background-repeat: no-repeat;
}
input[wpc-checkbox]:checked + label.checkbox,
input[wpc-radio]:checked + label.checkbox {
  background-size: 500px;
  background-position: -327px -3px;
}
input[wpc-checkbox]:checked + label.radio,
input[wpc-radio]:checked + label.radio {
  background-size: 350px;
  background-position: -266px -216px;
}
/*************************************************************
  FLOATING BUTTONS (PRINT, UPLOAD)
**************************************************************/
#print-ladder-button {
  position: absolute;
  right: 15px;
  bottom: 25px;
}
#upload-cover-button {
  position: absolute;
  right: 0;
  top: 10px;
}
.photo-upload-title {
  font-size: 24px;
  padding: 8px;
  color: #585665;
  float: left;
}
.photo-upload-title {
  font-size: 15px;
  padding: 8px;
  color: #585665;
  float: left;
}
.photo-upload-redo {
  font-size: 15px;
  padding: 8px;
  color: #1E93DF;
  float: left;
  padding-top: 17px;
}
/*************************************************************
  TAGS INPUT CHANGE
**************************************************************/
.tags-input .tags {
  width: 100%;
  margin-bottom: 5px;
}
.tags-input .tags .tag-item {
  background-color: #b6dcf5;
}
.tags-input .host {
  margin-top: 20px;
}
.tags-input .host input {
  width: 100%;
}
.tags-input .autocomplete {
  margin-top: -6px;
}
.tags-input .tags.focused {
  box-shadow: none !important;
}
/*************************************************************
  PROFILE BOX
**************************************************************/
.block1 {
  width: 100%;
  height: 150px;
  position: relative;
}
.block1 .profileClose {
  display: none;
}
.block1:hover .tag-close {
  display: inline;
  opacity: 0.88;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #c4c4cc;
  padding: 3px 5px;
  width: 20px;
}
.block1:hover .tag-close:hover {
  opacity: 1;
}
.block1:hover .tag-add_image {
  display: inline;
  background-color: #c4c4cc;
  opacity: 0.88;
  padding: 5px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  color: #1E93DF;
  cursor: pointer;
  font-size: 12px;
}
.block1:hover .tag-add_image:hover {
  opacity: 1;
}
.block1:hover .profileClose {
  display: block;
  position: absolute;
  top: 0px;
  right: 8px;
  padding: 0;
  z-index: 555;
  color: #98989b;
}
.block1 .tag-close {
  display: none;
}
.block1 .tag-add_image {
  display: none;
}
#profileTextBox div:first-child {
  font-size: 18px;
  color: #585665;
  padding-bottom: 6px;
}
#profileTextBox div:nth-child(2) {
  font-size: 12px;
  color: #98989b;
  padding-bottom: 15px;
}
#profileTextBox div:nth-child(3) {
  font-size: 15px;
  color: #585665;
}
#profileTextBox div:nth-child(3) > div {
  font-size: 15px;
  color: #585665;
  width: 65%;
  padding-bottom: 2px;
}
#profileTextBox div:nth-child(4) {
  font-size: 15px;
  color: #585665;
}
#profileTextBox div:nth-child(4) span {
  color: #1E93DF;
}
.profileSchool {
  font-size: 12px;
  color: #98989b;
}
.profileJobsScreen {
  font-size: 15px;
  color: #585665;
}
.profile-display {
  position: relative;
  bottom: -54px;
  height: 219px;
  left: 0;
  width: 570px;
  padding: 15px 15px 15px 0;
  border: 1px solid #ccc;
  background-color: #fff;
}
.profile-display .signout {
  position: absolute;
  bottom: 20px;
  right: -15px;
}
#target-close {
  position: absolute;
  top: 3px;
  right: 5px;
}
.input.form-control.focused ~ auto-complete i.auto_com.fa.fa-chevron-down:before {
  content: '\f077';
}
.input.form-control.focused ~ auto-complete-yearbook-snap i.auto_com.fa.fa-chevron-down:before {
  content: '\f077';
}
.open .recommend-dropdown-toggle .fa.fa-chevron-down:before {
  content: '\f077';
}
.recommend-dropdown-toggle::after {
  content: '' !important;
}
#image-upload_enhanced .input-group-btn.open .upload_auto_com_album.fa-chevron-up:before {
  content: '';
}
#image-upload_enhanced .modal-body .left-side .input-group-btn.open .clear-button {
  right: 0px;
}
#image-upload_enhanced .modal-body .left-side .input-group-btn.open .clear-button:after {
  color: #2093df;
}
#image-upload_enhanced .modal-body .left-side .input-group-btn.open .fa-chevron-down:before {
  content: '';
}
#students .input-group-btn.open .fa-chevron-down:before {
  content: '\f077';
}
#sales_period .select-open:after {
  content: '\f077';
}
.saleselectdiv:has(.select-open)::after {
  content: '\f077';
}
select.enter-sales-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border: 1px solid #ccc;
  cursor: pointer;
}
select.enter-sales-dropdown::-ms-expand {
  display: none;
  /* Hide old IE/Edge arrow */
}
.input-group.dd_section.enter-sales-input {
  position: relative;
}
.input-group.dd_section.enter-sales-input::after {
  content: "\f078";
  /* Font Awesome icon code */
  font-family: FontAwesome;
  /* or "Font Awesome 5 Free" depending on version */
  font-weight: 900;
  /* required for solid style */
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #2093df;
  z-index: 2;
}
.input-group.dd_section.enter-sales-input.open::after {
  content: "\f077";
  /* Font Awesome icon code */
}
.input-group.dd_section.enter-sales-input.select-open::after {
  content: "\f077";
  /* Font Awesome icon code */
}
.dropdown .no-border-dropdown.disabled {
  color: #aaa;
  pointer-events: none;
  cursor: not-allowed;
}
/*******************************/
/*************************************************************
  BLANK SPREADS
**************************************************************/
.odBlankSpread {
  position: relative;
}
.odBlankSpread:after {
  content: '';
  position: absolute;
  right: 50%;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #c4c4cc;
}
.ladderBlankSpread {
  position: relative;
  height: auto;
  width: 100%;
}
.ladderBlankSpread:after {
  content: '';
  position: absolute;
  right: 47%;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #c4c4cc;
}
.msvBlankSpread {
  position: relative;
  border: 2px solid #dfdfdf;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 96%;
  height: 515px;
}
.msvBlankSpread:after {
  content: '';
  position: absolute;
  right: 50%;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #dfdfdf;
}
/*************************************************************
  THUMBNAILS
**************************************************************/
.reNoScrollContainer {
  position: relative;
  white-space: nowrap;
  height: 135px;
  background-color: #dfdfdf;
  margin: 15px 0px 3px 15px;
  padding: 0;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}
.reNoScrollContainer::-webkit-scrollbar-track {
  background-color: #dfdfdf;
}
.reNoScrollDiv {
  display: inline-block;
}
/* Styling blank spreads that displayed in the ladder tables */
.thinThumbWrapper {
  border-left: 1px #c4c4cc solid;
  border-right: 1px #c4c4cc solid;
  width: 100%;
  height: 100%;
  background-color: red;
  position: relative;
  overflow: hidden;
}
.thinThumbWrapper img {
  max-height: 87px;
  min-height: 50px;
  max-width: 134px;
  min-width: 100px;
}
.thinThumbLeft {
  position: absolute;
  float: left;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.thinThumbLeft:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 15%;
  height: 70%;
  width: 1px;
  background-color: #c4c4cc;
}
/*************************************************************
  THUMBNAILS (RECENTLY EDITED)
**************************************************************/
/* Styling spreads that displayed in Recently Edited footer popup */
.loadingSpinner {
  padding-top: 10%;
}
.loadingSpinner i {
  color: #1E93DF;
}
.close-fa-small {
  font-size: 15px;
}
.recentlyEditedImage {
  height: 110px;
  width: 170px;
  position: absolute;
  left: 0;
  top: 0;
}
.recentlyEditedWrapper {
  position: relative;
  height: auto;
  width: 100%;
  padding: 0;
  margin: 3px 5px;
  z-index: 8;
}
.divTitlesLine {
  content: '';
  position: absolute;
  right: 86px;
  bottom: 0;
  height: 20px;
  width: 1px;
  background-color: #c4c4cc;
  z-index: 30;
}
.recentlyEditedStatus {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 85px;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
.lockedStatus {
  position: absolute;
  right: 0;
  top: 0;
  width: 15%;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
.reWrapLeft {
  width: 85px;
  padding: 0px;
  margin: 0px;
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  color: #585665;
  z-index: 20;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.reLeftPageTitle {
  width: 75%;
  overflow: hidden;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  opacity: 1;
}
.reLeftPageNum {
  width: 25%;
  float: left;
  text-align: center;
  opacity: 1;
}
.reWrapRight {
  width: 85px;
  padding: 0;
  margin: 0;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  color: #585665;
  z-index: 20;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.reRightPageTitle {
  width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
  opacity: 1;
}
.reRightPageNum {
  width: 25%;
  text-align: center;
  float: right;
  opacity: 1;
}
/* Styling blank spreads that displayed in Recently Edited footer popup */
.recentlyEditedBlankWrapper {
  position: relative;
  height: 110px;
  width: 170px;
  padding: 0;
  margin: 3px 5px;
  z-index: 8;
  background-color: #fff;
}
.reBlankThumbLeft {
  float: left;
  width: 85px;
  height: 100%;
  overflow: hidden;
}
.reBlankThumbLeft:after {
  content: '';
  position: absolute;
  right: 85px;
  bottom: 15%;
  height: 70%;
  width: 1px;
  background-color: #c4c4cc;
}
.dirty_icon {
  position: absolute;
  bottom: 70px;
  left: 70px;
  width: 0px;
  height: 0px;
}
/*************************************************************
  BOX CONTAINERS
**************************************************************/
.boxContainer {
  padding: 3px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.clickBoxes {
  display: inline-block;
  float: left;
  width: 25%;
  padding: 2px;
}
.clickBoxes img {
  width: 100%;
}
.backgroundBoxes {
  display: inline-block;
  float: left;
  width: 33.33%;
  padding: 4px;
}
.backgroundBoxes img {
  width: 100%;
}
.background-fill-in {
  height: 100%;
  overflow: auto;
  padding: 0;
  margin: 0;
  background-color: #dfdfdf;
}
/*************************************************************
  RECENTLY EDITED
**************************************************************/
.lockedStatus-tray {
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
  height: 22px;
  color: #fff !important;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background-color: #585665 !important;
}
.lockedStatus-tray i {
  size: 12px;
  vertical-align: text-top;
  text-align: center;
}
.recently_edit {
  background-color: #fff;
  border-top: 1px solid #ddd;
  margin-top: 25px;
}
.recently_edit > div {
  overflow: hidden;
}
.recently_edit .recentlyEditedWrapper {
  top: 0 !important;
}
.recently_edit .recentlyEditedBlankWrapper {
  top: -146px !important;
}
.recently_edit .black-lock {
  background-color: #585665 !important;
  color: white !important;
  width: 15px !important;
  height: 15px !important;
  text-align: center;
  padding: 0 !important;
}
.recently_edit .re-details {
  position: absolute;
  top: 4px;
  left: 122px;
  width: 50px !important;
  text-align: center;
  background-color: white;
  color: #1E93DF;
  z-index: 1000;
  font-size: 12px;
  padding: 3px;
  opacity: 0;
}
.recently_edit .blankdetails {
  top: -120px !important;
}
.recently_edit .no-details {
  position: absolute;
  top: 4px;
  left: 122px;
  width: 50px;
  z-index: 1000;
  font-size: 12px;
  padding: 3px;
  background-color: transparent !important;
}
#recently_edited {
  /*@media (min-width: 1200px) {
    !* For medium breakpoint page 7 of OD4 style guide recurring elements*!
    .medium_header{
      display: none;
    }*/
}
#recently_edited .col-xs-2 {
  width: 220px;
}
#recently_edited .active {
  background-color: #a9d6f3 !important;
}
#recently_edited .in_flash {
  background-color: #1E93DF !important;
}
#recently_edited .sub > li > div {
  margin-top: 0px !important;
}
#recently_edited .reNoScrollContainer {
  margin: 0px !important;
}
#recently_edited .due-date-filter > a {
  margin-top: 0px !important;
}
#recently_edited h4 {
  font-size: 24px;
  margin: 0;
  padding: 0;
}
#recently_edited a[ng-click="launchViewAllSpreadsModal()"] {
  position: relative;
  top: 4px;
}
#recently_edited div[ng-show="true"] {
  position: relative;
}
#recently_edited .thumbnail-sm-container {
  background-color: #dfdfdf;
  margin: 3px 0px 3px 15px;
  height: 135px;
  padding: 3px;
  width: 98.2%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
#recently_edited .thumbnail-sm-container:after {
  content: '';
  position: absolute;
  bottom: 59px;
  left: 0;
  width: 100%;
  height: 5px;
  background: #fff;
}
#recently_edited .thumbnail-sm-placeholder {
  background-color: #dfdfdf;
  display: inline-block;
  height: 90%;
  margin: 0.25em;
  width: 156px;
}
#recently_edited .thumbnail-sm-placeholder .tag {
  float: left;
  background-color: #dfdfdf;
  padding: 2px 5px 2px 5px;
  opacity: 0.8;
  font-size: 10px;
}
#recently_edited .thumbnail-sm-placeholder .tag-details {
  margin-top: 9.05em;
  background-color: #dfdfdf;
  font-size: 10px;
}
#recently_edited .thumbnail-sm-placeholder .tag-details div {
  float: left;
  background-color: #dfdfdf;
  opacity: 0.8;
  padding-right: 3px;
}
#recently_edited .no_content {
  text-align: center;
  margin-top: 20px;
  color: #3c3c3c;
}
#recently_edited .due-date-filter > a {
  margin-top: 15px;
  display: inline-block;
  min-width: 60px;
  padding: 0.25em 0.75em;
}
#recently_edited .due-date-filter > a:hover {
  background-color: #d6ebf9;
}
#recently_edited .due-date-filter .dropdown-menu {
  max-height: 140px;
  width: 200px;
  overflow-y: auto;
  text-align: left;
}
#recently_edited .due-date-filter .dropdown-menu a {
  color: #585665 !important;
  text-align: left;
  padding: 3px;
}
#recently_edited .due-date-filter .dropdown-menu a:hover {
  background: #d6ebf9 !important;
  color: #585665 !important;
}
#recently_edited .due-date-filter .dropdown-menu a:focus,
#recently_edited .due-date-filter .dropdown-menu a:active {
  background-color: #a9d6f3 !important;
  color: #585665;
}
#recently_edited .due-date-filter .dropdown-menu a.selected-date {
  background-color: #a9d6f3;
}
#recently_edited .dropdown-toggle {
  margin: 0px;
  padding: 0px;
}
#recently_edited .tag-details .text_limit {
  white-space: nowrap;
  width: 5.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}
#recently_edited .clear_results {
  height: 135px;
  background: #dfdfdf;
  text-align: center;
  padding-top: 50px;
}
#recently_edited .recentlyEditedStatus {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#recently_edited .lockedStatus {
  position: absolute;
  right: 0;
  top: 0;
  width: 15%;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#recently_edited .recent-blank-container {
  margin-top: 3px;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0;
}
#recently_edited .view-all-blank {
  background-color: #dfdfdf !important;
}
#recently_edited .view-all-started {
  background-color: #bfe0f6 !important;
}
#recently_edited .view-all-proof {
  background-color: #ffe87c !important;
}
#recently_edited .view-all-approved {
  background-color: #b2d67d !important;
}
#recently_edited .view-all-submitted {
  background-color: #ad70ed !important;
  color: #ffffff !important;
  left: 25% !important;
}
@media all {
  /* For medium breakpoint page 7 of OD4 style guide recurring elements*/
  .large_header_spread {
    display: block;
  }
  .medium_header_spread {
    display: none;
  }
}
@media all and (max-width: 1199px) {
  .large_header_spread {
    display: none;
  }
  .medium_header_spread {
    display: block;
  }
}
#photo_tray h4 {
  margin: 0;
  font-size: 24px;
}
#photo_tray .row:nth-child(1) {
  padding-bottom: 5px;
  padding-left: 3px;
}
#photo_tray .row:nth-child(1) div {
  margin-top: 0;
}
#photo_tray .row:nth-child(1) div > div {
  padding: 3px;
}
#photo_tray .row:nth-child(1) div li {
  padding: 3px;
}
#photo_tray .row:nth-child(2),
#photo_tray .row:nth-child(3) {
  margin: 0;
}
#photo_tray .row:nth-child(2) {
  border-bottom: 0px !important;
}
#photo_tray .row:nth-child(2) div {
  padding: 0 3px;
}
#photo_tray .nav {
  width: 49%;
}
#photo_tray .nav ul {
  margin-bottom: 0;
}
#photo_tray .favorites {
  width: 500px;
}
#photo_tray .favorites .dropup ul li {
  padding: 0;
}
#photo_tray .favorites .dropup li a:hover {
  background: #d6ebf9;
}
#photo_tray .favorites .dropup .selected-album {
  background: #d6ebf9;
}
#photo_tray .title {
  width: 170px;
}
#photo_tray .nav,
#photo_tray .favorites {
  margin-top: 10px;
}
#photo_tray .nav > ul > li {
  display: inline-block;
}
#photo_tray .nav > ul > li > div {
  padding: 0 5px;
}
#photo_tray .nav > ul > li > div > a {
  color: #2093df;
}
#photo_tray .nav > ul > li > div:hover {
  background-color: #d6ebf9;
  color: #555555;
  cursor: pointer;
}
#photo_tray .nav > ul > li > div:hover > a {
  color: #555555;
}
#photo_tray .nav > ul > li.active a {
  color: #000000;
}
#photo_tray .nav > ul > li.active > div {
  background-color: #a9d6f3;
}
#photo_tray .nav > ul > li.active > div:hover {
  background-color: #b6dcf5;
}
#photo_tray .numbers {
  text-align: right;
  font-size: 18px;
}
#photo_tray .no_content {
  text-align: center;
  margin-top: 20px;
  color: #3c3c3c;
}
#photo_tray .tags {
  margin-bottom: 0;
  height: 34px;
  overflow-x: hidden;
  overflow-y: scroll;
}
#photo_tray tags-input .host {
  margin-top: 0;
}
#photo_tray .input {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
}
#photo_tray .has-tags {
  display: none;
}
#photo_tray .thumbnail-sm-container {
  background-color: #dfdfdf;
  min-height: 125px;
  width: 100%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  /*&::-webkit-scrollbar {
      height: 6px;
    }

    &::-webkit-scrollbar-track {
      background-color: @white;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.5);
    }

    &::-webkit-scrollbar-thumb:window-inactive {
      background: transparent;
    }*/
}
#photo_tray .thumbnail-sm-container:after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 5px;
  background: #fff;
}
#photo_tray .thumbnail-sm-placeholder {
  display: inline-block;
}
#photo_tray .thumbnail-sm-placeholder .tag {
  float: left;
  background-color: #dfdfdf;
  padding: 2px 5px 2px 5px;
}
#photo_tray .thumbnail-sm-placeholder .tag-placed {
  float: left;
  background-color: #dfdfdf;
  padding: 2px 5px 2px 5px;
}
#photo_tray .thumbnail-sm-placeholder:hover .tag-details {
  display: inline;
}
#photo_tray .thumbnail-sm-placeholder .tag-details {
  display: none;
  float: right;
  margin-top: 7.1em;
  background-color: #dfdfdf;
  padding: 2px 5px 2px 5px;
}
/*************************************************************
  MultiStateSpreadViewer
**************************************************************/
#multiStateSpreadView {
  min-height: 600px;
  min-width: 1150px;
  position: relative;
  background-color: #fff;
  /*.nav-track {
    background: @gray4;
    //height: 31px;


    &:after {
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      top: 0;
      right: -15px;

      //border-style: solid;
      //border-width: 15px 0 15px 15px;
      border-top: 13px solid transparent;
      border-bottom: 13px solid transparent;
      border-left: 15px solid @gray4;
      z-index: 1000;
      //background-color:red !important;
    }
  }*/
}
#multiStateSpreadView .pdf-icon-mssv {
  color: #585665;
  font-size: 18px;
  height: 35px;
  vertical-align: middle;
}
#multiStateSpreadView .overflow_detected {
  width: 266px;
}
#multiStateSpreadView .overflow_detected .overflow_detected_title {
  color: #F51515;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 122%;
  /* 21.96px */
}
#multiStateSpreadView .overflow_detected .overflow_detected_message {
  color: #000;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%;
  /* 18.6px */
}
#multiStateSpreadView .mssv-footer {
  position: absolute;
  bottom: 0;
  padding-bottom: 15px;
  width: 100%;
}
#multiStateSpreadView .mssv-footer .btn {
  color: #fff;
  font-size: 15px;
  background-color: #2093df !important;
  padding: 4px 15px;
}
#multiStateSpreadView .mssv-footer .btn:hover {
  background-color: #2093df !important;
}
#multiStateSpreadView .mssv-footer .were-done {
  line-height: 1;
}
#multiStateSpreadView .mssv-footer .were-done .section-done {
  padding-bottom: 12px;
}
#multiStateSpreadView .mssv-footer .were-done .section-done .done-text {
  font-size: 12px;
  color: #585665;
}
#multiStateSpreadView .mssv-footer .were-done .section-done .proof-text {
  font-size: 15px;
  color: #2093df;
}
#multiStateSpreadView .mssv-footer .were-done .section-view {
  line-height: 1;
  padding-bottom: 15px;
}
#multiStateSpreadView .mssv-footer .were-done .section-view .view-pdf {
  font-size: 15px;
  padding-bottom: 4px;
}
#multiStateSpreadView .mssv-footer .were-done .section-view .view-pdf a {
  color: #2093df;
}
#multiStateSpreadView .mssv-footer .were-done .section-view .view-pdf-date {
  font-size: 12px;
  color: #98989b;
}
#multiStateSpreadView .mssv-footer .section-link {
  background-color: lightgreen;
  line-height: 1;
}
#multiStateSpreadView .mssv-footer .section-send-back {
  line-height: 1;
  padding-bottom: 15px;
}
#multiStateSpreadView .mssv-footer .section-send-back .send-back div:first-child {
  color: #f20000;
  font-size: 15px;
  padding-bottom: 4px;
}
#multiStateSpreadView .mssv-footer .section-send-back .send-back div:last-child {
  color: #98989b;
  font-size: 12px;
}
#multiStateSpreadView .mssv-footer .remove-view-proof-link {
  line-height: 1;
  padding-bottom: 15px;
}
#multiStateSpreadView .mssv-footer .remove-view-proof-link .view-proof {
  font-size: 15px;
  padding-bottom: 4px;
}
#multiStateSpreadView .mssv-footer .remove-view-proof-link .view-created {
  font-size: 12px;
  color: #98989b;
}
#multiStateSpreadView .mssv-footer .remove-view-proof-link .view-approved {
  font-size: 12px;
  color: #98989b;
}
#multiStateSpreadView .mssv-footer .creating-proof {
  line-height: 1;
  padding-bottom: 15px;
}
#multiStateSpreadView .mssv-footer .creating-proof .proof-creating {
  font-size: 15px;
  color: #585665;
  padding-bottom: 4px;
}
#multiStateSpreadView .mssv-footer .creating-proof .proof-ready {
  font-size: 12px;
  color: #98989b;
}
#multiStateSpreadView .modal-body {
  padding: 0;
}
#multiStateSpreadView .nav-tabs {
  border-bottom: 0;
}
#multiStateSpreadView .close-container {
  position: absolute;
  right: -15px;
  top: -5px;
  width: 30px;
  height: 40px;
  padding-top: 10px;
  text-align: center;
  color: #1E93DF;
}
#multiStateSpreadView .drop-right-column {
  margin-top: 48px;
}
#multiStateSpreadView .drop-right-column .due {
  color: #585665;
  font-size: 15px;
}
#multiStateSpreadView .drop-right-column .due-date {
  color: #1E93DF;
  font-size: 24px;
}
#multiStateSpreadView .drop-right-column .view-index {
  color: #1E93DF;
  font-size: 15px;
  padding-top: 8px;
}
#multiStateSpreadView .drop-right-column .assign-date {
  color: #1E93DF;
  font-size: 18px;
}
#multiStateSpreadView .drop-right-column .assign-user {
  color: #585665;
  font-size: 18px;
}
#multiStateSpreadView .drop-right-column .first-last {
  color: #585665;
  font-size: 15px;
  display: inline;
}
#multiStateSpreadView .drop-right-column .message-link {
  font-size: 15px;
  color: #1E93DF;
  text-align: right;
  padding-bottom: 8px;
  padding-top: 8px;
  line-height: 1;
}
#multiStateSpreadView .drop-right-column .mssv-date {
  line-height: 1;
  padding-top: 15px;
}
#multiStateSpreadView .drop-right-column .mssv-date .mssv-due {
  font-size: 15px;
  color: #585665;
  padding-right: 4px;
}
#multiStateSpreadView .drop-right-column .mssv-date .due-date {
  font-size: 24px;
  color: #585665;
}
#multiStateSpreadView .drop-right-column .mssv-date .assign-date {
  font-size: 24px;
}
#multiStateSpreadView .left-page {
  float: left;
  width: 50%;
  position: relative;
}
#multiStateSpreadView .left-page:after {
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  bottom: -1px;
  border-right-width: 1px;
  border-left-width: 0px;
  border-image: linear-gradient(to top, #c4c4cc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
  width: 1px;
}
#multiStateSpreadView .left-page .page-number {
  font-size: 24px;
  color: #585665;
  float: left;
}
#multiStateSpreadView .left-page .page-topic {
  font-size: 18px;
  color: #585665;
  vertical-align: baseline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  float: right;
  width: 85%;
}
#multiStateSpreadView .right-page {
  float: left;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#multiStateSpreadView .right-page .page-number {
  font-size: 24px;
  color: #585665;
  float: right;
  line-height: 1;
}
#multiStateSpreadView .right-page .page-topic {
  font-size: 18px;
  color: #585665;
  vertical-align: baseline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  text-align: right;
  float: left;
  width: 85%;
  margin-top: 6px;
  padding-left: 6px;
}
#multiStateSpreadView .mssv-right-column {
  width: 15em !important;
  height: 653px;
  position: relative;
  float: left;
}
#multiStateSpreadView .spread-preview-image {
  width: 98%;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #dfdfdf;
  border-right: 2px solid #dfdfdf;
  border-left: 2px solid #dfdfdf;
  border-top: 0;
}
#multiStateSpreadView .spread-preview-image img {
  height: 544px !important;
  width: 100%;
}
#multiStateSpreadView .spread-preview-image .empty_image {
  position: absolute;
  top: 20em;
  left: 25em;
}
#multiStateSpreadView section {
  margin: 0 15px 0 15px;
}
#multiStateSpreadView .document_dirty_dialog {
  background-color: white;
  position: absolute;
  top: 300px;
  left: 300px;
  padding: 10px;
  box-shadow: 0 0 1em black;
}
#multiStateSpreadView .document_dirty_dialog .DD_title {
  font-size: 18px;
}
#multiStateSpreadView .page-info-container {
  width: 70%;
  margin: 0 auto;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: solid #c4c4cc 1px;
  height: 40px;
}
#multiStateSpreadView .page-info-container tr td:nth-of-type(1) {
  border-right: 1px solid #ccc;
}
#multiStateSpreadView .page-info-container td {
  padding: 0;
  font-size: 18px;
}
#multiStateSpreadView .page-info-container .bold_number {
  font-weight: bold;
  font-size: 24px;
  padding: 0;
}
#multiStateSpreadView .page-info-container div:last-child {
  margin-top: 6px;
}
#multiStateSpreadView .page-info-container .col-md-6:last-child .bold_number {
  text-align: right;
}
#multiStateSpreadView .submit_color {
  background: #808080 !important;
  height: 31px;
  width: 100%;
}
#multiStateSpreadView .submit_color:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #808080 !important;
  z-index: 10;
}
#multiStateSpreadView .nav li {
  width: 20% !important;
  font-size: 15px;
  padding: 3px;
  text-align: center;
  position: relative;
}
#multiStateSpreadView .nav li div.active {
  font-weight: bold;
  width: 110px;
  height: 45px;
  background: #dfdfdf;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
#multiStateSpreadView .submit_nav li {
  /*padding: 2px 75px 2px 25px;
    background: #808080;*/
}
#multiStateSpreadView .submit_nav .active {
  font-weight: bold;
  border-radius: 60%;
  padding: 12px 45px 12px 45px;
  margin-top: -10px;
}
#multiStateSpreadView .rightcol .submitted-title {
  display: none;
  line-height: 1;
  padding-top: 15px;
}
#multiStateSpreadView .rightcol .submitted-title span {
  font-size: 30px;
  color: #585665;
}
#multiStateSpreadView .rightcol .submitted-title span i {
  font-size: 36px;
  color: #AD70ED;
}
#multiStateSpreadView .rightcol .submitted-title .submitted-date {
  font-size: 15px;
  color: #585665;
  text-align: right;
}
#multiStateSpreadView .rightcol .submitted-title .submitted-overflow {
  text-align: right;
  font-size: 15px;
  color: #f20000;
  padding-top: 4px;
}
#multiStateSpreadView .rightcol .status-list {
  padding-top: 20px;
  position: relative;
}
#multiStateSpreadView .rightcol .status-list:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 70%;
  /* or 100px */
  background: linear-gradient(to right, #c4c4cc 0%, #c4c4cc 75%, rgba(0, 0, 0, 0) 100%);
}
#multiStateSpreadView .rightcol .status-list .logs {
  height: 11.5em !important;
  overflow: hidden;
  overflow-y: auto;
  max-height: 11.5em;
  min-height: 11.5em;
  position: relative;
}
#multiStateSpreadView .rightcol .status-list .logs .log_title {
  font-size: 15px;
  color: #585665;
}
#multiStateSpreadView .rightcol .status-list .logs .log_date {
  margin-top: -10px;
  font-size: 12px;
  color: #98989b;
  margin-bottom: 7px;
}
#multiStateSpreadView .rightcol .status-list .logs .no-activity {
  position: absolute;
  left: 42%;
  top: 42%;
}
#multiStateSpreadView .rightcol .status-list .logs .no-activity-blank {
  top: 35%;
  left: 29%;
  font-size: 12px;
  color: #98989b;
  position: absolute;
}
#multiStateSpreadView .close {
  color: #1E93DF;
  opacity: 1;
}
#multiStateSpreadView .close:hover {
  color: #1b84c9;
}
#multiStateSpreadView .assign_section {
  margin-top: 20px;
}
#multiStateSpreadView .assign_section .assign_title {
  padding: 0;
  color: #585665;
  font-size: 18px;
  line-height: 1;
  padding-bottom: 5px;
}
#multiStateSpreadView .assign_section .first-last {
  font-size: 15px;
  color: #585665;
  line-height: 1;
}
#multiStateSpreadView .disable {
  display: none !important;
}
#multiStateSpreadView .enable {
  display: block !important;
}
#multiStateSpreadView .modal-footer {
  margin-top: 0;
  border: 0;
  padding: 15px;
  margin-bottom: -15px;
}
#multiStateSpreadView .modal-footer .btn-pill {
  position: absolute;
  bottom: 30px;
  right: 60px;
  width: 200px;
  background-color: #1E93DF;
  color: #fff;
}
#multiStateSpreadView .modal-footer .btn-pill:hover {
  color: #585665;
  background-color: #a9d6f3 !important;
}
#multiStateSpreadView .footer {
  margin-top: 0;
  border-top: 0;
}
#multiStateSpreadView .flash_progress {
  position: absolute;
  bottom: 35px;
  right: 150px;
}
#multiStateSpreadView .overflow_text_comment {
  color: #f20000;
  padding-bottom: 4px;
  font-size: 12px;
  line-height: 1;
}
/*************************************************************
  IMAGE UPLOAD   GETTING REMOVED
**************************************************************/
#image-upload {
  min-width: 880px !important;
}
#image-upload .modal-body {
  padding: 15px;
  height: 100% !important;
}
#image-upload .modal-body .close {
  position: absolute;
  right: 2px;
  top: -3px;
}
#image-upload .modal-body .left-side {
  padding-right: 30px;
}
#image-upload .modal-body .left-side h4 {
  font-size: 30px;
}
#image-upload .modal-body .left-side .start-upload {
  margin: 210px auto;
  text-align: center;
}
#image-upload .modal-body .left-side .start-upload > div {
  margin: auto;
  width: 60%;
}
#image-upload .modal-body .left-side .start-upload h4 {
  font-size: 24px;
}
#image-upload .modal-body .left-side .start-upload .btn-file {
  width: 100%;
}
#image-upload .modal-body .left-side .start-upload h5 {
  font-size: 12px;
}
#image-upload .modal-body .left-side .upload-preview {
  padding: 0;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
#image-upload .modal-body .left-side .upload-preview li {
  display: inline-block;
  width: 112px;
  height: 135px;
  margin: 0 2px;
  vertical-align: text-top;
}
#image-upload .modal-body .left-side .upload-preview li div {
  height: 100px;
  width: 100%;
  text-align: center;
  vertical-align: text-top;
}
#image-upload .modal-body .left-side .upload-preview li div img {
  max-width: 100%;
  max-height: 100%;
}
#image-upload .modal-body .left-side .upload-preview li h6 {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#image-upload .modal-body .left-side .dropdown-menu {
  height: 300px;
  overflow-y: auto;
}
#image-upload .modal-body .left-side .dropdown-menu a:hover,
#image-upload .modal-body .left-side .dropdown-menu a:focus {
  background: #d6ebf9;
}
#image-upload .modal-body .right-side {
  background: #ccc;
  height: 560px;
  position: relative;
  right: 15px;
}
#image-upload .modal-body .right-side h4 {
  font-size: 18px;
  color: #999;
  margin-top: 270px;
  text-align: center;
}
#image-upload .modal-body .right-side .completed-batches > li {
  padding: 0;
  border: 3px solid #ccc;
  height: 130px;
}
#image-upload .modal-body .right-side .completed-batches > li + li {
  margin-top: -3px;
}
#image-upload .modal-body .right-side .completed-batches > li .completed-photos {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-left: 0;
  /*li {
            display: inline-block;
            width: 100px;
            height: 135px;
            margin: 0 2px;
            vertical-align: text-top;

            div {
              height: 100px;
              width: 100%;
              text-align: center;
              vertical-align: text-top;

              img {
                max-width: 100%;
                max-height: 100%;
              }
            }
          }*/
}
#image-upload .modal-body .right-side .completed-batches > li h5 {
  font-size: 24px;
}
#image-upload .modal-body .right-side .completed-batches > li .progress,
#image-upload .modal-body .right-side .completed-batches > li .progress-bar {
  height: 0.25em;
}
#image-upload .modal-body .completed-batches .closeComplete {
  margin-right: 5px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  position: absolute;
  right: 0;
  z-index: 99;
}
#image-upload .modal-body .auto_com {
  position: absolute;
  bottom: 0.6em;
  right: 1em;
  color: #2093df;
  display: none;
}
#image-upload .modal-body h6::-webkit-scrollbar {
  display: none;
}
#image-upload .modal-body .upload-preview::-webkit-scrollbar,
#image-upload .modal-body .completed-photos::-webkit-scrollbar {
  display: none;
}
#image-upload .modal-body .upload-preview {
  width: 100%;
  display: block;
  height: 175px;
}
#image-upload .modal-body .upload-preview div {
  float: left;
  width: 25%;
  padding: 3px;
}
#image-upload .modal-body .upload-preview div div div:first-child {
  width: 125px;
  height: 125px;
}
#image-upload .modal-body .upload-preview div div div:first-child img {
  max-width: 125px;
  min-width: 100%;
  max-height: 125px;
  min-height: 100%;
}
#image-upload .modal-body .upload-preview div div div:last-child {
  width: 125px;
  height: 30px;
  font-size: 12px;
  color: #585665;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#image-upload .modal-body .completed-photos {
  width: 100%;
  display: block;
  height: 100px;
}
#image-upload .modal-body .completed-photos div {
  float: left;
  width: 80px;
  margin: 3px;
  height: 80px;
}
#image-upload .modal-body .completed-photos div img {
  max-width: 80px;
  min-width: 100%;
  max-height: 80px;
  min-height: 100%;
}
/*************************************************************
  IMAGE UPLOAD   New CSS
**************************************************************/
#image-upload_enhanced {
  min-width: 880px !important;
}
#image-upload_enhanced .modal-body {
  padding: 15px;
  height: 100% !important;
}
#image-upload_enhanced .modal-body .close {
  position: absolute;
  right: 2px;
  top: -3px;
}
#image-upload_enhanced .modal-body .left-side h4 {
  font-size: 30px;
}
#image-upload_enhanced .modal-body .left-side h3 {
  margin-top: -4px;
}
#image-upload_enhanced .modal-body .left-side .left-side-container {
  position: inherit;
  top: 5em;
  left: 0px;
  text-align: center;
}
#image-upload_enhanced .modal-body .left-side .start-upload {
  margin: 210px auto;
  text-align: center;
}
#image-upload_enhanced .modal-body .left-side .start-upload > div {
  margin: auto;
  width: 60%;
}
#image-upload_enhanced .modal-body .left-side .start-upload h4 {
  font-size: 24px;
}
#image-upload_enhanced .modal-body .left-side .start-upload .btn-file {
  width: 100%;
}
#image-upload_enhanced .modal-body .left-side .start-upload h5 {
  font-size: 12px;
}
#image-upload_enhanced .modal-body .left-side .upload-preview {
  padding: 0;
  width: 100%;
  display: block;
  height: 165px;
  overflow-y: scroll;
}
#image-upload_enhanced .modal-body .left-side .upload-preview table {
  font-size: 12px;
}
#image-upload_enhanced .modal-body .left-side .upload-preview table td {
  padding: 3px 3px 3px 15px;
}
#image-upload_enhanced .modal-body .left-side .dropdown-menu {
  height: 300px;
  overflow-y: auto;
}
#image-upload_enhanced .modal-body .left-side .dropdown-menu a:hover,
#image-upload_enhanced .modal-body .left-side .dropdown-menu a:focus {
  background: #d6ebf9;
}
#image-upload_enhanced .modal-body .left-side .photo-upload-title_enh {
  padding: 10px 0px 5px 0;
}
#image-upload_enhanced .modal-body .left-side .upload_auto_com_album {
  position: absolute;
  bottom: -0.7em;
  right: 0em;
  color: #2093df;
}
#image-upload_enhanced .modal-body .left-side .clear-button {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  right: 10px;
  position: absolute;
  z-index: 2000;
}
#image-upload_enhanced .modal-body .left-side .selectAlbumDropdown {
  border-color: #ff0000 #ff0000;
}
#image-upload_enhanced .modal-body .left-side #album-dropdown-menu {
  width: 100%;
}
#image-upload_enhanced .modal-body .right-side {
  background: #ccc;
  height: 529px;
  position: relative;
  right: -12px;
}
#image-upload_enhanced .modal-body .right-side .completed-batches {
  margin-bottom: 10px !important;
}
#image-upload_enhanced .modal-body .right-side .completed-batches .list-group-item {
  padding: 0 !important;
  margin: 10px 5px 0 10px !important;
  width: 94%;
}
#image-upload_enhanced .modal-body .right-side .completed-batches .list-group-item h3 {
  font-size: 24px;
  margin: 0;
  padding: 0;
}
#image-upload_enhanced .modal-body .right-side .completed-batches .list-group-item p {
  margin: 0;
}
#image-upload_enhanced .modal-body .right-side .completed-batches .list-group-item .lower-progress {
  padding: 0;
  margin: 0px;
}
#image-upload_enhanced .modal-body .right-side .completed-batches .list-group-item .pause-progress {
  background-image: none;
  background-color: #7d7d7d !important;
}
#image-upload_enhanced .modal-body .right-side .img-upload-title {
  font-size: 18px;
  color: #999;
  margin-top: 270px;
  text-align: center;
}
#image-upload_enhanced .modal-body .right-side .completed-batch-photos > li {
  padding: 0;
  border: 3px solid #ccc;
  height: 130px;
}
#image-upload_enhanced .modal-body .right-side .completed-batch-photos > li + li {
  margin-top: -3px;
}
#image-upload_enhanced .modal-body .right-side .completed-batch-photos > li .completed-batch-photos {
  white-space: nowrap;
  padding-left: 0;
}
#image-upload_enhanced .modal-body .right-side .completed-batch-photos > li .progress,
#image-upload_enhanced .modal-body .right-side .completed-batch-photos > li .progress-bar {
  width: 50%;
}
#image-upload_enhanced .modal-body .auto_com {
  position: absolute;
  bottom: 0.6em;
  right: 1em;
  color: #2093df;
  display: none;
}
#image-upload_enhanced .modal-body h6::-webkit-scrollbar {
  display: none;
}
#image-upload_enhanced .modal-body .title_batch_name {
  width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
}
#image-upload_enhanced .modal-body .upload-preview-drawer {
  padding: 0 0 0 5px;
  width: 97%;
  max-height: 310px;
  border-left: 10px solid #ccc;
  border-right: 10px solid #ccc;
  border-bottom: 3px solid #ccc;
}
#image-upload_enhanced .modal-body .upload-preview-drawer table {
  font-size: 12px;
}
#image-upload_enhanced .modal-body .upload-preview-drawer table td {
  padding: 3px;
}
#image-upload_enhanced .modal-body .upload_pic_scroll {
  overflow: scroll;
}
#image-upload_enhanced .modal-body .progress-bar-uploader {
  float: left;
  margin: 5px;
  width: 30px;
  height: 30px;
  background-color: #c0c0c0;
}
#image-upload_enhanced .modal-body .completed-batch-photos {
  width: 100%;
  display: block;
}
#image-upload_enhanced .modal-body .completed-batch-photos div {
  float: left;
  width: 80px;
  margin: 3px;
  height: 80px;
}
#image-upload_enhanced .modal-body .completed-batch-photos div img {
  max-width: 80px;
  min-width: 100%;
  max-height: 80px;
  min-height: 100%;
}
#image-upload_enhanced .modal-body .upload-footer {
  height: 35px;
}
#image-upload_enhanced .modal-body .upload-footer-buttons {
  position: absolute;
  bottom: -25px;
  right: 10px;
}
#image-upload_enhanced .disabled-on-upload {
  background-color: white;
  width: 70px;
  height: 40px;
  position: absolute;
  top: -2px;
  left: 0px;
  opacity: 0.5;
}
/*************************************************************
  SUBMIT SPREADS (MODAL)
**************************************************************/
#submit-spreads-modal .modal-header > div {
  max-width: 97%;
}
#submit-spreads-modal .modal-header > div .page-titles {
  border-bottom: 1px solid #000;
}
#submit-spreads-modal aside {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  right: 10px;
  top: 5px;
  box-shadow: -2px 3px 4px #ccc;
  padding: 15px;
}
#submit-spreads-modal aside h5 {
  font-size: 24px;
}
#submit-spreads-modal aside h6 {
  font-size: 18px;
}
#submit-spreads-modal aside .text-muted:not(.text-right) {
  font-size: 15px;
}
#submit-spreads-modal img {
  max-width: 80%;
  max-height: 100%;
}
#submit-spreads-confirmation-modal li strong {
  display: inline-block;
  width: 60px;
  text-align: right;
}
#submit-spreads-confirmation-modal modal-body {
  height: 300px !important;
}
#submit-spreads-confirmation-modal .modal-title {
  color: #585665;
  font-size: 24px;
}
#submit-spreads-confirmation-modal .modal-body > label {
  margin-top: 10px;
  padding-left: 0;
  width: 100%;
}
#submit-spreads-confirmation-modal .modal-body > label label.checkbox {
  float: left;
  margin: 5px 10px 20px 0;
}
#submit-spreads-confirmation-modal .blank-spreads-text {
  color: #c00;
  font-size: 12px;
  text-align: left;
  padding: 10px 0 0 0;
}
#submit-spreads-confirmation-modal .spread-list {
  min-height: 20px;
  padding: 0;
  height: 125px;
  overflow-y: scroll;
  position: relative;
}
#submit-spreads-confirmation-modal .spread-list-items {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  color: #585665;
  font-size: 15px;
}
#submit-spreads-confirmation-modal .spread-certify {
  color: #585665;
  font-size: 15px;
}
#submit-spreads-confirmation-modal .spread-certify-details {
  color: #585665;
  font-size: 12px;
}
/*************************************************************
  SETTINGS (MODAL)
**************************************************************/
#settings-modal #preview {
  height: 475px;
}
#settings-modal .disclaimer {
  background-color: #fff;
  border: 2px solid #ccc;
  bottom: -40px;
  height: 40px;
  left: 133.5px;
  line-height: 40px;
  position: absolute;
  text-align: center;
  top: -40px;
  box-shadow: -2px 3px 4px #ccc;
  width: 425px;
}
#view-photo .modal-body {
  height: 85px !important;
}
#photo-album-modal-empty .modal-body {
  height: 160px !important;
}
/*************************************************************
  NOTIFICATIONS
**************************************************************/
.notif-display {
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0px;
  left: 15.9%;
  width: 24.7em;
  padding-top: 30px !important;
  border: 1px solid #ccc;
  overflow: hidden;
  border-bottom: solid 1px #fff;
  background-color: #fff;
  padding-left: 0 !important;
}
.notif-display .fa-times {
  width: 12px;
  position: absolute;
  top: -25px;
  right: -17px;
  opacity: 0.5;
  cursor: pointer;
}
.notif-display .fa-times:hover {
  opacity: 1;
}
.notif-display-med {
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0px;
  left: 9.8%;
  width: 410px;
  padding-top: 30px !important;
  border: 1px solid #ccc;
  overflow: hidden;
  border-bottom: solid 1px #fff;
  background-color: #fff;
}
.notif-display-med .fa-times {
  width: 12px;
  position: absolute;
  top: -25px;
  right: -17px;
  opacity: 0.5;
  cursor: pointer;
}
.notif-display-med .fa-times:hover {
  opacity: 1;
}
#notifications .btn {
  padding: 0;
  background-color: #fff;
  color: #1E93DF;
  font-size: 18px;
  position: relative;
  right: -1px;
}
#notifications .btn:hover {
  color: #1b84c9;
}
#notifications .btn:focus,
#notifications .btn:active {
  outline: 0;
  box-shadow: none;
}
#notifications .notifBody {
  width: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /*.alt-scroll-holder {
      border:1px solid red;
      width: 370px;

    }*/
}
#notifications .notifBody .noti-close {
  position: absolute;
  top: -5px;
  right: 0;
}
#notifications .notifBody .notification-icons {
  font-size: 36px;
  vertical-align: middle;
  text-align: center;
  width: 73px;
  height: 73px;
}
#notifications .notifBody .notification-icons .fa {
  line-height: 1.4;
}
#notifications .notifBody ul {
  margin-bottom: 0;
  height: 100%;
  width: 100%;
}
#notifications .notifBody ul li {
  padding: 1px;
  background-color: #fff;
  position: relative;
  height: 73px;
}
#notifications .notifBody ul li .notifWrapper {
  width: 320px;
}
#notifications .notifBody ul li .notifWrapper .color-palette {
  width: 100%;
}
#notifications .notifBody ul li .notifWrapper .color-palette span {
  width: 100%;
  height: 73px;
}
#notifications .notifBody ul li .notifWrapper:hover {
  background-color: #d6ebf9 !important;
}
#notifications .notifBody ul li:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-right-width: 380px;
  border-left-width: 0;
  border-bottom-width: 0px;
  border-top-width: 1px;
  border-image: linear-gradient(to right, #cccccc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
}
#notifications .notifBody ul li:last-child:after {
  border-image: none;
}
#notifications .notifBody ul div {
  display: inline-block;
  width: 100%;
}
#notifications .notifBody .notifPhoto {
  width: 24% !important;
  font-size: 36px;
  position: relative;
  padding: 0;
  float: left;
}
#notifications .notifBody .notifPhoto .fa {
  position: relative;
  padding: 8px 10px;
}
#notifications .notifBody .notifPhoto img {
  width: 100%;
  height: 73px;
}
#notifications .notifBody .notifDate {
  width: 50px;
  font-size: 12px;
  color: #98989b;
  float: left;
  text-align: center;
  padding-top: 23px;
}
#notifications .notifBody .fa-times {
  width: 12px;
  position: absolute;
  top: 10px;
  right: 5px;
  opacity: 0.5;
  cursor: pointer;
}
#notifications .notifBody .fa-times:hover {
  opacity: 1;
}
#notifications .notifBody .notifMessage {
  width: 190px;
  /*font-weight: 500;
      padding: 0 5px;*/
  vertical-align: top;
  padding-top: 5px;
  float: left;
}
#notifications .notifBody .notifMessage .smSuccess {
  color: green;
}
#notifications .notifBody .notifMessage .notifi-header {
  color: #585665;
  font-size: 15px;
  font-weight: bold;
  width: 100%;
}
#notifications .notifBody .notifMessage .notifi-body {
  display: block;
  font-size: 12px;
  color: #98989b;
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
}
#notifications .notifBody .notifMessage .notifi-body a {
  color: #1E93DF;
}
#notifications .notifBody .notifMessage .notifi-body a:hover {
  color: #1b84c9;
}
#notifications .notifBody .notifMessage .notifi-body.ltColor {
  color: #98989b;
}
#notifications .notifBody .notifMessage .notifi-body.error {
  color: #c00;
}
#notifications .notifBody .notifMessage .notifi-body .notifi-error {
  font-size: 12px;
  color: #f20000;
}
/*************************************************************
  COMMUNICATIONS (MODAL)
**************************************************************/
.communication-modal .staff-selection {
  overflow-y: scroll;
  overflow-x: hidden;
  height: auto;
  margin-bottom: 20px;
}
.communication-modal .staff-selection .list-group {
  box-shadow: none;
  padding-left: 10px;
}
.communication-modal .staff-selection .list-group .list-group-item {
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  border: 0;
  color: #1E93DF;
}
.communication-modal .staff-selection .list-group .list-group-item:hover {
  background: #d6ebf9;
  color: #555;
}
.communication-modal .staff-selection .list-group .list-group-item.active {
  background: #a9d6f3;
  text-shadow: none;
  color: #585665;
}
.communication-modal .staff-selection .list-group .list-group-item.active:hover {
  background: #b6dcf5;
}
.communication-modal .staff-selection .list-group .list-group-item .thumbs {
  width: 35px;
  height: 35px;
  vertical-align: middle;
}
/*************************************************************
  PAGE SELECTOR (MODAL)
**************************************************************/
#page-selector-modal .dropdown-menu::-webkit-scrollbar {
  width: 7px;
}
#page-selector-modal .dropdown-menu {
  padding-top: 0px;
  margin-top: 0px;
  max-height: 267px;
  overflow-y: auto;
}
#page-selector-modal .pages-needed {
  background-color: #ccc;
  margin: 0 auto 15px auto;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 125px;
}
#page-selector-modal .pages-needed:after {
  content: "";
  border: 10px solid transparent;
  border-top: 15px solid #ccc;
  position: absolute;
  right: 47.5px;
  top: 100%;
}
#page-selector-modal .pages-needed.proceed {
  background-color: #a9d6f3;
}
#page-selector-modal .pages-needed.proceed:after {
  border-top: 15px solid #a9d6f3;
}
/*************************************************************
  PREVIEW MODAL
**************************************************************/
#preview-modal {
  border: 20px solid #ccc;
}
#preview-modal .modal-body {
  padding: 0;
  position: relative;
}
#preview-modal .close {
  color: #2093df;
  opacity: 1;
  position: absolute;
  right: 5px;
  text-shadow: none;
  top: 3px;
}
#preview-modal #spread-preview-container,
#preview-modal .preview {
  margin: 0 auto;
  position: relative;
}
#preview-modal #spread-preview-container .preview-page.page-empty,
#preview-modal .preview .preview-page.page-empty {
  height: 758px;
  width: 570px;
}
#preview-modal #spread-preview-container #disclaimer,
#preview-modal .preview #disclaimer {
  background-color: #fff;
  border: 2px solid #ccc;
  bottom: 10px;
  height: 40px;
  left: 447.5px;
  line-height: 40px;
  position: absolute;
  text-align: center;
  box-shadow: -2px 3px 4px #ccc;
  width: 250px;
}
.due-date-filter-styles {
  margin-left: 30px;
  text-align: right;
}
.due-date-filter-styles > a {
  display: inline-block;
  padding: 0.25em 0.75em;
  text-align: center;
}
/*************************************************************
  ACTIVITY DETAILS (MODAL)
**************************************************************/
#activity-details-modal .modal-body {
  padding-top: 0;
}
#activity-details-modal .navbar-default {
  max-width: 500px;
  border: 0;
}
#activity-details-modal .spread-activity thead,
#activity-details-modal .spread-activity tbody {
  display: block;
}
#activity-details-modal .spread-activity tr th:first-child {
  width: 80px;
}
#activity-details-modal .spread-activity tr th:nth-child(2) {
  width: 340px;
}
#activity-details-modal .spread-activity tr th:nth-child(3) {
  width: 80px;
}
#activity-details-modal .spread-activity tr th:nth-child(4) {
  width: 120px;
}
#activity-details-modal .spread-activity tr th:nth-child(5) {
  width: 200px;
}
#activity-details-modal .spread-activity tr th:nth-child(6) {
  width: 220px;
}
#activity-details-modal .spread-activity tr th:nth-child(7) {
  width: 200px;
}
#activity-details-modal .spread-activity tr td:first-child {
  width: 80px;
}
#activity-details-modal .spread-activity tr td:nth-child(2) {
  width: 330px;
}
#activity-details-modal .spread-activity tr td:nth-child(3) {
  width: 80px;
}
#activity-details-modal .spread-activity tr td:nth-child(4) {
  width: 120px;
}
#activity-details-modal .spread-activity tr td:nth-child(5) {
  width: 200px;
}
#activity-details-modal .spread-activity tr td:nth-child(6) {
  width: 220px;
}
#activity-details-modal .spread-activity tr td:nth-child(7) {
  width: 200px;
}
#activity-details-modal .logins thead,
#activity-details-modal .logins tbody {
  display: block;
}
#activity-details-modal .logins th {
  width: 300px;
}
#activity-details-modal .logins td {
  width: 300px;
}
#activity-details-modal .to-do-list thead,
#activity-details-modal .to-do-list tbody {
  display: block;
}
#activity-details-modal .to-do-list th {
  width: 250px;
}
#activity-details-modal .to-do-list td {
  width: 250px;
}
#activity-details-modal .photo-uploads thead,
#activity-details-modal .photo-uploads tbody {
  display: block;
}
#activity-details-modal .photo-uploads th:first-child {
  width: 180px;
}
#activity-details-modal .photo-uploads th:nth-child(2) {
  width: 320px;
}
#activity-details-modal .photo-uploads th:nth-child(3) {
  width: 180px;
}
#activity-details-modal .photo-uploads th:nth-child(4) {
  width: 250px;
}
#activity-details-modal .photo-uploads th:nth-child(5) {
  width: 180px;
}
#activity-details-modal .photo-uploads td:first-child {
  width: 180px;
}
#activity-details-modal .photo-uploads td:nth-child(2) {
  width: 330px;
}
#activity-details-modal .photo-uploads td:nth-child(3) {
  width: 180px;
}
#activity-details-modal .photo-uploads td:nth-child(4) {
  width: 260px;
}
#activity-details-modal .photo-uploads td:nth-child(5) {
  width: 200px;
}
/*************************************************************
  MESSAGE MODAL - Only show 2 lines for content.
**************************************************************/
.block-with-text {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 2.4em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  color: #585665;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}
.message-up {
  vertical-align: bottom;
}
/*************************************************************
  RECOMMEND FOR SPREAD
**************************************************************/
#recommend-for-spread .lg-thumbnail {
  height: 250px;
  margin-bottom: 10px;
  width: 250px;
}
#recommend-for-spread .sm-thumbnail {
  float: left;
  height: 80px;
  margin: 0 2px;
  width: 80px;
}
#recommend-for-spread .container-bubble {
  text-align: center;
}
#recommend-for-spread .container-bubble:after {
  margin-right: -10px;
  right: 50%;
}
/*************************************************************
  NEW STUDENT (MODAL)
**************************************************************/
#new-student-modal .share-space .dropdown {
  float: left;
}
#new-student-modal .share-space .dropdown a {
  width: 100px;
  display: inline-block;
}
#new-student-modal .share-space .new-cat {
  float: left;
  width: 130px;
}
#new-student-modal .categories:not(.top-buffer) {
  margin-top: 5px;
}
.selectize-control.single .selectize-input {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.selectize-control.single .selectize-input:after {
  content: ' \f078';
  font-family: FontAwesome;
  color: #1E93DF;
  border: 0;
  margin: -10px 5px 0 0;
}
.selectize-control.single .selectize-input.dropdown-active:after {
  content: ' \f077';
  font-family: FontAwesome;
}
/*********************************************************
  Message Modal
**********************************************************/
#messages-modal {
  padding: 0 15px;
}
#messages-modal input[type='search'] {
  background-image: url('/resources/icons/search.png');
  background-size: 14px 14px;
  background-repeat: no-repeat;
  padding-left: 25px;
  background-position: 5px 9px;
  margin-right: 10px;
  width: 200px;
}
#messages-modal .modal-header {
  padding: 15px 0;
}
#messages-modal .modal-body {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
#messages-modal .modal-body .scroll-td {
  overflow: scroll;
  background-color: blue;
}
#messages-modal .modal-body .message-left-col {
  min-width: 315px !important;
  vertical-align: top;
  padding-top: 30px;
}
#messages-modal .modal-body .message-left-col table {
  margin-bottom: 30px;
  width: 100%;
}
#messages-modal .modal-body .message-left-col table tr td {
  color: #585665;
  font-size: 12px;
}
#messages-modal .modal-body .message-left-col table tr:first-child td:first-child {
  padding-right: 4px;
}
#messages-modal .modal-body .message-left-col table tr:first-child td:nth-child(2) {
  padding-top: 4px;
  padding-left: 15px;
}
#messages-modal .modal-body .message-left-col table tr:first-child td:nth-child(3) {
  padding-top: 4px;
}
#messages-modal .modal-body .message-left-col table tr:nth-child(2) td {
  padding-left: 15px;
}
#messages-modal .modal-body .message-left-col table tr:last-child td {
  color: #585665;
  font-size: 15px;
  width: 100%;
  content: '';
  padding-left: 15px;
  padding-bottom: 4px;
}
#messages-modal .modal-body .message-left-col table:hover {
  background-color: #d4eaf9;
}
#messages-modal .modal-body .message-left-col table:hover .thread-checkbox {
  background-color: #fff;
}
#messages-modal .modal-body .message-left-col .active {
  background-color: #a9d6f3 !important;
}
#messages-modal .modal-body .message-left-col .active .thread-checkbox {
  background-color: #fff;
}
#messages-modal .modal-body .message-right-col {
  width: 100%;
  vertical-align: top;
  padding-left: 15px;
}
#messages-modal .modal-body .message-right-col table {
  width: 100%;
  padding-bottom: 15px;
}
#messages-modal .modal-body .message-right-col table tr:first-child td {
  text-align: center;
  color: #98989b;
  font-size: 12px;
}
#messages-modal .modal-body .message-right-col table tr:nth-child(2) td {
  color: #98989b;
  font-size: 12px;
}
#messages-modal .modal-body .message-right-col table tr:nth-child(3) td {
  padding: 3px;
  color: #585665;
  font-size: 15px;
}
#messages-modal .modal-body .message-right-col table tr:nth-child(3) td:last-child {
  width: 100%;
}
#messages-modal .modal-body .message-right-col table tr:nth-child(3) td:last-child .message-box {
  padding: 4px 15px;
  width: 95%;
}
#messages-modal .modal-body .message-right-col .you tr:nth-child(2) {
  text-align: right;
}
#messages-modal .modal-body .message-right-col .you tr:nth-child(3) .message-box {
  background-color: #dfdfdf;
  width: 95%;
  padding: 4px 15px;
  position: relative;
}
#messages-modal .modal-body .message-right-col .you tr:nth-child(3) .message-box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border: 7px solid transparent;
  border-top: 7px solid #dfdfdf;
  border-left: 7px solid #dfdfdf;
}
#messages-modal .modal-body .message-right-col .you tr:nth-child(3) td:first-child {
  width: 100%;
}
#messages-modal .modal-body .message-right-col .you tr:nth-child(3) td:last-child {
  width: 0%;
}
#messages-modal .modal-body .message-right-col img {
  height: 25px;
  width: 25px;
}
#messages-modal .close {
  color: #428bca;
  opacity: 1;
  transition: all 0.2s ease;
}
#messages-modal .close:hover {
  color: #2a6496;
}
#messages-modal .threads {
  border-right: 1px solid #dfdfdf;
  padding-right: 5px;
}
#messages-modal .threads:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-right-width: 0px;
  border-left-width: 320px;
  border-bottom-width: 0px;
  border-top-width: 1px;
  border-image: linear-gradient(to right, #ccc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
}
#messages-modal .threads .alt-scroll-content {
  width: 100% !important;
}
#messages-modal .threads .threads-list > li {
  height: 80px;
}
#messages-modal .threads .threads-list > li .thread-checkbox {
  padding-top: 20px;
  width: 40px;
}
#messages-modal .threads .threads-list > li .thread-checkbox label.checkbox {
  width: 20px;
  height: 20px;
}
#messages-modal .threads .threads-list > li .thread-checkbox input[wpc-checkbox]:checked + label.checkbox {
  background-position: -327px -3px;
}
#messages-modal .threads .threads-list > li .thread-preview {
  padding: 5px 15px !important;
  right: 0px;
  color: #98989b;
}
#messages-modal .threads .threads-list > li .thread-preview p {
  color: #585665;
}
#messages-modal .threads .threads-list > li .thread-preview.active {
  background: #a9d6f3;
  color: #585665;
}
#messages-modal .threads .threads-list > li .thread-preview .when {
  font-size: 12px;
}
#messages-modal .threads .threads-list > li .thread-preview .staff-preview {
  font-size: 12px;
  font-weight: normal;
  margin: 3px 0;
}
#messages-modal .threads .threads-list > li .thread-preview .thumbs-list {
  margin-bottom: 4px;
}
#messages-modal .threads .threads-list > li .thread-preview .thumbs-list li {
  margin: 0 2px;
}
#messages-modal .threads .tar {
  height: 40px;
}
#messages-modal .threads .thread-actions {
  text-align: right;
  padding: 0;
  right: 10px;
  width: 95.75%;
  float: right;
}
#messages-modal .threads:before {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 0;
  border-right-width: 320px;
  border-left-width: 0;
  border-bottom-width: 0px;
  border-top-width: 1px;
  border-image: linear-gradient(to right, #ccc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
}
#messages-modal .messages {
  padding-left: 10px;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}
#messages-modal .messages:before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  border-right-width: 600px;
  border-left-width: 0;
  border-bottom-width: 0px;
  border-top-width: 1px;
  border-image: linear-gradient(to right, #ccc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
}
#messages-modal .messages .alt-scroll-content {
  width: 97% !important;
}
#messages-modal .messages .chatbox {
  overflow: none;
  position: relative;
  width: 100%;
}
#messages-modal .messages .chatmessages {
  overflow: auto;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#messages-modal .messages .messages-list > li {
  clear: both;
  padding: 10px 2px;
}
#messages-modal .messages .messages-list > li .when {
  font-size: 12px;
  color: #98989b;
  text-align: center;
}
#messages-modal .messages .messages-list > li h5 {
  font-size: 12px;
  margin: 0;
  padding-bottom: 4px;
  font-weight: 200;
  color: #98989b;
}
#messages-modal .messages .messages-list > li .thumbs {
  width: 30px;
  height: 30px;
}
#messages-modal .messages .messages-list > li:not(.you) .thumbs {
  float: left;
  margin-right: 10px;
}
#messages-modal .messages .messages-list > li.you {
  text-align: right;
}
#messages-modal .messages .messages-list > li.you .thumbs {
  float: right;
  margin-left: 10px;
}
#messages-modal .messages .messages-list > li.you .message-text {
  max-width: 80%;
  float: right;
  position: relative;
  background-color: #E8E8E8;
  padding: 10px;
  margin-right: 7px;
  text-align: left;
}
#messages-modal .messages .messages-list > li.you .message-text:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 100%;
  border: 7px solid transparent;
  border-top: 7px solid #E8E8E8;
  border-left: 7px solid #E8E8E8;
}
#messages-modal .messages .message-actions {
  height: 90px;
  padding: 10px 5px;
  margin-left: 2px;
}
#messages-modal .messages .message-actions > section {
  height: 100%;
}
#messages-modal .messages .message-actions > section > textarea {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  resize: none;
}
#messages-modal .messages .message-actions .btn-primary {
  margin-top: 5px;
  width: 74px;
}
#approved .modal-header {
  font-size: 24px;
}
/*************************************************************
  VIEW ALL SPREADS (MODAL)
**************************************************************/
.all-spread-images {
  height: auto;
}
/*@media all and (min-width: 1150px) {
  .modal-content {
    max-width: 1140px;
    min-width: 1140px;
    width: 1140px;
  }
  .modal-overflow {

  }
}
@media all and (max-width: 1149px) {
  .modal-content {
    max-width: 950px;
    min-width: 950px;
    width: 950px;
  }
}*/
#view-all-spreads-modal {
  padding: 0 15px;
  min-width: 915px;
  /*************************************************************
  THUMBNAILS
**************************************************************/
  /* Styling spreads that displayed in Recently Edited footer popup */
  /* Styling blank spreads that displayed in Recently Edited footer popup */
}
@media all and (min-width: 1150px) {
  #view-all-spreads-modal .view-thumbs-all {
    height: 152px !important;
  }
}
@media all and (max-width: 1149px) {
  #view-all-spreads-modal .view-thumbs-all {
    height: 121px !important;
  }
}
#view-all-spreads-modal .black-lock {
  background-color: #585665 !important;
  color: white !important;
  width: 15px !important;
  height: 15px !important;
  text-align: center;
  padding: 0 !important;
}
#view-all-spreads-modal .re-details {
  position: relative;
  top: 3px;
  left: 173px;
  width: 50px !important;
  text-align: center;
  background-color: white;
  color: #1E93DF;
  z-index: 1000;
  font-size: 12px;
  padding: 3px;
  opacity: 0;
}
#view-all-spreads-modal .no-details {
  position: relative;
  top: 3px;
  left: 173px;
  width: 50px !important;
  z-index: 1000;
  font-size: 12px;
  padding: 3px;
  background-color: transparent !important;
}
#view-all-spreads-modal .recentlyEditedWrapper {
  margin: 5px;
  height: 100%;
}
#view-all-spreads-modal .deactivate {
  opacity: 0.5;
}
#view-all-spreads-modal .staff-name-title {
  font-size: 30px;
  padding: 0 20px;
  float: left;
  width: 130px;
  white-space: nowrap;
  margin-left: -50px;
}
#view-all-spreads-modal .student-face {
  background-size: cover;
  background-position: top center;
  width: 50px;
  height: 50px;
}
#view-all-spreads-modal .recentlyEditedBlankWrapper {
  margin: 5px;
}
#view-all-spreads-modal .spreads-total {
  font-size: 24px;
  color: #585665;
}
#view-all-spreads-modal .close-view-staff {
  position: absolute;
  right: -5px;
  top: 5px;
}
#view-all-spreads-modal .jump-form {
  margin-top: 5px;
  color: #585665;
  font-size: 15px;
  padding-right: 1em;
}
#view-all-spreads-modal .request-box {
  float: right;
  padding-top: 1em;
  padding-right: 1em;
}
#view-all-spreads-modal .modal-header,
#view-all-spreads-modal .modal-body {
  padding-left: 0;
  padding-right: 0;
}
#view-all-spreads-modal .close {
  margin-left: 15px;
  color: #1E93DF;
  opacity: 1;
}
#view-all-spreads-modal .smallblocktest.staff-button {
  width: 188px;
}
#view-all-spreads-modal .navbar-default {
  border-bottom: 0;
}
#view-all-spreads-modal .modal-header {
  padding-bottom: 0;
  position: relative;
}
#view-all-spreads-modal .modal-body {
  padding-top: 0;
}
#view-all-spreads-modal .modal-body .navbar-nav {
  margin-bottom: 6px;
}
#view-all-spreads-modal .modal-body .btn-pill {
  margin-right: 14px;
  margin-top: 4px;
}
#view-all-spreads-modal .modal-footer {
  margin: 0;
  padding: 0;
  padding-bottom: 16px;
  border-top: 0;
}
#view-all-spreads-modal .col-xs-8.col-md-5 {
  margin-top: 4px;
}
#view-all-spreads-modal .spreads-count {
  margin-top: 10px;
}
#view-all-spreads-modal .spreads-count div:first-child {
  font-size: 24px;
  white-space: nowrap;
}
#view-all-spreads-modal .spreads-count div:first-child span {
  font-size: 12px;
}
#view-all-spreads-modal .navbar-default .dropdown {
  width: 438px;
  height: 50px;
}
#view-all-spreads-modal .spread-previews {
  padding-left: 0;
  margin-bottom: 0;
}
#view-all-spreads-modal .spread-previews li {
  display: inline-block;
  background: #ccc;
  padding: 5px;
}
#view-all-spreads-modal .spread-previews li div {
  background-position: center top;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  min-width: 25px;
  min-height: 25px;
  width: 150px;
  height: 100px;
}
#view-all-spreads-modal .due-date-filter {
  margin-left: 30px;
  text-align: right;
}
#view-all-spreads-modal .due-date-filter > a {
  display: inline-block;
  padding: 0.25em 0.75em;
  text-align: center;
}
#view-all-spreads-modal .view-thumbs-all {
  display: inline-block;
  background: #dfdfdf;
  float: left;
  width: 20%;
  padding: 0.25em;
  height: 152px;
  margin: 0;
}
#view-all-spreads-modal .view-thumbs-all .deactivate {
  background-color: orange;
  z-index: 9999999;
}
#view-all-spreads-modal .recentlyEditedImage {
  height: auto;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#view-all-spreads-modal .recentlyEditedWrapper {
  position: relative;
  height: 100%;
  width: auto;
  padding: 0;
  margin: 0;
  z-index: 8;
  display: block;
  overflow: hidden;
  top: -20px;
}
#view-all-spreads-modal .divTitlesLine {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  height: 20px;
  width: 1px;
  background-color: #c4c4cc;
  z-index: 30;
}
#view-all-spreads-modal .recentlyEditedStatus {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#view-all-spreads-modal .lockedStatus {
  position: absolute;
  right: 0;
  top: 0;
  width: 15%;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#view-all-spreads-modal .reWrapLeft {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  color: #585665;
  z-index: 20;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#view-all-spreads-modal .reLeftPageTitle {
  width: 75%;
  overflow: hidden;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  opacity: 1;
}
#view-all-spreads-modal .reLeftPageNum {
  width: 25%;
  float: left;
  text-align: center;
  opacity: 1;
}
#view-all-spreads-modal .reWrapRight {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  color: #585665;
  z-index: 20;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#view-all-spreads-modal .reRightPageTitle {
  width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
  opacity: 1;
}
#view-all-spreads-modal .reRightPageNum {
  width: 25%;
  text-align: center;
  float: right;
  opacity: 1;
}
#view-all-spreads-modal .recentlyEditedBlankWrapper {
  position: relative;
  height: 110px;
  width: auto;
  padding: 0;
  margin: 0;
  z-index: 8;
  background-color: #fff;
  top: -20px;
}
#view-all-spreads-modal .reBlankThumbLeft {
  float: left;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
#view-all-spreads-modal .reBlankThumbLeft:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 15%;
  height: 70%;
  width: 1px;
  background-color: #c4c4cc;
}
.photos-in-book li {
  margin: 0 1px;
}
.show-details {
  opacity: 0.85 !important;
}
/*************************************************************
  THUMBNAILS (MY PHOTOS)
**************************************************************/
.thumbs {
  background-position: center top;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  min-width: 25px;
  min-height: 25px;
}
.thumbs-list {
  padding-left: 0;
}
.thumbs-list > li {
  background-position: center top;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  min-width: 25px;
  min-height: 25px;
}
.studentInitialStyle {
  background-color: #a9d6f3;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding-left: 5px;
  padding-top: 4px;
  color: #014F7E;
  text-align: center;
  border: 0.5px solid #d4eaf9;
}
/*************************************************************
  DROPDOWN INITIALS (MY PHOTOS)
**************************************************************/
.initialsBackground {
  background-color: #a9d6f3;
}
.staffInitialsStyleDropdown {
  text-align: center;
  font-size: 12px;
  padding-top: 5px;
  color: #585665;
  border: 0.5px solid #d4eaf9;
}
.staffInitialsStyleDropdownActive {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 25px;
  letter-spacing: normal;
  color: #585665;
  text-align: center;
}
.initialsBorderPortrait {
  border: 0.5px solid #d4eaf9;
}
/*************************************************************
  GLOBAL FORM ELEMENTS - need to review to organize or
  remove
**************************************************************/
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}
/* set default values */
a:link {
  color: #1E93DF;
}
a:hover,
a:focus,
a:active {
  text-decoration: none;
}
a[disabled]:hover {
  color: #999999;
}
/* Remove default blue glow from browsers and Bootstrap */
*:focus,
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus {
  outline: 0 !important;
  box-shadow: none !important;
  border-color: #1E93DF !important;
}
ul {
  padding-left: 0;
}
li {
  list-style-type: none;
}
.font-2x {
  font-size: 36px;
}
.font-xl {
  font-size: 30px;
}
.font-lg {
  font-size: 24px;
}
.font-md {
  font-size: 18px;
}
.font-sm {
  font-size: 15px;
}
.font-xs {
  font-size: 12px;
}
.translucent {
  opacity: 0.85;
}
.scroll {
  overflow: scroll;
}
.scroll-x {
  overflow-x: scroll;
}
.scroll-y {
  overflow-y: scroll;
}
/* image thumbnails */
.img-thumbnail {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 0px solid #ccc;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.btn {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 0px;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 15px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  background-color: #1E93DF;
}
.btn.btn-danger:not(:hover) {
  background-color: transparent;
  color: #c00;
  box-shadow: none;
}
.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type='file'] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 24px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background-color: #1E93DF;
  cursor: inherit;
  display: block;
}
.thumbnail-sm-container,
.thumbnail-lg-container {
  background-color: #dfdfdf;
}
.danger {
  color: #c00;
}
.danger:hover {
  color: #990000;
}
.clickable {
  cursor: pointer;
}
.top-buffer {
  margin-top: 10px;
}
.top-buffer-md {
  margin-top: 20px;
}
.top-buffer-lg {
  margin-top: 50px;
}
*[ng-click]:not(.modal),
a {
  cursor: pointer;
}
.scrollable-content {
  overflow: scroll;
}
.pos-relative {
  position: relative;
}
.form-control,
.dropdown-menu {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.linkText {
  color: #1E93DF;
}
.linkText:hover {
  color: #555;
}
.list-group > .list-group-item.active {
  border-color: #fff transparent;
}
.bs-condensed .row {
  margin-right: -5px;
  margin-left: -5px;
}
.bs-condensed .col-xs-1,
.bs-condensed .col-sm-1,
.bs-condensed .col-md-1,
.bs-condensed .col-lg-1,
.bs-condensed .col-xs-2,
.bs-condensed .col-sm-2,
.bs-condensed .col-md-2,
.bs-condensed .col-lg-2,
.bs-condensed .col-xs-3,
.bs-condensed .col-sm-3,
.bs-condensed .col-md-3,
.bs-condensed .col-lg-3,
.bs-condensed .col-xs-4,
.bs-condensed .col-sm-4,
.bs-condensed .col-md-4,
.bs-condensed .col-lg-4,
.bs-condensed .col-xs-5,
.bs-condensed .col-sm-5,
.bs-condensed .col-md-5,
.bs-condensed .col-lg-5,
.bs-condensed .col-xs-6,
.bs-condensed .col-sm-6,
.bs-condensed .col-md-6,
.bs-condensed .col-lg-6,
.bs-condensed .col-xs-7,
.bs-condensed .col-sm-7,
.bs-condensed .col-md-7,
.bs-condensed .col-lg-7,
.bs-condensed .col-xs-8,
.bs-condensed .col-sm-8,
.bs-condensed .col-md-8,
.bs-condensed .col-lg-8,
.bs-condensed .col-xs-9,
.bs-condensed .col-sm-9,
.bs-condensed .col-md-9,
.bs-condensed .col-lg-9,
.bs-condensed .col-xs-10,
.bs-condensed .col-sm-10,
.bs-condensed .col-md-10,
.bs-condensed .col-lg-10,
.bs-condensed .col-xs-11,
.bs-condensed .col-sm-11,
.bs-condensed .col-md-11,
.bs-condensed .col-lg-11,
.bs-condensed .col-xs-12,
.bs-condensed .col-sm-12,
.bs-condensed .col-md-12,
.bs-condensed .col-lg-12 {
  padding-right: 5px;
  padding-left: 5px;
}
.bs-condensed .form-control {
  padding-left: 6px;
  padding-right: 6px;
}
.table-striped > tbody > tr:nth-child(odd) {
  background: #efefef;
}
.table-striped > tbody > tr:nth-child(odd) > td {
  background-color: inherit;
}
.table-striped > tbody > tr[ng-click]:hover {
  background: #d6ebf9;
}
.table-striped > tbody > tr[disabled]:nth-child(odd) {
  background: #f5f5f5 !important;
}
.table-striped .active {
  background-color: #a9d6f3 !important;
}
.nowrap {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.nav > li > a:hover,
.nav > li > a:focus {
  background-color: #d6ebf9;
}
.active-styling > tbody > tr:hover,
.active-styling > tbody > tr > td:hover,
.active-styling > div:hover,
.active-styling > li:hover {
  background-color: #d6ebf9;
}
.active-styling .active {
  background-color: #a9d6f3 !important;
}
.active-styling .active:hover {
  background-color: #b6dcf5 !important;
}
.active-styling .active:hover > td {
  background-color: transparent;
}
.active-styling .active > td {
  background-color: transparent;
}
.signature-base-style > tbody > tr:hover,
.signature-base-style > tbody > tr > td:hover,
.signature-base-style > div:hover,
.signature-base-style > li:hover {
  background-color: #d6ebf9;
}
.signature-base-style .active {
  background-color: #a9d6f3 !important;
}
.signature-base-style .active:hover {
  background-color: #b6dcf5 !important;
}
.signature-base-style .active:hover > td {
  background-color: transparent;
}
.signature-base-style .active > td {
  background-color: transparent;
}
.signature-base-style td {
  background-color: inherit !important;
}
.signature-base-style td.right-page .page-number {
  text-align: right;
}
.signature-left {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
}
.signature-right {
  border-top: 1px solid #555;
}
.lock-icon-style {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
.lock-icon-style:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
.signature-basic {
  border-right: 1px solid #ccc;
}
.signatures > tbody > tr:hover,
.signatures > tbody > tr > td:hover,
.signatures > div:hover,
.signatures > li:hover {
  background-color: #d6ebf9;
}
.signatures .active {
  background-color: #a9d6f3 !important;
}
.signatures .active:hover {
  background-color: #b6dcf5 !important;
}
.signatures .active:hover > td {
  background-color: transparent;
}
.signatures .active > td {
  background-color: transparent;
}
.signatures td {
  background-color: inherit !important;
}
.signatures td.right-page .page-number {
  text-align: right;
}
.signatures > tbody > tr:nth-of-type(8n+9) td:first-child {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
}
.signatures > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) {
  border-top: 1px solid #555;
}
.signatures > tbody > tr.locked > td:first-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
.signatures > tbody > tr.locked > td:first-of-type:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
.signatures > tbody > tr td:first-child {
  border-right: 1px solid #ccc;
}
.signatures div,
.signatures td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
/*.signatures-2 {	//	same as signatures, but with an extra td on the left
  .signature-base-style;

  > tbody > tr {
    &:nth-of-type(8n+9) td {
      &:nth-child(3) {
        .signature-left;

        border-top: 0 !important;
      }

      &:nth-child(n+3) { .signature-right; }

      &:nth-child(1), &:nth-child(2) { border-bottom: @dkGrayBorder; }
    }

    td:nth-child(2) { .signature-basic; }

    &.locked > td:nth-of-type(2) { .lock-icon-style; }
  }

  div, td { .nowrap }
}*/
.signatures-3 > tbody > tr:hover,
.signatures-3 > tbody > tr > td:hover,
.signatures-3 > div:hover,
.signatures-3 > li:hover {
  background-color: #d6ebf9;
}
.signatures-3 .active {
  background-color: #a9d6f3 !important;
}
.signatures-3 .active:hover {
  background-color: #b6dcf5 !important;
}
.signatures-3 .active:hover > td {
  background-color: transparent;
}
.signatures-3 .active > td {
  background-color: transparent;
}
.signatures-3 td {
  background-color: inherit !important;
}
.signatures-3 td.right-page .page-number {
  text-align: right;
}
.signatures-3 > tbody > tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
  border-top: 0 !important;
}
.signatures-3 > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) {
  border-top: 1px solid #555;
}
.signatures-3 > tbody > tr:nth-of-type(8n+9) td:nth-child(1),
.signatures-3 > tbody > tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #555;
}
.signatures-3 > tbody > tr td:nth-child(2) {
  border-right: 1px solid #ccc;
}
.signatures-3 > tbody > tr.locked > td:nth-of-type(1) {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
.signatures-3 > tbody > tr.locked > td:nth-of-type(1):after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
.signatures-3 div,
.signatures-3 td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.page-select > tbody > tr:not([disabled]):hover {
  background-color: inherit;
}
.page-select > tbody > tr:not([disabled]):nth-child(odd) {
  background-color: #f5f5f5;
}
.page-select > tbody > tr:not([disabled]) > td:not([disabled]):hover {
  background-color: #d6ebf9 !important;
}
.page-select > tbody > tr:not([disabled]) > td:not([disabled]).active:hover {
  background-color: #b6dcf5 !important;
}
.page-select > tbody > tr[disabled] * {
  cursor: default;
}
.close {
  opacity: 1;
  color: #1E93DF;
}
.close:hover {
  opacity: 1;
  color: #1b84c9;
}
.page-number {
  font-weight: bold;
  font-size: 18px;
}
.no-border-radius {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.no-background {
  background-image: none;
  background-repeat: no-repeat;
  background-color: transparent;
  background: none;
}
.display-table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
.modal-dialog {
  margin: 15px auto;
  height: inherit;
  width: auto;
}
.modal-dialog .modal-content {
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.container-bubble {
  position: relative;
  margin-bottom: 15px;
  background-color: #dfdfdf;
  padding: 10px;
}
.container-bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  right: 20px;
  border: 10px solid transparent;
  border-top: 15px solid #dfdfdf;
}
.btn.btn-pill {
  background-image: none;
  background-repeat: no-repeat;
  background-color: transparent;
  background: none;
  color: #1E93DF;
  cursor: pointer;
  border-color: transparent;
  box-shadow: none;
}
.btn.btn-pill:hover {
  background: #d6ebf9 !important;
  color: #585665;
}
.btn.btn-pill:active,
.btn.btn-pill.active {
  background-color: #a9d6f3 !important;
  color: #585665;
}
.btn.btn-pill.danger,
.btn.btn-pill.text-danger {
  color: #c00;
}
.btn.btn-pill.danger:hover,
.btn.btn-pill.text-danger:hover {
  color: #990000;
}
.form-inline input[type='number'].form-control {
  width: 60px;
}
select.od4 {
  color: #1E93DF;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.spread-preview-image {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.color-palette {
  width: 100%;
  display: table;
}
.color-palette div.table-row span {
  display: table-cell;
  height: 20px;
}
div[resize-to-window-height],
section[resize-to-window-height] {
  overflow-x: hidden;
  overflow-y: auto;
}
.ng-pageslide .photo-tray,
.recently_edit {
  background: #fff;
  height: 90%;
}
#demo-down-close {
  font-size: 18px;
}
/*************************************************************
  This was something Josh put together, which didn't work.
  Will delete when I figure out what else he used this for.
**************************************************************/
.mw1200 {
  min-width: 992px !important;
}
body,
html,
.container-fluid {
  min-width: 992px !important;
  min-width: 985px;
  overflow: hidden;
}
.navbar-header {
  float: left;
}
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}
.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}
.navbar-brand {
  margin-left: -15px;
}
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}
.navbar-right {
  float: right !important;
  padding-bottom: 5px;
}
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
}
.flash_window {
  width: 100%;
  background: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  z-index: 100;
}
.bottom {
  min-width: 992px !important;
}
.disable_footer {
  width: 100%;
  height: 35px;
  background-color: #ccc;
  opacity: 0.5;
  z-index: 10000 !important;
}
.indesign-yearbook-link {
  width: 180px !important;
  margin: 2px 0 2px 28px;
}
.right.carousel-control {
  left: 15% !important;
}
/*************************************************************
  This was something Josh/Jeremy put together.
  Will delete when I figure out what else he used this for.
**************************************************************/
.first-use-popover {
  background-color: #fff;
  border: 2px solid #ccc;
  box-shadow: -2px 3px 4px #ccc;
  font-size: 15px;
  line-height: 20px;
  padding: 15px;
  position: absolute;
  z-index: 99;
}
.first-use-popover.arrow-bottom:after,
.first-use-popover.arrow-bottom:before {
  border: solid transparent;
  content: " ";
  height: 0;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 100%;
  width: 0;
}
.first-use-popover.arrow-bottom:after {
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.first-use-popover.arrow-bottom:before {
  border-top-color: #ccc;
  border-width: 13px;
  margin-left: -13px;
}
.first-use-popover.arrow-bottom-left:after,
.first-use-popover.arrow-bottom-left:before {
  border: solid transparent;
  content: " ";
  height: 0;
  left: 15%;
  pointer-events: none;
  position: absolute;
  top: 100%;
  width: 0;
}
.first-use-popover.arrow-bottom-right:after,
.first-use-popover.arrow-bottom-right:before {
  border: solid transparent;
  content: " ";
  height: 0;
  left: 76%;
  pointer-events: none;
  position: absolute;
  top: 100%;
  width: 0;
}
.first-use-popover.arrow-bottom-left:after {
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.first-use-popover.arrow-bottom-left:before {
  border-top-color: #ccc;
  border-width: 13px;
  margin-left: -13px;
}
.first-use-popover.arrow-bottom-right:after {
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.first-use-popover.arrow-bottom-right:before {
  border-top-color: #ccc;
  border-width: 13px;
  margin-left: -13px;
}
.first-use-popover.arrow-top-left:after,
.first-use-popover.arrow-top-left:before {
  border: solid transparent;
  content: " ";
  height: 0;
  left: 15%;
  pointer-events: none;
  position: absolute;
  bottom: 100%;
  width: 0;
}
.first-use-popover.arrow-top-right:after,
.first-use-popover.arrow-top-right:before {
  border: solid transparent;
  bottom: 100%;
  content: " ";
  height: 0;
  left: 50%;
  pointer-events: none;
  position: absolute;
  width: 0;
}
.first-use-popover.arrow-top-right:after {
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.first-use-popover.arrow-top-right:before {
  border-bottom-color: #ccc;
  border-width: 13px;
  margin-left: -13px;
}
.first-use-popover.arrow-top-left:after {
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.first-use-popover.arrow-top-left:before {
  border-bottom-color: #ccc;
  border-width: 13px;
  margin-left: -13px;
}
.first-use-popover.arrow-left:after,
.first-use-popover.arrow-left:before {
  border: solid transparent;
  content: " ";
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;
}
.first-use-popover.arrow-left:after {
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}
.first-use-popover.arrow-left:before {
  border-right-color: #ccc;
  border-width: 13px;
  margin-top: -13px;
}
.first-use-popover.arrow-right:after,
.first-use-popover.arrow-right:before {
  border: solid transparent;
  content: " ";
  height: 0;
  left: 100%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  width: 0;
}
.first-use-popover.arrow-right:after {
  border-left-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}
.first-use-popover.arrow-right:before {
  border-left-color: #ccc;
  border-width: 13px;
  margin-top: -13px;
}
.first-use-popover.arrow-top:after,
.first-use-popover.arrow-top:before {
  border: solid transparent;
  bottom: 100%;
  content: " ";
  height: 0;
  left: 50%;
  pointer-events: none;
  position: absolute;
  width: 0;
}
.first-use-popover.arrow-top:after {
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.first-use-popover.arrow-top:before {
  border-bottom-color: #ccc;
  border-width: 13px;
  margin-left: -13px;
}
.first-use-popover > i.fa {
  color: #1E93DF;
  position: absolute;
  right: 2px;
  top: 1px;
}
.first-use-ID-home-footer {
  position: absolute;
  bottom: 52px;
  left: 36px;
  font-size: 15px;
  width: 296px;
}
.first-use-popover-ybprogress {
  position: absolute;
  right: 0px;
  top: 12px;
  width: 185px;
}
/* Tags CSS */
tags-input.ng-invalid .tags {
  -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
  -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
  box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
tags-input .host {
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
}
tags-input .host:active {
  outline: 0;
}
tags-input .host input {
  margin-bottom: 5px;
  margin-top: 5px;
}
tags-input .host a.remove-button {
  font-size: 12px;
  float: right;
  margin-top: -20px;
}
tags-input .tags {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  padding: 1px;
  height: 89px;
  overflow-y: scroll;
  overflow-x: hidden;
  word-wrap: break-word;
  cursor: text;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  box-shadow: 1px 1px 1px 0 #d3d3d3 inset;
}
tags-input .tags.focused {
  outline: 0;
  -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
  -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
  box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
}
tags-input .tags .tag-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
tags-input .tags .tag-item {
  margin: 2px;
  padding: 0 5px;
  display: inline-block;
  float: left;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 22px;
  line-height: 20px;
  border: 1px solid #acacac;
  background-color: #a9d6f3 !important;
}
tags-input .tags .tag-item.selected {
  background: -webkit-linear-gradient(top, #febbbb 0, #fe9090 45%, #ff5c5c 100%);
  background: linear-gradient(to bottom, #febbbb 0, #fe9090 45%, #ff5c5c 100%);
}
tags-input .tags .tag-item .remove-button {
  margin: 0 0 0 5px;
  padding: 0;
  border: none;
  background: 0 0;
  cursor: pointer;
  vertical-align: middle;
  font: 700 16px Arial, sans-serif;
  color: #585858;
}
tags-input .tags .tag-item .remove-button:active {
  color: red;
}
tags-input .tags .tag-item .removeClose {
  display: none;
}
tags-input .tags .tag-item .select-button {
  margin: 0 0 0 5px;
  padding: 0;
  border: none;
  background: 0 0;
  cursor: pointer;
  vertical-align: middle;
  color: #585858;
}
tags-input .tags .input {
  border: 0;
  outline: 0;
  margin: 2px;
  padding: 0;
  padding-left: 5px;
  float: left;
  height: 26px;
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
tags-input .tags .input.invalid-tag {
  color: red;
}
tags-input .tags .input::-ms-clear {
  display: none;
}
tags-input .autocomplete {
  margin-top: -5px;
  position: absolute;
  padding: 5px 0;
  z-index: 999;
  width: 100%;
  max-height: 16em;
  overflow: scroll;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
tags-input .autocomplete .suggestion-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
tags-input .autocomplete .suggestion-item {
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  color: #585665;
  background-color: #fff;
}
tags-input .autocomplete .suggestion-item.selected,
tags-input .autocomplete .suggestion-item.selected em {
  background-color: #d4eaf9;
  color: #585665;
  font-size: 15px;
}
tags-input .autocomplete .suggestion-item em {
  font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background-color: #fff;
}
tags-input .clear_button {
  right: 0;
  position: absolute;
  top: -20px;
  font-size: 12px;
}
/* For yearbook snap tags */
tags-input-yearbook-snap.ng-invalid .tags {
  -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
  -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
  box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
tags-input-yearbook-snap .host {
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
}
tags-input-yearbook-snap .host:active {
  outline: 0;
}
tags-input-yearbook-snap .host input {
  margin-bottom: 5px;
  margin-top: 5px;
}
tags-input-yearbook-snap .host a.remove-button {
  font-size: 12px;
  float: right;
  margin-top: -20px;
}
tags-input-yearbook-snap .tags {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  padding: 1px;
  height: 89px;
  overflow-y: scroll;
  overflow-x: hidden;
  word-wrap: break-word;
  cursor: text;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  box-shadow: 1px 1px 1px 0 #d3d3d3 inset;
}
tags-input-yearbook-snap .tags.focused {
  outline: 0;
  -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
  -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
  box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
}
tags-input-yearbook-snap .tags .tag-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
tags-input-yearbook-snap .tags .tag-item {
  margin: 2px;
  padding: 0 5px;
  display: inline-block;
  float: left;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 22px;
  line-height: 20px;
  border: 1px solid #acacac;
  background-color: #a9d6f3 !important;
}
tags-input-yearbook-snap .tags .tag-item.selected {
  background: -webkit-linear-gradient(top, #febbbb 0, #fe9090 45%, #ff5c5c 100%);
  background: linear-gradient(to bottom, #febbbb 0, #fe9090 45%, #ff5c5c 100%);
}
tags-input-yearbook-snap .tags .tag-item .remove-button {
  margin: 0 0 0 5px;
  padding: 0;
  border: none;
  background: 0 0;
  cursor: pointer;
  vertical-align: middle;
  font: 700 16px Arial, sans-serif;
  color: #585858;
}
tags-input-yearbook-snap .tags .tag-item .remove-button:active {
  color: red;
}
tags-input-yearbook-snap .tags .tag-item .removeClose {
  display: none;
}
tags-input-yearbook-snap .tags .tag-item .select-button {
  margin: 0 0 0 5px;
  padding: 0;
  border: none;
  background: 0 0;
  cursor: pointer;
  vertical-align: middle;
  color: #585858;
}
tags-input-yearbook-snap .tags .input {
  border: 0;
  outline: 0;
  margin: 2px;
  padding: 0;
  padding-left: 5px;
  float: left;
  height: 26px;
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
tags-input-yearbook-snap .tags .input.invalid-tag {
  color: red;
}
tags-input-yearbook-snap .tags .input::-ms-clear {
  display: none;
}
tags-input-yearbook-snap .autocomplete {
  margin-top: -5px;
  position: absolute;
  padding: 5px 0;
  z-index: 999;
  width: 100%;
  max-height: 16em;
  overflow: scroll;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
tags-input-yearbook-snap .autocomplete .suggestion-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
tags-input-yearbook-snap .autocomplete .suggestion-item {
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  color: #585665;
  background-color: #fff;
}
tags-input-yearbook-snap .autocomplete .suggestion-item.selected,
tags-input-yearbook-snap .autocomplete .suggestion-item.selected em {
  background-color: #d4eaf9;
  color: #585665;
  font-size: 15px;
}
tags-input-yearbook-snap .autocomplete .suggestion-item em {
  font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background-color: #fff;
}
tags-input-yearbook-snap .clear_button {
  right: 0;
  position: absolute;
  top: -20px;
  font-size: 12px;
}
.selectize-control .single .selectize-input input {
  font-size: 15px !important;
  color: #585665 !important;
}
.selectize-control .active {
  background-color: #d4eaf9;
}
.selectize-dropdown-content div {
  font-size: 15px;
  color: #585665;
}
.selectize-dropdown-content div:hover {
  background-color: #d4eaf9;
}
.selectize-dropdown-content div .option .active {
  background-color: #d4eaf9 !important;
}
#about-modal .about-logo {
  width: 100%;
  text-align: center;
}
#about-modal .about-version {
  text-align: right;
  font-size: 15px;
  padding-right: 10px;
}
#about-modal .about-number {
  font-weight: bold;
  text-align: left;
  font-size: 15px;
}
#about-modal .about-footer {
  font-size: 12px;
  text-align: left;
  padding-bottom: 4px;
  margin: 0;
}
#about-modal .modal-header {
  position: relative;
}
#about-modal .close {
  top: 0 !important;
  right: 0 !important;
  padding-right: 2px;
  position: absolute;
}
#about-modal .modal-body {
  padding: 0 15px;
}
#about-modal .modal-footer {
  padding: 0 15px;
}
#recommend-to-staff .clear-button {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  right: 10px;
  position: absolute;
  z-index: 2000;
}
#recommend-to-staff .student_image {
  height: 25px;
  width: 20px;
  display: block;
  background-size: 20px 25px;
  border: none;
  outline: none;
}
#recommend-to-staff .image_area {
  position: absolute;
  top: 5px;
  left: 20px;
  z-index: 1000;
}
#recommend-to-staff .student_image .image_area {
  border: 0;
}
#recommend-to-staff .select-position {
  padding-left: 50px;
}
#recommend-to-staff .dd_section {
  width: 358px !important;
}
.modal-body {
  padding: 15px;
}
/*************************************************************
  Cover and Endsheets
**************************************************************/
#cover-endsheet {
  /*@media (min-width: 1200px) {
    !* For medium breakpoint page 7 of OD4 style guide recurring elements*!
    .medium_header{
      display: none;
    }*/
}
#cover-endsheet .col-xs-2 {
  width: 220px;
}
#cover-endsheet .active {
  background-color: #a9d6f3 !important;
}
#cover-endsheet .in_flash {
  background-color: #1E93DF !important;
}
#cover-endsheet .sub > li > div {
  margin-top: 0px !important;
}
#cover-endsheet .reNoScrollContainer {
  margin: 0px !important;
}
#cover-endsheet .due-date-filter > a {
  margin-top: 0px !important;
}
#cover-endsheet h4 {
  font-size: 24px;
  margin: 0;
  padding: 0;
}
#cover-endsheet a[ng-click="launchViewAllSpreadsModal()"] {
  position: relative;
  top: 4px;
}
#cover-endsheet div[ng-show="true"] {
  position: relative;
}
#cover-endsheet .thumbnail-sm-container {
  background-color: #dfdfdf;
  margin: 3px 0px 3px 15px;
  height: 135px;
  padding: 3px;
  width: 98.2%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
#cover-endsheet .thumbnail-sm-container:after {
  content: '';
  position: absolute;
  bottom: 59px;
  left: 0;
  width: 100%;
  height: 5px;
  background: #fff;
}
#cover-endsheet .thumbnail-sm-placeholder {
  background-color: #dfdfdf;
  display: inline-block;
  height: 90%;
  margin: 0.25em;
  width: 156px;
}
#cover-endsheet .thumbnail-sm-placeholder .tag {
  float: left;
  background-color: #dfdfdf;
  padding: 2px 5px 2px 5px;
  opacity: 0.8;
  font-size: 10px;
}
#cover-endsheet .thumbnail-sm-placeholder .tag-details {
  margin-top: 9.05em;
  background-color: #dfdfdf;
  font-size: 10px;
}
#cover-endsheet .thumbnail-sm-placeholder .tag-details div {
  float: left;
  background-color: #dfdfdf;
  opacity: 0.8;
  padding-right: 3px;
}
#cover-endsheet .no_content {
  text-align: center;
  margin-top: 20px;
  color: #3c3c3c;
}
#cover-endsheet .dropdown-toggle {
  margin: 0px;
  padding: 0px;
}
#cover-endsheet .tag-details .text_limit {
  white-space: nowrap;
  width: 5.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cover-endsheet .recentlyEditedStatus {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#cover-endsheet .lockedStatus {
  position: absolute;
  right: 0;
  top: 0;
  width: 15%;
  font-size: 12px;
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#cover-endsheet .recent-blank-container {
  margin-top: 3px;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0;
}
#cover-endsheet .view-all-blank {
  background-color: #dfdfdf !important;
}
#cover-endsheet .view-all-started {
  background-color: #bfe0f6 !important;
}
#cover-endsheet .view-all-proof {
  background-color: #ffe87c !important;
}
#cover-endsheet .view-all-approved {
  background-color: #b2d67d !important;
}
#cover-endsheet .view-all-submitted {
  background-color: #ad70ed !important;
  color: #ffffff !important;
  left: 25% !important;
}
#cover-endsheet .picker-dialog {
  z-index: 5000;
}
/*************************************************************
  This was something Josh/Jeremy put together.
  Will delete when I figure out what else he used this for.
**************************************************************/
/*************************************************************

  DESCRIPTION OF FILE: Adding to predefined base elements,
  everything underneath "Online Design" tab.  Student
  horizontal navigation, calendar, to dos, spreads table.

**************************************************************/
/*************************************************************
  SPREADS VIEW (HOMEPAGE SECTION)
**************************************************************/
.onlineDesignTable {
  width: 100%;
  padding: 0;
  margin: 0 !important;
  table-layout: fixed;
  /*td:first-child {
    min-width: 15px !important;
    padding: 0;
    background: linear-gradient(to left, rgb(223, 223, 223), rgb(255, 255, 255));
    padding-bottom: 1px;
    padding-top: 1px;
    background-color: white;
    border-bottom: 0;

  }
  td:nth-child(2) {
    min-width: 88.92px;
    max-width: 117px;
    padding: 0 !important;
    border-bottom: 1px @gray3 solid;
    border-right: 1px @gray3 solid;
    max-height: 60px;
    min-height: 40px;

    img {
      width: 100%;
      max-width: 110px;
      min-width: 60px;
      height: auto;
      //max-height:60px;
      //min-height: 40px;
      padding: 0;
    }
  }
  td:nth-child(3) {
    width: 0;
    font-size: @font-md;
    color: @gray1;
    position: relative;
    border-bottom: 1px @gray3 solid !important;
    font-weight: bold;
  }

  td:nth-child(4) {
    width: 17%;
    max-width:17%;
    background-color:red;
    font-size: @font-sm;
    color: @gray1;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px @gray3 solid;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      height: 60%;
      width: 1px;
      background-color: @gray3;
    }
  }
  .lockedicon > td:nth-child(4):after {
    content: '\f023';
    font-family: FontAwesome;
    font-size: 1em;
    position: absolute;
    bottom: 0%;
    right: 4px;
    z-index: 1;
    background-color: transparent;
  }

  td:nth-child(5) {
    width: 17%;
    max-width:17%;
    font-size: @font-sm;
    background-color:green;
    color: @gray1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 10px !important;
    border-bottom: 1px @gray3 solid;
  }
  td:nth-child(6) {
    width: 0;
    font-size: @font-md;
    color: @gray1;
    text-align: right;
    border-bottom: 1px @gray3 solid;
    font-weight: bold;
  }
  td:nth-child(7) {
    min-width: 95.76px;
    max-width: 126px;
    font-size: @font-xs;
    color: @gray2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 1199px) {
    td:nth-child(8){
      display:none;
    }
  }
  @media (min-width: 1200px){
    td:nth-child(8) {
      min-width: 88.92px;
      max-width: 117px;
      font-size: @font-sm;
      color: @gray2;
      text-align: center;
      padding: 0;
      white-space: nowrap;
      span:first-child {
        font-size: @font-sm;
      }
      span:nth-child(2){
        font-size:@font-xs;
      }
    }
  }

  td:nth-child(9){
    min-width: 54.72px;
    max-width: 72px;
    font-size: @font-sm;
    color: @gray2;
    text-align: center;
    padding: 0;
  }*/
}
.onlineDesignTable .pdf-link-spacing {
  padding-bottom: 6px !important;
}
.onlineDesignTable .pdf-text {
  color: #2093df !important;
  font-size: 18px !important;
  padding-bottom: 8px !important;
}
.onlineDesignTable .pdf-icon {
  color: #2093df !important;
  padding-bottom: 4px !important;
}
.onlineDesignTable .pdf-text {
  padding-bottom: 4px !important;
}
.onlineDesignTable tr {
  max-height: 60px !important;
  height: 100%;
  min-height: 40px !important;
  vertical-align: bottom;
}
.onlineDesignTable tr:nth-child(even) {
  background-color: #efefef;
}
.onlineDesignTable tr:hover {
  background-color: #d6ebf9 !important;
}
.onlineDesignTable td {
  padding: 4px;
  overflow: hidden;
}
.onlineDesignTable td:first-child {
  min-width: 15px !important;
  width: 15px;
  padding: 0;
  background: linear-gradient(to left, #dfdfdf, #ffffff);
  padding-bottom: 1px;
  padding-top: 1px;
  background-color: white;
  border-bottom: 0;
}
.onlineDesignTable td:nth-child(2) {
  min-width: 88.92px;
  max-width: 110px;
  width: 110px;
  padding: 0 !important;
  border-bottom: 1px #c4c4cc solid;
  border-right: 1px #c4c4cc solid;
  max-height: 60px;
  min-height: 40px;
  position: relative;
}
.onlineDesignTable td:nth-child(2) img {
  width: 100%;
  max-width: 110px;
  min-width: 60px;
  height: auto;
  padding: 0;
}
.onlineDesignTable td:nth-child(3) {
  min-width: 38px !important;
  width: 38px !important;
  max-width: 38px !important;
  font-size: 18px;
  color: #585665;
  font-weight: bold;
  background: transparent !important;
  border-bottom: 1px #c4c4cc solid;
  /*.left-spread {
      width:100%;
      border:0;

      td:first-child {
        min-width:32px !important;
        width:32px !important;
        max-width:32px !important;
        font-size: @font-md;
        color: @gray1;
        font-weight: bold;
        background:transparent !important;
      }
      td:last-child {
        width: 100%;
        font-size: @font-sm;
        color: @gray1;
        overflow: visible;
        text-overflow: ellipsis;
        white-space: nowrap;
        border:0;
        padding-bottom:2px !important;
      }
    }*/
}
.onlineDesignTable td:nth-child(4) {
  width: 26%;
  border-bottom: 1px #c4c4cc solid;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
}
.onlineDesignTable td:nth-child(4):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 60%;
  width: 1px;
  background-color: #c4c4cc;
  overflow: visible;
}
.onlineDesignTable td:nth-child(5) {
  width: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  position: relative;
}
.onlineDesignTable .lockedicon > td:nth-child(5):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1em;
  position: absolute;
  bottom: 30%;
  left: -6px;
  width: 30px;
  background-color: transparent;
  color: #98989b;
  overflow: visible;
}
.onlineDesignTable td:nth-child(6) {
  width: 26%;
  padding-left: 4px !important;
  border-bottom: 1px #c4c4cc solid;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  font-size: 15px;
  color: #585665;
  /*.right-spread {
      width:100%;
      border: 0;
      background-color:yellow;

      td:first-child {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: break-word;
        font-size: @font-sm;
        color: @gray1;
      }
      td:last-child {
        min-width:32px !important;
        width:32px !important;
        max-width:32px !important;
        text-align:right;
        font-size: @font-md;
        color: @gray1;
        position: relative;
        font-weight: bold;
        border:0;
      }
    }*/
}
.onlineDesignTable td:nth-child(7) {
  min-width: 38px !important;
  width: 38px !important;
  max-width: 38px !important;
  text-align: right;
  font-size: 18px;
  color: #585665;
  position: relative;
  font-weight: bold;
  border: 0;
  border-bottom: 1px #c4c4cc solid;
  overflow: hidden;
}
.onlineDesignTable td:nth-child(8) {
  min-width: 95.76px;
  max-width: 126px;
  width: 126px;
  font-size: 12px;
  color: #98989b;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .onlineDesignTable td:nth-child(9) {
    display: none;
  }
}
@media (min-width: 1200px) {
  .onlineDesignTable td:nth-child(9) {
    width: 88.92px;
    max-width: 117px;
    width: 117px;
    font-size: 15px;
    color: #98989b;
    text-align: center;
    padding: 0;
    white-space: nowrap;
  }
  .onlineDesignTable td:nth-child(9) span:first-child {
    font-size: 15px;
  }
  .onlineDesignTable td:nth-child(9) span:nth-child(2) {
    font-size: 12px;
  }
}
.onlineDesignTable td:nth-child(10) {
  width: 54.72px;
  max-width: 72px;
  width: 72px;
  font-size: 15px;
  color: #98989b;
  text-align: center;
  padding: 0;
}
.onlineDesignTable td:nth-child(10):hover {
  color: purple #d4eaf9;
}
/*************************************************************
  CALENDAR (HOMEPAGE SECTION)
**************************************************************/
.calendars {
  width: 455px;
  float: none;
  margin: 0 auto;
  height: 200px;
  padding-top: 10px;
}
.calendars ul {
  padding-left: 0;
}
.calendars ul li {
  display: inline-block;
  vertical-align: middle;
  padding-left: 15px;
  padding-right: 15px;
}
.calendars ul li.calendar {
  height: 160px;
}
.calendars ul li.calendar table {
  width: 100%;
  font-size: 15px;
  cursor: default;
}
.calendars ul li.calendar table caption {
  text-align: left;
  font-size: 15px;
  color: #585665;
  padding: 2px 7px 5px;
}
.calendars ul li.calendar table td,
.calendars ul li.calendar table th {
  text-align: center;
  padding: 4px;
  font-size: 12px;
}
.calendars ul li.calendar table td.today {
  padding: 0 !important;
  border: 1px solid #1E93DF;
}
.calendars ul li.calendar table td b {
  font-size: 15px;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.calendars ul li.calendar table td b .calendar-tooltip {
  font-size: 15px;
  z-index: 3;
  position: absolute;
  border: 2px solid #000;
  width: 107px;
  text-align: left;
  background: white;
  padding: 5px 3px 5px 5px;
}
.calendars ul .fa {
  color: #1E93DF;
  font-size: 20px;
}
.calendars ul .fa:hover {
  color: #1b84c9;
}
.active-date {
  padding: 0 !important;
}
.calendar-arrows {
  padding: 30px 0 0 0 !important;
}
/*************************************************************
  BOOK PROGRESS CHART AND LIVE YEARBOOK (HOMEPAGE SECTION)
**************************************************************/
/*****************************************************************************************************************
  BOOK PROGRESS CHART AND LIVE YEARBOOK (HOMEPAGE SECTION) MOD_xy21 TODO: remove top Book progress for this style
******************************************************************************************************************/
.book {
  background-image: url('hoverImage/Bookgraphic_default.png');
  background-repeat: no-repeat;
  background-size: 22px 19px;
}
.book:hover {
  background-image: url('hoverImage/Bookgraphic_hover.png');
}
#progress-chart {
  position: relative;
  width: 150px;
  z-index: 20;
  top: -15px;
  left: -20px;
  font-size: 12px;
  text-align: center;
}
#progress-chart a {
  color: #98989b;
}
#progress-chart a:first-child div:nth-child(2) {
  padding-bottom: 15px;
}
#progress-chart .fireworks-pie {
  padding: 6px 6px 1px 0px;
  text-align: center;
}
#progress-chart .fireworks-pie img {
  width: 68px;
  top: 7px;
  position: absolute;
  right: 70px;
}
.shadow-circle {
  position: absolute;
  z-index: 20;
  top: 85px;
  left: 70px;
  width: 53px;
  height: 53px;
  box-shadow: 0px 0px 0px 10px #2093df;
  border-radius: 50%;
}
.color-chart {
  position: absolute;
  top: 65px;
  left: -6px;
}
.color-chart td {
  border: 1px solid #2093df;
}
.color-chart td:hover {
  border: 2px solid #2093df;
}
.noSpreadActivity {
  position: absolute;
  top: 32px;
  left: 9px;
  width: 75px;
  line-height: 1.1;
}
.shadow-circle {
  position: absolute;
  z-index: 20;
  top: 85px;
  left: 60px;
  width: 53px;
  height: 53px;
  box-shadow: 0px 0px 0px 10px #2093df;
  border-radius: 50%;
}
.progress-table {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.progress-table-rounded-header th {
  background-color: #AD70ED;
  color: #336B6B;
  padding: 6px;
  font-size: 20px;
  text-align: left;
}
.progress-table tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
}
.progress-table-rounded {
  border: none;
}
.progress-table-rounded-header th {
  background-color: #AD70ED;
  border: none;
  color: white;
}
.progress-table-rounded-header th:first-child {
  border-radius: 10px 0 0 0;
}
.progress-table-rounded-header th:last-child {
  border-radius: 0 10px 0 0;
}
.progress-table-rounded tbody td {
  border: none;
}
.progress-table-rounded tbody tr {
  font-size: 11px;
}
.progress-table-rounded tbody tr:last-child {
  border-bottom: solid 2px #DDEEEE;
}
.alertbubble {
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0 0 6px #B2B2B2;
  display: inline-block;
  position: relative;
  left: 24px;
  vertical-align: top;
}
.alertbubble::before {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  height: 16px;
  position: absolute;
  top: 16px;
  transform: rotate(29deg) skew(-35deg);
  -moz-transform: rotate(29deg) skew(-35deg);
  -ms-transform: rotate(29deg) skew(-35deg);
  -o-transform: rotate(29deg) skew(-35deg);
  -webkit-transform: rotate(29deg) skew(-35deg);
  width: 20px;
}
.current {
  float: left;
  margin: 5px 11px 5px 20px;
  width: 77%;
  font-weight: normal !important;
  text-align: center;
  font-size: 12px;
}
.current::before {
  box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
  left: -9px;
}
/*************************************************************
  BOOK PROGRESS CHART (MODAL)
**************************************************************/
#book-progress-modal {
  margin: auto;
}
#book-progress-modal .modal-dialog {
  width: 680px;
}
#book-progress-modal .modal-dialog .modal-content {
  padding: 15px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body {
  background: #dfdfdf;
  padding-top: 5px;
  padding-left: 10px;
  height: 460px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .close {
  position: absolute;
  right: -12px;
  top: -18px;
  font-size: 19px;
  opacity: 1;
  color: #428bca;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .close:hover {
  color: #2a6496;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .modal-title {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 1px;
  text-align: center;
}
#book-progress-modal .modal-dialog .modal-content .modal-body #pie-chart-current > div > div {
  top: -15px !important;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .small-charts {
  font-size: 15px;
  margin-top: -30px;
  text-align: center;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .small-charts .col-xs-4:last-child {
  right: 20px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .small-charts > section > div {
  padding-left: 15px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend {
  font-size: 15px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table {
  margin: 50px 0 0 -2px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table tbody td {
  padding-bottom: 8px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table th,
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table td {
  padding: 3px 5px;
  text-align: center;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table thead th {
  font-size: 12px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table th {
  font-weight: normal;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table td:nth-child(2) {
  text-align: left;
  font-size: 18px;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table td div {
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
}
#book-progress-modal .modal-dialog .modal-content .modal-body .legend table tfoot {
  border-top: 1px solid #c4c4cc;
  padding-top: 5px;
}
/*************************************************************
  TO-DOS (HOMEPAGE SECTION)
**************************************************************/
/* to-do formatting located on homepage */
.todo-header {
  width: 100%;
  margin-top: 15px;
  position: relative;
}
.todo-header div:first-child {
  font-size: 24px;
  color: #585665;
  padding-right: 30px;
  float: left;
}
.todo-header div:nth-child(2) {
  padding-top: 10px;
  height: auto;
  float: left;
}
.todo-header > .first-use-popover {
  font-size: 15px;
  left: 185px;
  top: -15px;
  width: 205px;
}
/* to-do nav on homepage */
.todo-nav {
  padding-left: 8px;
  clear: both;
}
.todo-nav div {
  color: #1E93DF;
  font-size: 15px;
  float: left;
  padding: 8px;
}
.todo-nav div:hover {
  color: #585665;
  background-color: #d4eaf9;
}
.todo-nav .activetodo {
  color: #585665;
  font-size: 15px;
  background-color: #a9d6f3 !important;
  z-index: 100;
}
.todo-table {
  display: table;
  width: 100% !important;
}
.todo-rows {
  margin: 0;
  display: table-row;
  padding: 4px;
  /*&:hover {
    div:last-child, div:nth-child(3) {
      background-color: @hoverBlue !important;
    }
  }*/
}
.todo-rows div {
  display: table-cell !important;
}
.todo-rows div .hover-task {
  background-color: #d6ebf9;
  /*&:hover {
        background-color: @hoverBlue;
        .fa {
          visibility: visible;
        }
      }*/
}
.todo-rows div .hover-task .fa {
  visibility: hidden;
  margin: 3px 10px;
}
.todo-rows div .hover-task .fa:hover {
  visibility: visible;
}
.todo-rows div.animate .ng-leave {
  transition: 800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all;
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  height: 36px;
}
.todo-rows div.animate.ng-leave.ng-leave-active {
  transition-delay: 0.5s;
  height: 0;
}
.todo-rows div:first-child {
  color: #98989b;
  font-size: 12px;
  min-width: 82px;
  text-align: right;
  padding-right: 8px;
}
.todo-rows div:nth-child(2) {
  width: 20px;
  padding-right: 15px;
}
.todo-rows div:nth-child(2):not(.checkbox) {
  display: inline;
  margin-bottom: 0;
}
.todo-rows div:nth-child(3) {
  font-size: 15px;
  width: 100%;
  padding: 4px;
}
.todo-rows div:last-child {
  color: #585665;
  min-width: 30px;
  text-align: center;
}
/*************************************************************
  STAFF DROPDOWNS
**************************************************************/
#view-all-spreads-modal .od4-scroll .active {
  border: 3px solid #2093df;
  padding: 0;
}
#view-all-spreads-modal .od4-scroll .overflow_active {
  border: 3px solid red;
  padding: 0;
}
#view-all-spreads-modal .spread-number-display {
  float: left;
  width: 110px;
  color: #585665;
  font-size: 24px;
  margin-top: 4px;
  text-align: center;
}
#view-all-spreads-modal .spread-number-display .spread-text-display {
  font-size: 12px;
}
.no-spreadsVAS-found-bg {
  background-color: #dfdfdf !important;
  text-align: center;
}
.no-spreadsVAS-found-bg h3 {
  padding-top: 20%;
}
.loadingSpinnerVAS {
  padding-top: 300px;
}
.loadingSpinnerVAS i {
  color: #1E93DF;
}
#od-home .navbar {
  margin-bottom: 0;
}
#od-home .doc_dirty_icon {
  position: absolute;
  top: 42%;
  left: 42%;
  width: 0;
  margin: 0;
  padding: 1px;
  color: white;
}
.home-ladder-nav {
  margin-top: 20px;
}
#od-home,
#view-all-spreads-modal,
#messages-modal,
#to-do-modal-list,
#activity-details-modal {
  position: relative;
}
#od-home .navbar ul,
#view-all-spreads-modal .navbar ul,
#messages-modal .navbar ul,
#to-do-modal-list .navbar ul,
#activity-details-modal .navbar ul {
  margin-right: 0px;
}
#od-home .navbar p,
#view-all-spreads-modal .navbar p,
#messages-modal .navbar p,
#to-do-modal-list .navbar p,
#activity-details-modal .navbar p {
  font-size: 15px;
  color: #555;
  margin-top: 15px;
}
#od-home .todo .dropdown,
#view-all-spreads-modal .todo .dropdown,
#messages-modal .todo .dropdown,
#to-do-modal-list .todo .dropdown,
#activity-details-modal .todo .dropdown {
  width: 250px;
  height: 30px;
}
#od-home .todo .dropdown .smallblocktest,
#view-all-spreads-modal .todo .dropdown .smallblocktest,
#messages-modal .todo .dropdown .smallblocktest,
#to-do-modal-list .todo .dropdown .smallblocktest,
#activity-details-modal .todo .dropdown .smallblocktest {
  display: block;
  line-height: 50px;
  width: 250px;
  float: left;
  vertical-align: text-bottom;
}
#od-home .todo .dropdown .smallblocktest:hover,
#view-all-spreads-modal .todo .dropdown .smallblocktest:hover,
#messages-modal .todo .dropdown .smallblocktest:hover,
#to-do-modal-list .todo .dropdown .smallblocktest:hover,
#activity-details-modal .todo .dropdown .smallblocktest:hover {
  color: #fff !important;
}
#od-home .todo .dropdown .student-face,
#view-all-spreads-modal .todo .dropdown .student-face,
#messages-modal .todo .dropdown .student-face,
#to-do-modal-list .todo .dropdown .student-face,
#activity-details-modal .todo .dropdown .student-face {
  background-size: cover;
  background-position: top center;
  width: 25px;
  height: 25px;
}
#od-home .todo .dropdown .staff-button,
#view-all-spreads-modal .todo .dropdown .staff-button,
#messages-modal .todo .dropdown .staff-button,
#to-do-modal-list .todo .dropdown .staff-button,
#activity-details-modal .todo .dropdown .staff-button {
  font-size: 16px;
  padding: 0 20px;
  color: #fff !important;
  float: left;
  width: 238px;
  white-space: nowrap;
}
#od-home .todo .dropdown .ddarrow,
#view-all-spreads-modal .todo .dropdown .ddarrow,
#messages-modal .todo .dropdown .ddarrow,
#to-do-modal-list .todo .dropdown .ddarrow,
#activity-details-modal .todo .dropdown .ddarrow {
  font-size: 16px;
  color: #fff;
  float: right;
  margin-right: 35px;
}
#od-home .todo .dropdown .dropdown-menu,
#view-all-spreads-modal .todo .dropdown .dropdown-menu,
#messages-modal .todo .dropdown .dropdown-menu,
#to-do-modal-list .todo .dropdown .dropdown-menu,
#activity-details-modal .todo .dropdown .dropdown-menu {
  padding: 0;
  background-color: #fff !important;
}
#od-home .todo .dropdown .dropdown-menu a,
#view-all-spreads-modal .todo .dropdown .dropdown-menu a,
#messages-modal .todo .dropdown .dropdown-menu a,
#to-do-modal-list .todo .dropdown .dropdown-menu a,
#activity-details-modal .todo .dropdown .dropdown-menu a {
  padding: 0;
  color: #585665 !important;
  font-size: 12px;
}
#od-home .todo .dropdown .dropdown-menu a:hover,
#view-all-spreads-modal .todo .dropdown .dropdown-menu a:hover,
#messages-modal .todo .dropdown .dropdown-menu a:hover,
#to-do-modal-list .todo .dropdown .dropdown-menu a:hover,
#activity-details-modal .todo .dropdown .dropdown-menu a:hover {
  background: #d6ebf9 !important;
}
#od-home .todo .dropdown .dropdown-menu a .thumbs,
#view-all-spreads-modal .todo .dropdown .dropdown-menu a .thumbs,
#messages-modal .todo .dropdown .dropdown-menu a .thumbs,
#to-do-modal-list .todo .dropdown .dropdown-menu a .thumbs,
#activity-details-modal .todo .dropdown .dropdown-menu a .thumbs {
  min-height: 25px;
  min-width: 25px;
}
#od-home .todo .dropdown .dropdown-menu .last-staff,
#view-all-spreads-modal .todo .dropdown .dropdown-menu .last-staff,
#messages-modal .todo .dropdown .dropdown-menu .last-staff,
#to-do-modal-list .todo .dropdown .dropdown-menu .last-staff,
#activity-details-modal .todo .dropdown .dropdown-menu .last-staff {
  height: 30px;
  padding: 0;
  background-color: #a9d6f3;
}
#od-home .todo .dropdown .dropdown-menu .last-staff-text,
#view-all-spreads-modal .todo .dropdown .dropdown-menu .last-staff-text,
#messages-modal .todo .dropdown .dropdown-menu .last-staff-text,
#to-do-modal-list .todo .dropdown .dropdown-menu .last-staff-text,
#activity-details-modal .todo .dropdown .dropdown-menu .last-staff-text {
  padding: 8px;
  font-size: 12px;
}
#od-home .navbar-default .dropdown,
#view-all-spreads-modal .navbar-default .dropdown,
#messages-modal .navbar-default .dropdown,
#to-do-modal-list .navbar-default .dropdown,
#activity-details-modal .navbar-default .dropdown {
  width: 240px;
  height: 30px;
}
#od-home .navbar-default .dropdown .smallblocktest,
#view-all-spreads-modal .navbar-default .dropdown .smallblocktest,
#messages-modal .navbar-default .dropdown .smallblocktest,
#to-do-modal-list .navbar-default .dropdown .smallblocktest,
#activity-details-modal .navbar-default .dropdown .smallblocktest {
  display: block;
  line-height: 50px;
  width: 50px;
  float: left;
  vertical-align: text-bottom;
}
#od-home .navbar-default .dropdown .smallblocktest:hover,
#view-all-spreads-modal .navbar-default .dropdown .smallblocktest:hover,
#messages-modal .navbar-default .dropdown .smallblocktest:hover,
#to-do-modal-list .navbar-default .dropdown .smallblocktest:hover,
#activity-details-modal .navbar-default .dropdown .smallblocktest:hover {
  color: #fff !important;
}
#od-home .navbar-default .dropdown .staff-button-thumbnail,
#view-all-spreads-modal .navbar-default .dropdown .staff-button-thumbnail,
#messages-modal .navbar-default .dropdown .staff-button-thumbnail,
#to-do-modal-list .navbar-default .dropdown .staff-button-thumbnail,
#activity-details-modal .navbar-default .dropdown .staff-button-thumbnail {
  padding: 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  line-height: 1;
  margin: -5px 5px 0px -10px;
}
#od-home .navbar-default .dropdown .student-face,
#view-all-spreads-modal .navbar-default .dropdown .student-face,
#messages-modal .navbar-default .dropdown .student-face,
#to-do-modal-list .navbar-default .dropdown .student-face,
#activity-details-modal .navbar-default .dropdown .student-face {
  background-size: cover;
  background-position: top center;
  width: 25px;
  height: 25px;
}
#od-home .navbar-default .dropdown .staff-button,
#view-all-spreads-modal .navbar-default .dropdown .staff-button,
#messages-modal .navbar-default .dropdown .staff-button,
#to-do-modal-list .navbar-default .dropdown .staff-button,
#activity-details-modal .navbar-default .dropdown .staff-button {
  font-size: 16px;
  padding: 0 20px;
  color: #fff !important;
  float: left;
  white-space: nowrap;
  width: 100%;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
#od-home .navbar-default .dropdown .ddarrow,
#view-all-spreads-modal .navbar-default .dropdown .ddarrow,
#messages-modal .navbar-default .dropdown .ddarrow,
#to-do-modal-list .navbar-default .dropdown .ddarrow,
#activity-details-modal .navbar-default .dropdown .ddarrow {
  font-size: 16px;
  color: #fff;
  float: right;
  margin-left: 0px;
  margin-top: -2px;
  margin-right: 0px;
}
#od-home .navbar-default .dropdown .dropdown-menu,
#view-all-spreads-modal .navbar-default .dropdown .dropdown-menu,
#messages-modal .navbar-default .dropdown .dropdown-menu,
#to-do-modal-list .navbar-default .dropdown .dropdown-menu,
#activity-details-modal .navbar-default .dropdown .dropdown-menu {
  padding: 0;
  background-color: #fff !important;
}
#od-home .navbar-default .dropdown .dropdown-menu a,
#view-all-spreads-modal .navbar-default .dropdown .dropdown-menu a,
#messages-modal .navbar-default .dropdown .dropdown-menu a,
#to-do-modal-list .navbar-default .dropdown .dropdown-menu a,
#activity-details-modal .navbar-default .dropdown .dropdown-menu a {
  padding: 0;
  color: #585665 !important;
  font-size: 12px;
  display: inline-block;
  /* allows width to work */
  width: 225px;
  /* fixed or max width needed */
  white-space: nowrap;
  /* keep text on one line */
  overflow: hidden;
  /* hide extra text */
  text-overflow: ellipsis;
  /* add the "..." */
  vertical-align: middle;
  /* keeps inline alignment */
}
#od-home .navbar-default .dropdown .dropdown-menu a:hover,
#view-all-spreads-modal .navbar-default .dropdown .dropdown-menu a:hover,
#messages-modal .navbar-default .dropdown .dropdown-menu a:hover,
#to-do-modal-list .navbar-default .dropdown .dropdown-menu a:hover,
#activity-details-modal .navbar-default .dropdown .dropdown-menu a:hover {
  background: #d6ebf9 !important;
}
#od-home .navbar-default .dropdown .dropdown-menu a .thumbs,
#view-all-spreads-modal .navbar-default .dropdown .dropdown-menu a .thumbs,
#messages-modal .navbar-default .dropdown .dropdown-menu a .thumbs,
#to-do-modal-list .navbar-default .dropdown .dropdown-menu a .thumbs,
#activity-details-modal .navbar-default .dropdown .dropdown-menu a .thumbs {
  min-height: 25px;
  min-width: 25px;
}
#od-home .navbar-default .dropdown .dropdown-menu .last-staff,
#view-all-spreads-modal .navbar-default .dropdown .dropdown-menu .last-staff,
#messages-modal .navbar-default .dropdown .dropdown-menu .last-staff,
#to-do-modal-list .navbar-default .dropdown .dropdown-menu .last-staff,
#activity-details-modal .navbar-default .dropdown .dropdown-menu .last-staff {
  height: 30px;
  padding: 0;
  background-color: #a9d6f3;
}
#od-home .navbar-default .dropdown .dropdown-menu .last-staff-text,
#view-all-spreads-modal .navbar-default .dropdown .dropdown-menu .last-staff-text,
#messages-modal .navbar-default .dropdown .dropdown-menu .last-staff-text,
#to-do-modal-list .navbar-default .dropdown .dropdown-menu .last-staff-text,
#activity-details-modal .navbar-default .dropdown .dropdown-menu .last-staff-text {
  padding: 8px;
  font-size: 12px;
}
#od-home .navbar-line,
#view-all-spreads-modal .navbar-line,
#messages-modal .navbar-line,
#to-do-modal-list .navbar-line,
#activity-details-modal .navbar-line {
  padding: 0 !important;
  position: relative;
}
#od-home .navbar-line > .first-use-popover,
#view-all-spreads-modal .navbar-line > .first-use-popover,
#messages-modal .navbar-line > .first-use-popover,
#to-do-modal-list .navbar-line > .first-use-popover,
#activity-details-modal .navbar-line > .first-use-popover {
  left: 0px;
  top: 0px;
  width: 350px;
}
#od-home .navbar-line > .first-use-popover.arrow-top:after,
#view-all-spreads-modal .navbar-line > .first-use-popover.arrow-top:after,
#messages-modal .navbar-line > .first-use-popover.arrow-top:after,
#to-do-modal-list .navbar-line > .first-use-popover.arrow-top:after,
#activity-details-modal .navbar-line > .first-use-popover.arrow-top:after,
#od-home .navbar-line > .first-use-popover.arrow-top:before,
#view-all-spreads-modal .navbar-line > .first-use-popover.arrow-top:before,
#messages-modal .navbar-line > .first-use-popover.arrow-top:before,
#to-do-modal-list .navbar-line > .first-use-popover.arrow-top:before,
#activity-details-modal .navbar-line > .first-use-popover.arrow-top:before {
  left: 275px;
}
#od-home .navbar-line .selected-staff span,
#view-all-spreads-modal .navbar-line .selected-staff span,
#messages-modal .navbar-line .selected-staff span,
#to-do-modal-list .navbar-line .selected-staff span,
#activity-details-modal .navbar-line .selected-staff span,
#od-home .navbar-line .selected-staff a,
#view-all-spreads-modal .navbar-line .selected-staff a,
#messages-modal .navbar-line .selected-staff a,
#to-do-modal-list .navbar-line .selected-staff a,
#activity-details-modal .navbar-line .selected-staff a {
  padding-left: 12px;
}
#od-home .navbar-line .selected-staff span,
#view-all-spreads-modal .navbar-line .selected-staff span,
#messages-modal .navbar-line .selected-staff span,
#to-do-modal-list .navbar-line .selected-staff span,
#activity-details-modal .navbar-line .selected-staff span {
  font-size: 12px;
}
#od-home .navbar-line .selected-staff a,
#view-all-spreads-modal .navbar-line .selected-staff a,
#messages-modal .navbar-line .selected-staff a,
#to-do-modal-list .navbar-line .selected-staff a,
#activity-details-modal .navbar-line .selected-staff a {
  font-size: 15px;
}
#od-home .home-navbar-line,
#view-all-spreads-modal .home-navbar-line,
#messages-modal .home-navbar-line,
#to-do-modal-list .home-navbar-line,
#activity-details-modal .home-navbar-line {
  width: 100%;
}
#od-home .due-date-filter,
#view-all-spreads-modal .due-date-filter,
#messages-modal .due-date-filter,
#to-do-modal-list .due-date-filter,
#activity-details-modal .due-date-filter {
  float: right;
  text-align: right;
}
#od-home .due-date-filter div,
#view-all-spreads-modal .due-date-filter div,
#messages-modal .due-date-filter div,
#to-do-modal-list .due-date-filter div,
#activity-details-modal .due-date-filter div {
  width: 100px;
  height: 50px;
  padding: 5px 0 0 0 !important;
  position: relative;
}
#od-home .due-date-filter .dropdown-toggle,
#view-all-spreads-modal .due-date-filter .dropdown-toggle,
#messages-modal .due-date-filter .dropdown-toggle,
#to-do-modal-list .due-date-filter .dropdown-toggle,
#activity-details-modal .due-date-filter .dropdown-toggle {
  background-color: #fff;
  padding: 0;
}
#od-home .due-date-filter .dropdown-menu,
#view-all-spreads-modal .due-date-filter .dropdown-menu,
#messages-modal .due-date-filter .dropdown-menu,
#to-do-modal-list .due-date-filter .dropdown-menu,
#activity-details-modal .due-date-filter .dropdown-menu {
  max-height: 301px;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
  text-align: left;
  min-width: 100px;
  left: 40px;
  top: 5px;
  position: absolute;
}
#od-home .due-date-filter .dropdown-menu a,
#view-all-spreads-modal .due-date-filter .dropdown-menu a,
#messages-modal .due-date-filter .dropdown-menu a,
#to-do-modal-list .due-date-filter .dropdown-menu a,
#activity-details-modal .due-date-filter .dropdown-menu a {
  color: #585665 !important;
  text-align: left;
  padding: 3px;
}
#od-home .due-date-filter .dropdown-menu a:hover,
#view-all-spreads-modal .due-date-filter .dropdown-menu a:hover,
#messages-modal .due-date-filter .dropdown-menu a:hover,
#to-do-modal-list .due-date-filter .dropdown-menu a:hover,
#activity-details-modal .due-date-filter .dropdown-menu a:hover {
  background: #d6ebf9 !important;
  color: #585665 !important;
}
#od-home .due-date-filter .dropdown-menu a:focus,
#view-all-spreads-modal .due-date-filter .dropdown-menu a:focus,
#messages-modal .due-date-filter .dropdown-menu a:focus,
#to-do-modal-list .due-date-filter .dropdown-menu a:focus,
#activity-details-modal .due-date-filter .dropdown-menu a:focus,
#od-home .due-date-filter .dropdown-menu a:active,
#view-all-spreads-modal .due-date-filter .dropdown-menu a:active,
#messages-modal .due-date-filter .dropdown-menu a:active,
#to-do-modal-list .due-date-filter .dropdown-menu a:active,
#activity-details-modal .due-date-filter .dropdown-menu a:active {
  background-color: #a9d6f3 !important;
  color: #585665;
}
#od-home .due-date-filter .dropdown-menu a.selected-date,
#view-all-spreads-modal .due-date-filter .dropdown-menu a.selected-date,
#messages-modal .due-date-filter .dropdown-menu a.selected-date,
#to-do-modal-list .due-date-filter .dropdown-menu a.selected-date,
#activity-details-modal .due-date-filter .dropdown-menu a.selected-date {
  background-color: #a9d6f3;
}
#od-home .to-dos,
#view-all-spreads-modal .to-dos,
#messages-modal .to-dos,
#to-do-modal-list .to-dos,
#activity-details-modal .to-dos {
  margin-top: 10px;
  overflow: hidden;
  position: relative;
}
#od-home .to-dos .open-todos .animate .ng-leave,
#view-all-spreads-modal .to-dos .open-todos .animate .ng-leave,
#messages-modal .to-dos .open-todos .animate .ng-leave,
#to-do-modal-list .to-dos .open-todos .animate .ng-leave,
#activity-details-modal .to-dos .open-todos .animate .ng-leave {
  opacity: 0.6;
  color: #585665;
}
#od-home .to-dos .open-todos .animate .ng-leave div,
#view-all-spreads-modal .to-dos .open-todos .animate .ng-leave div,
#messages-modal .to-dos .open-todos .animate .ng-leave div,
#to-do-modal-list .to-dos .open-todos .animate .ng-leave div,
#activity-details-modal .to-dos .open-todos .animate .ng-leave div {
  text-decoration: line-through;
}
#od-home .to-dos .fa-pencil,
#view-all-spreads-modal .to-dos .fa-pencil,
#messages-modal .to-dos .fa-pencil,
#to-do-modal-list .to-dos .fa-pencil,
#activity-details-modal .to-dos .fa-pencil {
  opacity: 0 !important;
}
#od-home .to-dos .completed-todos .animate,
#view-all-spreads-modal .to-dos .completed-todos .animate,
#messages-modal .to-dos .completed-todos .animate,
#to-do-modal-list .to-dos .completed-todos .animate,
#activity-details-modal .to-dos .completed-todos .animate {
  opacity: 0.6;
}
#od-home .to-dos .completed-todos .animate.ng-leave,
#view-all-spreads-modal .to-dos .completed-todos .animate.ng-leave,
#messages-modal .to-dos .completed-todos .animate.ng-leave,
#to-do-modal-list .to-dos .completed-todos .animate.ng-leave,
#activity-details-modal .to-dos .completed-todos .animate.ng-leave {
  opacity: 1;
}
#od-home .to-dos .hover-task:hover,
#view-all-spreads-modal .to-dos .hover-task:hover,
#messages-modal .to-dos .hover-task:hover,
#to-do-modal-list .to-dos .hover-task:hover,
#activity-details-modal .to-dos .hover-task:hover {
  background-color: #d6ebf9;
}
#od-home .to-dos .hover-task:hover i.fa-pencil,
#view-all-spreads-modal .to-dos .hover-task:hover i.fa-pencil,
#messages-modal .to-dos .hover-task:hover i.fa-pencil,
#to-do-modal-list .to-dos .hover-task:hover i.fa-pencil,
#activity-details-modal .to-dos .hover-task:hover i.fa-pencil {
  opacity: 1 !important;
}
#od-home .dirty_icon,
#view-all-spreads-modal .dirty_icon,
#messages-modal .dirty_icon,
#to-do-modal-list .dirty_icon,
#activity-details-modal .dirty_icon {
  position: absolute;
  bottom: 70px;
  left: 100px;
  width: 0px;
  height: 0px;
}
.completed-todos div div:last-child {
  color: #98989b;
}
.top-right-nav-ul {
  position: relative;
}
.top-right-nav-ul .first-use-popover {
  font-size: 15px;
  left: 68.25%;
  top: 45px;
  width: 150px;
  position: fixed;
  z-index: 101;
}
.top-right-nav-ul .first-use-popover.arrow-top-right:after,
.top-right-nav-ul .first-use-popover.arrow-top-right:before {
  left: 125px;
}
.top-right-nav-ul .training-first-use {
  top: 45px;
  left: 78%;
  font-size: 15px;
  width: 150px;
  position: fixed;
  z-index: 101;
}
.top-right-nav-ul .training-first-use.arrow-top:after,
.top-right-nav-ul .training-first-use.arrow-top:before {
  left: 33px;
}
#view-all-spreads-modal .due-date-filter .dropdown-menu {
  max-height: 301px;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  text-align: left;
  min-width: 100px;
  left: 40px;
  top: 5px;
  position: absolute;
}
#view-all-spreads-modal .li-menus {
  float: left;
  white-space: nowrap;
  padding-top: 7px;
  padding-left: 10px;
  width: 110px;
}
#view-all-spreads-modal .due-date-filter {
  margin-left: 0;
}
#view-all-spreads-modal .other-date-container {
  float: left;
  white-space: nowrap;
  padding-top: 12px;
  padding-left: 1em;
}
#view-all-spreads-modal .deactivate {
  z-index: 99999999;
  pointer-events: none;
}
#recently_edited .recentlyEditedWrapper {
  position: relative;
  height: 100%;
  width: 170px;
  padding: 0;
  margin: 3px 2px;
  z-index: 8;
  background-color: #fff !important;
}
.supportModalStyle .yearbookRep {
  color: #98989b;
  font-size: 12px;
}
.supportModalStyle .support-profile {
  width: 88px;
  height: auto;
}
.supportModalStyle .show-book {
  position: relative;
  z-index: 1;
  height: 100px;
  width: 300px;
  overflow: visible !important;
}
.supportModalStyle .show-box {
  display: none;
  position: absolute;
  top: -15px;
  left: 0;
  background-color: white;
  border: 1px solid gray;
  width: 200px;
  height: 60px;
  z-index: 10000 !important;
  white-space: nowrap;
  margin-top: 5px;
  padding: 8px;
}
.supportModalStyle .show-book:hover .show-box {
  display: block;
}
.supportModalStyle .live-bubble {
  background: #b6dcf5;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 14px;
  width: 158px !important;
  padding: 15px;
  margin-top: 3px;
  position: relative;
  color: #1E93DF;
  text-align: right;
}
.supportModalStyle .address {
  font-size: 12px;
  color: #1E93DF;
  padding-bottom: 20px;
}
.supportModalStyle .speech-bubble {
  background: #efefef;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.3;
  width: 158px !important;
  padding: 15px;
  position: relative;
}
.supportModalStyle .speech-bubble .links {
  line-height: 22px;
}
.supportModalStyle .speech-bubble p {
  margin: 0 0 10px;
}
.supportModalStyle .speech-bubble p:last-of-type {
  margin-bottom: 0;
}
.supportModalStyle .speech-bubble::after {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  height: 13px;
  position: absolute;
  top: 22px;
  left: -6px;
  transform: rotate(29deg) skew(-35deg);
  -moz-transform: rotate(29deg) skew(-35deg);
  -ms-transform: rotate(29deg) skew(-35deg);
  -o-transform: rotate(29deg) skew(-35deg);
  -webkit-transform: rotate(29deg) skew(-35deg);
  width: 20px;
}
.supportModalStyle .speech-bubble-no-triangle {
  background: #efefef;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  height: 120px;
  padding: 10px;
}
.supportModalStyle .cs {
  font-size: 15px;
}
.supportModalStyle .phone {
  font-size: 24px;
}
.supportModalStyle .email {
  text-align: right;
  font-size: 12px;
}
.supportModalStyle .resources {
  font-size: 15px;
  font-weight: bold;
  padding: 10px;
  line-height: 32px;
}
.supportModalStyle .resource-links {
  font-size: 12px;
  line-height: 22px;
  color: #1E93DF;
  padding: 10px 10px 10px 30px;
}
.live-tech {
  padding-top: 0;
}
.live-tech div {
  padding-bottom: 12px;
}
.live-tech .indent {
  padding-left: 35px;
}
.live-tech .title {
  font-size: 18px;
}
.changePasswordModal #container {
  width: 387px;
  margin-left: -12px;
  margin-bottom: 15px;
}
.changePasswordModal .login-font-sm {
  font-size: 12px;
  color: white;
  width: 290px;
  margin-top: 10px;
}
.changePasswordModal .login-font-sm-new {
  font-size: 12px;
  width: 290px;
  margin: 0px !important;
}
.changePasswordModal .wals-title {
  font-size: 12px;
  color: white;
  margin-top: 5px;
}
.changePasswordModal .wals-title-new {
  font-size: 12px;
  margin: 0px !important;
}
.changePasswordModal .error {
  border: 2px solid red;
  border-radius: 4px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.changePasswordModal .invalid-feedback {
  color: red;
}
.changePasswordModal .help-block-password {
  font-size: 12px;
  color: red;
}
#live-yearbook-link {
  position: absolute;
  right: 0;
  top: 0;
  margin: 6px;
}
.manage-staff-link {
  margin: 12px;
}
@media (max-width: 1200px) {
  #live-yearbook-link .btn.btn-pill {
    padding: 6px 0.5vw;
  }
  .selected-staff,
  .manage-staff-link {
    width: fit-content;
  }
  .manage-staff-link,
  .manage-staff-link > a {
    margin: 0px;
  }
}
/*************************************************************

Adding to predefined base elements, everything underneath
"Online Design" tab.  Student horizontal navigation, calendar,
to dos, spreads table.

**************************************************************/
.loading-bg {
  text-align: center;
  position: relative;
}
.loading-bg div {
  position: absolute;
  top: 50%;
  left: 50%;
}
.loading-bg div i {
  color: #1E93DF;
}
.loading-album-bg {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1002;
}
.loading-album-bg div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
}
.loading-album-bg div i {
  position: absolute;
  top: 22%;
  left: 22%;
  color: #1E93DF;
  opacity: 1 !important;
}
.loading-students {
  padding-left: 100px;
}
.loading-students div i {
  color: #1E93DF;
}
.hide-form {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff !important;
  opacity: 0.6;
  z-index: 1000 !important;
  width: 100%;
  height: 100%;
}
.burger-p {
  margin: 10px;
}
.burger-p .burger-arrow {
  padding-top: 15px;
  background-color: yellow;
}
.footer-message {
  font-size: 15px;
}
.background-titles {
  background-color: #fff;
  z-index: 500;
  width: 100%;
  padding-right: 5px;
  padding-bottom: 5px;
}
/*************************************************************
  THUMBNAIL ELEMENTS
**************************************************************/
.fav-rec-container {
  position: relative;
  background-color: #dfdfdf;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 100%;
}
.fav-blank img {
  height: 100%;
  width: 100%;
}
.search-container {
  position: relative;
  background-color: #dfdfdf;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 100%;
}
.search-container .search-photos-boxes {
  display: inline-block;
  float: left;
  padding: 0;
  position: relative;
  margin: 0;
}
.search-container .search-photos-boxes img {
  width: 100%;
  height: 105px;
  object-fit: cover;
  border: 2px solid #dfdfdf;
}
.search-container .search-photos-boxes:hover .deleteIcon {
  opacity: 0.8;
  border: 2px solid #1E93DF;
}
.search-photos-screen {
  position: relative;
  background-color: #dfdfdf;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 100%;
}
.search-photos-screen .search-photos-boxes {
  display: inline-block;
  float: left;
  padding: 0;
  position: relative;
  margin: 0;
}
.search-photos-screen .search-photos-boxes img {
  height: 105px;
  object-fit: scale-down;
  border: 2px solid #dfdfdf;
}
.search-photos-screen .search-photos-boxes:hover .deleteIcon {
  opacity: 0.8;
  border: 2px solid #1E93DF;
}
.favoriteBoxes {
  float: left;
  display: inline-block;
  list-style: none;
  width: 20% !important;
  position: relative;
  padding: 2px;
  margin: 0;
}
.favoriteBoxes img {
  width: 100%;
  height: 95px;
  object-fit: cover;
}
.favoriteBoxes:hover .deleteIcon {
  opacity: 0.8;
}
.myPhotosBoxes {
  display: inline-block;
  float: left;
  width: 25%;
  padding: 2px;
  position: relative;
  margin: 0;
}
.myPhotosBoxes img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}
.myPhotosBoxes:hover .deleteIcon {
  opacity: 0.8;
}
.album-modal-boxes {
  display: inline-block;
  float: left;
  width: 12.5%;
  padding: 2px;
  position: relative;
  margin: 0;
}
.album-modal-boxes img {
  width: 100%;
}
.album-modal-boxes:hover .deleteIcon {
  opacity: 0.8;
}
.cov-container {
  position: relative;
  background-color: #dfdfdf;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 100%;
}
.cov-container .coverage-truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coverage-photos-boxes {
  display: inline-block;
  float: left;
  padding: 4px;
  position: relative;
  background-color: #fff !important;
  border: 2px solid #dfdfdf;
}
.coverage-photos-boxes img {
  width: 100%;
  height: 105px;
  object-fit: cover;
}
.coverage-photos-boxes:hover {
  /*.deleteIcon {
      opacity: 0.8
    }*/
}
.wrapperIcons {
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 0.85 !important;
  background-color: #fff !important;
}
.wrapperIcons .favoriteIcon {
  font-weight: bolder;
  float: left;
  padding-top: 2px;
  font-size: 12px;
  display: inline-block;
  width: 20px;
  height: 20px;
  z-index: 71;
  text-align: center;
}
.wrapperIcons .recommendIcon {
  display: inline-block;
  font-size: 14px;
  color: #585665;
  font-weight: bolder;
  float: left;
  width: 20px;
  height: 20px;
  z-index: 72;
  text-align: center;
}
.wrapperIcons .edit-icon {
  display: inline-block;
  font-size: 12px;
  color: #585665;
  font-weight: bold;
  float: left;
  padding-top: 0 !important;
  width: 20px;
  height: 20px;
  z-index: 73;
  text-align: center;
}
.placedIcon {
  position: absolute;
  left: 2px;
  bottom: 2px;
  font-size: 12px;
  color: #585665;
  background-color: #fff;
  height: 20px;
  padding: 2px;
  z-index: 70;
  opacity: 0.85;
}
.deleteIcon {
  background-color: #fff;
  opacity: 0;
  position: absolute;
  top: 2px;
  right: 2px;
  padding-top: 2px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: #585665;
  z-index: 70;
  text-align: center;
}
.my-albums {
  position: relative;
}
.my-albums:hover .deleteIcon {
  opacity: 0.8;
  z-index: 5000;
}
/*.boxContainer {
  position:relative;
  background-color: red !important;
  padding:5px;
}*/
/*************************************************************
  PHOTO TRAY
**************************************************************/
#photo_tray {
  /*  .thumbnail-sm-placeholder {
    transition: 0s background-color;
    transition-delay:2s;
  }*/
}
#photo_tray .photo-tray-container {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 2.5em;
}
#photo_tray .photo-tray-container .pt-header {
  color: #2093df;
  font-size: 24px;
}
#photo_tray .photo-tray-container .photo-tray-left-content {
  width: 43em;
  float: left;
}
#photo_tray .photo-tray-container .photo-tray-left-content .photo-tray-placed {
  float: right;
  padding-left: 1em;
  font-color: #585665;
  font-size: 12px;
}
#photo_tray .photo-tray-container .photo-tray-left-content .photo-tray-file-name {
  float: right;
  padding-left: 1em;
  padding-right: 2em;
  font-color: #585665;
  font-size: 12px;
}
#photo_tray .photo-tray-container .photo-tray-right-content {
  width: 18em;
  float: right;
  padding-left: 2em;
}
#photo_tray .photo-tray-container .photo-tray-right-content .photo-tray-input-box {
  float: right;
  width: 9em;
}
#photo_tray .photo-tray-container .photo-tray-right-content .photo-tray-clear {
  float: right;
  width: 4em;
  font-size: 12px;
  padding-top: 0.6em;
  text-align: center;
}
#photo_tray .photo-tray-container .name-details {
  position: absolute;
  display: block;
  bottom: 0px;
  padding-left: 3px;
  color: #fff;
  left: 0;
  width: 100%;
  background-color: #333;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  opacity: 0.85;
  font-size: 12px;
  z-index: 200;
  text-align: left;
}
#photo_tray .photo-tray-container .name-details .name-display {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
  max-height: 35px;
  overflow: hidden;
}
#photo_tray .wrapperIcons {
  position: absolute;
  top: 3px;
  left: 0.2em;
  opacity: 0.85 !important;
  background-color: #fff !important;
}
#photo_tray .wrapperIcons .favoriteIcon {
  font-weight: bolder;
  float: left;
  padding-top: 2px;
  font-size: 12px;
  display: inline-block;
  width: 20px;
  height: 20px;
  z-index: 71;
  text-align: center;
}
#photo_tray .wrapperIcons .recommendIcon {
  display: inline-block;
  font-size: 14px;
  color: #585665;
  font-weight: bolder;
  float: left;
  width: 20px;
  height: 20px;
  z-index: 72;
  text-align: center;
}
#photo_tray .wrapperIcons .edit-icon {
  display: inline-block;
  font-size: 12px;
  color: #585665;
  font-weight: bold;
  float: left;
  padding-top: 0 !important;
  width: 20px;
  height: 20px;
  z-index: 73;
  text-align: center;
}
#photo_tray .input,
#photo_tray .photo-search {
  height: 34px;
  width: 9em !important;
  float: right;
}
#photo_tray .autocomplete {
  overflow: hidden;
}
#photo_tray .suggestion-list {
  overflow-x: hidden;
  height: 170px;
}
#photo_tray .clear_button {
  left: 140px;
}
#photo_tray .thumbnail-sm-placeholder .tag-placed {
  position: absolute;
  bottom: -3px;
  left: 3px;
  padding: 3px;
  font-size: 12px;
  background-color: #fff;
  opacity: 0.85;
}
#photo_tray .my-photos-imgs {
  height: 8.7em;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#photo_tray .thumbnail-sm-placeholder {
  height: 8.7em;
  min-width: 8.7em;
  position: relative;
  padding: 3px !important;
}
#photo_tray .thumbnail-sm-placeholder:hover .tag-delete {
  display: block;
}
#photo_tray .thumbnail-sm-placeholder .tag-delete {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  background-color: #fff;
  opacity: 0.85;
  width: 20px;
  height: 20px;
  text-align: center;
}
#photo_tray .thumbnail-sm-placeholder .fav-rec-photos {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
#photo_tray .thumbnail-sm-placeholder .tag-favorite {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: #fff;
  opacity: 0.85;
}
#photo_tray .thumbnail-sm-placeholder .tag-recommend {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: #fff;
  opacity: 0.85;
}
#photo_tray .thumbnail-sm-placeholder .tag-details {
  opacity: 0.85;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 3px;
  background-color: #fff;
  padding-top: 3px;
  font-size: 12px;
}
#photo_tray .thumbnail-sm-placeholder .tag-details .place-details-container {
  padding: 0;
  margin: 0;
}
#photo_tray .thumbnail-sm-placeholder .tag-details .place-details-container .placed-link {
  color: #585665;
  font-size: 12px;
  float: left;
  width: 50%;
  padding: 3px 3px 3px 3px;
}
#photo_tray .thumbnail-sm-placeholder .tag-details .place-details-container .details-link {
  color: #1E93DF;
  font-size: 12px;
  float: right;
  padding: 3px;
}
#photo_tray .thumbnail-sm-placeholder .filename-details {
  position: absolute;
  display: block;
  bottom: -6px;
  padding-left: 3px;
  color: #fff;
  width: 100%;
  background-color: #333;
  padding-top: 3px !important;
  opacity: 0.85;
  font-size: 12px;
  z-index: 2000;
}
#photo_tray .thumbnail-sm-placeholder .filename-details .filename-display {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
  max-height: 35px;
  overflow: hidden;
  padding-left: 3px;
  padding-right: 3px;
  text-overflow: ellipsis !important;
}
#photo_tray .thumbnail-sm-placeholder .filename-details .place-details-container {
  padding: 0;
  margin: 0;
}
#photo_tray .thumbnail-sm-placeholder .filename-details .place-details-container .placed-link {
  color: #fff;
  font-size: 12px;
  float: left;
  width: 50%;
}
#photo_tray .thumbnail-sm-placeholder .filename-details .place-details-container .details-link {
  color: #1E93DF;
  font-size: 12px;
  float: right;
  opacity: 0;
}
#photo_tray .thumbnail-sm-placeholder:hover .filename-details .details-link {
  opacity: 1;
}
#photo_tray .thumbnail-sm-placeholder:hover {
  /*.tag-details {
      display: inline-block;
      background-color: red;
    }*/
}
#photo_tray .thumbnail-sm-placeholder .student-container {
  margin: 0;
  display: block;
  /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
  max-height: 35px;
  overflow: hidden;
  padding-left: 3px;
  padding-right: 3px;
  text-overflow: ellipsis !important;
}
#photo_tray .topic-list-autocomplete .auto_com {
  display: none;
}
#photo_tray .student-list-autocomplete .auto_com {
  display: none;
}
/*************************************************************
  PHOTO TOPICS
**************************************************************/
#photo-topics .close {
  margin-top: -53px !important;
  margin-right: -14px;
}
#photo-topics .modal-header {
  border-bottom: 0;
}
#photo-topics .modal-header .modal-title {
  font-size: 24px;
}
#photo-topics .modal-body {
  padding: 0 20px;
}
#photo-topics .modal-body li {
  margin: 2px 0;
}
#photo-topics .modal-body .remove a {
  color: #ccc;
  opacity: 0.5;
}
#photo-topics .modal-body .remove a:hover {
  opacity: 0.75;
}
#photo-topics .modal-footer {
  border-top: 0;
}
#photo-topics .modal-footer > div {
  margin-bottom: 0.8em;
}
#photo-topics .modal-footer input {
  float: left;
  width: 82%;
  height: 33px;
  padding: 0px 6px;
}
#photo-topics .modal-footer .btn-pill {
  padding: 8px;
}
#my-photos {
  margin-top: 20px;
}
#my-photos .headers-default {
  color: #585665;
  font-size: 15px;
}
#my-photos .headers-albums {
  color: #1E93DF;
  font-size: 12px;
}
#my-photos .header-boxes {
  padding-right: 40px;
  float: left;
}
#my-photos .header-links {
  float: left;
  padding-left: 25px;
}
#my-photos .albums {
  margin-top: 5px;
}
#my-photos .photo-album-container {
  margin: 0.25em 0;
  font-size: 12px;
}
#my-photos .thumbnail-lg-container {
  min-height: 220px;
}
#my-photos .thumbnail-sm-container {
  height: 130px;
  margin-bottom: 1em;
}
#my-photos .thumbnail-lg-placeholder,
#my-photos .thumbnail-sm-placeholder {
  float: left;
  width: 125px;
  height: 125px;
}
#my-photos .thumbnail-lg-placeholder {
  height: 99px;
  width: 99px;
}
#my-photos .thumbnail-sm-placeholder {
  height: 54px;
  width: 54px;
}
#my-photos .tag,
#my-photos .tag-placed,
#my-photos .tag-close {
  background-color: #ccc;
  position: relative;
  top: 0;
  left: 0;
  padding: 0.25em;
  width: 20px;
}
#my-photos .tag {
  padding: 0.2em;
  display: inline;
}
#my-photos .tag-placed {
  width: 55px;
  display: inline-block;
}
#my-photos .tag-close {
  display: none;
  left: 5.4em;
}
#my-photos .thumbs:hover .tag-close {
  display: inline;
}
/*************************************************************
  CLICK ART (PARTIAL)
**************************************************************/
#clikart-partial #search {
  width: 100%;
}
#clikart-partial ul {
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
#clikart-partial ul li {
  list-style: none;
  display: inline-block;
}
#clikart-partial .thumbnail-sm-placeholder {
  float: left;
  height: 54px;
  margin: 0.25em;
  width: 54px;
}
#clikart-partial .large {
  width: 405px;
}
/*************************************************************
  ARTWORK (PARTIAL)
**************************************************************/
.artwork-partial {
  margin-top: 60px;
  font-size: 12px;
}
.artwork-partial li {
  list-style: none;
  display: inline-block;
}
.artwork-partial ul {
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.artwork-partial .thumbnail-sm-container {
  background-color: #ddd;
  margin-top: 0.25em;
  margin-bottom: 1em;
  min-height: 69px;
  padding: 0.25em;
}
.artwork-partial .thumbnail-sm-placeholder {
  float: left;
  height: 54px;
  margin: 0.25em;
  width: 54px;
}
.artwork-partial .large {
  width: 405px;
}
.artwork-partial label {
  font-weight: normal;
}
/*************************************************************
  SEARCH FILTERS
**************************************************************/
.search-filters ul {
  padding-left: 20px;
}
.search-filters ul li {
  list-style-type: none;
}
/*************************************************************
  PHOTO ALBUM (MODAL)
**************************************************************/
#photo-album-modal .edit {
  color: #2093df;
  font-size: 24px;
}
#photo-album-modal .clear_button {
  font-size: 12px;
  margin-left: 250px;
}
#photo-album-modal .topic-list-autocomplete .auto_com {
  position: absolute;
  bottom: 0.6em;
  right: 1em;
  color: #2093df;
}
#photo-album-modal .student-list-autocomplete .auto_com {
  display: none;
}
#photo-album-modal .student-list-autocomplete .thumbs {
  display: none;
}
#photo-album-modal {
  min-width: 992px !important;
}
#photo-album-modal .thumbnail-hamburger .no-border-dropdown:hover {
  background-color: transparent;
}
#photo-album-modal .thumbnail-hamburger .no-border-dropdown a:hover {
  background-color: transparent;
}
#photo-album-modal .album-hover {
  opacity: 0;
}
#photo-album-modal .album-hover:hover {
  opacity: 1;
}
#photo-album-modal .photo-tray-file-name {
  float: left;
  padding-left: 1em;
  font-color: #585665;
  font-size: 12px;
}
#photo-album-modal .album-photo-count {
  float: left;
  width: 85px;
  padding-top: 5px;
}
#photo-album-modal .filename-details {
  position: absolute;
  display: block;
  bottom: 0px;
  padding-left: 3px;
  color: #fff;
  left: 0;
  width: 100%;
  background-color: #333;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  opacity: 0.85;
  font-size: 12px;
  z-index: 200;
  text-align: left;
}
#photo-album-modal .filename-details .filename-display {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
  max-height: 35px;
  overflow: hidden;
}
#photo-album-modal .filename-details .place-details-container {
  padding: 0;
  margin: 0;
}
#photo-album-modal .filename-details .place-details-container .placed-link {
  color: #fff;
  font-size: 12px;
  float: left;
  width: 50%;
}
#photo-album-modal .filename-details .place-details-container .details-link {
  color: #1E93DF;
  font-size: 12px;
  float: right;
  opacity: 0 !important;
}
#photo-album-modal .modal-footer {
  margin-top: 0;
  padding-top: 0;
  padding-right: 16px !important;
}
#photo-album-modal .form-control {
  width: 100%;
  padding: 0.25em 0.5em;
  border: 1px solid #ccc;
}
#photo-album-modal .close {
  margin-top: -5px;
  margin-right: 5px;
}
#photo-album-modal h4 {
  font-size: 24px;
  display: inline;
}
#photo-album-modal #album-carousel {
  width: 100%;
}
#photo-album-modal .tag-placed {
  background-color: #ccc;
  left: 0;
  padding: 0.25em;
  position: relative;
  top: 0;
  width: 4em !important;
}
#photo-album-modal .tag {
  background-color: #fff;
  position: relative;
  width: 20px;
  display: inline-block;
}
#photo-album-modal a.disabled {
  color: #CCCCCC;
  cursor: default;
  text-decoration: none;
}
#photo-album-modal .auto_com {
  position: absolute;
  bottom: 0.6em;
  right: 1em;
  color: #2093df;
}
#photo-album-modal .image_container {
  font-size: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
#photo-album-modal img {
  display: block;
  position: relative;
  top: auto;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
#photo-album-modal .carousel-inner {
  max-height: 450px;
  width: 100%;
  background-color: #999;
}
#photo-album-modal .carousel-inner .carousel-image {
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 30em;
}
#photo-album-modal .dropdown-menu li {
  margin: 0 !important;
  width: 100%;
  float: left;
}
#photo-album-modal .dropdown-menu li a {
  color: #1E93DF;
  padding: 2px 6px !important;
}
#photo-album-modal .dropdown-menu li:hover a {
  color: #585665;
  background: #d6ebf9;
}
#photo-album-modal #album-slideshow .action-bar {
  background-color: #c4c4cc;
  margin: 0;
  height: 40px;
  line-height: 38px;
}
#photo-album-modal #album-slideshow .action-bar .action-bar-links {
  margin-bottom: 0;
  width: auto;
}
#photo-album-modal #album-slideshow .action-bar .action-bar-links li {
  display: inline-block;
  margin: 0 4px;
}
#photo-album-modal #album-slideshow .action-bar .action-bar-links li ul.dropdown-menu {
  margin-top: -7px;
}
#photo-album-modal #album-slideshow .action-bar .action-bar-links li a {
  padding: 12px 0;
}
#photo-album-modal #album-slideshow .action-bar .action-bar-links li a:hover {
  background-color: transparent;
}
#photo-album-modal #album-slideshow h3 {
  margin-top: 0;
}
#photo-album-modal #album-thumbnails .thumbnail-hamburger .nav {
  padding: 0;
  margin: 0;
}
#photo-album-modal #album-thumbnails .scrollable-content {
  max-height: 470px;
  background-color: #dfdfdf !important;
}
#photo-album-modal #album-thumbnails .thumbs {
  padding-left: 0;
}
#photo-album-modal #album-thumbnails .thumbs li {
  width: 107px;
  height: 108px;
  display: inline-block;
  background-color: #999;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: 2px solid #dfdfdf;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}
#photo-album-modal #album-thumbnails .thumbs li.active {
  border-color: #a9d6f3;
}
#photo-album-modal #album-thumbnails .thumbs li .wrapperIcons {
  top: 0;
  left: 0;
}
#photo-album-modal #album-thumbnails .thumbs li .placedIcon {
  bottom: 0;
  left: 0;
}
#photo-album-modal #album-thumbnails input[type="search"] {
  width: 100%;
  padding: 0.25em 0.5em;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
.edit-cs-modal input.danger {
  color: #c00;
  border-color: #c00;
}
.edit-cs-modal .swatches {
  overflow: scroll;
}
.edit-cs-modal .swatches .swatch {
  width: 33.33%;
  float: left;
  height: 50px;
}
.edit-cs-modal .swatches .swatch.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.edit-cs-modal .swatches .swatch:hover span {
  color: #1E93DF;
}
.edit-cs-modal .swatches .swatch span {
  background: #fff;
  padding: 1px 15px 1px 5px;
  font-size: 70%;
  vertical-align: top;
}
.edit-cs-modal .container-bubble {
  width: 95%;
}
.edit-cs-modal .container-bubble:after {
  right: 20px;
}
/*************************************************************
  SEARCH PHOTOS
**************************************************************/
#search-photos {
  margin-top: 20px;
}
#search-photos .photo-tray-file-name {
  float: left;
  padding-left: 1em;
  font-color: #585665;
  font-size: 12px;
}
#search-photos .filename-details {
  position: absolute;
  display: block;
  bottom: 0px;
  padding-left: 3px;
  color: #fff;
  left: 2px;
  width: 100%;
  background-color: #333;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  opacity: 0.85;
  font-size: 12px;
  z-index: 200;
  text-align: left;
}
#search-photos .filename-details .filename-display {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
  max-height: 35px;
  overflow: hidden;
}
#search-photos .filename-details .place-details-container {
  padding: 0;
  margin: 0;
}
#search-photos .filename-details .place-details-container .placed-link {
  color: #fff;
  font-size: 12px;
  float: left;
  width: 50%;
}
#search-photos .filename-details .place-details-container .details-link {
  color: #1E93DF;
  font-size: 12px;
  float: right;
}
#search-photos .active {
  border-color: #a9d6f3;
}
#search-photos .search-box-padding {
  padding-bottom: 15px;
}
#search-photos .ti-search-topics {
  position: relative;
}
#search-photos .first-use-popover {
  font-size: 15px;
  left: -10px;
  top: 105px;
  width: 165px;
  z-index: 1000;
}
#search-photos textarea {
  height: 4em;
  resize: none;
  width: 100%;
}
#search-photos #student-tags {
  margin-top: 1em;
}
#search-photos #search-topics,
#search-photos #search-students,
#search-photos #search-albums,
#search-photos #search-filename {
  height: 2em;
  width: 100%;
}
#search-photos input[placeholder="Filter by file name"] {
  margin: 2em 0;
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 14px;
  height: 100%;
  font-weight: 400;
}
#search-photos input[placeholder="Filter by file name"]:focus {
  border-color: #1E93DF;
}
#search-photos #search-filename {
  margin-top: 2em;
}
#search-photos .photo-album-container {
  margin: 0.25em 0 2em 0;
}
#search-photos .thumbs {
  background-position: center top;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  min-width: 25px;
  min-height: 25px;
  background-color: #ddd;
}
#search-photos .thumbs li {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #999999;
  text-align: center;
  vertical-align: middle;
  border: 2px solid #ddd;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}
#search-photos .thumbs li.active {
  border-color: #a9d6f3;
}
#search-photos label {
  font-weight: normal;
}
#search-photos .disabled {
  color: #ccc;
}
#search-photos .modal-titleTemp {
  font-size: 22px;
  color: #555;
}
#search-photos .dropdown-menu a:hover {
  background: #d6ebf9;
}
#search-photos .temp-background {
  text-align: right;
}
#search-photos .footbar {
  position: absolute;
  width: 75%;
  text-align: right;
  bottom: 40px;
  right: 25px;
  z-index: 1000;
  background: white;
}
#search-photos .tag-placed {
  background-color: #ccc;
  left: 0;
  padding: 0.25em;
  position: relative;
  top: 0;
  width: 55px;
}
#search-photos .tag {
  background-color: #fff;
  left: 0;
  padding: 0.2em;
  position: relative;
  width: 20px;
  height: 20px;
}
#search-photos #scroll-view {
  height: calc(100vh - 220px);
  overflow-y: auto;
}
#search-photos #scroll-view .vs-thumb-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}
#search-photos #scroll-view .vs-thumb-row .vs-thumb {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px;
  height: 120px;
  position: relative;
}
#search-photos #scroll-view .vs-thumb-row .vs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#search-photos #scroll-view .vs-thumb-row .filename-details {
  width: calc(100% - 4px);
}
#search-photos #scroll-view .vs-thumb-row .scroll-spacer {
  height: 20px;
  width: 100%;
}
#search-photos #scroll-view .vs-thumb-row .favoriteIcon {
  float: left;
  vertical-align: middle;
}
#search-photos #scroll-view .vs-thumb-row .recommendIcon {
  padding: 0;
  float: left;
}
.sub-nav[ng-show="displayPhotosBar"] {
  position: relative;
  top: 0;
}
/*************************************************************
  PHOTO ALBUMS
**************************************************************/
#photo-albums .bc-container {
  width: 100%;
  background-color: #dfdfdf;
  padding: 0;
}
#photo-albums .tagPlaced {
  background-color: #ccc;
  left: 0;
  padding: 0.25em;
  position: relative;
  top: 0;
  width: 55px;
  display: inline;
}
#photo-albums .tag {
  background-color: #ccc;
  left: 0;
  padding: 0.2em;
  position: relative;
  top: 0;
  width: 20px;
  display: inline;
}
#photo-albums {
  margin-top: 20px;
}
#photo-albums .right-section-nav {
  position: relative;
}
#photo-albums .right-section-nav .first-use-popover {
  font-size: 15px;
  left: 200px;
  top: 40px;
  width: 215px;
}
#photo-albums .right-section-nav .first-use-popover.arrow-top:after,
#photo-albums .right-section-nav .first-use-popover.arrow-top:before {
  left: 50px;
}
#photo-albums .thumbnail-sm-container {
  height: 67px;
  margin-bottom: 1em;
}
#photo-albums .student-list-autocomplete .auto_com {
  display: none;
}
#photo-albums .topic-list-autocomplete .auto_com {
  position: absolute;
  bottom: 0.6em;
  right: 1em;
  color: #2093df;
}
#photo-albums .ti-photo-albums {
  position: relative;
}
#photo-albums .ti-photo-albums .first-use-popover {
  font-size: 15px;
  top: 35px;
  width: 225px;
}
#photo-albums .ti-photo-albums .first-use-popover.arrow-bottom:after,
#photo-albums .ti-photo-albums .first-use-popover.arrow-bottom:before {
  left: 50px;
}
#photo-albums textarea {
  height: 4em;
  resize: none;
  width: 100%;
}
#photo-albums #student-tags {
  margin-top: 1em;
}
#photo-albums #search-topics,
#photo-albums #search-students,
#photo-albums #search-albums {
  height: 2em;
  width: 100%;
}
#photo-albums #search-albums {
  margin-top: 2em;
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 14px;
  height: 100%;
  font-weight: 400;
}
#photo-albums #search-albums:focus {
  border-color: #1E93DF;
}
#photo-albums .photo-album-container {
  margin: 0.25em 0 2em 0;
  font-size: 12px;
}
#photo-albums .thumbnail-sm-placeholder {
  float: left;
  height: 53px;
  margin: 0.25em;
  width: 53px;
}
.no-photos-found-text {
  background-color: #ddd;
  width: 100%;
  text-align: center;
}
.no-photos-found-bg {
  background-color: #dfdfdf !important;
  position: relative;
  text-align: center;
}
.no-photos-found-bg .no-data-header {
  top: 48%;
  position: absolute;
  color: #98989b;
  font-size: 18px;
}
.no-photos-found-text > h3 {
  padding-top: 25%;
  color: #999;
}
#recommend-for-spread .modal-header {
  font-size: 24px;
  padding-bottom: 0;
}
#recommend-for-spread .number-of-photos {
  margin-top: -15px;
  padding-bottom: 25px;
  font-size: 18px;
}
.recommendedTable {
  width: 100%;
}
.recommendedTable .active {
  background-color: #a9d6f3 !important;
}
.recommendedTable tr:nth-child(even) {
  background-color: #efefef;
}
.recommendedTable tr td {
  padding: 4px;
  font-size: 12px;
}
.recommendedTable tr td span {
  font-size: 12px;
}
.recommendedTable tr td:nth-child(2) {
  width: 0;
  font-weight: bold;
  font-size: 15px;
}
.recommendedTable tr td:nth-child(5) {
  width: 0;
  text-align: right;
  font-weight: bold;
  font-size: 15px;
}
.recommendedTable tr td:first-child {
  width: 15%;
  background-color: #fff !important;
}
.recommendedTable tr td:last-child {
  width: 17%;
  background-color: #fff !important;
}
.recommendedTable tr:nth-of-type(8n+9) td:nth-child(3) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
.recommendedTable tr:nth-of-type(8n+9) td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 0;
  width: 0;
}
.recommendedTable tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #98989b;
}
.recommendedTable tr:nth-of-type(8n+9) td:nth-child(4),
.recommendedTable tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
}
.recommendedTable .base-on {
  color: #585665;
  font-size: 12px;
}
#recommend-to-staff .modal-header {
  font-size: 24px;
}
#coverage .dropdown-menu {
  max-height: 17em;
  overflow: scroll;
  overflow-x: hidden;
}
#coverage .clear-button {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  position: absolute;
  right: 0px;
  z-index: 100;
}
#coverage #color-dropdown-menu {
  width: 100%;
}
.centered-modal .modal-dialog {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: -webkit-fill-available;
  margin: 0 auto !important;
}
/*************************************************************

Adding to predefined base elements, everything underneath
"Online Design" tab.  Student horizontal navigation, calendar,
to dos, spreads table.

**************************************************************/
.dcpm-modal-titles {
  font-size: 24px;
  color: #585665;
  padding-bottom: 10px;
}
.dcpm-modal-med-titles {
  font-size: 18px;
  color: #585665;
}
.dcpm-modal-sm {
  font-size: 15px;
  color: #585665;
}
.dcpm-footer-spacing {
  padding: 0 15px 15px 0;
}
.dcpm-close {
  position: absolute;
  top: 0;
  right: 5px;
}
.dcpm-body {
  position: relative !important;
  padding-top: 8px;
}
.od-portraits-header {
  top: 0px;
  position: relative;
}
#upload-process-container table {
  width: 100%;
}
#upload-process-container table tr:nth-child(odd) {
  background-color: #efefef;
}
#upload-process-container table tr td {
  font-size: 12px;
  padding: 4px;
  position: relative;
}
#upload-process-container table tr td:first-child,
#upload-process-container table tr td:nth-child(2) {
  min-width: 97px;
  max-width: 97px;
  width: 97px;
  padding: 4px;
}
#upload-process-container table tr td:nth-child(3) {
  width: 100%;
}
#upload-process-container table tr td:last-child {
  padding: 0;
  margin: 0;
  min-width: 100px;
  max-width: 100px;
  width: 100px;
}
#upload-process-container table tr td:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff !important;
}
#upload-process-container table.student-preview-container-table-header tr td:last-child {
  padding: 4px;
}
#upload-process-container .progress-bar-uploader {
  float: left;
  margin: 5px;
  width: 30px;
  height: 30px;
  background-color: #c0c0c0;
}
.student-preview-container-table-header,
.student-preview-container-table {
  width: 100%;
}
.student-preview-container-table-header tr,
.student-preview-container-table tr {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
}
.student-preview-container-table-header tr:nth-child(odd),
.student-preview-container-table tr:nth-child(odd) {
  background-color: #efefef;
}
.student-preview-container-table-header tr td,
.student-preview-container-table tr td {
  flex: 1;
  font-size: 12px;
  padding: 4px;
  color: #585665;
  position: relative;
}
.student-preview-container-table-header tr .headers-bold,
.student-preview-container-table tr .headers-bold {
  color: #585665;
  font-size: 15px;
}
.student-preview-container-table-header tr {
  width: calc(100% - 15px);
}
.student-preview-container-table-header tr:nth-child(odd) {
  background-color: #585665;
}
.student-preview-container-table-header tr td {
  font-size: 15px;
}
#student-preview-container .outter-preview-container {
  width: 100%;
  padding: 0;
  height: 30px;
}
#student-preview-container .outter-preview-container .data-look {
  padding-right: 15px;
  width: 140px;
  float: left;
  text-align: left;
  font-size: 15px;
}
#student-preview-container .outter-preview-container .cancel-help {
  float: left;
  text-align: left;
  font-size: 15px;
  width: 140px;
  color: #1E93DF;
}
#student-preview-container .outter-preview-container .proceed-upload {
  width: 200px;
  text-align: right;
  float: right;
}
.headers-bold {
  font-size: 15px !important;
  background-color: #fff;
}
.st-table-header td {
  padding: 4px;
}
.st-table-header td:first-child {
  width: 15%;
}
.st-table-header td:nth-child(2) {
  width: 12%;
}
.st-table-header td:nth-child(3) {
  width: 24%;
}
.st-table-header td:nth-child(4) {
  width: 15%;
}
.st-table-header td:nth-child(5),
.st-table-header td:nth-child(6),
.st-table-header td:last-child {
  width: 12%;
}
#flow-portraits .page-title {
  font-size: 24px;
  color: #585665;
  padding-top: 15px;
  padding-bottom: 15px;
}
#flow-portraits .based_on_list {
  overflow-y: auto;
  max-height: 330px;
}
#pf-portraits-container {
  margin-right: 1em;
}
#pf-container .pf {
  border-bottom: 3px solid #DFDFDF;
  border-left: 3px solid #DFDFDF;
  border-right: 3px solid #DFDFDF;
  padding: 0.75em;
}
.pf h4 {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 355px;
}
.portraits img {
  float: left;
  height: 75px;
  margin-right: 3px;
  width: 75px;
}
.pf-tasks {
  margin-top: 0.5em;
}
.pf-tasks a {
  margin-right: 1em;
}
#no-portraits-allowed {
  color: #98989B;
  margin-top: 50%;
  text-align: center;
}
#page-selector-modal .page-title {
  font-size: 24px;
  color: #585665;
}
#page-selector-modal .flow-portraits-left {
  color: #585665;
  font-size: 15px;
}
#page-selector-modal .flow-portraits-left .options-dropdown {
  white-space: nowrap;
}
/*************************************************************
  SPREADS VIEW (LADDER -> SUBMIT SPREADS SUB-TAB)
**************************************************************/
.flowIndexTable {
  table-layout: fixed;
  width: 100% !important;
  padding: 0;
  margin: 0 !important;
}
.flowIndexTable tr {
  max-height: 50px;
  vertical-align: bottom;
}
.flowIndexTable tr:nth-child(even) {
  background-color: #efefef !important;
}
.flowIndexTable tr td {
  padding: 3px 6px 3px 6px !important;
  overflow: hidden;
}
.flowIndexTable tr td:first-child {
  width: 15px;
  padding: 0;
  background: linear-gradient(to left, #cccccc, rgba(0, 0, 0, 0));
  background-color: white;
  border-bottom: 0;
}
.flowIndexTable tr td:nth-child(2) {
  width: 6%;
  padding: 0 !important;
  border-bottom: 1px #c4c4cc solid;
  border-right: 1px #c4c4cc solid;
}
.flowIndexTable tr td:nth-child(2) img {
  max-width: 100%;
  height: auto;
  padding: 0;
}
.flowIndexTable tr td:nth-child(3) {
  width: 32px;
  font-size: 15px;
  color: #585665;
  position: relative;
}
.flowIndexTable tr td:nth-child(4) {
  width: 24%;
  font-size: 12px;
  color: #585665;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.flowIndexTable tr td:nth-child(4):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
.flowIndexTable tr td:nth-child(5) {
  width: 24%;
  font-size: 12px;
  color: #585665;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px !important;
}
.flowIndexTable tr td:nth-child(6) {
  /*width: 0;*/
  font-size: 15px;
  color: #585665;
  text-align: right;
  position: relative;
}
.flowIndexTable tr td:nth-child(6):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff;
}
.flowIndexTable tr td:nth-child(7) {
  width: 11%;
  font-size: 12px;
  color: #585665;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.flowIndexTable tr td:nth-child(7):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff;
}
.flowIndexTable tr td:nth-child(8) {
  width: 11%;
  font-size: 12px;
  color: #585665;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.flowIndexTable tr td:nth-child(8):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff;
}
.flowIndexTable tr td:nth-child(9) {
  width: 14%;
  font-size: 12px;
  color: #585665;
  text-align: center;
  white-space: nowrap;
}
.flowIndexHeader {
  width: 100% !important;
  padding: 0;
  margin: 0 !important;
}
.flowIndexHeader tr {
  height: 50px;
  vertical-align: bottom;
}
.flowIndexHeader tr:nth-child(even) {
  background-color: #efefef !important;
}
.flowIndexHeader tr td {
  padding: 0px 6px 0px 6px !important;
  overflow: hidden;
}
.flowIndexHeader tr td:first-child {
  width: 15px !important;
  padding: 0;
  border-bottom: 0;
}
.flowIndexHeader tr td:nth-child(2) {
  width: 6%;
  padding: 0 !important;
}
.flowIndexHeader tr td:nth-child(3) {
  width: 0;
  font-size: 15px;
  color: #585665;
  position: relative;
}
.flowIndexHeader tr td:nth-child(4) {
  width: 24%;
  font-size: 12px;
  color: #585665;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flowIndexHeader tr td:nth-child(5) {
  width: 24%;
  font-size: 12px;
  color: #585665;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px !important;
}
.flowIndexHeader tr td:nth-child(6) {
  width: 0;
  font-size: 15px;
  color: #585665;
  text-align: right;
}
.flowIndexHeader tr td:nth-child(7) {
  width: 11%;
  font-size: 12px;
  color: #585665;
  text-align: center;
  white-space: nowrap;
}
.flowIndexHeader tr td:nth-child(8) {
  width: 11%;
  font-size: 12px;
  color: #585665;
  text-align: center;
  white-space: nowrap;
}
.flowIndexHeader tr td:nth-child(9) {
  width: 14%;
  font-size: 12px;
  color: #585665;
  text-align: center;
  white-space: nowrap;
}
/*************************************************************
  SPREADS VIEW (PORTRAITS -> FLOW INDEX SUB-TAB)
**************************************************************/
/*************************************************************
  STUDENTS AND ORGANIZATIONS
**************************************************************/
#students,
#organizations {
  margin-left: 30px;
}
#students .table:not(.edit-any) > tbody > tr:hover,
#organizations .table:not(.edit-any) > tbody > tr:hover,
#students .table:not(.edit-any) > tbody > tr > td:hover,
#organizations .table:not(.edit-any) > tbody > tr > td:hover,
#students .table:not(.edit-any) > div:hover,
#organizations .table:not(.edit-any) > div:hover,
#students .table:not(.edit-any) > li:hover,
#organizations .table:not(.edit-any) > li:hover {
  background-color: #d6ebf9;
}
#students .table:not(.edit-any) .active,
#organizations .table:not(.edit-any) .active {
  background-color: #a9d6f3 !important;
}
#students .table:not(.edit-any) .active:hover,
#organizations .table:not(.edit-any) .active:hover {
  background-color: #b6dcf5 !important;
}
#students .table:not(.edit-any) .active:hover > td,
#organizations .table:not(.edit-any) .active:hover > td {
  background-color: transparent;
}
#students .table:not(.edit-any) .active > td,
#organizations .table:not(.edit-any) .active > td {
  background-color: transparent;
}
#students .table .fill-cell,
#organizations .table .fill-cell {
  display: block;
}
#students .table .fill-cell a,
#organizations .table .fill-cell a {
  display: block;
  min-height: 20px;
}
#students .table .fill-cell input,
#organizations .table .fill-cell input {
  width: 90%;
}
#students #alphabet,
#organizations #alphabet {
  list-style: none;
  padding: 0;
}
#students #alphabet li,
#organizations #alphabet li {
  float: left;
  height: 25px;
  text-align: center;
  width: 25px;
}
#students .thumbsMuted,
#organizations .thumbsMuted {
  opacity: 0.4;
}
#students .dropdown-menu {
  max-height: 19em !important;
  overflow-y: auto;
  overflow-x: hidden;
}
.noStudentsPopover {
  top: 340px;
  left: 275px;
}
@media (max-width: 1199px) {
  .noStudentsPopover {
    top: 300px;
    left: 175px;
  }
}
@media (max-width: 991px) {
  .noStudentsPopover {
    top: 255px;
    left: 70px;
  }
}
@media (max-width: 768px) {
  .noStudentsPopover {
    top: 227px;
    left: 3px;
  }
}
.fill-cell {
  position: relative;
}
.panel.cell-editing {
  border-radius: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  height: 23px;
  position: absolute;
  right: -131px;
  top: 0;
  z-index: 99;
}
.panel.cell-editing .panel-body {
  color: red;
  line-height: 23px;
  padding: 0 15px;
}
.panel.cell-editing.selectize {
  height: 36px;
  right: -155px;
}
.panel.cell-editing.selectize .panel-body {
  line-height: 36px;
}
.student-table-wrapper table {
  max-width: 1333px;
  table-layout: fixed;
}
.student-table-wrapper table th,
.student-table-wrapper table td {
  border-bottom: none !important;
  border-left: none !important;
  border-top: none !important;
}
.student-table-wrapper table th:not(:last-child),
.student-table-wrapper table td:not(:last-child) {
  border-right: 2px solid #fff;
}
.student-table-wrapper table td:not(.indexed-on-col) {
  overflow: hidden;
  padding: 0 8px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-table-wrapper table td ul {
  margin: 0 !important;
}
.last-name-col-header {
  font-size: 12px;
  padding-left: 35px !important;
}
.portrait-col {
  max-width: 25px !important;
  margin-left: -5px;
  margin-right: 5px;
}
.last-name-col {
  max-width: 15%;
}
.first-name-col,
.category-col {
  max-width: 12%;
}
.indexed-on-col {
  max-width: 24%;
  overflow: hidden;
  padding: 0 5px !important;
  white-space: nowrap;
}
.indexed-on-col a {
  margin-left: 5px;
}
/*************************************************************
  STUDENTS PAGE
**************************************************************/
#students .students-header {
  width: 100%;
}
#students .students-header td {
  font-size: 15px;
  color: #1E93DF;
  display: inline-block;
  padding: 0;
  margin: 0;
}
#students .students-header a {
  color: #1E93DF;
}
#students .student-hidden-col-header {
  width: 100%;
}
#students .student-hidden-col-header td {
  font-size: 15px;
  color: #1E93DF;
  display: inline-block;
  padding: 0;
  margin: 0;
}
#students .student-hidden-col-header a {
  color: #1E93DF;
}
#students .students-table tr {
  padding: 0;
  font-size: 12px;
  height: 25px;
}
#students .students-table tr:hover {
  background-color: #d6ebf9 !important;
}
#students .students-table tr:nth-child(even) {
  background-color: #efefef;
}
#students .students-table tr td {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 8px;
  padding-bottom: 0;
  white-space: nowrap;
  position: relative;
}
#students .students-table tr td:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff !important;
}
#students .students-table tr td:first-child {
  padding: 0;
}
#students .students-table ul {
  margin: 0;
}
#students .students-table .active {
  background-color: #a9d6f3 !important;
}
#students .active_dup {
  background-color: #a9d6f3 !important;
}
@media (min-width: 1200px) {
  #students .hide-title {
    display: inline-block;
  }
  #students .students-header td:first-child {
    padding: 0;
    width: 15%;
  }
  #students .students-header td:nth-child(2) {
    width: 12%;
  }
  #students .students-header td:nth-child(3) {
    width: 24%;
  }
  #students .students-header td:nth-child(4) {
    width: 15%;
  }
  #students .students-header td:nth-child(5) {
    width: 12%;
  }
  #students .students-header td:nth-child(6) {
    width: 12%;
  }
  #students .students-header td:last-child {
    width: 8%;
  }
  #students .student-hidden-col-header td:first-child {
    padding: 0;
    width: 24%;
  }
  #students .student-hidden-col-header td:nth-child(2) {
    width: 19%;
  }
  #students .student-hidden-col-header td:nth-child(3) {
    width: 19%;
  }
  #students .student-hidden-col-header td:nth-child(4) {
    width: 15%;
  }
  #students .student-hidden-col-header td:nth-child(5) {
    width: 19%;
  }
  #students .student-hidden-col-header td:nth-child(6) {
    width: 19%;
  }
  #students .student-hidden-col-header td:last-child {
    width: 10%;
  }
}
@media (max-width: 1290px) {
  #students .students-list-header td:nth-child(6) {
    width: 90px !important;
  }
  #students .students-list-header td:nth-child(8) {
    width: 90px !important;
  }
  #students .students-table tr td:nth-child(6) {
    width: 90px !important;
  }
  #students .students-table tr td:nth-child(8) {
    width: 90px !important;
  }
}
@media (max-width: 1199px) {
  #students .students-table td:first-child,
  #students .students-header td:first-child {
    padding: 0;
    width: 18%;
  }
  #students .students-table td:nth-child(2),
  #students .students-header td:nth-child(2) {
    width: 14%;
  }
  #students .students-table td:nth-child(3),
  #students .students-header td:nth-child(3) {
    width: 23%;
  }
  #students .students-table td:nth-child(4),
  #students .students-header td:nth-child(4) {
    width: 130px;
  }
  #students .students-table td:nth-child(5),
  #students .students-header td:nth-child(5) {
    width: 12%;
  }
  #students .students-table td:nth-child(6),
  #students .students-header td:nth-child(6) {
    width: 12%;
  }
  #students .students-table td:last-child,
  #students .students-header td:last-child {
    width: 12%;
  }
  #students #right-nav-content {
    top: 25px;
  }
  #students .hide-title,
  #students .hide-column {
    display: none;
  }
  #students .student-list-table-header {
    width: 75.333333% !important;
  }
  #students .right-nav {
    width: 24.666667%;
  }
  #students .student-hidden-col-header td:first-child {
    padding: 0;
    width: 26%;
  }
  #students .student-hidden-col-header td:nth-child(2) {
    width: 19%;
  }
  #students .student-hidden-col-header td:nth-child(3) {
    width: 19%;
  }
  #students .student-hidden-col-header td:nth-child(4) {
    width: 15%;
  }
  #students .student-hidden-col-header td:nth-child(5) {
    width: 19%;
  }
  #students .student-hidden-col-header td:nth-child(6) {
    width: 19%;
  }
  #students .student-hidden-col-header td:last-child {
    width: 15%;
  }
}
/*************************************************************
  STUDENT (MODAL)
**************************************************************/
.student-modal .primary-banner {
  display: inline-block;
  background: #1E93DF;
  color: #fff;
  font-weight: lighter;
  padding: 2px 5px;
  letter-spacing: 0.15em;
  font-size: 15px;
  position: absolute;
  left: 0;
}
.student-modal .primary-photo {
  background-position: center top;
  background-size: cover;
  display: inline-block;
  min-width: 100%;
  min-height: 200px;
  margin: auto;
  position: relative;
}
.student-modal .photo-choices {
  height: 128px;
  background: #ccc;
  overflow-x: auto;
  padding: 5px;
  width: 460px;
}
.student-modal .photo-choices ul {
  float: left;
  height: 90px;
  margin-right: -999em;
}
.student-modal .photo-choices ul li {
  display: inline-block;
}
.student-modal .photo-choices ul li.is-primary {
  cursor: default;
}
.student-modal .photo-choices ul li.is-primary > div .primary-banner {
  font-size: 12px;
  display: inline-block;
}
.student-modal .photo-choices ul li.is-selected {
  outline: 2px solid #2093df;
}
.student-modal .photo-choices ul li + li {
  margin-left: 5px;
}
.student-modal .photo-choices ul li > div {
  background-position: center top;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  min-width: 25px;
  min-height: 25px;
  min-height: 100px;
  min-width: 75px;
  position: relative;
}
.student-modal .photo-choices ul li > div .primary-banner {
  display: none;
}
.student-modal .light-side .col-xs-12 {
  text-align: right;
}
.student-modal .light-side .col-xs-12 .primary-photo {
  min-width: 50%;
}
.student-modal form > .row {
  margin-top: 3px;
}
.student-modal form > .row > section:first-of-type {
  text-align: right;
}
.student-modal .non-edit-mode {
  display: table;
  width: 100%;
}
.student-modal .non-edit-mode > .row.navigation {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 20px;
  left: 20px;
}
.student-modal .non-edit-mode > .row:not(.navigation) {
  display: table-row;
}
.student-modal .non-edit-mode > .row:not(.navigation) > section {
  display: table-cell;
  height: 450px;
}
.student-modal .non-edit-mode > .row:not(.navigation) > section.dark-side {
  background: #ddd;
  border-left: 10px solid #ccc;
}
.student-modal .non-edit-mode > .row:not(.navigation) > section.dark-side .photos-list li {
  background-position: center top;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  min-width: 25px;
  min-height: 25px;
  min-width: 100px;
  min-height: 100px;
  margin: 2px 3px;
}
/****************************************************************
  Student Preview modal
**************************************************************/
#student-preview-container .students-table tr {
  padding: 0;
  font-size: 12px;
  height: 25px;
}
#student-preview-container .students-table tr:nth-child(even) {
  background-color: #efefef;
}
#student-preview-container .students-table tr td {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  position: relative;
}
#student-preview-container .students-table tr td:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff !important;
}
#student-preview-container .students-table tr td:first-child {
  padding: 0;
}
/**************************
STUDENT FLYOUTS
***************************/
.st-edit-open {
  box-shadow: -3px 0 4px 1px rgba(0, 0, 0, 0.2);
  float: right;
  width: 32%;
}
/*************************************************************
  ORGANIZATIONS
**************************************************************/
#organizations .edit-all {
  padding-right: 0;
}
#organizations .number-orgs {
  padding-top: 15px;
  color: #585665;
  padding-left: 15px;
}
#organizations .number-orgs span:first-child {
  font-size: 24px;
}
#organizations .number-orgs span:last-child {
  font-size: 12px;
}
#organizations table {
  font-size: 12px;
  color: #585665;
}
#organizations table tbody tr {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 0;
  padding-bottom: 0;
}
#organizations table tbody tr:nth-child(even) {
  background-color: #efefef;
}
#organizations table .th-bg {
  background-color: #fff;
  font-size: 15px;
}
@media (max-width: 1199px) {
  #organizations td:nth-child(1) {
    width: 23%;
    border-right: 3px solid white;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #organizations td:nth-child(2) {
    width: 22%;
    border-right: 3px solid white;
  }
  #organizations td:nth-child(3) {
    width: 15%;
    border-right: 3px solid white;
  }
  #organizations td:nth-child(4) {
    width: 15%;
    border-right: 3px solid white;
  }
}
@media (min-width: 1200px) {
  #organizations td:nth-child(1) {
    width: 33%;
    border-right: 3px solid white;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #organizations td:nth-child(2) {
    width: 26%;
    border-right: 3px solid white;
  }
  #organizations td:nth-child(3) {
    width: 10%;
    border-right: 3px solid white;
  }
  #organizations td:nth-child(4) {
    width: 10%;
    border-right: 3px solid white;
  }
}
#organizations .org-edit-open {
  box-shadow: -10px 1px 10px #ccc;
  left-margin: 0px;
  left-padding: 0px;
}
/*************************************************************
  PORTRAITS
**************************************************************/
.sub-nav[ng-show="displayPortraitsBar"] {
  position: relative;
  top: 0;
  margin-top: 0px;
  border-top: 0px;
}
#portraits #alphabet {
  list-style: none;
  padding: 0;
}
#portraits #alphabet li {
  float: left;
  height: 22px;
  text-align: center;
  width: 22px;
}
#portraits .thumbnail-sm-container {
  background-color: #fff;
  padding: 0;
  margin: 0;
}
#portraits .thumbnail-sm-container:hover {
  padding: 0;
  margin: 0;
}
#portraits .thumbnail-sm-container-blank {
  background-color: #dfdfdf;
}
#portraits .student-box {
  background-size: cover;
  background-color: purple;
  float: left;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
  border-bottom: 8px solid #fff;
  padding: 0;
  margin: 0;
  position: relative;
}
@media (min-width: 1200px) {
  #portraits .student-box {
    width: 14.18%;
    height: 165px;
  }
}
@media (max-width: 1199px) {
  #portraits .student-box {
    width: 19.7%;
    height: 151px;
  }
}
#portraits .thumbnail-sm-count,
#portraits .thumbnail-sm-name {
  background-color: #fff;
  height: 25px;
  line-height: 25px;
  opacity: 0.8;
  position: absolute;
}
#portraits .thumbnail-sm-count {
  text-align: center;
  top: 0;
  width: 25px;
}
#portraits .thumbnail-sm-name {
  bottom: 0;
  padding-left: 5px;
  width: 100%;
}
#portraits label {
  font-weight: normal;
}
#portraits #portrait-count li {
  margin-left: 20px;
}
#portraits #taggenius-status li {
  margin-left: 20px;
}
/*************************************************************
  FLOW INDEX TAB (Preston's) - Need to reformat LESS like
**************************************************************/
#flow-index .navbar {
  margin-bottom: 0;
}
.spreads-table .spread-preview-image {
  width: 120px;
}
.spreads-table.table-striped > tbody > tr:nth-child(even) {
  background: #f5f5f5;
}
.spreads-table.table-striped > tbody > tr:nth-child(odd) {
  background: #fff;
}
.spreads-table.table-striped > tbody > tr > td.spread-page.left-page {
  border-left: none;
  border-right: 1px solid #ccc;
}
.spreads-table.table-striped > tbody > tr > td.spread-page {
  border-left: 1px solid #ccc;
}
.spreads-table.table th {
  border-bottom: none !important;
  font-weight: normal;
}
.spreads-table.table td,
.page-select.table td {
  border-top: none;
}
.signatures-3 > tbody > tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #555;
  border-right: 1px solid #555 !important;
}
.signatures-3 > tbody > tr:nth-of-type(8n+9) td:nth-child(3) {
  border-top: 1px solid #555;
}
.signatures-3 > tbody > tr:hover,
.signatures-2 > tbody > tr > td:hover,
.signatures-3 > div:hover,
.signatures-2 > li:hover {
  background-color: #d6ebf9;
  cursor: pointer;
}
.flow-index .btn {
  margin: 25px 0 0 20px;
}
.flow-index .fa-check-circle {
  font-size: 32px;
}
.flow-index .warning {
  color: #cc0000;
}
.flow-index a.warning:hover {
  color: #990000;
}
#flow-and-review-modal .modal-body .col-lg-7 {
  position: relative;
}
#flow-and-review-modal .modal-body .col-lg-7 .first-use-popover.adjust-style {
  font-size: 15px;
  left: -330px;
  top: 60px;
  width: 330px;
}
#flow-and-review-modal .modal-body .col-lg-7 .first-use-popover.knock-outs {
  font-size: 15px;
  left: 175px;
  top: 240px;
  width: 310px;
}
#flow-and-review-modal .modal-body .col-lg-7 .first-use-popover.knock-outs.arrow-bottom:after,
#flow-and-review-modal .modal-body .col-lg-7 .first-use-popover.knock-outs.arrow-bottom:before {
  left: 260px;
}
/*************************************************************
  FLOW PORTRAITS
**************************************************************/
#pf-settings-modal {
  /*.modal-right {
    width:582px;
    background-color:yellow !important;
  }*/
}
#pf-settings-modal input[type="text"] {
  width: 30px;
  display: block;
}
#pf-settings-modal .responsive-styling,
#pf-settings-modal label {
  font-size: 12px;
  color: #585665;
  padding-top: 5px;
  padding-bottom: 0;
}
#pf-settings-modal .switch-manual {
  font-size: 12px;
}
#pf-settings-modal .manual {
  font-size: 12px;
}
#pf-settings-modal .setting-headers {
  font-size: 12px;
  color: #585665;
  margin-right: 5px;
  text-align: left;
}
#pf-settings-modal .setting-headers-center {
  font-size: 12px;
  color: #585665;
  margin-right: 5px;
  text-align: center;
}
#pf-settings-modal .setting-headers-xl {
  font-size: 36px;
  color: #1E93DF;
}
#pf-settings-modal .heading-xs {
  font-size: 12px;
}
#pf-settings-modal .heading-sm {
  font-size: 15px;
}
#pf-settings-modal .arrow-right {
  font-size: 34px;
  margin-top: 23px;
  z-index: 0;
  color: #1E93DF;
}
#pf-settings-modal .on-pages {
  height: 34px;
  line-height: 34px;
  margin-left: 10px;
}
#pf-settings-modal .heading-right-block {
  height: 34px;
  line-height: 34px;
  width: 570px;
}
#pf-settings-modal .heading-adjust-spacing {
  vertical-align: bottom;
  padding-left: 15px;
}
#pf-settings-modal .heading-title {
  width: 450px;
  position: relative;
}
#pf-settings-modal .heading-pages {
  position: absolute;
  bottom: 3px;
  left: 180px;
}
#pf-settings-modal .heading-knockouts {
  position: absolute;
  left: 400px;
  bottom: 5px;
}
#pf-settings-modal .heading-apply {
  position: absolute;
  bottom: 0px;
  left: 750px;
}
#pf-settings-modal .modal-header {
  border-bottom: 0;
  padding-bottom: 0;
  position: relative;
  margin: 0 auto;
  padding: 5px !important;
}
#pf-settings-modal .modal-body {
  padding: 2px !important;
}
#pf-settings-modal .modal-footer {
  padding: 0 !important;
}
#pf-settings-modal .modal-left {
  width: 380px;
}
#settings-modal {
  /*.preview-panel-container {
    position: relative;
    width:800px;
    .first-use-popover {
      &.adjust-style {
        font-size: 15px;
        left: -345px;
        top: -395px;
        width: 330px;
      }
      &.knock-outs {
        font-size: 15px;
        left: 160px;
        top: -250px;
        width: 380px;
        &.arrow-bottom:after, &.arrow-bottom:before {
          left: 330px;
        }
      }
    }
  }*/
}
#settings-modal input[type="text"] {
  width: 30px;
  display: block;
}
#settings-modal .dropdown-menu {
  min-width: auto;
  font-size: 18px;
}
#settings-modal .row-col-num {
  color: #1E93DF;
  font-size: 18px;
}
#settings-modal .row-col-display {
  color: #1E93DF;
  font-size: 24px;
}
#settings-modal .row-spacing {
  position: relative;
}
#settings-modal .row-spacing .first-use-popover {
  font-size: 15px;
  left: 100px;
  top: -25px;
  width: 235px;
}
#settings-modal input.error {
  border: 1px solid #cc0000;
}
#settings-modal #portrait-btn-group .btn {
  background-color: #fff;
  border: 2px solid transparent;
  margin: 0 3px;
  padding: 0;
}
#settings-modal #portrait-btn-group .btn.active {
  border: 2px solid #2093df;
}
#settings-modal #text-style-btn-group .btn {
  background-color: #fff;
  border: 2px solid transparent;
  box-shadow: none !important;
}
#settings-modal #text-style-btn-group .btn.active {
  border: 2px solid #2093df;
  box-shadow: none;
  -webkit-box-shadow: none;
}
#settings-modal #text-style-btn-group .btn:hover + .btn {
  margin-left: 0;
}
#settings-modal #text-style-btn-group > .btn:hover {
  z-index: 0;
}
#settings-modal .preview-page-meta {
  background-color: #c4c4cc;
  min-height: 40px;
  padding: 0.5em;
}
#settings-modal #preview {
  height: 425px !important;
}
#settings-modal #preview .preview-page {
  min-height: auto;
  width: 50%;
}
#settings-modal .preview-page .page-left .page-number {
  margin-right: 0.5em;
}
#settings-modal .preview-panel {
  cursor: pointer;
}
#settings-modal .knockout {
  opacity: 0.5 !important;
}
#settings-modal .preview-name {
  background: #ccc;
}
#settings-modal #page-slider {
  float: left;
  height: 122px;
  overflow: auto;
  width: 600px;
}
#settings-modal #page-slider .preview-page {
  height: 74px;
  width: 52px;
}
#settings-modal #page-slider .preview-page.page-left {
  width: 53px;
}
#settings-modal #page-slider .page-number {
  font-size: 15px;
  font-weight: normal;
}
#settings-modal #page-slider .preview-spread.selected {
  background-color: #a7d4f1;
}
#settings-modal #preview-slider-container {
  float: left;
  margin-right: -999em;
}
#settings-modal .overlay {
  opacity: 0.4;
  background-color: #fff;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 999;
}
#settings-modal .overlay:hover {
  background-color: #fff !important;
  cursor: default;
}
#settings-modal span.warning {
  color: #cc0000;
}
#settings-modal .preview-spread {
  background-color: #ccc;
}
#settings-modal .preview-spread .page-number {
  text-align: center;
  width: 100%;
}
#settings-modal #text-style-btn-group input[type="checkbox"] {
  display: none;
}
#settings-modal #text-style-btn-group input[type="checkbox"] + i {
  visibility: visible;
}
/*************************************************************
  FLOW PORTRAITS TAB
**************************************************************/
#flow-portraits .fp-title {
  color: #585665;
  font-size: 18px;
}
#flow-portraits .fp-summary {
  color: #585665;
  font-size: 12px;
}
#flow-portraits .fp-summary .fp-muted {
  color: #98989b;
}
/*************************************************************
  FLOW PORTRAITS TAB - ADD PAGES
**************************************************************/
#page-selector-table {
  width: 100%;
}
#page-selector-table .active {
  background-color: #a9d6f3 !important;
  position: relative;
}
#page-selector-table tr:nth-child(even) {
  background-color: #efefef;
}
#page-selector-table tr td {
  padding: 4px !important;
  font-size: 12px;
  line-height: 1em !important;
  height: 34px !important;
  max-height: 34px !important;
  min-height: 34px !important;
}
#page-selector-table tr td span {
  font-size: 12px;
}
#page-selector-table tr td:first-child {
  min-width: 15%;
  width: 15%;
  background-color: #fff !important;
}
#page-selector-table tr td:first-child div {
  width: 80px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
#page-selector-table tr td:nth-child(2) {
  min-width: 155px;
  max-width: 155px;
  width: 155px;
}
#page-selector-table tr td:nth-child(2) div:first-child {
  width: 30px;
  font-weight: bold;
  font-size: 15px;
  float: left;
}
#page-selector-table tr td:nth-child(2) div:last-child {
  width: calc(100% - 30px);
  font-size: 12px;
  float: left;
  padding-top: 3px;
  overflow: hidden;
  white-space: nowrap;
}
#page-selector-table tr td:nth-child(3) {
  min-width: 155px;
  max-width: 155px;
  width: 155px;
  float: left;
}
#page-selector-table tr td:nth-child(3) div:last-child {
  width: calc(100% - 30px);
  min-width: calc(100% - 30px);
  font-size: 12px;
  float: right;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  padding-top: 7px;
  padding-bottom: 4px;
}
#page-selector-table tr td:nth-child(3) div:first-child {
  min-width: 30px;
  font-weight: bold;
  font-size: 15px;
  float: right;
  text-align: right;
  padding-top: 7px;
  padding-bottom: 4px;
}
#page-selector-table tr td:last-child {
  min-width: 17%;
  width: 17%;
  background-color: #fff !important;
}
#page-selector-table tr td:last-child div {
  width: 80px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
#page-selector-table tr:nth-of-type(8n+9) td:nth-child(2) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#page-selector-table tr:nth-of-type(8n+9) td:nth-child(2):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 0;
  width: 0;
}
#page-selector-table tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #98989b;
}
#page-selector-table tr:nth-of-type(8n+9) td:nth-child(3),
#page-selector-table tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
}
#page-selector-table .base-on {
  color: #585665;
  font-size: 12px;
}
/*************************************************************
  Delete Portrait Modal
**************************************************************/
#delete-portrait-modal {
  position: relative !important;
}
#delete-portrait-modal .modal-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#delete-portrait-modal .modal-content {
  position: relative !important;
  min-height: 200px !important;
  height: 100%;
}
#delete-portrait-modal .modal-footer {
  position: static !important;
  padding: 10px 15px !important;
  margin: 0 !important;
  background: white !important;
  border-top: 1px solid #e5e5e5 !important;
}
#delete-portrait-modal .modal-footer .btn {
  margin-left: 10px !important;
}
/*************************************************************
  Delete Student Modal
**************************************************************/
#delete-student-modal {
  position: relative !important;
}
#delete-student-modal .modal-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#delete-student-modal .modal-content {
  position: relative !important;
  min-height: 200px !important;
  height: 100%;
}
#delete-student-modal .modal-footer {
  position: static !important;
  padding: 10px 15px !important;
  margin: 0 !important;
  background: white !important;
  border-top: 1px solid #e5e5e5 !important;
}
#delete-student-modal .modal-footer .btn {
  margin-left: 10px !important;
}
/*************************************************************

  DESCRIPTION OF FILE: Adding to predefined base elements,
  everything underneath "Sales" tab.  Student
  horizontal navigation, calendar, to dos, spreads table.

**************************************************************/
/*************************************************************
  SALES / SUMMARY VIEW (HOMEPAGE SECTION)
**************************************************************/
#od-sales-summary-header {
  padding-top: 50px;
  margin-left: 15px;
  margin-right: 15px;
  width: 950px;
  height: 90px;
}
#od-sales-summary {
  border: 3px solid #dfdfdf;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;
  width: 950px;
}
#od-sales-summary .summary-table {
  width: 905px;
  float: left;
}
.summary-filters {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: white;
  height: 40px;
}
.summary-filters div {
  float: left;
  font-size: 15px;
  vertical-align: text-bottom;
}
.summary-filters div:first-child {
  padding-right: 4px;
}
.summary-filters div:nth-child(2) {
  color: #2093df;
  padding-right: 8px;
  vertical-align: bottom;
}
.summary-filters div:nth-child(4) {
  padding-left: 8px;
}
.summary-filters div:nth-child(5) {
  float: right;
  background-color: #2093df;
  color: #c4c4cc;
  font-size: 15px;
  padding: 4px 15px;
}
.summary-filters div:last-child {
  float: right;
  padding-right: 15px;
  color: #2093df;
}
.summary-sales {
  border-bottom: 2px solid #dfdfdf;
  padding: 8px;
  width: 905px;
}
.summary-header {
  color: #585665;
  font-size: 36px;
  line-height: 1;
  padding-top: 8px;
}
.summary-header-date {
  color: #98989b;
  font-size: 12px;
  line-height: 1;
}
.summary-sold {
  background-color: red;
}
.summary-header-block-set-goal {
  color: #585665;
  background-color: white;
  width: 100%;
  height: 70px !important;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.summary-header-block-set-goal .header-name {
  float: left;
  position: relative;
  top: 8px;
  font-size: 30px;
}
.summary-header-block-set-goal .header-name span {
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
}
.summary-header-block-set-goal .header-name span .full {
  font-size: 15px;
}
.summary-header-block-set-goal .header-detail {
  float: left;
  text-align: right;
  position: relative;
  top: 26px;
}
.summary-header-block-set-goal .header-summary {
  float: right;
  font-size: 36px;
  font-weight: bold;
  color: #c4c4cc;
  position: relative;
  top: 5px;
}
.summary-header-block-made-goal {
  color: white;
  background-color: #B2D67D;
  width: 100%;
  height: 70px !important;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.summary-header-block-made-goal .header-name {
  float: left;
  font-size: 30px;
  position: relative;
  top: 8px;
}
.summary-header-block-made-goal .header-name span {
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
}
.summary-header-block-made-goal .header-name span .full {
  color: white;
  font-size: 15px;
}
.summary-header-block-made-goal .header-detail {
  float: left;
  text-align: right;
  position: relative;
  top: 25px;
}
.summary-header-block-made-goal .header-detail div {
  position: absolute;
  top: 21px;
  width: 100px;
  text-align: left;
}
.summary-header-block-made-goal .header-summary {
  float: right;
  font-size: 36px;
  font-weight: bold;
  position: relative;
  top: 5px;
}
.summary-header-block-edit-goal {
  color: #585665;
  background-color: white;
  width: 100%;
  height: 70px !important;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.summary-header-block-edit-goal .header-name {
  float: left;
  color: #585665;
  font-size: 30px;
}
.summary-header-block-edit-goal .header-name span {
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
}
.summary-header-block-edit-goal .header-name span .full {
  color: white;
  font-size: 15px;
}
.summary-header-block-edit-goal .header-detail {
  float: left;
  text-align: right;
}
.summary-header-block-edit-goal .header-summary {
  float: right;
  font-size: 36px;
  font-weight: bold;
  color: #B2D67D;
  opacity: 0.5;
}
.summary-header-block-edit-goal .header-summary span {
  color: #2093df;
  font-size: 15px;
  font-weight: normal;
  opacity: 1;
}
.sales-progress-bar {
  height: 15px;
  background-color: #B2D67D;
  margin-top: -25px;
}
.options-ads-block {
  width: 100%;
  font-size: 15px !important;
  color: #585665;
}
.options-ads-block td {
  padding-left: 15px;
  padding-right: 15px;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}
.options-ads-block td:first-child {
  width: 210px;
}
.options-ads-block td:nth-child(2) {
  width: 95px;
}
.options-ads-block td:nth-child(3) {
  width: 80px;
  text-align: center;
}
.options-ads-block td:nth-child(4) {
  width: 120px;
}
.options-ads-block td:nth-child(5) {
  width: 80px;
  text-align: center;
}
.options-ads-block td:nth-child(6) {
  width: 120px;
}
.options-ads-block td:nth-child(7) {
  width: 80px;
  text-align: center;
}
.options-ads-block td:last-child {
  width: 120px;
}
.options-ads-block th {
  font-size: 18px;
  color: #585665;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
}
.options-ads-block tr:first-child,
.options-ads-block tr:last-child {
  background-color: #fff !important;
  font-weight: bold;
}
.options-ads-block tr:nth-child(2n-2) {
  background-color: #efefef;
}
.summary-total-sales {
  width: 100%;
  font-size: 15px !important;
  color: #585665;
}
.summary-total-sales td {
  padding-left: 15px;
  padding-right: 15px;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}
.summary-total-sales td:first-child {
  width: 170px;
}
.summary-total-sales td:nth-child(2) {
  width: 130px;
}
.summary-total-sales td:nth-child(3) {
  width: 130px;
}
.summary-total-sales td:nth-child(4) {
  width: 130px;
}
.summary-total-sales th {
  font-size: 18px;
  color: #585665;
  padding-left: 15px;
  padding-right: 15px;
}
.summary-total-sales tr:first-child,
.summary-total-sales tr:last-child {
  background-color: #fff !important;
  font-weight: bold;
}
.summary-total-sales tr:nth-child(2n-3) {
  background-color: #efefef;
}
/*************************************************************
  SALES / BUYERS  (MODAL SECTION)
**************************************************************/
.bc-title {
  color: #585665;
  font-size: 18px;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 0;
}
#bc-html {
  border: 1px solid #585665;
  height: 100px;
  font-size: 12px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: auto;
  width: 90%;
}
.bc-dropdown {
  padding-left: 0px;
  padding-bottom: 0px;
}
.bc-standard {
  color: #585665;
  font-size: 12px;
}
.close-container {
  position: absolute;
  right: 0;
  top: -5px;
  width: 30px;
  height: 40px;
  padding-top: 10px;
  text-align: center;
  color: #1E93DF;
}
#web-banner .modal-header {
  font-size: 24px;
}
#web-banner .modal-body {
  padding: 0 !important;
}
#web-banner #banner-preview {
  height: 477px !important;
  background-color: #efefef;
  padding: 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: auto;
}
#web-banner .banner-choose {
  background-color: #efefef;
  height: 208px !important;
  width: 311px !important;
}
#web-banner .banner-choose .bc-box-sizes {
  width: 100%;
  color: #585665;
  font-size: 15px;
}
#web-banner .banner-choose .bc-box-sizes .selectedBox {
  background-color: #014F7E !important;
}
#web-banner .banner-choose .bc-box-sizes .box-728 {
  width: 170px;
  height: 22px;
  margin-top: 11px;
}
#web-banner .banner-choose .bc-box-sizes .box-728 div {
  float: right;
  text-align: right;
  width: 50%;
  color: #585665;
  font-size: 15px;
}
#web-banner .banner-choose .bc-box-sizes .box-728 div:first-child {
  float: left;
  text-align: left;
}
#web-banner .banner-choose .bc-box-sizes .box-125x125 {
  height: 35px;
  width: 35px;
  background-color: #a9d6f3;
  float: left !important;
}
#web-banner .banner-choose .bc-box-sizes .box-300x250 {
  height: 70px;
  width: 70px;
  background-color: #a9d6f3;
  float: right !important;
}
#web-banner .banner-choose .bc-box-sizes .box-728x90 {
  background-color: #a9d6f3;
  width: 170px;
  height: 22px;
}
#web-banner .banner-choose .bc-box-sizes .box-160x600 {
  background-color: #a9d6f3;
  width: 30px;
  height: 136px;
  float: right;
}
#web-banner .banner-choose .bc-box-sizes tr td:first-child {
  width: 40%;
  vertical-align: top;
}
#web-banner .banner-choose .bc-box-sizes tr td:last-child {
  width: 100% !important;
  height: 222px;
  vertical-align: top;
  float: right;
}
#web-banner .banner-choose .bc-box-sizes tr td:last-child div:first-child {
  text-align: right;
}
/*************************************************************
  SALES (ORDERS TAB)
**************************************************************/
#od-sales-orders-header {
  top: 10px;
  position: relative;
  margin-left: 15px;
  float: left;
  width: 98%;
  height: 80px;
  /* z-index:999; */
}
#od-sales-orders-header .order-filters {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 15px;
  padding-right: 15px;
}
#od-sales-orders-header .order-filters .filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#od-sales-orders-header .order-filters .filter-container .menu-left {
  display: flex;
  gap: 0.5rem;
}
#od-sales-orders-header .order-filters .filter-container .menu-right {
  display: flex;
  color: #2093df;
  gap: 0.5rem;
}
#od-sales-orders-header .order-filters .filter-container .menu-right .edit span {
  color: #2093df;
  font-size: 15px;
}
#od-sales-orders-header .order-filters .filter-container .menu-right .showBusinessReport {
  display: flex;
}
#od-sales-orders-header .order-filters .edit-print-export {
  border-radius: 10px;
  background-color: white;
  width: 96px !important;
  position: relative;
}
#od-sales-orders-header .order-filters .edit-print-export .show-print {
  width: 130px;
  height: 82px;
  position: absolute;
  left: 39px;
  top: 21px;
  background-color: white;
  color: #2093df;
  border-style: outset;
  font-size: 12px;
  padding: 4px;
  z-index: 999999;
}
#od-sales-orders-header .order-filters .edit-print-export .show-print div {
  width: 100%;
  float: left;
  font-size: 12px;
}
#od-sales-orders-header .order-filters .edit-print-export .show-print div:hover {
  background-color: #d6ebf9 !important;
}
#od-sales-orders-header .filter-grade {
  background-color: transparent;
  color: #2093df;
  border: 0;
  border-style: none;
  box-shadow: inset 0 0 0 0 transparent;
  -webkit-appearance: none;
  padding-bottom: 10px;
}
#od-sales-orders-header .filter-grade::placeholder {
  color: #2093df;
}
#od-sales-orders-header .filter-grade:-ms-input-placeholder {
  color: #2093df;
}
#od-sales-orders-header .filter-grade::-webkit-input-placeholder {
  color: #2093df;
}
#od-sales-orders-header .order-filters-two {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 15px;
  padding-right: 15px;
}
#od-sales-orders-header .order-filters-two div {
  float: left;
  font-size: 15px;
}
#od-sales-orders-header .order-filters-two div:nth-child(2) {
  color: #2093df;
  padding-right: 8px;
  vertical-align: bottom;
}
#od-sales-orders-header .order-filters-two div:nth-child(3) {
  color: #2093df;
}
#od-sales-orders-header .order-filters-two div:nth-child(4) {
  padding-left: 8px;
}
#od-sales-orders-header .order-filters-two div:nth-child(5) {
  color: #2093df;
  font-size: 15px;
  padding-left: 5px;
}
#od-sales-orders-header .order-filters-two div:nth-child(6) {
  color: #2093df;
  font-size: 15px;
}
#od-sales-orders-header .order-filters-two div:nth-child(7) {
  color: #2093df;
  font-size: 15px;
}
#od-sales-orders-header .order-filters-two div:last-child {
  color: #2093df;
}
#od-sales-orders-header .order-filters-two .grade-dropdown {
  margin-top: 1px;
  padding-right: 0;
  margin-right: 5px;
  background-color: #f8f8f8;
  display: flex;
  width: fit-content;
}
.sales-hyperlink {
  cursor: pointer !important;
}
.header-student-report {
  width: 100% !important;
  float: left;
  top: 10px;
  /* width: 100%;
  font-size: 15px !important;
  color: #585665;
  font-weight: normal;
  z-index: 1 !important; */
  /*tr:first-child, tr:last-child {
    background-color:@white;
   }*/
}
.student-report {
  width: 100%;
  /* 98%; */
  float: left;
}
.header-business-report {
  width: 98%;
  float: left;
  top: 66px;
}
.sales-orders-dropdown option {
  text-transform: capitalize;
}
#od-sales-orders {
  position: relative;
  top: 15px;
  margin-left: 15px;
  max-width: 100%;
  float: left;
  width: 100%;
}
#od-sales-orders .orders-sales {
  /*border-bottom: 2px solid @gray4;*/
  padding: 0px;
  /* @em-pt5; */
  position: relative;
  margin-bottom: 0px;
  /* 75px */
  width: 100%;
}
#od-sales-orders .summary-table {
  width: 905px;
  float: left;
}
#print-sales-orders {
  position: relative;
}
#print-sales-orders .orders-sales {
  /*border-bottom: 2px solid @gray4;*/
  padding: 8px;
  position: relative;
}
#print-sales-orders .summary-table {
  width: 100%;
  float: left;
}
.print-single-sale table {
  width: 600px;
}
.print-single-sale table tr {
  font-size: 12px;
}
.print-single-sale table td {
  line-height: 1.4em;
}
.print-single-sale table tr:first-child {
  font-size: 12px;
  font-weight: bold;
}
.print-single-sale table tr:nth-child(2) {
  font-size: 15px;
  font-weight: bold;
}
.print-single-sale table tr:nth-child(3) {
  font-size: 15px;
  padding-bottom: 30px;
}
.print-layer {
  z-index: 99999999;
  cursor: pointer !important;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.sales-orders-table-header {
  max-width: 1185px;
  font-size: 15px !important;
  color: #585665;
  font-weight: normal;
  position: relative;
  top: 70px;
  width: 100%;
  margin-left: 30px;
}
.sales-orders-table-header td {
  font-size: 12px;
  color: #2093df;
  text-align: left;
  background-color: white;
}
.students-header-blue {
  color: #1E93DF;
  font-size: 12px !important;
  font-weight: normal;
  z-index: 1 !important;
}
.students-header-blue .show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.students-header-blue .orders {
  font-size: 12px;
  color: #585665 !important;
}
.orders-sales td,
.students-header-blue td {
  padding-left: 5px;
  text-align: left;
  font-size: 12px;
}
.orders-sales .date-column,
.students-header-blue .date-column {
  flex: 1 1 50px;
  min-width: 50px;
  max-width: 60px;
}
.orders-sales .date-column-business,
.students-header-blue .date-column-business {
  flex: 1 1 50px;
  min-width: 50px;
  max-width: 160px;
}
.orders-sales .student-name-column,
.students-header-blue .student-name-column {
  flex: 2 1 90px;
  /* grow, shrink, basis */
  min-width: 90px;
  max-width: 250px;
}
.orders-sales .business-name-column,
.students-header-blue .business-name-column {
  flex: 2 1 90px;
  /* grow, shrink, basis */
  min-width: 90px;
  max-width: 350px;
}
.orders-sales .grade-column,
.students-header-blue .grade-column {
  flex: 1 1 50px;
  /* grow, shrink, basis */
  min-width: 50px;
  max-width: 110px;
  text-transform: capitalize;
}
.orders-sales .homeroom-column,
.students-header-blue .homeroom-column {
  flex: 2 1 60px;
  /* grow, shrink, basis */
  min-width: 66px;
  max-width: 180px;
}
.orders-sales .order-column,
.students-header-blue .order-column {
  flex: 1 1 80px;
  /* grow, shrink, basis */
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}
.orders-sales .order-column-business,
.students-header-blue .order-column-business {
  flex: 1 1 80px;
  /* grow, shrink, basis */
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.orders-sales .package-column,
.students-header-blue .package-column {
  flex: 1 1 50px;
  /* grow, shrink, basis */
  min-width: 50px;
  max-width: 80px;
}
.orders-sales .yearbook-column,
.students-header-blue .yearbook-column {
  flex: 1 1 20px;
  /* grow, shrink, basis */
  min-width: 25px;
  max-width: 35px;
  justify-content: center;
  text-align: center;
}
.orders-sales .cover-personalization-column,
.students-header-blue .cover-personalization-column {
  flex: 2 1 90px;
  /* grow, shrink, basis */
  min-width: 90px;
  max-width: 180px;
}
.orders-sales .itag-column,
.students-header-blue .itag-column {
  flex: 1 1 50px;
  /* grow, shrink, basis */
  min-width: 60px;
  max-width: 117px;
}
.orders-sales .delivery-column,
.students-header-blue .delivery-column {
  flex: 1 1 30px;
  /* grow, shrink, basis */
  min-width: 30px;
  max-width: 40px;
  justify-content: center;
}
.orders-sales .accessories-column,
.students-header-blue .accessories-column {
  flex: 1 1 88px;
  /* grow, shrink, basis */
  min-width: 88px;
  max-width: 160px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.orders-sales .ad-column,
.students-header-blue .ad-column {
  flex: 1 1 50px;
  /* grow, shrink, basis */
  min-width: 50px;
  max-width: 50px;
}
.orders-sales .ad-column-business,
.students-header-blue .ad-column-business {
  flex: 1 1 50px;
  /* grow, shrink, basis */
  min-width: 50px;
  max-width: 250px;
}
.orders-sales .total-column,
.students-header-blue .total-column {
  flex: 1 1 70px;
  /* grow, shrink, basis */
  min-width: 70px;
  max-width: 70px;
}
.orders-sales .total-column-business,
.students-header-blue .total-column-business {
  flex: 1 1 70px;
  /* grow, shrink, basis */
  min-width: 70px;
  max-width: 270px;
}
.orders-sales .note-column,
.students-header-blue .note-column {
  flex: 1 1 30px;
  /* grow, shrink, basis */
  min-width: 30px;
  max-width: 40px;
  justify-content: center;
}
.orders-sales .note-column-business,
.students-header-blue .note-column-business {
  flex: 1 1 30px;
  /* grow, shrink, basis */
  min-width: 30px;
  max-width: 140px;
  justify-content: left;
}
.orders-sales .order-status-column,
.students-header-blue .order-status-column {
  flex: 1 1 87px;
  /* grow, shrink, basis */
  min-width: 55px;
  max-width: 87px;
}
.orders-sales .order-status-column-business,
.students-header-blue .order-status-column-business {
  flex: 1 1 55px;
  /* grow, shrink, basis */
  min-width: 55px;
  max-width: 203px;
}
.orders-sales .print-column,
.students-header-blue .print-column {
  flex: 1 1 30px;
  /* grow, shrink, basis */
  min-width: 30px;
  max-width: 50px;
  justify-content: center;
}
.print-orders-org-table {
  width: 100%;
  font-size: 15px !important;
  color: #585665;
  font-weight: normal;
  z-index: 1 !important;
  /*tr:first-child, tr:last-child {
    background-color:@white;
   }*/
}
.print-orders-org-table .show-book {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}
.print-orders-org-table .show-box {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  background-color: white;
  border: 1px solid gray;
  width: 200px;
  height: 80px;
  z-index: 10000 !important;
  white-space: nowrap;
  margin-top: 5px;
  padding: 8px;
}
.print-orders-org-table .show-book:hover .show-box {
  display: block;
}
.print-orders-org-table .show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.print-orders-org-table .orders {
  font-size: 12px;
  color: #585665 !important;
}
.print-orders-org-table td {
  padding: 8px 4px;
  line-height: 1;
  text-align: left;
  font-size: 12px !important;
}
.print-orders-org-table td:first-child {
  width: 65px;
  max-width: 65px;
  overflow: hidden;
}
.print-orders-org-table td:nth-child(2) {
  width: 200px;
  max-width: 200px !important;
  overflow: hidden;
}
.print-orders-org-table td:nth-child(3) {
  max-width: 57px;
  width: 0;
  overflow: hidden;
}
.print-orders-org-table td:nth-child(4) {
  max-width: 57px;
  width: 0;
  overflow: hidden;
}
.print-orders-org-table td:nth-child(5) {
  max-width: 85px;
  width: 0;
  overflow: hidden;
}
.print-orders-org-table td:nth-child(6) {
  max-width: 57px;
  width: 57px;
  overflow: hidden;
}
.print-orders-org-table tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
.print-orders-org-table tr:nth-child(even) {
  background-color: #dfdfdf;
}
.print-orders-table {
  width: 100%;
  font-size: 15px !important;
  color: #585665;
  font-weight: normal;
  z-index: 1 !important;
  /*tr:first-child, tr:last-child {
    background-color:@white;
   }*/
}
.print-orders-table .show-book {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}
.print-orders-table .show-box {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  background-color: white;
  border: 1px solid gray;
  width: 200px;
  height: 80px;
  z-index: 10000 !important;
  white-space: nowrap;
  margin-top: 5px;
  padding: 8px;
}
.print-orders-table .show-book:hover .show-box {
  display: block;
}
.print-orders-table .show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.print-orders-table .orders {
  font-size: 12px;
  color: #585665 !important;
}
.print-orders-table td {
  padding: 8px 4px;
  line-height: 1;
  text-align: left;
  font-size: 12px !important;
}
.print-orders-table tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
.print-orders-table tr:nth-child(even) {
  background-color: #dfdfdf;
}
.sales-orders-table {
  width: 100%;
  font-size: 15px !important;
  color: #585665;
  font-weight: normal;
  z-index: 1 !important;
}
.sales-orders-table td {
  line-height: 1;
  text-align: left;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding-left: 5px;
  padding-right: 3px;
  border-right: 1px solid #ffffff;
}
.sales-orders-table tr {
  display: flex;
}
.sales-orders-table .show-book {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}
.sales-orders-table .show-box {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  background-color: white;
  border: 1px solid gray;
  width: 200px;
  height: 80px;
  z-index: 10000 !important;
  white-space: nowrap;
  margin-top: 5px;
  padding: 8px;
}
.sales-orders-table .show-book:hover .show-box {
  display: block;
}
.sales-orders-table .show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.sales-orders-table .orders {
  font-size: 12px;
  color: #585665 !important;
}
.sales-orders-table tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
/*jing's adding style for class .odd*/
.odd {
  background-color: #efefef;
}
/*end jing's adding */
.show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.sales-business-orders-table-header {
  width: 96%;
  font-size: 15px !important;
  color: #1E93DF;
  font-weight: normal;
  position: relative;
  top: 20px;
  margin-bottom: 0px;
  /* 10px */
  margin-left: 10px;
  /* 23px */
}
.sales-business-orders-table-header .show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.sales-business-orders-table-header .orders {
  font-size: 12px;
  color: #585665 !important;
}
.sales-business-orders-table-header td {
  padding: 8px 4px;
  line-height: 1;
  text-align: left;
  font-size: 12px;
}
.sales-business-orders-table-header td:first-child {
  width: 65px;
}
.sales-business-orders-table-header td:nth-child(2) {
  max-width: 300px !important;
  width: 300px;
  overflow: hidden;
}
.sales-business-orders-table-header td:nth-child(3) {
  width: 85px;
  max-width: 85px;
  overflow: hidden;
}
.sales-business-orders-table-header td:nth-child(4) {
  width: 47px;
  overflow: hidden;
}
.sales-business-orders-table-header td:nth-child(5) {
  width: 60px;
  overflow: hidden;
}
.sales-business-orders-table-header td:nth-child(6) {
  width: 35px;
  overflow: hidden;
}
.sales-business-orders-table-header td:nth-child(7) {
  width: 94px;
  overflow: hidden;
}
.sales-business-orders-table-header td:nth-child(8) {
  width: 18px;
  overflow: hidden;
}
.sales-business-orders-table-header td:nth-child(9) {
  width: 100%;
  overflow: hidden;
}
.header-blue {
  color: #1E93DF !important;
}
.header-blue:hover {
  background-color: white !important;
}
.sales-business-orders-table {
  width: 100%;
  /* 1166px */
  font-size: 15px !important;
  color: #585665;
  font-weight: normal;
  z-index: 1 !important;
  /*td:first-child {
    width:65px;
  }
  td:nth-child(2){
    max-width:300px !important;
    width:300px;
    overflow:hidden;
  }
  td:nth-child(3){
    width:85px;
    max-width:85px;
    overflow:hidden;
  }
  td:nth-child(4){
    width:47px;
    overflow:hidden;
  }
  td:nth-child(5){
    width:60px;
    overflow:hidden;
  }
  td:nth-child(6){
    width:35px;
    overflow:hidden;
  }
  td:nth-child(7){
    width:94px;
    overflow:hidden;
  }
  td:nth-child(8){
    width:18px;
    overflow:hidden;
  }
  td:nth-child(9){
    width:100%;
    overflow:hidden;
  } */
  /* tr:first-child, tr:last-child {
    background-color:@white;
   } */
}
.sales-business-orders-table .show-book {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}
.sales-business-orders-table .show-box {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  background-color: white;
  border: 1px solid gray;
  width: 200px;
  height: 80px;
  z-index: 10000 !important;
  white-space: nowrap;
  margin-top: 5px;
  padding: 8px;
}
.sales-business-orders-table .show-book:hover .show-box {
  display: block;
}
.sales-business-orders-table .show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.sales-business-orders-table .orders {
  font-size: 12px;
  color: #585665 !important;
}
.sales-business-orders-table td {
  padding: 8px 4px;
  line-height: 1;
  text-align: left;
  font-size: 12px;
}
.sales-business-orders-table tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
.sales-business-orders-table tr:nth-child(even) {
  background-color: #dfdfdf;
}
.sales-business-table {
  width: 100%;
  /* 1166px */
  font-size: 15px !important;
  color: #585665;
  font-weight: normal;
  z-index: 1 !important;
}
.sales-business-table .show-book {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}
.sales-business-table .show-box {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  background-color: white;
  border: 1px solid gray;
  width: 200px;
  height: 80px;
  z-index: 10000 !important;
  white-space: nowrap;
  margin-top: 5px;
  padding: 8px;
}
.sales-business-table .show-book:hover .show-box {
  display: block;
}
.sales-business-table .show-orders {
  font-size: 24px;
  color: #585665 !important;
  background-color: white;
  padding-bottom: 5px !important;
}
.sales-business-table .orders {
  font-size: 12px;
  color: #585665 !important;
}
.sales-business-table td {
  padding: 8px 4px;
  line-height: 1;
  text-align: left;
  font-size: 12px;
}
.sales-business-table tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
.padding-col-right {
  padding-right: 15px;
}
.edit-preferences {
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
  width: 138px;
}
.edit-sales {
  cursor: pointer;
  color: #1E93DF !important;
}
.edit {
  color: #98989b;
}
#od-sales-ns {
  margin-top: 55px;
}
#od-sales-ns .header-data {
  width: 100%;
}
#od-sales-ns .header-data .school {
  float: left;
  color: #585665;
  font-size: 18px;
  padding-right: 15px;
  height: 25px;
}
#od-sales-ns .header-data .city-state {
  float: left;
  color: #585665;
  font-size: 15px;
  height: 25px;
}
#od-sales-ns .header-data .yearbook-detail {
  float: right;
  color: #585665;
  font-size: 15px;
  height: 25px;
  padding-right: 15px;
}
#od-sales-ns .header-display {
  width: 100%;
  clear: both;
}
#od-sales-ns .header-display .name-stamps {
  float: left;
  color: #585665;
  font-size: 12px;
  padding-right: 15px;
  height: 20px;
}
#od-sales-ns .header-display .typeface {
  float: left;
  color: #585665;
  font-size: 12px;
  padding-right: 15px;
  height: 20px;
}
#od-sales-ns .header-display .foil-color {
  float: left;
  color: #585665;
  font-size: 12px;
  height: 20px;
}
#od-sales-ns .sales-ns-menu-header {
  width: 280px;
  padding-left: 0px;
  float: left;
  font-size: 15px;
  color: #585665;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 5px;
  overflow-x: hidden;
  box-sizing: border-box;
}
#od-sales-ns .sales-ns-menu-header::-webkit-scrollbar {
  width: 10px;
}
#od-sales-ns .sales-ns-menu-header .option-checkbox {
  float: left;
  width: 110px;
  white-space: nowrap;
  padding-bottom: 8px;
  clear: both;
  padding-top: 8px;
  font-size: 15px;
}
#od-sales-ns .sales-ns-menu-header .label-padding {
  padding-bottom: 4px;
}
#od-sales-ns .sales-ns-menu-header .option-radios {
  float: right;
  width: 127px;
  padding-left: 8px;
  padding-top: 6px;
}
#od-sales-ns .sales-ns-menu-header .ad {
  float: left;
  width: 107px;
  padding-bottom: 15px;
}
#od-sales-ns .sales-ns-menu-header .ad-org {
  float: left;
  width: 100%;
}
#od-sales-ns .sales-ns-menu-header .ad-radios {
  float: left;
  width: 107px;
  padding-left: 8px;
}
#od-sales-ns .sales-ns-menu-header .ad-radios-org {
  width: 107px;
  padding-left: 8px;
}
#od-sales-ns .sales-ns-menu-header .default-labels {
  clear: both;
}
#od-sales-ns .sales-ns-menu-header .top-spacers {
  padding-top: 8px;
  padding-bottom: 4px;
}
#od-sales-ns .sales-ns-menu-header .submit-order {
  font-size: 12px;
  float: left;
  color: #585665;
  font-weight: bold;
}
#od-sales-ns .sales-ns-menu-header .submit-order-detail {
  padding-bottom: 7px;
  float: left;
  color: #585665;
  font-size: 12px;
}
#od-sales-ns .sales-ns-menu-header .breakborder {
  height: 1px;
  margin: 5.7px 0.5px 5.9px 1.5px;
  border: solid 1px #c4c4cc;
}
#od-sales-ns .sales-ns-menu-header .sub-title {
  font-size: 18px;
}
#od-sales-ns .sales-ns-menu-header .add-name-stamps {
  float: left;
  color: #2093df;
  font-size: 18px;
  padding-right: 15px;
  padding-top: 4px;
  padding-bottom: 15px;
}
#od-sales-ns .sales-ns-menu-header .add-submit-button {
  background-color: #2093df;
  font-size: 18px;
  color: #fff;
  padding: 4px 15px;
  float: left;
}
#od-sales-ns .sales-ns-menu-header .search {
  padding-top: 8px;
  color: #98989b;
  font-size: 15px;
  float: left;
  clear: both;
  width: 100%;
  padding-right: 0px;
}
#od-sales-ns .sales-ns-menu-header .search input {
  width: 100%;
  padding: 8px !important;
  text-indent: 0;
  height: 25px;
}
#od-sales-ns .sales-ns-menu-header .grade {
  float: left;
  clear: both;
  color: #585665;
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}
#od-sales-ns .sales-ns-menu-header .grade .dropdown-toggle:hover {
  background-color: #fff;
}
#od-sales-ns .sales-ns-menu-header .home-room {
  float: left;
  clear: both;
  padding-bottom: 4px !important;
}
#od-sales-ns .sales-ns-menu-header .col-headers {
  float: left;
  clear: both;
}
#od-sales-ns .sales-ns-menu-header .ns-radios {
  float: left;
  clear: both;
}
#od-sales-ns .name-stamp-container {
  width: 654px;
  padding: 0;
  float: left;
  padding-left: 15px;
}
#od-sales-ns .sales-ns-div-data {
  clear: both;
}
#od-sales-ns .sales-ns-div-data .ns-rows {
  width: 100%;
}
#od-sales-ns .sales-ns-div-data .ns-rows .edit {
  border: #a9d6f3 solid 3px !important;
  color: #98989b !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .edit .edit-box {
  color: #585665;
  background-color: #a9d6f3;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  padding: 0 8px;
  font-size: 12px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs {
  width: 50%;
  float: left;
  border: #98989b solid 3px;
  height: 130px !important;
  background-color: white;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .header {
  height: 21.6px !important;
  border-bottom: #c4c4cc solid 1px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .header .details {
  width: 73%;
  float: left;
  font-size: 12px;
  padding: 3px 3px 0 3px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .header .name {
  float: left;
  width: 27%;
  padding: 3px 3px 0 3px !important;
  font-size: 12px;
  text-align: right;
  overflow: hidden;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .title {
  font-size: 12px;
  width: 100% !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .center-50 {
  min-width: 2em !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts {
  padding: 4px 0 0 0 !important;
  height: 85px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-headings {
  padding-left: 30px;
  font-size: 15px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 {
  margin-left: 40px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-boxes {
  color: #585665;
  display: flex;
  padding-top: 5px;
  align-items: center;
  /* vertically center icons in the cell */
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-boxes div:first-child,
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-boxes div:nth-child(2),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-boxes div:nth-child(3),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-boxes div:nth-child(4),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-boxes div:nth-child(5) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 30px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-boxes div i {
  font-size: 30px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-name {
  display: flex;
  align-items: center;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-name div {
  font-size: 12px;
  color: #585665;
  text-align: left;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-name div:first-child,
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-name div:nth-child(2),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-name div:nth-child(3),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-name div:nth-child(4),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-1 .icon-name div:nth-child(5) {
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 30px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts .layout-table-3 {
  margin-left: 40px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-footer {
  height: 17px !important;
  position: relative;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-footer .layout-sold-online {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 12px;
  background-color: #dfdfdf;
  color: #98989b;
  padding: 0 8px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-footer .layout-no-edit {
  font-size: 12px;
  background-color: #dfdfdf;
  color: #98989b;
  padding: 0 8px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-2 {
  padding: 15px 0 0 0 !important;
  height: 71px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-2 .layout-table-2 tr:first-child td:nth-child(2) {
  vertical-align: middle;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-2 .layout-table-2 tr:first-child td:nth-child(2) i {
  font-size: 30px;
  vertical-align: middle;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-2 .layout-table-2 tr:first-child td:nth-child(2) span {
  font-size: 12px;
  vertical-align: middle;
  padding-left: 15px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-2 .layout-table-2 tr:nth-child(2) {
  font-size: 12px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 {
  padding: 0 0 0 0 !important;
  height: 71px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-boxes {
  color: #585665;
  display: flex;
  padding-top: 5px;
  align-items: center;
  /* vertically center icons in the cell */
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-boxes div:first-child,
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-boxes div:nth-child(2),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-boxes div:nth-child(3),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-boxes div:nth-child(4),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-boxes div:nth-child(5) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 30px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-boxes div i {
  font-size: 30px !important;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-name {
  display: flex;
  align-items: center;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-name div {
  font-size: 12px;
  color: #585665;
  text-align: left;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-name div:first-child,
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-name div:nth-child(2),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-name div:nth-child(3),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-name div:nth-child(4),
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-3 .layout-table-3 .icon-name div:nth-child(5) {
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 30px;
}
#od-sales-ns .sales-ns-div-data .ns-rows .ns-divs .layouts-4 {
  text-align: center;
  height: 71px !important;
  font-size: 24px;
  color: #c4c4cc;
  padding-top: 15px;
}
#itag-modal {
  border: 0 !important;
  margin-left: -1px !important;
}
#itag-modal .modal-body {
  padding: 0 !important;
}
#itag-modal .add-main-box {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
#itag-modal .add-main-box .box-data {
  background-color: #dfdfdf;
  width: 100%;
  color: #fff;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}
#itag-modal .add-main-box .box-data .box-data-table tr:first-child td {
  color: #98989b;
  font-size: 12px;
}
#itag-modal .add-main-box .box-data .box-data-table tr:first-child td:nth-child(2) {
  width: 18.33em;
}
#itag-modal .add-main-box .box-data .box-data-table tr:first-child td:nth-child(3) {
  width: 8em;
}
#itag-modal .add-main-box .box-data .box-data-table tr:first-child td:nth-child(4) {
  width: 8.66em;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(2) td:first-child {
  color: #585665;
  font-size: 15px;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(2) td:nth-child(2) input[type=text] {
  width: 18.33em;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(2) td:nth-child(3) input[type=text] {
  width: 8em;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(2) td:nth-child(4) input[type=text] {
  width: 8.66em;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(2) td:nth-child(5) {
  padding-left: 23px;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(2) td:nth-child(5) div {
  font-size: 18px;
  color: #fff;
  background-color: #2093df;
  padding: 4px 15px 4px 15px;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(3) {
  height: 15px !important;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(3) td:nth-child(2) {
  font-size: 12px;
  color: #98989b;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(4) td:first-child {
  color: #98989b;
  font-size: 12px;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(4) td:nth-child(2) {
  color: #2093df;
  font-size: 12px;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(4) td:nth-child(2) span:first-child {
  font-size: 12px;
  color: #2093df;
}
#itag-modal .add-main-box .box-data .box-data-table tr:nth-child(4) td:nth-child(2) span:last-child {
  font-size: 12px;
  color: #98989b;
}
#itag-modal .add-customize-box {
  height: 200px;
  padding: 15px;
}
#itag-modal .add-customize-box .arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid blue;
}
#itag-modal .add-customize-box .arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid blue;
}
#itag-modal .add-customize-box .option-arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 17px solid #a9d6f3;
  position: absolute;
  top: 11px;
}
#itag-modal .add-customize-box .active-option {
  background-color: #a9d6f3 !important;
}
#itag-modal .add-customize-box .left-arrow-box {
  float: left;
  width: 54px;
  height: 125px;
  text-align: left;
  position: relative;
}
#itag-modal .add-customize-box .left-arrow-box .click-left {
  width: 10px;
  height: 30px;
  background-color: lightblue;
  position: absolute;
  top: 50px;
  left: 0;
}
#itag-modal .add-customize-box .select-line-box {
  float: left;
  width: 120px;
  background-color: #fff !important;
}
#itag-modal .add-customize-box .select-line-box .option-box-1 {
  height: 49.5px;
  padding: 4px 0 4px 4px;
  font-size: 12px;
  color: #585665;
}
#itag-modal .add-customize-box .select-line-box .option-box-1:hover {
  cursor: pointer;
}
#itag-modal .add-customize-box .select-line-box .option-box-1 div:first-child {
  float: left;
  width: 99px;
  height: 100%;
}
#itag-modal .add-customize-box .select-line-box .option-box-1 div:first-child div {
  text-align: center;
  max-height: 18px;
  padding: 0;
  width: 100%;
}
#itag-modal .add-customize-box .select-line-box .option-box-1 div:first-child div:last-child {
  text-align: center;
}
#itag-modal .add-customize-box .select-line-box .option-box-1 div:last-child {
  float: left;
  width: 15px;
  position: relative;
}
#itag-modal .add-customize-box .select-line-box .option-box-2 {
  height: 49.5px;
  font-size: 12px;
  color: #585665;
  padding: 4px 0 4px 4px;
}
#itag-modal .add-customize-box .select-line-box .option-box-2 div:first-child {
  float: left;
  width: 99px;
  height: 100%;
  position: relative;
}
#itag-modal .add-customize-box .select-line-box .option-box-2 div:first-child div:first-child {
  float: left;
  width: 20px;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 13px;
}
#itag-modal .add-customize-box .select-line-box .option-box-2 div:first-child div:last-child {
  float: left;
  height: 100%;
  width: 78px;
  top: 4px;
  left: 21px;
  position: absolute;
}
#itag-modal .add-customize-box .select-line-box .option-box-2 div:last-child {
  float: left;
  width: 15px;
  position: relative;
}
#itag-modal .add-customize-box .select-line-box .option-box-3 {
  height: 49.5px;
  font-size: 12px;
  color: #585665;
  padding: 4px 0 4px 4px;
}
#itag-modal .add-customize-box .select-line-box .option-box-3 div:first-child {
  float: left;
  width: 99px;
  height: 100%;
  position: relative;
}
#itag-modal .add-customize-box .select-line-box .option-box-3 div:first-child div:first-child {
  float: left;
  width: 20px;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 13px;
}
#itag-modal .add-customize-box .select-line-box .option-box-3 div:first-child div:last-child {
  float: left;
  height: 100%;
  width: 78px;
  top: 14px;
  left: 21px;
  position: absolute;
}
#itag-modal .add-customize-box .select-line-box .option-box-3 div:last-child {
  float: left;
  width: 15px;
  position: relative;
}
#itag-modal .add-customize-box .enter-select-icon-box {
  float: left;
  width: 75px;
  height: 145px;
  position: relative;
  padding-left: 15px;
  background-color: #fff;
}
#itag-modal .add-customize-box .enter-select-icon-box div {
  top: 41.25px;
  color: #98989b;
  font-size: 12px;
  text-align: center;
  position: absolute;
}
#itag-modal .add-customize-box .customize-namestamp-box {
  float: left;
  width: 496px;
  padding: 4px 0 0 8px;
}
#itag-modal .add-customize-box .customize-namestamp-box .title-data-1 {
  padding: 0 4px 12px 0;
}
#itag-modal .add-customize-box .customize-namestamp-box .title-data-1 input[type=text] {
  width: 315px;
}
#itag-modal .add-customize-box .customize-namestamp-box .option-table-1 table tr:first-child td:nth-child(odd) div {
  padding: 4px;
  font-size: 15px;
  color: #585665;
  border: 1px solid #c4c4cc;
}
#itag-modal .add-customize-box .customize-namestamp-box .option-table-1 table tr:nth-child(2) td:nth-child(odd) {
  padding: 4px 0 0 0;
  font-size: 2em;
  color: #585665;
  text-align: center;
}
#itag-modal .add-customize-box .customize-namestamp-box .option-table-1 table td:nth-child(even) {
  width: 22.5px;
}
#itag-modal .add-customize-box .right-arrow-box {
  float: left;
  width: 54px;
  height: 125px;
  text-align: right;
  position: relative;
}
#itag-modal .add-customize-box .right-arrow-box .click-right {
  width: 10px;
  height: 30px;
  background-color: lightblue;
  position: absolute;
  top: 50px;
  right: 0;
}
#itag-modal .add-footer-box {
  height: 100%;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: left;
}
#itag-modal .add-footer-box .footer-box {
  background-color: #585665;
  height: 413px;
}
#itag-modal .add-footer-box .footer-box .footer-title {
  font-size: 18px;
  color: #dfdfdf;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 8px;
}
#itag-modal .add-footer-box .footer-box .footer-container {
  font-size: 15px;
  height: 100%;
  padding-left: 60px;
}
#itag-modal .add-footer-box .footer-box .footer-container .scroll-add-table {
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header {
  width: 100%;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header tr {
  color: #c4c4cc;
  font-size: 12px;
  border-bottom: 1px solid #98989b;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header td {
  padding: 4px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header td:first-child {
  width: 240px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2) {
  width: 105px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3) {
  width: 105px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4) {
  width: 120px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5) {
  width: 70px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6) {
  width: 100%;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data {
  width: 100%;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td {
  padding-top: 8px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data tr {
  color: #dfdfdf;
  font-size: 12px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data td {
  padding: 4px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data td:first-child {
  width: 240px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2) {
  width: 105px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3) {
  width: 105px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4) {
  width: 120px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5) {
  width: 70px;
}
#itag-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6) {
  width: 100%;
}
/*************************************************************
  SALES (BUYERS TAB)
**************************************************************/
.od-sales-buyers-header {
  top: 0px;
  position: relative;
  max-width: 1200px;
}
.od-sales-buyers-header .heading {
  font-size: 24px;
  color: #98989b;
  margin-top: 11px;
}
.od-sales-buyers-header .heading .updated {
  font-size: 12px;
}
.od-sales-buyers-header .get-marketing {
  margin-top: 8px;
  height: 41px !important;
  color: white;
  padding-top: 7px;
  font-size: 18px;
}
.od-sales-buyers-header .get-marketing img {
  image-rendering: auto;
}
.od-sales-buyers-header .promote-sales {
  color: #1E93DF;
  padding-top: 5px;
}
.od-sales-buyers-header .resolve {
  color: #1E93DF;
}
#unmatched-modal .unmatched-table-first {
  padding: 0;
  background-color: #efefef;
}
#unmatched-modal .unmatched-table-first div {
  float: left;
  padding: 5px;
}
#unmatched-modal .unmatched-table-first div:first-child {
  font-size: 12px;
  width: 65px;
  text-align: right;
  padding-top: 9px;
}
#unmatched-modal .unmatched-table-first div:nth-child(2) {
  font-size: 15px;
  width: 550px;
}
#unmatched-modal .unmatched-table-first div:nth-child(3) {
  font-size: 12px;
  color: #98989b;
  width: 100px;
}
#unmatched-modal .unmatched-table {
  padding: 0;
  background-color: #efefef;
}
#unmatched-modal .unmatched-table div {
  float: left;
  font-size: 12px !important;
  padding: 5px;
}
#unmatched-modal .unmatched-table div:first-child {
  width: 65px;
  text-align: right;
}
#unmatched-modal .unmatched-table div:nth-child(2) {
  width: 175px;
}
#unmatched-modal .unmatched-table div:nth-child(3) {
  width: 60px;
  text-align: right;
}
#unmatched-modal .unmatched-table div:nth-child(4) {
  width: 135px;
}
#unmatched-modal .unmatched-table div:nth-child(5) {
  width: 140px;
}
#unmatched-modal .unmatched-table div:nth-child(6) {
  width: 140px;
}
#unmatched-modal .suggested-title {
  padding: 15px 5px;
  font-size: 15px;
  float: left;
  width: 100%;
}
#unmatched-modal .suggested-table {
  float: left;
  width: 100%;
}
#unmatched-modal .suggested-table .suggested-header-students {
  font-size: 15px;
  width: 100%;
  padding: 5px;
}
#unmatched-modal .suggested-table .suggested-header-students div {
  width: 33%;
  float: left;
}
#od-sales-buyers {
  position: relative;
  top: 40px;
  margin-left: 15px;
  margin-right: 15px;
  max-width: 1200px;
  height: 800px;
}
#od-sales-buyers .sales-buyers-menu-header {
  font-size: 15px;
  color: #585665;
  padding: 0;
  border-top: 1px solid #C4C4CC;
}
#od-sales-buyers .sales-buyers-menu-header .dropdown-toggle:hover {
  background-color: #fff;
}
#od-sales-buyers .sales-buyers-menu-header .yearbook {
  float: left;
  width: 107px;
  padding-bottom: 15px;
}
#od-sales-buyers .sales-buyers-menu-header .label-padding {
  padding-bottom: 4px;
}
#od-sales-buyers .sales-buyers-menu-header .yearbook-radios {
  float: left;
  width: 107px;
  padding-left: 8px;
}
#od-sales-buyers .sales-buyers-menu-header .ad {
  float: left;
  width: 107px;
  padding-bottom: 15px;
}
#od-sales-buyers .sales-buyers-menu-header .ad-org {
  float: left;
  width: 100%;
}
#od-sales-buyers .sales-buyers-menu-header .ad-radios {
  float: left;
  width: 107px;
  padding-left: 8px;
}
#od-sales-buyers .sales-buyers-menu-header .default-labels {
  clear: both;
}
#od-sales-buyers .sales-buyers-menu-header .top-spacers {
  padding-top: 6px;
  padding-bottom: 4px;
}
#od-sales-buyers .sales-buyers-menu-header .buyers-options {
  overflow: auto;
  height: 95px;
}
#od-sales-buyers .sales-buyers-menu-header .buyers-options div {
  padding-bottom: 3px;
  padding-left: 8px;
  font-size: 15px;
}
#od-sales-buyers .set-scrollable-container .header-container {
  width: 100%;
  float: left;
}
#od-sales-buyers .set-scrollable-container .header-container .sales-tabs {
  background-color: white;
  padding: 4px 15px;
  color: #1E93DF;
  font-size: 18px;
  float: left;
}
#od-sales-buyers .set-scrollable-container .header-container .sales-tabs-activated {
  background-color: #a9d6f3;
  color: #585665;
  font-size: 18px;
  padding: 4px 15px;
  float: left;
}
#od-sales-buyers .set-scrollable-container .header-container .sales-results {
  float: right;
  width: 160px;
  text-align: right;
  color: #585665;
  font-size: 15px;
}
#od-sales-buyers .set-scrollable-container .enter-sales {
  float: right;
  padding-right: 10px;
  margin-right: 16px;
  font-size: 15px;
  color: #1E93DF;
}
#od-sales-buyers .set-scrollable-container .print-export {
  float: right;
  width: 113px;
  font-size: 15px;
  color: #1E93DF;
}
#od-sales-buyers .set-scrollable-container .sales-zero-buyers-container {
  background-color: #efefef;
  width: 100%;
  top: 40px;
  height: 100%;
  position: absolute;
  float: left;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#od-sales-buyers .set-scrollable-container .sales-zero-buyers-container .zero-buyers-message {
  float: left;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 40%;
  padding: 15px;
}
#od-sales-buyers .set-scrollable-container .sales-zero-buyers-container .zero-buyers-message div {
  width: 100%;
  text-align: center;
  float: left;
}
#od-sales-buyers .set-scrollable-container .sales-zero-buyers-container .zero-buyers-message :first-child {
  font-size: 24px;
}
#od-sales-buyers .set-scrollable-container .sales-zero-buyers-container .zero-buyers-message :nth-child(2) {
  font-size: 18px;
}
#od-sales-buyers .set-scrollable-container .sales-zero-buyers-container .zero-buyers-message :nth-child(3) {
  font-size: 18px !important;
  color: #1E93DF;
}
#od-sales-buyers .set-scrollable-container #filedragStudentBuyers {
  border: 5px dashed #8db8df;
  width: 17.7em;
  text-align: center;
  padding: 50px 10px;
  margin: 72px auto 26px 276px;
  cursor: pointer;
  cursor: hand;
  z-index: 4000;
}
#od-sales-buyers .set-scrollable-container #preDragDropStudentBuyers {
  position: absolute;
  cursor: pointer;
  cursor: hand;
}
#od-sales-buyers .set-scrollable-container .dragStudentBuyers {
  background-color: #0b97c4;
  cursor: pointer;
  cursor: hand;
}
@-webkit-keyframes moveupCloud {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes moveupCloud {
  0% {
    opacity: 0;
    top: 50px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
#od-sales-buyers .set-scrollable-container .sales-students {
  height: 100%;
  width: 100%;
  float: left;
  padding-top: 5px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /*display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      flex-grow: 1;
      overflow-y: auto !important;
      background-color:red;
      position:absolute;
      float:left;*/
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online {
  width: 100%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr:first-child {
  height: 32px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th {
  color: #1E93DF;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:first-child {
  width: 18%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:nth-child(2) {
  width: 20%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:nth-child(3) {
  width: 17%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:nth-child(4) {
  width: 10%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:nth-child(5) {
  width: 6%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:nth-child(6) {
  width: 17%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:nth-child(7) {
  width: 10%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-online tr th:nth-child(8) {
  width: 43px;
  min-width: 23px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online {
  width: 100%;
  overflow-y: auto !important;
  float: left;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online ::-webkit-scrollbar {
  display: block;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td {
  font-size: 12px;
  color: #585665 !important;
  padding-right: 4px;
  border: 3px white solid;
  height: 25px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td ::after {
  width: 2px;
  background-color: red !important;
  height: 100%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:first-child {
  width: 18%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(2) {
  width: 20%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(3) {
  width: 17%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(4) {
  width: 10%;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(5) {
  width: 6%;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(6) {
  width: 17%;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(7) {
  width: 10%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(8) {
  width: 28px;
  min-width: 29px;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(8) .un-hide {
  z-index: 999;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(8) .un-hide i {
  color: #1E93DF;
  padding-left: 4px;
  padding-right: 3px;
  padding-top: 5px;
  font-weight: bold;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online td:nth-child(8) .hide {
  display: none;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online tr:nth-child(even) {
  background-color: #efefef;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-online tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign {
  width: 100%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr:first-child {
  height: 32px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th {
  color: #1E93DF;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:first-child {
  width: 28%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:nth-child(2) {
  width: 18%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:nth-child(3) {
  width: 21%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:nth-child(4) {
  width: 17%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:nth-child(5) {
  width: 18%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:nth-child(6) {
  width: 6%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:nth-child(7) {
  width: 14%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-header-indesign tr th:nth-child(8) {
  width: 10%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign {
  width: 100%;
  overflow-y: auto !important;
  float: left;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign ::-webkit-scrollbar {
  display: block;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td {
  font-size: 12px;
  color: #585665 !important;
  padding-right: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 3px white solid;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td ::after {
  width: 2px;
  background-color: red !important;
  height: 100%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:first-child {
  width: 28%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:first-child img {
  width: 25px;
  height: 25px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(2) {
  width: 18%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(3) {
  width: 22%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(4) {
  width: 17%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(5) {
  width: 10%;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(6) {
  width: 6%;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(7) {
  width: 20%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(8) {
  width: 10%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(9) {
  width: 28px;
  min-width: 29px;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(9) .un-hide {
  z-index: 999;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(9) .un-hide i {
  color: #1E93DF;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: bold;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign td:nth-child(9) .hide {
  display: none;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign tr:nth-child(even) {
  background-color: #efefef;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-table-data-indesign tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header {
  clear: both;
  width: 100%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr:first-child {
  height: 32px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th {
  color: #1E93DF;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th:first-child {
  width: 28%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th:nth-child(2) {
  width: 17%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th:nth-child(3) {
  width: 18%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th:nth-child(4) {
  width: 21%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th:nth-child(5) {
  width: 6%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th:nth-child(6) {
  width: 12%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data-header tr th:nth-child(7) {
  width: 12%;
  width: 29px;
  max-width: 29px;
  min-width: 29px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data {
  clear: both;
  width: 100%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th {
  color: #1E93DF;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:first-child {
  width: 28%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:nth-child(2) {
  width: 17%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:nth-child(3) {
  width: 21%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:nth-child(4) {
  width: 21%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:nth-child(5) {
  width: 6%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:nth-child(6) {
  width: 12%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:nth-child(7) {
  width: 12%;
  width: 29px;
  min-width: 29px;
  max-width: 29px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr th:nth-child(8) {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td {
  font-size: 12px;
  color: #585665 !important;
  padding-right: 4px;
  border: 3px white solid;
  height: 25px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td ::after {
  width: 2px;
  background-color: red !important;
  height: 100%;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td:first-child {
  width: 28%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td:nth-child(2) {
  width: 17%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td:nth-child(3) {
  width: 18%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td:nth-child(4) {
  width: 21%;
  padding-left: 4px;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td:nth-child(5) {
  width: 6%;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td:nth-child(6) {
  width: 12%;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr td:nth-child(7) {
  width: 29px;
  max-width: 29px;
  min-width: 29px;
  text-align: center;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr:hover {
  background-color: #d6ebf9 !important;
  cursor: pointer;
}
#od-sales-buyers .set-scrollable-container .sales-students .sales-buyers-org-table-data tr:nth-child(even) {
  background-color: #efefef;
}
.highlight {
  background-color: #a9d6f3 !important;
}
/*************************************************************
  SCHOOL COLORS MODAL
**************************************************************/
@font-face {
  font-family: 'Industrial';
  src: url('img/Industry-Bold.eot');
  /* IE9+ Compat Modes */
  src: url('img/Industry-Bold.woff') format('woff'), /* Modern browsers */ url('img/Industry-Bold.ttf') format('truetype');
  /* Safari, Android, iOS */
}
#school-colors-modal .modal-body {
  padding-top: 0 !important;
  height: 395px !important;
}
#school-colors-modal .save-button {
  cursor: pointer;
}
#school-colors-modal .select-default {
  width: 100%;
  padding-bottom: 15px;
}
#school-colors-modal .pick-colors {
  width: 350px;
  float: left;
  padding-right: 15px;
}
#school-colors-modal .pick-colors .color-name {
  text-align: right;
  width: 100%;
  clear: both;
}
#school-colors-modal .pick-colors .color-heading-1 {
  float: left;
  width: 100%;
  font-weight: bold;
}
#school-colors-modal .pick-colors .color-heading-2 {
  margin-top: 23px;
  float: left;
  width: 100%;
  font-weight: bold;
}
#school-colors-modal .pick-colors .colors-box-1 div {
  width: 30px;
  height: 30px;
  float: left;
  margin: 1px;
  cursor: pointer;
}
#school-colors-modal .pick-colors .colors-box-1 div:nth-child(11),
#school-colors-modal .pick-colors .colors-box-1 div:nth-child(15) {
  clear: both;
}
#school-colors-modal .pick-colors .colors-box-1-selection {
  margin-top: 5px;
  width: 320px;
  height: 30px;
  float: left;
}
#school-colors-modal .pick-colors .colors-box-2 div {
  width: 30px;
  height: 30px;
  float: left;
  margin: 1px;
  cursor: pointer;
}
#school-colors-modal .pick-colors .colors-box-2 div:nth-child(11),
#school-colors-modal .pick-colors .colors-box-2 div:nth-child(21) {
  clear: both;
}
#school-colors-modal .pick-colors .colors-box-2-selection {
  margin-top: 5px;
  width: 320px;
  height: 30px;
  float: left;
}
#school-colors-modal .store-example {
  width: 560px;
  background-color: #fff;
  padding-left: 15px;
  float: left;
}
#school-colors-modal .store-example .examples {
  width: 554px;
  height: 326px;
  background: url("img/background.jpg") center center no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  border-bottom-left-radius: 320px 102px;
  border-bottom-right-radius: 320px 102px;
}
#school-colors-modal .store-example .examples .customize-book {
  width: 545px;
  height: 326px;
  top: 50px;
  position: relative;
}
#school-colors-modal .store-example .examples .customize-book .book-pages {
  background-color: #4169E1;
}
#school-colors-modal .store-example .examples .customize-book .secondary-darker-fill {
  -webkit-filter: brightness(25%);
}
#student-list-modal .modal-footer {
  padding: 0;
  margin: 0;
}
#student-list-modal .modal-footer button {
  float: right;
}
#student-list-modal .modal-footer .total-names-selected {
  position: relative;
  float: right;
  width: 191px;
  padding: 5px 15px;
  margin-right: 15px;
  height: 34px;
  text-align: right;
  background-color: #efefef;
  color: #585665;
  font-size: 15px;
}
#student-list-modal .modal-footer .total-names-selected .clear {
  color: #1E93DF;
  font-size: 12px;
  padding-right: 8px;
}
#student-list-modal .modal-footer .total-names-selected:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: 100%;
  top: 7px;
  border: 10px solid transparent;
  border-left: 17px solid #efefef;
}
#enter-sales-modal,
#edit-sales-modal {
  border: 0 !important;
  margin-left: -1px !important;
  user-select: text;
  background-color: #fff;
}
#enter-sales-modal .tabs-ns-itags,
#edit-sales-modal .tabs-ns-itags {
  float: left;
  height: 30px;
  width: 100%;
}
#enter-sales-modal .tabs-ns-itags .personalize,
#edit-sales-modal .tabs-ns-itags .personalize {
  font-size: 12px;
  color: #585665;
  width: 70px;
  float: left;
  padding-top: 7px;
}
#enter-sales-modal .tabs-ns-itags .tab-ns,
#edit-sales-modal .tabs-ns-itags .tab-ns {
  font-size: 12px;
  color: #585665;
  width: 150px;
  float: left;
  padding: 5px;
  padding-top: 6px;
  text-align: center;
  background-color: #a9d6f3;
}
#enter-sales-modal .tabs-ns-itags .tab-itag,
#edit-sales-modal .tabs-ns-itags .tab-itag {
  font-size: 12px;
  color: #585665;
  width: 60px;
  float: left;
  padding: 5px;
  margin-left: 1px;
  text-align: center;
}
#enter-sales-modal .left-control,
#edit-sales-modal .left-control {
  position: relative;
  top: 60%;
  cursor: pointer;
}
#enter-sales-modal .right-control,
#edit-sales-modal .right-control {
  cursor: pointer;
  position: relative;
  top: 60%;
}
#enter-sales-modal .namestamp-tabs,
#edit-sales-modal .namestamp-tabs {
  display: inline-block;
  position: relative;
  width: 8em;
  height: 3.3em;
}
#enter-sales-modal .one-icon,
#edit-sales-modal .one-icon {
  width: 50px;
  text-align: center;
  float: left;
  top: 45px;
  position: relative;
}
#enter-sales-modal .center-namestamp-block-Add .col-xs-2,
#edit-sales-modal .center-namestamp-block-Add .col-xs-2 {
  width: 69px !important;
}
#enter-sales-modal .center-namestamp-block-Add .col-xs-2 input[type="number"],
#edit-sales-modal .center-namestamp-block-Add .col-xs-2 input[type="number"] {
  width: 55px;
  color: #585665;
  font-size: 15px;
}
#enter-sales-modal .center-namestamp-block-Add .five-icons,
#edit-sales-modal .center-namestamp-block-Add .five-icons {
  width: 345px;
}
#enter-sales-modal .center-namestamp-block-Add .headline-area,
#edit-sales-modal .center-namestamp-block-Add .headline-area {
  width: 246px;
  float: left;
  padding: 5px;
}
#enter-sales-modal .center-namestamp-block-Add .headline-area .headline,
#edit-sales-modal .center-namestamp-block-Add .headline-area .headline {
  font-size: 15px;
  color: #585665;
  padding: 5px;
}
#enter-sales-modal .center-namestamp-block-Add .max-text,
#edit-sales-modal .center-namestamp-block-Add .max-text {
  width: 83px;
  padding-top: 10px;
  float: left;
}
#enter-sales-modal .cp-icon-container,
#edit-sales-modal .cp-icon-container {
  width: 55px;
  height: 55px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  float: left;
  margin-right: 6px;
  border: 0.5px solid #585665;
}
#enter-sales-modal .cp-icon-container .visually-hidden,
#edit-sales-modal .cp-icon-container .visually-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
#enter-sales-modal .cp-icon-container .cp-add-button-container,
#edit-sales-modal .cp-icon-container .cp-add-button-container {
  height: 20px;
  width: 20px;
  text-align: center;
  background-color: #2093DF;
  margin: 0 auto;
  margin-top: 3px;
}
#enter-sales-modal .cp-icon-container .cp-input-field,
#edit-sales-modal .cp-icon-container .cp-input-field {
  width: 49px;
  height: 25px !important;
  text-align: center;
  margin: 0 auto;
  margin-top: 3px;
  border: 0.5px solid #c4c4cc;
}
#enter-sales-modal .cp-icon-container .cp-icon-image,
#edit-sales-modal .cp-icon-container .cp-icon-image {
  width: 53px;
}
#enter-sales-modal .cp-icon-container .cp-icon-image .cp-icon-image-img,
#edit-sales-modal .cp-icon-container .cp-icon-image .cp-icon-image-img {
  height: 53px;
  width: 53px;
  display: block;
  margin: 0 auto;
}
#enter-sales-modal .cp-icon-container .selectable-disabled-text,
#edit-sales-modal .cp-icon-container .selectable-disabled-text {
  color: #585665;
  background-color: transparent;
  border: none;
  font-size: 12px;
  line-height: 12px;
  height: 20px !important;
}
#enter-sales-modal .cp-icon-container .plus-icon,
#edit-sales-modal .cp-icon-container .plus-icon {
  height: 20px;
  width: 20px;
}
#enter-sales-modal .cp-icon-container .plus-icon .fa-plus,
#edit-sales-modal .cp-icon-container .plus-icon .fa-plus {
  height: 9.9px;
  width: 9.9px;
  font-size: 14px;
}
#enter-sales-modal .cp-icon-container .plus-icon .fa-plus::before,
#edit-sales-modal .cp-icon-container .plus-icon .fa-plus::before {
  color: white;
}
#enter-sales-modal .cp-icon-container .delete-icon,
#edit-sales-modal .cp-icon-container .delete-icon {
  position: absolute;
  right: 0px;
  top: 0;
  width: 20px;
  text-align: center;
  display: block;
}
#enter-sales-modal .cp-icon-container .delete-icon .delete-icon-selector,
#edit-sales-modal .cp-icon-container .delete-icon .delete-icon-selector {
  color: #A30000;
  font-size: 15px;
  width: 20px;
  right: 0px;
  position: absolute;
}
#enter-sales-modal .cp-icon-container .delete-icon .fa-times,
#edit-sales-modal .cp-icon-container .delete-icon .fa-times {
  color: #A30000;
  font-size: 20px;
}
#enter-sales-modal .center-iTag-block-Add,
#edit-sales-modal .center-iTag-block-Add {
  width: 350px;
  float: right;
  margin-left: 5px;
}
#enter-sales-modal .center-iTag-block-Add .col-xs-2,
#edit-sales-modal .center-iTag-block-Add .col-xs-2 {
  width: 69px !important;
}
#enter-sales-modal .center-iTag-block-Add .col-xs-2 input[type="number"],
#edit-sales-modal .center-iTag-block-Add .col-xs-2 input[type="number"] {
  width: 55px;
  color: #585665;
  font-size: 15px;
}
#enter-sales-modal .center-iTag-block-Add .five-icons,
#edit-sales-modal .center-iTag-block-Add .five-icons {
  width: 345px;
}
#enter-sales-modal .center-iTag-block-Add .headline-area,
#edit-sales-modal .center-iTag-block-Add .headline-area {
  width: 246px;
  float: left;
  padding: 5px;
}
#enter-sales-modal .center-iTag-block-Add .headline-area .headline,
#edit-sales-modal .center-iTag-block-Add .headline-area .headline {
  font-size: 15px;
  color: #585665;
  padding: 5px;
}
#enter-sales-modal .center-iTag-block-Add .max-text,
#edit-sales-modal .center-iTag-block-Add .max-text {
  width: 83px;
  padding-top: 10px;
}
#enter-sales-modal #print-sales-modal .sales-year,
#edit-sales-modal #print-sales-modal .sales-year {
  font-size: 15px;
  color: red;
}
#enter-sales-modal .activeTab:after,
#edit-sales-modal .activeTab:after {
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #a9d6f3;
}
#enter-sales-modal .headline,
#edit-sales-modal .headline {
  height: 35px !important;
  width: 330px;
  padding: 10px 10px 10px 4px;
}
#enter-sales-modal .headline::placeholder,
#edit-sales-modal .headline::placeholder {
  color: #98989b;
}
#enter-sales-modal .edit-sales-box,
#edit-sales-modal .edit-sales-box {
  user-select: text;
  padding-top: 15px;
  /* Firefox */
}
#enter-sales-modal .edit-sales-box input::-webkit-outer-spin-button,
#edit-sales-modal .edit-sales-box input::-webkit-outer-spin-button,
#enter-sales-modal .edit-sales-box input::-webkit-inner-spin-button,
#edit-sales-modal .edit-sales-box input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#enter-sales-modal .edit-sales-box input[type=number],
#edit-sales-modal .edit-sales-box input[type=number] {
  -moz-appearance: textfield;
}
#enter-sales-modal .edit-sales-box .edit-content,
#edit-sales-modal .edit-sales-box .edit-content {
  width: 883px;
  float: left;
  user-select: text;
  padding-left: 15px;
  padding-right: 30px;
}
#enter-sales-modal .edit-sales-box .ns-itag,
#edit-sales-modal .edit-sales-box .ns-itag {
  padding-left: 110px !important;
  opacity: 0.2;
}
#enter-sales-modal .edit-sales-box .add-all-sales-box,
#edit-sales-modal .edit-sales-box .add-all-sales-box {
  padding: 0 !important;
}
#enter-sales-modal .edit-sales-box .arrows,
#edit-sales-modal .edit-sales-box .arrows {
  height: 400px;
  padding: 0;
  width: 30px;
}
#enter-sales-modal .edit-business-sales-box,
#edit-sales-modal .edit-business-sales-box {
  padding-top: 15px;
}
#enter-sales-modal .edit-business-sales-box .edit-content,
#edit-sales-modal .edit-business-sales-box .edit-content {
  width: 883px;
  float: left;
}
#enter-sales-modal .edit-business-sales-box .ns-itag,
#edit-sales-modal .edit-business-sales-box .ns-itag {
  padding-left: 110px !important;
  opacity: 0.2;
}
#enter-sales-modal .edit-business-sales-box .add-all-sales-box,
#edit-sales-modal .edit-business-sales-box .add-all-sales-box {
  padding: 0 !important;
}
#enter-sales-modal .edit-business-sales-box .arrows,
#edit-sales-modal .edit-business-sales-box .arrows {
  height: 241px;
  float: left;
  padding: 0;
  width: 30px;
}
#enter-sales-modal .edit-business-sales-box button,
#edit-sales-modal .edit-business-sales-box button {
  font-size: 12px !important;
  margin-top: 30px !important;
}
#enter-sales-modal .adDropDowns,
#edit-sales-modal .adDropDowns {
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  width: 222px !important;
  float: left;
  padding-left: 30px;
}
#enter-sales-modal .adDropDowns .ad-selection,
#edit-sales-modal .adDropDowns .ad-selection {
  font-size: 12px;
}
#enter-sales-modal .adDropDowns .ad-selection div:first-child,
#edit-sales-modal .adDropDowns .ad-selection div:first-child {
  width: 60px;
  float: left;
}
#enter-sales-modal .adDropDowns .ad-selection div:nth-child(2),
#edit-sales-modal .adDropDowns .ad-selection div:nth-child(2) {
  width: 80px;
  float: left;
}
#enter-sales-modal .modal-header,
#edit-sales-modal .modal-header {
  padding: 7px 15px 0 15px;
  border-bottom: unset;
}
#enter-sales-modal .enter-sales,
#edit-sales-modal .enter-sales {
  padding-right: 30px;
  width: 100%;
  margin-bottom: 19px;
}
#enter-sales-modal .enter-sales-tabs,
#edit-sales-modal .enter-sales-tabs {
  display: flex;
}
#enter-sales-modal .enterSalesFieldText,
#edit-sales-modal .enterSalesFieldText {
  color: #98989b !important;
}
#enter-sales-modal .tab-on,
#edit-sales-modal .tab-on {
  background-color: #a9d6f3;
  color: #585665 !important;
  font-size: 15px;
}
#enter-sales-modal .tab-yearbook-sales,
#edit-sales-modal .tab-yearbook-sales {
  color: #2093df;
  width: 123px;
  font-size: 15px;
  margin-right: 15px;
  padding: 4px;
  text-align: center;
}
#enter-sales-modal .tab-all-sales,
#edit-sales-modal .tab-all-sales {
  color: #2093df;
  width: 123px;
  font-size: 15px;
  margin-right: 15px;
  padding: 4px;
  text-align: center;
}
#enter-sales-modal .tab-business-ads,
#edit-sales-modal .tab-business-ads {
  color: #2093df;
  width: 123px;
  font-size: 15px;
  margin-right: 15px;
  padding: 4px;
  text-align: center;
}
#enter-sales-modal .add-yearbook-box,
#edit-sales-modal .add-yearbook-box {
  padding: 0;
}
#enter-sales-modal .add-yearbook-box .yearbook-price-text,
#edit-sales-modal .add-yearbook-box .yearbook-price-text {
  color: #1E93DF;
  float: left;
  text-align: right;
  width: 48px;
  padding-top: 13px;
  font-weight: normal;
  margin-top: -10px;
}
#enter-sales-modal .add-yearbook-box .yearbook-price-box,
#edit-sales-modal .add-yearbook-box .yearbook-price-box {
  float: left;
  padding: 4px 1px;
  height: 48px;
  width: 77px;
}
#enter-sales-modal .add-yearbook-box .yearbook-price-box .yearbook-price-box-field,
#edit-sales-modal .add-yearbook-box .yearbook-price-box .yearbook-price-box-field {
  width: 53px;
  font-size: 15px;
}
#enter-sales-modal .add-yearbook-box .required-add-sales,
#edit-sales-modal .add-yearbook-box .required-add-sales {
  float: right;
  width: 74px;
  color: #98989b;
  font-size: 12px;
  position: absolute;
  right: 14px;
  top: 108px;
}
#enter-sales-modal .add-yearbook-box .choose-students,
#edit-sales-modal .add-yearbook-box .choose-students {
  float: left;
  color: #1E93DF;
  top: -13px;
  position: relative;
  left: 5px;
  font-size: 12px;
  height: 25px;
  width: 130px;
  padding-top: 5px;
}
#enter-sales-modal .add-yearbook-box .choose-students:after,
#edit-sales-modal .add-yearbook-box .choose-students:after,
#enter-sales-modal .add-yearbook-box .choose-students:before,
#edit-sales-modal .add-yearbook-box .choose-students:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
#enter-sales-modal .add-yearbook-box .choose-students:after,
#edit-sales-modal .add-yearbook-box .choose-students:after {
  border-color: rgba(213, 0, 0, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -50px;
}
#enter-sales-modal .add-yearbook-box .choose-students:before,
#edit-sales-modal .add-yearbook-box .choose-students:before {
  border-color: rgba(0, 0, 0, 0);
  border-width: 36px;
  margin-left: -36px;
}
#enter-sales-modal .add-yearbook-box .box-data,
#edit-sales-modal .add-yearbook-box .box-data {
  width: 100%;
  color: #fff;
  padding: 0;
}
#enter-sales-modal .add-yearbook-box .box-data .thumbs,
#edit-sales-modal .add-yearbook-box .box-data .thumbs {
  width: 0;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box,
#edit-sales-modal .add-yearbook-box .box-data .left-box {
  width: 100%;
  height: 102px;
  padding: 10px;
  color: #585665;
  font-size: 15px;
  background: #EFEFEF;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex {
  display: flex;
  width: 100%;
  align-items: flex-start;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .yearbook-for,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .yearbook-for {
  display: flex;
  padding: 0px 10px 0px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-column,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-column.left-box-tall-input select,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-column.left-box-tall-input select,
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-column.left-box-tall-input input,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-column.left-box-tall-input input {
  height: 35px;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student {
  padding: 0;
  flex: 2;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .student-display-box,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .student-display-box {
  position: relative;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .student-display-box .row.student-name-display,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .student-display-box .row.student-name-display {
  position: absolute;
  top: 6px;
  width: 106%;
  left: -6px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .student-display-box .row.student-name-display .ng-binding,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .student-display-box .row.student-name-display .ng-binding {
  padding-left: 2px;
  float: unset;
  width: 80%;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .group-name-display,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .group-name-display {
  position: relative;
  width: 60%;
  display: flex;
  align-items: center;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .group-name-display .row,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .group-name-display .row {
  position: absolute;
  width: 100%;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .already-bought-message,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-student .already-bought-message {
  font-size: 14px;
  color: #F00;
  width: 250px;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .form-control,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .form-control {
  border: 0.5px solid #C4C4CB;
  border-right: 0;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .input-group.dd_section,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .input-group.dd_section {
  width: 100%;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-homeroom,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-homeroom {
  padding: 0;
  flex: 1;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-homeroom .form-control,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-homeroom .form-control {
  border-right: 0.5px solid #C4C4CB;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-homeroom .form-control.expanded,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-homeroom .form-control.expanded {
  height: 35px;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-grade,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-grade {
  padding: 0;
  flex: 1;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-required,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-flex .left-box-required {
  padding: 0;
  flex: 0.36;
  align-self: stretch;
  font-size: 11px;
  text-align: right;
  margin-right: 5px;
}
#enter-sales-modal .add-yearbook-box .box-data .left-box .left-box-up-arrow,
#edit-sales-modal .add-yearbook-box .box-data .left-box .left-box-up-arrow {
  position: absolute;
  left: 37px;
  top: 95px;
}
#enter-sales-modal .add-yearbook-box .box-data .choose-students.choose-yearbook-only,
#edit-sales-modal .add-yearbook-box .box-data .choose-students.choose-yearbook-only {
  font-size: 15px;
  float: unset;
  height: unset;
  padding: 0;
  top: unset;
  left: unset;
  width: fit-content;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box,
#edit-sales-modal .add-yearbook-box .box-data .right-box {
  padding: 16px 30px 18px 15px;
  color: #585665;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container {
  width: 100%;
  display: flex;
  background-color: white;
  position: relative;
  margin-top: 13px;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .sales-modal-note,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .sales-modal-note {
  flex: 1;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .sales-modal-note textarea,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .sales-modal-note textarea {
  color: #757575;
  display: flex;
  width: 435px;
  height: 100%;
  padding: 4px 10px 10px 3px;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 0.5px solid #767676;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right {
  flex: 1;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .print-invoice,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .print-invoice {
  display: flex;
  align-items: center;
  font-size: 15px;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .print-invoice span,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .print-invoice span {
  padding-left: 8px;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .addSales,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .addSales {
  font-size: 18px;
  color: #fff;
  height: 33px;
  margin-top: 5px;
  background-color: #2093df;
  padding: 4px 15px 4px 15px;
  border: unset;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-box,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-box .yearbook-price-box-field,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-box .yearbook-price-box-field {
  width: 80%;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-box .reset-total,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-box .reset-total {
  position: absolute;
  bottom: -9px;
  right: 12px;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-text,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row .yearbook-price-text {
  float: unset;
  padding: 0;
  text-align: right;
  padding-right: 42px;
  margin-top: 0;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row > *,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .yearbook-box-price-row > * {
  width: 120px;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .paid-price-row,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .paid-price-row {
  align-items: flex-start;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .paid-price-row .yearbook-price-box-field,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .paid-price-row .yearbook-price-box-field {
  position: absolute;
  top: -5px;
}
#enter-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .total-price-row,
#edit-sales-modal .add-yearbook-box .box-data .right-box .right-box-flex-container .right-box-right .total-price-row {
  margin-bottom: 9px;
}
#enter-sales-modal .modal-body.all-sales-modal-body,
#edit-sales-modal .modal-body.all-sales-modal-body {
  padding: 0px;
}
#enter-sales-modal .add-all-sales-box .form-grid,
#edit-sales-modal .add-all-sales-box .form-grid {
  display: grid;
  grid-template-columns: 94px 1fr;
  width: 100%;
  gap: 8px;
  row-gap: 0px;
  align-items: start;
  padding: 10px 10px 0px 10px;
  font-family: sans-serif;
  background: #EFEFEF;
}
#enter-sales-modal .add-all-sales-box .main-label,
#edit-sales-modal .add-all-sales-box .main-label {
  font-weight: 400;
  font-size: 15px;
  align-self: center;
  text-align: right;
  margin-top: 10px;
}
#enter-sales-modal .add-all-sales-box .form-fields,
#edit-sales-modal .add-all-sales-box .form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#enter-sales-modal .add-all-sales-box .form-group,
#edit-sales-modal .add-all-sales-box .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  justify-content: flex-start;
}
#enter-sales-modal .add-all-sales-box .form-control,
#edit-sales-modal .add-all-sales-box .form-control {
  height: 32px;
}
#enter-sales-modal .add-all-sales-box .form-group:nth-child(1),
#edit-sales-modal .add-all-sales-box .form-group:nth-child(1) {
  flex: 2;
  /* Student Name */
}
#enter-sales-modal .add-all-sales-box .form-group:nth-child(2),
#edit-sales-modal .add-all-sales-box .form-group:nth-child(2) {
  flex: 1;
  /* Grade */
}
#enter-sales-modal .add-all-sales-box .form-group:nth-child(3),
#edit-sales-modal .add-all-sales-box .form-group:nth-child(3) {
  flex: 1.5;
  /* Homeroom */
}
#enter-sales-modal .add-all-sales-box .form-row,
#edit-sales-modal .add-all-sales-box .form-row {
  display: flex;
  padding: 0px;
}
#enter-sales-modal .add-all-sales-box .form-group label,
#edit-sales-modal .add-all-sales-box .form-group label {
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 12px;
}
#enter-sales-modal .add-all-sales-box .input-wrapper,
#edit-sales-modal .add-all-sales-box .input-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 0px;
  padding: 3px 7px 2px 6px;
  background: #fff;
  max-width: 400px;
  cursor: text;
}
#enter-sales-modal .add-all-sales-box .user-chip,
#edit-sales-modal .add-all-sales-box .user-chip {
  display: flex;
  align-items: center;
  background-color: #eef3f9;
  border-color: light-dark(#767676, #858585);
  border-radius: 16px;
  padding: 0px 5px;
  font-size: 14px;
  margin: 0;
}
#enter-sales-modal .add-all-sales-box .user-chip img,
#edit-sales-modal .add-all-sales-box .user-chip img {
  width: 16px;
  height: 16px;
  border-radius: 25%;
  margin-right: 6px;
}
#enter-sales-modal .add-all-sales-box .user-name,
#edit-sales-modal .add-all-sales-box .user-name {
  margin-right: 8px;
  white-space: nowrap;
}
#enter-sales-modal .add-all-sales-box .remove-btn,
#edit-sales-modal .add-all-sales-box .remove-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 16px;
  cursor: pointer;
}
#enter-sales-modal .add-all-sales-box .remove-btn:hover,
#edit-sales-modal .add-all-sales-box .remove-btn:hover {
  color: #d00;
}
#enter-sales-modal .add-all-sales-box .text-input,
#edit-sales-modal .add-all-sales-box .text-input {
  flex: 1;
  min-width: 80px;
  outline: none;
}
#enter-sales-modal .add-all-sales-box .box-data,
#edit-sales-modal .add-all-sales-box .box-data {
  height: 117px;
  width: 100%;
  color: #585665 !important;
  padding: 8px;
  background-color: #dfdfdf;
  float: left;
}
#enter-sales-modal .add-all-sales-box .box-data .thumbs,
#edit-sales-modal .add-all-sales-box .box-data .thumbs {
  width: 0;
}
#enter-sales-modal .add-all-sales-box .box-data .add-buyer,
#edit-sales-modal .add-all-sales-box .box-data .add-buyer {
  width: 100%;
  height: 36px;
  float: left;
}
#enter-sales-modal .add-all-sales-box .box-data .add-buyer div,
#edit-sales-modal .add-all-sales-box .box-data .add-buyer div {
  float: left;
}
#enter-sales-modal .add-all-sales-box .box-data .add-buyer .add-buyer-text,
#edit-sales-modal .add-all-sales-box .box-data .add-buyer .add-buyer-text {
  color: #1E93DF;
  font-size: 12px;
  width: 128px;
  padding-top: 8px;
  padding-right: 4px;
  text-align: right;
}
#enter-sales-modal .add-all-sales-box .box-data .add-buyer .ab-name input[type=text],
#edit-sales-modal .add-all-sales-box .box-data .add-buyer .ab-name input[type=text] {
  width: 280px;
  margin-right: 1px;
}
#enter-sales-modal .add-all-sales-box .box-data .add-buyer .ab-email input[type=text],
#edit-sales-modal .add-all-sales-box .box-data .add-buyer .ab-email input[type=text] {
  width: 180px;
}
#enter-sales-modal .add-all-sales-box .box-data .add-buyer .ab-phone input[type=text],
#edit-sales-modal .add-all-sales-box .box-data .add-buyer .ab-phone input[type=text] {
  width: 134px;
  margin-right: 1px;
}
#enter-sales-modal .add-all-sales-box .box-data .add-buyer .ab-required,
#edit-sales-modal .add-all-sales-box .box-data .add-buyer .ab-required {
  color: red;
  font-size: 12px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box,
#edit-sales-modal .add-all-sales-box .select-packages-box {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: #585665;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .top-row,
#edit-sales-modal .add-all-sales-box .select-packages-box .top-row {
  display: flex;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .top-row .checkbox-spacing,
#edit-sales-modal .add-all-sales-box .select-packages-box .top-row .checkbox-spacing {
  display: flex;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .left-options,
#edit-sales-modal .add-all-sales-box .select-packages-box .left-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 339px;
  border-right: 1px solid #e0e0e0;
  padding: 7px 14px;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container {
  margin-left: auto;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container .yearbook-price,
#edit-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container .yearbook-price {
  font-size: 15px;
  color: #1E93DF;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container .edit-price-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container .edit-price-container {
  display: flex;
  align-items: center;
  gap: 14px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container .edit-price-container .reset-box,
#edit-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container .edit-price-container .reset-box {
  display: flex;
  flex-direction: column;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container.edit-mode,
#edit-sales-modal .add-all-sales-box .select-packages-box .left-options .yearbook-price-container.edit-mode {
  background-color: #efefef;
  z-index: 1;
  position: absolute;
  padding: 3px 6px;
  right: 0px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .right-columns,
#edit-sales-modal .add-all-sales-box .select-packages-box .right-columns {
  padding: 7px 14px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .right-columns .option-col,
#edit-sales-modal .add-all-sales-box .select-packages-box .right-columns .option-col {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  /* 3 rows */
  grid-auto-flow: column;
  /* fill columns top-to-bottom */
  column-gap: 15px;
  row-gap: 4px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .right-columns .option-col .checkbox-spacing,
#edit-sales-modal .add-all-sales-box .select-packages-box .right-columns .option-col .checkbox-spacing {
  display: flex;
  align-items: center;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .bottom-row,
#edit-sales-modal .add-all-sales-box .select-packages-box .bottom-row {
  border-top: 1px solid #e0e0e0;
  padding-top: 12px;
  padding-bottom: 11px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .yearbook-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .yearbook-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* This aligns label left, price right */
  width: 100%;
  height: 32px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .yearbook-with-price-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .yearbook-with-price-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .package-with-select-dropdown-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .package-with-select-dropdown-container {
  display: flex;
  align-items: center;
  width: 100%;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .yearbook-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .yearbook-container {
  flex: 1;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .package-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .package-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 32px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .package-select-dropdown-container,
#edit-sales-modal .add-all-sales-box .select-packages-box .package-select-dropdown-container {
  height: 32px;
  align-items: center;
  display: flex;
  margin-left: 14px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .dropdown-menu,
#edit-sales-modal .add-all-sales-box .select-packages-box .dropdown-menu {
  float: right;
  top: 85px;
  padding: 0px 0;
  margin: 0px 0 0;
  left: revert;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .dropdown-menu li a,
#edit-sales-modal .add-all-sales-box .select-packages-box .dropdown-menu li a {
  padding: 10px 20px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .dropdown-menu li a:hover,
#edit-sales-modal .add-all-sales-box .select-packages-box .dropdown-menu li a:hover {
  background-color: #A9D6F3;
  background-image: none;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .column-package .package-dd,
#edit-sales-modal .add-all-sales-box .select-packages-box .column-package .package-dd {
  font-size: 15px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .column-options,
#edit-sales-modal .add-all-sales-box .select-packages-box .column-options {
  width: 200px;
  height: 100% !important;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .column-options div,
#edit-sales-modal .add-all-sales-box .select-packages-box .column-options div {
  width: 192px !important;
  float: left;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .wideColumn,
#edit-sales-modal .add-all-sales-box .select-packages-box .wideColumn {
  width: 385px !important;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .ad-selection,
#edit-sales-modal .add-all-sales-box .select-packages-box .ad-selection {
  display: flex;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .ad-size-dropdown,
#edit-sales-modal .add-all-sales-box .select-packages-box .ad-size-dropdown {
  padding-left: 30px;
  width: 80px;
  display: flex;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .ad-color-dropdown,
#edit-sales-modal .add-all-sales-box .select-packages-box .ad-color-dropdown {
  display: flex;
  width: 103px;
  padding-left: 28px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .yearbook-price,
#edit-sales-modal .add-all-sales-box .select-packages-box .yearbook-price {
  display: flex;
  width: 93px;
  padding-left: 38px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .ad-color-dropdown .dropdown-menu,
#edit-sales-modal .add-all-sales-box .select-packages-box .ad-color-dropdown .dropdown-menu,
#enter-sales-modal .add-all-sales-box .select-packages-box .ad-size-dropdown .dropdown-menu,
#edit-sales-modal .add-all-sales-box .select-packages-box .ad-size-dropdown .dropdown-menu {
  top: 22px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .column-ad,
#edit-sales-modal .add-all-sales-box .select-packages-box .column-ad {
  display: flex;
  border-top: 0;
  padding-left: 14px;
  border-bottom: 0;
  border-right: 0;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #e2e2e2 48%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .column-ad .ad-selection,
#edit-sales-modal .add-all-sales-box .select-packages-box .column-ad .ad-selection {
  font-size: 15px;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .column-ad .ad-selection div:nth-child(4),
#edit-sales-modal .add-all-sales-box .select-packages-box .column-ad .ad-selection div:nth-child(4) {
  float: left;
  width: 80px !important;
}
#enter-sales-modal .add-all-sales-box .select-packages-box .column-ad .ad-selection .no-edit-ad,
#edit-sales-modal .add-all-sales-box .select-packages-box .column-ad .ad-selection .no-edit-ad {
  font-size: 15px !important;
}
#enter-sales-modal .add-all-sales-box .all-sales-white-bg,
#edit-sales-modal .add-all-sales-box .all-sales-white-bg {
  background-color: #fff;
}
#enter-sales-modal .add-all-sales-box .ns-incomplete,
#edit-sales-modal .add-all-sales-box .ns-incomplete {
  float: left;
  width: 100%;
  text-align: right;
  height: 27px;
  font-size: 12px;
  color: #98989b;
  padding-right: 20px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns,
#edit-sales-modal .add-all-sales-box .all-sales-ns {
  float: left;
  width: 100%;
  border-top: 1px solid lightgrey;
  padding-top: 5px;
  padding-left: 15px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .activeTab,
#edit-sales-modal .add-all-sales-box .all-sales-ns .activeTab {
  background-color: #a9d6f3;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .activeTab:after,
#edit-sales-modal .add-all-sales-box .all-sales-ns .activeTab:after {
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #a9d6f3;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .title.Cover.Personalization,
#edit-sales-modal .add-all-sales-box .all-sales-ns .title.Cover.Personalization {
  width: 190px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .title.iTag,
#edit-sales-modal .add-all-sales-box .all-sales-ns .title.iTag {
  width: 162px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .title,
#edit-sales-modal .add-all-sales-box .all-sales-ns .title {
  width: 7.33em;
  float: left;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .title .package-name,
#edit-sales-modal .add-all-sales-box .all-sales-ns .title .package-name {
  color: #585665;
  font-size: 15px;
  padding-bottom: 15px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .title .package-description,
#edit-sales-modal .add-all-sales-box .all-sales-ns .title .package-description {
  color: #98989b;
  font-size: 12px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .no-edit,
#edit-sales-modal .add-all-sales-box .all-sales-ns .no-edit {
  font-size: 12px;
  width: 21em;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .lines,
#edit-sales-modal .add-all-sales-box .all-sales-ns .lines {
  width: 8em;
  float: left;
  margin-right: 15px;
  padding-top: 3px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .container {
  width: 35em;
  float: left;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .container .blank,
#edit-sales-modal .add-all-sales-box .all-sales-ns .container .blank {
  width: 10px;
  float: left;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .container .enter-icon,
#edit-sales-modal .add-all-sales-box .all-sales-ns .container .enter-icon {
  width: 77px;
  text-align: center;
  font-size: 12px;
  float: left;
  color: #98989b;
  top: 26px;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .container .choose-layout,
#edit-sales-modal .add-all-sales-box .all-sales-ns .container .choose-layout {
  width: 19em;
  float: left;
  height: 9em;
  background-color: #efefef;
  color: #98989b;
  font-size: 18px;
  text-align: center;
  padding-top: 60px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .container .choose-layout :before,
#edit-sales-modal .add-all-sales-box .all-sales-ns .container .choose-layout :before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #efefef transparent transparent;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 40%;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add {
  display: flex;
  justify-content: flex-end;
  position: unset;
  float: none;
  margin-top: 0;
  width: 100%;
  height: 150px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-five-icon-input .flex-container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-five-icon-input .flex-container {
  margin-bottom: 14px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container .enter-icon,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container .enter-icon {
  float: none;
  position: unset;
  text-align: left;
  font-size: 12px;
  color: #585665;
  width: 83px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container .one-icon,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container .one-icon {
  float: none;
  position: unset;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container .one-icon .cp-icon-container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-container .one-icon .cp-icon-container {
  float: none;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-input,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-input {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-input .flex-container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .itag-one-icon-input .flex-container {
  margin-top: 16px;
  justify-content: flex-end;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .textarea-feedback,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add .textarea-feedback {
  font-size: 12px;
  color: #585665;
  margin-left: 9px;
  width: 58px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add.icon-top .itag-one-icon-container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add.icon-top .itag-one-icon-container {
  justify-content: flex-start;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add.icon-top .itag-one-icon-input .flex-container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .center-iTag-block-Add.icon-top .itag-one-icon-input .flex-container {
  margin: 8px 0 8px 0;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .soft-container,
#edit-sales-modal .add-all-sales-box .all-sales-ns .soft-container {
  width: 25em;
  float: right;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .soft-container .blank,
#edit-sales-modal .add-all-sales-box .all-sales-ns .soft-container .blank {
  width: 10px;
  float: right;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .non-edit-box,
#edit-sales-modal .add-all-sales-box .all-sales-ns .non-edit-box {
  border: 2px #dfdfdf solid;
  padding: 10px;
  margin-bottom: 45px;
}
#enter-sales-modal .add-all-sales-box .all-sales-ns .non-edit-box div,
#edit-sales-modal .add-all-sales-box .all-sales-ns .non-edit-box div {
  width: 70px;
  text-align: center;
  float: left;
}
#enter-sales-modal .add-all-sales-box .ns-itag,
#edit-sales-modal .add-all-sales-box .ns-itag {
  border-top: 1px solid #c4c4cc;
  border-bottom: 1px solid #c4c4cc;
  height: 190px;
  float: left;
  padding: 15px 0;
}
#enter-sales-modal .add-all-sales-box .ns-itag .arrow-left,
#edit-sales-modal .add-all-sales-box .ns-itag .arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid blue;
}
#enter-sales-modal .add-all-sales-box .ns-itag .arrow-right,
#edit-sales-modal .add-all-sales-box .ns-itag .arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid blue;
}
#enter-sales-modal .add-all-sales-box .ns-itag .option-arrow,
#edit-sales-modal .add-all-sales-box .ns-itag .option-arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 17px solid #a9d6f3;
  position: absolute;
  top: 11px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .active-option,
#edit-sales-modal .add-all-sales-box .ns-itag .active-option {
  background-color: #a9d6f3 !important;
}
#enter-sales-modal .add-all-sales-box .ns-itag .left-arrow-box,
#edit-sales-modal .add-all-sales-box .ns-itag .left-arrow-box {
  float: left;
  width: 54px;
  height: 125px;
  text-align: left;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .ns-itag .left-arrow-box .click-left,
#edit-sales-modal .add-all-sales-box .ns-itag .left-arrow-box .click-left {
  width: 10px;
  height: 30px;
  background-color: lightblue;
  position: absolute;
  top: 50px;
  left: 0;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box {
  float: left;
  width: 120px;
  background-color: #fff !important;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 {
  height: 49.5px;
  padding: 4px 0 4px 4px;
  font-size: 12px;
  color: #585665;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1:hover,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1:hover {
  cursor: pointer;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:first-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:first-child {
  float: left;
  width: 99px;
  height: 100%;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:first-child div,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:first-child div {
  text-align: center;
  max-height: 18px;
  padding: 0;
  width: 100%;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:first-child div:last-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:first-child div:last-child {
  text-align: center;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:last-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-1 div:last-child {
  float: left;
  width: 15px;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 {
  height: 49.5px;
  font-size: 12px;
  color: #585665;
  padding: 4px 0 4px 4px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:first-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:first-child {
  float: left;
  width: 99px;
  height: 100%;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:first-child div:first-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:first-child div:first-child {
  float: left;
  width: 20px;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 13px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:first-child div:last-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:first-child div:last-child {
  float: left;
  height: 100%;
  width: 78px;
  top: 4px;
  left: 21px;
  position: absolute;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:last-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-2 div:last-child {
  float: left;
  width: 15px;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 {
  height: 49.5px;
  font-size: 12px;
  color: #585665;
  padding: 4px 0 4px 4px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:first-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:first-child {
  float: left;
  width: 99px;
  height: 100%;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:first-child div:first-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:first-child div:first-child {
  float: left;
  width: 20px;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 13px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:first-child div:last-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:first-child div:last-child {
  float: left;
  height: 100%;
  width: 78px;
  top: 14px;
  left: 21px;
  position: absolute;
}
#enter-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:last-child,
#edit-sales-modal .add-all-sales-box .ns-itag .select-line-box .option-box-3 div:last-child {
  float: left;
  width: 15px;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .ns-itag .enter-select-icon-box,
#edit-sales-modal .add-all-sales-box .ns-itag .enter-select-icon-box {
  float: left;
  width: 75px;
  height: 145px;
  position: relative;
  padding-left: 15px;
  background-color: #fff;
}
#enter-sales-modal .add-all-sales-box .ns-itag .enter-select-icon-box div,
#edit-sales-modal .add-all-sales-box .ns-itag .enter-select-icon-box div {
  top: 41.25px;
  color: #98989b;
  font-size: 12px;
  text-align: center;
  position: absolute;
}
#enter-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box,
#edit-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box {
  float: left;
  width: 496px;
  padding: 4px 0 0 8px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .title-data-1,
#edit-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .title-data-1 {
  padding: 0 4px 12px 0;
}
#enter-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .title-data-1 input[type=text],
#edit-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .title-data-1 input[type=text] {
  width: 315px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .option-table-1 table tr:first-child td:nth-child(odd) div,
#edit-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .option-table-1 table tr:first-child td:nth-child(odd) div {
  padding: 4px;
  font-size: 15px;
  color: #585665;
  border: 1px solid #c4c4cc;
}
#enter-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .option-table-1 table tr:nth-child(2) td:nth-child(odd),
#edit-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .option-table-1 table tr:nth-child(2) td:nth-child(odd) {
  padding: 4px 0 0 0;
  font-size: 2em;
  color: #585665;
  text-align: center;
}
#enter-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .option-table-1 table td:nth-child(even),
#edit-sales-modal .add-all-sales-box .ns-itag .customize-namestamp-box .option-table-1 table td:nth-child(even) {
  width: 22.5px;
}
#enter-sales-modal .add-all-sales-box .ns-itag .right-arrow-box,
#edit-sales-modal .add-all-sales-box .ns-itag .right-arrow-box {
  float: left;
  width: 54px;
  height: 125px;
  text-align: right;
  position: relative;
}
#enter-sales-modal .add-all-sales-box .ns-itag .right-arrow-box .click-right,
#edit-sales-modal .add-all-sales-box .ns-itag .right-arrow-box .click-right {
  width: 10px;
  height: 30px;
  background-color: lightblue;
  position: absolute;
  top: 50px;
  right: 0;
}
#enter-sales-modal .add-for-choose,
#edit-sales-modal .add-for-choose {
  width: 100%;
  height: 30px;
  float: left;
}
#enter-sales-modal .add-for-choose .choose-students,
#edit-sales-modal .add-for-choose .choose-students {
  float: left;
  color: #1E93DF;
  position: relative;
  left: 30px;
  font-size: 15px;
  height: 25px;
  width: 150px;
  padding-top: 5px;
}
#enter-sales-modal .add-for-choose .choose-students:after,
#edit-sales-modal .add-for-choose .choose-students:after,
#enter-sales-modal .add-for-choose .choose-students:before,
#edit-sales-modal .add-for-choose .choose-students:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
#enter-sales-modal .add-for-choose .choose-students:after,
#edit-sales-modal .add-for-choose .choose-students:after {
  border-color: rgba(213, 0, 0, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -50px;
}
#enter-sales-modal .add-for-choose .choose-students:before,
#edit-sales-modal .add-for-choose .choose-students:before {
  border-color: rgba(0, 0, 0, 0);
  border-width: 36px;
  margin-left: -36px;
}
#enter-sales-modal .add-ads-box,
#edit-sales-modal .add-ads-box {
  background-color: white;
  height: 195px;
  float: left;
  width: 100%;
  border: 0;
}
#enter-sales-modal .add-ads-box .add-for-box,
#edit-sales-modal .add-ads-box .add-for-box {
  background-color: #efefef;
  float: left;
  width: 100%;
  height: 150px;
  padding: 15px;
}
#enter-sales-modal .add-ads-box .add-for-box input[type=text],
#edit-sales-modal .add-ads-box .add-for-box input[type=text],
#enter-sales-modal .add-ads-box .add-for-box input[type=search],
#edit-sales-modal .add-ads-box .add-for-box input[type=search] {
  color: #585665;
  font-size: 15px;
  border: 1px #efefef solid;
  padding: 4px;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-box-labels,
#edit-sales-modal .add-ads-box .add-for-box .add-for-box-labels {
  float: left;
  width: 100%;
  line-height: 1;
  font-size: 10px;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-box-labels div,
#edit-sales-modal .add-ads-box .add-for-box .add-for-box-labels div {
  float: left;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-box-labels div:first-child,
#edit-sales-modal .add-ads-box .add-for-box .add-for-box-labels div:first-child {
  width: 76px;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-box-labels div:nth-child(2),
#edit-sales-modal .add-ads-box .add-for-box .add-for-box-labels div:nth-child(2) {
  width: 110px;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-box-labels div:nth-child(3),
#edit-sales-modal .add-ads-box .add-for-box .add-for-box-labels div:nth-child(3) {
  width: 285px;
  text-align: right;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-box-labels .required-add-sales,
#edit-sales-modal .add-ads-box .add-for-box .add-for-box-labels .required-add-sales {
  float: right;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-container,
#edit-sales-modal .add-ads-box .add-for-box .ad-container {
  float: left;
  width: 500px;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for,
#edit-sales-modal .add-ads-box .add-for-box .ad-for {
  width: 75px;
  float: left;
  clear: both;
  text-align: right;
  padding-top: 4px;
  padding-right: 15px;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-name,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-name {
  width: 400px;
  float: left;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-name input,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-name input {
  width: 400px;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-size,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-size {
  float: left;
  width: 100px;
  text-align: center;
  position: relative;
}
#enter-sales-modal .add-ads-box .add-for-box .add-ads-box .ad-for-size .open .dropdown-menu,
#edit-sales-modal .add-ads-box .add-for-box .add-ads-box .ad-for-size .open .dropdown-menu {
  display: block;
  position: absolute;
  max-width: 80px !important;
  width: 80px;
  min-width: 80px !important;
  top: 0;
  left: 0;
  height: 111px;
  overflow: scroll;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-color,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-color {
  float: left;
  width: 115px;
  text-align: center;
  position: relative;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-contact-name,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-contact-name {
  float: left;
  padding-left: 75px;
  width: 400px;
  clear: both;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-contact-name input,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-contact-name input {
  width: 400px;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-phone-email,
#edit-sales-modal .add-ads-box .add-for-box .add-for-phone-email {
  height: 30px;
  float: left;
  width: 800px;
}
#enter-sales-modal .add-ads-box .add-for-box .add-for-phone-email .required-add-sales,
#edit-sales-modal .add-ads-box .add-for-box .add-for-phone-email .required-add-sales {
  color: #98989b;
  font-size: 12px;
  text-align: right;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-phone,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-phone {
  float: left;
  padding-left: 75px;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-phone input,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-phone input {
  width: 130px;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-email,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-email {
  float: left;
}
#enter-sales-modal .add-ads-box .add-for-box .ad-for-email input,
#edit-sales-modal .add-ads-box .add-for-box .ad-for-email input {
  width: 220px;
}
#enter-sales-modal .show-notes-total-box,
#edit-sales-modal .show-notes-total-box {
  padding: 15px;
  width: 100%;
  position: relative;
  background-color: white;
  border-top: 1px solid lightgrey;
  display: flex;
  justify-content: space-between;
}
#enter-sales-modal .show-notes-total-box textarea,
#edit-sales-modal .show-notes-total-box textarea {
  width: 29em;
  height: 5.6em;
  padding: 7px 5px 7px 5px;
  border-color: #767676;
}
#enter-sales-modal .show-notes-total-box .add-sale-btn,
#edit-sales-modal .show-notes-total-box .add-sale-btn {
  width: 120px;
  padding: 5px 0px 0px 0px;
}
#enter-sales-modal .show-notes-total-box .add-sale-btn .disabled-button,
#edit-sales-modal .show-notes-total-box .add-sale-btn .disabled-button {
  opacity: 0.3;
}
#enter-sales-modal .show-notes-total-box .add-sale-btn .printReceipt,
#edit-sales-modal .show-notes-total-box .add-sale-btn .printReceipt {
  font-size: 12px;
  margin-top: 20px;
  padding: 4px 20px;
}
#enter-sales-modal .show-notes-total-box .add-sale-btn div:first-child,
#edit-sales-modal .show-notes-total-box .add-sale-btn div:first-child {
  font-size: 12px;
}
#enter-sales-modal .show-notes-total-box .add-sale-btn button,
#edit-sales-modal .show-notes-total-box .add-sale-btn button {
  font-size: 18px;
  color: #fff;
  height: 33px;
  background-color: #2093df;
  padding: 4px 15px 4px 15px;
  position: relative;
  bottom: 0;
  left: 0;
  border: 0 !important;
}
#enter-sales-modal .show-notes-total-box .total-paid,
#edit-sales-modal .show-notes-total-box .total-paid {
  width: 150px;
  padding: 0px 8px 0px 8px;
  margin-left: 65px;
}
#enter-sales-modal .show-notes-total-box .total-paid div,
#edit-sales-modal .show-notes-total-box .total-paid div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 15px;
  flex: 1;
}
#enter-sales-modal .show-notes-total-box .total-paid .total,
#edit-sales-modal .show-notes-total-box .total-paid .total {
  height: 30px;
  margin-bottom: 0px;
}
#enter-sales-modal .show-notes-total-box .total-paid .total div:first-child,
#edit-sales-modal .show-notes-total-box .total-paid .total div:first-child {
  text-align: right;
  color: #585665;
  font-size: 16px;
  padding-top: 5px;
}
#enter-sales-modal .show-notes-total-box .total-paid .total div:last-child,
#edit-sales-modal .show-notes-total-box .total-paid .total div:last-child {
  color: #1E93DF;
  padding-right: 0;
  padding-top: 5px;
}
#enter-sales-modal .show-notes-total-box .total-paid .total div:last-child input,
#edit-sales-modal .show-notes-total-box .total-paid .total div:last-child input {
  width: 60px;
}
#enter-sales-modal .show-notes-total-box .total-paid .paid div:first-child,
#edit-sales-modal .show-notes-total-box .total-paid .paid div:first-child {
  color: #585665;
  font-size: 16px;
  text-align: right;
  padding-top: 5px;
}
#enter-sales-modal .show-notes-total-box .total-paid .paid div:last-child,
#edit-sales-modal .show-notes-total-box .total-paid .paid div:last-child {
  color: #1E93DF;
  padding-right: 0;
  padding-top: 5px;
}
#enter-sales-modal .show-notes-total-box .total-paid .paid div:last-child input,
#edit-sales-modal .show-notes-total-box .total-paid .paid div:last-child input {
  width: 60px;
}
#enter-sales-modal .show-notes-total-box .total-paid .yearbook-price-box,
#edit-sales-modal .show-notes-total-box .total-paid .yearbook-price-box {
  padding-top: 0px;
  margin-top: -3px;
}
#enter-sales-modal .show-notes-total-box .total-paid .yearbook-price-box-field,
#edit-sales-modal .show-notes-total-box .total-paid .yearbook-price-box-field {
  padding-top: 0px;
  margin-top: -3px;
}
#enter-sales-modal .show-notes-total-box .total-paid .no-edit-paid div:first-child,
#edit-sales-modal .show-notes-total-box .total-paid .no-edit-paid div:first-child {
  color: #98989b !important;
  padding: 7px 0;
  font-weight: normal !important;
}
#enter-sales-modal .show-notes-total-box .total-paid .no-edit-paid div:last-child,
#edit-sales-modal .show-notes-total-box .total-paid .no-edit-paid div:last-child {
  color: #98989b !important;
  padding: 5px;
  font-weight: normal !important;
}
#enter-sales-modal .show-notes-total-box .total-paid .no-edit-paid span.paid-tax,
#edit-sales-modal .show-notes-total-box .total-paid .no-edit-paid span.paid-tax {
  display: flex;
  position: absolute;
  top: 64px;
  line-height: 12px;
  font-size: 12px;
  padding: 5px 0;
  color: #c4c4cc;
}
#enter-sales-modal .price-strikethrough,
#edit-sales-modal .price-strikethrough {
  text-decoration: line-through;
}
#enter-sales-modal .add-footer-box,
#edit-sales-modal .add-footer-box {
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: left;
  clear: both;
  width: 100%;
}
#enter-sales-modal .add-footer-box .footer-box,
#edit-sales-modal .add-footer-box .footer-box {
  background-color: #585665;
}
#enter-sales-modal .add-footer-box .footer-box .footer-title,
#edit-sales-modal .add-footer-box .footer-box .footer-title {
  width: 50%;
  float: left;
  font-size: 18px;
  color: #dfdfdf;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 8px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container,
#edit-sales-modal .add-footer-box .footer-box .footer-container {
  font-size: 15px;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  float: left;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header {
  width: 100%;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .scroll-add-table,
#edit-sales-modal .add-footer-box .footer-box .footer-container .scroll-add-table {
  overflow-x: hidden;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .scroll-add-table::-webkit-scrollbar-track,
#edit-sales-modal .add-footer-box .footer-box .footer-container .scroll-add-table::-webkit-scrollbar-track {
  background-color: #585665 !important;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header tr,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header tr {
  color: #c4c4cc;
  font-size: 12px;
  border-bottom: 1px solid #98989b;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td {
  padding: 4px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:first-child,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:first-child {
  width: 240px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2) {
  width: 105px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3) {
  width: 105px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4) {
  width: 120px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5) {
  width: 70px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6) {
  width: 75px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data {
  width: 100%;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td {
  padding-top: 8px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data tr,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data tr {
  color: #dfdfdf;
  font-size: 12px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td {
  padding: 4px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:first-child,
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:first-child {
  width: 240px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2) {
  width: 105px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3) {
  width: 105px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4) {
  width: 120px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5) {
  width: 70px;
}
#enter-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6),
#edit-sales-modal .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6) {
  width: 75px;
}
#enter-sales-modal .ad-sizing-container,
#edit-sales-modal .ad-sizing-container {
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  width: 350px;
  height: 34px;
  float: left;
}
#enter-sales-modal .ad-sizing-container .ad-selection .no-border-dropdown:hover,
#edit-sales-modal .ad-sizing-container .ad-selection .no-border-dropdown:hover {
  background-color: #efefef;
}
#edit-sales-modal .modal-body {
  padding: 0px;
}
#edit-sales-modal .input-group-btn.dropdown-toggle:hover {
  background-color: #fff;
}
#edit-sales-modal .enter-sales-dropdown:hover {
  background-color: #fff;
}
#edit-sales-modal .yearbook-container {
  flex: 1;
}
#edit-sales-modal #order-type-1 .add-all-sales-box .select-packages-box {
  clear: both;
  flex-direction: unset;
}
#edit-sales-modal .yearbook-price {
  font-size: 15px;
  color: #1E93DF;
  display: flex;
  width: 93px;
  padding-left: 38px;
}
#edit-sales-modal .edit-sales-box .edit-content {
  margin: 0 auto;
  float: none;
  padding-right: 15px;
}
#edit-sales-modal .add-all-sales-box .select-packages-box .right-columns {
  padding: 7px 0px 7px 7px;
}
#edit-sales-modal .add-all-sales-box .select-packages-box .right-columns .option-col {
  column-gap: 6px;
}
#edit-sales-modal .add-all-sales-box .select-packages-box .left-options {
  min-width: 330px;
}
#edit-sales-modal .total .reset-total {
  width: auto !important;
}
.activeStudentList {
  color: #555;
  background-color: #a9d6f3 !important;
  background-image: none;
}
.group-ads-display {
  width: 160px;
  position: absolute;
  left: 114px;
  top: 11px;
  color: #585665;
  font-size: 15px;
}
.group-ads-clear {
  position: absolute;
  left: 210px;
  top: 15px;
  font-size: 12px;
  color: red;
}
.names-list tr:nth-child(even) {
  background-color: #efefef;
}
.disabled-button {
  opacity: 0.3;
}
.disabled-options {
  opacity: 0.3;
  color: red;
  background-color: blue;
}
.reset-total {
  width: 100% !important;
  font-size: 12px !important;
}
.reset-total span:nth-child(2) {
  color: #1E93DF;
}
/*jing add customize dropdown for order area */
.sales-orders-dropdown {
  position: relative;
  /*Don't really need this just for demo styling*/
  float: right;
}
.sales-orders-dropdown:after {
  content: '\f078';
  font: normal normal normal 16px/1 FontAwesome;
  color: #2093df;
  right: 4px;
  top: 0px;
  height: 20px;
  padding: 3px 0px 0px 6px;
  border-left: none;
  position: absolute;
  pointer-events: none;
}
.selEleNoArrow:after {
  content: '';
}
/* IE11 hide native button (no microsoft arrow ) */
select::-ms-expand {
  display: none;
}
.sales-orders-dropdown select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  display: block;
  /*height: 22px;*/
  float: right;
  margin: 0px 0px;
  /*padding: 0px 5px;*/
  padding: 0 5px 0 5px;
  font-size: 12px;
  line-height: 1.75;
  color: #333;
  /*background-color: #ffffff; */
  background-image: none;
  border: none;
  /*1px solid #C4C4CC;*/
  -ms-word-break: normal;
  word-break: normal;
}
.sales-orders-dropdown input {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 20px;
  text-align: center;
  font-size: 12px;
  border: none;
}
/*  */
.sales-orders-dropdown option:checked {
  background: #059bff;
  /*#0ebeff;*/
  color: white;
}
.sales-orders-dropdown option:hover {
  background: lightskyblue;
}
/*end jing's adding */
/* COUPONS */
.coupon-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.coupon-form-row .coupon-row-label {
  align-self: stretch;
}
.coupon-form-row .coupon-discount-picker {
  display: flex;
  align-items: center;
  color: #585665;
}
.coupon-form-row .coupon-discount-picker .coupon-picker-button {
  background-color: #F5F5F5;
  border: 1px solid #C4C4CC;
  cursor: pointer;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  font-size: 24px;
  line-height: 15px;
}
.coupon-form-row .coupon-discount-picker .coupon-picker-button:active {
  background-color: #E0E0E0;
}
.coupon-form-row .coupon-discount-picker .coupon-picker-button:first-child {
  border-right: none;
}
.coupon-form-row .coupon-discount-picker .coupon-picker-button:nth-child(3) {
  border-left: none;
}
.coupon-form-row .coupon-discount-picker .coupon-picker-units {
  font-size: 15px;
  z-index: 2;
  margin-left: -92px;
  pointer-events: none;
}
.coupon-form-row .coupon-discount-picker.input-group .form-control {
  width: 67px;
  text-align: right;
  padding: 10px 7px;
  color: unset;
}
.coupon-form-row .coupon-sub-row {
  margin-top: 16px;
}
.coupon-form-row .coupon-inner-list .cil-item {
  margin-bottom: 10px;
}
.coupon-form-row .coupon-inner-list .cil-item.cil-last {
  margin-bottom: 0px;
}
.coupon-form-row .coupon-inner-list .cil-indent {
  margin-left: 20px;
}
.coupon-form-row .cil-radio-correction {
  margin-left: -17px;
}
.coupon-form-row .coupon-inner-list label.checkbox,
.coupon-form-row .coupon-sub-row label.checkbox {
  margin-right: 6px;
}
.coupon-form-row .coupon-date-picker {
  display: flex;
  flex-direction: column;
}
.coupon-form-row .coupon-date-picker > * {
  margin-top: 10px;
}
.coupon-form-row .coupon-date-picker > div {
  display: flex;
  align-items: center;
}
.coupon-form-row .coupon-date-picker .form-control {
  background-color: #ffffff;
}
.coupon-form-row .coupon-date-picker .coupon-date-picker-label {
  text-align: right;
}
.coupon-form-row .discount-modal-link {
  margin-left: 13px;
}
.coupon-form-row .coupon-code-container {
  width: 387px;
}
.input-flash {
  animation: flash-bg 0.4s;
}
@keyframes flash-bg {
  0% {
    color: white;
  }
  100% {
    color: #585665;
  }
}
#print-body {
  overflow-y: visible;
  margin: 0;
  padding: 0.5in;
  box-sizing: border-box;
  text-align: left;
}
#print-body .page-break {
  break-after: page;
}
#print-body .print-single-sale {
  break-inside: avoid;
  width: 7.5in;
  max-width: 100%;
  line-height: 1.2em;
  color: #000000;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
}
#print-body .print-single-sale .receipt-subrow {
  margin-left: 20px;
}
#print-body .print-single-sale .receipt-l3 {
  margin-left: 20px;
}
#print-body .print-single-sale .print-receipt-header {
  font-size: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
#print-body .print-single-sale .print-receipt-header img {
  width: auto;
  height: 20px;
  max-width: 214px;
  object-fit: contain;
}
#print-body .print-single-sale .print-receipt-header .yearbookforever {
  font-weight: bold;
  margin-left: 20px;
}
#print-body .print-single-sale .accessories-header {
  font-weight: bold;
  margin-top: 20px;
}
#print-body .print-single-sale .print-school-info {
  margin-bottom: 24px;
}
#print-body .print-single-sale .print-school-info .account-name {
  font-weight: bold;
  font-size: 19px;
}
#print-body .print-single-sale .print-school-info .school-year {
  margin-bottom: 24px;
  font-size: 16px;
}
#print-body .print-single-sale .print-school-info .receipt-title {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 19px;
}
#print-body .print-single-sale .print-purchaser-info {
  margin-bottom: 24px;
}
#print-body .print-single-sale .print-purchase-details .purchase-date {
  margin-bottom: 20px;
}
#print-body .print-single-sale .print-purchase-details .for-student {
  font-weight: bold;
}
#print-body .print-single-sale .print-totals {
  margin-top: 24px;
  margin-bottom: 20px;
}
#print-body .print-single-sale .print-totals .final-total {
  font-weight: bold;
}
#print-body .print-single-sale .print-purchase-status {
  margin-bottom: 24px;
}
#print-body .print-single-sale .print-note {
  margin-bottom: 24px;
}
#print-body .print-single-sale .print-thank-you {
  font-size: 10px;
  margin-bottom: 24px;
}
/*************************************************************

Adding to predefined base elements, everything underneath
"Online Design" tab.  Student horizontal navigation, calendar,
to dos, spreads table.

**************************************************************/
/*************************************************************

  PLAN BOOK > LADDER (LADDER SUB-TAB)

**************************************************************/
.overlay-print-coverage {
  opacity: 0.85;
  background-color: #fff;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 40px;
  z-index: 1;
}
/*.ladder-header {
  width:100%;
  tbody > tr > td {
    padding: 4px;
    border: 0px;
    text-align: center;
    font-size: @font-xs;
    color:@dkGray;

    &:first-child {
      width:472px;
      text-align: left;
      font-size:18px;
    }
    &:nth-child(2) { width: 80px; }

    &:nth-child(3) { width: 80px; }

    &:last-child { text-align: left; }
  }
}*/
/*.ladder-table {
  white-space: nowrap;

  > tbody > tr {
    border: 0;

    &:nth-of-type(odd) { background-color: #efefef; }

    &:hover {
      background-color: #d4eaf9 !important;
      cursor: hand;
    }
    > td {
      vertical-align: bottom;
      font-size: @font-xs;
      border-top: 0px;
      padding: 4px;

      &:first-child {
        width: 35px;
        position: relative;
        padding: 0px;
        &:after {
          position: absolute;
          content: '';
          right: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background-color: #c4c4cc;
        }
      }
      &:nth-child(2) {
        width: 0;
        text-align: left;
        font-size: 15px;
        padding-left: 8px;
        padding-right: 8px;
        background-color: red;
      }
      &:nth-child(3) {
        width: 165px;
        padding-left: @em-pt25;
        padding-right: @em-pt25;
        position: relative;

        */
/*&:before {
          content: '';
          position: absolute;
          right: 0;
          top: .4em;
          bottom: .4em;
          width: 1px;
          background-color: #c4c4cc;
        }*/
/*
        &:after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 25%;
          height: 50%;
          width: 1px;
          background-color: @gray3;
          z-index:444;
        }
      }
      &:nth-child(4) {
        width: 165px;
        padding-left: 8px;
        padding-right: 8px;
        &:after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 25%;
          height: 50%;
          width: 1px;
          background-color: @gray3;
        }
      }
      &:nth-child(5) {
        width: 52px;
        text-align: right;
        font-size: 15px;
        padding-left: 8px;
        padding-right: 8px;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background-color: @white;
        }
      }
      &:nth-child(6) {
        width: 80px;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background-color: @white;
        }
      }
      &:nth-child(7) {
        width: 80px;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background-color: @white;
        }
      }
      &:nth-child(8) {
        padding-left: 8px;
        padding-right: 8px;
      }
      &:last-child {
        padding-left: 8px;
        padding-right: 8px;
        width: 10px;
      }
    }
    &:nth-of-type(8n+9) > td {
      &:nth-child(2) {border-bottom: @dkGrayBorder;}
      &:nth-child(5) {border-top: @dkGrayBorder;}
      &:nth-child(3) {
        border-bottom: @dkGrayBorder;
        border-right: @dkGrayBorder;

        &:before {width: 0px;}
      }
      &:nth-child(4) {
        border-top: @dkGrayBorder;
        border-left: @dkGrayBorder;
      }
    }
  }
}*/
/*************************************************************

  SPREADS VIEW (LADDER SUB-TAB)

**************************************************************/
.ladder-left-padding {
  padding-left: 8px;
}
#ui-datepicker-div {
  font-size: 80%;
}
.ladderTableHeader {
  width: 100%;
  padding: 0;
  margin: 0;
}
.ladderTableHeader tr {
  height: 20px !important;
  vertical-align: bottom;
  padding-top: 15px !important;
}
.ladderTableHeader tr:nth-child(even) {
  background-color: #efefef !important;
}
.ladderTableHeader tr td {
  padding: 3px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #585665 !important;
  font-size: 12px !important;
}
.ladderTableHeader tr td:first-child {
  min-width: 420px;
  max-width: 420px;
  padding: 0;
  background-color: white !important;
  border: 0 !important;
  font-size: 15px !important;
}
.ladderTableHeader tr td:nth-child(2) {
  min-width: 75px;
  max-width: 75px;
  text-align: center;
}
.ladderTableHeader tr td:nth-child(3) {
  min-width: 75px;
  text-align: center;
}
.ladderTableHeader tr td:nth-child(4) {
  width: 100%;
  text-overflow: clip;
}
.ladderTable {
  width: 100%;
  margin: 0;
}
.ladderTable tr {
  height: 11px !important;
  vertical-align: bottom;
  padding: 0;
  margin: 0;
}
.ladderTable tr:nth-child(even) {
  background-color: #efefef !important;
}
.ladderTable tr:hover {
  background-color: #b6dcf5 !important;
}
.ladderTable tr:nth-of-type(8n+9) {
  z-index: 555;
}
.ladderTable tr:nth-of-type(8n+9) td:nth-child(3) {
  border-bottom: 1px solid #98989b;
}
.ladderTable tr:nth-of-type(8n+9) td:nth-child(4) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
.ladderTable tr:nth-of-type(8n+9) td:nth-child(4):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 0;
  width: 0;
}
.ladderTable tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
}
.ladderTable tr:nth-of-type(8n+9) td:nth-child(6) {
  border-top: 1px solid #98989b !important;
  width: 0;
}
.ladderTable tr td {
  border: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px !important;
}
.ladderTable tr td:first-child {
  min-width: 15px;
  max-width: 15px;
  background: linear-gradient(to left, #dfdfdf, #ffffff) !important;
  padding: 1px 0 1px 0 !important;
  background-color: #fff !important;
  border: 0 !important;
}
.ladderTable tr td:nth-child(2) {
  min-width: 33px;
  max-width: 33px;
  padding: 0 !important;
  background-color: white !important;
  margin: 0 !important;
  border-bottom: 1px #c4c4cc solid;
  border-right: 1px #c4c4cc solid;
}
.ladderTable tr td:nth-child(2) img {
  width: auto;
  height: auto;
  padding: 0;
}
.ladderTable tr td:nth-child(3) {
  width: 0;
  font-size: 15px;
  color: #585665;
  font-weight: bold;
}
.ladderTable tr td:nth-child(4) {
  min-width: 154px !important;
  max-width: 154px !important;
  font-size: 12px;
  color: #585665;
  position: relative;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  overflow-wrap: break-word;
  overflow: hidden;
  word-wrap: break-word;
  white-space: nowrap !important;
  max-height: 25px;
  text-overflow: ellipsis !important;
}
.ladderTable tr td:nth-child(4):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
.ladderTable tr td:nth-child(5) {
  min-width: 154px !important;
  max-width: 154px !important;
  font-size: 12px;
  color: #585665;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  overflow-wrap: break-word;
  overflow: hidden;
  word-wrap: break-word;
  white-space: nowrap !important;
  max-height: 25px;
  text-overflow: ellipsis !important;
}
.ladderTable tr td:nth-child(6) {
  width: 0;
  font-size: 15px;
  color: #585665;
  text-align: right;
  position: relative;
  font-weight: bold;
}
.ladderTable tr td:nth-child(6):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff;
}
.ladderTable tr td:nth-child(7) {
  min-width: 75px;
  font-size: 12px;
  color: #98989b;
  text-align: center;
  position: relative;
}
.ladderTable tr td:nth-child(7):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff;
}
.ladderTable tr td:nth-child(8) {
  min-width: 75px;
  max-width: 75px;
  font-size: 12px;
  color: #98989b;
  text-align: center;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ladderTable tr td:nth-child(8):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 2px;
  background-color: #fff;
}
.ladderTable tr td:nth-child(9) {
  font-size: 12px;
  color: #98989b;
  width: 100%;
  white-space: nowrap;
}
.ladderTable .locked > td:last-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
.ladderTable .locked > td:last-of-type:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 59px;
}
.nolockclass td:last-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
  color: transparent;
}
.nolockclass td:last-of-type:after {
  content: '';
  opacity: 0;
  position: absolute;
  bottom: 10%;
  right: 59px;
}
.nolockclass2 td:last-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
  color: transparent;
}
.nolockclass2 td:last-of-type:after {
  content: '';
  opacity: 0;
  position: absolute;
  bottom: 10%;
  right: 59px;
}
.nolockclass3 td:last-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
  color: transparent;
}
.nolockclass3 td:last-of-type:after {
  content: '';
  opacity: 0;
  position: absolute;
  bottom: 10%;
  right: 59px;
}
/*************************************************************
  CHOOSE SPREADS FROM LAST YEAR
**************************************************************/
#choose-modal .ladderTable {
  width: auto;
}
#choose-modal .ladderTable td:nth-child(3),
#choose-modal .ladderTable td:nth-child(4) {
  width: 29%;
}
#choose-modal .ladderTable td:last-child {
  width: 35%;
  background-color: #fff !important;
}
#choose-modal .active {
  background-color: #a9d6f3 !important;
}
/*************************************************************
  CAROUSEL
**************************************************************/
.carousel-control {
  display: table;
  height: 450px;
}
.carousel-control span {
  display: table-cell;
  vertical-align: middle;
  top: 50%;
}
/*************************************************************

  PLAN BOOK > LADDER > MODAL TABLE ???
  I need to figure out how this is being used -dh

**************************************************************/
.modal-table {
  white-space: nowrap;
}
.modal-table > tbody > tr {
  border: 0px;
}
.modal-table > tbody > tr:nth-of-type(odd) {
  background-color: #efefef;
}
.modal-table > tbody > tr:hover {
  background-color: #d4eaf9 !important;
  cursor: hand;
}
.modal-table > tbody > tr > td {
  vertical-align: bottom;
  font-size: 12px;
  border-top: 0px;
  padding: 4px;
}
.modal-table > tbody > tr > td .td-after-basic {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #fff;
}
.modal-table > tbody > tr > td:first-child {
  width: 5%;
  position: relative;
  background-color: #fff;
}
.modal-table > tbody > tr > td:nth-child(2) {
  width: 35px;
  text-align: left;
  font-size: 15px;
  padding-left: 8px;
  padding-right: 8px;
}
.modal-table > tbody > tr > td:nth-child(3) {
  width: 35%;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
}
.modal-table > tbody > tr > td:nth-child(3):before {
  content: '';
  position: absolute;
  right: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 1px;
  background-color: #c4c4cc;
}
.modal-table > tbody > tr > td:nth-child(4) {
  width: 35%;
  padding-left: 8px;
  padding-right: 8px;
}
.modal-table > tbody > tr > td:nth-child(5) {
  width: 35px;
  text-align: right;
  font-size: 15px;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
}
.modal-table > tbody > tr > td:nth-child(5):after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #fff;
}
.modal-table > tbody > tr > td:nth-child(6) {
  width: 25%;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  position: relative;
}
.modal-table > tbody > tr > td:nth-child(6):after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #fff;
}
.modal-table > tbody > tr > td:nth-child(7) {
  width: 80px;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  position: relative;
}
.modal-table > tbody > tr > td:nth-child(7):after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #fff;
}
.modal-table > tbody > tr > td:nth-child(8) {
  padding-left: 8px;
  padding-right: 8px;
}
.modal-table > tbody > tr > td:last-child {
  padding-left: 8px;
  padding-right: 8px;
  width: 10px;
}
.modal-table > tbody > tr:nth-of-type(8n+9) > td:nth-child(2) {
  border-bottom: 1px solid #555;
}
.modal-table > tbody > tr:nth-of-type(8n+9) > td:nth-child(5) {
  border-top: 1px solid #555;
}
.modal-table > tbody > tr:nth-of-type(8n+9) > td:nth-child(3) {
  border-bottom: 1px solid #555;
  border-right: 1px solid #555;
}
.modal-table > tbody > tr:nth-of-type(8n+9) > td:nth-child(3):before {
  width: 0;
}
.modal-table > tbody > tr:nth-of-type(8n+9) > td:nth-child(4) {
  border-top: 1px solid #555;
  border-left: 1px solid #555;
}
.signaturesLadder tr:nth-of-type(8n+9) td:nth-child(3) {
  border-bottom: 1px solid #585665 !important;
}
.signaturesLadder tr:nth-of-type(8n+9) td:nth-child(4) {
  border-right: 1px solid #585665 !important;
  border-bottom: 1px solid #585665 !important;
}
.signaturesLadder tr:nth-of-type(8n+9) td:nth-child(4):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 2px;
  background-color: #fff !important;
}
.signaturesLadder tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #585665 !important;
}
.signaturesLadder tr:nth-of-type(8n+9) td:nth-child(6) {
  border-top: 1px solid #585665 !important;
}
#ladder-title-container {
  min-width: 992px !important;
}
#ladder-title-container .list-group-item {
  border: 0;
}
#ladder-title-container .list-group {
  box-shadow: none;
  margin-bottom: 5px;
}
#ladder-title-container .list-group-item {
  padding: 0;
}
/*************************************************************
  LADDER COLOR CONTAINER
**************************************************************/
#ladder-color-container .container-bubble .color_content .swatch {
  width: 50%;
  float: left;
  height: 60px;
}
#ladder-color-container .container-bubble .color_content .swatch span {
  background: #fff;
  padding: 1px 15px 1px 5px;
  font-size: 70%;
  vertical-align: top;
}
#ladder-color-container .color-palette span {
  height: 20px;
}
#ladder-color-container .four-color-img {
  width: 20px;
  height: 20px;
}
#ladder-color-container button.hover_close {
  opacity: 0;
  padding: 0 4px;
}
#ladder-color-container .cs-icons {
  vertical-align: middle;
}
#ladder-color-container .spread-page:hover,
#ladder-color-container .color-styles .list-group-item:hover {
  background-color: #d6ebf9;
}
#ladder-color-container .td-colors:hover {
  cursor: pointer;
}
#ladder-color-container .td-colors:hover button.hover_close {
  opacity: 0.85;
}
#ladder-color-container .td-colors-left .close {
  float: left;
}
#ladder-color-container .td-colors-left:hover {
  cursor: pointer;
}
#ladder-color-container .td-colors-left:hover button.hover_close {
  opacity: 0.85;
}
.chosen {
  border: 3px solid #fff;
  box-shadow: inset 0 0 10px #fff;
}
.delete-button {
  background: #fff;
  float: right;
  padding: 0 5px 2px;
}
/*************************************************************
  COLOR STYLES CONTAINER
**************************************************************/
#color-styles-container {
  padding-top: 30px;
}
#color-styles-container .danger {
  border-color: red !important;
}
#color-styles-container .default-color-box {
  width: 84px;
}
#color-styles-container .default-color-box .color-square {
  display: block;
  float: left;
  width: 50%;
  height: 42px;
}
#color-styles-container .default-color-box .top-left {
  background-color: #288DC5;
}
#color-styles-container .default-color-box .top-right {
  background-color: #C31E64;
}
#color-styles-container .default-color-box .bottom-left {
  background-color: #000;
}
#color-styles-container .default-color-box .bottom-right {
  background-color: #FFF337;
}
#color-styles-container .default-color-box .vertical-block-25 {
  float: left;
  width: 25%;
  height: 84px;
}
#color-styles-container .default-color-box .one {
  background-color: #7B7B7B;
}
#color-styles-container .default-color-box .two {
  background-color: #444444;
}
#color-styles-container .default-color-box .three {
  background-color: #000;
}
#color-styles-container .default-color-box .four {
  background-color: #E8E8E8;
}
#color-styles-container .delete-edit-box {
  height: 84px;
  position: relative;
}
#color-styles-container .move-down {
  position: absolute;
  bottom: 0;
}
#color-styles-container .assign-style-link {
  padding-left: 30px;
}
#color-styles-container .color-styles-name {
  color: #585665;
  font-size: 15px;
  padding-bottom: 5px;
}
#color-styles-container .used-text {
  text-align: right;
  color: #585665;
  font-size: 12px;
}
#color-styles-container .table-row {
  height: 85px;
}
#color-styles-container .list-group {
  background-color: #dfdfdf;
  padding-right: 20px;
}
#color-styles-container .list-group-item {
  margin: 5px;
}
#color-styles-container .top-gray-border {
  border-top: 1px solid #dfdfdf;
}
#color-styles-container .color-styles-title {
  font-size: 24px;
  color: #585665;
  padding-top: 15px;
}
#color-styles-container .use-colors-job {
  font-size: 15px;
  color: #1E93DF;
}
#color-styles-container .color-style-gallery a {
  cursor: pointer;
  color: #1E93DF;
}
#color-styles-container .color-style-gallery a.danger {
  border-color: red !important;
}
#color-styles-container .new-button-spacing {
  padding-top: 15px;
}
#color-styles-container .delete-link {
  color: #c00 !important;
}
#color-styles-container .edit-cs-modal input.danger {
  color: #c00;
}
#color-styles-container .edit-cs-modal .swatches {
  overflow: scroll;
}
#color-styles-container .edit-cs-modal .swatches .swatch {
  width: 25%;
  float: left;
  height: 50px;
}
#color-styles-container .edit-cs-modal .swatches .swatch.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#color-styles-container .edit-cs-modal .swatches .swatch:hover span {
  color: #1E93DF;
}
#color-styles-container .edit-cs-modal .swatches .swatch span {
  background: #fff;
  padding: 1px 15px 1px 5px;
  font-size: 70%;
  vertical-align: top;
}
#color-styles-container .edit-cs-modal .container-bubble {
  width: 95%;
}
#color-styles-container .edit-cs-modal .container-bubble:after {
  right: 20px;
}
/*************************************************************
  FONTS CONTAINER
**************************************************************/
#fonts-container {
  padding-top: 30px;
}
#fonts-container .top-gray-border {
  border-top: 1px solid #dfdfdf;
  /*padding-left:0;
    padding-right:0;*/
}
#fonts-container .use-fonts-spacing {
  padding-bottom: 15px;
}
#fonts-container .list-group-item {
  padding: 8px 0 8px 0;
}
#fonts-container .choose-fonts-title {
  font-size: 24px;
  color: #585665;
  padding-top: 15px;
}
#fonts-container .font-img-spacing {
  margin: 5px;
}
#fonts-container .use-fonts-title {
  font-size: 15px;
  color: #1E93DF;
}
#fonts-container .dm-size {
  position: absolute;
  left: 10px;
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
}
#fonts-container .dropdown-toggle {
  padding-left: 15px;
}
#fonts-container .font-img {
  font-size: 18px;
  color: #98989b;
}
#fonts-container .default-font-text {
  font-size: 15px;
  color: #585665;
  margin-top: 15px;
  margin-bottom: 15px;
}
#fonts-container .font-dropdown .open a.dropdown-toggle.chevron:after {
  content: ' \f078';
  font-family: FontAwesome;
}
#fonts-container .font-dropdown .custom-no-border-dropdown {
  padding: 10px 10px 10px 13px;
  color: #585665;
  display: block;
  line-height: 18px;
}
#fonts-container .font-dropdown .custom-no-border-dropdown:after {
  float: right;
}
#fonts-container .font-dropdown .custom-no-border-dropdown:hover {
  background-color: transparent;
}
#fonts-container .font-dropdown ul.dropdown-menu::-webkit-scrollbar {
  width: 0px;
}
#fonts-container .font-count {
  font-size: 18px;
  position: absolute;
  top: -25px;
  right: 7px;
}
#fonts-container .font-list {
  color: #1E93DF;
  border: 0;
  box-shadow: none;
}
#fonts-container .font-list li {
  border: 0;
  position: static;
}
#fonts-container .font-list li:hover {
  background: #f5f5f5;
  cursor: pointer;
}
#fonts-container .font-list li[disabled],
#fonts-container .font-list li[disabled]:hover {
  opacity: 0.85;
  background: #f5f5f5 !important;
  cursor: default;
  color: #999;
}
#fonts-container .font-gallery {
  overflow-y: scroll;
  background: #dfdfdf;
}
#fonts-container .font-gallery ul {
  margin-right: 1em;
}
#fonts-container .font-gallery ul button:not(.default-font) {
  cursor: pointer;
  color: #1E93DF;
}
#fonts-container .font-gallery ul button.default-font {
  cursor: default;
}
#fonts-container .font-gallery ul button.default-font:hover {
  background-color: transparent;
}
#fonts-container .font-gallery ul button.default-font .text-danger {
  color: #999;
}
#fonts-container .font-gallery ul img {
  max-width: 400px;
}
#fonts-container .chose {
  font-weight: bold;
}
#fonts-container span.warning {
  color: #c00;
}
#fonts-container span.warning:hover {
  color: #990000;
}
.font-preview {
  background: #fff;
  border: 2px solid #ccc;
  box-shadow: 2px 3px 4px #ccc;
}
.font-preview .tooltip-inner {
  background-color: #fff;
}
.font-preview .tooltip-inner .font-preview-image {
  height: 30px;
  width: 100px;
  background-position: top center;
  background-size: cover;
}
.font-preview .tooltip-arrow {
  display: none;
}
.form-control {
  font-size: 15px;
  border: 1px solid #c4c4cc;
  color: #98989b;
  padding: 0 4px 0 4px;
  margin: 0;
}
/*************************************************************
  PLAN BOOK > LADDER > DUE DATE MODAL
**************************************************************/
#ladder-date-container .container-bubble {
  padding-top: 0;
}
#ladder-date-container .container-range {
  width: 100%;
}
#ladder-date-container .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}
#ladder-date-container .spacing-select {
  padding-top: 20px;
  padding-bottom: 16px;
  background-color: transparent;
}
#ladder-date-container .text-muted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
}
#ladder-date-container .text-unmuted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
}
#ladder-date-container .deselect-all {
  float: left;
  width: 50%;
  color: #1E93DF;
}
#ladder-date-container .range {
  padding-bottom: 15px;
  float: right;
  width: 50%;
}
#ladder-date-container .form-control {
  font-size: 15px;
  border: 1px solid #c4c4cc;
  color: #98989b;
  padding: 0 4px 0 4px;
  width: 55px;
  margin: 0;
}
#ladder-date-container .due-date-table {
  /*.locked > td:nth-child(3):after {
      content: '\f023';
      font-family: FontAwesome;
      font-size: 1.2em;
      color:red;
      background-color: transparent;
      position: absolute;
      bottom: 30%;
      right: 4px;
      z-index: 11;
    }*/
}
#ladder-date-container .due-date-table td {
  padding: 4px;
  position: relative;
  background-color: inherit;
}
#ladder-date-container .due-date-table td:first-child,
#ladder-date-container .due-date-table td:last-child {
  width: 15%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
  color: #98989b;
}
#ladder-date-container .due-date-table td:nth-child(2),
#ladder-date-container .due-date-table td:nth-child(5) {
  font-size: 15px;
  color: #585665;
  width: 0;
  font-weight: bold;
}
#ladder-date-container .due-date-table td:nth-child(3),
#ladder-date-container .due-date-table td:nth-child(4) {
  font-size: 12px;
  width: 35%;
  padding-left: 10px;
}
#ladder-date-container .due-date-table td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#ladder-date-container .due-date-table tr:nth-child(even) {
  background-color: #efefef;
}
#ladder-date-container .due-date-table tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #98989b;
}
#ladder-date-container .due-date-table tr:nth-of-type(8n+9) td:nth-child(3) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#ladder-date-container .due-date-table tr:nth-of-type(8n+9) td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0%;
  height: 0%;
  width: 0;
}
#ladder-date-container .due-date-table tr:nth-of-type(8n+9) td:nth-child(4) {
  border-top: 1px solid #98989b !important;
}
#ladder-date-container .due-date-table tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
  width: 0;
}
#ladder-date-container .due-date-table .locked > td:nth-child(3):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 1;
}
#ladder-date-container .due-date-table .locked-due-1 td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 1;
}
#ladder-date-container .due-date-table .locked-due-1 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#ladder-date-container .due-date-table .locked-due-2 td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 1;
}
#ladder-date-container .due-date-table .locked-due-2 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#ladder-date-container .due-date-table .locked-due-3 td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 1;
}
#ladder-date-container .due-date-table .locked-due-3 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#ladder-date-container .container-bubble button {
  margin-top: -8px;
}
#ladder-date-container .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#ladder-date-container .active:hover {
  background-color: #b6dcf5 !important;
}
#ladder-date-container tr:hover {
  background-color: #d6ebf9 !important;
}
/*************************************************************
  PLAN BOOK > LADDER > ASSIGN STAFF MODAL
**************************************************************/
#assign-staff-container {
  min-width: 992px;
}
#assign-staff-container .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}
#assign-staff-container .container-range {
  width: 100%;
  padding-right: 5%;
}
#assign-staff-container .container-range .range {
  padding-bottom: 15px;
  float: right;
  width: 55%;
}
#assign-staff-container .spacing-select {
  padding-top: 20px;
  padding-bottom: 16px;
}
#assign-staff-container .text-muted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
  width: 95%;
  margin-left: 5%;
  background-color: transparent;
}
#assign-staff-container .text-unmuted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
  background-color: transparent;
}
#assign-staff-container .deselect-all {
  float: left;
  width: 50%;
  color: #1E93DF;
  padding: 8px;
}
#assign-staff-container .container-bubble {
  margin-left: 5%;
}
#assign-staff-container .staff-members {
  width: 100%;
  padding-left: 5%;
}
#assign-staff-container .staff-members .selected {
  float: left;
  width: 75%;
  overflow: hidden;
  color: #585665;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  background-color: #fff;
  padding: 10px 10px 10px 13px;
  line-height: 19px;
}
#assign-staff-container .staff-members .selected .chevron-down {
  content: ' \f078';
  font-family: FontAwesome;
}
#assign-staff-container .staff-members .selected .ddarrow {
  display: inline-block;
  float: right;
  padding-right: 10px;
}
#assign-staff-container .staff-members .selected .ddarrow:after {
  content: ' \f078';
  font-family: FontAwesome;
}
#assign-staff-container .staff-members .clear {
  float: right;
  width: 25%;
  text-align: right;
  padding: 10px 15px 10px 13px;
  color: #1E93DF;
  font-size: 15px;
  line-height: 19px;
}
#assign-staff-container .assign-staff-table {
  width: 100%;
}
#assign-staff-container .assign-staff-table tr.active,
#assign-staff-container .assign-staff-table li.active {
  color: #555;
  background-color: #a9d6f3;
  background-image: none;
}
#assign-staff-container .assign-staff-table .assign_staff_spread_tr:nth-child(even) {
  background-color: #efefef !important;
}
#assign-staff-container .assign-staff-table .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#assign-staff-container .assign-staff-inside-td {
  /*    .locked > td:nth-child(3):after {
          content: '\f023';
          font-family: FontAwesome;
          font-size: 1.2em;
          position: absolute;
          bottom: 30%;
          right: 4px;
          z-index: 1;
          background-color: transparent;
        }*/
}
#assign-staff-container .assign-staff-inside-td:hover {
  background-color: #d6ebf9;
}
#assign-staff-container .assign-staff-inside-td td {
  padding: 0px 10px 4px 0;
  position: relative;
  background-color: inherit;
}
#assign-staff-container .assign-staff-inside-td td:first-child {
  width: 0%;
  border: 0;
  font-size: 12px;
  color: #98989b;
}
#assign-staff-container .assign-staff-inside-td td:last-child {
  width: 0%;
  font-size: 12px;
}
#assign-staff-container .assign-staff-inside-td .first_number {
  text-align: right;
}
#assign-staff-container .assign-staff-inside-td .last_number {
  padding-left: 10px;
}
#assign-staff-container .assign-staff-inside-td td:nth-child(2) {
  font-size: 15px;
  color: #585665;
  width: 75px;
  font-weight: bold;
}
#assign-staff-container .assign-staff-inside-td td:nth-child(5) {
  font-size: 15px;
  color: #585665;
  width: 100px;
  font-weight: bold;
}
#assign-staff-container .assign-staff-inside-td td:nth-child(3) {
  font-size: 12px;
  width: 44%;
}
#assign-staff-container .assign-staff-inside-td td:nth-child(4) {
  font-size: 12px;
  width: 44%;
  padding-left: 10px;
  text-align: right;
}
#assign-staff-container .assign-staff-inside-td .top_row_assign td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
  z-index: 222;
}
#assign-staff-container .assign-staff-inside-td tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #98989b;
}
#assign-staff-container .assign-staff-inside-td tr:nth-of-type(8n+9) td:nth-child(3) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#assign-staff-container .assign-staff-inside-td tr:nth-of-type(8n+9) td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0%;
  height: 0%;
  width: 0;
}
#assign-staff-container .assign-staff-inside-td tr:nth-of-type(8n+9) td:nth-child(4) {
  border-top: 1px solid #98989b !important;
}
#assign-staff-container .assign-staff-inside-td tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
  width: 0;
}
#assign-staff-container .assign-staff-inside-td .locked > td:nth-child(3):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#assign-staff-container .assign-staff-inside-td .locked-staff-1 td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 444;
}
#assign-staff-container .assign-staff-inside-td .locked-staff-1 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
  z-index: 222;
}
#assign-staff-container .assign-staff-inside-td .locked-staff-2 td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 444;
}
#assign-staff-container .assign-staff-inside-td .locked-staff-2 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
  z-index: 222;
}
#assign-staff-container .assign-staff-inside-td .locked-staff-3 td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 444;
}
#assign-staff-container .assign-staff-inside-td .locked-staff-3 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
  z-index: 222;
}
#assign-staff-container li {
  text-align: left;
}
#assign-staff-container li .active {
  border-color: #ccc;
  text-shadow: 0 -1px 0 #fff;
}
#assign-staff-container .table > tbody > tr:hover,
#assign-staff-container .table > tbody > tr > td:hover,
#assign-staff-container .table > div:hover,
#assign-staff-container .table > li:hover {
  background-color: #d6ebf9;
}
#assign-staff-container .table .active {
  background-color: #a9d6f3 !important;
}
#assign-staff-container .table .active:hover {
  background-color: #b6dcf5 !important;
}
#assign-staff-container .table .active:hover > td {
  background-color: transparent;
}
#assign-staff-container .table .active > td {
  background-color: transparent;
}
#assign-staff-container .table td {
  background-color: inherit !important;
}
#assign-staff-container .table td.right-page .page-number {
  text-align: right;
}
#assign-staff-container .table > tbody > tr:nth-of-type(8n+9) td:first-child {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
}
#assign-staff-container .table > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) {
  border-top: 1px solid #555;
}
#assign-staff-container .table > tbody > tr.locked > td:first-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
#assign-staff-container .table > tbody > tr.locked > td:first-of-type:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
#assign-staff-container .table > tbody > tr td:first-child {
  border-right: 1px solid #ccc;
}
#assign-staff-container .table div,
#assign-staff-container .table td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#assign-staff-container .table td {
  background-color: inherit;
}
#assign-staff-container .select-staff-table {
  width: 100%;
}
#assign-staff-container .select-staff-table tr:first-child {
  border-top: 2px solid #fff;
}
#assign-staff-container .select-staff-table tr {
  border-bottom: 2px solid #fff;
}
#assign-staff-container .select-staff-table tr td:last-child {
  padding-left: 8px;
  font-size: 15px;
  color: #585665;
}
#assign-staff-container .select-staff-table .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#assign-staff-container .truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 1px;
}
#assign-staff-container .apply_button {
  text-align: right;
  margin-right: 30px;
}
/*************************************************************
  PLAN BOOK > LADDER > ASSIGN MASTER PAGES MODAL
**************************************************************/
#apply-master-pages .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}
#apply-master-pages .container-range {
  width: 100%;
  padding-left: 5%;
}
#apply-master-pages .container-range .range {
  padding-bottom: 15px;
  float: right;
  width: 65%;
}
#apply-master-pages .master-name {
  font-size: 12px;
  padding: 4px;
}
#apply-master-pages .spacing-select {
  padding-top: 20px;
  padding-bottom: 16px;
  background-color: transparent;
}
#apply-master-pages .text-muted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
}
#apply-master-pages .text-unmuted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
  background-color: transparent;
}
#apply-master-pages .deselect-all {
  float: left;
  width: 30%;
  color: #1E93DF;
  padding: 8px;
}
#apply-master-pages .container-bubble {
  margin-left: 5%;
}
#apply-master-pages .container-bubble input[type='text'] {
  margin-bottom: 5px;
}
#apply-master-pages .staff-members {
  width: 100%;
  margin-left: 0;
}
#apply-master-pages .staff-members .selected {
  float: left;
  width: 70%;
  overflow: hidden;
  color: #585665;
  font-size: 18px;
}
#apply-master-pages .staff-members .clear {
  float: right;
  width: 20%;
  text-align: right;
  padding-right: 5px;
  color: #87cefa;
  font-size: 15px;
}
#apply-master-pages .staff-members.with-clear-button .selected {
  margin-left: 5%;
  float: left;
  width: 95%;
  overflow: hidden;
  color: #585665;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  background-color: #fff;
  padding: 10px 10px 10px 13px;
  line-height: 19px;
}
#apply-master-pages .staff-members.with-clear-button .selected .chevron-down {
  content: ' \f078';
  font-family: FontAwesome;
}
#apply-master-pages .staff-members.with-clear-button .selected .ddarrow {
  display: inline-block;
  float: right;
  padding-right: 10px;
}
#apply-master-pages .staff-members.with-clear-button .selected .ddarrow:after {
  content: ' \f078';
  font-family: FontAwesome;
}
#apply-master-pages .scrollable-content ul li {
  margin: 4px;
  width: 31% !important;
}
#apply-master-pages .assign-master-table tr:hover {
  background-color: #d6ebf9 !important;
}
#apply-master-pages .assign-master-table td {
  padding: 4px;
  position: relative;
  background-color: inherit;
}
#apply-master-pages .assign-master-table td:first-child {
  width: 5%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
}
#apply-master-pages .assign-master-table td:last-child {
  width: 25%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
  color: #98989b;
}
#apply-master-pages .assign-master-table td:nth-child(2),
#apply-master-pages .assign-master-table td:nth-child(5) {
  font-size: 15px;
  color: #585665;
  width: 0;
  font-weight: bold;
}
#apply-master-pages .assign-master-table td:nth-child(3),
#apply-master-pages .assign-master-table td:nth-child(4) {
  font-size: 12px;
  width: 35%;
  padding-left: 10px;
}
#apply-master-pages .assign-master-table td:nth-child(6) {
  width: 0;
  text-align: left !important;
}
#apply-master-pages .assign-master-table td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#apply-master-pages .assign-master-table tr:nth-child(even) {
  background-color: #efefef;
}
#apply-master-pages .assign-master-table tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #98989b;
}
#apply-master-pages .assign-master-table tr:nth-of-type(8n+9) td:nth-child(3) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#apply-master-pages .assign-master-table tr:nth-of-type(8n+9) td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0%;
  height: 0%;
  width: 0;
}
#apply-master-pages .assign-master-table tr:nth-of-type(8n+9) td:nth-child(4) {
  border-top: 1px solid #98989b !important;
}
#apply-master-pages .assign-master-table tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
  width: 0;
}
#apply-master-pages .assign-master-table .locked > td:nth-child(3):after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 30%;
  right: 4px;
  z-index: 1;
  background-color: transparent;
}
#apply-master-pages .assign-master-table .locked > td:nth-child(3):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#apply-master-pages .assign-master-table .locked-master-1 td:nth-child(3):before {
  content: '';
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#apply-master-pages .assign-master-table .locked-master-1 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#apply-master-pages .assign-master-table .locked-master-2 td:nth-child(3):before {
  content: '';
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#apply-master-pages .assign-master-table .locked-master-2 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#apply-master-pages .assign-master-table .locked-master-3 td:nth-child(3):before {
  content: '';
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#apply-master-pages .assign-master-table .locked-master-3 td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#apply-master-pages .assign-master-table tr.is-unselectable {
  background-color: #efefef;
  color: #98989b;
}
#apply-master-pages .assign-master-table tr.is-unselectable td {
  color: #98989b;
  cursor: not-allowed;
}
#apply-master-pages .assign-master-table tr.is-unselectable td:nth-child(2),
#apply-master-pages .assign-master-table tr.is-unselectable td:nth-child(5) {
  color: #98989b;
}
#apply-master-pages .assign-master-table tr.is-unselectable td:first-child,
#apply-master-pages .assign-master-table tr.is-unselectable td:last-child {
  background-color: #efefef !important;
}
#apply-master-pages .assign-master-table tr.is-unselectable:hover {
  background-color: #efefef !important;
}
#apply-master-pages tr:hover,
#apply-master-pages li:hover {
  background-color: #d6ebf9;
}
#apply-master-pages tr.active,
#apply-master-pages li.active {
  color: #555;
  background-color: #a9d6f3;
  background-image: none;
}
#apply-master-pages tr.active:hover,
#apply-master-pages li.active:hover {
  background-color: #a9d6f3 !important;
}
#apply-master-pages li {
  text-align: left;
}
#apply-master-pages li .active {
  border-color: #ccc;
  text-shadow: 0 -1px 0 #fff;
}
#apply-master-pages .table > tbody > tr:hover,
#apply-master-pages .table > tbody > tr > td:hover,
#apply-master-pages .table > div:hover,
#apply-master-pages .table > li:hover {
  background-color: #d6ebf9;
}
#apply-master-pages .table .active {
  background-color: #a9d6f3 !important;
}
#apply-master-pages .table .active:hover {
  background-color: #b6dcf5 !important;
}
#apply-master-pages .table .active:hover > td {
  background-color: transparent;
}
#apply-master-pages .table .active > td {
  background-color: transparent;
}
#apply-master-pages .table td {
  background-color: inherit !important;
}
#apply-master-pages .table td.right-page .page-number {
  text-align: right;
}
#apply-master-pages .table > tbody > tr:nth-of-type(8n+9) td:first-child {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
}
#apply-master-pages .table > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) {
  border-top: 1px solid #555;
}
#apply-master-pages .table > tbody > tr.locked > td:first-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
#apply-master-pages .table > tbody > tr.locked > td:first-of-type:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
#apply-master-pages .table > tbody > tr td:first-child {
  border-right: 1px solid #ccc;
}
#apply-master-pages .table div,
#apply-master-pages .table td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#apply-master-pages .table td {
  background-color: inherit;
}
#apply-master-pages .select-staff-table {
  width: 100%;
}
#apply-master-pages .select-staff-table tr:first-child {
  border-top: 2px solid #fff;
}
#apply-master-pages .select-staff-table tr {
  border-bottom: 2px solid #fff;
}
#apply-master-pages .select-staff-table tr td:last-child {
  padding-left: 8px;
  font-size: 15px;
  color: #585665;
}
#apply-master-pages .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#apply-master-pages tr:hover {
  background-color: #d6ebf9 !important;
}
/*************************************************************
  PLAN BOOK > LADDER > ASSIGN COLOR STYLE
**************************************************************/
#ladder-color-container .col-xs-7 {
  padding: 0;
}
#ladder-color-container .page-number {
  font-size: 15px;
  color: #585665;
  width: 0;
  font-weight: bold;
}
#ladder-color-container .page-title {
  font-size: 12px;
  color: #585665;
  padding-top: 4px;
  padding-left: 8px;
}
#ladder-color-container .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}
#ladder-color-container .container-range {
  width: 100%;
  padding-left: 5%;
  padding-right: 25%;
}
#ladder-color-container .container-range .range {
  padding-bottom: 15px;
  float: right;
  width: 50%;
}
#ladder-color-container .spacing-select {
  padding-top: 30px;
  padding-bottom: 15px;
}
#ladder-color-container .text-muted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
}
#ladder-color-container .default-image {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}
#ladder-color-container .default-image .default-image-text {
  font-size: 12px;
  color: #585665;
  padding-top: 10px;
}
#ladder-color-container .text-unmuted {
  color: #585665;
  font-size: 18px;
  padding-left: 10px;
}
#ladder-color-container .deselect-all {
  float: left;
  width: 50%;
  color: #1E93DF;
  padding: 8px;
}
#ladder-color-container .container-bubble {
  margin-left: 5%;
  min-height: 300px;
}
#ladder-color-container .col-xs-5 {
  padding: 0;
}
#ladder-color-container .staff-members {
  width: 100%;
  margin-left: 5%;
}
#ladder-color-container .staff-members .selected {
  float: left;
  width: 70%;
  overflow: hidden;
  color: #585665;
  font-size: 18px;
}
#ladder-color-container .staff-members .clear {
  float: right;
  width: 20%;
  text-align: right;
  margin-right: 5%;
  color: #1E93DF;
  font-size: 15px;
}
#ladder-color-container .scrollable-content {
  overflow: hidden;
}
#ladder-color-container .scrollable-content:hover {
  overflow-y: scroll;
}
#ladder-color-container .scrollable-content-wrapper {
  padding: 0;
}
#ladder-color-container .list-group-item {
  border: 0;
  padding: 8px;
}
#ladder-color-container .style-title {
  font-size: 18px;
  color: #585665;
}
#ladder-color-container .select-pages {
  font-size: 18px;
  color: #585665;
  padding-bottom: 15px;
  padding-top: 30px;
}
#ladder-color-container .color-content-title {
  color: #585665;
  font-size: 15px;
  padding-bottom: 5px;
}
#ladder-color-container .color-content-titles {
  color: #585665;
  font-size: 12px;
  padding-bottom: 5px;
}
#ladder-color-container .assign-color-table {
  width: 100% !important;
  /*.locked > td:nth-child(2):after {
      content: '\f023';
      font-family: FontAwesome;
      font-size: 1.2em;
      position: absolute;
      bottom: 5%;
      right: -5px;
      z-index: 1;
    }*/
}
#ladder-color-container .assign-color-table td .page-title,
#ladder-color-container .assign-color-table td .page-number {
  color: #585665 !important;
}
#ladder-color-container .assign-color-table td {
  padding: 4px;
  position: relative;
  background-color: inherit;
}
#ladder-color-container .assign-color-table td:first-child {
  width: 14%;
  border: 0;
  background-color: #fff !important;
  padding-top: 0;
  padding-bottom: 0;
}
#ladder-color-container .assign-color-table td:last-child {
  width: 16%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
  color: #98989b;
  padding-top: 0;
  padding-bottom: 0;
}
#ladder-color-container .assign-color-table td:nth-child(2),
#ladder-color-container .assign-color-table td:nth-child(3) {
  font-size: 12px;
  min-width: 35%;
}
#ladder-color-container .assign-color-table td:nth-child(2) {
  border-right: 1px solid #c4c4cc !important;
}
#ladder-color-container .assign-color-table tr:nth-child(even) {
  background-color: #efefef;
}
#ladder-color-container .assign-color-table tr:nth-of-type(8n+9) td:nth-child(2) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#ladder-color-container .assign-color-table tr:nth-of-type(8n+9) td:nth-child(2):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 0;
  width: 0;
}
#ladder-color-container .assign-color-table tr:nth-of-type(8n+9) td:nth-child(3) {
  border-top: 1px solid #98989b !important;
}
#ladder-color-container .assign-color-table .locked > td:nth-child(2):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#ladder-color-container .assign-color-table .locked td div {
  color: #98989b !important;
}
#ladder-color-container .assign-color-table .locked-color-1 td:nth-child(2):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#ladder-color-container .assign-color-table .page-title,
#ladder-color-container .assign-color-table .page-number {
  color: #98989b !important;
}
#ladder-color-container .assign-color-table td:last-child {
  padding-left: 8px;
  font-size: 15px;
  color: #585665;
}
#ladder-color-container .assign-color-table .locked-color-2 td:nth-child(2):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#ladder-color-container .assign-color-table .locked-color-2 .page-title,
#ladder-color-container .assign-color-table .locked-color-2 .page-number {
  color: #98989b !important;
}
#ladder-color-container .assign-color-table .locked-color-2 .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#ladder-color-container .assign-color-table .locked-color-2 .active:hover {
  background-color: #b6dcf5 !important;
}
#ladder-color-container .assign-color-table .locked-color-3 td:nth-child(2):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#ladder-color-container .assign-color-table .locked-color-3 .page-title,
#ladder-color-container .assign-color-table .locked-color-3 .page-number {
  color: #98989b !important;
}
#ladder-color-container .assign-color-table tr:hover {
  background-color: #d6ebf9 !important;
}
#ladder-color-container tr:hover,
#ladder-color-container li:hover {
  background-color: #d6ebf9;
}
#ladder-color-container tr.active,
#ladder-color-container li.active {
  color: #555;
  background-color: #a9d6f3;
  background-image: none;
}
#ladder-color-container tr.active:hover,
#ladder-color-container li.active:hover {
  background-color: #b6dcf5 !important;
}
#ladder-color-container li {
  text-align: left;
}
#ladder-color-container li .active {
  border-color: #ccc;
  text-shadow: 0 -1px 0 #fff;
}
#ladder-color-container .table > tbody > tr:hover,
#ladder-color-container .table > tbody > tr > td:hover,
#ladder-color-container .table > div:hover,
#ladder-color-container .table > li:hover {
  background-color: #d6ebf9;
}
#ladder-color-container .table .active {
  background-color: #a9d6f3 !important;
}
#ladder-color-container .table .active:hover {
  background-color: #b6dcf5 !important;
}
#ladder-color-container .table .active:hover > td {
  background-color: transparent;
}
#ladder-color-container .table .active > td {
  background-color: transparent;
}
#ladder-color-container .table td {
  background-color: inherit !important;
}
#ladder-color-container .table td.right-page .page-number {
  text-align: right;
}
#ladder-color-container .table > tbody > tr:nth-of-type(8n+9) td:first-child {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
}
#ladder-color-container .table > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) {
  border-top: 1px solid #555;
}
#ladder-color-container .table > tbody > tr.locked > td:first-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
#ladder-color-container .table > tbody > tr.locked > td:first-of-type:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
#ladder-color-container .table > tbody > tr td:first-child {
  border-right: 1px solid #ccc;
}
#ladder-color-container .table div,
#ladder-color-container .table td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#ladder-color-container .table td {
  background-color: inherit;
}
#ladder-color-container .select-staff-table {
  width: 100%;
}
#ladder-color-container .select-staff-table tr:first-child {
  border-top: 2px solid #fff;
}
#ladder-color-container .select-staff-table tr {
  border-bottom: 2px solid #fff;
}
#ladder-color-container .select-staff-table tr td:last-child {
  padding-left: 8px;
  font-size: 15px;
  color: #585665;
}
#ladder-color-container .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#ladder-color-container .active:hover {
  background-color: #b6dcf5 !important;
}
#ladder-color-container tr:hover {
  background-color: #d6ebf9 !important;
}
/*************************************************************
  PLAN BOOK > LADDER > ASSIGN TEMPLATES MODAL
**************************************************************/
#apply-templates .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}
#apply-templates .container-range {
  width: 100%;
  padding-left: 12%;
  padding-right: 12%;
}
#apply-templates .container-range .range {
  padding-bottom: 15px;
  float: right;
  width: 50%;
}
#apply-templates .search-names {
  padding-right: 5px;
}
#apply-templates .selected {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 18px;
  padding-left: 10px;
}
#apply-templates .header-text {
  background-color: #fff;
  color: #585665;
  font-size: 15px;
  line-height: 19px;
}
#apply-templates .no-border-dropdown {
  padding-top: 6px;
  display: inline-block;
}
#apply-templates .no-border-dropdown:hover {
  background-color: transparent;
}
#apply-templates .custom-templates-dropdown-options {
  margin-left: 3px;
  width: 220px;
}
#apply-templates .template-name {
  font-size: 12px;
  padding: 4px;
}
#apply-templates .spacing-select {
  padding-left: 15px;
  padding-top: 20px;
  padding-bottom: 16px;
}
#apply-templates .text-muted {
  color: #585665;
  font-size: 18px;
  background-color: transparent;
}
#apply-templates .text-unmuted {
  color: #585665;
  font-size: 18px;
  background-color: transparent;
}
#apply-templates .deselect-all {
  float: left;
  width: 30%;
  color: #1E93DF;
  padding: 8px;
}
#apply-templates .container-bubble {
  padding-top: 5px;
  padding-left: 5px;
}
#apply-templates .container-bubble input[type='text'] {
  margin-bottom: 5px;
  margin-top: 5px;
}
#apply-templates .container-bubble .col-xs-7 {
  padding-left: 4px;
  padding-top: 4px;
}
#apply-templates .staff-members {
  width: 100%;
  margin-left: 0;
}
#apply-templates .staff-members .selected {
  float: left;
  width: 70%;
  overflow: hidden;
  color: #585665;
  font-size: 18px;
}
#apply-templates .staff-members .clear {
  float: right;
  width: 20%;
  text-align: right;
  margin-right: 5%;
  color: #1E93DF;
  font-size: 15px;
}
#apply-templates .scrollable-content ul li {
  margin: 4px;
  width: 31% !important;
}
#apply-templates .assign-template-table {
  width: 100%;
  /*.locked > td:nth-child(3):after {
      content: '\f023';
      font-family: FontAwesome;
      font-size: 1.2em;
      position: absolute;
      bottom: 30%;
      right: 4px;
      z-index: 1;
      background-color: transparent;
    }*/
}
#apply-templates .assign-template-table tr:hover {
  background-color: #d6ebf9;
}
#apply-templates .assign-template-table td {
  padding: 4px;
  position: relative;
  background-color: inherit;
}
#apply-templates .assign-template-table td:first-child {
  width: 15%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
  color: #98989b;
}
#apply-templates .assign-template-table td:last-child {
  width: 15%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
  color: #98989b;
}
#apply-templates .assign-template-table td:nth-child(2),
#apply-templates .assign-template-table td:nth-child(5) {
  font-size: 15px;
  color: #585665;
  width: 0;
  font-weight: bold;
}
#apply-templates .assign-template-table td:nth-child(3),
#apply-templates .assign-template-table td:nth-child(4) {
  font-size: 12px;
  width: 35%;
  padding-left: 10px;
}
#apply-templates .assign-template-table td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#apply-templates .assign-template-table tr:nth-child(even) {
  background-color: #efefef;
}
#apply-templates .assign-template-table tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #98989b;
}
#apply-templates .assign-template-table tr:nth-of-type(8n+9) td:nth-child(3) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#apply-templates .assign-template-table tr:nth-of-type(8n+9) td:nth-child(3):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0%;
  height: 0%;
  width: 0;
}
#apply-templates .assign-template-table tr:nth-of-type(8n+9) td:nth-child(4) {
  border-top: 1px solid #98989b !important;
}
#apply-templates .assign-template-table tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
  width: 0;
}
#apply-templates .assign-template-table .locked > td:nth-child(3):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 222;
}
#apply-templates .assign-template-table .locked-temp-1 > td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: transparent;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 222;
}
#apply-templates .assign-template-table .locked-temp-2 > td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: transparent;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 222;
}
#apply-templates .assign-template-table .locked-temp-3 > td:nth-child(3):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: transparent;
  background-color: transparent;
  position: absolute;
  right: -4px;
  right: -5px;
  z-index: 222;
}
#apply-templates tr:hover,
#apply-templates li:hover {
  background-color: #d6ebf9;
}
#apply-templates tr.active,
#apply-templates li.active {
  color: #555;
  background-color: #a9d6f3;
  background-image: none;
}
#apply-templates tr.active:hover,
#apply-templates li.active:hover {
  background-color: #b6dcf5 !important;
}
#apply-templates li {
  text-align: left;
}
#apply-templates li .active {
  border-color: #ccc;
  text-shadow: 0 -1px 0 #fff;
}
#apply-templates .table > tbody > tr:hover,
#apply-templates .table > tbody > tr > td:hover,
#apply-templates .table > div:hover,
#apply-templates .table > li:hover {
  background-color: #d6ebf9;
}
#apply-templates .table .active {
  background-color: #a9d6f3 !important;
}
#apply-templates .table .active:hover {
  background-color: #b6dcf5 !important;
}
#apply-templates .table .active:hover > td {
  background-color: transparent;
}
#apply-templates .table .active > td {
  background-color: transparent;
}
#apply-templates .table td {
  background-color: inherit !important;
}
#apply-templates .table td.right-page .page-number {
  text-align: right;
}
#apply-templates .table > tbody > tr:nth-of-type(8n+9) td:first-child {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
}
#apply-templates .table > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) {
  border-top: 1px solid #555;
}
#apply-templates .table > tbody > tr.locked > td:first-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
#apply-templates .table > tbody > tr.locked > td:first-of-type:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
#apply-templates .table > tbody > tr td:first-child {
  border-right: 1px solid #ccc;
}
#apply-templates .table div,
#apply-templates .table td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#apply-templates .table td {
  background-color: inherit;
}
#apply-templates .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#apply-templates .active:hover {
  background-color: #b6dcf5 !important;
}
#apply-templates .select-template-header {
  background: #ccc;
  padding: 10px 15px;
}
#apply-templates .templates-box > tbody > tr:hover,
#apply-templates .templates-box > tbody > tr > td:hover,
#apply-templates .templates-box > div:hover,
#apply-templates .templates-box > li:hover {
  background-color: #d6ebf9;
}
#apply-templates .templates-box .active {
  background-color: #a9d6f3 !important;
}
#apply-templates .templates-box .active:hover {
  background-color: #b6dcf5 !important;
}
#apply-templates .templates-box .active:hover > td {
  background-color: transparent;
}
#apply-templates .templates-box .active > td {
  background-color: transparent;
}
#apply-templates .templates-box div {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  float: left;
  height: 90px;
  width: 32.8%;
  padding: 3px;
  font-size: 85%;
  overflow: hidden;
}
#apply-templates .templates-box div img {
  width: 100%;
  height: 70px;
}
#apply-templates .list-unstyled {
  font-size: 0.7em;
  text-align: left;
}
#apply-templates tr:hover {
  background-color: #d6ebf9 !important;
}
/*************************************************************
  PLAN BOOK > LADDER > MOVE SPREADS MODAL
**************************************************************/
#move-spreads .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}
#move-spreads .select-a-spread {
  font-size: 18px;
  padding-left: 5%;
  color: #585665;
  padding-bottom: 15px;
}
#move-spreads .container-range {
  width: 100%;
  padding-left: 12%;
  padding-right: 12%;
}
#move-spreads .container-range .range {
  padding-bottom: 15px;
  float: right;
  width: 50%;
}
#move-spreads .selected {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 18px;
}
#move-spreads .template-name {
  font-size: 12px;
  padding: 4px;
}
#move-spreads .spacing-select {
  padding-top: 30px;
  padding-bottom: 4px;
  padding-left: 15px;
}
#move-spreads .text-muted {
  color: #585665;
  font-size: 18px;
}
#move-spreads .text-unmuted {
  color: #585665;
  font-size: 18px;
}
#move-spreads .deselect-all {
  float: left;
  width: 30%;
  color: #1E93DF;
  padding: 8px;
}
#move-spreads .container-bubble {
  padding-top: 5px;
  padding-left: 5px;
}
#move-spreads .container-bubble input[type='text'] {
  margin-bottom: 5px;
}
#move-spreads .container-bubble .col-xs-7 {
  padding-left: 4px;
  padding-top: 4px;
}
#move-spreads .staff-members {
  width: 100%;
  margin-left: 0;
}
#move-spreads .staff-members .selected {
  float: left;
  width: 70%;
  overflow: hidden;
  color: #585665;
  font-size: 18px;
}
#move-spreads .staff-members .clear {
  float: right;
  width: 20%;
  text-align: right;
  margin-right: 5%;
  color: #1E93DF;
  font-size: 15px;
}
#move-spreads .scrollable-content ul li {
  margin: 4px;
  width: 31% !important;
}
#move-spreads .move-table {
  width: 100%;
  /*.locked > td:nth-child(5):after {
      content: '\f023';
      font-family: FontAwesome;
      font-size: 1.2em;
      position: absolute;
      bottom: 30%;
      right: 4px;
      z-index: 1;
      background-color: transparent;
    }*/
}
#move-spreads .move-table tr:hover {
  background-color: #d6ebf9;
}
#move-spreads .move-table td {
  padding: 4px;
  position: relative;
  background-color: inherit;
}
#move-spreads .move-table td:first-child {
  width: 5%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
  color: #98989b;
}
#move-spreads .move-table td:last-child {
  width: 37%;
  border: 0;
  background-color: #fff !important;
  font-size: 12px;
  color: #98989b;
  margin-right: 7%;
}
#move-spreads .move-table td:nth-child(2) {
  background-color: #fff !important;
  min-width: 15px;
  max-width: 15px;
  padding: 0;
  background: linear-gradient(to left, #cccccc, rgba(0, 0, 0, 0));
  border: 0 !important;
}
#move-spreads .move-table td:nth-child(3) {
  padding: 0;
  width: 0;
}
#move-spreads .move-table td:nth-child(3) img {
  height: 30px;
}
#move-spreads .move-table td:nth-child(4),
#move-spreads .move-table td:nth-child(7) {
  font-size: 15px;
  color: #585665;
  width: 0;
  font-weight: bold;
}
#move-spreads .move-table td:nth-child(5),
#move-spreads .move-table td:nth-child(6) {
  font-size: 12px;
  width: 29%;
  padding-left: 10px;
}
#move-spreads .move-table td:nth-child(5):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#move-spreads .move-table tr:nth-child(even) {
  background-color: #efefef;
}
#move-spreads .move-table tr:nth-of-type(8n+9) td:nth-child(4) {
  border-bottom: 1px solid #98989b;
}
#move-spreads .move-table tr:nth-of-type(8n+9) td:nth-child(5) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#move-spreads .move-table tr:nth-of-type(8n+9) td:nth-child(5):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 0;
  width: 0;
}
#move-spreads .move-table tr:nth-of-type(8n+9) td:nth-child(6) {
  border-top: 1px solid #98989b !important;
}
#move-spreads .move-table tr:nth-of-type(8n+9) td:nth-child(7) {
  border-top: 1px solid #98989b !important;
  width: 0;
}
#move-spreads .move-table .locked > td:nth-child(5):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -4px;
  z-index: 222;
}
#move-spreads .move-table .locked-move-1 > td:nth-child(5):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: transparent;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 222;
}
#move-spreads .move-table .locked-move-2 > td:nth-child(5):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: transparent;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 222;
}
#move-spreads .move-table .locked-move-3 > td:nth-child(5):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: transparent;
  background-color: transparent;
  position: absolute;
  bottom: 15%;
  right: -5px;
  z-index: 222;
}
#move-spreads .move-table .document-dirty {
  opacity: 1;
}
#move-spreads .move-table .dirty-preview img {
  opacity: 1;
}
#move-spreads .move-table .doc_dirty_icon.move-dirty-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px;
  color: white;
}
#move-spreads .move-table .doc_dirty_icon.move-dirty-icon i {
  background-color: #003b78 !important;
  padding: 2px;
  color: white;
}
#move-spreads tr:hover,
#move-spreads li:hover {
  background-color: #d6ebf9;
}
#move-spreads tr.active,
#move-spreads li.active {
  color: #555;
  background-color: #a9d6f3;
  background-image: none;
}
#move-spreads tr.active:hover,
#move-spreads li.active:hover {
  background-color: #b6dcf5 !important;
}
#move-spreads li {
  text-align: left;
}
#move-spreads li .active {
  border-color: #ccc;
  text-shadow: 0 -1px 0 #fff;
}
#move-spreads .table > tbody > tr:hover,
#move-spreads .table > tbody > tr > td:hover,
#move-spreads .table > div:hover,
#move-spreads .table > li:hover {
  background-color: #d6ebf9;
}
#move-spreads .table .active {
  background-color: #a9d6f3 !important;
}
#move-spreads .table .active:hover {
  background-color: #b6dcf5 !important;
}
#move-spreads .table .active:hover > td {
  background-color: transparent;
}
#move-spreads .table .active > td {
  background-color: transparent;
}
#move-spreads .table td {
  background-color: inherit !important;
}
#move-spreads .table td.right-page .page-number {
  text-align: right;
}
#move-spreads .table > tbody > tr:nth-of-type(8n+9) td:first-child {
  border-bottom: 1px solid #555 !important;
  border-right: 1px solid #555 !important;
}
#move-spreads .table > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) {
  border-top: 1px solid #555;
}
#move-spreads .table > tbody > tr.locked > td:first-of-type {
  position: relative;
  border-right: 0;
  overflow-x: inherit;
}
#move-spreads .table > tbody > tr.locked > td:first-of-type:after {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  bottom: 10%;
  right: 20px;
}
#move-spreads .table > tbody > tr td:first-child {
  border-right: 1px solid #ccc;
}
#move-spreads .table div,
#move-spreads .table td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#move-spreads .table td {
  background-color: inherit;
}
#move-spreads .active {
  color: #555;
  background-color: #a9d6f3 !important;
}
#move-spreads .active:hover {
  background-color: #b6dcf5 !important;
}
#move-spreads .select-template-header {
  background: #ccc;
  padding: 10px 15px;
}
#move-spreads .templates-box > tbody > tr:hover,
#move-spreads .templates-box > tbody > tr > td:hover,
#move-spreads .templates-box > div:hover,
#move-spreads .templates-box > li:hover {
  background-color: #d6ebf9;
}
#move-spreads .templates-box .active {
  background-color: #a9d6f3 !important;
}
#move-spreads .templates-box .active:hover {
  background-color: #b6dcf5 !important;
}
#move-spreads .templates-box .active:hover > td {
  background-color: transparent;
}
#move-spreads .templates-box .active > td {
  background-color: transparent;
}
#move-spreads .templates-box div {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  float: left;
  height: 90px;
  width: 33%;
  padding: 3px;
  font-size: 85%;
  overflow: hidden;
}
#move-spreads .templates-box div img {
  width: 100%;
  height: 70px;
}
#move-spreads .list-unstyled {
  font-size: 0.7em;
  text-align: left;
}
#move-spreads .warning {
  border: 1px solid red !important;
}
#move-spreads .warning_message {
  position: absolute;
  top: 43px;
  left: 180px;
  z-index: 1;
  color: red;
}
#move-spreads tr:hover {
  background-color: #d6ebf9 !important;
}
/*************************************************************
  DESIGN SETTINGS
**************************************************************/
#design-settings .margins {
  width: 360px;
  padding-left: 20px;
}
#design-settings .margins li {
  float: left;
  display: block;
  width: 45%;
  padding-bottom: 5px;
}
#design-settings .margins li label {
  padding-right: 10px;
  margin-bottom: 0;
}
#design-settings .margins li input {
  width: 75px;
  margin: -5px 0;
}
#design-settings .units-display {
  padding-bottom: 30px;
}
#design-settings .form-control-design-settings {
  height: 25px;
  font-size: 15px;
  border: 1px solid #1E93DF;
  color: #585665;
  padding: 0 4px 0 4px;
  margin: 0;
}
#design-settings .dropdown-menu {
  margin: 0px 0 0 60px;
  top: 70px;
}
/*************************************************************
  DD-SLICK
**************************************************************/
.dd-container {
  position: relative;
}
.dd-container .dd-select {
  border-radius: 2px;
  border: solid 1px #ccc;
  position: relative;
  cursor: pointer;
}
.dd-container .dd-desc {
  color: #aaa;
  display: block;
  overflow: hidden;
  font-weight: normal;
  line-height: 1.4em;
}
.dd-container .dd-selected {
  overflow: hidden;
  padding: 5px 5px 0;
  font-weight: bold;
}
.dd-container .dd-pointer-down:after {
  content: ' \f078';
  font-family: FontAwesome;
  color: #1E93DF;
}
.dd-container .dd-pointer-up:after {
  content: ' \f077';
  font-family: FontAwesome;
  color: #1E93DF;
}
.dd-container .dd-options {
  border: solid 1px #ccc;
  border-top: none;
  list-style: none;
  box-shadow: 0px 1px 5px #ddd;
  display: none;
  position: absolute;
  z-index: 50;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: auto;
}
.dd-container .dd-option {
  padding: 5px;
  display: block;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.dd-container .dd-option:hover {
  background: #b6dcf5;
}
.dd-container .dd-option .dd-option-text {
  color: #585665 !important;
}
.dd-container .dd-options > li:last-child > .dd-option {
  border-bottom: none;
}
.dd-container .dd-selected-description-truncated {
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-container .dd-option-selected {
  background: #a9d6f3;
}
.dd-container .dd-option-image,
.dd-container .dd-selected-image {
  vertical-align: middle;
  float: left;
  margin-right: 5px;
  width: 23px;
  max-height: 23px;
}
.dd-container .dd-image-right {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
}
.dd-container .dd-selected-text {
  font-weight: bold;
}
.form-label {
  color: #585665;
  font-size: 15px;
}
.form-header1 {
  color: #98989b;
  font-size: 18px;
}
.assign-titles-edit {
  color: #585665;
}
.modal-title {
  font-size: 24px;
  color: #585665;
}
.clear-link {
  padding-top: 10px;
  padding-left: 0;
  color: #1E93DF;
  font-size: 12px;
}
.dino {
  background-color: green;
}
/*************************************************************
  ASSIGN TITLE (MODAL)
**************************************************************/
#ladder-title-container .title-modal {
  width: 100%;
}
#ladder-title-container .title-modal td {
  padding: 4px;
  position: relative;
  background-color: inherit;
}
#ladder-title-container .title-modal td span {
  font-size: 12px;
}
#ladder-title-container .title-modal td span:hover {
  color: #014f7e;
}
#ladder-title-container .title-modal td:first-child,
#ladder-title-container .title-modal td:last-child {
  width: 15%;
  border: 0;
  background-color: #fff;
}
#ladder-title-container .title-modal td:nth-child(2),
#ladder-title-container .title-modal td:nth-child(5) {
  font-size: 15px;
  color: #585665;
  font-weight: bold;
  width: 0;
}
#ladder-title-container .title-modal td:nth-child(3),
#ladder-title-container .title-modal td:nth-child(4) {
  font-size: 12px;
  color: #1E93DF;
  width: 35%;
  padding-left: 10px;
}
#ladder-title-container .title-modal td:nth-child(3) {
  border-right: 1px solid #c4c4cc !important;
}
#ladder-title-container .title-modal tr:nth-child(even) {
  background-color: #efefef !important;
}
#ladder-title-container .title-modal tr:nth-child(odd) {
  background-color: #fff !important;
}
#ladder-title-container .title-modal tr:nth-of-type(8n+9) td:nth-child(2) {
  border-bottom: 1px solid #98989b;
}
#ladder-title-container .title-modal tr:nth-of-type(8n+9) td:nth-child(3) {
  border-right: 1px solid #98989b !important;
  border-bottom: 1px solid #98989b;
}
#ladder-title-container .title-modal tr:nth-of-type(8n+9) td:nth-child(4) {
  border-top: 1px solid #98989b !important;
}
#ladder-title-container .title-modal tr:nth-of-type(8n+9) td:nth-child(5) {
  border-top: 1px solid #98989b !important;
  width: 0;
}
#ladder-title-container .title-modal .locked > td:nth-child(4) {
  padding-left: 0px;
}
#ladder-title-container .title-modal .locked > td:nth-child(4):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  position: relative;
  bottom: 30%;
  right: 5px;
  z-index: 1;
}
#ladder-title-container .title-modal .locked td {
  color: #98989b !important;
}
#ladder-title-container .title-modal .no-lock-title-1:hover {
  color: #98989b;
}
#ladder-title-container .title-modal .no-lock-title-1 > td:nth-child(4) {
  padding-left: 5px;
}
#ladder-title-container .title-modal .no-lock-title-1 > td:nth-child(4):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  position: relative;
  bottom: 30%;
  right: 5px;
  z-index: 1;
}
#ladder-title-container .title-modal .no-lock-title-2 > td:nth-child(4) {
  padding-left: 5px;
}
#ladder-title-container .title-modal .no-lock-title-2 > td:nth-child(4):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  position: relative;
  bottom: 30%;
  right: 5px;
  z-index: 1;
}
#ladder-title-container .title-modal .no-lock-title-3 > td:nth-child(4) {
  padding-left: 5px;
}
#ladder-title-container .title-modal .no-lock-title-3 > td:nth-child(4):before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.2em;
  color: #98989b;
  position: relative;
  bottom: 30%;
  right: 5px;
  z-index: 1;
}
#ladder-title-container .title-modal tr:hover {
  background-color: #d6ebf9 !important;
}
/*************************************************************
  SPREAD DETAILS (MODAL)
**************************************************************/
#spread-details-modal .close {
  position: absolute;
  top: 0;
  right: 5px;
  color: #428bca;
  opacity: 1;
  transition: all 0.2s ease;
}
#spread-details-modal .close:hover {
  color: #2a6496;
}
#spread-details-modal ::-webkit-input-placeholder {
  color: #98989b;
}
#spread-details-modal :-moz-placeholder {
  /* Firefox 18- */
  color: #98989b;
}
#spread-details-modal ::-moz-placeholder {
  /* Firefox 19+ */
  color: #98989b;
}
#spread-details-modal :-ms-input-placeholder {
  color: #98989b;
}
#spread-details-modal .form-control {
  color: #585665;
}
#spread-details-modal .modal-body {
  padding: 15px;
}
#spread-details-modal .page-config {
  padding: 0 8px;
  width: 50%;
}
#spread-details-modal .page-config:first-of-type {
  border-right: 1px solid #c4c4cc;
}
#spread-details-modal .img-preview {
  padding-right: 10px;
  position: relative;
}
#spread-details-modal .dirty_icon_preview {
  position: absolute;
  top: 43%;
  left: 43%;
  width: 0px;
  height: 0px;
}
#spread-details-modal .preview {
  float: left;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid #ddd;
}
#spread-details-modal .page-number {
  margin-top: -5px;
  font-weight: bold;
  font-size: 18px;
}
#spread-details-modal .spread-config section:nth-child(2) .page-number {
  right: -30px;
  text-align: right;
}
#spread-details-modal .dd-container {
  margin: 15px 0 5px 0px;
  text-align: left;
}
#spread-details-modal .dd-container label {
  overflow: hidden;
  max-width: 160px;
  margin-bottom: 0;
  color: #1E93DF;
  font-weight: 400;
  line-height: 20px;
  text-overflow: ellipsis;
  cursor: pointer;
}
#spread-details-modal .dd-container label:hover {
  color: #197bbb;
}
#spread-details-modal .dd-container .dd-option,
#spread-details-modal .dd-container .dd-selected {
  white-space: nowrap;
}
#spread-details-modal .dd-container .dd-options {
  overflow: auto;
  max-height: 300px;
}
#spread-details-modal .dd-container .dd-select {
  background-color: #fff !important;
  border: 0;
  cursor: pointer;
  max-height: 27px;
  overflow: hidden;
}
#spread-details-modal .dd-container .dd-pointer-down {
  border-top-color: #1E93DF;
  top: 18px;
}
#spread-details-modal .dd-container .dd-pointer-up {
  border-bottom-color: #1E93DF !important;
  top: 18px;
}
#spread-details-modal .dd-container .box-of-colors {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
  width: 23px;
  border: 1px solid #555;
  margin-right: 7px;
  float: left;
}
#spread-details-modal .dd-container .box-of-colors span {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  box-flex: 1;
  display: block;
  height: 20px;
}
#spread-details-modal .tag-item {
  background-color: #b6dcf5;
}
#spread-details-modal tags-input .host {
  margin-top: 0;
}
#spread-details-modal .due-date {
  padding-left: 22px;
  margin-top: 30px;
}
#spread-details-modal .due-date .fa {
  color: #1E93DF;
  cursor: pointer;
  margin-top: 3px;
}
#spread-details-modal .due-date .btn {
  margin-top: 6px;
  font-size: 12px;
}
#spread-details-modal .assign-staff {
  margin-top: 30px;
}
#spread-details-modal footer {
  border-top: 0;
  height: 20px;
  margin-top: -10px;
  padding-top: 0;
}
#spread-details-modal footer p {
  position: relative;
  top: -20px;
  font-size: 18px;
  color: #1E93DF;
}
#spread-details-modal tags-input .autocomplete {
  margin-top: -100px;
}
#spread-details-modal .auto_com {
  position: absolute;
  top: 0.3em;
  right: 1em;
  color: #2093df;
}
#spread-details-modal .clear_button {
  display: none;
}
.fixed-header-container {
  overflow: hidden;
}
.fixed-header-container table {
  margin-bottom: 0;
  table-layout: fixed;
}
.students-nav li {
  height: 25px;
  padding-left: 15px;
}
.students-nav li:first-child {
  padding-left: 8px;
  height: 20px;
}
.organization-nav li {
  height: 25px;
  padding-left: 15px;
}
#ladder-partials {
  /*************************************************************
    MEDIA QUERIES
  **************************************************************/
}
#ladder-partials #upload-cover-button {
  margin: -30px 0 0;
  position: relative;
  z-index: 20;
  float: right;
}
#ladder-partials .ladder-side-menu {
  list-style-type: none;
  padding-left: 16px;
  padding-top: 16px;
  padding-bottom: 4px;
}
#ladder-partials .ladder-side-menu > li {
  line-height: 30px;
  font-size: 0.938em;
}
#ladder-partials .ladder-side-menu > li:first-child {
  font-size: 15px;
}
#ladder-partials #print-ladder-button {
  text-align: right;
}
@media screen and (min-width: 768px) {
  #ladder-partials {
    /* desktops or greater */
  }
  #ladder-partials #print-ladder-button {
    float: right;
    position: absolute;
    bottom: 60px;
    right: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #ladder-partials {
    /* landscape tablets only */
  }
  #ladder-partials #print-ladder-button {
    width: 140px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  #ladder-partials {
    /* landscape tablets only */
  }
  #ladder-partials #print-ladder-button {
    width: 200px;
  }
}
@media screen and (min-width: 1200px) {
  #ladder-partials {
    /* desktops or greater */
  }
  #ladder-partials #print-ladder-button {
    width: 250px;
  }
}
#ladder-partials .fixed-header-container th:nth-child(2) {
  text-align: center;
  padding-left: 3%;
}
#ladder-partials .fixed-header-container th:nth-child(3) {
  text-align: center;
  padding-left: 2.5%;
}
#ladder-partials .fixed-header-container th:nth-child(4) {
  padding-left: 1%;
}
/*************************************************************
  MASTER TEMPLATE
**************************************************************/
.master-template-container {
  padding-top: 30px;
}
.master-template-container .modal-title {
  font-size: 24px;
  color: #585665;
  padding-top: 15px;
}
.master-template-container .od4-scroll::-webkit-scrollbar-track {
  background-color: #dfdfdf !important;
}
.master-template-container .assign-pages-right {
  padding-left: 30px;
  color: #1E93DF;
}
.master-template-container .new-button-spacing {
  padding-top: 15px;
}
.master-template-container .copy-master-field {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 5px;
}
.master-template-container .small-copy-preview {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #fff;
}
.master-template-container .small-copy-preview img {
  height: 75px;
}
.master-template-container .copy-master-field .form-control {
  width: 400px;
}
.master-template-container .use-master-job {
  font-size: 15px;
  color: #1E93DF;
}
.master-template-container .top-gray-border {
  border-top: 1px solid #dfdfdf;
  /*padding-left:0;
    padding-right:0;*/
}
.master-template-container .master-search {
  font-size: 18px;
  position: absolute;
  top: -40px;
  right: 7px;
}
.master-template-container .form-control {
  width: 200px;
  font-size: 15px;
}
.master-template-container .overlay {
  opacity: 0.85;
  background-color: #fff;
  height: 180px;
  position: absolute;
  width: 900px;
  top: -10px;
  left: -15px;
  z-index: 1;
}
.master-template-container .overlay-left {
  opacity: 0.85;
  background-color: #fff;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: -5px;
  z-index: 1;
}
.master-template-container .overlay-right {
  opacity: 0.85;
  background-color: #fff;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  right: 5px;
  z-index: 1;
}
.master-template-container .collection {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  /*form > .row {
      padding: 0 10px;

      &:first-of-type {
        padding-top: 5px;
      }
      &:last-of-type {
        padding-bottom: 5px;
      }
    }*/
}
.master-template-container .collection .red-dash {
  border: 2px red dashed;
}
.master-template-container .collection .right-master-box {
  padding-right: 0;
}
.master-template-container .collection .used-spread-count {
  height: 50px;
  color: #585665;
  font-size: 15px;
}
.master-template-container .collection .master-ab {
  font-size: 15px;
  color: #585665;
  padding-bottom: 15px;
}
.master-template-container .collection .master-custom-title {
  font-size: 15px;
  color: #585665;
  padding-bottom: 15px;
}
.master-template-container .collection .collection-item {
  margin: 0 !important;
  padding: 10px 15px;
  position: relative;
  background-color: #fff !important;
  border: 5px solid #dfdfdf;
  /*.page-info {
        width: 100%;
        .display-table {
          width: 100%;

          .table-row {
            > div {
              display: table-cell;
              float: none;
              vertical-align: bottom;

              &.page-img {
                padding-left: 0px;
                vertical-align: top;
              }
            }
            p {
              height: 45px;
            }
          }
        }
      }*/
}
.master-template-container .collection .collection-item:hover {
  border: 5px solid #d6ebf9;
}
.master-template-container .collection .collection-item .delete-link {
  color: #f20000;
  font-size: 15px;
}
.master-template-container .collection .collection-item .copy-edit-link {
  color: #1E93DF;
  padding-left: 15px;
  font-size: 15px;
}
.master-template-container .collection .page-img {
  height: 75px;
}
.master-template-container .collection .page-img img {
  max-height: 75px;
}
/*************************************************************
  APPLY CUSTOM TEMPLATES MODAL
**************************************************************/
#apply-custom-templates {
  padding-top: 30px;
}
#apply-custom-templates .truncate {
  width: 250px;
  line-height: 1.16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#apply-custom-templates .modal-title {
  font-size: 24px;
  color: #585665;
  padding-top: 15px;
}
#apply-custom-templates .use-temps-job {
  padding-bottom: 30px;
}
#apply-custom-templates .assign-pages-right {
  padding-left: 30px;
  color: #1E93DF;
}
#apply-custom-templates .new-button-spacing {
  padding-top: 15px;
}
#apply-custom-templates .copy-master-field {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 5px;
}
#apply-custom-templates .small-copy-preview {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #fff;
}
#apply-custom-templates .small-copy-preview img {
  height: 75px;
}
#apply-custom-templates .copy-master-field .form-control {
  width: 400px;
}
#apply-custom-templates .use-master-job {
  font-size: 15px;
  color: #1E93DF;
}
#apply-custom-templates .top-gray-border {
  border-top: 1px solid #dfdfdf;
  /*padding-left:0;
    padding-right:0;*/
}
#apply-custom-templates .master-search {
  font-size: 18px;
  position: absolute;
  top: -40px;
  right: 7px;
}
#apply-custom-templates .form-control {
  width: 200px;
  font-size: 15px;
}
#apply-custom-templates .overlay {
  opacity: 0.85;
  background-color: #fff;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 40px;
  z-index: 1;
}
#apply-custom-templates .collection {
  width: 100%;
  background-color: #dfdfdf;
  padding: 0 2px 0 0 !important;
  margin: 0 !important;
  /*form > .row {
      padding: 0 10px;

      &:first-of-type {
        padding-top: 5px;
      }
      &:last-of-type {
        padding-bottom: 5px;
      }
    }*/
}
#apply-custom-templates .collection .red-dash {
  border: 2px red dashed;
}
#apply-custom-templates .collection .right-master-box {
  padding-right: 0;
}
#apply-custom-templates .collection .right-master-box .col-xs-6 {
  height: 75px;
  position: relative;
}
#apply-custom-templates .collection .used-spread-count {
  height: 50px;
  color: #585665;
  font-size: 15px;
}
#apply-custom-templates .collection .master-ab {
  font-size: 15px;
  color: #585665;
  padding-bottom: 15px;
}
#apply-custom-templates .collection .master-custom-title {
  font-size: 15px;
  color: #585665;
  padding-bottom: 15px;
}
#apply-custom-templates .collection .collection-item {
  margin: 7px !important;
  padding: 10px 15px;
  position: relative;
  background-color: #fff !important;
  /*.page-info {
        width: 100%;
        .display-table {
          width: 100%;

          .table-row {
            > div {
              display: table-cell;
              float: none;
              vertical-align: bottom;

              &.page-img {
                padding-left: 0px;
                vertical-align: top;
              }
            }
            p {
              height: 45px;
            }
          }
        }
      }*/
}
#apply-custom-templates .collection .collection-item .delete-link {
  color: #f20000;
  font-size: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
}
#apply-custom-templates .collection .collection-item .custom-template-name {
  color: #1E93DF;
  font-size: 15px;
  padding-bottom: 8px;
}
#apply-custom-templates .collection .collection-item .copy-link {
  color: #1E93DF;
  padding-left: 15px;
  font-size: 15px;
  position: absolute;
  bottom: 0;
  right: 50px;
}
#apply-custom-templates .collection .collection-item .edit-link {
  color: #1E93DF;
  padding-left: 15px;
  font-size: 15px;
  position: absolute;
  bottom: 0;
  right: 0;
}
#apply-custom-templates .collection .page-img {
  height: 75px;
}
#apply-custom-templates .collection .page-img img {
  max-height: 75px;
}
/*************************************************************
  MASTER TEMPLATE & CUSTOM TEMPLATE PARTIALS
**************************************************************/
.mp-ct-partials .overlay {
  opacity: 0.85;
  background-color: #fff;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1;
}
.mp-ct-partials input.pull-right {
  margin-bottom: 10px;
}
.mp-ct-partials .collection {
  width: 100%;
  border: 1px solid #ccc;
  overflow: scroll;
}
.mp-ct-partials .collection form > .row {
  padding: 0 10px;
}
.mp-ct-partials .collection form > .row:first-of-type {
  padding-top: 5px;
}
.mp-ct-partials .collection form > .row:last-of-type {
  padding-bottom: 5px;
}
.mp-ct-partials .collection .collection-item {
  position: relative;
}
.mp-ct-partials .collection .collection-item .page-info {
  border: solid 3px #ccc;
  padding: 5px 10px;
  width: 100%;
}
.mp-ct-partials .collection .collection-item .page-info .display-table {
  width: 100%;
}
.mp-ct-partials .collection .collection-item .page-info .display-table .table-row > div {
  display: table-cell;
  float: none;
  vertical-align: bottom;
}
.mp-ct-partials .collection .collection-item .page-info .display-table .table-row > div.page-img {
  padding-left: 0px;
  vertical-align: top;
}
.mp-ct-partials .collection .collection-item .page-info .display-table .table-row p {
  height: 45px;
}
.mp-ct-partials .collection .page-img {
  height: 75px;
}
.mp-ct-partials .collection .page-img img {
  max-height: 75px;
}
/*************************************************************
  APPLY MASTER PAGES MODAL
**************************************************************/
#apply-master-pages .no-bg {
  border: 0 !important;
  background-color: #fff !important;
}
#apply-master-pages .no-bg.nowrap {
  max-width: 200px;
}
#apply-master-pages .container-bubble {
  padding: 5px;
  background-color: #dfdfdf;
}
#apply-master-pages .main .scrollable-content {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}
#apply-master-pages .main .scrollable-content .mp-name {
  max-width: 100px;
}
#apply-master-pages .search-names {
  padding-right: 12px;
}
#apply-master-pages .select-mp .scrollable-content ul {
  padding-left: 0;
}
#apply-master-pages .select-mp .scrollable-content ul li {
  padding: 0;
  margin: 0;
  border: 3px solid transparent;
  width: 33% !important;
}
#apply-master-pages .select-mp .scrollable-content ul .mp-preview {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 33%;
  overflow: hidden;
}
#apply-master-pages .select-mp .scrollable-content ul .mp-preview div {
  background-position: top center;
  background-size: cover;
  background-color: #dfdfdf;
  width: 100%;
  height: 20px;
  padding: 3px;
}
#apply-master-pages .select-mp .scrollable-content ul .mp-preview div:first-child {
  height: 85px;
}
#apply-master-pages .select-mp .scrollable-content ul .active {
  background-color: #1E93DF !important;
}
/*************************************************************
  MOVE SPREADS
**************************************************************/
#move-spreads table tr.active {
  background-color: #a9d6f3 !important;
}
#move-spreads table tr.active:hover {
  background-color: #b6dcf5 !important;
}
#move-spreads table tr.active > td:last-child {
  background-color: transparent !important;
}
#move-spreads table td.hover-enlarge {
  transition: all 0.1s ease;
}
#move-spreads table td.hover-enlarge:hover {
  position: relative;
  z-index: 2;
  transform: scale(2.5) translateX(15px);
}
#move-spreads table td:last-child {
  width: 200px;
  border: 0;
  background-color: white !important;
}
#move-spreads table td:last-child input {
  margin: -5px 5px;
  width: 75px;
}
/*************************************************************

  SPREADS VIEW (LADDER -> SUBMIT SPREADS SUB-TAB)

**************************************************************/
#submit-spreads-modal .format-aside {
  z-index: 2;
  top: -33px !important;
}
#submit-spreads-modal .submit-spreads-title {
  width: 165px;
}
#submit-spreads-modal .pull-left-submit-name {
  float: right;
  width: 88%;
  padding: 4px 6px 0 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  padding-top: 3px;
  font-size: 18px;
  color: #585665;
  line-height: 1.8;
  position: relative;
}
#submit-spreads-modal .pull-left-submit-name:after {
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  bottom: -1px;
  border-right-width: 1px;
  border-left-width: 0px;
  border-image: linear-gradient(to top, #c4c4cc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
  width: 1px;
}
#submit-spreads-modal .pull-right-submit-name {
  float: right;
  width: 86%;
  padding: 4px 10px 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  padding-top: 3px;
  font-size: 18px;
  color: #585665;
  line-height: 1.8;
}
#submit-spreads-modal .pull-left-submit-number {
  float: left;
  width: 12%;
  padding: 0;
  font-size: 24px;
  color: #585665;
  vertical-align: top;
}
#submit-spreads-modal .pull-right-submit-number {
  float: right;
  width: 12%;
  padding: 0;
  font-size: 24px;
  color: #585665;
  vertical-align: top;
}
#submit-spreads-modal .submit-blank-filler {
  height: 605px;
  width: 983px;
  position: relative;
  border: #dfdfdf solid 2px;
}
#submit-spreads-modal .submit-blank-filler-half {
  width: 50%;
  height: 100%;
  position: relative;
}
#submit-spreads-modal .submit-blank-filler-half:after {
  content: " ";
  top: 18%;
  right: -1px;
  background-color: #dfdfdf;
  position: absolute;
  height: 400px;
  width: 2px;
  border-color: white;
}
#submit-spreads-modal .format-aside:after,
#submit-spreads-modal .format-aside:before {
  right: 100%;
  top: 44%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
#submit-spreads-modal .format-aside:after {
  border-color: transparent;
  border-right-color: white;
  border-width: 16px;
  margin-top: -16px;
}
#submit-spreads-modal .format-aside:before {
  border-color: transparent;
  border-right-color: #dddddd;
  border-width: 19px;
  margin-top: -19px;
}
#submit-spreads-modal .page {
  border-bottom: 1px solid #999;
  height: 40px;
  padding: 0.5em;
  width: 300px;
}
#submit-spreads-modal .left-page {
  border-right: 1px solid #ccc;
}
#submit-spreads-modal .left-page .page-number {
  padding-right: 10px;
}
#submit-spreads-modal .right-page .page-number {
  padding-left: 10px;
}
#submit-spreads-modal .submit-heading1 {
  color: #585665;
  font-size: 24px;
  padding-bottom: 8px;
}
#submit-spreads-modal .submit-heading2 {
  color: #585665;
  font-size: 15px;
  padding-bottom: 8px;
}
#submit-spreads-modal .submit-heading3 {
  font-size: 12px;
  color: #585665;
  line-height: 1;
  padding-bottom: 19px;
}
#submit-spreads-modal .submit-approved-by {
  font-size: 12px;
  color: #98989b;
}
#submit-spreads-modal .submit-heading-active {
  color: #014F7E;
  font-size: 15px;
  padding-top: 15px;
  line-height: 1;
}
#submit-spreads-modal .submit-heading-active-looks {
  color: #014F7E;
  font-size: 15px;
  padding-top: 23px;
  padding-bottom: 4px;
  line-height: 1;
}
#submit-spreads-modal .number-of-spreads {
  line-height: 1;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
#submit-spreads-modal .submit-keep-spread-blank {
  font-size: 15px;
  color: #585665;
  line-height: 1;
  padding-top: 34px;
  padding-bottom: 34px;
}
#submit-spreads-modal .overflow-text-detected {
  font-size: 12px;
  color: #c00;
  padding-top: 4px !important;
}
#submit-spreads-modal .red-text {
  color: red;
}
#submit-spreads {
  margin-top: 60px;
}
#submit-spreads .form-control {
  display: inline-block;
}
#submit-spreads .submit-spreads-button {
  padding-top: 10px;
}
#submit-spreads .submit-view-submitted {
  line-height: 1;
  padding-bottom: 8px;
}
#submit-spreads .submit-spreads-pages {
  line-height: 1;
  padding-bottom: 68px;
}
#submit-spreads .submit-let-me-submit {
  font-size: 12px;
  color: #585665;
}
#submit-spreads .form-inline input[type='number'].form-control {
  width: 50px !important;
}
#submit-spreads .submit-spacing {
  font-size: 18px;
  color: #585665;
  line-height: 1;
  padding: 20px 0px 16px 10px;
  background-color: transparent;
}
#submit-spreads .submit-right {
  padding-left: 15px;
}
#submit-spreads .row.top-buffer {
  margin-top: 30px;
}
#submit-spreads .search-padding {
  padding-bottom: 15px;
}
#submit-spreads #submit-spreads-table.signatures-3 > tbody > tr:nth-of-type(8n+9) > td:nth-child(3) {
  border-top: 1px solid #555555;
}
#submit-spreads .submitSpreadTable {
  width: 100%;
  padding: 0;
  margin: 0;
}
#submit-spreads .submitSpreadTable tr {
  height: 30px;
  vertical-align: bottom;
}
#submit-spreads .submitSpreadTable tr:nth-child(even) {
  background-color: #efefef;
}
#submit-spreads .submitSpreadTable tr:hover {
  background-color: #b6dcf5 !important;
}
#submit-spreads .submitSpreadTable tr:not(.disabled):hover {
  background-color: #d6ebf9 !important;
}
#submit-spreads .submitSpreadTable tr td {
  padding-left: 4px;
  padding-right: 4px;
  border: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#submit-spreads .submitSpreadTable tr td.hover-enlarge {
  transition: all 0.1s ease;
}
#submit-spreads .submitSpreadTable tr td.hover-enlarge:hover {
  position: relative;
  z-index: 2;
  transform: scale(2.5) translateX(15px);
}
#submit-spreads .submitSpreadTable tr td:first-child {
  min-width: 15px;
  max-width: 15px;
  background: linear-gradient(to left, #dfdfdf, #ffffff) !important;
  padding: 0 0 1px  0 !important;
  background-color: white !important;
}
#submit-spreads .submitSpreadTable tr td:nth-child(2) {
  width: 8% !important;
  padding: 0 !important;
  background-color: #fff !important;
  border-bottom: 1px #c4c4cc solid;
  border-right: 1px #c4c4cc solid;
}
#submit-spreads .submitSpreadTable tr td:nth-child(2) img {
  width: 100%;
  padding: 0;
}
#submit-spreads .submitSpreadTable tr td:nth-child(3) {
  width: 0;
  font-size: 15px;
  color: #585665;
  font-weight: bold;
}
#submit-spreads .submitSpreadTable tr td:nth-child(4) {
  width: 32% !important;
  font-size: 12px;
  color: #585665;
  overflow: visible !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  background-color: inherit;
}
#submit-spreads .submitSpreadTable tr td:nth-child(4):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 25%;
  height: 50%;
  width: 1px;
  background-color: #c4c4cc;
}
#submit-spreads .submitSpreadTable tr td:nth-child(5) {
  width: 32% !important;
  font-size: 12px;
  color: #585665;
  padding-left: 10px;
  overflow: visible !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  background-color: inherit;
}
#submit-spreads .submitSpreadTable tr td:nth-child(6) {
  width: 0;
  font-size: 15px;
  color: #585665;
  text-align: right;
  position: relative;
  font-weight: bold;
}
#submit-spreads .submitSpreadTable tr td:nth-child(7) {
  width: 10% !important;
  font-size: 12px;
  color: #98989b;
  text-align: center;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #fff !important;
}
#submit-spreads .submitSpreadTable tr td:nth-child(8) {
  width: 15% !important;
  font-size: 12px;
  color: #98989b;
  text-align: center;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #fff !important;
  /*&:after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          height: 100%;
          width: 22px;
          //background-color: #fff;
        }*/
}
#submit-spreads .submitSpreadTable .active {
  background-color: #b6dcf5 !important;
}
#submit-spreads .submitSpreadTable .deactivated td {
  color: #98989b !important;
  cursor: default;
}
#submit-spreads .submitSpreadTable .locked > td:nth-child(5):before {
  content: '\f023';
  font-family: FontAwesome;
  font-size: 15px;
  position: absolute;
  bottom: 0%;
  left: -5px;
  z-index: 1;
  background-color: transparent;
}
#submit-spreads .submitSpreadTable .locked > td:nth-child(4):after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 60%;
  width: 1px;
  background-color: #c4c4cc;
}
#print-ladder .print-preview {
  background: #ccc;
  padding: 10px 15px;
}
#print-ladder .print-preview .table {
  background: #fff;
}
#print-ladder .print-preview .table.spread-details-table .img-preview {
  border-right: 1px solid #999;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages {
  width: 60%;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .page-title {
  border-bottom: 1px solid #999;
  margin-bottom: 5px;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .page-title div:first-child {
  font-weight: bold;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .page-title div:nth-child(2) {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .left-page .row.page-title {
  margin-left: -8px;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .right-page .page-title {
  border-left: 1px solid #999;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .right-page .page-title div:first-child {
  text-align: right;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages label {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .master-spread {
  margin-top: 5px;
}
#print-ladder .print-preview .table.spread-details-table .spread-pages .master-spread img {
  max-height: 30px;
}
#print-ladder .print-preview .table.spread-details-table .other-spread-data {
  width: 35%;
  max-width: 350px;
}
#print-ladder .print-preview .table.spread-details-table .other-spread-data table {
  table-layout: fixed;
}
#print-ladder .print-preview .table.spread-details-table .other-spread-data table tr {
  border-top: 0;
}
#print-ladder .print-preview .table.spread-details-table .other-spread-data table tr th,
#print-ladder .print-preview .table.spread-details-table .other-spread-data table tr td {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  border-top: 0;
}
#print-ladder .print-preview .table.spread-details-table .other-spread-data table tr th {
  text-align: right;
  padding-right: 15px;
  width: 40%;
}
#print-ladder .print-preview .table.spread-details-table .other-spread-data table tr td {
  width: 60%;
}
/*************************************************************
  COVERAGE
**************************************************************/
#coverage {
  margin-top: 20px;
}
#coverage #alphabet {
  list-style: none;
  padding: 0;
}
#coverage #alphabet li {
  float: left;
  text-align: center;
}
#coverage .tile {
  background-color: #fff;
  float: left;
  margin: 2px;
  padding: 0.5em;
  width: 224px;
  overflow: hidden;
}
#coverage .tile > div:last-child {
  overflow-y: auto;
  height: 21px;
}
#coverage .thumbnail-sm-container {
  background-color: #dfdfdf;
}
#coverage .thumbnail-sm-placeholder {
  float: left;
  height: 100px;
  width: 100px;
  margin: 0 0.5em 0.5em 0;
  background-size: 100px 100px;
}
#coverage .photos-in-book {
  font-size: 24px;
  color: #1E93DF;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
#coverage .in-book-image {
  color: #585665;
  text-align: center;
}
#coverage .dropdown {
  margin-bottom: 1em;
}
#coverage label {
  font-weight: normal;
}
#coverage .disabled {
  color: #c4c4c4;
}
#coverage .thumbnail-sm-container .pull-left {
  width: 100px;
}
#coverage .thumbnail-sm-container .fa-photo {
  display: block;
  margin: 0 auto;
  width: 16px;
}
#coverage ul ul {
  margin-left: 20px;
  position: relative;
}
/*************************************************************
  COVER AND ENDSHEET
**************************************************************/
#cover-endsheet {
  /* Styling blank spreads that displayed in Recently Edited footer popup */
}
#cover-endsheet .view-thumbs-cover {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  background: #dfdfdf;
  padding: 8px;
  height: 250px;
  width: 100%;
  margin: 0;
}
#cover-endsheet .view-thumbs-all {
  display: inline-block;
  position: relative;
  vertical-align: top;
  /*background: @gray4;*/
  background: #dfdfdf;
  width: 50%;
  padding: 8px;
  height: 165px;
  /*/ / min-height: 100 px !important;*/
  margin: 0;
}
#cover-endsheet .recentlyEditedImage {
  height: auto;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#cover-endsheet .recentlyEditedImageCover {
  height: auto;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#cover-endsheet .recentlyEditedWrapperCover {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  padding: 0;
  margin: 0;
  z-index: 8;
  display: block;
  overflow: hidden;
  background-color: white;
}
#cover-endsheet .recentlyEditedWrapper {
  position: relative;
  left: 0;
  top: -29px;
  height: 100%;
  width: auto;
  padding: 0;
  margin: 0;
  z-index: 8;
  display: block;
  overflow: hidden;
}
#cover-endsheet .recentlyEditedWrapperEndsheet {
  position: relative;
  left: 0;
  top: -1px;
  height: 100%;
  width: auto;
  padding: 0;
  margin: 0;
  z-index: 8;
  display: block;
  overflow: hidden;
}
#cover-endsheet .divTitlesLine {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  height: 20px;
  width: 1px;
  background-color: #c4c4cc;
  z-index: 30;
}
#cover-endsheet .recentlyEditedStatus {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  /*font-size: @font-xs;*/
  font-size: 12px;
  /*color: @gray1;*/
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#cover-endsheet .lockedStatus {
  position: absolute;
  right: 0;
  top: 0;
  width: 15%;
  /*font-size: @font-xs;*/
  font-size: 12px;
  /*color: @gray1;*/
  color: #585665;
  padding: 2px;
  text-align: center;
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
}
#cover-endsheet .reWrapLeft {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  /*font-size: @font-xs;*/
  font-size: 12px;
  /*color: @gray1;*/
  color: #585665;
  z-index: 20;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#cover-endsheet .reLeftPageTitle {
  width: 95%;
  overflow: hidden;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  opacity: 1;
}
#cover-endsheet .reLeftPageNum {
  width: 25%;
  float: left;
  text-align: center;
  opacity: 1;
}
#cover-endsheet .reWrapRight {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  /*font-size: @font-xs;*/
  font-size: 12px;
  /*color: @gray1;*/
  color: #585665;
  z-index: 20;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#cover-endsheet .reRightPageTitle {
  width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
  opacity: 1;
  margin-left: 10px;
}
#cover-endsheet .reRightPageNum {
  width: 25%;
  text-align: center;
  float: right;
  opacity: 1;
}
#cover-endsheet .recentlyEditedBlankWrapper {
  position: relative;
  top: -2%;
  left: 0px;
  height: 110px;
  width: auto;
  /*/ / width: 170 px;*/
  padding: 0;
  margin: 5px;
  z-index: 8;
  /*background-color: @white;*/
  background-color: white;
}
#cover-endsheet .recentlyEditedBlankWrapperEndSheet {
  position: relative;
  top: -4px;
  left: 0px;
  height: 148px;
  width: auto;
  padding: 0;
  margin: 5px;
  z-index: 8;
  background-color: white;
}
#cover-endsheet .reBlankThumbLeft {
  float: left;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
#cover-endsheet .reBlankThumbLeft:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 15%;
  height: 70%;
  width: 1px;
  /*background-color: @gray3;*/
  background-color: #c4c4cc;
}
#cover-endsheet .black-lock {
  /*background-color: @gray1 !important;*/
  background-color: #585665 !important;
  color: white !important;
  width: 15px !important;
  height: 15px !important;
  text-align: center;
  padding: 0 !important;
}
#cover-endsheet .re-details-endsheet {
  position: absolute;
  top: -1px;
  left: 0%;
  height: 100%;
  width: 100%;
  text-align: center;
  /*color:@linkBlue;*/
  color: #2093df;
  z-index: 100;
  border: 3px solid #A9D6F3;
  padding: 3px;
  opacity: 0;
}
#cover-endsheet .no-details {
  position: absolute;
  top: 3px;
  left: 131px;
  width: 50px !important;
  /*font-size: @font-xs;*/
  padding: 3px;
  background-color: transparent !important;
}
#cover-endsheet .re-details-cover {
  position: absolute;
  top: 0px;
  left: 0%;
  text-align: center;
  height: 100%;
  width: 100%;
  color: #2093df;
  z-index: 100;
  padding: 3px;
  opacity: 0;
  border: 3px solid #A9D6F3;
}
#cover-endsheet .no-details-cover {
  position: absolute;
  top: 3px;
  left: 173px;
  width: 50px !important;
  /*font-size: @font-xs;*/
  font-size: 12px;
  padding: 3px;
  background-color: transparent !important;
}
#cover-endsheet .first-use-cover {
  position: absolute;
  top: 25px;
  left: 2%;
  width: 100%;
}
#cover-endsheet .first-use-end {
  position: absolute;
  top: 520px;
  left: 71%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #cover-endsheet {
    /* desktops or greater */
  }
  #cover-endsheet .recentlyEditedImageCover {
    height: 190px;
  }
  #cover-endsheet .recentlyEditedImage {
    height: 190px;
  }
  #cover-endsheet .view-thumbs-cover {
    height: 290px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #cover-endsheet {
    /* landscape tablets only */
  }
  #cover-endsheet .view-thumbs-cover {
    height: 230px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  #cover-endsheet {
    /* landscape tablets only */
  }
  #cover-endsheet .recentlyEditedImageCover {
    height: 188px;
  }
  #cover-endsheet .recentlyEditedImage {
    height: 188px;
  }
  #cover-endsheet .view-thumbs-cover {
    height: 225px;
  }
  #cover-endsheet .view-thumbs-all {
    height: 168px;
  }
}
@media screen and (min-width: 1200px) {
  #cover-endsheet {
    /* desktops or greater */
  }
  #cover-endsheet .recentlyEditedImageCover {
    height: 250px;
  }
  #cover-endsheet .recentlyEditedImage {
    height: 150px;
  }
  #cover-endsheet .view-thumbs-all {
    height: 168px;
  }
}
.manage-proof {
  position: relative;
}
.manage-proof .close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  font-weight: bold;
}
.manage-proof .suspend-delivery {
  padding-left: 30px;
}
.manage-proof .suspend-delivery p {
  padding-left: 30px;
}
.manage-proof .suspend-delivery .suspended-check {
  height: 35px;
}
.manage-proof .suspend-delivery .suspended-dates div:first-child {
  width: 90px;
  float: left;
}
.manage-proof .suspend-delivery .suspended-dates div:nth-child(2) {
  width: 30px;
  float: left;
  text-align: center;
  padding-top: 6px;
}
.manage-proof .suspend-delivery .suspended-dates div:nth-child(3) {
  width: 90px;
  float: left;
}
.manage-proof .suspend-delivery .suspended-dates div:nth-child(4) {
  width: 50px;
  float: left;
  text-align: center;
  padding-top: 6px;
}
.manage-proof .reroute {
  padding-left: 60px;
}
.manage-proof .reroute div {
  padding: 0 !important;
}
.manage-proof .reroute .addresses {
  padding-top: 8px !important;
}
.manage-proof .reroute .ship-to {
  font-size: 12px;
}
.manage-proof .reroute .ship-to .title {
  font-size: 12px;
}
.manage-proof .reroute .ship-to .dates-width {
  width: 100px;
  float: left;
}
.manage-proof .reroute .ship-to .dates-text-right {
  width: 40px;
  float: left;
  padding-top: 7px;
}
.manage-proof .set-another {
  font-size: 15px;
  color: #1E93DF;
  padding-left: 60px;
}
.manage-alt-contact {
  position: relative;
  height: 500px !important;
}
.manage-alt-contact .close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  font-weight: bold;
}
.manage-alt-contact .name {
  text-align: right;
  height: 32px;
}
.manage-alt-contact .delete {
  color: #1E93DF;
  position: absolute;
  left: 15px;
  bottom: 15px;
}
.manage-alt-contact .save {
  background-color: #2093df !important;
  color: white !important;
  padding: 8px 12px !important;
  position: absolute;
  right: 15px;
  bottom: 15px;
  border-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 0px;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 15px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  background-color: #2093df;
}
.manage-alt-contact .atl-delivery-text {
  margin-bottom: 8px !important;
}
.padding-em-pt1 {
  padding-top: 1em;
}
.padding-em-pt5 {
  padding-top: 0.5em;
}
.link-disabled {
  color: #2093df;
  opacity: 0.5;
}
.align-divs {
  height: 100% !important;
  width: 100% !important;
  position: relative;
}
.align-divs-done {
  position: absolute;
  right: 15px;
}
#page-selector-modal {
  /*.locked > td:last-of-type:after {
      content: '\f023';
      font-family: FontAwesome;
      font-size: 1.2em;
      position: absolute;
      bottom: 5%;
      right: 9px;
  }*/
}
#page-selector-modal .form-control {
  height: 25px;
  width: 50px;
}
#page-selector-modal header {
  border-bottom: 0;
  padding-bottom: 0;
}
#page-selector-modal label.radio {
  margin-right: 10px;
}
#page-selector-modal label.checkbox {
  margin-right: 3px;
}
#page-selector-modal a.dropdown-toggle.disabled,
#page-selector-modal .dropdown-menu a[disabled] {
  color: #2a6496 !important;
  opacity: 0.5;
}
#page-selector-modal .dropdown-menu a[disabled] {
  color: #999 !important;
}
#page-selector-modal .page-select td {
  padding: 0 !important;
}
#page-selector-modal .page-select td div {
  height: 25px;
  line-height: 25px;
  overflow: hidden !important;
}
#page-selector-modal .page-select.table td {
  border-top: none;
}
#page-selector-modal .signatures > tbody > tr:nth-of-type(8n+9) td:first-child {
  border-bottom: none !important;
  border-right: none !important;
}
#page-selector-modal .signatures > tbody > tr:nth-of-type(8n+9) td:first-child div:not(:first-child) {
  border-bottom: 1px solid #555555;
}
#page-selector-modal .signatures > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2),
#page-selector-modal .signatures > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) div:first-child {
  border-top: none !important;
}
#page-selector-modal .signatures > tbody > tr:nth-of-type(8n+9) td:nth-child(n+2) div {
  border-top: 1px solid #555555;
}
#page-selector-modal .signatures > tbody > tr:nth-of-type(8n+9) td:first-child div:last-child {
  border-right: 1px solid #555555;
}
#page-selector-modal .dropdown-parent .dropdown-menu {
  max-height: 27em !important;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: hidden;
}
#page-selector-modal .dropdown-parent .dropdown-menu::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
#page-selector-modal .dropdown-parent .dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.pb-error {
  color: red !important;
}
.edit-students {
  font-size: 12px;
  color: #585665;
  margin-bottom: 0.5em;
}
#flow-portraits .top-underline {
  border-top: 0.25em solid #dfdfdf;
}
#flow-portraits .create-new-flow {
  color: #585665;
  font-size: 15px;
}
#page-selector-modal .flow-portraits-left,
#page-selector-modal .flow-portraits-middle,
#page-selector-modal .flow-portraits-right {
  float: left;
}
#page-selector-modal .flow-portraits-right {
  width: 13%;
}
#page-selector-modal .include-knockouts,
#page-selector-modal .rows-columns {
  font-size: 15px;
}
#page-selector-modal .rows-columns {
  float: left;
}
#page-selector-modal .based_on_list {
  overflow-y: auto;
  max-height: 330px;
  min-height: 30px;
}
#page-selector-controls {
  color: #585665;
  font-size: 15px;
  height: 34px;
  line-height: 34px;
}
#page-selector-controls label {
  margin: 0;
}
#pf-settings-modal {
  max-height: 640px;
  min-height: 640px;
}
#pf-settings-modal .modal-body {
  height: inherit !important;
  margin: 0 auto;
  width: 1085px;
}
#pf-settings-modal .modal-footer {
  margin-top: 0;
}
#pf-settings-modal .row-selector,
#pf-settings-modal .column-selector {
  font-size: 14pt;
}
#pf-settings-modal .large-flow-text {
  font-size: 20pt;
}
#pf-settings-modal .flow-icon {
  font-size: 15px;
}
#pf-settings-modal .knock-outs {
  top: -250px;
  right: 114px;
}
#pf-settings-modal .adjust-style {
  top: -380px;
  left: -325px;
}
#pf-settings-modal .arrow-left {
  width: 200px;
}
#pf-settings-modal #preview .preview-page {
  width: 226pt;
}
#pf-settings-modal #preview .preview-page .preview-row-container {
  width: 100%;
}
#pf-settings-modal #preview .spread {
  background-position: 0 40px;
  background-repeat: no-repeat;
  background-size: cover;
}
#pf-settings-modal .footer-right {
  bottom: -65px;
  position: absolute;
  right: 0;
  z-index: 9999;
}
#pf-settings-modal #preview-modal .preview-page {
  width: 434pt;
}
#pf-settings-modal #page-slider {
  float: left;
  height: 65px;
  overflow: auto;
  width: 525px;
}
#mayLoseSettingsModal .modal-body {
  height: inherit !important;
  margin: 0 auto;
  width: 1085px;
}
#fontFamilyInvalidModal {
  height: 200px !important;
  margin: auto;
  width: 700px;
}
#fontFamilyInvalidModal .modal-body {
  height: 50px !important;
}
#page-slider .preview-page.page-empty .page-number {
  color: #c4c4cc;
}
#spread-index-modal .page {
  border-bottom: 1px solid #999;
  height: 40px;
  padding: 0.5em;
  width: 300px;
}
#spread-index-modal .left-page {
  border-right: 1px solid #ccc;
}
#spread-index-modal .left-page .page-number {
  padding-right: 10px;
}
#spread-index-modal .right-page .page-number {
  padding-left: 10px;
}
.index-entries.unmatched tbody tr:hover {
  background-color: #a9d6f3;
}
.index-entries.table-striped > tbody > tr > td.spread-page.left-page {
  border-left: none;
  border-right: 1px solid #ccc;
}
.index-entries.table-striped > tbody > tr > td.spread-page {
  border-left: 1px solid #ccc;
}
.index-entries.table th {
  border-bottom: none !important;
  font-weight: normal;
}
.index-entries.table td {
  border-top: none;
}
.index-entries.table td.close-col {
  background-color: #fff !important;
}
.index-entries.table td.close-col a {
  color: #999;
}
#flow-and-review-modal {
  max-height: 640px;
  min-height: 640px;
}
#flow-and-review-modal .modal-body {
  height: inherit !important;
  margin: 0 auto;
  padding: 0;
  width: 1085px;
}
#flow-and-review-modal .no-border-dropdown:hover {
  background-color: transparent;
}
#flow-and-review-modal .modal-footer {
  margin-top: 0;
  padding-top: 2px;
  position: relative;
}
#flow-and-review-modal #page-slider {
  float: left;
  height: 105px;
  overflow: auto;
  width: 614px;
}
#flow-and-review-modal #page-slider .preview-page {
  height: 65px;
  width: 55px;
}
#flow-and-review-modal #pages-needed-warning {
  left: 510px;
  position: absolute;
  top: -2px;
}
#flow-and-review-modal #pages-needed-warning .warning {
  color: #cc0000;
}
#unmatched-blank-state,
#matched-ignored-blank-state {
  background-color: #dfdfdf;
  display: table;
  min-height: 10em;
  overflow: hidden;
  width: 100%;
}
#unmatched-blank-state > div,
#matched-ignored-blank-state > div {
  color: #98989b;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#matched-ignored-blank-state {
  min-height: 20em;
}
.flowIndexTable tr:nth-of-type(8n+9) td:nth-child(3),
.flowIndexTable tr:nth-of-type(8n+9) td:nth-child(4) {
  border-bottom: 1px solid #585665;
}
.flowIndexTable tr:nth-of-type(8n+9) td:nth-child(4) {
  border-right: 1px solid #585665 !important;
}
.flowIndexTable tr:nth-of-type(8n+9) td:nth-child(5),
.flowIndexTable tr:nth-of-type(8n+9) td:nth-child(6) {
  border-top: 1px solid #585665 !important;
}
.flowIndexTable tr:nth-of-type(8n+9) td:nth-child(4):after {
  background-color: transparent;
}
.flowIndexTable tr td:nth-child(3),
.flowIndexTable tr td:nth-child(6) {
  font-weight: bold;
}
#portraits .dropdown-menu {
  max-height: 17em;
  overflow: scroll;
}
#portraits .clear-button {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  margin-top: 3px;
  z-index: 100;
  padding: 0px 12px;
  margin: -2px 0px 0px -5px;
  display: inline-block;
  color: #2093e0;
}
#portraits #color-dropdown-menu {
  width: 100%;
}
#student-preview-container .modal-header-title {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 15px;
}
#student-preview-container .detail-text {
  line-height: 1;
  margin-bottom: 30px;
}
#student-info-modal .thumbsMuted {
  opacity: 0.4;
}
#student-info-modal .thumbnail-sm-container {
  width: 345px;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#student-info-modal .thumbnail-sm-placeholder {
  background-size: cover;
  background-position: top center;
  display: inline-block;
  height: 100px;
  margin: 0.15em;
  width: 105px;
}
#student-info-modal .portrait-hover-link:hover {
  cursor: pointer;
  cursor: hand;
}
#student-info-modal .arrow-container {
  right: 0;
  left: 0;
}
#student-info-modal .arrow-right {
  padding-right: 5px;
}
.submitted-name-warning {
  position: absolute;
  color: red;
  top: 0px;
  left: 100px;
  height: 37px;
  padding: 7px 5px 10px 5px;
  background-color: white;
  z-index: 99;
  border: 1px solid #eee;
  box-shadow: -3px 2px 4px #aaa;
}
#portraits-uploaded {
  display: flex;
  width: 512px;
  max-width: var(--max-width-max-w-lg, 512px);
  padding: var(--spacing-6, 24px);
  padding-bottom: 15px;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6, 24px);
  flex-shrink: 0;
  color: #737373;
}
#portraits-uploaded .pum-modal-title {
  font-size: var(--font-size-lg, 18px);
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.09px;
  margin-bottom: 8px;
}
#portraits-uploaded .pum-modal-text-container {
  font-size: var(--font-size-sm, 14px);
  line-height: 20px;
  letter-spacing: -0.09px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
}
#portraits-uploaded .pum-modal-text-container p {
  margin-bottom: 0;
}
#portraits-uploaded .pum-modal-text-container--tag-genius {
  height: 80px;
}
#portraits-uploaded a {
  color: #2093DF;
}
/*************************************************************

  DESCRIPTION OF FILE: Adding to predefined base elements,
  everything underneath "Namestamp and Itag" tabs.

**************************************************************/
/*************************************************************
  NAMESTAMP (HOMEPAGE SECTION)
**************************************************************/
#enter-namestamp-modal .itag-one-icon-container,
#edit-namestamp-modal .itag-one-icon-container,
#enter-itags-modal .itag-one-icon-container,
#edit-itags-modal .itag-one-icon-container {
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#enter-namestamp-modal .itag-one-icon-container .enter-icon,
#edit-namestamp-modal .itag-one-icon-container .enter-icon,
#enter-itags-modal .itag-one-icon-container .enter-icon,
#edit-itags-modal .itag-one-icon-container .enter-icon {
  float: none;
  position: unset;
  text-align: left;
  font-size: 12px;
  color: #585665;
  width: 83px;
}
#enter-namestamp-modal .itag-one-icon-container .one-icon,
#edit-namestamp-modal .itag-one-icon-container .one-icon,
#enter-itags-modal .itag-one-icon-container .one-icon,
#edit-itags-modal .itag-one-icon-container .one-icon {
  float: none;
  position: unset;
}
#enter-namestamp-modal .itag-one-icon-input,
#edit-namestamp-modal .itag-one-icon-input,
#enter-itags-modal .itag-one-icon-input,
#edit-itags-modal .itag-one-icon-input {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#enter-namestamp-modal .itag-one-icon-input .flex-container,
#edit-namestamp-modal .itag-one-icon-input .flex-container,
#enter-itags-modal .itag-one-icon-input .flex-container,
#edit-itags-modal .itag-one-icon-input .flex-container {
  display: flex;
  align-items: center;
  margin: 8px 0 8px 0;
  justify-content: flex-end;
}
#enter-namestamp-modal .itag-one-icon-input .flex-container .headline,
#edit-namestamp-modal .itag-one-icon-input .flex-container .headline,
#enter-itags-modal .itag-one-icon-input .flex-container .headline,
#edit-itags-modal .itag-one-icon-input .flex-container .headline {
  height: 35px !important;
  width: 330px;
  padding: 10px 10px 10px 4px;
}
#enter-namestamp-modal .itag-one-icon-input .flex-container .textarea-feedback,
#edit-namestamp-modal .itag-one-icon-input .flex-container .textarea-feedback,
#enter-itags-modal .itag-one-icon-input .flex-container .textarea-feedback,
#edit-itags-modal .itag-one-icon-input .flex-container .textarea-feedback {
  font-size: 12px;
  color: #585665;
  margin-left: 9px;
  width: 58px;
}
#enter-namestamp-modal .cp-icon-container,
#edit-namestamp-modal .cp-icon-container,
#enter-itags-modal .cp-icon-container,
#edit-itags-modal .cp-icon-container {
  width: 55px;
  height: 55px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  float: left;
  margin-right: 6px;
  border: 0.5px solid #585665;
}
#enter-namestamp-modal .cp-icon-container .visually-hidden,
#edit-namestamp-modal .cp-icon-container .visually-hidden,
#enter-itags-modal .cp-icon-container .visually-hidden,
#edit-itags-modal .cp-icon-container .visually-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
#enter-namestamp-modal .cp-icon-container .cp-add-button-container,
#edit-namestamp-modal .cp-icon-container .cp-add-button-container,
#enter-itags-modal .cp-icon-container .cp-add-button-container,
#edit-itags-modal .cp-icon-container .cp-add-button-container {
  height: 20px;
  width: 20px;
  text-align: center;
  background-color: #2093DF;
  margin: 0 auto;
  margin-top: 3px;
}
#enter-namestamp-modal .cp-icon-container .cp-input-field,
#edit-namestamp-modal .cp-icon-container .cp-input-field,
#enter-itags-modal .cp-icon-container .cp-input-field,
#edit-itags-modal .cp-icon-container .cp-input-field {
  width: 49px;
  height: 25px !important;
  text-align: center;
  margin: 0 auto;
  margin-top: 3px;
  border: 0.5px solid #c4c4cc;
}
#enter-namestamp-modal .cp-icon-container .cp-icon-image,
#edit-namestamp-modal .cp-icon-container .cp-icon-image,
#enter-itags-modal .cp-icon-container .cp-icon-image,
#edit-itags-modal .cp-icon-container .cp-icon-image {
  width: 53px;
}
#enter-namestamp-modal .cp-icon-container .cp-icon-image .cp-icon-image-img,
#edit-namestamp-modal .cp-icon-container .cp-icon-image .cp-icon-image-img,
#enter-itags-modal .cp-icon-container .cp-icon-image .cp-icon-image-img,
#edit-itags-modal .cp-icon-container .cp-icon-image .cp-icon-image-img {
  height: 53px;
  width: 53px;
  display: block;
  margin: 0 auto;
}
#enter-namestamp-modal .cp-icon-container .selectable-disabled-text,
#edit-namestamp-modal .cp-icon-container .selectable-disabled-text,
#enter-itags-modal .cp-icon-container .selectable-disabled-text,
#edit-itags-modal .cp-icon-container .selectable-disabled-text {
  color: #585665;
  background-color: transparent;
  border: none;
  font-size: 12px;
  line-height: 12px;
  height: 20px !important;
}
#enter-namestamp-modal .cp-icon-container .plus-icon,
#edit-namestamp-modal .cp-icon-container .plus-icon,
#enter-itags-modal .cp-icon-container .plus-icon,
#edit-itags-modal .cp-icon-container .plus-icon {
  height: 20px;
  width: 20px;
}
#enter-namestamp-modal .cp-icon-container .plus-icon .fa-plus,
#edit-namestamp-modal .cp-icon-container .plus-icon .fa-plus,
#enter-itags-modal .cp-icon-container .plus-icon .fa-plus,
#edit-itags-modal .cp-icon-container .plus-icon .fa-plus {
  height: 9.9px;
  width: 9.9px;
  font-size: 14px;
}
#enter-namestamp-modal .cp-icon-container .plus-icon .fa-plus::before,
#edit-namestamp-modal .cp-icon-container .plus-icon .fa-plus::before,
#enter-itags-modal .cp-icon-container .plus-icon .fa-plus::before,
#edit-itags-modal .cp-icon-container .plus-icon .fa-plus::before {
  color: white;
}
#enter-namestamp-modal .cp-icon-container .delete-icon,
#edit-namestamp-modal .cp-icon-container .delete-icon,
#enter-itags-modal .cp-icon-container .delete-icon,
#edit-itags-modal .cp-icon-container .delete-icon {
  position: absolute;
  right: 0px;
  top: 0;
  width: 20px;
  text-align: center;
  display: block;
}
#enter-namestamp-modal .cp-icon-container .delete-icon .delete-icon-selector,
#edit-namestamp-modal .cp-icon-container .delete-icon .delete-icon-selector,
#enter-itags-modal .cp-icon-container .delete-icon .delete-icon-selector,
#edit-itags-modal .cp-icon-container .delete-icon .delete-icon-selector {
  color: #A30000;
  font-size: 15px;
  width: 20px;
  right: 0px;
  position: absolute;
}
#enter-namestamp-modal .cp-icon-container .delete-icon .fa-times,
#edit-namestamp-modal .cp-icon-container .delete-icon .fa-times,
#enter-itags-modal .cp-icon-container .delete-icon .fa-times,
#edit-itags-modal .cp-icon-container .delete-icon .fa-times {
  color: #A30000;
  font-size: 20px;
}
#enter-namestamp-modal .currentNamestampList,
#edit-namestamp-modal .currentNamestampList,
#enter-itags-modal .currentNamestampList,
#edit-itags-modal .currentNamestampList {
  background-color: #585665;
  padding: 20px 0 0 0;
  margin-left: -14px;
  margin-top: 12px;
  width: 998px;
  color: #FFFFFF;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box,
#edit-namestamp-modal .currentNamestampList .add-footer-box,
#enter-itags-modal .currentNamestampList .add-footer-box,
#edit-itags-modal .currentNamestampList .add-footer-box {
  height: 100%;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-title,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-title,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-title,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-title {
  font-size: 18px;
  color: #dfdfdf;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 8px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-title-right,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-title-right,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-title-right,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-title-right {
  float: right;
  font-size: 18px;
  color: #dfdfdf;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 8px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .fade-in,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .fade-in,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .fade-in,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .fade-in {
  opacity: 0;
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container {
  font-size: 15px;
  height: 100%;
  padding-left: 60px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .scroll-add-table,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .scroll-add-table,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .scroll-add-table,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .scroll-add-table {
  height: 178px;
  overflow-y: auto;
  overflow-x: hidden;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header tr,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header tr,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header tr,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header tr {
  color: #c4c4cc;
  font-size: 12px;
  border-bottom: 1px solid #98989b;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td {
  padding: 4px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:first-child,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:first-child,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:first-child,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:first-child {
  width: 275px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2) {
  width: 120px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3) {
  width: 120px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4) {
  width: 135px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5) {
  width: 105px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6) {
  width: 110px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td {
  padding-top: 8px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data tr {
  color: #dfdfdf;
  font-size: 12px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td {
  padding: 4px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:first-child,
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:first-child,
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:first-child,
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:first-child {
  width: 275px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2) {
  width: 120px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3) {
  width: 120px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4) {
  width: 135px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5) {
  width: 105px;
}
#enter-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6),
#edit-namestamp-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6),
#enter-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6),
#edit-itags-modal .currentNamestampList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6) {
  width: 110px;
}
#enter-itags-modal .currentItagList {
  background-color: #585665;
  padding: 20px 0 0 0;
  margin-left: -15px;
  margin-top: 12px;
  width: 998px;
  color: #FFFFFF;
}
#enter-itags-modal .currentItagList .add-footer-box {
  height: 100%;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-title {
  font-size: 18px;
  color: #dfdfdf;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 8px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-title-right {
  float: right;
  font-size: 18px;
  color: #dfdfdf;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 8px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .fade-in {
  opacity: 0;
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container {
  font-size: 15px;
  height: 100%;
  padding-left: 60px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .scroll-add-table {
  height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header tr {
  color: #c4c4cc;
  font-size: 12px;
  border-bottom: 1px solid #98989b;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header td {
  padding: 4px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header td:first-child {
  width: 275px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(2) {
  width: 120px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(3) {
  width: 120px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(4) {
  width: 135px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(5) {
  width: 105px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-header td:nth-child(6) {
  width: 110px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data tr:first-child td {
  padding-top: 8px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data tr {
  color: #dfdfdf;
  font-size: 12px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data td {
  padding: 4px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data td:first-child {
  width: 275px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(2) {
  width: 120px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(3) {
  width: 120px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(4) {
  width: 135px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(5) {
  width: 105px;
}
#enter-itags-modal .currentItagList .add-footer-box .footer-box .footer-container .add-table-data td:nth-child(6) {
  width: 110px;
}
.fireworks {
  z-index: 9999999;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
}
.fireworks .congratulations {
  z-index: 99999999;
  position: absolute;
  bottom: 150px;
  font-family: "Arial Black";
  font-size: 60px;
  color: #fff;
  text-align: center;
  width: 100%;
}
.fireworks .submitted-yearbook {
  z-index: 99999999;
  position: absolute;
  bottom: 80px;
  font-family: "Arial";
  font-size: 40px;
  color: #c4c4cc;
  text-align: center;
  width: 100%;
}
.fireworks .submitted-yearbook .submitted-text {
  color: #A872e2;
}
.fireworks .btn {
  background-color: #000;
}
.fireworks .special-message {
  z-index: 99999999;
  position: absolute;
  bottom: 30px;
  font-family: "Arial";
  font-size: 18px;
  color: #c4c4cc;
  text-align: center;
  width: 100%;
}
.fireworks .special-message i {
  color: #2093DF;
}
.fireworks .close-message {
  z-index: 99999999;
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  width: 88px;
  background-color: #2093df;
  padding: 3px;
  cursor: pointer;
}
.hide-fireworks {
  visibility: hidden;
}
.container-fluid {
  height: 100%;
}
.stage-container .menu {
  z-index: 999999999;
  background-color: #000;
  opacity: 0.95;
}
.profileBuyerHeader {
  height: 25px;
  width: 27px;
}
.fullNameBuyerHeader {
  height: 25px;
  width: 220px !important;
}
.gradeBuyerHeader {
  height: 25px;
  width: 125px !important;
}
.homeroomBuyerHeader {
  height: 25px;
  width: 125px !important;
}
.yearbookBuyerHeader {
  height: 25px;
  width: 115px !important;
}
.adBuyerHeader {
  height: 25px;
  width: 115px !important;
}
.photosInBookBuyerHeader {
  height: 25px;
  width: 126px !important;
}
.indexedBuyerHeader {
  height: 25px;
  width: 100px !important;
}
.emailBuyerHeader {
  height: 25px;
  width: 100px !important;
}
.profileBuyerCell {
  height: 25px;
  width: 27px;
}
.fullNameBuyerCell {
  height: 25px;
  width: 220px !important;
  overflow: auto;
  display: inline-block;
  overflow: hidden;
}
.gradeBuyerCell {
  height: 25px;
  width: 125px !important;
  overflow: auto;
  display: inline-block;
}
.homeroomBuyerCell {
  height: 25px;
  width: 125px !important;
  overflow: auto;
  display: inline-block;
}
.yearbookBuyerCell {
  height: 25px;
  width: 115px !important;
  overflow: auto;
  display: inline-block;
}
.adBuyerCell {
  height: 25px;
  width: 115px !important;
  overflow: auto;
  display: inline-block;
}
.photosInBookBuyerCell {
  height: 25px;
  width: 126px !important;
  overflow: auto;
  display: inline-block;
}
.indexedBuyerCell {
  height: 25px;
  width: 100px !important;
  overflow: auto;
  display: inline-block;
}
.orgNameHeader {
  height: 25px;
  width: 200px !important;
}
.orgContactHeader {
  height: 25px;
  width: 210px !important;
}
.orgPhoneHeader {
  height: 25px;
  width: 200px !important;
}
.orgEmailHeader {
  height: 25px;
  width: 200px !important;
}
.orgAdHeader {
  height: 25px;
  width: 25px !important;
}
.orgIndexHeader {
  height: 25px;
  width: 75px !important;
}
.orgNameCell {
  height: 25px;
  width: 200px !important;
  overflow: auto;
  display: inline-block;
}
.orgContactCell {
  height: 25px;
  width: 210px !important;
  overflow: auto;
  display: inline-block;
}
.orgPhoneCell {
  height: 25px;
  width: 200px !important;
  overflow: auto;
  display: inline-block;
}
.orgEmailCell {
  height: 25px;
  width: 200px !important;
  overflow: auto;
  display: inline-block;
}
.orgBoughtCell {
  height: 25px;
  width: 25px !important;
  overflow: auto;
  display: inline-block;
}
.orgIndexCell {
  height: 25px;
  width: 75px !important;
}
.infoMainAccount {
  background-color: #144087 !important;
}
.top-nav-wrapper {
  border-bottom: 1px solid #c4c4c4;
  padding: 0;
  font-size: 18px;
  background-color: #144087;
}
.top-nav-wrapper > div.collapse {
  padding: 10px 0 0 19px;
  /* remove padding from bootstraps css */
}
.top-nav-wrapper > div.collapse > ul > li.active {
  margin-bottom: -8px;
  border-bottom: 9px solid #fff;
  font-weight: bold;
  color: #585665;
  background-color: #144087;
  z-index: 98;
  /* active left border for all tabs but the first one */
  /* removing active left border for first tab */
}
.top-nav-wrapper > div.collapse > ul > li.active:before {
  position: absolute;
  content: '';
  left: 0;
  top: 10%;
  bottom: -1px;
  border-right-width: 1px;
  border-left-width: 0px;
  border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
  width: 1px;
}
.top-nav-wrapper > div.collapse > ul > li.active:first-child:before {
  position: absolute;
  content: '';
  left: 0;
  top: 10%;
  bottom: -1px;
  border-right-width: 0px;
  border-left-width: 0px;
  border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
  width: 0px;
}
.top-nav-wrapper > div.collapse > ul > li.active:after {
  position: absolute;
  content: '';
  right: 0;
  top: 10%;
  bottom: -1px;
  border-right-width: 1px;
  border-left-width: 0px;
  border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0)) 1 100%;
  border-style: solid;
  width: 1px;
}
.top-nav-wrapper > div.collapse > ul > li.active a {
  color: #585665 !important;
  z-index: 1;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #fff;
}
.top-nav-wrapper > div.collapse > ul > li.active a:active {
  background-color: #fff;
}
.top-nav-wrapper > div.collapse > ul > li > a {
  padding: 4px 12px;
  font-size: 18px;
  background-color: #144087;
  z-index: 1;
  color: #fff;
}
.top-nav-wrapper > div.collapse > ul > li > a:hover {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #a9d6f3;
}
.top-nav-wrapper .dropdown-menu a {
  color: #1E93DF;
}
.top-nav-wrapper .dropdown-menu a:hover {
  background: #d6ebf9 !important;
  color: #585665;
}
.top-nav-wrapper .dropdown-menu a:focus,
.top-nav-wrapper .dropdown-menu a:active {
  background-color: #a9d6f3 !important;
  color: #585665;
}
.top-nav-wrapper .dropdown-menu li:hover .sub-menu {
  visibility: visible;
}
.top-nav-wrapper .dropdown:hover .dropdown-menu {
  display: block;
}
@media screen and (max-width: 1052px) {
  .top-nav-wrapper > div.collapse > ul > li > a {
    padding: 4px 8px;
  }
}
/*Sub-Nav Section */
.top-nav {
  position: fixed;
  top: 0;
  margin: 0px auto;
  padding: 0;
  z-index: 15;
  width: 100%;
}
.sub-nav {
  position: fixed;
  top: 38px;
  margin: 8px 29px;
  z-index: 10;
  width: 100%;
}
.sub > li {
  /* sub navigation active state */
  /* sub navigation active state */
}
.sub > li.active > div {
  border-bottom: 3px solid #144087;
}
.sub > li.active > div:hover {
  background-color: #b6dcf5;
}
.sub > li.active a {
  color: #585665;
}
.sub > li > div {
  padding: 0.25em 0.75em;
  margin-top: 0.5em;
}
.sub > li > div:hover {
  color: #585665;
  cursor: pointer;
}
.sub > li > div:hover > a {
  color: #585665;
}
.sub > li > div > a {
  color: #144087;
}
.sign-out {
  margin: 1px 12px 2px 11px;
  font-size: 12px !important;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.42;
  letter-spacing: normal;
}
.wals-logo {
  margin-right: 20px;
}
/*************************************************************
  FOOTER NAVIGATION MOD_Front Screen TODO - Add back and remove top
**************************************************************/
.todoFooter {
  padding-top: 5px;
  height: 40px;
}
.initialTypeStyle {
  background-color: #2093df !important;
}
.indesignBackground {
  background-color: #144087 !important;
}
.indesign-yearbook-link {
  width: 180px !important;
  margin: 2px 0 2px 28px;
}
.bottom {
  width: 100%;
  height: 40px;
  padding: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: 1001;
  color: #585665;
}
.bottom .large-badge {
  font-size: 15px;
  color: #fff;
  background-color: #2093df !important;
}
.bottom .small-badge {
  font-size: 15px;
  color: #fff;
  background-color: #2093df !important;
}
.bottom .small-badge:hover {
  background-color: #a9d6f3;
}
.bottom a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  cursor: pointer;
}
.bottom a:hover {
  color: #2093df !important;
}
.bottom a:hover .large-badge {
  background-color: #a9d6f3 !important;
}
.bottom a:hover .small-badge {
  background-color: #a9d6f3 !important;
}
.bottom a:hover span.badge {
  background-color: #a9d6f3;
}
.bottom a:focus {
  text-decoration: none;
}
.bottom .active {
  background-color: #fff;
  color: #014F7E !important;
}
.bottom .firstColumnWidth {
  min-width: 200px !important;
}
.bottom div {
  background-color: #144087;
  float: left;
  display: inline-block;
  bottom: 0;
  text-align: center;
  font-size: 15px;
}
.bottom div a {
  color: #fff !important;
}
.bottom div .padding-em1 {
  padding-left: 15px;
}
.bottom div:first-child {
  font-size: 11px;
  width: 16%;
  text-align: left;
  padding: 0;
  position: relative;
}
.bottom div:first-child:after {
  content: '';
  position: absolute;
  background-color: white;
  width: 2px;
  height: 100%;
  right: 0;
  bottom: 0;
}
.bottom div:first-child > img {
  position: absolute;
  pointer-events: none;
  height: 100%;
}
.bottom div:first-child a {
  line-height: 14px;
  line-height: 16px;
  padding-left: 38px;
}
.bottom div:nth-child(2) {
  width: 17%;
  line-height: 32px;
  font-size: 18px;
}
.bottom div:nth-child(2) span.badge {
  position: relative;
  top: -2px;
}
.bottom div:nth-child(3) {
  width: 17%;
  line-height: 32px;
  font-size: 18px;
}
.bottom div:nth-child(4) {
  width: 17%;
  line-height: 32px;
  font-size: 18px;
  position: relative;
}
.bottom div:nth-child(4):after {
  content: '';
  position: absolute;
  background-color: white;
  width: 2px;
  height: 100%;
  right: 0;
  bottom: 0;
}
.bottom div:nth-child(5) {
  width: 11%;
  line-height: 32px;
}
.bottom div:nth-child(6) {
  width: 11%;
  line-height: 32px;
}
.bottom div:nth-child(6) span.badge,
.bottom div:nth-child(6) i.fa {
  position: relative;
  top: -1px;
}
.bottom div:last-child {
  width: 11%;
  line-height: 32px;
}
.panel-heading {
  background-color: #2093df !important;
  background-image: none !important;
}
.panel-title {
  color: #FFFFFF;
}
.accordionHeader {
  width: 95%;
  height: 20px;
}
.accordionClose {
  margin-top: -20px;
}
.initialTypeStyle {
  text-align: center !important;
  font-size: 15px !important;
  color: #585665 !important;
  margin-top: 7px !important;
  background-color: #d4eaf9 !important;
  width: 40px !important;
}
.bottom {
  width: 100%;
  padding: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: 1001;
  color: #585665;
}
.bottom .large-badge {
  font-size: 16px;
  color: #fff;
  background-color: #2093df !important;
}
.bottom .small-badge {
  font-size: 16px;
  color: #fff;
  background-color: #2093df !important;
}
.bottom .small-badge:hover {
  background-color: #a9d6f3;
}
.bottom a {
  color: #a9d6f3 !important;
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  cursor: pointer;
}
.bottom a:hover {
  color: #a9d6f3 !important;
}
.bottom a:hover .large-badge {
  background-color: #a9d6f3 !important;
}
.bottom a:hover .small-badge {
  background-color: #a9d6f3 !important;
}
.bottom a:hover span.badge {
  background-color: #a9d6f3;
}
.bottom a:focus {
  text-decoration: none;
}
.bottom .active {
  background-color: #fff;
  color: #144087 !important;
  height: 40px;
}
.bottom .active:hover {
  background-color: #fff;
  color: #144087 !important;
  height: 40px;
}
.bottom .active .jobNumberVersion {
  color: #144087 !important;
}
.bottom div {
  background-color: #144087;
  float: left;
  display: inline-block;
  bottom: 0;
  text-align: center;
  font-size: 15px;
}
.bottom div .padding-em1 {
  padding-left: 15px;
}
.bottom div:first-child {
  font-size: 11px;
  width: 16%;
  text-align: left;
  padding: 0;
  position: relative;
}
.bottom div:first-child:after {
  content: '';
  position: absolute;
  background-color: white;
  width: 2px;
  height: 100%;
  right: 0;
  bottom: 0;
}
.bottom div:first-child > img {
  position: absolute;
  pointer-events: none;
  height: 100%;
}
.bottom div:first-child a {
  line-height: 14px;
  padding-left: 38px;
}
.bottom div:nth-child(2) {
  width: 17%;
  line-height: 32px;
  font-size: 18px;
}
.bottom div:nth-child(2) span.badge {
  position: relative;
  top: -2px;
}
.bottom div:nth-child(3) {
  width: 17%;
  line-height: 32px;
  font-size: 18px;
}
.bottom div:nth-child(4) {
  width: 17%;
  line-height: 32px;
  font-size: 18px;
  position: relative;
}
.bottom div:nth-child(4):after {
  content: '';
  position: absolute;
  background-color: white;
  width: 2px;
  height: 100%;
  right: 0;
  bottom: 0;
}
.bottom div:nth-child(5) {
  width: 11%;
  line-height: 32px;
}
.bottom div:nth-child(6) {
  width: 11%;
  line-height: 32px;
}
.bottom div:nth-child(6) span.badge,
.bottom div:nth-child(6) i.fa {
  position: relative;
  top: -1px;
}
.bottom div:last-child {
  width: 11%;
  line-height: 32px;
}
.buttonFloatRight {
  float: right;
}
@media screen and (max-width: 1000px) {
  a.sign-out {
    margin-left: 5px;
    margin-right: 0px;
  }
}
.pricing {
  color: #A9D6F3 !important;
}
.set-prices:hover a.pricing {
  background-color: #D4EAF9 !important;
  color: #144087 !important;
}
.duedate-square-purple-whitebg {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  display: inline-block;
  padding: 7.6px 4px 0px 5px;
  border-radius: 10px;
  border: solid 5px #ad70ed;
  background-color: #fff;
}
a.snap:hover .duedate-square-purple-whitebg {
  background-color: #fff;
  border: solid 5px #d4eaf9;
}
a.snap:hover .duedate-square-red-redbg {
  background-color: #fff;
  border: solid 5px #d4eaf9;
}
a.snap:hover .duedate-square-yellow {
  background-color: #fff;
  border: solid 5px #d4eaf9;
}
@media screen and (max-width: 1240px) {
  #ind-home .snap-container {
    clear: both;
    margin-top: 10px;
  }
  #ind-home .manage-staff-container {
    margin-top: 10px;
  }
  #ind-home .school-store-container {
    clear: both;
    padding-left: 15px;
  }
  #ind-home .financial .card-text-body {
    width: 80px;
  }
}
@media screen and (max-width: 1074px) {
  #ind-home .sell-yearbooks-banner-container {
    width: 100%;
    margin-left: 0px !important;
  }
  #ind-home .school-store-container {
    margin-right: 15px;
  }
  #ind-home .card-style {
    margin-right: 15px;
  }
  #ind-home .financial .card-text-body {
    width: 67px;
  }
}
.button-grid > div {
  flex: 1 1 0;
  /* make wrappers share space */
  display: flex;
  /* let buttons stretch inside */
}
#od-home .button-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0px;
  width: 100%;
}
#od-home .button {
  flex: 1 1 calc(25% - 10px);
  /* 4 across on large screens */
  min-width: 103px;
  max-width: 144px;
  padding: 20px 0px 20px 0px;
  text-align: center;
  background: #fffffd;
  border-radius: 8px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
#od-home .button:hover {
  margin: 0px 0px 0px 0px;
  border-radius: 8px;
  text-align: center;
  background-color: #fffffd;
}
#od-home .button:hover.namestamp-focus,
#od-home .button:hover.itag-focus {
  border-radius: 8px;
  background-color: rgba(169, 214, 243, 0.5);
}
#od-home .button:hover .sales {
  margin: 0px 15px 0px 15px;
  border-radius: 8px;
  text-align: center;
  background-color: rgba(169, 214, 243, 0.5);
}
#od-home #cover-personalizations-title {
  white-space: nowrap;
  margin-left: -3%;
}
#od-home #financial-text-body {
  max-width: 130px;
  min-width: 111px;
}
@media (max-width: 1320px) {
  #od-home #cover-personalizations-title {
    white-space: normal;
    margin-left: 0;
    width: 110px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #od-home .cp-text-body {
    margin-top: 37px;
  }
  #od-home .second-row-buttons .button {
    padding-top: 0px;
  }
}
@media (max-width: 1264px) {
  #od-home .button {
    flex: 1 1 calc(25% - 10px);
    min-width: 80px;
  }
}
@media (max-width: 1240px) {
  #od-home .button {
    flex: 1 1 calc(50% - 10px);
  }
  #od-home .button a.financial {
    padding-top: 10px;
  }
  #od-home #financial-text-body {
    min-width: 90px;
  }
}
@media (max-width: 1251px) {
  #od-home #financial-text-body {
    max-width: 130px;
    min-width: 111px;
  }
}
@media (max-width: 1080px) {
  #od-home .button {
    flex: 1 1 calc(50% - 10px);
    /* 2 across on small screens */
    min-width: 70px;
  }
}
.button:hover .namestamp-focus,
.button:hover .itag-focus {
  border-radius: 8px;
  background-color: rgba(169, 214, 243, 0.5);
}
.financial .icon-alignment > img {
  content: url('../../../resources/icons/finance-icon.svg');
}
.financial:hover .icon-alignment > img {
  content: url('../../../resources/icons/finance_blue.svg');
}
.reports .icon-alignment > img {
  content: url('../../../resources/icons/reports-icon.svg');
}
.reports:hover .icon-alignment > img {
  content: url('../../../resources/icons/reports_blue.svg');
}
.snap .icon-alignment > img {
  content: url('../../../resources/icons/snap-icon.svg');
}
.snap:hover .icon-alignment > img {
  content: url('../../../resources/icons/snap_blue.svg');
}
.importStudents .icon-alignment > img {
  content: url('../../../resources/icons/import-students.svg');
}
.importStudents:hover .icon-alignment > img {
  content: url('../../../resources/icons/import-students_blue.svg');
}
.manage-staff .icon-alignment > img {
  content: url('../../../resources/icons/staff-icon.svg');
}
.manage-staff:hover .icon-alignment > img {
  content: url('../../../resources/icons/staff_blue.svg');
}
.prices-not-set {
  background-color: #144087;
  width: 100%;
  height: 140px;
}
.store-inactive {
  padding: 13px 17px 16.2px 30px;
  font-size: 17px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  color: #fff;
}
.update-section {
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
}
.set-prices {
  color: #a9d6f3;
  display: inline;
}
.pricing-applies {
  padding: 5px 0 30px 0;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  color: #fff;
}
.card-style:hover .sales {
  margin: 0px 15px 0px 15px;
  border-radius: 8px;
  text-align: center;
  background-color: rgba(169, 214, 243, 0.5);
}
.financial:hover .card-text-title {
  color: #144087;
}
.reports:hover .card-text-title {
  color: #144087;
}
.snap:hover .card-text-title {
  color: #144087;
}
.manage-staff:hover .card-text-title {
  color: #144087;
}
.financial:hover .card-text-body {
  color: #144087;
}
.reports:hover .pagesAndCopies .card-text-body {
  color: #144087;
}
.snap:hover .card-text-body {
  color: #144087;
}
.manage-staff:hover .card-text-body {
  color: #144087;
}
.card-style {
  width: 25%;
  height: 115.5px;
  padding: 10px 3px 0 4px;
}
.card-style:hover .card-text-title {
  color: #144087;
  cursor: pointer;
}
.card-style:hover .card-text-body {
  color: #144087;
  cursor: pointer;
}
.card-text-title {
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.42;
  letter-spacing: normal;
  text-align: center;
  color: #313131;
}
.card-text-title a {
  color: #313131 !important;
}
.card-text-title:hover {
  color: #144087 !important;
}
.card-text-body {
  font-size: 12px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: normal;
  text-align: center;
  color: #313131;
}
.icon-alignment {
  text-align: center;
}
.side-bar {
  width: 10px;
  height: 140px;
  background-color: #59c2f0;
  display: inline;
  float: left;
}
.prices-not-set:hover {
  color: #144087;
}
@media (min-width: 800px) {
  .duedate-square-yellow {
    display: inline-block;
    width: 54px;
    height: 54px;
    margin: 0 0px 7px 0px;
    padding: 7.6px 0px 0px 0px;
    border-radius: 10px;
    border: solid 5px #f7db41;
  }
  .duedate-square-red {
    width: 54px;
    height: 54px;
    margin: 0 40px 0px 40px;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
  }
  .duedate-square-red-redbg {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    display: inline-block;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
    background-color: #f9d7da;
  }
  .duedate-date {
    font-size: 15px;
    line-height: 1.2;
    margin-top: -4px;
    color: #144087;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
  }
  .report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
    height: 47px;
    margin: 0 0 3px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
  }
  .namestamp-number-report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
  }
  .sell-online {
    padding: 13px 17px 16.2px 30px;
    font-size: 17px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .top-padding {
    height: 30px;
  }
  .purchaser-applies {
    padding: 15px 0 30px 0;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .pie-chart-position {
    top: -70px;
    left: -50px;
  }
  .progress-section {
    min-height: 150px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .section-title {
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .title-space-top {
    margin-top: 35px;
  }
  .graphPositioning {
    padding-left: 95px;
  }
  .progressBarWidth {
    width: 200px;
  }
  #home-rightcols {
    height: calc(100vh - 87px);
    background-color: #eef4ff;
    padding: 0px 45px 10px 45px;
    overflow-y: auto;
  }
  .violet-box {
    border-radius: 5px;
    border: solid 3px #994aed;
  }
  .top-adjustment {
    top: 0px;
  }
  .alert-text {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .deadlines {
    padding-top: 93px;
    padding-left: 0px;
    height: 18px;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .notification-icon {
    position: relative;
    left: 2px;
    width: 42px;
    border-radius: 10px 10px 0 0;
    height: 24px;
    text-align: center;
    padding: 0 12px 0 12px;
  }
}
@media (min-width: 1024px) {
  .card-style {
    width: 25%;
    height: 115.5px;
    padding: 10px 3px 0 4px;
  }
  .card-text-title {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .card-text-title a {
    color: #313131 !important;
  }
  .card-text-body {
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .duedate-square-yellow {
    display: inline-block;
    width: 54px;
    height: 54px;
    margin: 0 0px 7px 0px;
    padding: 7.6px 0px 0px 0px;
    border-radius: 10px;
    border: solid 5px #f7db41;
  }
  .duedate-square-red {
    width: 54px;
    height: 54px;
    margin: 0 40px 0px 38px;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
  }
  .duedate-square-red-redbg {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    display: inline-block;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
    background-color: #f9d7da;
  }
  .duedate-date {
    font-size: 15px;
    line-height: 1.2;
    margin-top: -4px;
    color: #144087;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
  }
  .report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
    height: 47px;
    margin: 0 0 3px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0);
  }
  .namestamp-number-report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
  }
  .icon-alignment {
    text-align: center;
  }
  .prices-not-set {
    background-color: #144087;
    width: 100%;
    height: 140px;
  }
  .side-bar {
    width: 10px;
    height: 140px;
    background-color: #59c2f0;
    display: inline;
    float: left;
  }
  .sell-online {
    padding: 13px 17px 16.2px 30px;
    font-size: 17px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .set-prices {
    color: #a9d6f3;
    display: inline;
  }
  .pricing-applies {
    padding: 5px 0 30px 0;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .top-padding {
    height: 30px;
  }
  .store-inactive {
    padding: 13px 17px 16.2px 30px;
    font-size: 17px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .purchaser-applies {
    padding: 15px 0 30px 0;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .pie-chart-position {
    top: -70px;
    left: -50px;
  }
  .progress-section {
    min-height: 150px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .update-section {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .section-title {
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .title-space-top {
    margin-top: 35px;
  }
  .graphPositioning {
    padding-left: 95px;
  }
  .progressBarWidth {
    width: 115px;
  }
  .violet-box {
    border-radius: 5px;
    border: solid 3px #994aed;
  }
  .top-adjustment {
    top: 0px;
  }
  .alert-text {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .deadlines {
    padding-top: 93px;
    padding-left: 0px;
    height: 18px;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .notification-icon {
    position: relative;
    left: 2px;
    width: 42px;
    border-radius: 10px 10px 0 0;
    height: 24px;
    text-align: center;
    padding: 0 12px 0 12px;
  }
  .card-style:hover .sales {
    margin: 0px 15px 0px 15px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(169, 214, 243, 0.5);
  }
  .financial .icon-alignment > img {
    content: url('../../../resources/icons/finance-icon.svg');
  }
  .financial:hover .icon-alignment > img {
    content: url('../../../resources/icons/finance_blue.svg');
  }
  .reports .icon-alignment > img {
    content: url('../../../resources/icons/reports-icon.svg');
  }
  .reports:hover .icon-alignment > img {
    content: url('../../../resources/icons/reports_blue.svg');
  }
  .snap .icon-alignment > img {
    content: url('../../../resources/icons/snap-icon.svg');
  }
  .snap:hover .icon-alignment > img {
    content: url('../../../resources/icons/snap_blue.svg');
  }
  .manage-staff .icon-alignment > img {
    content: url('../../../resources/icons/staff-icon.svg');
  }
  .manage-staff:hover .icon-alignment > img {
    content: url('../../../resources/icons/staff_blue.svg');
  }
  .financial:hover .card-text-title {
    color: #144087;
  }
  .reports:hover .card-text-title {
    color: #144087;
  }
  .snap:hover .card-text-title {
    color: #144087;
  }
  .manage-staff:hover .card-text-title {
    color: #144087;
  }
  .financial:hover .card-text-body {
    color: #144087;
  }
  .reports:hover .pagesAndCopies .card-text-body {
    color: #144087;
  }
  .snap:hover .card-text-body {
    color: #144087;
  }
  .manage-staff:hover .card-text-body {
    color: #144087;
  }
}
@media (min-width: 1099px) {
  .card-style {
    width: 25%;
    height: 115.5px;
    padding: 10px 3px 0 4px;
  }
  .card-text-title {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .card-text-title a {
    color: #313131 !important;
  }
  .card-text-body {
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .duedate-square-purple {
    width: 54px;
    height: 54px;
    margin: 0 25px 0px 25px;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #AD70ED;
  }
  .duedate-square-yellow {
    display: inline-block;
    width: 54px;
    height: 54px;
    margin: 0 0px 7px 0px;
    padding: 7.6px 0px 0px 0px;
    border-radius: 10px;
    border: solid 5px #f7db41;
  }
  .duedate-square-red {
    width: 54px;
    height: 54px;
    margin: 0 40px 0px 38px;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
  }
  .duedate-square-red-redbg {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    display: inline-block;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
    background-color: #f9d7da;
  }
  .duedate-date {
    font-size: 15px;
    line-height: 1.2;
    margin-top: -4px;
    color: #144087;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
  }
  .report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
    height: 47px;
    margin: 0 0 3px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0);
  }
  .namestamp-number-report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
  }
  .icon-alignment {
    text-align: center;
  }
  .prices-not-set {
    background-color: #144087;
    width: 100%;
    height: 140px;
  }
  .side-bar {
    width: 10px;
    height: 140px;
    background-color: #59c2f0;
    display: inline;
    float: left;
  }
  .sell-online {
    padding: 13px 17px 16.2px 30px;
    font-size: 17px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .set-prices {
    color: #a9d6f3;
    display: inline;
  }
  .pricing-applies {
    padding: 5px 0 30px 0;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .top-padding {
    height: 30px;
  }
  .store-inactive {
    padding: 13px 17px 16.2px 30px;
    font-size: 17px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .purchaser-applies {
    padding: 15px 0 30px 0;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .pie-chart-position {
    top: -70px;
    left: -50px;
  }
  .progress-section {
    min-height: 150px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .update-section {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .section-title {
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .title-space-top {
    margin-top: 35px;
  }
  .graphPositioning {
    padding-left: 95px;
  }
  .progressBarWidth {
    width: 160px;
  }
  .violet-box {
    border-radius: 5px;
    border: solid 3px #994aed;
  }
  .top-adjustment {
    top: 0px;
  }
  .alert-text {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .deadlines {
    padding-top: 93px;
    padding-left: 0px;
    height: 18px;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .notification-icon {
    position: relative;
    left: 2px;
    width: 42px;
    border-radius: 10px 10px 0 0;
    height: 24px;
    text-align: center;
    padding: 0 12px 0 12px;
  }
  .card-style:hover .sales {
    margin: 0px 15px 0px 15px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(169, 214, 243, 0.5);
  }
  .financial .icon-alignment > img {
    content: url('../../../resources/icons/finance-icon.svg');
  }
  .financial:hover .icon-alignment > img {
    content: url('../../../resources/icons/finance_blue.svg');
  }
  .reports .icon-alignment > img {
    content: url('../../../resources/icons/reports-icon.svg');
  }
  .reports:hover .icon-alignment > img {
    content: url('../../../resources/icons/reports_blue.svg');
  }
  .snap .icon-alignment > img {
    content: url('../../../resources/icons/snap-icon.svg');
  }
  .snap:hover .icon-alignment > img {
    content: url('../../../resources/icons/snap_blue.svg');
  }
  .manage-staff .icon-alignment > img {
    content: url('../../../resources/icons/staff-icon.svg');
  }
  .manage-staff:hover .icon-alignment > img {
    content: url('../../../resources/icons/staff_blue.svg');
  }
  .financial:hover .card-text-title {
    color: #144087;
  }
  .reports:hover .card-text-title {
    color: #144087;
  }
  .snap:hover .card-text-title {
    color: #144087;
  }
  .manage-staff:hover .card-text-title {
    color: #144087;
  }
  .financial:hover .card-text-body {
    color: #144087;
  }
  .reports:hover .pagesAndCopies .card-text-body {
    color: #144087;
  }
  .snap:hover .card-text-body {
    color: #144087;
  }
  .manage-staff:hover .card-text-body {
    color: #144087;
  }
}
@media (min-width: 1300px) {
  .card-style {
    width: 25%;
    height: 115.5px;
    padding: 10px 3px 0 4px;
  }
  .card-text-title {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .card-text-title a {
    color: #313131 !important;
  }
  .card-text-body {
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .duedate-square-yellow {
    display: inline-block;
    width: 54px;
    height: 54px;
    margin: 0 0px 7px 0px;
    padding: 7.6px 0px 0px 0px;
    border-radius: 10px;
    border: solid 5px #f7db41;
  }
  .duedate-square-red {
    width: 54px;
    height: 54px;
    margin: 0 40px 0px 38px;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
  }
  .duedate-square-red-redbg {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    display: inline-block;
    padding: 7.6px 4px 0px 5px;
    border-radius: 10px;
    border: solid 5px #a30000;
    background-color: #f9d7da;
  }
  .duedate-date {
    font-size: 15px;
    line-height: 1.2;
    margin-top: -4px;
    color: #144087;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
  }
  .sales-focus {
    background-image: url('resources/img/LargeSales@2x.png');
    background-repeat: no-repeat;
    background-size: 160px 70px;
    image-rendering: auto;
  }
  .sales-focus:hover {
    height: 47px;
    margin: 0px 15px 3px 15px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(169, 214, 243, 0.5);
  }
  .card-style:hover .sales {
    margin: 0px 15px 0px 15px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(169, 214, 243, 0.5);
  }
  .namestamp-focus {
    background-image: url('resources/img/LargeSales@2x.png');
    background-repeat: no-repeat;
    background-size: 160px 70px;
    image-rendering: auto;
  }
  .card-style .namestamp-focus:hover {
    height: 47px;
    margin: 0px 15px 3px 15px;
    border-radius: 8px;
    text-align: center;
  }
  .itag-focus {
    background-image: url('resources/img/LargeSales@2x.png');
    background-repeat: no-repeat;
    background-size: 160px 70px;
    image-rendering: auto;
  }
  .card-style .itag-focus:hover {
    height: 47px;
    margin: 0 0 3px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(169, 214, 243, 0.5);
  }
  .report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
    height: 47px;
    margin: 0 0 3px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0);
  }
  .namestamp-number-report-number {
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #144087;
    position: relative;
  }
  .icon-alignment {
    text-align: center;
    margin-bottom: 7px;
  }
  .prices-not-set {
    background-color: #144087;
    width: 100%;
    height: 140px;
  }
  .side-bar {
    width: 10px;
    height: 140px;
    background-color: #59c2f0;
    display: inline;
    float: left;
  }
  .sell-online {
    padding: 13px 17px 16.2px 30px;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .set-prices {
    color: #a9d6f3;
    display: inline;
  }
  .pricing-applies {
    padding: 5px 0 30px 0;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .top-padding {
    height: 30px;
  }
  .store-inactive {
    padding: 13px 17px 16.2px 30px;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .purchaser-applies {
    padding: 15px 0 30px 0;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
  }
  .chip-width {
    width: 12px;
  }
  .pie-chart-position {
    top: -70px;
    left: -50px;
  }
  .progress-section {
    min-height: 150px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
  }
  .update-section {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .section-title {
    margin: 10px 352px 4px 0px;
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .title-space-top {
    margin-top: 35px;
  }
  .graphPositioning {
    padding-left: 150px;
  }
  .graphPositioning {
    padding-left: 100px;
  }
  .progressBarWidth {
    width: 230px;
  }
  .violet-box {
    border-radius: 5px;
    border: solid 3px #994aed;
  }
  .top-adjustment {
    top: 0px;
  }
  .deadlines {
    padding-top: 93px;
    padding-left: 0px;
    height: 18px;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .notification-icon {
    position: relative;
    left: 2px;
    width: 42px;
    border-radius: 10px 10px 0 0;
    height: 24px;
    text-align: center;
    padding: 0 12px 0 12px;
  }
  .card-style:hover .sales {
    margin: 0px 15px 0px 15px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(169, 214, 243, 0.5);
  }
  .financial .icon-alignment > img {
    content: url('../../../resources/icons/finance-icon.svg');
  }
  .financial:hover .icon-alignment > img {
    content: url('../../../resources/icons/finance_blue.svg');
  }
  .reports .icon-alignment > img {
    content: url('../../../resources/icons/reports-icon.svg');
  }
  .reports:hover .icon-alignment > img {
    content: url('../../../resources/icons/reports_blue.svg');
  }
  .snap .icon-alignment > img {
    content: url('../../../resources/icons/snap-icon.svg');
  }
  .snap:hover .icon-alignment > img {
    content: url('../../../resources/icons/snap_blue.svg');
  }
  .manage-staff .icon-alignment > img {
    content: url('../../../resources/icons/staff-icon.svg');
  }
  .manage-staff:hover .icon-alignment > img {
    content: url('../../../resources/icons/staff_blue.svg');
  }
  .financial:hover .card-text-title {
    color: #144087;
  }
  .reports:hover .card-text-title {
    color: #144087;
  }
  .snap:hover .card-text-title {
    color: #144087;
  }
  .manage-staff:hover .card-text-title {
    color: #144087;
  }
  .financial:hover .card-text-body {
    color: #144087;
  }
  .reports:hover .pagesAndCopies .card-text-body {
    color: #144087;
  }
  .snap:hover .card-text-body {
    color: #144087;
  }
  .manage-staff:hover .card-text-body {
    color: #144087;
  }
}
@media (max-width: 1320px) {
  .prices-not-set {
    height: 160px;
  }
  .side-bar {
    width: 10px;
    height: 160px;
  }
}
@media (max-width: 1315px) {
  .prices-not-set {
    margin-bottom: 20px;
  }
}
@media (max-width: 1038px) {
  .store-inactive {
    font-size: 15px;
  }
  .set-prices {
    font-size: 13px;
  }
}
@media (max-width: 1115px) {
  .update-section {
    padding: 0 0 30px 0 !important;
  }
}
@media (min-width: 1400px) {
  .duedate-square-yellow {
    display: inline-block;
    width: 54px;
    height: 54px;
    margin: 0 0px 7px 0px;
    padding: 7.6px 0px 0px 0px;
    border-radius: 10px;
    border: solid 5px #f7db41;
  }
  .card-style {
    width: 25%;
    height: 115.5px;
    padding: 10px 3px 0 4px;
  }
  .graphPositioning {
    padding-left: 150px;
  }
  .progressBarWidth {
    width: 220px;
  }
  .violet-box {
    border-radius: 5px;
    border: solid 3px #994aed;
  }
  .top-adjustment {
    top: 0px;
  }
  .alert-text {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #313131;
  }
  .deadlines {
    padding-top: 93px;
    padding-left: 0px;
    height: 18px;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #313131;
  }
  .notification-icon {
    position: relative;
    left: 2px;
    width: 42px;
    border-radius: 10px 10px 0 0;
    height: 24px;
    text-align: center;
    padding: 0 12px 0 12px;
  }
  .card-style:hover .sales {
    margin: 0px 15px 0px 15px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(169, 214, 243, 0.5);
  }
  .financial .icon-alignment > img {
    content: url('../../../resources/icons/finance-icon.svg');
  }
  .financial:hover .icon-alignment > img {
    content: url('../../../resources/icons/finance_blue.svg');
  }
  .reports .icon-alignment > img {
    content: url('../../../resources/icons/reports-icon.svg');
  }
  .reports:hover .icon-alignment > img {
    content: url('../../../resources/icons/reports_blue.svg');
  }
  .snap .icon-alignment > img {
    content: url('../../../resources/icons/snap-icon.svg');
  }
  .snap:hover .icon-alignment > img {
    content: url('../../../resources/icons/snap_blue.svg');
  }
  .manage-staff .icon-alignment > img {
    content: url('../../../resources/icons/staff-icon.svg');
  }
  .manage-staff:hover .icon-alignment > img {
    content: url('../../../resources/icons/staff_blue.svg');
  }
  .financial:hover .card-text-title {
    color: #144087;
  }
  .reports:hover .card-text-title {
    color: #144087;
  }
  .snap:hover .card-text-title {
    color: #144087;
  }
  .manage-staff:hover .card-text-title {
    color: #144087;
  }
  .financial:hover .card-text-body {
    color: #144087;
  }
  .reports:hover .pagesAndCopies .card-text-body {
    color: #144087;
  }
  .snap:hover .card-text-body {
    color: #144087;
  }
  .manage-staff:hover .card-text-body {
    color: #144087;
  }
}
.clear-all {
  position: relative;
  top: 2px;
  left: 50px;
  color: red;
}
.submitTime {
  color: red;
}
#od-home .student-face {
  background-size: cover;
  background-position: top center;
  width: 50px;
  height: 50px;
}
.reportsImage {
  width: 301px;
  height: 225px;
}
#od-home .staff-name-title {
  font-size: 15px;
  padding: 0 20px;
  float: left;
  width: 130px;
  white-space: nowrap;
  margin-left: -14px;
}
#od-home .animate {
  text-decoration: line-through;
  transition: 1s linear all;
  opacity: 0;
}
.question-name-itag {
  color: #DFDFDF;
  position: absolute;
  top: 0px;
  right: -16px;
}
.question-name-itag:hover {
  color: #2093df;
}
.online-ads-pill {
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: #B2D67D;
  text-align: center;
  border-radius: 25px;
}
.onlineAdsPillSmall {
  width: 35%;
}
.onlineAdsPillBig {
  width: 47%;
}
/* .online-ads-pill:hover{
     background-color: #A0c667;
 } */
.inDesign-no-padding {
  padding: 0px;
}
.inDesign-in-review-warning {
  background-color: #FFFFFF;
  position: relative;
  width: 95%;
  left: 8px;
  bottom: -1%;
  height: 96px;
}
.inDesign-walsworth-warning {
  background-color: #FFFFFF;
  position: relative;
  width: 95%;
  left: 8px;
  bottom: -2%;
  height: 96px;
}
.pagesAndCopies {
  color: gray;
  font-size: small;
  text-align: left;
}
@media (min-width: 1024px) {
  .rightBlock {
    margin-left: 75%;
    width: 600px;
    height: 1200px;
    position: absolute;
    z-index: -1;
    display: block;
  }
  .blueBackground {
    background-color: #eef4ff;
    z-index: 1;
    width: 100%;
    top: -5px;
    height: 100vh;
    position: relative;
  }
  .ladderContainer {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .due-dropdown {
    width: 70px;
    height: 21px;
    font-size: 12px;
    padding: 3.2px 3.3px 3.2px 2.7px;
    border: solid 1px #c4c4cc;
  }
}
@media (max-width: 1199px) {
  .namestamp-tile {
    width: 196px;
    height: 53px;
    margin-bottom: 5px;
  }
  .namestamp-regular-tile {
    background-image: url('resources/img/MediumNamestampTile@2x.png');
    background-repeat: no-repeat;
    background-size: 196px 53px;
    position: relative;
    image-rendering: auto;
  }
  .itag-tile {
    width: 196px;
    height: 53px;
  }
  .itag-regular-tile {
    background-image: url('resources/img/MediumiTagTile@2x.png');
    background-repeat: no-repeat;
    background-size: 196px 53px;
    image-rendering: auto;
  }
  .navbar-default {
    width: 240px;
  }
  #od-home .navbar-default .dropdown {
    width: 275px;
  }
  .navbar-default .dropdown > a {
    width: 409px;
  }
  .rightBlock {
    margin-left: 75%;
    width: 600px;
    height: 1200px;
    position: absolute;
    z-index: -1;
  }
  .blueBackground {
    background-color: #ecf2ff;
    z-index: 1;
    width: 100%;
    top: -5px;
    height: 100vh;
    position: relative;
  }
  .ladderContainer {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .due-dropdown {
    width: 70px;
    height: 21px;
    font-size: 12px;
    padding: 3.2px 3.3px 3.2px 2.7px;
    border: solid 1px #c4c4cc;
  }
}
@media (min-width: 1200px) {
  .namestamp-tile {
    width: 245px;
    height: 53px;
    margin-bottom: 5px;
  }
  .namestamp-regular-tile {
    background-image: url('resources/img/LargeNamestampTile@2x.png');
    background-repeat: no-repeat;
    background-size: 245px 53px;
    position: relative;
    top: 0;
    left: 0;
    image-rendering: auto;
  }
  .itag-tile {
    width: 245px;
    height: 53px;
  }
  .itag-regular-tile {
    background-image: url('resources/img/LargeiTagTile@2x.png');
    background-repeat: no-repeat;
    background-size: 245px 53px;
    /*position: absolute;*/
    /*top: 57px;*/
    /*left: 0;*/
    image-rendering: auto;
  }
  .rightBlock {
    margin-left: 0;
    width: calc((100vw - 1600px) / 2);
    height: 1200px;
    position: absolute;
    right: 0;
    z-index: -1;
  }
  .blueBackground {
    background-color: #ecf2ff;
    z-index: 1;
    width: 100%;
    top: -5px;
    height: 100vh;
    position: relative;
  }
  .ladderContainer {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
  }
  .due-dropdown {
    width: 70px;
    height: 21px;
    font-size: 12px;
    padding: 3.2px 3.3px 3.2px 2.7px;
    border: solid 1px #c4c4cc;
  }
}
.uploadphotodelete:hover {
  cursor: pointer;
}
.closePhotoUploadDialog:hover {
  cursor: pointer;
}
.chkInstruction {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #c4c4cc;
  color: #585665;
  border-radius: 0px;
  background-color: white;
  cursor: pointer;
  position: relative;
}
.chkInstruction:checked {
  background-color: #fff;
  /* Your custom color */
}
.chkInstruction:checked::after {
  content: "";
  position: absolute;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-stretch: normal;
  top: -1px;
  right: -1px;
  background-size: 500px;
  background-position: -327px -3px;
  background-image: url(img/font-awesome-sprite.png);
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border: 1px solid #c4c4cc;
  color: #585665;
  font-size: 15px;
  display: inline-block;
  margin: 0;
  padding: 0;
  background-color: white;
}
#app-doneupload .highlight {
  background-color: #2093df;
}
.alert-staff-select {
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0 0 6px #B2B2B2;
  display: inline-block;
  position: relative;
  left: 24px;
  vertical-align: top;
  z-index: 10;
}
.alert-staff-select:before {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  height: 15px;
  position: absolute;
  top: 16px;
  transform: rotate(29deg) skew(-35deg);
  -moz-transform: rotate(29deg) skew(-35deg);
  -ms-transform: rotate(29deg) skew(-35deg);
  -o-transform: rotate(29deg) skew(-35deg);
  -webkit-transform: rotate(29deg) skew(-35deg);
  width: 15px;
}
.current-staff-select {
  font-weight: normal !important;
  text-align: center;
  font-size: 12px;
  position: absolute;
  top: -3px;
  left: 490px;
  height: auto;
  padding: 4px;
}
.current-staff-select:before {
  box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
  left: -9px;
}
.notification-red-border {
  border-radius: 5px;
  border: solid 3px #a30000;
  background-color: #fff;
}
#ind-home .question-name-itag {
  color: #DFDFDF;
  position: absolute;
  top: 0px;
  right: -16px;
}
#ind-home .question-name-itag:hover {
  color: #2093df;
}
#ind-home .online-ads-pill {
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: #B2D67D;
  text-align: center;
  border-radius: 25px;
}
#ind-home .onlineAdsPillSmall {
  width: 35%;
}
#ind-home .onlineAdsPillBig {
  width: 47%;
}
#ind-home .online-ads-pill:hover {
  background-color: #A0c667;
}
#ind-home .submitTime {
  color: red;
}
#ind-home .indesignHomeSpacing {
  margin-top: -30px;
}
#ind-home .inDesign-no-padding {
  padding: 0px;
}
#ind-home .inDesign-in-review-warning {
  background-color: #FFFFFF;
  position: relative;
  width: 98%;
  left: 8px;
  bottom: -1%;
  height: 91px;
}
#ind-home .inDesign-walsworth-warning {
  background-color: #FFFFFF;
  position: relative;
  width: 98%;
  left: 8px;
  bottom: -2%;
  height: 66px;
}
#ind-home .shipment-list-item {
  background-color: #FFFFFF;
  width: 98%;
  margin: 5px;
  height: 37px;
}
#ind-home .shipment-list-item:hover {
  background-color: #a9d6f3;
}
#ind-home .alert-submission {
  background-color: #fff;
  border-radius: 5px;
  border: 3px solid #A30000;
  display: inline-block;
  position: relative;
  left: 24px;
  vertical-align: top;
  z-index: 10;
  width: 240px !important;
}
#ind-home .current-sub {
  font-weight: normal !important;
  text-align: center;
  font-size: 12px;
  position: absolute;
  top: -7px;
  left: 71%;
}
#ind-home .widthSubmission {
  width: 97%;
}
@media screen and (max-width: 1440px) {
  #ind-home .current-sub {
    left: 69.5%;
  }
  #ind-home .widthSubmission {
    width: 95.4%;
  }
}
@media screen and (max-width: 1200px) {
  #ind-home .current-sub {
    left: 66%;
  }
  #ind-home .widthSubmission {
    width: 92%;
  }
}
@media screen and (max-width: 992px) {
  #ind-home .current-sub {
    left: 63%;
  }
  #ind-home .widthSubmission {
    width: 90%;
  }
}
/******************* File submission wizard model InDesign site ******************************/
#submissionFileUploaderModal .shipment-modal-body-config {
  max-width: 766px;
  height: 420px !important;
}
#submissionFileUploaderModal #preDragDropShipment {
  position: absolute;
  cursor: pointer;
  cursor: hand;
}
#submissionFileUploaderModal #filedragShipment {
  border: 5px dashed #8db8df;
  width: 17.7em;
  text-align: center;
  padding: 50px 10px;
  margin: 85px auto 26px auto ;
  cursor: pointer;
  cursor: hand;
  z-index: 4000;
}
#submissionFileUploaderModal .dragShipment {
  background-color: #0b97c4;
  cursor: pointer;
  cursor: hand;
}
@-webkit-keyframes moveupCloud {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes moveupCloud {
  0% {
    opacity: 0;
    top: 50px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
#submissionFileUploaderModal .icon-up-ship {
  position: absolute;
  -webkit-animation: moveupCloud;
  -webkit-animation: 2s;
  animation-name: moveupCloud;
  animation-duration: 2s;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 28px;
  margin-top: 400px;
}
#submissionFileUploaderModal .cloud-size-ship {
  font-size: 4.3em;
}
#submissionFileUploaderModal .pageNumberList {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#submissionFileUploaderModal .pageNumberList li {
  display: inline-block;
  background-color: white;
  font-size: 24px;
  width: 50px;
  height: 36px;
  margin: 3px;
}
#submissionFileUploaderModal .pageNumberList li:hover {
  background-color: #a9d6f3;
}
#submissionFileUploaderModal .pageNumberListSubmit {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#submissionFileUploaderModal .pageNumberListSubmit li {
  display: inline-block;
  background-color: white;
  font-size: 24px;
  width: 50px;
  height: 36px;
  margin: 3px;
  position: relative;
}
#submissionFileUploaderModal .pageNumberListSubmit li .removeNumber {
  display: none;
}
#submissionFileUploaderModal .pageNumberListSubmit li:hover .removeNumber {
  display: block;
  position: absolute;
  top: 2px;
  left: 35px;
  font-size: 12px;
}
#submissionFileUploaderModal .selectRangePosition {
  white-space: nowrap;
  overflow-x: hidden;
  position: absolute;
  top: -12px;
  left: 122px;
}
#submissionFileUploaderModal .pageSelectedNumber {
  position: relative;
  top: 6px;
  left: 87px;
  padding: 0px;
}
#submissionFileUploaderModal .deselectAllPages {
  position: relative;
  top: 6px;
  left: 40%;
  color: #014f7e;
  z-index: 10;
}
#submissionFileUploaderModal .activePageSelect {
  background-color: #a9d6f3 !important;
}
#submissionFileUploaderModal .deactivePage {
  background-color: #EFEFEF !important;
}
#submissionFileUploaderModal .shipUploadSubtitle3 {
  position: absolute;
  top: 16px;
  left: 183px;
}
#submissionFileUploaderModal .submitShipmentFiles {
  border: 3px solid #A9D6F3;
}
#submissionFileUploaderModal .submitShipmentFilesTile {
  position: relative;
  background-color: #A9D6F3;
  font-size: 12px;
  width: 336px;
  height: 23px;
  text-align: right;
  padding-right: 11px;
}
#submissionFileUploaderModal .submitShipmentFilesTile::after {
  content: '';
  position: absolute;
  left: 85%;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 14px solid #A9D6F3;
  clear: both;
}
#submissionFileUploaderModal .missingInstructions {
  border: 1px solid red;
}
/******************* File submission unfinished model InDesign site ******************************/
#unfinishedSubModal .shipment-modal-body-config {
  max-width: 766px;
  height: 420px !important;
}
#unfinishedSubModal .pageNumberList {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#unfinishedSubModal .pageNumberList li {
  display: inline-block;
  background-color: white;
  font-size: 24px;
  width: 50px;
  height: 36px;
  margin: 3px;
}
#unfinishedSubModal .pageNumberList li:hover {
  background-color: #a9d6f3;
}
#unfinishedSubModal .pageNumberListSubmit {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#unfinishedSubModal .pageNumberListSubmit li {
  display: inline-block;
  background-color: white;
  font-size: 24px;
  width: 50px;
  height: 36px;
  margin: 3px;
  position: relative;
}
#unfinishedSubModal .pageNumberListSubmit li .removeNumber {
  display: none;
}
#unfinishedSubModal .pageNumberListSubmit li:hover .removeNumber {
  display: block;
  position: absolute;
  top: 2px;
  left: 35px;
  font-size: 12px;
}
#unfinishedSubModal .selectRangePosition {
  white-space: nowrap;
  overflow-x: hidden;
  position: absolute;
  top: -12px;
  left: 122px;
}
#unfinishedSubModal .pageSelectedNumber {
  position: relative;
  top: 6px;
  left: 87px;
  padding: 0px;
}
#unfinishedSubModal .deselectAllPages {
  position: relative;
  top: 6px;
  left: 40%;
  color: #014f7e;
  z-index: 10;
}
#unfinishedSubModal .activePageSelect {
  background-color: #a9d6f3 !important;
}
#unfinishedSubModal .deactivePage {
  background-color: #EFEFEF !important;
}
#unfinishedSubModal .shipUploadSubtitle3 {
  position: absolute;
  top: 16px;
  left: 425px;
}
#unfinishedSubModal .submitShipmentFiles {
  border: 3px solid #A9D6F3;
}
#unfinishedSubModal .submitShipmentFilesTile {
  position: relative;
  background-color: #A9D6F3;
  font-size: 12px;
  width: 336px;
  height: 23px;
  text-align: right;
  padding-right: 11px;
}
#unfinishedSubModal .submitShipmentFilesTile::after {
  content: '';
  position: absolute;
  left: 85%;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 14px solid #A9D6F3;
  clear: both;
}
#unfinishedSubModal .missingInstructions {
  border-color: red;
}
/******************* Mulitstate Shipment model InDesign site ******************************/
#multistateShipmentView .arrow-control {
  position: absolute;
  top: 40%;
  width: -webkit-fill-available;
}
#multistateShipmentView .left-control {
  left: -2%;
  position: relative;
  top: 30%;
  z-index: 100;
}
#multistateShipmentView .right-control {
  left: 88%;
  position: relative;
  top: 30%;
  z-index: 100;
}
#multistateShipmentView .shipmentTitle {
  font-size: 30px;
}
#multistateShipmentView .shipmentSubTitle {
  font-size: 15px;
  color: #98989B;
  display: inline-block;
}
#multistateShipmentView .activePageSelect {
  background-color: #a9d6f3 !important;
}
#multistateShipmentView .activeEye {
  display: block;
  position: absolute;
  top: 2px;
  left: 68px;
  font-size: 12px;
  color: #0b97c4;
}
#multistateShipmentView .activeCheck {
  display: block;
  position: absolute;
  bottom: 4px;
  left: 3px;
  font-size: 12px;
}
#multistateShipmentView .activeCorrections {
  display: block;
  position: absolute;
  bottom: 2px;
  left: 19px;
  font-size: 12px;
}
#multistateShipmentView .deactivePage {
  opacity: 0.4 !important;
}
#multistateShipmentView .pageNumberList {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: scroll;
  height: 403px;
  width: 593px;
  overflow-x: hidden;
}
#multistateShipmentView .pageNumberList li {
  display: inline-block;
  background-color: white;
  font-size: 36px;
  width: 90px;
  height: 69px;
  margin: 3px;
  position: relative;
}
#multistateShipmentView .pageNumberList li .infoNumber {
  display: none;
}
#multistateShipmentView .pageNumberList li:hover {
  background-color: #d4eaf9;
}
#multistateShipmentView .pageNumberList li:hover .infoNumber {
  display: block;
  position: absolute;
  top: 2px;
  left: 68px;
  font-size: 12px;
  color: #0b97c4;
}
#multistateShipmentView .pageInfoModal {
  position: fixed;
  top: 206px;
  left: 120px;
  width: 420px;
  height: 200px;
  z-index: 100;
  background-color: white;
  border: 1px solid #c8c8c8;
}
#multistateShipmentView .nav li {
  width: 20% !important;
  font-size: 15px;
  padding: 3px;
  text-align: center;
  position: relative;
}
#multistateShipmentView .nav li div.active {
  font-weight: bold;
  width: 110px;
  height: 45px;
  background: #BFE0F6;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
#multistateShipmentView .mssh-received {
  background-color: #BFE0F6 !important;
  width: 98%;
  position: relative;
}
#multistateShipmentView .mssh-proof {
  background-color: #FFE87C !important;
  width: 98%;
  position: relative;
}
#multistateShipmentView .mssh-returned {
  background-color: #b2d67d !important;
  width: 98%;
  position: relative;
}
#multistateShipmentView .mssh-printed {
  background-color: #c8a8eb !important;
  width: 98%;
  height: 28px !important;
  position: relative;
  color: #fff !important;
}
#multistateShipmentView .active-mssh-proof {
  background-color: #FFE87C !important;
  font-weight: bold;
  width: 110px;
  height: 45px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
#multistateShipmentView .active-mssh-returned {
  background-color: #b2d67d !important;
  font-weight: bold;
  width: 110px;
  height: 45px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
#multistateShipmentView .active-mssh-printed {
  background-color: #c8a8eb !important;
  font-weight: bold;
  width: 110px;
  height: 45px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding-top: 11px;
  z-index: 1212;
  position: absolute;
  top: -8px;
  right: 15%;
}
#multistateShipmentView .shipmentActvity td:nth-child(1) {
  vertical-align: top;
  color: #98989b;
  font-size: 15px;
}
#multistateShipmentView .shipmentActvity td:nth-child(2) {
  width: 187px;
  padding-left: 10px;
}
#multistateShipmentView .shipmentActvity td:nth-child(2) .activityTableSubTitle {
  color: #98989B;
  font-size: 12px;
}
/************** Page pending modal ******************/
#pending-pages-modal .pageNumberList {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#pending-pages-modal .pageNumberList li {
  display: inline-block;
  background-color: white;
  font-size: 24px;
  width: 52px;
  height: 36px;
  margin: 3px;
  position: relative;
}
#pending-pages-modal .pageNumberList li:hover {
  background-color: #d4eaf9;
}
#pending-pages-modal .pageNumberBackground {
  background-color: #EFEFEF;
  width: 537px;
  height: 238px;
  margin-top: -8px;
}
/************************ file download modal ****************/
#download-files-modal .download-activity thead,
#download-files-modal .download-activity tbody {
  display: block;
}
#download-files-modal .download-footer {
  position: relative;
  top: -32px;
}
/************************ Activity Details modal (Indesign)****************/
#activity-details-indesign-modal .activityIndesignBody {
  padding: 0px 10px 0px 10px;
}
#activity-details-indesign-modal .activityIndesign {
  padding: 0 0 21px 5px;
}
#activity-details-indesign-modal .activityIndesign .activityList {
  float: left;
}
#activity-details-indesign-modal .activityIndesign .activityList:nth-child(1) {
  width: 62px;
}
#activity-details-indesign-modal .activityIndesign .activityList:nth-child(2) {
  width: 149px;
}
#activity-details-indesign-modal .activityIndesign .activityList:nth-child(3) {
  width: 402px;
}
#activity-details-indesign-modal .activityIndesign .activityList:nth-child(4) {
  width: 116px;
}
#activity-details-indesign-modal .activityTableSection {
  height: 400px;
  padding: 0px;
}
#activity-details-indesign-modal .activityTable td:nth-child(1) {
  width: 54px;
  font-size: 12px;
}
#activity-details-indesign-modal .activityTable td:nth-child(2) {
  width: 130px;
  font-size: 12px;
}
#activity-details-indesign-modal .activityTable td:nth-child(3) {
  width: 355px;
  font-size: 12px;
}
#activity-details-indesign-modal .activityTable td:nth-child(4) {
  width: 109px;
  font-size: 12px;
}
#activity-details-indesign-modal .activityTableSubTitle {
  color: #98989B;
}
#activity-details-indesign-modal .noshipment {
  position: absolute;
  top: 35%;
  left: 34%;
}
#activity-details-indesign-modal .loadingSpinnerActivity {
  position: absolute;
  top: 35%;
  left: 47%;
}
#activity-details-indesign-modal .no-indesign-activities {
  padding: 15% 0 0 50%;
  height: 400px;
  color: #428bca;
}
@media print {
  .spread-activity tr {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .spread-activity img,
  svg,
  i {
    display: none;
  }
  .spread-activity tr th:first-child,
  .spread-activity tr td:first-child {
    width: 8%;
  }
  .spread-activity tr th:nth-child(2),
  .spread-activity tr td:nth-child(2) {
    width: 24%;
  }
  .spread-activity tr th:nth-child(3),
  .spread-activity tr td:nth-child(3) {
    width: 8%;
  }
  .spread-activity tr th:nth-child(4),
  .spread-activity tr td:nth-child(4) {
    width: 9%;
  }
  .spread-activity tr th:nth-child(5),
  .spread-activity tr td:nth-child(5) {
    width: 17%;
  }
  .spread-activity tr th:nth-child(6),
  .spread-activity tr td:nth-child(6) {
    width: 17%;
  }
  .spread-activity tr th:nth-child(7),
  .spread-activity tr td:nth-child(7) {
    width: 17%;
  }
}
.rightBlock {
  display: none;
}
@media (min-width: 992px) {
  .yearbook-live-indesign {
    margin-left: 35px;
  }
  .yearbook-live-indesign-staff {
    float: right;
  }
  .blueBackground {
    background-color: #eef4ff;
    z-index: 1;
    width: 100%;
    height: 100vh;
    position: relative;
    top: -10px;
  }
  .staffBlueBackground {
    height: 50px;
    width: 100%;
    background-color: #eef4ff;
    top: -70px;
    left: -15px;
    float: left;
    position: relative;
  }
}
@media (min-width: 1300px) {
  .yearbook-live-indesign {
    margin-left: 8%;
  }
  .yearbook-live-indesign-staff {
    float: right;
  }
  .rightBlock {
    height: 1200px;
    position: absolute;
    z-index: -1;
    display: block;
  }
  .blueBackground {
    background-color: #eef4ff;
    z-index: 1;
    width: 100%;
    height: 100vh;
    position: relative;
    top: -10px;
  }
  .staffBlueBackground {
    height: 50px;
    width: 100%;
    background-color: #eef4ff;
    top: -70px;
    left: -15px;
    float: left;
    position: relative;
  }
}
@media (min-width: 1400px) {
  .yearbook-live-indesign {
    margin-left: 8%;
  }
  .yearbook-live-indesign-staff {
    float: right;
  }
  .rightBlock {
    height: 1200px;
    position: absolute;
    z-index: -1;
  }
  .blueBackground {
    background-color: #eef4ff;
    z-index: 1;
    width: 100%;
    height: 100vh;
    position: relative;
    top: -10px;
  }
  .staffBlueBackground {
    height: 50px;
    width: 100%;
    background-color: #eef4ff;
    top: -70px;
    left: -15px;
    float: left;
    position: relative;
  }
}
.action-item:hover {
  background-color: #d4eaf9;
}
.action-item a {
  color: #005288;
  text-decoration: none;
}
.action-item .action-item-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.action-item .action-item-header h4 {
  color: #005288;
  font-size: 1.6em;
  margin: 0;
}
.action-item .action-item-header > div {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.action-item .action-item-header .due {
  color: #333;
  font-size: 1em;
  height: 25px;
  line-height: 25px;
  margin-right: 1em;
}
.action-item .action-item-header .days {
  background-color: #f8e71c;
  color: #333;
  font-size: 0.8em;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
}
.action-item .action-item-header .days.overdue {
  background-color: #ef0421;
  color: #fff;
}
.action-item .action-item-body {
  color: #333;
  line-height: 1.5em;
  margin-top: 5px;
}
.color-box {
  width: 20px;
  height: 20px;
  border: 1px solid #DFDFDF;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.itagModal {
  padding-top: 15px;
  padding-bottom: 40px;
}
.namestampModal {
  padding-top: 15px;
  padding-bottom: 40px;
}
@media (max-width: 992px) {
  .incomplete-box {
    border-radius: 5px;
    border: solid 2px #a30000;
  }
}
@media (min-width: 993px) {
  .incomplete-box {
    border-radius: 5px;
    border: solid 3px #a30000;
  }
}
/* Override Bootstrap's container-fluid margins */
body .container-fluid.no-container {
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
/*************************************************************
  Delete Portrait Modal
**************************************************************/
#delete-portrait-modal {
  position: relative !important;
}
#delete-portrait-modal .modal-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#delete-portrait-modal .modal-content {
  position: relative !important;
  min-height: 200px !important;
  height: 100%;
}
#delete-portrait-modal .modal-footer {
  position: static !important;
  padding: 10px 15px !important;
  margin: 0 !important;
  background: white !important;
  border-top: 1px solid #e5e5e5 !important;
}
#delete-portrait-modal .modal-footer .btn {
  margin-left: 10px !important;
}
/*************************************************************
  Delete Student Modal
**************************************************************/
#delete-student-modal {
  position: relative !important;
}
#delete-student-modal .modal-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#delete-student-modal .modal-content {
  position: relative !important;
  min-height: 200px !important;
  height: 100%;
}
#delete-student-modal .modal-footer {
  position: static !important;
  padding: 10px 15px !important;
  margin: 0 !important;
  background: white !important;
  border-top: 1px solid #e5e5e5 !important;
}
#delete-student-modal .modal-footer .btn {
  margin-left: 10px !important;
}
.btn.btn-pill:hover {
  background: transparent !important;
}
.blue-button {
  font-size: 15px;
  color: #fff !important;
  height: 33px;
  background: #2093df !important;
  background-color: #2093df !important;
  padding: 5px 12px 5px 12px;
  position: relative;
  bottom: 0;
  left: 0;
  border: 0 !important;
}
.blue-button:hover {
  background: #2093df !important;
}
.btn.btn-pill.blue-button:hover {
  background: #2093df !important;
}
.locked td {
  color: #98989b !important;
}
.locked td:hover {
  color: #98989b !important;
}
.locked span:hover {
  color: #98989b !important;
}
.custom-error-modal .modal-content {
  width: 474px !important;
}
.custom-error-modal .modal-body.no-resize-height {
  height: 100px !important;
  max-height: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-error-modal .modal-footer {
  margin-top: 0px !important;
}
.modal-body.error-modal-body--tall {
  height: 110px !important;
  max-height: none !important;
}
#apply-master-pages .assign-master-table tr.is-unselectable {
  background-color: #efefef;
  color: #98989b;
}
#apply-master-pages .assign-master-table tr.is-unselectable td {
  color: #98989b;
  cursor: not-allowed;
}
#apply-master-pages .assign-master-table tr.is-unselectable td:nth-child(2),
#apply-master-pages .assign-master-table tr.is-unselectable td:nth-child(5) {
  color: #98989b;
}
#apply-master-pages .assign-master-table tr.is-unselectable td:first-child,
#apply-master-pages .assign-master-table tr.is-unselectable td:last-child {
  background-color: #efefef !important;
}
#apply-master-pages .assign-master-table tr.is-unselectable:hover {
  background-color: #efefef !important;
}
#move-spreads .move-table .document-dirty {
  opacity: 1;
}
#move-spreads .move-table .dirty-preview img {
  opacity: 1;
}
#move-spreads .move-table .doc_dirty_icon.move-dirty-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px;
  color: white;
}
#move-spreads .move-table .doc_dirty_icon.move-dirty-icon i {
  background-color: #003b78 !important;
  padding: 2px;
  color: white;
}
#print-body {
  overflow-y: visible;
  margin: 0;
  padding: 0.5in;
  box-sizing: border-box;
  text-align: left;
}
#print-body .print-single-sale {
  break-inside: avoid;
  width: 7.5in;
  max-width: 100%;
  line-height: 1.2em;
  color: #000000;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
}