@charset "UTF-8";

.pbMultiselectBtn {
    position: relative;
	cursor: pointer;
	text-align: left;
	font-weight: normal;
	color: black;
}

.pbMultiselectLabel {
    display: block;
    width: 290px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pbMultiselectItems {
    -moz-appearance: none;
    -webkit-appearance: none;
	background-color: white;
	border-radius: 5px;
    width: 311px;
	display: none;
	border: solid 2px #0057C1;
	z-index: 70;
}

.pbMultiselectItem {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 10px;
	padding: 5px;
}

.pbMultiselectItemText {
    display: block;
    width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pbMultiselectItem:not(:first-child):hover {
	background-color: #dbdfe8;
}

.pbMultiselectItem input {
	position: absolute;
	top: 3px;
	left: 2px;
}

.pbMultiselectItem span {
	margin-left: 18px;
	white-space: nowrap;
}

.pbMultiselectItem.selectedItem {
	background-color: #dbdfe8;
}

.pbMultiselectItem:nth-child(1) {
	background-color: #0057c1;
	color: white;
}

.pbMultiselectItem:last-child {
    text-align: center;
	border-top: 1px solid #e5e5e5;
}

.modalMoveButton.modalButton {
	cursor: move;
}

.modalButton.showHideModalButton {
	display:none;
}

.showHideModalButton.modalButton .fa-stack-1x {
	color: #0057c1;
}

.dragHead:hover .showHideModalButton.modalButton .fa-stack-1x {
	color: white;
}

.dragHead .showHideModalButton.modalButton:hover .fa-stack-1x {
	color: #0057c1;
}

.editBox [class^="col-"] {
    padding: 10px;
}

.menuActionIcon {
	color: #3f3f3f; 
	font-size: 16px; 
	margin-right: 10px;
}

.modalSectionHeaderButton {
	cursor: pointer;
	float: right;
	margin-left: 10px;
	font-size: 20px;
}

.modalSectionHeaderButton .fa-stack-2x {
	color: #E8E8E8;
}

.modalSectionHeaderButton .fa-stack-1x {
	color: #58595b;
	font-size: 24px;
}

.modalSectionHeaderButton:hover .fa-stack-2x {
	color: #58595b;
}

.modalSectionHeaderButton:hover .fa-stack-1x {
	color: #E8E8E8;
}

.modalSectionButton {
	cursor: pointer;
	font-size: 16px;
}

.modalSectionButton .fa-stack-2x {
	color: #F4F4F6;
}

.modalSectionButton .fa-stack-1x {
	color: #58595b;
	font-size: 16px;
}

.modalSectionButton:hover .fa-stack-2x {
	color: #58595b;
}

.modalSectionButton:hover .fa-stack-1x {
	color: #F4F4F6;
}

.modalButton {
	cursor: pointer;
	font-size: 20px; 
}

.modalButton .fa-stack-2x{
	color: #0057c1;
}

.modalButton .fa-stack-1x {
	color: white;
	font-size: 24px;
}

.modalButton:hover .fa-stack-2x  {
	color: white;
}

.modalButton:hover .fa-stack-1x {
	color: #0057c1;
}

.actionBarButton {
	cursor: pointer;
	font-size: 20px; 
}

.actionBarButton .fa-stack-2x{
	color: #F4F4F6;
}

.actionBarButton .fa-stack-1x {
	color: #0057c1;
	font-size: 24px;
}

.actionBarButton:hover .fa-stack-2x  {
	color: #0057c1;
}

.actionBarButton:hover .fa-stack-1x {
	color: #F4F4F6;
}

.tableButton {
	cursor: pointer;
	font-size: 16px;
}

.tableButton .fa-stack-2x {
	color: white;
}

.tableButton .fa-stack-1x {
	color: #58595b;
	font-size: 16px;
}

.tableButton:hover .fa-stack-2x {
	color: #58595b;
}

.tableButton:hover .fa-stack-1x {
	color: #F4F4F6;
}

#myFilesPickerListBody>.myFilesRow .selectedTableButton {
	cursor: pointer;
	font-size: 16px;
}

#myFilesPickerListBody>.myFilesRow .selectedTableButton .fa-stack-2x {
	color: #dbdfe8;
}

#myFilesPickerListBody>.myFilesRow .selectedTableButton .fa-stack-1x {
	color: #58595b;
	font-size: 16px;
}

#myFilesPickerListBody>.myFilesRow .selectedTableButton:hover .fa-stack-2x {
	color: #58595b;
}

#myFilesPickerListBody>.myFilesRow .selectedTableButton:hover .fa-stack-1x {
	color: #F4F4F6;
}

#myFilesPickerListBody>.myFilesRow .selectedTableButton .fa-stack-2x {
	color: #dbdfe8;
}

.rangeField {
	white-space: nowrap;
	padding: 10px 10px 10px 30px;
	border-radius: 4px;
	border: 1px solid rgb(169, 169, 169);
	min-width: 183px;
	position: relative;
	background-color: white;
}

.rangeField > div {
	display: inline-block;
}

.rangeField input[type=text], .rangeField input[type=number] {
	width: 90px;
	border-width: 0px;
	text-align: center;
	vertical-align: middle;
	font-size: 16px;
	padding: 0px;
}

.rangeField input[type=text]:focus, .rangeField input[type=number]:focus {
	outline: none;
}

.rangeField > i {
	position: absolute;
	left: 10px;
	top: 11px;
	font-size: 16px;
}

.textField {
	width: calc(100% - 20px);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid rgb(169, 169, 169);
    font-size: 16px;
}

.textField:-moz-read-only { 
  background-color: #ebebeb;
}

.textField:read-only { 
  background-color: #ebebeb;
}

.selectField, .labelField {
	-moz-appearance: none;
    -webkit-appearance:none;
	width: 100%;
	border-radius: 4px;
    border: 1px solid rgb(169, 169, 169);
    background-color: rgb(221, 221, 221);
	padding: 10px;
	font-size: 16px;
	background-color: white;
}

.selectField::-ms-expand {
    display: none;
}

.multiSelectField {
	-moz-appearance: none;
    -webkit-appearance: none;
    height: 18px;
    width: auto;
    border-radius: 4px;
    border: 1px solid rgb(169, 169, 169);
    background-color: rgb(221, 221, 221);
    padding: 10px;
    font-size: 16px;
    background-color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.defaultSelected::-ms-value {
	background: none;
	color: gray;
}

.optionSelected::-ms-value {
    background: none;
    color: black;
} 

.descriptionField > .mce-tinymce.mce-container.mce-panel {
	border-width: 1px 0px 0px 0px !important;
}

.descriptionField .mce-container.mce-toolbar.mce-stack-layout-item.mce-last >  .mce-container-body.mce-flow-layout {
	border-top: 1px solid #d9d9d9;
}

.checkField {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 10px;
}

.checkField input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: white;
    border: 1px solid #a9a9a9;
    border-radius: 4px;
}

.checkField:hover input ~ .checkmark {
    background-color: white;
    
}

.checkField input:checked ~ .checkmark {
    background-color: white;
    
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkmarkAfter {
	content: "";
	position: absolute;
	left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #58595b;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: block;
}

.checkField input:checked ~ .checkmark:after {
    display: block;
}

.checkField .checkmark:after {
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #58595b;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.modalSectionTitle {
	border-top: 1px solid #00000033;
	background-color: #E8E8E8;
}

.modalSectionTitle [class^="col-"] {
    padding: 5px 10px 5px 10px;
}

.selectField:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.rangeField.rangeFocus, .selectField:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: Highlight;
}

@media (-webkit-min-device-pixel-ratio:0) {
  .rangeField.rangeFocus, .selectField:focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }
}

.fa-up-down{
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.planbookTable {
	width: 100%;
	border-collapse: collapse;	
	font-size: 10pt;
}

.planbookTable .center {
	text-align: center;
}

.planbookTable .left {
	text-align: left;
}

.planbookTable .right {
	text-align: right;
}

.planbookTable .action {
	border: 0px;
	padding: 0px;
	white-space: nowrap;
	cursor: pointer;
}

.editBox .planbookTable .action .fa-stack .fa-stack-2x {
	color: transparent;
}

.editBox .planbookTable .action .fa-stack:hover .fa-stack-2x {
	color: inherit;
}

.editBox .planbookTable .action .fa-stack:hover .fa-stack-1x {
	color: #f4f4f6;
}

.planbookTable thead td, .planbookTable thead th {
	color: white;
	background-color: #0057c1;
	border: 1px solid #0057c1;
	font-weight: normal;
	padding: 5px;
	text-align: center;
}

.planbookTable thead td:not(:last-child):not(.action), .planbookTable thead th:not(:last-child):not(.action) {
	border-right: 1px solid white;
}

.planbookTable tbody td:not(.action) {
	background-color: white;
}

.planbookTable tbody td, .planbookTable tbody th {
	border: 1px solid #DBDFE8;
	padding: 5px;
}

.planbookTable .cursorPointer {
	cursor: pointer;
}

.selectFieldWrapper {
	position: relative;
	width: 100%;
	display:inline-block;
}

.selectFieldWrapper:after {
	content: "\f107";
    position: absolute;
    right: 2px;
    top: 2px;
    font-weight: bold;
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    background: white;
    line-height: 34px;
    width: 24px;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    pointer-events: none;   
    z-index: 1; 
}

.safari .selectFieldWrapper:after {
     top: 3px;
}

.pageViewContainer {
	padding: 15px 10px;
}

@media (min-width: 992px) {
	.pageViewContainer {
		height: calc(100vh - 92px);
	}
}

.editorView .colTitle {
    background-color: #0057c1;
    color: white;
    font-size: 24px;
    padding: 10px;
}

.editorView .colTitle > span:first-child {
	display:none;
}

.editorView .colTitle > .editBoxRow[style] {
	display: table !important;
}

.editorView .colTitle input,
.editorView .colTitle span.editorViewLabel {
	width: calc(100% - 70px);
    padding: 4px;
    border-radius: 4px;
    border-width: 0px;
    font-size: 24px;
    color: white;
    background-color: #0057c1;
    display:inline-block;
    text-align: left;
}

.editorView .colTitle input::placeholder {
	color: lightgrey;
    font-style: italic;
}
.editorView .colTitle input:-ms-input-placeholder {
	color: lightgrey;
    font-style: italic;
}

.editorView .colTitle input:focus {
	outline-width: 2px;
	outline-color: white;
}

.draggableItemButton {
	cursor: pointer;
	float: right;
}

.draggableItemButton .fa-stack-2x {
	color: transparent;
}

.draggableItemButtonLight .fa-stack-1x {
	color: #FFFFFF;
}

.draggableItemButtonDark .fa-stack-1x {
	color: #58595B;
}

.draggableItemButton:hover .fa-stack-2x {
	color: #F4F4F6;
    opacity: 0.85;
}

.draggableItemButton:hover .fa-stack-1x {
  color: #0057c1;
}

@keyframes planbook-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes planbook-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes planbook-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.planbook-spinner {
  position: relative;
}
.planbook-spinner div {
  left: 94px;
  top: 48px;
  position: absolute;
  -webkit-animation: planbook-spinner linear 1s infinite;
  animation: planbook-spinner linear 1s infinite;
  background: darkgrey;
  width: 12px;
  height: 24px;
  border-radius: 40%;
  -webkit-transform-origin: 6px 52px;
  transform-origin: 6px 52px;
}
.planbook-spinner div:nth-child(1) {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation-delay: -0.916666666666667s;
  animation-delay: -0.916666666666667s;
}
.planbook-spinner div:nth-child(2) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-animation-delay: -0.833333333333333s;
  animation-delay: -0.833333333333333s;
}
.planbook-spinner div:nth-child(3) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  -webkit-animation-delay: -0.75s;
  animation-delay: -0.75s;
}
.planbook-spinner div:nth-child(4) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation-delay: -0.666666666666667s;
  animation-delay: -0.666666666666667s;
}
.planbook-spinner div:nth-child(5) {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  -webkit-animation-delay: -0.583333333333333s;
  animation-delay: -0.583333333333333s;
}
.planbook-spinner div:nth-child(6) {
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.planbook-spinner div:nth-child(7) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation-delay: -0.416666666666667s;
  animation-delay: -0.416666666666667s;
}
.planbook-spinner div:nth-child(8) {
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
  -webkit-animation-delay: -0.333333333333333s;
  animation-delay: -0.333333333333333s;
}
.planbook-spinner div:nth-child(9) {
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
  -webkit-animation-delay: -0.25s;
  animation-delay: -0.25s;
}
.planbook-spinner div:nth-child(10) {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation-delay: -0.166666666666667s;
  animation-delay: -0.166666666666667s;
}
.planbook-spinner div:nth-child(11) {
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
  -webkit-animation-delay: -0.083333333333333s;
  animation-delay: -0.083333333333333s;
}
.planbook-spinner div:nth-child(12) {
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.planbook-spinner {
  width: 42px !important;
  height: 42px !important;
  -webkit-transform: translate(-21px, -21px) scale(0.21) translate(21px, 21px);
  transform: translate(-21px, -21px) scale(0.21) translate(21px, 21px);
}

/* HTML code for the toggle switch
<label class="toggleSwitch" style="left:-20px">
   <div>
       <span class="left">Label1</span>
   </div>
   <div>
       <input type="checkbox" id="copyLinkToggleSwitch">
       <span class="toggle round"></span>
   </div>
   <div>
       <span class="right">Label2</span>
   </div>
</label>
*/

.toggleSwitch {
  position: relative;
  display: inline-block;
  width: auto;
  height: 18px;
}

.toggleSwitch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  bottom: 0;
  width: 30px;
  background-color: #0057C1;
  -webkit-transition: .5s;
  transition: .5s;
}

.toggle:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .5s;
  transition: .5s;
}

input:checked + .toggle {
  background-color: #603f99;
}

input:focus + .toggle {
  box-shadow: 0 0 1px #603f99;
}

input:checked + .toggle:before {
  -webkit-transform: translateX(14.5px);
  -ms-transform: translateX(14.5px);
  transform: translateX(14.5px);
}

.toggle.round {
  border-radius: 60px;
}

.toggle.round:before {
  border-radius: 50%;
}

.toggleSwitch div {
	display: inline-block;
}

.toggleSwitch span.left {
	margin: 0px;
    padding: 0px;
}

.toggleSwitch span.right {
	position: relative;
    margin: 0px;
    padding: 0px;
    left: 30px;
}

/* HTML code for button dropdown
<div style="margin-left:30px;">
  <div class="button button-dropdown">
    <span class="planbook-label-todo">Actions</span>
    <i style="margin-left:5px;" class="fas fa-caret-down"></i>
  </div>
  <div class="button-dropdown-content">
    <a id="applyShare" aria-labelledby="applyShare" title="Copy Lessons" href="#">Copy Lessons</a>
    <a id="applyLink" aria-labelledby="applyLink" title="Link Lessons" href="#">Link Lessons</a>
  </div>
</div>
*/
.button-dropdown-content {
    -moz-appearance: none;
    -webkit-appearance: none;
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
	border: solid 2px #0057C1;
	z-index: 10;
    margin-top:5px;
    border-radius: 5px;
}

.button-dropdown-content a {
  color: #58595b;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.button-dropdown-content a:hover {
    background-color: #dbdfe8;
    color: #58595b;
}

#classSchedulerBox .fc-highlight {
    background: #808080;
	opacity: .5;
}

.nopermission {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: rgba(0,0,0,0.4) !important;
  z-index: 9999;
  cursor: not-allowed !important;
}

.nopermissiontinymce {
    background: 
        linear-gradient(
          rgba(0,0,0,0.4), 
          rgba(0,0,0,0.4)
        ),
        url(../images/tinymcepixelated.png) no-repeat center !important;
    background-size: cover !important;
}

.nopermissionstandards {
    background: 
        linear-gradient(
          rgba(0,0,0,0.4), 
          rgba(0,0,0,0.4)
        ),
        url(../images/standardspixelated.png) no-repeat center !important;
    background-size: cover !important;
}

.nopermission>div{
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    font-size: 32px;
    transform: translate(-50%,-100%);
    opacity: 0.75;
    width: 410px;
    text-align: center;
}

.nowritepermission {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: rgba(0,0,0,0.1) !important;
  z-index: 9999;
  cursor: not-allowed !important;
}