* {text-decoration:none;outline:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
input, textarea {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
textarea {resize:none}
body {position:relative}
.hidden {display:none!important}

div {font-size:1em;line-height:1.5em}
p, .userInfo, button {font-size:1em;line-height:1.1em}
p, .userInfo {padding-top:12px}
div > p:first-of-type {padding:0}
.userInfo li span:first-of-type {padding-top:2px;font-size:16px;line-height:16px;font-weight:500}
b {font-weight:bold}
em {font-style:italic}
.centered {text-align:center}
table {font-size:16px;line-height:16px;text-align:left;white-space:nowrap}
table th {padding:3px 10px;font-weight:bold;font-size:17px;line-height:17px;text-transform:uppercase}
table td {position:relative;padding:0 10px;line-height:25px}
table th, table td {vertical-align:middle}
.checkboxCol {width:20px;border-right:2px solid #ccc}
table input[type='checkbox'] {width:inherit;height:inherit;transform:scale(1.4)}
.contentBlock .pageLink:link, .contentBlock .pageLink:visited {color:#0262ab}
.contentBlock .pageLink:hover, .contentBlock .pageLink:active {color:#013963}



/* Home and About Us homeTopBody H1 and text controls */
#homeTopBody .homeTopBodyText h1 {padding-bottom:30px;font-size:1.8em;line-height:1.3em}
#homeTopBody .homeTopBodyText p {font-size:1.6em;line-height:1.2em}
#homeTopBody {background-color:inherit}
#homeTopBody .homeVidCont {width:100%;max-width:850px;margin:0 auto;padding:0 25px}
#homeTopBody .homeVidCont video {width:100%;height:auto}
#homeTopBody .homeTopBodyText {width:100%;max-width:878px;margin:30px auto 0 auto;text-align:center}
@media screen and (min-width:400px) {
  #homeTopBody .homeTopBodyText h1 {font-size:2.1em}
}
@media screen and (min-width:650px) {
  #homeTopBody .homeTopBodyText h1 {font-size:3em}
}
@media screen AND (min-width:1590px) {
  #homeTopBody {display:flex;max-width:1500px;flex-direction:row}
  #homeTopBody .homeVidCont {flex-basis:800px;min-width:800px}
  #homeTopBody .homeTopBodyText {flex-basis:auto;margin-top:0}
}



/* ABOUT PAGE */
#aboutBody .contentBlockTitle {max-width:950px;margin:0 auto}



body.noScroll {
  height:100vh;
  overflow:hidden
}

/* WORKING */
#workingCont {
  position:fixed;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,.95);
  color:#000;
  visibility:hidden;
  z-index:500
}
#workingCont.onscreen {visibility:visible}
#workingCont .workTextCont {
  position:absolute;
  width:100%;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  background-color:rgba(21,157,155,.9);
  border-top:40px solid rgba(0,0,0,.1);
  border-bottom:40px solid rgba(255,255,255,.1)
}
#workingCont .workTextCont h1 {line-height:4em;color:#fff;text-align:center}






/* Start video Lightbox */
#startLessonsLightbox {
  position:fixed;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,.95);
  color:#000;
  visibility:hidden;
  z-index:300
}
#startLessonsLightbox.onscreen {visibility:visible}
#startLessonsLightbox #startLessonsLightboxInner {
  position:absolute;
  width:100%;
  max-width:1000px;
  padding:25px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%)
}



.actionTray.top {margin-bottom:10px}
.actionTray.bottom {margin-top:10px}



.tableInner {overflow-x: scroll}
.contentBlockInner table th {
  padding-bottom: 3px;
  border-bottom: 2px solid #000
}
.contentBlockInner table td {
  padding: 5px 10px;
  border-bottom: 1px solid #eee
}



#logoffButton, #respLogoffButton {cursor:pointer}

#deskMenu nav a.memberLink:link, #deskMenu nav a.memberLink:visited {color:#000}
#deskMenu nav a.memberLink {padding-top:15px;padding-bottom:15px}

.buttonCont {margin-top:30px}
.buttonCont a:focus, .buttonCont button:focus {filter:brightness(130%)}
.buttonCont .grayButton:focus {filter:brightness(107%);border-color:rgba(0,0,0,.3)}
.buttonCont .redButton:focus {filter: brightness(160%)}
.buttonCont .mainButton:focus {filter: brightness(170%)}

button {border:none;background-color:rgba(0,0,0,0)}
.actionTray button,
#addChapCont button {display:inline;margin-top:0}
.actionTray a {display:inline-block;margin-top:0}

.blueButton, .brownButton, .clearButton, .grayButton, .redButton, .mainButton, .delButton, .orangeButton, .whiteButton {
  position:relative;
  display:block;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold
}
.blueButton, .blueButton:link, .blueButton:visited {
  background-color:#3658b0;
  color: #fff !important
}
.brownButton {
  background-color: #473329;
  color: #fff !important
}
.clearButton {
  height:40px;
  padding:0 15px;
  line-height:40px;
  color:#000
}
.clearButton:link, .clearButton:visited {
  color:#000;
  border:none;
  background-color:rgba(0,0,0,0)
}
.grayButton:link, .grayButton:visited, .grayButton {
  width:max-content;
  padding:0 15px;
  line-height: 30px;
  color:#000;
  background-color:#e0e0e0;
  border:1px solid #000
}
.redButton:link, .redButton:visited, .redButton,
.trainButton:link, .trainButton:visited, .trainButton {
  background-color:#990000;
  color:#fff
}
.actionTray a,
.actionTray button,
.actionTray .delButton,
.advanceButton {
  height:30px;
  padding:0 15px;
  line-height:30px;
  border:none;
  border-radius:5px
}
.advanceButton {
  margin-top:11px
}
.orangeButton:link, .orangeButton:visited, .orangeButton {
  color:#fff;
  background-color:#dd6600
}
.mainButton {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color:rgba(71,51,41,.9);
  color: #fff
}
.yellowButton:link, .yellowButton:visited, .yellowButton,
.advanceButton:link, .advanceButton:visited, .advanceButton {
  color:#000;
  background-color:#E0D15E;
  font-weight:bold;
  cursor:pointer
}
.whiteButton:link, .whiteButton:visited, .whiteButton {
  color:#000;
  background-color:#fff;
  cursor:pointer
}

.highlighted {border-bottom-color:#fff;background-color:rgba(0,0,0,.1)}

.blueButton:hover, .blueButton:active {filter:brightness(140%)}

.brownButton:hover, .brownButton:active, .brownButton:focus {filter:brightness(170%)}

.grayButton:hover, .grayButton:active {filter:brightness(107%);border-color:rgba(0,0,0,.3)}

.clearButton:hover, .clearButton:active,
.clearButton.cancelChange {color:#000;background-color:rgba(0,0,0,0.1)}
.clearButton:disabled {color:rgba(16,16,16,.3)!important;background-color:rgba(0,0,0,0);cursor:default}
.clearButton:disabled::before {opacity:.3}

.delButton {
  color: #fff;
  background-color: #990000
}
.delButton:hover, .delButton:active {filter:brightness(160%)}
.delButton:disabled {color:#fff;
background-color:rgba(150,0,0,.25);cursor:default;filter:brightness(100%)}

.trainButton {padding:15px;border-radius:5px}
.redButton:hover, .redButton:active, .redButton:focus,
.trainButton:hover, .trainButton:active, .trainButton:focus {filter:brightness(160%)}
.redButton:disabled {color:#fff;
background-color:rgba(150,0,0,.25);cursor:default;filter:brightness(100%)}

.yellowButton:hover, .yellowButton:focus, .yellowButton:active,
.advanceButton:hover, .advanceButton:focus, .advanceButton:active {
  filter:brightness(110%)
}

.mainButton:hover, .mainButton:active, .mainButton:focus {filter:brightness(170%)}
.orangeButton:hover, .orangeButton:active {filter:brightness(130%)}

.whiteButton:hover, .whiteButton:active, .whiteButton:focus {filter:brightness(80%)}

.mainButton.deact {background-color:rgba(71,51,41,.5);cursor:default}
.mainButton.deact:hover, .mainButton.deact:active, .mainButton.deact:focus {
  filter:brightness(100%);
}

input[type='radio']:checked,
input[type='checkbox']:checked {
  filter: brightness(75%) saturate(90%);
}

#zoomButton {
  width:200px;
  padding:5px 0
}



.editButtCol a,
.editButtCol button {display:inline-block;height:30px;margin-left:2px;line-height:30px;padding:0 9px}
.editButtCol:first-chile {margin-left:0}

#newCommentsTable .editButtCol button.seenButtons, #newCommentsTable .editButtCol a.replyButtons {
  position: relative;
  margin-top:0;
  padding:15px;
  color:#fff;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align:middle
}
.editButtCol .seenButtons {background-image: url(../img/commseen.svg)}
.editButtCol .replyButtons {background-image: url(../img/commreply.svg)}
.editButtCol .seenButtons {background-image: url(../img/commseen.svg)}

.editButtCol .seenButtons.disabled,
.editButtCol .replyButtons.disabled {
  opacity:.25;
  cursor:default;
  filter:brightness(100%)
}


/* COLORS */
.gray {color:#888}
.gold {color:#ddb300}
.dGold {color:#bfa100}
.red {color:#990000;color:rgb(153,0,0)}
.green {color:#009900}
.orange {color:#dd6600}
.ltOrange {color:#ff8800;color:rgb(255,136,0)}
.blue {color:#0262ab;color:rgb(2,98,171)}
.brown {color:#473329;color:rgb(71,51,41)};
.dkblue {color:#3658b0;color:rgb(54,88,176)}
.dkblue2 {color:#013963;color:rgb(1,57,99)}
.turq {color:#5E989B;color:rgb(92,154,155)}
.mustard {color:#E0D15E;color:rgb(234,209,94)}
.yellow {color:#E0D15E;color:rgb(224,209,94)}
.dkturq {color:#159d9b;color:rgb(21,157,155)}


/* FONTS */
@font-face {
  font-family: 'montserratbold';
  src: url(../fonts/montserrat-bold.woff2) format('woff2'),
       url(../fonts/montserrat-bold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'montserratsemibold';
  src: url(../fonts/montserrat-semibold.woff2) format('woff2'),
       url(../fonts/montserrat-semibold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
div, p, h4, button {font-family:Arial,sans-serif}
h1 {font-family:'montserratbold',sans-serif;font-size:1.7em;line-height:1.8em;font-weight:800;text-transform:uppercase}
#respMenuBar h4, #expNavMenuButton, .userUnd, h2, h3 {font-family:'montserratsemibold',sans-serif;}
h2 {margin:0 0 2px 0;font-size:20px;line-height:20px;font-weight:600}
h3 {font-size:20px;line-height:20px;margin-bottom:2px;font-weight:600;text-transform:uppercase}

.contentBlock h3 {padding-bottom:8px;font-size:1.1em;line-height:1.2em}



/* Header Section */
#headerContainer {position:relative;background-color:#fff}
#headerContainer a:link, #headerContainer a:visited {color:#3658b0;}
#headerContainer a:hover, #headerContainer a:active {color:#000}
#headerContainer #loginButton:link, #headerContainer #loginButton:visited {color:#000}
.headerInner {
  padding:15px;
  text-align:center
}

#logoCont {
  position:relative;
  padding:55px 15px 2px 15px;
  border-bottom:5px solid #000
}
#logoCont img {margin-bottom:15px}
@media screen AND (min-width:500px) {
  #logoCont img {width:375px;height:169px}
}
@media screen AND (min-width:800px) {
  #logoCont {
    padding:15px 15px 2px 15px
  }
}
#logoText {width:100%;max-width:810px;margin:0 auto}

#loginButtCont {
  position:absolute;
  width:auto;
  top:15px;
  right:15px;
  text-align:right;
  visibility:hidden;
  z-index:200
}
#loginButton {
  height:45px;
  padding-left:45px;
  line-height:45px;
  font-size:1.3em;
  color:#000
}
#loginButton::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 32px;
  top: 6px;
  left: 10px;
  background-image: url(../img/login.svg);
  background-size: 23px 24.5px;
  background-repeat: no-repeat;
  background-position: center;
  transition-duration: .1s;
  transition-timing-function: linear
}



/* Main Container */
#mainContainer {
  position: relative;
  display: block;
  width: 100%;
}
@media screen and (min-width:600px) {
  #mainContainer {
    background-image:url(../img/bg-full.jpg);
    background-size:cover;
    background-position:100% 100%;
  }
}

#messageBox {
  padding: 15px;
}
#messageBox .errorMessage,
#messageBox .eventMessage {
  padding: 0 0 0 25px;
  line-height: 20px;
  background-position: 0 0;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}
#messageBox .errorMessage {
  background-image: url(../img/x-red-circle.svg);
}
#messageBox .eventMessage {
  background-image: url(../img/check-green-circle.svg);
}



/*
 * Menus
 */
/* Profile Menu Dropdown */
#accountDrop {cursor:pointer}
#accountDrop.activ,
#accountDrop:hover {
  background-color:rgb(226,237,240);
}
#acctDd {
  position:absolute;
  width:175px;
  right:0;
  top:0;
  background-color:rgb(226,237,240);
  border: 1px solid #ddd;
  border-top:none;
  border-right:none;
  border-bottom-left-radius:5px;
  text-align:right;
  transition: transform .1s ease;
  z-index:10;
  visibility:hidden
}
#acctDd a {
  display:block;
  width:100%;
  height:2.3em;
  padding-right:15px;
  line-height:2.3em;
  color:#000!important;
  border-top:1px solid #fff
}
#acctDd li:first-of-type a {
  border-top:none
}
#acctDd a:hover {
  background-color:rgba(255,255,255,.5)
}
/* Admin Menu Bar */
#adMenuBar {position:absolute;background-color:#E0D15E;text-align:center;visibility:hidden}
#adMenuBar a {position:relative;display:inline-block;height:100%;padding:0 15px;line-height:2.1em;font-size:1.2em;color:#000}
#adMenuBar li {position:relative;display:inline-block;height:100%;line-height:2.1em}
#adMenuBar a:hover {background-color:rgba(0,0,0,.1)}

.loggedBar {
  position:absolute;
  min-height:1.8em;
  z-index:100;
  background:rgb(188,221,225);
  visibility:hidden
}
.loggedBar a {
  width:140px;
  height:inherit;
  line-height:1.8em
}
.loggedBar #accountDrop {
  position:absolute;
  display:block;
  width:max-content;
  height:1.8em;
  top:0;
  right:0;
  padding:1px 15px 1px 23px;
  line-height:1.8em;
  background-image:url(../img/user.svg);
  background-repeat:no-repeat;
  background-size:15px;
  background-position: 5px 7px
}
/* Responsive Button */
#respMenuButtonOuter {
  position:absolute;
  width:40px;
  height:34px;
  top:15px;
  left:15px;
  padding:5px;
  cursor:pointer;
  z-index:1000
}
#respMenuButton {
  content:'';
  position:relative;
  width:100%;
  height:100%
}
#respMenuButton > div {
  content: '';
  position:absolute;
  background-color:#000;
  width: 30px;
  height:5px;
  top: 0;
  left: 0;
  border-radius:5px;

  transition-duration: .1s, .1s, .1s, .2s;
  transition-delay: .1s, 0s, 0s, 0s;
  transition-property: transform, bottom, top, background-color;
}
/* Initial */
#respMenuButton .topBar {=
  top:0
}
#respMenuButton .midBar {
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
}
#respMenuButton .botBar {
  top:inherit;
  bottom:0;
}
/* Open */
#respMenuButton.open .topBar {
  top:10px;

  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
}
#respMenuButton.open .midBar {
  background-color:rgba(0,0,0,0);
}
#respMenuButton.open .botBar {
  bottom:9px;

  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
}
/* Closed */
#respMenuButton.closed .topBar {
  top:0;

  transform:rotate(-0deg);
  -webkit-transform:rotate(-0deg);
  -moz-transform:rotate(-0deg);
  -o-transform:rotate(-0deg);
  -ms-transform:rotate(-0deg);

  transition-duration: .1s, .1s;
  transition-delay: 0s, .1s;
  transition-property: transform, top;
}
#respMenuButton.closed .midBar {
  background-color:rgba(0,0,0,1);
}
#respMenuButton.closed .botBar {=
  bottom:0;

  transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);

  transition-duration: .1s, .1s;
  transition-delay: 0s, .1s;
  transition-property: transform, bottom;
}

/* Mobile Menu */
#respNavCont {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgb(255,255,255);
  z-index:500;
  overflow-y:scroll;
  visibility:hidden
}
#respNavCont.onscreen {
  display:block;
  visibility:visible
}
#respNavCont nav {
  position:relative;
  display:block;
  margin:75px auto
}
#respNavCont nav li,
#respNavCont nav li a {
  position:relative;
  font-size:1.1em;
  line-height:3em;
  color:#159d9b;
  text-align:center;
  font-weight:bold
}
#respNavCont nav li a {
  display:block;
  width:100%;
  height:100%;
  padding:0 25px
}
#respNavCont nav .adminMenu li a {
  color:#000;
  background-color:#E0D15E
}
/* Desktop Menu */
#deskMenu {
  position:absolute;
  visibility:hidden
}
#deskMenu nav {
  position:relative;
  display:block;
  width:100%;
  margin:0 auto;
  text-align:center
}
#deskMenu nav a {
  position:relative;
  display:inline-block;
  padding:15px;
  font-size:1.3em;
  font-weight:bold
}
#deskMenu nav a:link, #deskMenu nav a:visited {color:#000}
#deskMenu nav a:hover, #deskMenu nav a:active {
  color:#000;
  background-color:#eee;
  background-color:rgba(0,0,0,0.1)
}
@media screen AND (min-width:920px) {
  #respMenuButtonOuter {visibility:hidden}
  #deskMenu {
    position:relative;
    display:block;
    visibility:visible
  }
  #deskMenu nav {
    width:max-content
  }
  #loginButtCont, #acctDd {
    display:block;
    visibility:visible
  }
  .loggedBar, #adMenuBar {
    position:relative;
    display:block;
    visibility:visible
  }
}
/* The COMMENTS links are special--notifications */
#adMenuBarInner ul li {
  overflow-y:visible;
}
li .newCommentsBubble {
  position:absolute;
  display:block;
  width:28px;
  height:28;
  top:-10px;
  border-radius:28px;
  background-color:#bb0000;
  color:#fff;
  font-weight:bold;
  font-size:18px;
  line-height:24px;
  border:2px solid #fff;
  z-index:50
}
#respNavCont nav li .newCommentsBubble {
  top:5px;
  left:40%;
  left:calc(50% - 75px)
}


#titleContainer {position:relative;border-bottom:1px solid #ccc;background-color:#fff;z-index:100}
#titleInner {position:relative;display:flex;flex-direction:row;align-items:center;}
#logoContainer {width:130px;padding-top:1px;padding-left:10px;flex-basis:130px;line-height:1em}
#logoContainer img {width:120px;height:50px}
#titleUserInfo {position:relative;padding:11px 15px 7px 20px;flex:auto;font-size:14px;line-height:14px;text-align:right}
#titleUserInfo h3 {margin-bottom:0}
#titleUserInfo p {display:none;padding-bottom:0}


/* Main Content */
.mainContent {position:relative;display:block;width:100%}
.mainContent > .contentBlock {position:relative;display:block;width:100%;margin:0 auto;padding:25px 0;border-radius:5px;background-color:#fff}
.mainContent .contentBlock:first-of-type {margin-top: 25px}
.mainContent > .contentBlock > div {position:relative;display:block;width:100%;margin:0;padding:0 25px}
.mainContent > .contentBlock:first-of-type {margin:0 auto}
.mainContent > .contentBlock .contentBlockInner {padding-top:25px}

@media screen and (min-width:600px) {
  .mainContent {padding:15px}
  .mainContent > .contentBlock {width:95%;margin:25px auto 0 auto;padding:25px 0;border-radius:5px;background-color:#fff}
}

.actionPopOut {width:100%;max-width:500px;margin-top:40px}
.actionPopOut form {margin-top:20px}
.actionPopOut form > div:first-of-type {margin-top:0;padding-top:8px}
.actionPopOut .mainButton,
#addChapDiv .mainButton {width:max-content;padding:0 15px;font-weight:bold}


/* Login Page */
#loginFormDiv {max-width:410px}


/* Password Reset */
#emailPassExpDiv {padding:0 25px;color:#000}
#emailPassFormDiv {margin-top:25px;padding:0 25px}
#setPasswordOuter {padding:0}
#setPasswordOuter #signupShowPassToggle {margin-left:0}

@media screen and (min-width:745px) {
  .flex#setPasswordOuter {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start
  }
  #setPasswordOuter .flexItem {
    position: relative;
    margin-top: 0;
    flex-basis: 49%
  }
  #emailPassExpDiv {padding-top:2px}
  #emailPassFormDiv,
  #emailPassFormDiv form {margin-top:0}
  #reportSubmitButton {margin-top:0}
}


/* PassAction Page */
#passActionButtonsDivOuter {width:100%;max-width:400px}


/* Initialization */
#initializePage .contentBlock,
#signupPage .contentBlock {
  max-width: 900px;
}



/* Success/Fail Graphics */
.resultGraphic {position:relative;content:' ';width:200px;height:200px;margin:0 auto 25px auto}
#failGraphic { background: url(../img/x-red-circle.svg) }
#successGraphic { background: url(../img/check-green-circle.svg) }



/* Full-page form .contentBlockInner */
#mainFormCont {padding:0}
.width900 .contentBlock {max-width:900px;margin:0 auto}
#orgSection {padding:0}

#newUserFormContainer.regInviteForm {padding:0}
#newUserFormContainer.regInviteForm #newReg > #orgSection {margin-bottom:22px;padding:25px;background-color:#eee}
#newUserFormContainer.regInviteForm #orgSection .fieldContainer:first-of-type {padding-top:0}



/* Action Buttons */
#userActionsDiv {margin-top:0;margin-bottom:35px;padding-top:0}
#usersBlock #userActionsDiv,
#acctsBlock #userActionsDiv {margin-bottom:0;padding-top:25px}
#userActionsDiv button,
.addUserActions button {display:inline}
#userActionsDiv a,
.addUserActions a {display:inline-block;color:#000}
/* Fix red buttons in popouts */
#userActionsDiv a.redButton {color:#fff}


.actionTray .saveEditsButtons {width:max-content}

.addButton, .replaceButton, .orderButton, .editButton, .attachButton {
  position: relative;
  height: 40px;
  padding: 0 15px 0 35px;
  line-height: 40px;
  font-weight: bold
}
.addButton::before {background-image: url(../img/plus.svg)}
.replaceButton::before {background-image: url(../img/swap.svg)}
.orderButton::before {background-image: url(../img/order.svg)}
.editButton::before {background-image: url(../img/edit.svg)}
.attachButton::before {background-image: url(../img/attach.svg)}
.attachButton::before {background-image: url(../img/reply.svg)}
.addButton.cancelChange::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.addButton::before,
.replaceButton::before,
.orderButton::before,
.editButton::before,
.attachButton::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  padding: 5px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .1s linear;
}
.addButton::before {background-image: url(../img/plus.svg)}
.replaceButton::before {background-image: url(../img/swap.svg)}
.orderButton::before {background-image: url(../img/order.svg)}
.editButton::before {background-image: url(../img/edit.svg)}
.attachButton::before {background-image: url(../img/attach.svg)}
.addButton.cancelChange::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg)
}



/* Form Checkboxes */
form .checkbox {padding-left:15px;line-height:18px;vertical-align:top}
form .checkbox input[type='checkbox'] {
  width:28px;
  height:1.5em;
  line-height:1.5em;
  padding-right:10px
}
form .checkbox input[type='checkbox']:focus {outline:2px solid #3658b0}
form .checkbox label {
  padding-left:8px;
  vertical-align:top;
  line-height:1.5em
}
form .singleCheck {
}

/* Select Buttons */
form > .selectionCont {margin-bottom:10px}
form > .selectionCont p,
form > .selectionCont label {line-height:1.5em}
#newUserFormContainer form > .selectionCont {margin-bottom:32px;padding-top:25px;padding-bottom:25px;background-color:#eee}

/* Radio Select Buttons */
#newUserFormContainer form > .selectionCont {margin-bottom: 32px;padding-top:25px;padding-bottom:25px;background-color:#eee}
#orgSection {padding:0}
.selectionCont p {margin-bottom:3px}
.selectionCont .radioField {
  position: relative;
  display: flex;
  padding-top:8px;
  flex-direction: row;
  align-items: left
}
.selectionCont .radioField input {
  width: 28px;
  height:24px;
  flex-basis: 28px
}
.selectionCont .radioField label {
  padding-left: 15px;
  flex-basis: auto
}

.selectionCont .radioField {
  position: relative;
  display: flex;
  width: 100%;
  margin-top:8px;
  padding-top:8px;
  flex-direction: row;
  align-items: flex-start;
  line-height: 26px;
  vertical-align: middle;
  text-align: left
}
.selectionCont > div.radioField:first-of-type {margin-top:0}
.selectionCont .radioField p {margin-bottom:3px}
.selectionCont .radioField .selectRadio,
.selectionCont .radioField input {
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:22px!important;
  flex-basis:28px!important
}
.selectionCont .radioField label {
  padding-left: 8px;
  flex-basis: auto
}
/* For custom role field */
.selectionCont #customRoleFieldContainer {width:175px}
#newUserFormContainer form > #acctTypeCont > #customRoleFieldContainer {padding-left:60px}
.selectionCont .fieldContainer .selectionTextField {height:2.13em;width:100%;margin:1px;padding:0 10px;border-radius:5px;border:1px solid #aaa}



/* Wedge Field on Select Forms */
#wedgeFieldCont input,
#wedgeFieldCont label {display:inline;width:inherit;height:1.1em;line-height:1.1em;vertical-align:middle}
#wedgeFieldCont input {width:1em;margin-right:10px}



/* Users Section */
#profTypeIcon, #orgTypeIcon {
  content:'';
  display:inline-block;
  height:35px;
  width:35px;
  margin:0 5px 6px 0;
  vertical-align:middle;
  background-repeat: no-repeat
}
#profTypeIcon {background-image:url(../img/user.svg)}
#orgTypeIcon {background-image:url(../img/org.svg)}
#profileTitle {display:inline;padding-left:5px}

/* View User */
.viewUserInfoInner {padding-bottom:25px;vertical-align:top}
.viewUserInfoInner:last-of-type {padding-top:0}
.viewUserInfoInner dd {padding-bottom:5px;padding-left:15px;font-size:1.1em;line-height:1.2em}
.viewUserInfoInner dt {font-weight:700}
.viewUserInfoInner > dl {padding-left:10px}
#recordInfo, #acctInfoCont {padding-top:25px;padding-bottom:20px}
#acctInfoCont {margin-top:25px;background-color:rgba(224,209,94,.6)}
#acctInfoCont a {font-weight:700}
#recordInfo {background-color:rgba(0,0,0,0.2)}
#recordInfo div, #acctInfoCont div {padding:0!important}
@media screen AND (min-width:600px) {
  .viewUserInfoInner {display:inline-block;width:380px}
  #recordInfo, #acctInfoCont {width:100%;padding-left:22px}
}



/* SINGLE LESSON PAGE */
.contentBlock h3 {padding-bottom:8px;font-size:1.1em;line-height:1.2em}
.videoNavConts {
  position:relative;
  text-align:center
}
#topLessonNavCont {display:none;margin-bottom:25px}
#botLessonNavCont {margin-top:30px;padding-top:0}
.videoNavConts a {
  width:100%;
  height:auto;
  margin-top:25px;
  line-height:40px
}
#prevNavButton, #nextNavButton {}
#lessonHomeButt {
}

@media screen AND (min-width:535px) {
  .videoNavConts {
    min-height:40px;
    padding-right:0;
    padding-left:0
  }
  .videoNavConts a {
    position:absolute;
    width:120px;
    top:0;
    margin-top:0
  }
  #topLessonNavCont {display:block}
  #prevNavButton,
  #topLessonNavCont #prevNavButton {left:0}
  #nextNavButton,
  #topLessonNavCont #nextNavButton {right:0}
  #lessonHomeButt {
    left:50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%)
  }
  /* Bunch the nav buttons together */
  .mainContent > .contentBlock .contentBlockInner.videoNavConts {max-width:450px;margin-right:auto;margin-left:auto}
}
#attachInner {
  width:100%;
  max-width:600px;
  margin:50px auto 0 auto
}
#attachInner a {
  display:block;
  position:relative;
  padding-right:25px;
  padding-left:45px;
  line-height:2.6em;
  font-size:1.2em;
  font-weight:normal;
  background-color:rgba(200,200,200,.8);
  border:1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.3);
  border-radius:5px;
  color:#000
}
#attachInner a:hover {background-color:rgba(230,230,230,.8);border:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.2)}
.attachCont > div {position:relative}
#attachInner a::before {
  content: '';
  position:absolute;
  width:30px;
  height:30px;
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  left:8px;
  background-image:url(../img/pdf.svg);
  background-repeat:no-repeat;
}
#attachInner .attachVid a::before {
  position:absolute;
  width:30px;
  height:30px;
  left:8px;
  background-image:url(../img/media.svg);\
}
.mainContent > #isoViewBlock {max-width:1320px}

@media screen AND (min-width:1150px) {
  #vidAttachCont .flex {
    display:flex;
    flex-direction:row;
    grid-gap:50px
  }
  #vidAttachCont .lesVidOuter {
    flex-grow:2
  }
  #vidAttachCont .lesAttachOuter {
    min-width:500px;
    flex-basis:600px
  }
}



/* PROFILE AND ACCOUNT PAGES */
#lessonProgressCont {padding-bottom:25px}
#lessonProgressCont .tableInner,
#assocUsersInfo .tableInner {
  padding-left:10px;
}
.mainContent > .contentBlock.resView {padding-bottom:0}
.mainContent > .contentBlock.resView #recordInfo {border-bottom-left-radius:5px;border-bottom-right-radius:5px}



/* APP SETTINGS PAGE */
.contentBlockTitle .subHeadText,
.contentBlockInner .subHeadText {padding-top:15px}

#expSettingsOuter .expSettingsInnerDiv {}

#appSettingsCont {max-width:1000px}
#appSettingsCont .contentBlockInner {margin-top:40px}
#appSettingsCont .contentBlockInner div button {margin-top:15px}
.contentBlockInner dd {padding-bottom:5px;padding-left:15px;font-size:1.1em;line-height:1.2em}
.contentBlockInner dt {font-weight:700}
.contentBlockInner dl,
.settingsInner div > p,
.editing .settingsInner {padding-left:15px}
.contentBlockInner .settingsInner dl dd:last-of-type {padding-bottom:0}

#appSettingsCont .contentBlockInner .settingsInner {margin-top:25px;overflow-x:auto}
#appSettingsCont .contentBlockInner .settingsHeadInner {
  position:relative
}

#appSettingsCont .buttonCont {margin:0}
.settingsInner .buttonCont {margin-top:15px}
.settingsInner #changeEmailPassButtonCont {margin-top:25px}

#appSettingsCont .editButtons,
#appSettingsCont button {
  display:block;
  width:max-content;
  margin-top:10px;
  padding:0 10px;
  line-height:30px
}
#appSettingsCont #testEmailButton {margin-top:0}
#appSettingsCont #testEmailSettingsCont {margin-top:25px}
#appSettingsCont .mainButton {width:100%}

@media screen AND (min-width:320px) {
  #appSettingsCont .settingsHeadInner h2 {width:calc(100% - 75px)}
  #appSettingsCont .contentBlockInner div .editButtons {
    position:absolute!important;
    top:0;
    right:0;
    margin-top:0
  }
}
@media screen AND (min-width:800px) {
  #appSettingsCont .contentBlockInner div .editButtons {
    right:25px
  }
  #appSettingsCont .contentBlockInner > div {
    display:flex;
    width:100%;
    flex-direction:row;
    flex-wrap:nowrap;
  }
  #appSettingsCont .contentBlockInner .settingsHeadInner {
    min-width:400px;
    max-width:400px;
    padding-right:25px;
    flex-basis:400px
  }
  #appSettingsCont .contentBlockInner .settingsInner {
    flex:auto
  }
  #appSettingsCont .contentBlockInner .settingsInner {margin-top:35px}
  #appSettingsCont .editing .settingsInner,
  #appSettingsCont .editing .settingsInner form .fieldContainer:first-of-type {margin-top:0;padding-top:0}
}

/* Change Password Form */
#changePassFormCont {margin-top:25px}
/* Fix width issue */
#changePassFormCont .fieldContainer,
#appSettingsCont .settingsInner .fieldContainer {width:100%;width:calc(100% - 3px)}

/* Change Settings Buttons */
#editFormButtons
#commentFormButtons {padding-top:10px}
#commentFormButtons {margin-top:0}
#mainContainer .contentBlockInner #editFormButtons #submitButton,
#mainContainer .contentBlockInner #commentFormButtons #submitButton,
.actionTray .saveEditsButtons {
  width:max-content;
  line-height:30px
}

#appSettingsCont .contentBlockInner #editFormButtons button,
#commentFormButtons button {display:inline-block;margin-top:25px;border:none}
#commentFormButtons button:first-of-type,
#appSettingsCont .contentBlockInner #editFormButtons button:first-of-type {margin-top:25px;margin-right:100px}
#editFormButtons #saveChangesButton,
#commentFormButtons #submitButton {padding:0 15px}
.actionTray .cancelButtons {margin-right:100px}

/* Edit Expirations form */
#appSettingsCont #editExpSettings input  {width:80px;margin-left:7px}

/* CANCEL BUTTONS */
#cancelButton,
#appSettingsCont #cancelButton,
.actionTray .cancelButtons {
  position:relative;
  display: inline-block;
  height:inherit;
  padding-left:32px;
  line-height: 30px;
  border:none
}
#cancelButton::before,
#appSettingsCont #cancelButton::before,
.actionTray .cancelButtons::before {
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  left:10px;
  background-image:url(../img/ex.svg);
  background-repeat:no-repeat
}
#cancelButton:focus,
#appSettingsCont #cancelButton:focus,
.actionTray .cancelButtons:focus {
  filter:brightness(107%)
}



/* Comments Display */
#commentsSection {max-width:1320px;padding-top:0;background-color:inherit}
#commentsSection .contentBlockInner {max-width:900px;margin:0 auto;padding-bottom:25px;border-radius:5px}
#commentFormOuter form p span {font-size:1.3em;font-weight:700;color:#3658b0}
#commentsSection .lessonComment {margin-bottom:25px;padding:5px 0 0 20px;border-left:7px solid #159d9b}
#commentsSection .lessonComment:last-of-type {margin-bottom:0}
#commentsSection .lessonComment:first-of-type {margin-top:18px}
#commentsSection .commentPosted {color:#5a5a5a;font-style:italic}
#commentsSection .postedByUser {font-size:1.2em;font-weight:700;color:#159d9b}
#commentsSection .lessonCommentBody {margin-bottom:10px;font-size:1.2em;color:#000}
.commentPosted .buttonCont {margin-top:5px}
.commentPosted .buttonCont button {padding:0;font-weight:700;color:#000;cursor:pointer}
.commentPosted .buttonCont .editComment:hover,
.commentPosted .buttonCont .editComment:active,
.commentPosted .buttonCont .editComment:focus {color:#dd6600}
.commentPosted .buttonCont .deleteComment:hover,
.commentPosted .buttonCont .deleteComment:active,
.commentPosted .buttonCont .deleteComment:focus {color:#990000}
.commentPosted .buttonCont .replyComment:hover,
.commentPosted .buttonCont .replyComment:active,
.commentPosted .buttonCont .replyComment:focus {color:#3658b0}

#commentReplyBlock #leaveComment {margin-top:25px}

#commentsSection .replyOuter {padding-top:25px;padding-left:35px}



/* COMMENTS PAGE */
#newCommentsBlock {max-width:1450px}



/* EMAILER PAGE */
#emailerBlock #submitButton {width:100%;height:50px;padding:0 15px;line-height:50px}
.processDetails {position:relative;margin:10px 0 30px 0;padding-top:10px;padding-bottom:3px;background-color:#eee;border-radius:5px}
.processDetails .awaitValue {color:rgba(0,0,0,.5)}
#emailerOuter {margin-top:20px}
#emailerOuter dd {font-size:1em;line-height:inherit}
#noAudienceError {}



/* TESTIMONIALS PAGE */
#testimonialsBlock {max-width:1600px;padding-bottom:0;background-color:inherit}
#testimonialsBlock .contentBlockTitle {max-width:950px;margin:0 auto}
.testimonialsOuter {}
.mainContent > .contentBlock .testimonialsOuter {padding-top:0}
.testVidCont, .testimonialsInner .userTestimonialInner {width:100%}
.testVidCont {padding-top:25px}
.testVidCont video {width:100%;height:auto}
.vidCapCont h3 {padding-bottom:0}
#testCTAOuter {
  padding:25px 0 50px 0;
  vertical-align:top
}
#testCTAOuter .ctaText, #testCTAOuter .ctaForm {max-width:400px;margin:0 auto;
vertical-align:top}
#testCTAOuter .ctaText {}
#testCTAOuter .ctaText h2 {font-size:2em;line-height:inherit;margin-bottom:20px}
#testCTAOuter .ctaForm {padding-top:30px}

@media screen and (min-width:850px) {
  .testimonialsInner {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    grid-gap:40px
  }
  .testVidCont {
    width:calc(50% - 20px);
    flex-basis:calc(50% - 20px);
    padding-top:0
  }
  .mainContent > .contentBlock .testimonialsOuter {padding-top:25px}
  .contentBlock .testimonialsInner {padding-top:40px}
  .contentBlock .testimonialsInner:first-of-type {padding-top:0}

  #testCTAOuter {margin-bottom:0;padding:0 0 25px 0;}
  #testCTAOuter .ctaText, #testCTAOuter .ctaForm {display:inline-block;width:350px}
  #testCTAOuter .ctaForm {width:400px;padding-top:0;padding-left:50px}
  #testCTAOuter .ctaInner {width:max-content;margin:0 auto}
}

/* Testimonial CTA form */
#testCTAOuter .fieldContainer {position:relative;padding-top:0}
#testCTAOuter #testSubmitText {width:100%;margin:1px;padding:2px 10px;font-size:1em;line-height:1.4em;font-family:Arial,sans-serif;border-radius:5px}

.charCountCont {text-align:right}
.charCountCont, .charCountCont .charCount,
.charCountCont .charCount {font-size:13px;line-height:13px;color:#000}

#testCTAOuter #testSubmitText:focus {margin:0;border:2px solid #3658b0}
#testCTAOuter #testSubmitText.invalid,
#testCTAOuter #testSubmitText.valid {margin:0}
#testimonial #submitButton {padding:0 15px;font-size:1.2em;line-height:35px}

/* Display Testimonials */
.testimonialsInner.userTestimonial {padding-top:50px;padding-bottom:50px;text-align:center}
.testimonialsInner.userTestimonial:first-of-type {padding-top:0}
.testimonialsInner.userTestimonial:last-of-type {padding-bottom:0}
#testCTAOuter .ctaInner {padding-bottom:70px}
.userTestimonialInner {max-width:750px;margin:0 auto;padding-top:0}

.userTestimonial .userTestimonialText {padding-top:100px;text-align:center;font-size:1.6em;line-height:1.1em;font-weight:700}
.userTestimonial .userTestimonialText:first-of-type {padding-top:0}

.userTestimonial .userTestimonialName {text-align:right;font-size:1.6em}
.userTestimonial div.buttonCont {margin-top:0;line-height:16px}
.userTestimonial .buttonCont .deleteComment {font-size:16px;font-weight:700;line-height:1.5em;cursor:pointer}
.userTestimonial .buttonCont .deleteComment:hover,
.userTestimonial .buttonCont .deleteComment:active,
.userTestimonial .buttonCont .deleteComment:focus {color:#990000;filter:brightness(130%)}

.userTestimonial .userTestimonialInner {margin-top:0}
/*.userTestimonial .userTestimonialInner:first-of-type {margin-top:0}*/

@media screen and (min-width:850px) {
  #testCTAOuter .testimonialsInner.userTestimonial:first-of-type {padding-top:0}
  #testCTAOuter .ctaInner {padding-bottom:100px}
}



/* COMMENTS AND TESTIMONIALS */
#commentCoverOuter {
  position:fixed;
  width:100%;
  height:100vh;
  background-color:rgba(255,255,255,.95);
  color:#000;
  visibility:hidden;
  z-index:1000
}
#commentCoverOuter.onscreen {visibility:visible}
#commentCoverInner {
  position:absolute;
  width:100%;
  max-width:400px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  padding:25px;
  text-align:center
}
#commentCoverInner h2 {
  padding-top:30px
}
#commentCoverInner p {
  padding-top:20px
}
#commentCoverInner #failGraphic {margin-top:0}
#commentCoverInner .buttonCont button {
  margin-left:50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  -o-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
}



/* LESSON PAGE (USER SIDE) */
#lessonGridBlock .contentBlockTitle {max-width:900px;margin:0 auto}
#lessonGridBlock .tableTopText {max-width:850px;margin:0 auto}
#lessonGridInner {
  margin-top:25px;
  padding-top:25px
}
#lessonGridInner .lessonCont {
  position:relative;
  width:100%;
  margin-top:25px;
  padding:15px;
  color:#fff;
  background-color:#3658b0;
  border-radius:5px;
  text-align:center
}
#lessonGridInner .lessonCont,
#lessonGridInner .lessonCont a {
  min-height:77px
}
#lessonGridInner .lessonCont.unopened {background-color:#009900}
#lessonGridInner .lessonCont:hover,
#lessonGridInner .lessonCont:active,
#lessonGridInner .lessonCont:focus {filter:brightness(140%)}
#lessonGridInner .lessonCont.deact {background-color:rgba(0,0,0,.1);color:#888}
#lessonGridInner .lessonCont.deact:hover, #lessonGridInner .lessonCont.deact:active, #lessonGridInner .lessonCont.deact:focus {background-color:rgba(0,0,0,.1);filter:brightness(100%)}

#lessonGridInner .lessonCont a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0
}
#lessonGridInner .lessonCont.deact a {cursor:default}

@media screen AND (min-width:600px) {
  #lessonGridFlex {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:25px;
    justify-content:flex-start;
  }
  #lessonGridInner .lessonCont {
    margin:0;
    flex-basis:calc(50% - 12.5px)
  }
}
@media screen AND (min-width:800px) {
  #lessonGridInner .lessonCont {
    flex-basis:calc(33% - 15px)
  }
}
@media screen AND (min-width:1250px) {
  #lessonGridInner .lessonCont {
    flex-basis:calc(25% - 20px)
  }
}
@media screen AND (min-width:1660px) {
  #lessonGridInner .lessonCont {
    flex-basis:calc(20% - 20px)
  }
}

#startLessonsButton, #startVidButton {display:block;margin:25px auto 50px auto;padding:0 50px;color:#fff;background-color:#009900;line-height:4em;font-size:2em;font-weight:700;border-radius:5px;cursor:pointer;text-align:center}
#startLessonsButton:hover, #startVidButton:hover {filter:brightness(130%)}



/* DONATIONS PAGE */
#donationsIntroTxt {font-size:1.2em}