/*
Theme Name: Sheddey-A
Text Domain: Sheddey-A
Version: 2.1
Description: Sheddey, clean
Tags: 
Author: JRW
Author URI:
*/

:root {
  --j-text-logo-color: #1c78a0;
}

/* Force navbar dropdowns above other page elements, Zoho Desk form on Support page */
.navbar .dropdown-menu {
    z-index: 10000 !important;
}

/* Set a border at the bottom of the header */
.j-border-bottom {
  border-bottom: 2px solid #1c78a0;
}
.j-border-bottom2 { /* alternative header / footer bgc */
  border-bottom: 2px solid #145470;
}
.j-border-top {
  border-top: 2px solid #1c78a0;
}
.j-border-top1 {
  border-top: 1px solid #1c78a0;
}
.j-borderLogo {
  border: 1px solid #1c78a0;
}
.j-borderLogo2 {
  border: 2px solid #1c78a0;
}
.j-borderBlue1 {
  border: 1px solid #4898c2;
}

.j-border-top-gray {
  border-top: 1px solid gray;
}

.j-border-dg1 {
  border: 1px solid #ced4da; /* TBD */
  border-radius: 0.5em;
}

.j-border-lg1 {
  border: 1px solid #ced4da;
  border-radius: 0.5em;
}

.j-borderlg2 {
  border: 1px solid #ced4da;
  border-radius: 0.2em;
}
.j-borderlg3 {
  border: 1px solid #f4f5ef;
  border-radius: 1.0em;
}

.j-borderHeaderBGC2 { /* alternative header / footer bgc */
  border: 1px solid #1c78a0 !important;
}

.pTagMB1 p { /* Reduced bottom-margin for <p> tags, e.g. used on Account page for tipText sections */
  margin-bottom: 0.4rem;
}

/* Set a color to use in testing to give an element a bg color */
.j-bgc-b {
  background-color: lightblue;
}
.j-bgc-lb2 {
  background-color: #e0f0ff; /* Lighter blue than 'lightblue' */
}

.j-bgc-g {
  background-color: #c7ebcd;
}
.j-bgc-g2 {
  background-color: #D2DFDF;
}
.j-bgc-g3 {
  background-color: #d8f7d8;
}

.j-bgc-y {
  background-color: #f0fa6a;
}

/* light grey */
.j-bgc-lg {
  background-color: #f4f5ef;
}
.j-bgc-lg2 {
  background-color: #F1F5FE;
}

.j-bgc-lg3 {
  background-color: #ebebeb;
}

.j-bgc-lg4 {
  background-color: #E5EEFF; /* Darker than j-bgc-lg2 */
}

.j-bgc-lg5 {
  background-color: #f8f8f8; /* A very light grey */
}

.j-bgc-lg6 { /* Used in text panel on homepage */
  background-color: rgb(244, 245, 239)
}

/* Light grey background box on sales page for country drop-down section */
.sales1 {
  background-color: #f8f8f8;
  border-radius: 1rem;
}

.j-text-A9A9A9 { /* Used to grey out text when it's element becomes inactive */
  color: #A9A9A9 !important;
}

/* Trial bgc for Book Me */
.j-bgc-bm1 {
  /* background-color: #DBECF7; */
  background-color: #F4F7F2;
}

/* dark grey bgc */
.j-bgc-dg {
  background-color: #bcbdb9;
}

/* dark grey border */
.j-b-dg1px {
  border: 1px solid #bcbdb9;
}
.j-b-dg1pxA9 {
  border: 1px solid #A9A9A9;
}
.j-b-dg1pxA9i {
  border: 1px solid #A9A9A9 !important;
}

/* dark grey font colour */
.j-text-dg {
  color: #bcbdb9;
}

/* A medium-gray font color */
.j-text-mg {
  color: #6c757d;
}

/* white */
.j-bgc-wh {
  background-color: white !important;
}
.jBgcWhite {
  background-color: white;
}

.jBgdTr {
  background-color: transparent;
}

.jFrGreyBgc {
  background-color: #BBB5BD;
}

.jTeal {
  color: #2499a6;
}
.jMagenta {
  color: #AA6DA3;
}

/* Complimentary colour to site main colour */
.j-textRedOr {
  color: #c54d0c;
}

.j-textRed2 {
  color: #FF5A5F;
}

/* Green colour used on action buttons */
.j-text-btngreen {
  color: #1ac051;
}
/* Darker green color used for headings */
.j-text-dkgreen1 {
  color: #008F00;
}
/* Green color used on Settings page for messages */
.j-textMidOrange {
  color: #ffc107;
}

/* Used on Poll Results page in the table view date cells. */
.j-bgcMidBlue {
  background: #6596C0;
}
.j-text-white {
  color: white;
}
.j-textCenter {
  text-align: center;
}
.j-textLeft {
  text-align: left;
}
.j-textRight {
  text-align: right;
}
.j-italics {
  font-weight:lighter;
}
.j-italic {
  font-style: italic;
}
.j-bold {
  font-weight: bold;
}
.j-cross-out {
  text-decoration: line-through;
}
.j-boldMid {
  font-weight: 550; /* Normal is 400, Bold is 700 */
}
.j-blockImp {
  display: block ! important;
}

.j-text-sizeX150 {
  font-size: 1.5em;
}

/** Pricing & Features Page - Start - See also "function jw_paddle()" in functions.php for more styling **/
.j-tab1 {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.j-pricingActiveTab {
  background-color: #438CAA;
  border: 1px solid #438CAA;
  cursor: default !important;
  color: white;
}
.j-pricingInactiveTab {
  background-color: #ebebeb;
  border: 1px solid #ebebeb;
  color: #a9a9a9;
}
.j-pricingInactiveTab:hover, .j-pricingInactiveTab:focus {
  background-color: white;
  border: 1px solid #438CAA;
  color: #438CAA;
  font-weight: bold;
}
.j-pricingInactiveTab:active {
  background-color: #438CAA;
  border: 1px solid #438CAA;
  color: white;
  font-weight: bold;
}

.j-pricingCol1 {
  background-color: #DFF3F6;
}

/* Pricing & Features page, features panel, matched to .pricing-page-container from Paddle */
.pricingFeaturesContainer {
  max-width: 900px;
  margin: auto;
    margin-top: auto;
  text-align: center;
  margin-top: 2em;
  padding-left: 1em;
  padding-right: 1em;
}

.pricingPlanNames {
  text-align: center;
  padding: 0px 4px;
  border-radius: 0.4rem;
  color: white;
}
.pricingFeatureHeaderRow {
  background-color: #2499a6;
}
.grid-striped .row:nth-of-type(odd) {
  background-color: #f8f8f8;
}
.grid-striped .row:nth-of-type(even) {
  background-color: white;
}

.pricing-text-freetrial {
  color: #5ad2f4;
}
.pricing-text-standard {
  color: #62bec1;
}
.pricing-text-business {
  color: #0074A0;
}

/* Make the checkbox underneath the SIGN UP btns visually match the text height */
.tandcinputs {
  transform: scale(0.85);   /* adjust until it matches your font size */
  transform-origin: left center;
  margin: 0;
}

.pl10 {
  padding-left: 10px;
}
.pr10 {
  padding-right: 10px;
}
.pl15 {
  padding-left: 15px;
}

/* 'i' icons on Pricing & Features page */
.infoIconsPricing {
  color: #1c78a0;
}
.infoIconsPricing:hover {
  color: #1ac051;
}
.infoIconsPricing:active, .infoIconsPricing:focus {
  color: #1c78a0;
}

/* Medium grey border */
.j-b-pricing1 {
  border-top: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
  border-left: 1px solid #dbdbdb;
}

.pricingModalGridBorder {
  border: 1px solid #e1e1e3;
  border-radius: 0.3rem;
}

/** Pricing & Features Page - End **/

.j-lh1p5rem {
  line-height: 1.5rem;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.text-that-needs-wrapping {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.j-peN {
  pointer-events: none; /* removes all pointer events */
}
.j-cursorT {
  cursor: text !important;
}
.jNoCursor {
  cursor: text;
}
.jDefCursor {
  cursor: default;
}
.jDefCursorImp {
  cursor: default !important;
}
.j-w15 {
  width: 15%;
}
.j-w20 {
  width: 20%;
}
.j-w25 {
  width: 25%;
}
.j-w40 {
  width: 40%;
}
.j-w45 {
  width: 45%;
}
.j-w50 {
  width: 50%;
}
.j-w60 {
  width: 60%;
}

.fontWeightNormal {
  font-weight: 400;
}

.j-lh1p5 {
  line-height: 1.7em;
}

.bt-white1px {
  border-top: 1px solid white;
}
.bb-white1px {
  border-bottom: 1px solid white;
}
.bt-f4f5ef-1px {
  border-top: 1px solid #f4f5ef;
}
.bt-f4f5ef-2px {
  border-top: 2px solid #f4f5ef;
}
.bt-ebebeb-1px {
  border-top: 1px solid #ebebeb;
}
.bb-ebebeb-1px {
  border-bottom: 1px solid #ebebeb;
}

/* MY BOOKINGS PAGE, styling for BS rows in main search modal's results div */
.j-mb-sml {
  padding-top: 2px;
  padding-bottom: 2px;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
}
.j-mb-smr {
  padding-top: 2px;
  padding-bottom: 2px;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}

/* Set button colour */
.j-btn-logo {
  color: #fff;
  background-color: #1c78a0;
  border-color: #1c78a0;
}
.j-btn-logo:hover {
  color: #1c78a0;
  background-color: #fff;
  border-color: #1c78a0;
}
.j-btn-logo:active {
  color: #fff;
  background-color: #1c78a0;
  border-color: #1c78a0;
}

/* Set hover states for main nav buttons */
.j-btn-main-nav {
  color: #1c78a0;
  background-color: #fff;
  border-width: 1px;
}
.j-btn-main-nav:hover,
.j-btn-main-nav:focus,
.j-btn-main-nav:active,
.j-btn-main-nav.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #1c78a0;
}

/* Try colour the navbar burger icon */
.j-burger-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-image: none;
  background-size: auto;
  background-size: 100% 100%;
}

/* To bold the active selection on the main page MENU button dropdown */
.activeMenuSelection {
  font-weight: bold;
}

/* ***** Nav menu on the header, styled to get underline to happen and to highlight the <a> tag on hover ***** */
.j-a-block1 {
  display: block;
  padding: 0.5rem 0.5rem;
  color: #ffffff;
}

.j-a-block1:hover {
  color: #A7E3B9;
}

.j-a-block1:active {
  /* font-weight: bold; */
  color: #ffffff;
}

/***** Login button *****/
.j-btn-login {
  color: #ffffff;
  background-color: #145470;
  border-color: #ffffff;
}
.j-btn-login:hover {
  color: #145470;
  background-color: #ffffff;
  border-color: #145470;
}
.j-btn-login:active {
  color: #ffffff;
  background-color: #145470;
  border-color: #ffffff;
}
.j-btn-login:focus {
  color: #145470;
  background-color: #ffffff;
  border-color: #145470;
}

/***** Logout button *****/
.j-btn-logout {
  color: #ffffff;
  background-color: #145470;
  border-color: #ffffff;
}
.j-btn-logout:hover {
  color: #145470;
  background-color: #ffffff;
  border-color: #145470;
}
.j-btn-logout:active {
  color: #ffffff;
  background-color: #145470;
  border-color: #ffffff;
}
.j-btn-logout:focus {
  color: #145470;
  background-color: #ffffff;
  border-color: #145470;
}

/* ***** Footer links, styled to get underline to happen and to highlight the <a> tag on hover, similar to .j-a.block1 used on header links ***** */
.j-a-block3 {
  display: block;
  padding: 0.2rem 0.5rem;
  color: #ffffff;
}

.j-a-block3:hover {
  color: #A7E3B9;
}

.j-a-block3:active {
  /* font-weight: bold; */
  color: #ffffff;
}

.j-a-block3:focus {
  color: #A7E3B9;
}

/* The golden yellow logo text colour */
.j-text-logoYellow {
  color: #FFCA3D;
}
.j-bgc-logoYellow {
  background-color: #FFCA3D;
}

/* CLOSE buttons on bottom right (BR) corner of modals */
.j-modalCloseBtnBR {
  color: #1c78a0;
  background-color: #ffffff;
  border-color: #1c78a0;
  border-radius: 8px;
}
.j-modalCloseBtnBR:hover, .j-modalCloseBtnBR:focus {
  color: white;
  background-color: #1c78a0;
  border-color: white;
}
.j-modalCloseBtnBR:active {
  color: #1c78a0;
  background-color: #ffffff;
  border-color: #1c78a0;
}

/* Styling of 'Submit' button on login form */
.mainLoginBtn {
  color: #fff;
  background-color: #1c78a0;
  border: 2px solid #1c78a0;
}
.mainLoginBtn:hover, .mainLoginBtn:focus {
  color: white;
  background-color: #1ac051;
  border: 2px solid #1ac051;
}
.mainLoginBtn:active {
  color: #1ac051;
  background-color: white;
  border: 2px solid #1ac051;
}

/***** Sign Up button (green to red) *****/
/* .j-btn-signup {
  color: #1c78a0;
  background-color: #3febd1;
  border-color: #3febd1;
}
.j-btn-signup:hover, .j-btn-signup:focus {
  color: white;
  background-color: #ff5a5f;
  border-color: #ff5a5f;
}
.j-btn-signup:active {
  color: white;
  background-color: #bf5a5f;
  border-color: #bf5a5f;
} */
/***** Sign Up button (red to green) *****/
/* .j-btn-signup {
  color: white;
  background-color: #ff5a5f;
  border-color: #ff5a5f;
}
.j-btn-signup:hover, .j-btn-signup:focus {
  color: #1c78a0;
  background-color: #3febd1;
  border-color: #3febd1;
}
.j-btn-signup:active {
  color: #1c78a0;
  background-color: #35e1c7;
  border-color: #35e1c7;
} */
 /***** Sign Up button (green to teal) *****/
.j-btn-signup {
  color: #1c78a0;
  background-color: #3febd1;
  border-color: #3febd1;
}
.j-btn-signup:hover {
  color: #ffffff;
  background-color: #29D9C0;
  border-color: #29D9C0;
}
.j-btn-signup:active {
  color: white;
  background-color: #26B9A3;
  border-color: #26B9A3;
}
.j-btn-signup {
    position: relative;
    overflow: hidden; /* keeps arrow aligned on small screens */
}
/* The arrow (hidden by default) */
.j-btn-signup::after {
    content: "›"; /* clean, modern arrow */
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    opacity: 0;
    font-size: 1.6rem;
    color: #FFFFFF; /* matches your hover text color */
    transition: all 0.25s ease;
}
/* Hover state: arrow slides in + fades in */
.j-btn-signup:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Hide arrow by default at <340px as it overlaps the text */
@media (max-width: 340px) {
    .j-btn-signup::after {
        display: none;
    }
}
.j-btn-signup {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    transform: scale(1);
}
/* Hover: slight growth + soft lift */
.j-btn-signup:hover {
    transform: scale(1.035);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
/* Active (pressed): slightly smaller than hover for a tactile "press" */
.j-btn-signup:active {
    transform: scale(1.02);
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
}

.j-text-txtgreen1 {
  color: #26B9A3;
}

.j-text-green3 {
  color: #29D9C0;
}

/***** Action button 1 - Used to click to next step, also for Quick Edit button in Poll Dashboard' poll edit modal *****/
.j-btn-action1 {
  color: white;
  background-color: #1ac051;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
  line-height: 1.3em;
}

.j-btn-action1:hover {
  color: #1ac051;
  background-color: white;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
}

.j-btn-action1:active {
  color: white;
  background-color: #1ac051;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
}
/* An inactive state for buttons that use the class .j-btn-action1 */
.j-btn-action1Inactive {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}
.j-btn-action1Inactive:hover, .j-btn-action1Inactive:active, .j-btn-action1Inactive:focus {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}

/***** Action button 1 - Used to click to next step *****/
.j-btn-action1-gray {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}

.j-btn-action1-gray:hover {
  color: white;
  background-color: #a9a9a9;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}

.j-btn-action1-gray:active {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}

/***** Action button 2 - Used to return to a previous step. Note that there is a '2c' version below that has the same styling but does not change on hover etc so as to give an inactive button (used on Book Me, Calendar Set Up tab, 'Edits Saved' button) *****/
.j-btn-action2, .j-btn-action2:active {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 1px;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.j-btn-action2:hover, .j-btn-action2:focus {
  color: white;
  background-color: #a9a9a9;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 1px;
}

/***** Action button 3, Active - Used on Poll Dashboard page for COPY URL and VOTE buttons, also on New Poll page in Tutorial mode for Basic, Intermed. & Adv. buttons , also on Menu page for the green buttons that link to specific pages, note that the Menu page also uses j-btn-action3b which is for xs screens when the button text appears on two lines *****/
.j-btn-action3 {
  color: #1ac051;
  background-color: white;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
}
.j-btn-action3:hover, .j-btn-action3:focus {
  color: white;
  background-color: #1ac051;
}
.j-btn-action3:active {
  color: #1ac051;
  background-color: white;
}

.j-btn-action3b {
  color: #1ac051;
  background-color: white;
  border-color: #1ac051;
  border-radius: 0.6rem;
  border-width: 2px;
  line-height: 0.9rem;
}
.j-btn-action3b:hover, .j-btn-action3b:focus {
  color: white;
  background-color: #1ac051;
}
.j-btn-action3b:active {
  color: #1ac051;
  background-color: white;
}

/* Pricing & Features Page (4a, 4b, 4c) */
.j-btn-action4a {
  color: white;
  background-color:#5ad2f4;
  border-color: #5ad2f4;
  border-radius: 0.6rem;
  border-width: 2px;
  /* line-height: 0.9rem; */
  padding: 0rem 2rem;
}
.j-btn-action4a:hover, .j-btn-action4a:focus {
  color: #5ad2f4;
  background-color: white;
}
.j-btn-action4a:active {
  color: white;
  background-color: #5ad2f4;
}
/* No Hover version of 4a for when user is logged-in and the Free Trial btn gets automatically disabled */
.j-btn-action4aNH {
  color: white;
  background-color:#5ad2f4;
  border-color: #5ad2f4;
  border-radius: 0.6rem;
  border-width: 2px;
  /* line-height: 0.9rem; */
  padding: 0rem 2rem;
}

.j-btn-action4b {
  color: white;
  background-color:#62bec1;
  border-color: #62bec1;
  border-radius: 0.6rem;
  border-width: 2px;
  /* line-height: 0.9rem; */
  padding: 0rem 2rem;
}
.j-btn-action4b:hover, .j-btn-action4b:focus {
  color: #62bec1;
  background-color: white;
}
.j-btn-action4b:active {
  color: white;
  background-color: #62bec1;
}

.j-btn-action4c {
  color: white;
  background-color:#0074A0;
  border-color: #0074A0;
  border-radius: 0.6rem;
  border-width: 2px;
  /* line-height: 0.9rem; */
  padding: 0rem 2rem;
}
.j-btn-action4c:hover, .j-btn-action4c:focus {
  color: #0074A0;
  background-color: white;
}
.j-btn-action4c:active {
  color: white;
  background-color: #0074A0;
}

/* For a button tag around an "i" info icon, with white background-color */
.infoBtn01 {
  background-color: white;
  border: none;
}
.infoBtn01:active, .infoBtn01:focus {
  outline-style: none;
}
/* For a button tag around an "i" info icon, with bg-lgc's background-color */
.infoBtn02 {
  background-color: #f4f5ef;
  border: none;
}
.infoBtn02:active, .infoBtn02:focus {
  outline-style: none;
}
/* For a button tag around an "i" info icon, with text-logo's background-color */
.infoBtn03 {
  background-color: #1c78a0;
  border: none;
}
.infoBtn03:active, .infoBtn03:focus {
  outline-style: none;
}
/* For a button tag */
.infoBtn04 {
  background-color: transparent;
  border: none;
}
.infoBtn04:active, .infoBtn04:focus {
  outline-style: none;
}
/* E.g. used with a button tag around a c4DayTab on Book-Me page, CSU tab */
.j-borderNone {
  border: none;
}
/* To allow any btn element to not display with default button styling */
.btnAdj {
  background-color: transparent;
  border: none;
}
.btnAdj:active, .btnAdj:focus {
  outline-style: none;
}

/* Ensure no outline on buttons, Chrome seems to like outlines. Currently used on timeslots on My Bookings & Booking Setup pages */
.noOl:active, .noOl:focus {
  outline-style: none;
}

/* Padding on buttons */
.j-btn-p {
  padding: 0rem 0.5rem;
}
.j-btn-p2 { /* Used on the Menu page for the green buttons for xs screens only */
  padding: 0.15rem 0.6rem;
}
/***** Action button 3, Inactive. Used on Poll Dashboard page to grey out buttons when inactive (i.e. poll not editable state) */
.j-btn-action3Inactive {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}
.j-btn-action3Inactive:hover, .j-btn-action3Inactive:focus, .j-btn-action3Inactive:active {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
}

/* Button on Book Me page, Calendar Set Up tab, step 2, PULSE effect */
.btnPulseGreen {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulseGreen 1.5s infinite;
}
@keyframes pulseGreen {
	0% {
		transform: scale(0.85);
		box-shadow: 0 0 0 0 rgba(26, 192, 81, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 3px rgba(26, 192, 81, 0);
	}

	100% {
		transform: scale(0.85);
		box-shadow: 0 0 0 0 rgba(26, 192, 81, 0);
	}
}

/* Experimental animation on My Bookings page to switch a button's border from solid to dashed & back again (Filter Btn) */
.mbBtnAnimation1 {
  background-color: white;
  border-radius: 1.2em;
  color: #1ac051;
  animation: borderChange1 1s infinite;
}
@keyframes borderChange1 {
	0% {
		border: 2px solid #1ac051;
	}

	70% {
		border: 2px dashed #1ac051;
	}

	100% {
		border: 2px solid #1ac051;
	}
}
.mbBtnAnimation1:hover, .mbBtnAnimation1:focus {
  color: #1ac051;
  font-weight: bold;
}
.mbBtnAnimation1:active {
  background-color: #1ac051;
  color: white;
}

/* Button on Book Me page, Calendar Set Up tab, step 2, INACTIVE (grey) button version of .j-btn-action2 */
.j-btn-action2c, .j-btn-action2c:hover, .j-btn-action2c:focus, .j-btn-action2c:active {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 1px;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  cursor: text;
}
/* Button on Book Me page, Calendar Set Up tab, step 2, ACTIVE (green) button version of .j-btn-action2 */
.j-btn-action2cGreen {
  color: #1ac051;
  background-color: white;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 1px;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
.j-btn-action2cGreen:hover, .j-btn-action2cGreen:focus {
  color: white;
  background-color: #1ac051;
}
.j-btn-action2cGreen:active {
  color: #1ac051;
  background-color: white;
}

/* for <SELECT> dropdowns */
.j-select1 { /* Used for days of the week */
  /* background-color: #4F999E !important; */
  border-width: 1px !important;
  border-color: #ced4da !important;
  border-style: solid;
  border-radius: 0.5rem;
  color: #1c78a0;
}

/* ***** Border for New Poll Page's "Step 1 / 3" text ***** */
.j-step {
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #ff5a5f;
  border-radius: 1.2rem;
  color: #ff5a5f;
  /* padding: 2px 10px 2px 10px; T,R,B,L */
}

/***** Outline of <div>s for the switches on the calendar on the New Poll page, Step 1 *****/
.j-btn-switch {
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #ced4da;
  border-radius: 1.2rem;
  color: #1c78a0;
}

/***** Outline of <div>s for the switches from the calendar on the New Poll page which are now used on the Book me page *****/
.j-btn-switchBm {
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #ced4da;
  border-radius: 0.75rem;
  color: #1c78a0;
}

/***** Outline of <div>s for the switches on the TSO options on the New Poll page, Step 2 *****/
.j-btn-switch2 { /* For outer div of the 3 switches on the New Poll page, Step 2 when switched off */
  background-color: white;
  border-width: 2px;
  border-style: solid;
  border-color: #ced4da;
  border-radius: 0.6rem;
  color: #1c78a0;
  margin-top: 4px;
  /* margin-bottom: 4px; */
}
.j-btn-switch2:hover,.j-btn-switch2:focus {
  border-color: #1c78a0;
}
.j-btn-switch2:active {
  border-color: #1c78a0;
}

.j-btn-switch2b {/* For outer div of the 3 switches on the New Poll page, Step 2 when switched on */
  background-color: white;
  border-width: 2px;
  border-style: solid;
  border-color: #1c78a0;
  border-radius: 0.6rem;
  color: #1c78a0;
  margin-top: 4px;
  /* margin-bottom: 4px; */
}
.j-btn-switch2b:hover,.j-btn-switch2b:focus {
  border-color: #1c78a0;
}
.j-btn-switch2b:active {
  border-color: #1c78a0;
}

.swOutline:hover, .swOutline:focus {
  border-color: #1ac051;
}

/***** Outline of <div>s for the icons to delete DE's on the active or all days on the Diary section on the New Poll page, Step 2 *****/
.j-delete-icon-inactive {
  background-color: white;
  color: #a9a9a9;
  border: 1px solid #a9a9a9;
  border-radius: 0.6rem;
}

/***** Outline of <div>s (surrounding icon & num of DE's) for the icons to delete DE's on the active or all days on the Diary section on the New Poll page, Step 2. This affects the color of the text & the bgc *****/
.j-delete-icon-active { /* "active" => when the trash can icons have a number next to them (= DE's exist) */
  background-color: white;
  color: #1c78a0;
  border: 1px solid #1c78a0;
  border-radius: 0.6rem;
}
.j-delete-icon-active:hover,.j-delete-icon-active:focus {
  background-color: #f05d1f;
  color: white;
  border: 1px solid #f05d1f;
  /* border: 1px solid #f05d1f; */
}

.j-delete-icon-active:active {
  /* background-color: #f05d1f;
  color: white; */
  background-color: white;
  color: #f05d1f;
  border: 1px solid #f05d1f;
}
/* Associated with the div containing the trash can, set the style of the trash can itself */
.j-delete-icon-active:hover > .activeTrashCan {
  background-color: #f05d1f;
  color: white;
  /* color: #f05d1f; */
}
.j-delete-icon-active:focus > .activeTrashCan {
  background-color: #f05d1f;
  color: white;
}
.j-delete-icon-active:active > .activeTrashCan {
  background-color: white;
  color: #f05d1f;
}

/* Colouring of Trash Can icons: Grey if no DE's, blue if DE's, red on hover / focus / active */
.inactiveTrashCan { /* "inactive" => when the trash cans do not have any numbers next to them (= no DE's) */
  background-color: white;
  color: #a9a9a9;
}
.activeTrashCan {
  background-color: white;
  color: #1c78a0;
}

/* Switch bgc for when switched on */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #4f999e;
  border-color: #4f999e;
}
/* Custom switch colour for Bootstrap switches. The switch background and border colours are controled by the Bootstrap class .custom-control-input and a variation of that is here for use when a switch needs to appear as switched on but still has a grey colour because you need it to look disabled. Disabling the switch using either .disabled or disabled=true does not work. */
.custom-control-inputGray:checked ~ .custom-control-labelGray::before {
  background-color: #ced4da;
  border-color: #ced4da;
}

/***** Outline of the Weekend Day <div> around the day name checkboxes on the Settings page*****/
.j-btn-checkboxes {
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #ced4da;
  border-radius: 0.5rem;
  color: #1c78a0;
}

/***** Tabs on Settings page that select the different sections *****/
.settingsHeaderDiv {
  border-bottom: 2px solid #1c78a0;
}

.settingsSideDiv {
  width: 20px;
}

.settingsTabActive {
  color: white;
  background-color: #1c78a0;
  border: 2px solid #1c78a0;
  border-top-left-radius: 1.2em;
  border-top-right-radius: 1.2em;
  padding: 10px 10px 1px 10px;
  cursor: text; /* Usual cursor, not the clickable hand icon */
}

.settingsTabInActive {
  color: #a9a9a9;
  background-color:#ebebeb;
  border: 1px solid #ebebeb;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  padding: 10px;
  margin-bottom: 3px;
  margin-top: 5px;
  cursor: pointer;
}
.settingsTabInActive:hover, .settingsTabInActive:focus {
  color: #1c78a0;
  background-color: white;
  border-color: #1c78a0;
}
.settingsTabInActive:active {
  color: white;
  background-color: #1c78a0;
  border-color: #1c78a0;
}

/* Stop Settings page tab headings from displaying text that overflows the div. Words with first letter capitalised get ignored for hyphens, so all words are lowercase and then get capitalised by the text-transform statement */
.settingsTabHeaders {
  white-space: normal;   /* allow wrapping */
  overflow-wrap: break-word;  /* break long words if needed */
  max-width: 100%;       /* keep within cell */
  display: inline-block; /* respect max-width */
  hyphens: auto;         /* insert hyphen when breaking words */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  text-transform: capitalize; /* Capitalize first letter of each word */
}

/* Class to control the size of the "i" icons in the header of the Help Modals on the settings page */
.sPIIcons { /* sPIIcons = settings page information icons */
  opacity: 100%; /* Not actually needed but it's done to ensure the class is not empty */
}

/* Class to give 2px padding-bottom, used usually on icons to ensure alignment */
.pb2px {
  padding-bottom: 2px;
}
.pb3px {
  padding-bottom: 3px;
}

/***** Header bar for each step on New Poll page *****/
.j-step-header {
  color: #1c78a0;
  border-radius: 1.2rem;
  font-weight: 500;
}

/* coloured bgc for when an input field was not completed */
.errorBgc {
  background-color: #F4D1CC;
}
/* coloured border color for when an input field was not completed */
.errorBorder {
  border: 2px solid #F4D1CC;
}

/***** Calendar 'Clear Dates' Button *****/
.j-btn-cal {
  color: #1c78a0;
  background-color: white;
  border-color: #1c78a0;
  border-width: 1px;
}

.j-btn-cal:hover {
  color: white;
  background-color: #1c78a0;
  border-color: #1c78a0;
  border-width: 1px;
}

.j-btn-cal:active {
  color: #1c78a0;
  background-color: white;
  border-color: #1c78a0;
  border-width: 2px;
}

/* Help Modal pop-up window */
.j-bgc-modal {
  background-color: #4898c2;
}

/* ***** Nav menu on the page, styled to highlight the <a> tag on hover & replicate .nav-link's spacing***** */
.j-a-block2 {
  display: block;
  padding: 0.25rem 1.0rem;
}
.j-a-block2:hover, j-a-block2:focus {
  /* font-weight: bold; */
  background-color: #dcdcdc;
  text-decoration: none;
}
.j-a-block2:active {
  font-weight: bold;
}

/* Menu separator dashed line */
.j-menuDashes {
  display: block;
  padding: 0.25rem 1rem;
  font-weight: bold;
  color: #1c78a0;;
}

/* Styles for line element <hr> */
.hr1 {
  border: 1px solid white;
}
.hr1b {
  border: 1px solid white;
  margin-top: 4px;
  margin-bottom: 4px;
}
.hr1c {
  border: 2px solid white;
}
.hr2 {
  border: 1px solid #1c78a0;
}
.hr2b {
  border: 1px solid #1c78a0;
  margin-top: 3px;
  margin-bottom: 3px;
}
.hr3 {
  background-color: #bcbdb9;
  height: 2px;
  border: none;
}
.hr4 {
  border: 1px dashed #ced4da;
}
/* Divider between logo-row columns: horizontal line above when columns stack (below md), vertical line to the left once they sit side by side (md+) */
.j-vdivider-md {
  border-left: 0;
  border-top: 1px solid #ced4da;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}
@media (min-width: 768px) {
  .j-vdivider-md {
    border-left: 1px solid #ced4da;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
}
/* Ensures every Pickr swatch button stays visible even when its current colour is white/very light (e.g. the logo background colour picker, whose default can be white). The colour swatch itself is painted by Pickr's own ::after pseudo-element (position:absolute, inset:0, so it fully covers the button including any border applied to the button itself) — the border has to go on ::after directly. Pickr's .pcr-button is only used on the Account page's 2 logo colour pickers, so this is safely scoped in practice. */
.pcr-button::after {
  border: 1px solid #ced4da;
  box-sizing: border-box;
}
/* Compact, fixed-width <select> used for logo border/padding style controls; width matches the widest label ("Padding X") so paired label+select columns align consistently */
.j-logoStyleSelect {
  width: 90px;
}
/* Pickr has no native disable API, binds its own click handler to an internally-generated button, and replaces the class list of the div it's initialized on (wiping out any class put directly on that div) — so this class goes on a stable wrapper span around the div instead. pointer-events:none on the wrapper is the only reliable way to block interaction when the plan lacks acc_company_logo. */
.pcr-blocked {
  display: inline-block;
  pointer-events: none;
  opacity: 0.5;
}
.hr4b {
  border: 1px solid #ced4da;
}
.hr4c {
  border: 1px solid #ebebeb;
}
.hr5 {
  border: 1px dashed #1c78a0;
}
/* Used on Pricing & Features Page Pricing Panel */
.hr6 {
  border: 1px solid #e1e1e3;
}
/* Used on Poll Dashboard in the pencil icon's modal for the section to delete the info for a given voter */
.hr7 {
  border: 1px solid #FF5A5F;
}

/* ***** Set custom colour classes to match the logo's colour ***** */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1c78a0;
}

/* Main page text colour */
.j-text-logo {
  color: #1c78a0 !important;
}
/* Same but 'not important' (NI) */
.j-text-logoNI {
  color: #1c78a0;
}

/* Header bgc as text colour */
.j-text-logo2 {
  color: #145470 !important;
}

/* ***** Colour palette - colour 2 = Old Lavender ***** */
.j-text-col2 {
  color: #518296;
}

/* ***** Colour palette - colour 3 = Peachy ***** */
.j-text-col3 {
  color: #fd7263;
}

.j-text-info {
  color: #17a2b8 !important;
}
.j-text-orange {
  color: #f97824 !important;
}
.j-b-orange {
  border-color: #f97824 !important;
}
.j-text-red {
  color: #dc3545 !important;
}

/* Set an element's bg color to be that used for the logo */
.j-bgc-logo {
  background-color: #1c78a0 !important;
}

/* Set an element's bg color to be that used for the logo - 2nd blue = darker */
.j-bgc-logo2 {
  background-color: #145470 !important;
}

.j-bgc-col2 {
  background-color: #6abde1 !important;
}

.j-bgc-cal {
  /* background-color: #43A5F6 !important; */
  background-color: #1c78a0 !important;
}

/* Set main pic border color to be that used for the logo */
.j-border-logo {
  border-color: #1c78a0 !important;
}

/* Border for Bookings Setup Page's Calendar Setup Tab's Step 2's div c4TimeSlots - when logo colour */
.c4TimeSlots-logo {
  border: 2px solid #1c78a0;
}
/* Border for Bookings Setup Page's Calendar Setup Tab's Step 2's div c4TimeSlots - when white */
.c4TimeSlots-wh {
  border: 2px solid white;
}

/* div {
  background: red;
  animation: createBox .25s;
  width: 98px; height: 98px;
} */
@keyframes createBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* Set font color to be white */
.j-footer-text-color {
  color: white;
}

/* Set any font color to be white */
.j-colour-white {
  color: white !important;
}

.navDdMenu {
  border: 2px solid #1c78a0;
  border-radius: 0.5em;
}

/* Vertical alignment - middle */
.j-va-mid {
  vertical-align: middle;
}

/* Border Radius 1.2em */
.j-br1p2 {
  border-radius: 1.2rem;
}
/* Border Radius 0.75em */
.j-br1 {
  border-radius: 0.75em;
}
/* Border Radius 0.50em */
.j-br2 {
  border-radius: 0.50em;
}
/* Border Radius 0.25em */
.j-br3 {
  border-radius: 0.25em;
}

/* Dummy class to allow tooltips on the poll rows on the Poll Dashboard Page (on the checkbox and pencil icons) to be removed enmasse when the DOM elements are removed */
.toolTipPollRows {
  opacity: 100%;
}

/* Class to show hover effect when polls are hovered over on the poll dashboard page */
/* .pollRowHover {
  transition: outline 0.05s ease-in-out, background-color 0.15s;
} */
.pollRowHover:hover {
  /* color: #1ac051; */
  outline: 1px solid #1ac051;
  outline-offset: -1px;
}

/* Underline text */
.j-text-ul {
  text-decoration: underline;
}

/* Code for use in ensuring all <select> elements are correctly styled and not hijacked by Safari wanting to put a strange grey-coloured gradient effect in all <select> elements. Some classes are before the media queries and some are inside the media query section */

/* Switch off styling of <select> elements in all browsers. This has the negative effect of removing the drop-down arrows in the <select> */
/* select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
} */
/* Set a class for a div that surrounds each <select> so that the :after pseudo-class can be used to put a drop-down arrow back. Pseudo-classes cannot be applied to <select> elements, hence the need to put a div around all <select> elements in order to be able to put the drop-down arrow back. The approach below uses a class that is common to the surrounding div for all <select> elements => .select-container-base as well as a unique class for each <select> element that controls the positioning of the drop-down arrows => .select-container-s2 etc */
.select-container-base {position:relative; display: inline;}
.select-container-base:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  pointer-events: none;
}
/* Positioning of the drop-down arrows for each select class (.j-select2 etc) */
.select-container-dp:after { /* for month select in Date Picker */
  top: .45em;
  right: .35em;
  opacity: 1.0;
}
/* THis could need positioning insode the media query if different size drop-down arrows are needed on different screen sizes. This seems to work OK for all screen sizes >=320 px, therefore I have placed it outside the media query section. */
.select-container-dp:after { /* for month select in Date Picker */
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid white;
}
.fpMonthDd {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
/* .select-container-s2:after { for .j-select2
  top: .3em;
  right: .75em;
  opacity: 1.0;
} */
/* .select-container-s4:after { for .j-select4
  top: .3em;
  right: .75em;
  opacity: 1.0;
} */

/* Over ride default background image used in <select> elements to display the drop down arrows. Solution came from https://stackoverflow.com/questions/46836406/bootstrap-4-how-to-amend-custom-select-arrow-to-change-colour. The RGB for 'fill' is the logo text color in RGB format. */
.custom-select {
  /* -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important; */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='rgb(28,120,160)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !important;
}

/* ***** Set custom font sizes, used initially for front page *****/
@media (min-width: 0px) {
  /* xs */
  .j-text-size1 {
    font-size: 0.9rem;
  }
  .j-text-sizeEmAd {
    font-size: 0.8rem;
  }
  .j-text-size2 { /* Used on homepage for section headings (section 2+) */
    font-size: 1.7rem;
  }
  .j-text-size2b { /* Not used? */
    font-size: 1.6rem;
    font-weight: 500;
  }
  .j-text-size3 {
    /* Used for text on date tabs on New Poll page Step 2 */
    font-size: 0.5rem;
  }
  .j-text-size4 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.5rem;
  }
  .j-text-size4b {
    /* Used to display the client name in DE cells on the My Bookings page */
    font-size: 0.45rem;
  }
  .j-text-size4Btn {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.7rem;
  }
  .j-text-size5 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size5Btn {
    /* Blue btns on the Account page */
    font-size: 0.875rem;
  }
  .j-text-size6 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 10px;
  }
  .j-text-size7 {
    /* E.g. used for the page title text on each page */
    font-size: 14px;
  }
  .j-text-size7b {
    /* E.g. used for the page title text on each page */
    font-size: 18px;
  }
  .j-text-size7c {
    /* E.g. used for the page title text on each page */
    font-size: 12px;
  }
  .j-text-size8 {
    /* E.g. used for the tip text in some cases */
    font-size: 12px;
  }
  .j-text-size9 {
    /* E.g. used for pricing & features page headings */
    font-size: 1.15rem;
  }
  /* Note that the margin values were worked out to enable the flatpickr calendar to correctly display down to 320px screen size */
  .j-npleft-ml {
    /* "np" refers to New Poll page, "left" refers to left panel on XL screens */
    margin-left: -15px;
  }
  .j-npleft-mr {
    margin-right: -15px;
  }

  .j-npright-ml {
    /* "np" refers to New Poll page, "right" refers to right panel on XL screens */
    margin-left: -15px;
  }
  .j-npright-mr {
    margin-right: -15px;
  }

  .j-mainMenu-ml { /* Used to position Main menu on each page when logged in */
    margin-left: -20px;
  }

  .j-npBtn-ml { /* Buttons like 'Return to Step 1' and the Tutorial button on new Poll page, Step 2 had alignment issues */
    margin-left: 0px;
  }

  .j-bmTabs-mlr { /* Handles left & right margins of tabbed headings on Book Me page */
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .j-menuPage-mlr { /* Handles left & right margins of the Menu page's display */
    margin-left: 0px;
    margin-right: 0px;
  }

  /* Class to handle left-alignment of the logo in the header */
  .j-logo-horiz {
    padding-left: 0px;
  }

  /* Define a class to hide the Week Numbers switch for smallest screen sizes because the date picker overflows the screen width otherwise*/
  .hideWeekNumSwitch {
    display: none;
  }
  /* Styling of the grey background panels for the panels on the New Poll page */
  .panel-np1 {
    /* border: 2px solid #bcbdb9; */
    border-radius: 1.2rem;
  }
  .panel-np2 {
    min-height: 570px;
    border-radius: 1.2rem;
  }
  /* Styling of the grey background panels for the panels on the New Poll page - alternative border colour */
  .panel-np1b {
    /* border: 2px solid #bcbdb9; */
    border-radius: 1.2rem;
  }
  .panel-np2b {
    min-height: 570px;
    border-radius: 1.2rem;
  }
  .dateBTR {
    /* to make date tabs look like rounded-corner tabs on New Poll page Step 2 */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .dateLH {
    line-height: 1.4em;
  }
  .jHeight50 {
    height: 50px;
  }
  .jHeight100 {
    height: 100px;
  }

  /* Used initially for selects for hours & minutes on New Poll page, Step 2, meeting duration & spacing*/
  .j-select2 {
    height: 1.6em;
    width: 5.5em;
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    padding-left: 0.0rem !important;
  }
  
  /* Other settings for .select-container are done just before the media query section. This is used to stop Safari creating grey gradients on dropdowns */
  /* .select-container-s2:after, .select-container-s4:after { for .j-select2
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #1c78a0;
  } */

  /* Used for date format select box on Poll Dashboard page */
  .j-select3 {
    height: 1.2rem;
    /* width: 2.4rem; */
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    padding-left: 0.0rem !important;
  }
  .j-select4 {
    height: 1.8rem;
    display: inline;
    color: #1c78a0;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
  }
  .j-select4:hover, .j-select4:focus {
    border-color: #a9a9a9;
  }
  /* my-booking page, Calendar View, the 'weekends' switch that shows / hides weekend dates, it needs some padding for the label to align. Used on Poll Voting page also, to align the label on the 'email me my votes' switch */
  .mbWeekendLabel {
    padding-top: 3px;
    padding-bottom: 0px;
  }
  /* MY BOOKINGS page, dotted background to booked Booking Slots */
  .pattern-dots-light {
    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(6 * 1px) calc(6 * 1px);
  }
  /* MY BOOKINGS page, controls alignment of 'Accept' / 'Decline' text next to switches in time rows of modal for BS requiring manual confirmation */
  .j-ptA {
    padding-top: 2px;
  }
  /* POLL RESULTS PAGE, alignment of the checkboxes in the modal that opens when you click the FILTER BY NAME icon */
  .j-ptB {
    padding-top: 3px;
  }
  /* Div height, pricing & features page product desc */
  /* .j-prDescDiv { */
    /* becomes 'height: 3.0rem' for md screen sizes & up ; */
  /* } */
}

@media (min-width: 418px) {
  /* JW size where original 0px settings still worked */
  .j-text-size1 {
    font-size: 0.9rem;
  }
  .j-text-sizeEmAd {
    font-size: 0.8rem;
  }
  .j-text-size2 {
    font-size: 1.85rem;
  }
  .j-text-size2b {
    font-size: 2.0rem;
    font-weight: 500;
  }
  .j-text-size3 {
    /* Used for text on date tabs on New Poll page Step 2 */
    font-size: 0.5rem;
  }
  .j-text-size4 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.7rem;
  }
  .j-text-size4b {
    /* Used to display the client name in DE cells on the My Bookings page */
    font-size: 0.45rem;
  }
  .j-text-size4Btn {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size5 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size5Btn {
    /* Blue btns on the Account page */
    font-size: 0.900rem;
  }
  .j-text-size6 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 13px;
  }
  .j-text-size7 {
    /* E.g. used for the page title text on each page */
    font-size: 18px;
  }
  .j-text-size7b {
    /* E.g. used for the page title text on each page */
    font-size: 18px;
  }
  .j-text-size7c {
    /* E.g. used for the page title text on each page */
    font-size: 16px;
  }
  .j-text-size8 {
    /* E.g. used for the tip text in some cases */
    font-size: 13px;
  }
  .j-text-size9 {
    /* E.g. used for pricing & features page headings */
    font-size: 1.45rem;
  }
  .j-npleft-ml {
    /* "np" refers to New Poll page, "left" refers to left panel on XL screens */
    margin-left: 10px;
  }
  .j-npleft-mr {
    margin-right: 10px;
  }

  .j-npright-ml {
    /* "np" refers to New Poll page, "right" refers to right panel on XL screens */
    margin-left: 10px;
  }
  .j-npright-mr {
    margin-right: 10px;
  }

  .j-mainMenu-ml { /* Used to position Main menu on each page when logged in */
    margin-left: -2px;
  }

  .j-npBtn-ml { /* Buttons like 'Return to Step 1' and the Tutorial button on new Poll page, Step 2 had alignment issues */
    margin-left: 0px;
  }

  .j-bmTabs-mlr { /* Handles left & right margins of tabbed headings on Book Me page */
    margin-left: 0px;
    margin-right: 0px;
  }

  .j-menuPage-mlr { /* Handles left & right margins of the Menu page's display */
    margin-left: -6px;
    margin-right: 0px;
  }

  /* Class to handle left-alignment of the logo in the header */
  .j-logo-horiz {
    padding-left: 12px;
  }

  .hideWeekNumSwitch {
    display: block;
  }
  
  /* Styling of the grey background panels for the panels on the New Poll page */
  .panel-np1 {
    border: 2px solid #bcbdb9;
    border-radius: 1.2rem;
  }
  .panel-np2 {
    min-height: 570px;
    border-radius: 1.2rem;
  }
  /* Styling of the grey background panels for the panels on the New Poll page */
  .panel-np1b {
    /* border: 2px solid #bcbdb9; */
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }
  .panel-np2b {
    min-height: 570px;
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }

  .dateBTR {
    /* to make date tabs look like rounded-corner tabs on New Poll page Step 2 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  /* Used initially for selects for hours & minutes on New Poll page, Step 2, meeting duration & spacing*/
  .j-select2 {
    height: 1.4em;
    width: 4.3em;
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    padding-left: 0.0rem !important;
  }

  /* Other settings for .select-container are done just before the media query section. This is used to stop Safari creating grey gradients on dropdowns */
  /* .select-container-s2:after { for .j-select2
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #1c78a0;
  } */

  /* Used for date format select box on Poll Dashboard page */
  .j-select3 {
    height: 1.4rem;
    /* width: 2.5rem; */
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    padding-left: 0.0rem !important;
  }
  /* my-booking page, Calendar View, the 'weekends' switch that shows / hides weekend dates, it needs some padding for the label to align */
  .mbWeekendLabel {
    padding-top: 2px;
    padding-bottom: 0px;
  }
  /* MY BOOKINGS page, dotted background to booked Booking Slots */
  .pattern-dots-light {
    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(6 * 1px) calc(6 * 1px);
  }
}
@media (min-width: 576px) { /* s */
  .j-text-size1 {
    font-size: 1rem;
  }
  .j-text-sizeEmAd {
    font-size: 0.9rem;
  }
  .j-text-size2 {
    font-size: 2.0rem;
  }
  .j-text-size2b {
    font-size: 2rem;
    font-weight: 500;
  }
  .j-text-size3 {
    /* Used for text on date tabs on New Poll page Step 2 */
    font-size: 0.6rem;
  }
  .j-text-size4 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.75rem;
  }
  .j-text-size4b {
    /* Used to display the client name in DE cells on the My Bookings page */
    font-size: 0.45rem;
  }
  .j-text-size4Btn {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.85rem;
  }
  .j-text-size5 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size5Btn {
    /* Blue btns on the Account page */
    font-size: 0.925rem;
  }
  .j-text-size6 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 13px;
  }
  .j-text-size7 {
    /* E.g. used for the page title text on each page */
    font-size: 18px;
  }
  .j-text-size7b {
    /* E.g. used for the page title text on each page */
    font-size: 20px;
  }
  .j-text-size7c {
    /* E.g. used for the page title text on each page */
    font-size: 16px;
  }
  .j-text-size8 {
    /* E.g. used for the tip text in some cases */
    font-size: 14px;
  }
  .j-text-size9 {
    /* E.g. used for pricing & features page headings */
    font-size: 1.85rem;
  }
  .j-npleft-ml {
    /* "np" refers to New Poll page, "left" refers to left panel on XL screens */
    margin-left: 10px;
  }
  .j-npleft-mr {
    margin-right: 30px;
  }

  .j-npright-ml {
    /* "np" refers to New Poll page, "right" refers to right panel on XL screens */
    margin-left: 10px;
  }
  .j-npright-mr {
    margin-right: 30px;
  }

  .j-mainMenu-ml { /* Used to position Main menu on each page when logged in */
    margin-left: -2px;
  }

  .j-npBtn-ml { /* Buttons like 'Return to Step 1' and the Tutorial button on new Poll page, Step 2 had alignment issues */
    margin-left: 0px;
  }

  .j-bmTabs-mlr { /* Handles left & right margins of tabbed headings on Book Me page */
    margin-left: 0px;
    margin-right: 0px;
  }

  .j-menuPage-mlr { /* Handles left & right margins of the Menu page's display */
    margin-left: -6px;
    margin-right: 0px;
  }

  .hideWeekNumSwitch {
    display: block;
  }
  /* Styling of the grey background panels for the panels on the New Poll page */
  .panel-np1 {
    border: 2px solid #bcbdb9;
    border-radius: 1.2rem;
  }
  .panel-np2 {
    min-height: 570px;
    border-radius: 1.2rem;
  }
  /* Styling of the grey background panels for the panels on the New Poll page - alternative border colouring */
  .panel-np1b {
    /* border: 2px solid #bcbdb9; */
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }
  .panel-np2b {
    min-height: 570px;
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }

  .dateBTR {
    /* to make date tabs look like rounded-corner tabs on New Poll page Step 2 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  /* Used initially for selects for hours & minutes on New Poll page, Step 2, meeting duration & spacing*/
  .j-select2 {
    height: 1.5em;
    width: 4.2em;
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    padding-left: 0.0rem !important;
  }

  /* Used for date format select box on Poll Dashboard page */
  .j-select3 {
    height: 1.5rem;
    /* width: 2.4rem; */
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    padding-left: 0.0rem !important;
  }
  /* my-booking page, Calendar View, the 'weekends' switch that shows / hides weekend dates, it needs some padding for the label to align */
  .mbWeekendLabel {
    padding-top: 1px;
    padding-bottom: 0px;
  }
  /* MY BOOKINGS page, dotted background to booked Booking Slots */
  .pattern-dots-light {
    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(7 * 1px) calc(7 * 1px);
  }
  /* MY BOOKINGS page, controls alignment of 'Accept' / 'Decline' text next to switches in time rows of modal for BS requiring manual confirmation */
  .j-ptA {
    padding-top: 1px;
  }
}
@media (min-width: 768px) { /* md */
  .j-text-size1 {
    font-size: 1.1rem;
  }
  .j-text-sizeEmAd {
    font-size: 0.9rem;
  }
  .j-text-size2 {
    font-size: 2.0rem;
  }
  .j-text-size2b {
    font-size: 2.4rem;
    font-weight: 500;
  }
  .j-text-size3 {
    /* Used for text on date tabs on New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size4 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.9rem;
  }
  .j-text-size4b {
    /* Used to display the client name in DE cells on the My Bookings page */
    font-size: 0.6rem;
  }
  .j-text-size4Btn {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.95rem;
  }
  .j-text-size5 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size5Btn {
    /* Blue btns on the Account page */
    font-size: 0.950rem;
  }
  .j-text-size6 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 14px;
  }
  .j-text-size7 {
    /* E.g. used for the page title text on each page */
    font-size: 20px;
  }
  .j-text-size7b {
    /* E.g. used for the page title text on each page */
    font-size: 20px;
  }
  .j-text-size7c {
    /* E.g. used for the page title text on each page */
    font-size: 18px;
  }
  .j-text-size8 {
    /* E.g. used for the tip text in some cases */
    font-size: 16px;
  }
  .j-text-size9 {
    /* E.g. used for pricing & features page headings */
    font-size: 2.0rem;
  }
  .j-npleft-ml {
    /* "np" refers to New Poll page, "left" refers to left panel on XL screens */
    margin-left: 10px;
  }
  .j-npleft-mr {
    margin-right: 45px;
  }

  .j-npright-ml {
    /* "np" refers to New Poll page, "right" refers to right panel on XL screens */
    margin-left: 10px;
  }
  .j-npright-mr {
    margin-right: 45px;
  }
  .j-mainMenu-ml { /* Used to position Main menu on each page when logged in */
    margin-left: -16px;
  }

  .j-npBtn-ml { /* Buttons like 'Return to Step 1' and the Tutorial button on new Poll page, Step 2 had alignment issues */
    margin-left: 0px;
  }

  .j-bmTabs-mlr { /* Handles left & right margins of tabbed headings on Book Me page */
    margin-left: 0px;
    margin-right: 0px;
  }

  .j-menuPage-mlr { /* Handles left & right margins of the Menu page's display */
    margin-left: -7px;
    margin-right: 0px;
  }

  .hideWeekNumSwitch {
    display: block;
  }

  /* Styling of the grey background panels for the panels on the New Poll page */
  .panel-np1 {
    border: 2px solid #bcbdb9;
    border-radius: 1.2rem;
  }
  .panel-np2 {
    min-height: 570px;
    border-radius: 1.2rem;
  }
  /* Styling of the grey background panels for the panels on the New Poll page - alternative border colouring */
  .panel-np1b {
    /* border: 2px solid #bcbdb9; */
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }
  .panel-np2b {
    min-height: 570px;
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }

  .dateBTR {
    /* to make date tabs look like rounded-corner tabs on New Poll page Step 2 */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* Used initially for selects for hours & minutes on New Poll page, Step 2, meeting duration & spacing*/
  .j-select2 {
    height: 1.6em;
    width: 3.7em;
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
  }

  /* Used for date format select box on Poll Dashboard page */
  .j-select3 {
    height: 1.6rem;
    /* width: 3.3rem; */
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
  }
  /* my-booking page, Calendar View, the 'weekends' switch that shows / hides weekend dates, it needs some padding for the label to align */
  .mbWeekendLabel {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /* MY BOOKINGS page, dotted background to booked Booking Slots */
  .pattern-dots-light {
    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(8 * 1px) calc(8 * 1px);
  }
  /* MY BOOKINGS page, controls alignment of 'Accept' / 'Decline' text next to switches in time rows of modal for BS requiring manual confirmation */
  .j-ptA {
    padding-top: 0px;
  }
  /* POLL RESULTS PAGE, alignment of the checkboxes in the modal that opens when you click the FILTER BY NAME icon */
  .j-ptB {
    padding-top: 4px;
  }
  /* Div height, pricing & features page product desc */
  .j-prDescDiv {
    height: 3.0rem;
  }
}
@media (min-width: 992px) { /* lg */
  .j-text-size1 {
    font-size: 1.1rem;
  }
  .j-text-sizeEmAd {
    font-size: 1.0rem;
  }
  .j-text-size2 {
    font-size: 2.0rem;
  }
  .j-text-size2b {
    font-size: 1.7rem;
    font-weight: 500;
  }
  .j-text-size3 {
    /* Used for text on date tabs on New Poll page Step 2 */
    font-size: 1rem;
  }
  .j-text-size4 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 1rem;
  }
  .j-text-size4b {
    /* Used to display the client name in DE cells on the My Bookings page */
    font-size: 0.8rem;
  }
  .j-text-size4Btn {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 1rem;
  }
  .j-text-size5 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size5Btn {
    /* Blue btns on the Account page */
    font-size: 0.975rem;
  }
  .j-text-size6 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 16px;
  }
  .j-text-size7 {
    /* E.g. used for the page title text on each page */
    font-size: 20px;
  }
  .j-text-size7b {
    /* E.g. used for the page title text on each page */
    font-size: 20px;
  }
  .j-text-size7c {
    /* E.g. used for the page title text on each page */
    font-size: 18px;
  }
  .j-text-size8 {
    /* E.g. used for the tip text in some cases */
    font-size: 16px;
  }
  .j-text-size9 {
    /* E.g. used for pricing & features page headings */
    font-size: 2.4rem;
  }
  .j-npleft-ml {
    /* "np" refers to New Poll page, "left" refers to left panel on XL screens */
    margin-left: 25px;
  }
  .j-npleft-mr {
    margin-right: 0px;
  }

  .j-npright-ml {
    /* "np" refers to New Poll page, "right" refers to right panel on XL screens */
    margin-left: 0px;
  }
  .j-npright-mr {
    margin-right: 45px;
  }
  .j-mainMenu-ml { /* Used to position Main menu on each page when logged in */
    margin-left: -2px;
  }

  .j-npBtn-ml { /* Buttons like 'Return to Step 1' and the Tutorial button on new Poll page, Step 2 had alignment issues */
    margin-left: 0px;
  }

  .j-bmTabs-mlr { /* Handles left & right margins of tabbed headings on Book Me page */
    margin-left: 0px;
    margin-right: 0px;
  }

  .j-menuPage-mlr { /* Handles left & right margins of the Menu page's display */
    margin-left: -6px;
    margin-right: 0px;
  }

  .hideWeekNumSwitch {
    display: block;
  }

  /* Styling of the grey background panels for the panels on the New Poll page */
  .panel-np1 {
    min-height: 655px;
    border: 2px solid #bcbdb9;
    border-radius: 1.2rem;
  }
  .panel-np2 {
    min-height: 655px;
    border-radius: 1.2rem;
  }
  /* Styling of the grey background panels for the panels on the New Poll page - alternative border colouring */
  .panel-np1b {
    min-height: 685px;
    /* border: 2px solid #bcbdb9; */
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }
  .panel-np2b {
    min-height: 685px;
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }

  .dateBTR {
    /* to make date tabs look like rounded-corner tabs on New Poll page Step 2 */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  /* Used initially for selects for hours & minutes on New Poll page, Step 2, meeting duration & spacing*/
  .j-select2 {
    height: 1.6em;
    width: 3.5em;
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
  }

  /* Used for date format select box on Poll Dashboard page */
  .j-select3 {
    height: 1.6rem;
    /* width: 3.5rem; */
    display: inline;
    color: #1c78a0;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
  }
  /* my-booking page, Calendar View, the 'weekends' switch that shows / hides weekend dates, it needs some padding for the label to align */
  .mbWeekendLabel {
    padding-top: 0px;
    padding-bottom: 1px;
  }
  /* MY BOOKINGS page, dotted background to booked Booking Slots */
  .pattern-dots-light {
    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(9 * 1px) calc(9 * 1px);
  }
  /* POLL RESULTS PAGE, alignment of the checkboxes in the modal that opens when you click the FILTER BY NAME icon */
  .j-ptB {
    padding-top: 6px;
  }
}
@media (min-width: 1200px) { /* xl */
  .j-text-size1 {
    font-size: 1.2rem;
  }
  .j-text-sizeEmAd {
    font-size: 1.0rem;
  }
  .j-text-size2 {
    font-size: 2.0rem;
  }
  .j-text-size2b {
    font-size: 2.1rem;
    font-weight: 500;
  }
  .j-text-size3 {
    /* Used for text on date tabs on New Poll page Step 2 */
    font-size: 1rem;
  }
  .j-text-size4 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 1rem;
  }
  .j-text-size4b {
    /* Used to display the client name in DE cells on the My Bookings page */
    font-size: 0.9rem;
  }
  .j-text-size4Btn {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 1rem;
  }
  .j-text-size5 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 0.8rem;
  }
  .j-text-size5Btn {
    /* Blue btns on the Account page */
    font-size: 1.000rem;
  }
  .j-text-size6 {
    /* Used for the time text in the Diary section of the New Poll page Step 2 */
    font-size: 16px;
  }
  .j-text-size7 {
    /* E.g. used for the page title text on each page */
    font-size: 20px;
  }
  .j-text-size7b {
    /* E.g. used for the page title text on each page */
    font-size: 20px;
  }
  .j-text-size7c {
    /* E.g. used for the page title text on each page */
    font-size: 18px;
  }
  .j-text-size8 {
    /* E.g. used for the tip text in some cases */
    font-size: 16px;
  }
  .j-text-size9 {
    /* E.g. used for pricing & features page headings */
    font-size: 2.4rem;
  }
  .j-npleft-ml {
    /* "np" refers to New Poll page, "left" refers to left panel on XL screens */
    margin-left: 25px;
  }
  .j-npleft-mr {
    margin-right: 0px;
  }

  .j-npright-ml {
    /* "np" refers to New Poll page, "right" refers to right panel on XL screens */
    margin-left: 0px;
  }
  .j-npright-mr {
    margin-right: 45px;
  }
  .j-npBtn-ml { /* Buttons like 'Return to Step 1' and the Tutorial button on new Poll page, Step 2 & 3 had alignment issues */
    margin-left: 0px;
  }

  .j-bmTabs-mlr {/* Handles left & right margins of tabbed headings on Book Me page */
    margin-left: 0px;
    margin-right: 0px;
  }

  .j-menuPage-mlr { /* Handles left & right margins of the Menu page's display */
    margin-left: -6px;
    margin-right: 0px;
  }

  .hideWeekNumSwitch {
    display: block;
  }

  /* Styling of the grey background panels for the panels on the New Poll page */
  .panel-np1 {
    min-height: 655px;
    border: 2px solid #bcbdb9;
    border-radius: 1.2rem;
  }
  .panel-np2 {
    min-height: 655px;
    border-radius: 1.2rem;
  }
  /* Styling of the grey background panels for the panels on the New Poll page: 'b' version uses blue border as experiment */
  .panel-np1b {
    min-height: 685px;
    border: 1px solid #ced4da;
    border-radius: 1.2rem;
  }
  .panel-np2b {
    min-height: 685px;
    border-radius: 1.2rem;
    border: 1px solid #ced4da;
  }

  .dateBTR {
    /* to make date tabs look like rounded-corner tabs on New Poll page Step 2 */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .j-select2 {
    height: 1.6em;
    width: 3.5em;
    color: #1c78a0;
    display: inline;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
  }

  /* Used for date format select box on Poll Dashboard page */
  .j-select3 {
    height: 1.6rem;
    /* width: 3.5rem; */
    color: #1c78a0;
    display: inline;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
  }
  /* my-booking page, Calendar View, the 'weekends' switch that shows / hides weekend dates, it needs some padding for the label to align */
  .mbWeekendLabel {
    padding-top: 0px;
    padding-bottom: 1px;
  }
  /* MY BOOKINGS page, dotted background to booked Booking Slots */
  .pattern-dots-light {
    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(10 * 1px) calc(10 * 1px);
  }
}

/* Media query to handle grid on the My Bookings page in the modal to manually accept bookings. mbMcModalGrid = my bookings manual confirmation modal grid */
@media (min-width: 0px) {
  .mbMcModalGrid {
    grid-template-columns: 52fr 58fr;
  }
  .mbMcRbP { /* padding to keep label text inline with the radio btn */
    padding-top: 2px;
  }
}
@media (min-width: 350px) {
  .mbMcModalGrid {
    grid-template-columns: 45fr 65fr;
  }
}
@media (min-width: 400px) {
  .mbMcModalGrid {
    grid-template-columns: 40fr 70fr;
  }
}
@media (min-width: 500px) {
  .mbMcModalGrid {
    grid-template-columns: 35fr 75fr;
  }
}
@media (min-width: 576px) { /* s */
  .mbMcModalGrid {
    grid-template-columns: 35fr 75fr;
  }
  .mbMcRbP { /* padding to keep label text inline with the radio btn */
    padding-top: 1px;
  }
}
@media (min-width: 768px) { /* md */
  .mbMcModalGrid {
    grid-template-columns: 35fr 75fr;
  }
  .mbMcRbP { /* padding to keep label text inline with the radio btn */
    padding-top: 0px;
  }
} /* End of media queries for My Bookings page's Manual Confirmation modal */

/* Set border for interactions. Class itself is defined inside the media queries */
.j-select2:hover,.j-select2:focus {
  border: 2px solid #1c78a0;
}
.j-select2:active {
  border: 2px solid #1c78a0;
}

/* Control styles on Settings Page */
.clickable {
  cursor: pointer; /* Clickable hand icon */
}

/* Homepage */

/* Control image on homepage to ensure it does not go bigger than its own pixel width */
.j-image-1 {
  max-width: 630px;
  margin: auto;
}

/* For 'See how this works' links on homepage */
.j-video-link {
    color: #1c78a0;
    display: inline-block;
    cursor: pointer;
    transition:
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.j-video-link:hover {
    color: #0e4c66;
    transform: scale(1.04);
}
.j-video-link:focus {
    outline: none;
    color: #0e4c66;
    transform: scale(1.04);
}

.j-video-duration {
    font-size: 0.85rem;
    opacity: 0.7;
    position: relative;
    top: 1px;
    margin-left: 2px;
}

/* Panels on homepage */
.featureDiv1 {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.featureDiv1:hover, .featureDiv1:focus {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* ***** Set the pixel height of elements **************************************************** */
.j_h200px {
  height: 200px;
}

.j_h150px {
  height: 150px;
}

.j_h100px {
  height: 100px;
}

.j_h90px {
  height: 90px;
}

.j_h80px {
  height: 80px;
}

.j_h70px {
  height: 70px;
}

.j_h60px {
  height: 60px;
}

.j_h50px {
  height: 50px;
}

.j_h40px {
  height: 40px;
}

.j_h30px {
  height: 30px;
}

.j_h20px {
  height: 20px;
}

.j_h10px {
  height: 10px;
}

/****** VALIDATION RELATED *******************************************************/

/*
Set background colour of the <input> boxes to a pale red on forms where the info entered is considered invalid
The class .was-validated is only added to the <form> tag after you press login
The pseudo classes for valid and invalid input are also then added
This counts as the line where my own class .invalid-bgc gets declared
*/
.was-validated .invalid-bgc:invalid {
  background-color: #f1e3de;
}

/* ****************************************************************************************
Position the cross and tick icons used for valid or invalid feedback on the login form, perhaps any form?
Note that it relies on there being feedback text printed on a line after the <input> box and then the icon is positioned relative to that line, e.g. the bottom line says to put a margin of x px below teh icon, thereby moving it up to the line above and making it look like it is actually inside the input box.
If no text is printed, it will not correctly position so, even if you want no feedback text, at the very least, put an nbsp; on the text feedback line
*/
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
  position: absolute;
  width: auto;
  bottom: 26px;
  right: 10px;
  margin-top: 0;
}

/* Specify a size to be used for Iconify icons. This was first done for the cross and tick on the login page */
.iconify-lg {
  width: 24px;
  height: 24px;
}
/* **************************************************************************************** */

/* CSS for the Password Reset Plugin */

/* Adjust bottom margin of the error / alert message in Password reset plugin from 50px to 25 px */
.pwResetFormBMargin {
  margin-bottom: 20px !important;
}

/* Envelope icon for use in email <input> tags */
.jw-icon-mail {
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("https://api.iconify.design/feather:mail.svg?color=%231c78a0");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Padlock icon for use in password <input> tags */
.jw-icon-pw {
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("https://api.iconify.design/feather:lock.svg?color=%231c78a0");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Input box grey bgc on hover & focus */
.inputBGC {
  background-color: white;
}
.inputBGC:hover, .inputBGC:focus {
  background-color: #EBEBEB;
}

/* New Poll Page - Step 1 Inputs & textareas */
.npS1WrapperLeft {
  /* background-color: white; */
  border-radius: 14px;
}

.np-input1 {
  border: 1px solid #ced4da;
  border-radius: 0.5em;
}

/***** NEW POLL PAGE - CLASSES FOR STEP 2 *******************************************************  */

/* Handle the grid layout of the date tabs */

.scrollBarOuter {
  border: 1px solid #1c78a0;
  margin-bottom: 0.35rem;
  height: 15px;
  border-radius: 6px;
  padding: 1px 2px;
}
.scrollBarOuter:hover,.scrollBarOuter:focus,.scrollBarOuter:active {
  border: 2px solid #1ac051;
}

.scrollBarOuter:hover > div:first-child { /* When you hover over the outer div, it changes bgc of the inner div */
  background-color: #1ac051;
}
.scrollBarOuter:active > div:first-child {
  background-color: #1ac051;
}
.scrollBarOuter:focus > div:first-child {
  background-color: #1ac051;
}

.scrollBarInner {
  background-color: #1c78a0;
  height: 100%;
  border-radius: 6px;
  touch-action: none;
  user-select: none;
}

.firstDayTabML {
  /* The left hand Day Tab needs a zero left margin to ensure alignment with the diary grid below */
  margin-left: 0.0em !important;
}
.lastDayTabMR {
  /* The left hand Day Tab needs a zero right margin to ensure alignment with the diary grid below */
  margin-right: 0.0em !important;
}

.dateALActive {
  /* Arrow Left */
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  color: #1c78a0;
}
.dateALActive:hover {
  background-color: #f4f5ef;
  color: #1ac051;
  border-radius: 50%;
}
.dateALActive:active,.dateALActive:focus {
  border-radius: 50%;
  color: #1ac051;
  background-color: #ebebeb;
}

.dateALInactive {
  /* Arrow Left */
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  color: #a9a9a9;
  cursor: text !important; /* Usual cursor, not the clickable hand icon */
}

.dateARActive {
  /* Arrow Right, grid-column-start & end handled dynamically */
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  color: #1c78a0;
  cursor: pointer;
}
.dateARActive:hover {
  background-color: #f4f5ef;
  color: #1ac051;
  border-radius: 50%;
}
.dateARActive:focus {
  border-radius: 50%;
  color: #1ac051;
  background-color: #ebebeb;
}
.dateARActive:active {
  border-radius: 50%;
  color: #1ac051;
  background-color: #ebebeb;
}

.dateARInactive {
  /* Arrow Right, grid-column-start & end handled dynamically */
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  color: #a9a9a9;
  cursor: text !important; /* Usual cursor, not the clickable hand icon */
}

/* 'Go To Today' link text (appears as overlay on TSO section when active day < today) & 'Go To Today' icon: Bookings Setup Page, Calendar Set Up tab, Step 2 */
.csuGoToToday {
  color: #1c78a0;
  cursor: pointer;
}
.csuGoToToday:hover, .csuGoToToday:focus {
  color: #1ac051;
}
.csuGoToToday:active {
  color: #1c78a0;
}
.csuGoToTodayInactive {
  color: #a9a9a9;
}

/* Handle styling of the date tabs */

.dateActive { /* The current, active day tab */
  background-color: #1c78a0;
  color: white;
  text-align: center;
  margin-left: 0.15em;
  margin-right: 0.15em;
  pointer-events: none
}

.dateNotActive { /* Any day tab that is not the current, active day */
  background-color: #ebebeb;
  text-align: center;
  color: #a9a9a9;
  border: white solid 1px;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  margin-left: 0.15em;
  margin-right: 0.15em;
  cursor: pointer;
}
.dateNotActive:hover,.dateNotActive:focus {
  background-color: white;
  text-align: center;
  color: #1c78a0;
  border: #1c78a0 solid 1px;
  cursor: pointer;
}
.dateNotActive:active {
  background-color: #1c78a0;
  text-align: center;
  color: white;
  border: #1c78a0 solid 1px;
  cursor: pointer;
}

.dayTabMyBooking { /* The week day tabs on the my-booking page */
  /* border: 2px solid #1c78a0; */
  border-left: 2px solid #1c78a0;
  border-right: 2px solid #1c78a0;
  border-top: 2px solid #1c78a0;
  background-color: white;
  color: #1c78a0;
  text-align: center;
  margin-left: 3px;
  margin-right: 3px;
}

.dayTabMyBookingWeekend { /* The weekend day tabs on the my-booking page */
  border-left: 2px solid #1c78a0;
  border-right: 2px solid #1c78a0;
  border-top: 2px solid #1c78a0;
  background-color: white;
  color: #1c78a0;
  text-align: center;
  margin-left: 3px;
  margin-right: 3px;
}

/* The DE divs on the MY-BOOKING page that ARE NOT BOOKED. Note over-ride of margin-left for DEs in first column using .deDivLeftColOne */
.deDivsMyBookingUnbooked {
  border: 1px solid #c9ced3; /* a dark grey */
  /* border: 2px dotted #00C893; a bright green */
  border-radius: 4px;
  background-color:#EFEFEF;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
  margin-left: 3px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.deDivsMyBookingUnbooked:hover, .deDivsMyBookingUnbooked:focus {
  background-color:#FAFAFA;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
 .deDivsMyBookingUnbooked:active {
  background-color: #DEDEDE;   /* darker than hover */
  border-color: #b0b0b0;       /* slightly stronger border */
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.12);
}
/* Same as previous style but for the legend on the My Bookings page, needed to prevent an event appearing on the legend div, i.e. the event that runs when an unbooked BS is clicked on the main grid */
.deDivsMyBookingUnbookedLegend {
  border: 1px solid #c9ced3; /* a dark grey */
  /* border: 2px dotted #00C893; a bright green */
  border-radius: 3px;
  background-color:#EFEFEF;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
  margin-left: 3px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.deDivsMyBookingSelected { /* Green shading for when a Booking Slot (DE) is selected on the make-a-booking page */
  border: 2px solid #00C893; /* a bright green */
  background-color: #00C893;
}

/* The DE divs on the MY-BOOKING page that ARE BOOKED & the booking has been CONFIRMED. Note over-ride of margin-left for DEs in first column using .deDivLeftColOne. This class gets used in conjunction with .pattern-dots-light which is in the media query section and puts a dotted background to the DE divs */
.deDivsMyBookingsBookedConfirmed {
  border: 1px solid #6596C0;
  border-radius: 4px;
  background-color: white;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
  color: #6596C0;
  margin-left: 3px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding-top: 4px;
  padding-bottom: 4px;
  cursor: pointer;
}
.deDivsMyBookingsBookedConfirmed:hover, .deDivsMyBookingsBookedConfirmed:focus {
  /* border: 1px solid #00C893; */
  /* background-color: #9ec9e8; */
  background-color: #eef7fc; /* subtle blue tint */
  border-color: #5a8ab3;     /* slightly darker blue */
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.deDivsMyBookingsBookedConfirmed:active {
  background-color: #cfe3f2;   /* more noticeable */
  border-color: #4a7399;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.12);
}
.deDivsMyBookingsBookedConfirmedLegend {
  border: 1px solid #6596C0;
  border-radius: 4px;
  background-color: white;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
  color: #6596C0;
  margin-left: 3px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding-bottom: 4px;
}
/* Same page as previous classes (MY BOOKINGS) but for DEs that are booked but NOT YET CONFIRMED - styling redone 2026-05, see below */
 .deDivsMyBookingsBookedNotConfirmed {
  border: 1px solid #f97824;
  border-radius: 4px;
  background-color: white;
  color: #f97824;
  margin: 1px 2px 1px 3px;
  padding: 4px 0;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.deDivsMyBookingsBookedNotConfirmed:hover, .deDivsMyBookingsBookedNotConfirmed:focus {
  background-color: #ffe9d6;   /* softer, modern hover tint */
  border-color: #e56f20;       /* slightly darker orange */
}
.deDivsMyBookingsBookedNotConfirmed:active {
  background-color: #ffd8b8;   /* noticeable but not loud */
  border-color: #cc621c;       /* stronger pressed state */
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.12);
}
.deDivsMyBookingsBookedNotConfirmedLegend {
  border: 1px solid #f97824;
  border-radius: 4px;
  background-color: white;
  color: #f97824;
  margin: 1px 2px 1px 3px;
  padding-bottom: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
}
.legendPadding {
  padding: 4px 2px 4px 2px;
}
/* My Bookings page, modal for manual approval of bookings, list of BS awaiting manual approval, adds dots to end of person's name */
.overflowEllipsis {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
/* My Bookings page, modal for manual confirmation of BS, the div that the selected BS' details appear in */
.mbBsDetailsDiv { /* Sets the outer grey border to the parent div */
  border: 1px solid #ebebeb;
  border-radius: 0.2em;
}
.mbBsDetailsDate { /* The date & time div */
  background-color: #f4f5ef;
  border-bottom: 1px solid #ebebeb;
}
.searchBsDetailsDate { /* Same div but in the main search modal on the MB page - The date & time div */
  background-color: #d8f7d8;
  border-bottom: 1px solid #ebebeb;
}
.searchBsDetailsDiv { /* Same div but in the main search modal on the MB page - The date & time div */
  border: 1px solid #D2DFDF;
  border-radius: 0.2em;
}
.mcConfDiv0 { /* The div containing the Accept / Decline radio btns & Confirmation Btn, default has this green border before a radio btn is selected */
  border: 2px solid #1ac051;
  border-radius: 0.4em;
  /* background-color: #A7ECAE; */
}
.mcConfDiv1 { /* The div containing the Accept / Decline radio btns & Confirmation Btn, once a radio btn is selected, the border colour changes */
  border: 1px solid #1c78a0;
  border-radius: 0.2em;
}

/* My Bookings page, in the Manual Confirmation modal, the BACK button */
.mcModalBackBtn {
  color: #1ac051;
  background-color: white;
  border: 1px solid #1ac051;
  padding: 5px 10px 5px 10px;
  border-bottom-left-radius: 18px;
  border-top-left-radius: 18px;
  margin: 0px 4px 6px 0px;
}
.mcModalBackBtn:hover, .mcModalBackBtn:focus {
  color: white;
  background-color: #1ac051;
}
.mcModalBackBtn:active {
  color: #1ac051;
  background-color: white;
}

/* My Bookings page, gives grey bgc & border radius to parent divs */
.j-txtDiv1 {
  background-color: #f8f8f8; /* A very light grey */
  border-radius: 0.2em;
}

/* The DE divs on the MAKE-A-BOOKING page. Note over-ride of margin-left for DEs in first column using .deDivLeftColOne */
.deDivsMakeABooking {
  border: 2px solid #bcbdb9; /* a dark grey */
  /* border: 2px dotted #00C893; a bright green */
  border-radius: 4px;
  background-color: white;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding-bottom: 4px;
}
/* .deDivsMakeABooking:hover, .deDivsMakeABooking:focus { */
  .deDivsMakeABooking:hover {
  border: 3px solid #83C5B3; /* a dark green */
  cursor: pointer;
}
/* Same as .deDivsMakeABooking but without the hover effect */
.deDivsMakeABookingNoHover {
  border: 2px solid #bcbdb9; /* a dark grey */
  /* border: 2px dotted #00C893; a bright green */
  border-radius: 4px;
  background-color: white;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding-bottom: 4px;
}

/* Three classes, one each for the 3 Booking Status values 'available', 'pending' & 'booked' + a 4th 'Extra' class that get used alongside the others, used on the key at the bottom of the /make-a-booking/ page to show what the different DE stylings mean */
.deMabAvailable { /* Green shading for when a Booking Slot (DE) is selected on the make-a-booking page */
  border: 2px solid #bcbdb9; /* a dark grey */
  background-color: #f8f8f8; /*  THE WORDING ON THE PAGE SAID 'CLICK GREY BLOCKS' BUT THIS VALUE WAS 'white'?! I CHANGED IT TO  A LIGHT GREY */
}
.deMabPending { /* Green shading for when a Booking Slot (DE) is selected on the make-a-booking page. background-image from https://heropatterns.com/ */
  border: 2px solid #00C893; /* a bright green */
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2300c893' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.deMabBooked { /* Green shading for when a Booking Slot (DE) is selected on the make-a-booking page */
  border: 2px solid #00C893; /* a bright green */
  background-color: #00C893;
}
.deMabFailed { /* Red outline for when a Booking Slot (DE) booking step failed for this particular BS on the make-a-booking page */
  border: 2px solid #f05d1f; /* same as used for errors */
  background-color: white;
}
.deMabExtra {
  border-radius: 4px;
  padding: 2px 2px 4px 2px;
  /* padding: 3px 10px px 10px; */
  height: 2.5em;
}
.deDivLeftColOne {
  margin-left: 0 !important;
}

/* Make A Booking page, the row divs for each BT's stats that get displayed below the booking status key divs, only displayed if >1 BT in the BL */
.bStatsRow {
  border: 1px solid #ebebeb; /* Lightish grey */
}
.bStatsRowShading { /* Only the row of the selected BT gets shaded (assumes >1 BT on the BL, if only 1 BT, these extra rows don't display */
  background-color: #F4F7F2;
  border-top: 2px solid #ced4da;
  border-bottom: 2px solid #ced4da;
}
.bStatsRowLB { /* Adds left border to the selected BT row */
  border-left: 2px solid #ced4da;
}
.bStatsRowRB { /* Adds right border to the selected BT row */
  border-right: 2px solid #ced4da;
}

/* Bookings Setup page - input field classes to enable / disable border & hover effects when not editing input fields */
.bm-inputNotEdit {
  border: none;
  border-radius: 0.5em;
  color: #A9A9A9;
  resize: none;
}
.bm-inputEdit {
  border: 1px solid #ced4da;
  border-radius: 0.5em;
  resize: vertical;
}
.bm-inputEdit:hover {
  background-color: #EBEBEB;
}

/* Email Icon divs on the my-booking page */
.emailIconLeftSide {
  margin-left: 0px;
  /* border-left: 1px dashed #bcbdb9; */
}
.emailIconRightSide {
  margin-right: 3px;
  /* border-right: 1px dashed #bcbdb9; */
}

/* Styling of the vertical columns on the My Booking page that sit in the day tab columns, behind the DEs */
.myBookingDayColsLeftSide {
  border-left: 1px dashed #1c78a0;
  /* border-right: 1px dashed #A9A9A9; */
  margin-top: 5px;
  margin-bottom: 2px;
}
.myBookingDayColsRightSide {
  border-right: 1px dashed #1c78a0;
}
.nowrap {
  white-space: nowrap;
}

/* Wrapper div for the Weekends switch's div on the my-booking page, set border */
/* Set margins of the row on the My Bookings page that contains the 'Accept Manual Bookings' icon and Weekend switch */
.mbDataRow1 {
  margin-top: 0.7em;
  margin-bottom: 0.5em;
  height: 2.3em;
}
.mbWeekendSwitchDiv {
  border: 1px solid #1c78a0;
  border-radius: 1em;
}
/* Used with the 'Accept Manual Booking' & 'Search' icons on My Bookings page */
/* .ambIcon { */
  /* Used for hover effect to make icon slightly larger when hovered over */
/* } */
.ambIcon:hover, .ambIcon:focus {
  width: 2.1em; /* data-width and data-height are set as 2.0em on the icon span */
  height: 2.1em;
}

/* Wrapper div for the "Email me my votes" switch's div on the Poll Voting page */
.pvEmailVotesSwitchDiv {
  border: 1px solid #ced4da;
  border-radius: 0.75em;
}
.pvEmailVotesSwitchDiv:hover {
  background-color: #EBEBEB;
}

/* Styling of the Day Diary section */
.timeEarlier {
  background-color: white;
  color: #1c78a0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 2px;
  border-radius: 50%;
}
.timeEarlier:hover,.timeEarlier:focus,.timeEarlier:active {
  color: #1ac051;
}

.timeLater {
  background-color: white;
  color: #1c78a0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 2px;
  border-radius: 50%;
}
.timeLater:hover,.timeLater:focus,.timeLater:active {
  color: #1ac051;
}

.time {
  background-color: white;
  text-align: center;
  border-top: 2px solid #bcbdb9;
}

/* For the 12/th of an hour Diary Section diary rows */
.diaryTimeTrack00 {
  background-color: white;
  border-top: 2px solid #bcbdb9;
  /* height: 0.25em; */
}
.diaryTimeTrackPlain {
  background-color: white;
  /* height: 0.25em; */
}
.diaryTimeTrack30 {
  background-color: white;
  border-top: 1px dashed #bcbdb9;
  /* height: 0.25em; */
}

/* For the 1/12th of an hour Time Slot section diary rows */
.timeSlotTimeTrack00 {
  border-top: 2px solid #bcbdb9;
  padding-top: 2px;
  padding-bottom: 1px;
}

/* Dummy class to allow removal of time divs from the Diary section when resetting the start & end times of the diary in New Poll, Step 2 c4Diary section */
.diaryRow {
  /* Dummy class for now */
  opacity: 1;
}
/* Dummy class to allow removal of time divs from the Time Slot section when resetting the start & end times of the diary in New Poll, Step 2 c4Diary section as well as when re-displaying the time slot option divs*/
.tsRow {
  /* Dummy class for now */
  opacity: 1;
}

/* The c4Diary section on the New Poll page */
.c4Diary {
  border-left: 2px solid #1c78a0;
  border-right: 2px solid #1c78a0;
  border-bottom: 2px solid #1c78a0;
  border-top: 8px solid #1c78a0;
  border-top-right-radius: 0.2rem;
  border-top-left-radius: 0.2rem;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
/* The c4Diary section on the My Bookings page */
.c4DiaryMB {
  border-left: 3px solid #1c78a0;
  border-right: 3px solid #1c78a0;
  border-bottom: 3px solid #1c78a0;
  border-top: 2px solid #1c78a0;
  border-radius: 0.5em;
}

/* For a time option div that HAS NOT yet been selected, i.e. it appears under the timeSlotOptions section and is available to be selected */
.timeSlotOptionAvail {
  color: #1ac051; /* Used to be #1c78a0 */
  background-color: white;
  text-align: center;
  border: 2px solid #1ac051; /* Used to be #1c78a0 */
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  cursor: pointer;
  margin-bottom: 1px;
}
.timeSlotOptionAvail:hover,.timeSlotOptionAvail:focus {
  color: white;
  background-color: #1ac051;
  /* border-color: #1ac051; */
}

.timeSlotOptionAvail:active {
  color: #1ac051;
  background-color: white;
}
/* For a timeslot option div that HAS been selected, i.e. it still appears under the timeSlotOptions section but is NO LONGER available to be selected */
/* .timeSlotOptionNotAvail {
  color: white;
  background-color: #6596c0;
  text-align: center;
  border: 1px solid #bcbdb9;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  /* margin-bottom: 1px; */
/* } */
.timeSlotOptionNotAvail {
  color: #6596c0;
  background-color: white;
  text-align: center;
  border: 1px solid #6596c0;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  margin-bottom: 1px;
  cursor: default !important;
}

/* For a time option div that HAS NOT yet been selected but OVER-LAPS with a selected TSO (i.e. a DE), so it still appears under the timeSlotOptions section and is available to be selected. In this case the Overlaps switch is ON and so it displays with the red border, white fill and red text */
.timeSlotOptionAvailOL {
  color: #f05d1f;
  background-color: white;
  text-align: center;
  border: 1px solid #f05d1f;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  cursor: pointer;
  margin-bottom: 1px;
}
.timeSlotOptionAvailOL:hover,.timeSlotOptionAvailOL:focus {
  /* color: white;
  background-color: #1c78a0; */
  border: 1px solid #1ac051;
}
.timeSlotOptionAvailOL:active {
  color: #1c78a0;
  background-color: white;
  outline: 1px solid #1c78a0;
}

/* For a time option div that HAS NOT yet been selected but OVER-LAPS with a selected TSO (i.e. a DE), so it still appears under the timeSlotOptions section and is available to be selected. In this case the Overlaps switch is OFF and so it displays with the grey border, white fill and grey text. There are no hover effects needed, just a change in tooltip text. */
.timeSlotOptionAvailOL2 {
  color: #ced4da;
  background-color: white;
  text-align: center;
  border: 1px solid #ced4da;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  margin-bottom: 1px;
  cursor: default !important;
}

/* **************************** Start of classes for the TSO divs used as a legend for the TSO section on the New Poll & Book Me Page ********* */

/* For use in the legend at the bottom of the TSO section: For a time option div that HAS NOT yet been selected, i.e. it appears under the timeSlotOptions section and is available to be selected */
.tsoAvail {
  color: #1ac051; /* Used to be #1c78a0 */
  background-color: white;
  text-align: center;
  border: 2px solid #1ac051; /* Used to be #1c78a0 */
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  margin-top: 4px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 5px;
}
/* For use in the legend at the bottom of the TSO section: For a time option div that HAS been selected, i.e. it still appears under the timeSlotOptions section but is NO LONGER available to be selected */
/* .tsoNotAvail {
  color: white;
  background-color: #6596c0;
  text-align: center;
  border: 1px solid #6596c0;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  /* margin-top: 4px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 5px; */
/* } */
.tsoNotAvail {
  color: #6596c0;
  background-color: white;
  text-align: center;
  border: 1px solid #6596c0;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  margin-top: 4px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 5px;
}
/* For use in the legend at the bottom of the TSO section: For a time option div that HAS NOT yet been selected but OVER-LAPS with a selected TSO (i.e. a DE), so it still appears under the timeSlotOptions section and is available to be selected. In this case the Overlaps switch is ON and so it displays with the red border, white fill and red text */
.tsoAvailOL {
  color: #f05d1f;
  background-color: white;
  text-align: center;
  border: 1px solid #f05d1f;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  margin-top: 4px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 5px;
}
/* For use in the legend at the bottom of the TSO section: For a time option div that HAS NOT yet been selected but OVER-LAPS with a selected TSO (i.e. a DE), so it still appears under the timeSlotOptions section and is available to be selected. In this case the Overlaps switch is OFF and so it displays with the grey border, white fill and grey text. There are no hover effects needed, just a change in tooltip text. */
.tsoAvailOL2 {
  color: #ced4da;
  background-color: white;
  text-align: center;
  border: 1px solid #ced4da;
  display: inline-block;
  border-radius: 4px;
  padding: 0.00rem 0.2rem 0.00rem 0.2rem; /* TRBL */
  margin-top: 4px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 5px;
}
/* **************************** End of classes for the TSO divs used as a legend for the TSO section on the New Poll & Book Me Page ***************** */


/* **************************** Start of classes for the PMT divs used as a legend for the PMT section on the New Poll & Book Me Page ********* */
/* For use in the legend at the bottom of the PMT section: Diary entries, i.e. those added from the list of time slot options. On New Poll page, all DEs display with this style. On the Book me Page, calendar Set Up tab, only DEs of the selected MT display with it (see .diaryEntryNotSelectedMT below for how Book Me page displays DEs of non-selected MTs) */
.dE {
  border: 2px solid #bcbdb9;
  border-radius: 4px;
  background-color: #6596C0;
  color: white;
  text-align: center;
  /* padding: 0.00rem 0.2rem 0.00rem 0.2rem; TRBL */
  margin-top: 4px;
  margin-bottom: 1px;
  /* margin-left: 5px;
  margin-right: 5px; */
}
/* For use in the legend at the bottom of the PMT section: DEs on the Book Me page, Calendar Set Up tab will display with this style if they are not of the selected MT type */
.deNotSelectedMT {
  border: 2px solid #bcbdb9;
  border-radius: 4px;
  background-color: white;
  text-align: center;
  /* padding: 0.00rem 0.2rem 0.00rem 0.2rem; TRBL */
  margin-top: 4px;
  margin-bottom: 1px;
  /* margin-left: 5px;
  margin-right: 5px; */
}

/* **************************** End of classes for the PMT divs used as a legend for the PMT section on the New Poll & Book Me Page ***************** */

/* Diary entries, i.e. those added from the list of time slot options. On New Poll page, all DEs display with this style. On the Book me Page, calendar Set Up tab, only DEs of the selected MT display with it (see .diaryEntryNotSelectedMT below for how Book Me page displays DEs of non-selected MTs) */
.diaryEntry { /* DEs that are saved in the db and are not booked*/
  border: 2px solid #bcbdb9;
  border-radius: 4px;
  background-color: #6596C0;
  color: white;
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: pointer;
}
.diaryEntry:hover,.diaryEntry:focus {
  border: 2px solid #f05d1f;
}
.diaryEntry:active {
  border: 2px solid #f05d1f;
  outline: 2px solid #f05d1f;
}

.diaryEntryBooked { /* DEs that are saved in the db and are booked & confirmed, has no hover type effects as no event gets added */
  border: 2px solid #bcbdb9;
  border-radius: 4px;
  background-color: #6596C0;
  color: white;
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: default !important;
}

.diaryEntryPending { /* DEs that are not yet saved in the db = "pending" (= the field 'dbStatus' in deTimes[]) */
  border: 2px solid #1ac051;
  border-radius: 4px;
  color: #1ac051;
  background-color: white;
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: pointer;
}
.diaryEntryPending:hover,.diaryEntryPending:focus {
  border: 2px solid #f05d1f;
}
.diaryEntryPending:active {
  border: 2px solid #f05d1f;
  outline: 2px solid #f05d1f;
}

.dEPending { /* DEs that are not yet saved in the db = "pending" (= the field 'dbStatus' in deTimes[]) - This is for the index at the bottom of the BS column on the CSU tab, Step 2 */
  border: 2px solid #1ac051;
  border-radius: 4px;
  color: #1ac051;
  background-color: white;
  text-align: center;
  padding: 0rem 0.2rem 0rem 0.2rem;
}

/* DEs on the Book Me page, Calendar Set Up tab will display with this style if they are not of the selected MT type */
.diaryEntryNotSelectedMT {
  border: 2px solid #bcbdb9;
  border-radius: 4px;
  background-color: white;
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: default !important;
}
/* On the Book Me page, Calendar Set Up tab, Step 2, it tells you which MT you are working with, this mimics .diaryEntry */
.bmMtNameDiv {
  color: white;
  border: 2px solid #bcbdb9;
  border-radius: 4px;
  background-color: #6596C0;
  padding: 8px 4px;
}
/* Bookings Set Up page, CSU tab, Step 2 - styling for div that contains the orange booking icon on BS of the selected BT where the BS needs manual confirmation */
.bsuMc {
  background-color: white;
  padding: 1px;
  border-radius: 3px;
  display: inline-block;
}

/* The 'scroll' icon for the Overlap, Cascade & Clone switches */
.switchScroll {
  background-color: white;
  text-align: center;
  padding-top: 2px;
  padding-left: 1px;
  padding-right: 1px;
  border-radius: 50%;
  margin-top: 2px;
}
.switchScroll:hover,.switchScroll:focus,.switchScroll:active {
  color: #1ac051;
}

/* Heading on New Poll page, Step 2 for 'Diary Entries' */
.npS2HeadingDE {
  background-color: white;
  color: #1c78a0;
  border: 2px solid #1c78a0;
  border-radius: 0.5em;
  text-align: center;
  font-weight: bold;
}
/* Heading on New Poll page, Step 2 for 'Time-Slot Options' */
.npS2HeadingTSO {
  background-color: #1c78a0;
  color: white;
  border-radius: 0.5em;
  text-align: center;
  font-weight: bold;
}

/* Aligning a div to be central vertically inside another div using auto top & bottom margins */
.j-center-vertical {
  margin-top: auto;
  margin-bottom: auto;
}

/* Aligning the content of a div to be centred */
.j-center {
  text-align: center;
}

.j-displayNone {
  display: none;
}

.buttonArrows {
  opacity: 1.0; /* Actually not needed, class used to set size of arrow on buttons in New Poll page */
}

.switchScrollIcon {
  opacity: 1.0; /* Opacity setting actually not needed, class is just used to set the size of the icon used to scroll the switches on the New Poll page's Step 2 (Overlap, Clone & Cascade) */
}

/* Title box for New Poll page Step 3 header */
.step3Title {
  background-color: #1c78a0;
  color: white;
  text-align: center;
  border-radius: 0.6rem;
}

/* Wrapper divs for the New Poll page Step 3 option boxes */
.npOptionBoxes {
  border: 1px solid #ced4da;
  border-radius: 0.8rem;
  background-color: white;
}
.npOptionBoxes:hover, .npOptionBoxes:Focus {
  border-color: #1c78a0;
}
.npOptionBoxes:active {
  background-color: #1c78a0;
  color: white;
}

/* New Poll page, Step 3 options, header section of each option box */
.npOptionBoxHeader {
  border: 1px solid #1c78a0;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
  background-color: #1c78a0;
  color: white;
  text-align: center;
  cursor: pointer;
}
/* New Poll page, Step 3 options, content section of each option box */
.npOptionBoxContent {
  border-left: 1px solid #1c78a0;
  border-right: 1px solid #1c78a0;
  border-bottom: 1px solid #1c78a0;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  background-color: white;
  color: #1c78a0;
  display: grid;
  grid-template-columns: 1fr 10fr;
  cursor: pointer;
}

/* Indent for <li>'s to align with TextArea for Email Address entry */
#step3Instructions2 > li {
  margin-left: 1.0rem;
}

/* The TextArea input box on the New Poll page, Step 3 */
.emAdTextArea {
  border: 2px solid #1c78a0;
  background-color: white;
  border-top-left-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem;
}

.emAdTextArea:hover, .emAdTextArea:focus {
  box-shadow: none !important;
  /* background-color: #EBEBEB; */
}

/* The 'Add Email Address' button on New Poll page, Step 3*/
.addEmAd {
  background-color: #1c78a0;
  border: 1px solid #1c78a0;
  border-top-right-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
}
.addEmAd > #button6, .addEmAd > #addEmailIcon {
  color: white;
}

/* The div into which the email address divs get placed on New Poll page in Step 3 */
.emAdWrapper {
  border-radius: 0.8rem;
  border: 2px solid #1ac051;
  /* background-color: #EBEBEB; */
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
}
/* .emAdWrapper {
  border-radius: 0.8rem;
  background-color: #DBE6FB;
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
} */

/* The div into which the email address divs get placed on New Poll page in Step 3 */
.invalidEmAdWrapper {
  border-radius: 0.8rem;
  /* border: 1px solid #FFA95B; */
  background-color: #FFD9AF;
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
}

/* The individual email address divs on the New Poll page, Step 3*/
.emAd {
  /* border: 1px solid #1c78a0; */
  border: 1px solid #1c78a0;
  border-radius: 0.5rem;
  background-color: white;
  color: #1c78a0;
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  margin-right: 0.2rem;
  margin-top: 0.3rem;
  cursor: pointer;
}
.emAd:hover, .emAd:focus {
  border: 1px solid #f05d1f;
  background-color: #f05d1f;
  color: white;
}
.emAd:active {
  border: 1px solid #f05d1f;
  background-color: white;
  color: #f05d1f;
}

.numEmAd {
  background-color: white;
  padding: 0rem 0.4rem 0rem 0.4rem;
  border-radius: 50%;
  color: #1ac051;
}

/* The div into which the error messages get placed on New Poll page in Step 3 */
.pollMessageWrapper {
  border-radius: 0.8rem;
  border: 1px solid #f05d1f;
  color: #f05d1f;
  background-color: white;
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
}

/* Used to wrap long email addresses on smaller screen sizes on New Poll page, Step 3 */
.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  /* word-break: break-all; */
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  /* -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; */
}

/* Grey bg for email on New Poll page Step 3 'Send Emails' */
.emailBg {
  /* background-color: #ebebeb; */
  border-radius: 0.8rem;
}

/* Makes the div that the default email message on New Poll Step 3 look like what a TEXTAREA element would look like */
.emMessage1 {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  display: block;
  width: 100%;
  border: 1px solid #ced4da;
  background-color: white;
  overflow: auto;
  text-align: left;
}
/* The horizontal line appearing in the email */
.emailLine {
  color: #1c78a0;
}

/* email icon for when people click to send an auto-generated email */
.emailIcon {
  padding-bottom: 2px;
  line-height:1.8rem;
  color: #1c78a0
}
.emailIcon:hover, .emailIcon:focus {
  color: #1ac051;
}

/* Wrapper divs for the Options section on the New Poll page, Step 3 */
.optionDivs1 {
  /* border: 1px solid #f4f5ef; */
  border-radius: 1rem;
  /* background-color: #f4f5ef; */
  background-color: white;
  /* border: 1px solid #bcbdb9; */
  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; #77 from https://getcssscan.com/css-box-shadow-examples */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.optionDivs1:hover, .optionDivs1:focus {
  /* border: 1px solid #1c78a0; */
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
.optionDivs2 {
  /* border: 1px solid #f4f5ef; */
  border-radius: 1rem;
  /* background-color: #f4f5ef; */
  background-color: white;
  /* border: 1px solid #bcbdb9; */
  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; #77 from https://getcssscan.com/css-box-shadow-examples */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.optionDivs2:hover, .optionDivs2:focus {
  /* border: 1px solid #1c78a0; */
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
/* Used for the 6 identity-display switches (Poll Step 3 "Display on Poll Voting Page", Booking Type "Display on Booking Page"). CSS grid instead of flex-wrap so every switch occupies an equal-width column and rows stay aligned left-to-right regardless of label text length (e.g. "Company Name" vs "Role"). Fixed column counts (not auto-fill/minmax) since auto-fill was collapsing to 1 column even at full laptop width inside this card's actual rendered width. */
.j-identitySwitchGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
@media (min-width: 768px) { /* md */
  .j-identitySwitchGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Light grey background boxes in Admin section */
.adminBox1 {
  background-color: #F1F5FE;
  border-radius: 1rem;
}

/* Used on /sh01/ for the table but not specific to that page */
td, th {
  border: 1px solid #999;
  padding: 0.5rem;
}

/* MENU PAGE, 'mPS' = Menu page Selector = the boxes you click to go to your chosen page*/

.mPSHeader { /* for options available to everyone */
  background-color: #1c78a0;
  color: white;
  text-align: center;
  border-top-left-radius: 1.0rem;
  border-top-right-radius: 1.0rem;
}
.mPSHeaderAdmin { /* for options available to admin */
  background-color: #9437ff;
  color: white;
  text-align: center;
  border-top-left-radius: 1.0rem;
  border-top-right-radius: 1.0rem;
}
.mPSIcon {
  background-color: white;
  color: #1c78a0;
  text-align: center;
  border-top: 1px solid #1c78a0;
  border-left: 1px solid #1c78a0;
  border-right: 1px solid #1c78a0;
}
.mPSIconAdmin {
  background-color: white;
  color: #9437ff;
  text-align: center;
  border-top: 1px solid #9437ff;
  border-left: 1px solid #9437ff;
  border-right: 1px solid #9437ff;
}
.mPSText {
  background-color: white;
  color: #1c78a0;
  text-align: center;
  border-left: 1px solid #1c78a0;
  border-right: 1px solid #1c78a0;
  border-bottom: 1px solid #1c78a0;
  border-bottom-left-radius: 1.0rem;
  border-bottom-right-radius: 1.0rem;
  /* min-height: 80px; */
}
.mPSTextAdmin {
  background-color: white;
  color: #9437ff;
  text-align: center;
  border-left: 1px solid #9437ff;
  border-right: 1px solid #9437ff;
  border-bottom: 1px solid #9437ff;
  border-bottom-left-radius: 1.0rem;
  border-bottom-right-radius: 1.0rem;
  /* min-height: 80px; */
}

/* Menu Page, the overall button divs */
.menuBtnDivs {
  opacity: 100%;
}
.menuBtnBgc {
  background-color: green !important;
}

/* Menu page, hover effect for main div for each option */
.menuBoxShadow:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  border-top-left-radius: 1.0rem;
  border-top-right-radius: 1.0rem;
  border-bottom-left-radius: 1.0rem;
  border-bottom-right-radius: 1.0rem;
}

/* ************* POLL DASHBOARD PAGE *****************/

/* Title box for the Poll Dashboard page */
.dbHeader0 {
  background-color: #1c78a0;
  color: white;
  text-align: center;
  border-radius: 0.6rem;
  font-weight: bold;
  padding: 0.3rem 0rem;
}

/* Poll Dashboard page, column headings */
.dbHeader1 { /* Wording */
  text-align: center;
  font-weight: bold;
  color: white;
  background-color: #1c78a0;
  border: 1px solid white;
  border-radius: 0.35rem;
  padding-bottom: 3px;
}
/* Following hover & focus states */
.dbHeader1:hover, .dbHeader1:focus {
  /* color: #1c78a0;
  background-color: white; */
  border: 1px solid #1c78a0;
}

/* Poll Dashboard page, individual poll rows */
.pollRows1 {
  background-color: #F1F5FE;
}

/* Scroll setting for Poll Dashboard page's list of previous polls */
.scroll1 {
  overflow-y: scroll;
  height: 400px; /* Do not remove this "height" line of code, it is needed to ensure that the scrollable container for the list of polls (#pollTableRows) has enough vertical room to have the tooltips properly display. The layout seems to prevent them from properly displaying if the list of polls is too short and hence the container displays with too short a height. */
}

/* Poll Dashboard page, sort icons on header section of poll list */
.iconSizingDb1 {
  padding-bottom: 2px;
}
.iconSizingDb1:hover, .iconSizingDb1:focus {
  color:#1ac051;
}

/* Poll Dashboard page, 'Sorting' notice */
.sorting {
  height: 380px;
}

/* Poll Dashboard page, style of poll text that appears in the info modal for a poll */
.pModalText {
  font-style: italic;
}

/* Poll Dashboard page, styling for divs in the poll info modal */
.pollModalDivMajor {
  background-color: #F1F5FE;
  margin-bottom: 0.3rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
}
.pollModalDivMajor2a {
  background-color: #F1F5FE;
  padding: 0.2rem 0.4rem;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  border-top: 1px solid #bcbdb9;
  border-left: 1px solid #bcbdb9;
  border-right: 1px solid #bcbdb9;
  border-bottom: 1px solid #ebebeb;
}
.pollModalDivMajor2b {
  background-color: white;
  margin-bottom: 0.3rem;
  padding: 0.2rem 0.4rem;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  border-left: 1px solid #bcbdb9;
  border-bottom: 1px solid #bcbdb9;
  border-right: 1px solid #bcbdb9;
}
.pollModalDivMinorLeft {
  border-right: solid 0.2rem white;
}
.pollModalDivMinorRight {
  padding-left: 0.4rem;
}
.greenText {
  color: #1ac051;
}

.greenTextDarker1{
  color: #1AA351;
}

.errorMessageText{
  color: #f05d1f;
}
.errorMessageBorder {
  border: 1px solid #f05d1f;
}

.tipText {
  color: #A9A9A9;
}
/* Used to re-style the row of a poll that has just been edited. CURRENTLY NOT USED, RELY ON THE TICK INSTEAD */
/* .editedPoll{
  background-color: #ebebeb;
  color: #1ac051;
} */

/* Poll Dashboard Page - Not actually doing anything style wise, used to enable selection of the checkboxes per poll for deletion purposes */
.pollCheckbox {
  opacity: 100%;
}

/* Poll Dashboard Page - pill that shows number of polls just after the End Date Select box */
.dbPill1 {
  background-color:white;
  color: #4898c2;
  border: 1px solid #4898c2;
}

.modal-body li {
  padding-bottom: 5px;
}

/* Poll Results page, Calendar View, class for the c4Diary area */
.c4DiaryPR {
  /* border-radius: 0.5em; */
  border-left: 3px solid #1c78a0;
  border-right: 3px solid #1c78a0;
  border-bottom: 3px solid #1c78a0;
  border-top: 8px solid #1c78a0;
  border-top-right-radius: 0.2rem;
  border-top-left-radius: 0.2rem;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  margin-bottom: 8px solid #1c78a0;
  margin-right: 4px solid #1c78a0;
  padding: 8px;
}

/* Poll Results page - Not actually doing anything style wise, used to enable selection of the checkboxes in the People Filter Modal */
.voterCheckbox {
  opacity: 100%;
}

/* Poll results page, Table View (tv) section, cells with the DE start & end times in them, changes bgc &, when clicked, opens modal */
.tvDeTimeCellsOuter {
  background-color: #F1F5FE;
  padding: 2px;
}

.tvDeTimeCellsInner {
  height: 2.3rem;
  background-color: #F1F5FE;
  line-height: 95%;
}
.tvDeTimeCellsInner:hover, .tvDeTimeCellsInner:focus {
  background-color: #53E283;
  /* text-decoration: underline; */
  cursor: pointer;
}

.jDivFullHeight {
  height: 100%;
}

/* Poll results page, border for divs around Calendar View & Table View buttons */
.prBtnDivsUnselected { /* Before clicking, i.e. unselected */
  border: 2px solid white;
  border-radius: 1.2rem;
}
.prBtnDivsSelected { /* After clicking, i.e. selected */
  border: 2px dashed #4898c2;
  border-radius: 1.2rem;
}

.pvDetailDivs { /* Used on Poll Voting & Poll Results pages */
  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; #77 from https://getcssscan.com/css-box-shadow-examples */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 8px;
  height: 100%;
}
.pvDetailDivs:hover { /* Used on Book Me page, Calendar Set Up tab */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
/* Make-a-Booking page: bookee identity/header card always shows the (usually hover-only) stronger shadow, with no additional change on hover */
.pvDetailDivsAlwaysShaded {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
}
.pvDetailDivsAlwaysShaded:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
}

.pvDetailDivs2 { /* Used on Book Me page, Calendar Set Up tab */
  /* box-shadow: rgba(0, 0, 0, 0.30) 0px 2px 8px; #77 from https://getcssscan.com/css-box-shadow-examples */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 8px;
  height: 100%;
}
.pvDetailDivs2:hover { /* Used on Book Me page, Calendar Set Up tab */
  /* box-shadow: rgba(0, 0, 0, 0.50) 0px 2px 8px; #77 from https://getcssscan.com/css-box-shadow-examples */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.subTextColor {
  /* color: rgba(0,0,0,.87); */
  color: #484f4f;
}

/* Poll Voting & Poll Results pages, keeps the successive Meeting Detail divs the same height */
@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Colouring of Poll Dashboard page's Trash Can icon: Grey if no polls selected for deletion, reddish if at least one poll is selected */
.inactiveDBTrashCan { /* "inactive" => when the trash cans do not have any numbers next to them (= no DE's) */
  background-color: white;
  color: #a9a9a9;
}
.activeDBTrashCan {
  background-color: white;
  color: #FF5A5F; /* red */
}

/* Not actually doing anything style wise, used to enable tool tips for each pencil icon on the Poll Dashboard page (clicking the pencil icon allows a Quick Edit per poll) */
.eyeIconPDbPage{
  opacity: 100%;
}

/* Poll Dashboard page, poll edit modal, the Poll delete button, when active */
.dbDeleteBtn {
  background-color: #FF5A5F;
  color: white;
  border-color: #FF5A5F;
  border-radius: 1.2rem;
  border-width: 2px;
  line-height: 1.3em;;
}
.dbDeleteBtn:hover, .dbDeleteBtn:focus {
  background-color: white;
  color: #FF5A5F;
}
.dbDeleteBtn:active {
  background-color: #FF5A5F;
  color: white;
}

/* Poll Dashboard page, poll edit modal, the Delete All Votes button, when Active */
.dbDeleteBtn2 {
  background-color: white;
  color: #FF5A5F;
  border-color: #FF5A5F;
  border-radius: 1.2rem;
  border-width: 2px;
}
.dbDeleteBtn2:hover, .dbDeleteBtn2:focus {
  background-color:#FF5A5F;
  color: white;
}
.dbDeleteBtn2:active {
  background-color: white;
  color: #FF5A5F;
}
/* Poll Dashboard page, poll edit modal, the Delete All Votes button, when Inactive */
.dbDeleteBtn2Inactive {
  background-color: white;
  color: #a9a9a9;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}
.dbDeleteBtn2Inactive:hover, .dbDeleteBtn2Inactive:focus, .dbDeleteBtn2Inactive:active {
  background-color: white;
  color: #a9a9a9;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
}
/* BSU page, CSU tab during EDIT BS mode */
.orangeBtn {
  background-color: white;
  color: #f97824;
  border-color: #f97824;
  border-radius: 1.2rem;
  border-width: 2px;
}
.orangeBtn:hover, .orangeBtn:focus {
  background-color:#f97824;
  color: white;
}
.orangeBtn:active {
  background-color: white;
  color: #f97824;
}

/* BSU Page, CSU Tab, Step 2: Stylde of the UPDATE CALENDAR using an SSE icon */
/* .csuCalUpdateIcon { */
  
/* } */
.csuCalUpdateIcon:hover, .csuCalUpdateIcon:focus {
  color: #1ac051;
}
.csuCalUpdateIcon:active {
  font-weight: bold;
}

/* Poll Dashboard page, poll edit modal, the 'Save Without Saving Edits' button */
.dbSWEBtn {
  background-color: white;
  color: #FF5A5F;
  border-color: #FF5A5F;
  border-radius: 1.2rem;
  border-width: 2px;
}
.dbSWEBtn:hover, .dbSWEBtn:focus {
  background-color: #FF5A5F;
  color: white;
}
.dbSWEBtn:active {
  background-color: white;
  color: #FF5A5F;
}

/* Poll Dashboard Page: Close button on the modal window to edit a poll */
.dbCloseButton {
  background-color: white;
  color: #4898c2;
  border-color: #4898c2;
  border-radius: 1.2rem;
  border-width: 2px;
}
.dbCloseButton:hover, .debCloseButton:focus {
  background-color: #4898c2;
  color: white;
}
.dbCloseButton:active {
  background-color: white;
  color: #4898c2;
}

/* Poll Dashboard page:  polls where the end date was yesterday or earlier get styled in this way*/
.expiredPoll {
  opacity: 60%;
}
.openPoll {
  font-weight: 550; /* Normal is 400, Bold is 700 */
}

/* ************************************************************* */
/*  Poll Voting Page (also used on Poll Results page) */

/* Text divs to display meeting name, description, venue & map location */
.pvTextBox {
  background-color: white;
  border-radius: 0.3rem;
}

/* Used to display the poll satisfaction rating info */
.prTextBox {
  background-color: white;
  border-radius: 0.5rem;
}

/* Arrowhead icon to hide show the instructions to vote - THIS IS A REPEAT CLASS, COMMENT OUT FOR NOW */
/* .scroll1 {
  padding-bottom: 2px;
  cursor: pointer;
} */

/* Main, light-grey panel */
.pvPanel{
  /* border: 2px solid #bcbdb9; */
  /* background-color: #f4f5ef; */
  border-radius: 1.2rem;
}

/* Class for the DE's, used to set & remove events */
/* .deDiv { */
  /* opacity: 100%; */
/* } */
.deDivOpacityZero {
  opacity: 0%;
}

/* Poll Voting page, Diary Entry -> 'no' state (used as default) *************************** */
.pvDeNo {
  border: 2px solid #bcbdb9; /* a dark grey */
  border-radius: 4px;
  background-color: #ebebeb; /* a light grey */
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: pointer;
}
.pvDeNo:hover, .pvDeNo:focus {
  border: 3px solid #00CB30; /* a dark green */
}
.pvDeNo:active {
  border: 5px solid #00CB30; /* a dark green */
  /* background-color: #85E898; a pale green */
}

/* Poll Voting page, Diary Entry -> 'yes' state before the 'no' state *************************** */
/* Note that the light green and light blue colours selected for the 'yes' and 'maybe' states were chosen to account for colour blindness */
.pvDeYesB4No {
  border: 2px solid #00CB30; /* a dark green */
  border-radius: 4px;
  background-color: #53E283; /* a pale green */
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: pointer;
}
.pvDeYesB4No:hover, .pvDeYesB4No:focus {
  border: 3px solid #bcbdb9;
}
.pvDeYesB4No:active{
  border: 5px solid #bcbdb9;
  /* background-color: #ebebeb; a light grey */
}

/* Poll Voting page, Diary Entry -> 'yes' state before the 'no' state *************************** */
.pvDeYesB4Maybe {
  border: 2px solid #00CB30; /* a dark green */
  border-radius: 4px;
  background-color: #53E283; /* a pale green */
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: pointer;
}
.pvDeYesB4Maybe:hover, .pvDeYesB4Maybe:focus {
  border: 2px dashed #31C1EB; /* a dark blue */
}
.pvDeYesB4Maybe:active{
  border: 5px dashed #31C1EB; /* a dark blue */
  /* background-color: #83F7E4; Light blue */
}

/* Poll Voting page, Diary Entry -> 'maybe' state *************************** */
.pvDeMaybe {
  border: 2px dashed #31C1EB; /* a dark blue */
  border-radius: 4px;
  background-color: #83F7E4; /* Light blue */
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  cursor: pointer;
}
.pvDeMaybe:hover, .pvDeMaybe:focus {
  border: 3px solid #bcbdb9; /* a dark grey */
}
.pvDeMaybe:active {
  border: 5px solid #bcbdb9;
  /* background-color: #ebebeb; a light grey */
}

/* The 3 coloured pills that tell you how many Diary Entries are in the 3 voting states of no, yes, maybe */
.pillNo {
  /* border: 2px solid #bcbdb9; a dark grey */
  /* border-radius: 10px; */
  background-color: #ebebeb; /* a light grey */
  /* width: 70px; */
  padding: 4px 10px 4px 10px;
  text-align: center;
  margin-top: 4px;
  border-radius: 4px;
}

.pillYes { /* Handles the Yes pill in the Calendar View section */
  /* border: 2px solid #00CB30; a dark green */
  /* border-radius: 10px; */
  background-color: #53E283; /* a light green */
  /* width: 70px; */
  padding: 4px 10px 4px 10px;
  text-align: center;
  margin-top: 4px;
  border-radius: 4px;
  /* text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; */
}
.pillYes2 { /* Handles the Yes pill in the Table View section */
  /* border: 2px solid #00CB30; a dark green */
  /* border-radius: 10px; */
  background-color: #53E283; /* a light green */
  /* width: 70px; */
  padding: 0px 4px 0px 4px;
  text-align: center;
  margin-top: 1px;
  border-radius: 4px;
}

.pillMaybe { /* Handles the Maybe pill in the Calendar View section */
  /* border: 2px dashed #31C1EB; a dark blue */
  /* border-radius: 10px; */
  background-color: #83F7E4; /* Light blue */
  /* width: 70px; */
  padding: 4px 10px 4px 10px;
  text-align: center;
  margin-top: 4px;
  border-radius: 4px;
}
.pillMaybe2 { /* Handles the Maybe pill in the Table View section */
  /* border: 2px solid #31C1EB; a dark blue */
  /* border-radius: 10px; */
  background-color: #83F7E4; /* Light blue */
  /* width: 70px; */
  padding: 0px 4px 0px 4px;
  text-align: center;
  margin-top: 1px;
  border-radius: 4px;
}

/* Poll Results page - The icon of 2 people used to filter Poll Reuslts by voter name */
.peopleFilter {
  color: white;
  background-color: #1ac051;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
  padding: 2px 6px 2px 6px;
  text-align: center;
  margin-top: 4px;
}

.peopleFilter:hover, .peopleFilter:focus {
  color: #1ac051;
  background-color: white;
}

.peopleFilter:active {
  color: white;
  background-color: #1ac051;
}

/* Poll Results page - The div containing the icon of 2 people used to filter Poll Reuslts by voter name */
.peopleFilterDiv { /* In the Calendar View section */
  background-color: white;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}
.peopleFilterDiv2 { /* In the Table View section */
  background-color: white;
  /* text-align: center; */
  /* margin-left: auto;
  margin-right: auto; */
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 4px;
}

/* Used to colour the text during email validation on Poll Voting page */
.emAdValid:focus {
  color: #1c78a0;
}
.emAdNotValid:focus {
  color: #dc3545; /* Red */
}

/* Poll Voting Page: 'Change Timezone' button */
.pvChangeTZBtn {
  background-color: white;
  color: #4898c2;
  border-color: #4898c2;
  border-radius: 1.2rem;
  border-width: 2px;
}
.pvChangeTZBtn:hover, .pvChangeTZBtn:focus {
  background-color: #4898c2;
  color: white;
}
.pvChangeTZBtn:active {
  background-color: white;
  color: #4898c2;
}

/* Poll Voting page, div to control placement of red clock icon for DE's affected by daylight saving changes */
.deDstIconClass {
  text-align: center;
}

/* Poll Voting page, style divs that contain times >24 in the Diary Section */
.after24 {
  font-style: italic;
  background-color: #E9F3D2;
  color: #fd7263;
}

/* Poll Voting page, used to grey-out text of original timezone when a new timezone is selected. Also used on pricing & features page to colour the crosses. */
.greyText {
  color: #bcbdb9;
}

/* Site-wide, all spinners have class shSpinner */
.shSpinner {
  opacity: 1.0;
}

/* Poll Results page - The divs for displaying how many Yes votes on the Poll Results page, used inside each DE */
.yesDiv {
  background-color: #53E283; /* a light green, determined using colour blindness considerations, do not easily change */
  padding: 1px 2px 1px 2px;
  text-align: center;
}

/* Poll Results page -  The divs for displaying how many Maybe votes on the Poll Results page, used inside each DE */
.maybeDiv {
  background-color: #83F7E4; /* Light blue, determined using colour blindness considerations, do not easily change */
  padding: 1px 2px 1px 2px;
  text-align: center;
}

/* Poll Results page - the div that shows a zero if no one voted for a DE */
.noVotesDiv {
  width: 100%;
  padding: 1px 2px 1px 2px;
  text-align: center;
}

/* Poll Results page -  Margins around the yesDiv */
.yesMargins100 {
  margin: 2px;
}
.yesMargins50 {
  margin: 2px;
}

/* Poll Results page -  Margins around the yesDiv */
.maybeMargins100 {
  margin: 2px;
}
.maybeMargins50 {
  margin: 2px;
}

/* Poll Results page, Diary Entry */
.prDe {
  border: 2px solid #bcbdb9; /* a dark grey */
  border-radius: 4px;
  background-color: white;
  margin-left: 3px;
  margin-top: 1px;
  margin-bottom: 0px;
  padding-bottom: 4px;
}
.prDe:hover, .prDe:focus {
  border: 3px solid #00CB30; /* a dark green */
  cursor: pointer;
}

/* Poll Results page, the pill for 'No Votes' (this is none though at this stage) */
.pillNoVotes {
  border: 2px solid #bcbdb9; /* a dark grey */
  /* border-radius: 10px; */
  background-color: white; /* a light grey */
  /* width: 70px; */
  padding: 4px 10px 4px 10px;
  text-align: center;
  margin-top: 4px;
}

/* Poll results page */
.pillMaybeVotes {
  /* border: 2px solid #31C1EB; a dark blue */
  /* border-radius: 10px; */
  background-color: #83F7E4; /* Light blue */
  /* width: 70px; */
  padding: 4px 10px 4px 10px;
  text-align: center;
  margin-top: 4px;
}

/* Poll results page - class to make number of votes display within a circular div */
.voteNumbersCircular {
  border-radius: 50%;
  background-color: white;
  display: inline;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

/* Poll Results Page - divs for where the Voter Names & Diary Entries appear in the table view */
.deWrapperDiv {
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #1c78a0;
  margin-bottom: 8px;
  margin-left: 4px;
}
.names { /* The divs containing the voter names */
  text-align: left;
  height: 2.0rem; /* Must be the same as the height of the DE cells in .tvCells */
  border-left: 1px solid #6596C0;
  border-top: 1px solid #6596C0;
  border-right: 1px solid #6596C0;
}
.tvDateRowHeight { /* Sets the height of the row containing the Date / Day info */
  height: 3.3rem;
}
.tvDeRowHeight { /* Sets the height of the row containing the DE info */
  height: 2.3rem;
  padding-left: 4px;
  padding-right: 4px;
}
.tvDeRowHeight2 { /* Sets the height of the row containing the Vote Summary info */
  height: 2.3rem;
  /* margin-bottom: 1px; */
  border-bottom: 1px solid #6596C0;
  /* padding-left: 4px;
  padding-right: 4px; */
}
.tvDeRowBorderTop {
  border-top: 1px solid #6596C0;
}
.tvNamesTitle {
  /* font-weight: bold; */
  /* background-color: #F1F5FE; */
  /* border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem; */
  border-radius: 0.5rem;
  padding-top: 2px;
  padding-bottom: 2px;
  border: 1px solid #6596C0;
  /* border-left: 1px solid #6596C0;
  border-top: 1px solid #6596C0;
  border-right: 1px solid #6596C0; */
}
.tvCells { /* The individual cells for each DE plotted against the list of voter names */
  height: 2.0rem; /* Must be the same as the height of the voter names cells in .names */
  /* border-right: 1px solid #6596C0; */
  border-top: 1px solid #6596C0;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.tvBottomBorder {
  border-bottom: 1px solid #6596C0;
}
.tvCellsLeftBorderFirstDe {
  margin-left: 4px;
  border-left: 1px solid #6596C0;
}
.tvCellsLeftBorderNotFirstDe {
  border-left: 1px solid #6596C0;
}
.tvDeRowRightBorder {
  border-right: 1px solid #6596C0;
}
.tvDateDivs { /* The divs for the days in Table View */
  background-color: #6596C0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-left: 4px;
  /* margin-right: 4px; */
  /* margin-top: 4px; */
  text-align: center;
  font-weight: 800;
  padding: 2px;
  color: white;
}
.tvVsCells { /* Dummy class used to address only the Vote Summary cells in function plotTvVotes() so these cells can all be removed at the start of that fn */
  opacity: 100%;
}
.tvDeTimeDivs { /* Dummy class used to control the width of the grid column containing the start & end times of the DE's */
  opacity: 100%;
}

/* Poll Results page - The smiley icon button for Poll Satisfaction Rating, ACTIVE */
.satisfactionBtn {
  color:#1ac051;
  background-color: white;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
  padding: 2px 6px 2px 6px;
  text-align: center;
  margin-top: 4px;
}
.satisfactionBtn:hover, .satisfactionBtn:focus {
  color: white;
  /* background-color: #1ac051; */
  background-color: #1ac051;
}
.satisfactionBtn:active {
  color: #1ac051;
  background-color: white;
}
/* Poll Results page - The smiley icon button for Poll Satisfaction Rating, INACTIVE */
.satisfactionBtnInactive {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
  border-radius: 1.2rem;
  border-width: 2px;
  padding: 2px 6px 2px 6px;
  text-align: center;
  margin-top: 4px;
}
.satisfactionBtnInactive:hover, .satisfactionBtnInactive:focus, .satisfactionBtnInactive:active {
  color: #a9a9a9;
  background-color: white;
  border-color: #a9a9a9;
}

.satisfactionBtnInfo {
  color:#1ac051;
  background-color: white;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
  padding: 2px 6px 2px 6px;
  text-align: center;
  margin-top: 4px;
}

.satisfactionBtnInfo:hover, .satisfactionBtnInfo:focus {
  color: #1ac051;
  background-color: white;
}

.satisfactionBtnInfo:active {
  color: #1ac051;
  background-color: white;
}

/* grid-column values for the 3 columns in the ratings table in the Poll Satisfaction Rating modal */
.prRatingC1 {
  grid-column: 1/2;
  text-align: right;
  /* padding: 3px 0px 3px 0px; */
}
.prRatingC2 {
  grid-column: 2/3;
  text-align: right;
  margin-left: 5px;
  /* padding: 3px 0px 3px 0px; */
}
.prRatingC3 {
  grid-column: 3/4;
  text-align: left;
  padding-left: 10px;
  /* padding: 3px 0px 3px 10px; */
}

.prRatingTextBox { /* Text box div for form submission for poll rating on Poll Results page */
  grid-column: 1/4;
  grid-row: 12/13;
}
.prRatingSubmit { /* Submit button div for form submission for poll rating on Poll Results page */
  grid-column: 1/4;
  grid-row: 13/14;
  text-align: right;
  padding: 3px 0px 3px 0px;
}
.prRatingMessage { /* Span to deliver an error message for form submission for poll rating on Poll Results page */
  grid-column: 1/4;
  grid-row: 14/15;
  text-align: center;
  padding: 3px 0px 3px 0px;
}

/* Acts on the left-facing arrow on the RHS of the Satisfaction Rating button */
.ratingArrow1 {
  color: #1ac051;
  margin-top: 4px;
  padding-left: 6px;
}
.ratingArrow2 {
  color: #f05d1f;
  margin-top: 4px;
  padding-left: 0px;
}
.ratingArrow3 { /* Bookings Setup page, MT tab, when clicking 'Move PMTs' it appears */
  color: #1ac051;
  padding-left: 6px;
}
.ratingArrow4 { /* Poll Results page, appears next to the date in #cvSelectedDate */
  color: #1c78a0;
  padding-top: 2px;
  padding-bottom: 4px;
  padding-left: 4px;
  width: 1.2em;
  height: 1.2em;
}

.calScale {
  display: inline-block;
  color: #1c78a0;
}
.calScale:hover {
  transform: translate(1px, 1px);
}

.eyeIcon:hover {
  transform: translate(1px, 1px);
}

/* Used as dummy class to show / hide <li> elements in Book Me Page, CSU tab, Step 2, in Create Booking Links modal */
.cblNote1, .cblNote2 {
  opacity: 100%;
}
/* Used on Book Me Page, CSU tab, Step 2, in Create Booking Links modal to space the hide / show arrow heads for the note */
.cblShowHideIcons {
  padding-bottom: 2px;
  cursor: pointer;
}

/* Shake animation for the green arrow that points at the Ratings button in the Poll Dashboard page modal window */
.arrowShake {
  animation: shake 2s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(2px, 0px) rotate(0deg); }
  25% { transform: translate(-2px, 0px) rotate(0deg); }
  50% { transform: translate(2px, 0px) rotate(0deg); }
  75% { transform: translate(-2px, 0px) rotate(0deg); }
  100% { transform: translate(2px, 0px) rotate(0deg); }
}

/* Used to handle size of smiley face icon shown after each poll name on the Poll Dashboard page (they all get referenced for size through this class) */
.dbSmiley {
  opacity: 100%;
}

/* Poll Dashboard Page: 'Statistics' button (blue, like the Change Timezone button on the Poll Results page */
.blueBtn {
  background-color: white;
  color: #4898c2;
  border-color: #4898c2;
  border-radius: 1.2em;
  border-width: 2px;
}
.blueBtn:hover, .blueBtn:focus {
  background-color: #4898c2;
  color: white;
}
.blueBtn:active {
  background-color: white;
  color: #4898c2;
}

/* Purple btn */
.purpleBtn {
  background-color: white;
  color: #9437ff;
  border-color: #9437ff;
  border-radius: 1.2em;
  border-width: 2px;
}
.purpleBtn:hover, .purpleBtn:focus {
  background-color: #9437ff;
  color: white;
}
.purpleBtn:active {
  background-color: white;
  color: #9437ff;
}

/* Styling to over-ride default btn, btn-sm styling in certain cases (e.g. in Bookings Setup Page, BL Dashboard Tab, modal that appears when eye-icon is clicked) */
.btnStyling01 {
  padding: 0rem 0.5rem;
}

/* Table styling for the Poll Dashboard Page's Statistics Modal's tables. 'ps' = poll statistics */
.psTable tbody tr td:nth-child(2) {
  text-align: center;
}
.psTable tbody td {
  vertical-align: top;
  border-color: #bcbdb9;
}
.psTable tbody th {
  text-align: center;
  font-weight: bold;
  background-color: #f4f5ef;
  border-color: #bcbdb9;
}

/* Table styling for the Settings Page's Delete All BS Modal's table. 'dabs' = delete all booking slots */
/* .dabsTable tbody tr td:nth-child(2) {
  text-align: center;
} */
.dabsTable tbody td {
  vertical-align: top;
  border-color: #bcbdb9;
  text-align: center;
}
.dabsTable tbody th {
  text-align: center;
  font-weight: bold;
  background-color: #f4f5ef;
  border-color: #bcbdb9;
}

.noHover{
  pointer-events: none;
}

/* Table styling for the Make-A-Booking page's modal that appears when trying to make a booking */
.mabModalTable tbody tr td:nth-child(2) {
  text-align: center;
}
.mabModalTable tbody td {
  vertical-align: top;
  border-color: #bcbdb9;
}
.mabModalTable tbody th {
  text-align: left;
  font-weight: bold;
  background-color: #f4f5ef;
  border-color: #bcbdb9;
}

/* Table styling for the Make-A-Booking page's modal that appears when reaching the max allowable number of BS for a given BT */
.mabMaxBsTable tbody tr td:nth-child(1) {
  text-align: left;
}
.mabMaxBsTable tbody td {
  text-align: center;
  vertical-align: top;
  border-color: #bcbdb9;
}
.mabMaxBsTable tbody th {
  text-align: center;
  font-weight: bold;
  background-color: #f4f5ef;
  border-color: #bcbdb9;
}

/* Make-A-Booking page, when max no. of BS are selected, this sets a round div around the no. of BS selected */
.maxBsPill {
  background-color: white;
  padding: 0.2em 0.4em 0.2em 0.4em;
  border-radius: 50%;
  /* border: 1px solid #F4D1CC; */
  /* color: #1ac051; */
}
.maxBsPillDummy1 {
  padding: 0.2em 0.4em 0.2em 0.0em;
  border-radius: 50%;
  /* border: 1px solid #F4D1CC; */
}
.maxBsPillDummy2 {
  padding: 0.2em 0.4em 0.2em 0.4em;
  border-radius: 50%;
  /* border: 1px solid #F4D1CC; */
}

/* Table styling for the New Poll Page's list of tutorials in a table in the Tutorial Modal. 'npTutS2' = new poll - tutorial - Step 2 */
.npTutS2Table tbody th {
  text-align: center;
  font-weight: bold;
  background-color: #f4f5ef;
  border-color: #bcbdb9;
}
.npTutS2Table tbody td {
  vertical-align: top;
  border-color: #bcbdb9;
}
.npTutS2Table tbody tr td:nth-child(3) {
  text-align: center;
}

/* Sets properties of a div that covers the Timeslot Picker section when duration is set to 00:00 on New Poll page, step 2 */
.tspCover {
  background-color: white;
  opacity: 50%;
  z-index: 6; /* Aim is to be above the cover divs for the Tutorial functionality that uses z-index = 5 */
}

/* The div that displays an error message on the New Poll page (Step 2) in the Timeslot Picker section when duration is set to 00:00. Note that this div needs to appear above the div using the above .tspCover class */
.tspErrorMessage {
  opacity: 100%;
  font-weight: bold;
  padding: 4px 6px 4px 6px;
  /* border-radius: 8px 8px 0px 0px; */
  z-index: 7; /* Aim is to be above the cover divs for the Tutorial functionality that uses z-index = 5 */
}

/* The 'cover divs' that blank out sections of the New Poll page's Step 2 during Tutorial mode ('tut'=Tutorial) use .tutCover to show a 90% opacity div and .tutCover2 to show a 100% opacity div */
.tutCover {
  background-color: white;
  opacity: 100%;
  z-index: 5;
}

.tutCover2 {
  background-color: white;
  opacity: 100%;
  z-index: 4.9;
}

/* New Poll page, Step 2, Tutorial button */
.tutorialOff { /* Tutorial switch in its OFF state */
  background-color: white;
  color: #a9a9a9;
  padding: 0px 7px 0px 44px;
  border: 1px solid #a9a9a9;
  border-radius: 1.2rem;
}
.tutorialOff:hover, .tutorialOff:focus {
  background-color: #a9a9a9;
  color: white;
}
.tutorialOff:active {
  background-color: white;
  color: #a9a9a9;
}
.tutorialOn { /* Tutorial switch in its ON state */
  background-color: white;
  color: #1c78a0;
  padding: 0px 7px 0px 44px;
  border: 1px solid #1c78a0;
  border-radius: 1.2rem;
}
.tutorialOn:hover, .tutorialOn:focus {
  background-color: #ebebeb;
}
.tutorialOn:active {
  background-color: white;
  color: #1c78a0;
}

/* New Poll page, Step 2, text panels that contain the help info */
.tutHelpDivs {
  border-radius: 12px;
  z-index: 6; /* These need to appear above the cover divs that use .tutCover and have z-index=5 */
}
.tutHelpDivsIntro { /* Slightly less radius than .tutHelpDivs so it accurately covers the one below it (TSO title had an issue showing through at the 1 corner */
  border-radius: 8px;
  z-index: 6; /* These need to appear above the cover divs that use .tutCover and have z-index=5 */
}

/* New Poll page, Step 2, in the help text panels, the NEXT button */
.tutBtnNext {
  color: #1c78a0;
  background-color: white;
  border: 1px solid #1c78a0;
  padding: 5px 10px 5px 10px;
  border-bottom-right-radius: 18px;
  border-top-right-radius: 18px;
  margin: 0px 0px 6px 4px;
}
.tutBtnNext:hover, .tutBtnNext:focus {
  color: white;
  background-color: #1c78a0;
}
.tutBtnNext:active {
  color: #1c78a0;
  background-color: white;
}
/* Used on the paddle notifications page for the Next btn, this uses tutBtnNext for its active state & tutBtnNextGray for its inactive state */
.tutBtnNextGray {
  color: #a9a9a9;
  background-color: white;
  border: 1px solid #a9a9a9;
  padding: 5px 10px 5px 10px;
  border-bottom-right-radius: 18px;
  border-top-right-radius: 18px;
  margin: 0px 0px 6px 4px;
}
.tutBtnNextGray:hover, .tutBtnNextGray:focus {
  color: #a9a9a9;
  background-color: white;
  border: 1px solid #a9a9a9;
}
.tutBtnNextGray:active {
  color: #a9a9a9;
  background-color: white;
  border: 1px solid #a9a9a9;
}

/* New Poll page, Step 2, in the help text panels, the PREVIOUS button */
.tutBtnPrev {
  color: #1c78a0;
  background-color: white;
  border: 1px solid #1c78a0;
  padding: 5px 10px 5px 10px;
  border-bottom-left-radius: 18px;
  border-top-left-radius: 18px;
  margin: 0px 4px 6px 0px;
}
.tutBtnPrev:hover, .tutBtnPrev:focus {
  color: white;
  background-color: #1c78a0;
}
.tutBtnPrev:active {
  color: #1c78a0;
  background-color: white;
}
/* Used on the paddle notifications page for the Prev btn, this uses tutBtnPrev for its active state & tutBtnPrevGray for its inactive state */
.tutBtnPrevGray {
  color: #a9a9a9;
  background-color: white;
  border: 1px solid #a9a9a9;
  padding: 5px 10px 5px 10px;
  border-bottom-left-radius: 18px;
  border-top-left-radius: 18px;
  margin: 0px 4px 6px 0px;
}
.tutBtnPrevGray:hover, .tutBtnPrevGray:focus {
  color: #a9a9a9;
  background-color: white;
  border: 1px solid #a9a9a9;
}
.tutBtnPrevGray:active {
  color: #a9a9a9;
  background-color: white;
  border: 1px solid #a9a9a9;
}

/* New Poll page, Step 2, main "Intro" div for the tutorials */
.npS2IntroDiv {
	position: relative;
	background: #A0EBF7;
  border: 2px solid #1c78a0;
  margin-top: 1px;
}

/* New Poll page, Step 2, divs used to give help text for the Tutorial function. These are divs that have arrows on their sides and there are a few of them to ensure that the arrow is on the correct side each time and inthe correct position (controlled by the (e.g.) 'top: 50%' line).  */

/* ARROW ON THE LEFT, 'Top = 50%', so arrow is half way down the left side */
.tutArrowLeft50 { /* On the div I used class='pt-1 ml-4' */
	position: relative;
	background: #A0EBF7; /* Background colour, original #91d1ce */
	border: 2px solid #1c78a0; /* Border colour, original #419185 */
}
.tutArrowLeft50:after, .tutArrowLeft50:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tutArrowLeft50:after {
	border-color: rgba(145, 209, 206, 0);
	border-right-color: #A0EBF7; /* Background colour, original #91d1ce */
	border-width: 20px;
	margin-top: -20px;
}
.tutArrowLeft50:before {
	border-color: rgba(65, 145, 133, 0);
	border-right-color: #1c78a0; /* Border colour, original #419185 */
	border-width: 23px;
	margin-top: -23px;
}

/* ARROW ON THE TOP, 'Left = 25%', so arrow is 1/4 the way from the left edge */
.tutArrowTop25 {
	position: relative;
	background: #A0EBF7;
	border: 2px solid #1c78a0;
}
.tutArrowTop25:after, .tutArrowTop25:before {
	bottom: 100%;
	left: 23%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tutArrowTop25:after {
	border-color: rgba(160, 235, 247, 0);
	border-bottom-color: #A0EBF7;
	border-width: 20px;
	margin-left: -20px;
}
.tutArrowTop25:before {
	border-color: rgba(28, 120, 160, 0);
	border-bottom-color: #1c78a0;
	border-width: 23px;
	margin-left: -23px;
}

/* ARROW ON THE TOP, 'Left = 12%', so arrow is close to the left edge */
.tutArrowTop12 {
	position: relative;
	background: #A0EBF7;
	border: 2px solid #1c78a0;
}
.tutArrowTop12:after, .tutArrowTop12:before {
	bottom: 100%;
	left: 12%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tutArrowTop12:after {
	border-color: rgba(160, 235, 247, 0);
	border-bottom-color: #A0EBF7;
	border-width: 20px;
	margin-left: -20px;
}
.tutArrowTop12:before {
	border-color: rgba(28, 120, 160, 0);
	border-bottom-color: #1c78a0;
	border-width: 23px;
	margin-left: -23px;
}

/* ARROW ON THE BOTTOM, 'Left = 12%', so arrow is 1/8 the way from the left edge */
.tutArrowBottom12 {
	position: relative;
	background: #A0EBF7;
	border: 2px solid #1c78a0;
}
.tutArrowBottom12:after, .tutArrowBottom12:before {
	top: 100%;
	left: 12%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tutArrowBottom12:after {
	border-color: rgba(160, 235, 247, 0);
	border-top-color: #A0EBF7;
	border-width: 20px;
	margin-left: -20px;
}
.tutArrowBottom12:before {
	border-color: rgba(28, 120, 160, 0);
	border-top-color: #1c78a0;
	border-width: 23px;
	margin-left: -23px;
}

/* ARROW ON THE BOTTOM, 'Left = 75%', so arrow is 1/4 the way from the right edge */
.tutArrowBottom75 {
	position: relative;
	background: #A0EBF7;
	border: 2px solid #1c78a0;
}
.tutArrowBottom75:after, .tutArrowBottom75:before {
	top: 100%;
	left: 72%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tutArrowBottom75:after {
	border-color: rgba(160, 235, 247, 0);
	border-top-color: #A0EBF7;
	border-width: 20px;
	margin-left: -20px;
}
.tutArrowBottom75:before {
	border-color: rgba(28, 120, 160, 0);
	border-top-color: #1c78a0;
	border-width: 23px;
	margin-left: -23px;
}

/* New Poll page, Step 2, for flex box approach to get Step numbers in the tutorial help divs */
.jDispFlex {
  display: flex;
}
.tutStepNumFlex{
  text-align: right;
  padding-right: 2px;
  margin-left: auto;
}
.tutStepNumCircle {
  border-radius: 50%;
  background-color: white;
  padding: 2px 4px 2px 4px;
  margin-left: 4px;
  margin-right: 2px;
}

/* New Poll page, Step 2, grey button for disabled button in tutorial modal */
.tutDisabledBtn {
  color: #A9A9A9;
  background-color: white;
  border-color: #A9A9A9;
  border-radius: 1.2rem;
  border-width: 2px;
}
.tutDisabledBtn:hover, .tutDisabledBtn:focus {
  color: #A9A9A9;
  background-color: white;
  border-color: #A9A9A9;
}
.tutDisabledBtn:active {
  color: #A9A9A9;
  background-color: white;
  border-color: #A9A9A9;
}

/* BOOK ME PAGE ******************************************************************************************************************************/

.bmTabsOuter {
  padding-left: 2px;
  padding-right: 2px;
}

/* Book Me page, tabs section, grid box that contains the tabs, inside the div with class .bmTabsOuter */
.bmTabsWrapper {
  border-bottom: 1px solid #1c78a0;
  /* padding-left: 2px; */
}

/* Book Me page, tabs section, the Active tab */
.bmTabActive {
  background-color: #1c78a0;
  color: white;
  text-align: center;
  border: 2px solid #1c78a0;
  padding: 10px 10px 1px 10px;
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
  cursor: text !important; /* Usual cursor, not the clickable hand icon */
}

/* Book Me page, tabs section, the Inactive tab */
.bmTabInactive {
  background-color: #ebebeb;
  color: #a9a9a9;
  text-align: center;
  border: 1px solid #ebebeb;
  border-top-left-radius: 1.0rem;
  border-top-right-radius: 1.0rem;
  cursor: pointer !important;
  padding: 10px;
  margin-bottom: 3px;
  margin-top: 5px;
}

.bmTabInactive:hover, .bmTabInactive:focus {
  color: #1c78a0;
  background-color: white;
  border-color: #1c78a0;
  border-left: 1px solid #1c78a0;
  border-top: 1px solid #1c78a0;
  border-right: 1px solid #1c78a0;
  border-bottom: 1px solid white;
}
.bmTabInactive:active {
  color: white;
  background-color: #1c78a0;
  border-color: #1c78a0;
}

/* Dummy class so you can get a listener to work when clicking between tabs*/
.bmTabs {
  opacity: 100%;
}

/* The div that contains the existing meeting type name & description on the Book Me page's MT tab, also the options on the Cal tab */
.bmEMTDiv {
  background-color: #f4f5ef;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 12px;
}

/* Select where the existing Meeting Type's NAME is displayed */
.mtNameSelect {
  background-color: white;
}

/* Textarea for the Meeting Type Description */
.mtDescTextAreaDisabled {
  background-color: white !important;
  color: #A9A9A9;
}
.mtDescTextAreaEnabled {
  background-color: white !important;
}

/* Book Me Page - How To ('ht') tabs - Case Study Divs */
/* Wrapper divs for the Case Studies on the How To tab */
.htCaseStudyWrapperUnselected {
  background-color: white;
  border: 1px solid white;
  border-radius: 8px;
  padding: 8px 4px 4px 8px;
}
.htCaseStudyWrapperUnselected:hover, .htCaseStudyWrapperUnselected:focus {
  background-color: #f4f5ef;
  border: 1px solid #1c78a0;
}
.htCaseStudyWrapperUnselected:active {
  background-color: white;
}

.htCaseStudyWrapperSelected {
  border: 1px solid #1c78a0;
  border-radius: 8px;
  padding: 8px 4px 4px 8px;
  background-color: #f4f5ef;
}

/* Arrowhead icon to hide show the Case Studies */
.htCaseStudyShowHideIcons {
  padding-bottom: 2px;
  cursor: pointer;
}

/* BOOK ME PAGE - POSSIBLE MEETING TIMES tab ******************************************************** */

/* Book Me page, Cal tab, div to display the Meeting Type description */
.bmCalMTDesc {
  background-color: white;
  color: #A9A9A9;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding-left: 4px;
}

/* Book Me page, Cal Tab, options at top of page such as Meeting Type & the switches are in white bgc containers = this class */
.bmCalOptionBg {
  /* background-color: white; */
  padding: 6px 10px 10px 6px;
  border-radius: 10px;
}
.bmCalOptionBg2 {
  /* background-color: white; */
  padding: 6px 10px 2px 6px;
  border-radius: 10px;
}

/* Book Me page, Cal tab, date selection options are contained in this white bordered box */
.bmCalDateOptionsBg {
  /* border: 0px solid white; */
  border-radius: 8px;
  padding: 4px 0px 4px 8px;
  margin: 0px 4px 0px 0px;
  background-color: white;
}

/* Book Me page, Cal tab, Step 2, the div where the selected Meeting Name displays */
.bmCalMTNameMessage {
  padding: 4px 8px 4px 8px;
  /* border-radius: 8px; */
}

/* Border around e.g. 'Filter by Date Type' on bookings-setup page, Booking Links tab */
.bmFilterDateType {
  border: 1px solid #ced4da;
  border-radius: 0.3em;
}
/* Border around e.g. 'Filter by Booking Type' on bookings-setup page, Booking Links tab when the list of BT Checkboxes is displayed */
.bmFilterDateTypeUpper {
  border: 1px solid #ced4da;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}
.bmFilterDateTypeLower {
  border-left: 1px solid #ced4da;
  border-right: 1px solid #ced4da;
  border-bottom: 1px solid #ced4da;
  border-bottom-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}

/* Styling of divs containing MT Desc, Venue, Map Location & Google Maps Link on Make-A_Booking page */
.bmMtDetailsDiv {
  /* border: 1px solid #ced4da; */
  border-radius: 0.3em;
  background-color: #f8f8f8; /* A very light grey */
}

/* A slightly transparent haze so people don't change things during save / update / delete steps. The associated div on each page is #pageCover for when a button is clicked on the page but will be a different id for when clicking a button on a modal as the transparent div in those cases is appended to the modal window. */
.dimScreen {
  width: 100%;
  height: 100%;
  /* background:rgba(255,255,255,0.5); ORIGINAL */
  background-color: #A9A9A9;
  opacity: 0.4;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  z-index: 90; /* Note that the header is at z-index: 2001 so it sits above #pageCover (90) & modals (1050) */
  color:black;
}

.pageCoverCenter {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width:100%;
  text-align: center;
}

/* Book Me page, CSU Tab, Step 2, Create Booking Links modal, table with link options */
.bmCblModalTable tbody td {
  width: 100%;
  vertical-align: top;
  border-color: #bcbdb9;
}
.bmCblModalTable tbody th {
  text-align: center;
  font-weight: bold;
  background-color: #f4f5ef;
  border-color: #bcbdb9;
}

/* Book Me page, CSU Tab, Step 2, Create Booking Link modal, divs for extra text notes with ARROW ON THE TOP, 'Left = 12%', so arrow is 1/4 the way from the left edge */
.bmCblModalArrowTop12 {
	position: relative;
  /* background: #A0EBF7; */
  background: whitesmoke;
  border: 1px solid #bcbdb9;
  padding: 5px;
  border-radius: 8px;
  margin-top: 16px;
}
.bmCblModalArrowTop12:after, .bmCblModalArrowTop12:before {
	bottom: 100%;
	left: 12%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.bmCblModalArrowTop12:after {
	border-color: rgba(160, 235, 247, 0);
  /* border-bottom-color: #A0EBF7; */
  border-bottom-color: whitesmoke;
	border-width: 20px;
	margin-left: -20px;
}
.bmCblModalArrowTop12:before {
	border-color: rgba(28, 120, 160, 0);
	border-bottom-color: #bcbdb9;
	border-width: 21px;
	margin-left: -21px;
}

/* Wrapper divs for the BT selections in the Create Booking Links modal on the CSU tab in Step 2 */
.cblBtCheckBoxDiv {
  border-radius: 0.5em;
  background-color: white;
  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; #77 from https://getcssscan.com/css-box-shadow-examples */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.cblBtCheckBoxDiv:hover, .cblBtCheckBoxDiv:focus {
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* Scroll setting for Book Me page's list of BTs on the CSU tab, Step 2 modal for Create Booking Links */
.cblBTScroll {
  overflow-y: scroll;
  height: 100px;
  padding: 0px 8px 6px 8px;
}
.cblBTScrollWrapper {
  background-color: #ebebeb;
  border-radius: 0.2em;
}
/* Similar class but with different height, this time used on the MY BOOKINGS page in the modal that appears when the FILTER btn is clicked & when the search btn is clicked */
.mbBtFilterScroll {
  overflow-y: scroll;
  max-height: 250px; /* max-height used as if search term used and none or 1 BS displays, the container height adjusts accordingly */
  padding: 0px 8px 6px 8px;
}
.mbMbModalBsListWrapper {
  background-color: #f7f7f7;
  border-radius: 0.2em;
  border: 1px solid #ebebeb;
}
/* MY BOOKINGS page, Main Search Modal, grey div that the search results appear in */
.mbSearchFilterScroll {
  overflow-y: scroll;
  max-height: 150px; /* max-height used as if search term used and none or 1 BS displays, the container height adjusts accordingly */
  padding: 0px 8px 6px 8px;
}

/* Dummy classes to help get info from the BT checkboxes in the Create Booking Link modal on the CSU tab, Step 2 */
.cblModalBTCheckboxes {
  opacity: 100%;
}
.cblModalBTCheckboxeSpans {
  opacity: 100%;
}

/* The individual BT pills on the CBL modal on the CSU tab in Step 2, also used on the Booking Links tab in the 'Filter by Booking Type' section */
.cblBTPills {
  /* border: 1px solid #1c78a0; */
  border: 1px solid #1c78a0;
  border-radius: 0.5rem;
  background-color: white;
  color: #1c78a0;
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  margin-right: 0.2rem;
  margin-top: 0.3rem;
  cursor: pointer;
}
.cblBTPills:hover, .cblBTPills:focus {
  border: 1px solid #f05d1f;
  background-color: #f05d1f;
  color: white;
}
.cblBTPills:active {
  border: 1px solid #f05d1f;
  background-color: white;
  color: #f05d1f;
}
/* Book Me page, Booking Links tab, Filter by Booking Type section, for the default "All" pill, has no hover effect or pointer */
.blBTPillAll {
  /* border: 1px solid #1c78a0; */
  border: 1px solid #1c78a0;
  border-radius: 0.5rem;
  background-color: white;
  color: #1c78a0;
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  margin-right: 0.2rem;
}
/* Book Me page, Booking Links tab, Filter by Booking Type section, for all pills other than the default "All" pill */
.blBTPills {
  /* border: 1px solid #1c78a0; */
  border: 1px solid #1c78a0;
  border-radius: 0.5rem;
  background-color: white;
  color: #1c78a0;
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  margin-right: 0.2rem;
  cursor: pointer;
}
.blBTPills:hover, .blBTPills:focus {
  border: 1px solid #f05d1f;
  background-color: #f05d1f;
  color: white;
}
.blBTPills:active {
  border: 1px solid #f05d1f;
  background-color: white;
  color: #f05d1f;
}

/* My Bookings page, green REFRESH PAGE button */
.slimGreenOutlineBtn {
  color: #1ac051;
  background-color: white;
  border-color: #1ac051;
  border-radius: 1.2rem;
  border-width: 2px;
  padding: 0px 6px 0px 6px;
  text-align: center;
  margin-top: 4px;
}
.slimGreenOutlineBtn:hover, .slimGreenOutlineBtn:focus {
  color: white;
  background-color: #1ac051;
}
.slimGreenOutlineBtn:active {
  color: #1ac051;
  background-color: white;
}
.btnAdjust1 {
  line-height: 1.2em;
  padding: 4px;
}
/* My Bookings page, div containing the 'All' checkbox in the BT FILTER modal */
.mbBtFilterAllDiv {
  padding: 0px 8px 6px 8px;
  border-bottom: 1px solid white;
  margin-bottom: 4px;
}

/* My Bookings page, div containing the two btns 'Filter' and 'Live Update' */
/* .mbBtnDiv { In the Calendar View section */
  /* background-color: white;
  text-align: center; */
  /* margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px; */
/* } */

/* My Bookings page, modal for confirmed BS, table styling */
.mbConfirmedBookingTable {
  padding: 0.25em;
  width: 100%
}
.mbConfirmedBookingTable tbody tr td:nth-child(1) {
  font-weight: bold;
}
.mbConfirmedBookingTable tbody tr td:nth-child(2) {
  text-align: center;
}
.mbConfirmedBookingTable tbody tr td:nth-child(3) {
  text-align: center;
}
.mbConfirmedBookingTable tbody td {
  vertical-align: top;
  border-color: #bcbdb9;
}
.mbConfirmedBookingTable tbody th {
  text-align: center;
  vertical-align: top;
  font-weight: bold;
  background-color: #f4f5ef;
  border-color: #bcbdb9;
}

/* Make all <h6> headings in modals inside .modal-header & .modal-body to be bold */
.modal-header h6 {
  font-weight: bold;
}
.modal-body h6 {
  font-weight: bold;
}

/* bldMS1 - Booking Link Dashboard Modal Style 1*/
.bldMS1 {
  margin-bottom: 2px;
}

/* The individual divs inside the modal that opens when the user clicks an eye icon on the Booking Links Dashboard tab */
.bldBlimItemDiv {
  border: 1px solid #ced4da;
  /* border-radius: 0.5em; */
  margin-bottom: 1.5em;
}

.bldBlimTitleDiv {
  background-color: #f4f5ef;
  padding: 0.5em 0.5em 0.2em 0.5em;
  /* border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em; */
}

.bldBlimDataDiv {
  /* background-color: #ebebeb; */
  padding: 0.2em 0.5em 0.2em 0.5em;
  /* border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em; */
}

/* Booking Link Dashboard tab, info modal from eye icon, remove default margins on <hr> */
.bldBlimDataDiv hr {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

/* Booking Link Dashboard tab, when eye icon is clicked, show whole row as selected */
.blActive {
  border: 1px dashed #1ac051;
}

/*  Book-Me page, Booking Links Dashboard tab, modal that appears when eye icon is clicked, controls styling of dropdown arrow that shows / hides help text */
.bldBlimBtn {
  padding-top: 2px;
}

/* PADDLE NOTIFICATIONS PAGE *****************************/
  .ntfHeader1 { /* Main heading divs for the displayed list of Paddle notifications */
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: #1c78a0;
    border: 1px solid white;
    border-radius: 0.35rem;
    padding-bottom: 3px;
  }

  .ntfHeader2 { /* Heading divs for the notification log of an individual notification */
    text-align: center;
    color: #1c78a0;
    background-color: #f4f5ef;
    border: 1px solid white;
    border-radius: 0.35rem;
    padding-bottom: 3px;
  }

  /* From Copilot for progress bar in modal for processing all Re-Try NTFs at once */
  .retry-progress-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .retry-progress-content {
      background: #fff;
      padding: 20px 30px;
      border-radius: 6px;
      width: 350px;
      text-align: center;
  }

  .retry-progress-bar-container {
      width: 100%;
      height: 20px;
      background: #eee;
      border-radius: 4px;
      margin-top: 10px;
      overflow: hidden;
  }

  .retry-progress-bar {
    height: 100%;
    width: 0%;
    background: #4caf50; /* GREEN for success */
    transition: width 0.3s ease;
  }

  .retry-progress-bar.failed {
    background: #d9534f; /* RED for failure */
  }

  .retry-progress-text {
      margin-top: 10px;
      font-size: 14px;
  }


/* Paddle Thank You page *********************************/
.confirmDiv1 {
  border: 1px solid #f4f5ef;
  border-radius: 1rem;
  /* background-color: #f4f5ef; */
  background-color: white;
  /* border: 1px solid #bcbdb9; */
  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; #77 from https://getcssscan.com/css-box-shadow-examples */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Registration page *********************************/
.btnW01 {
  width: 5em;
}
.btnW02 {
  width: 10em;
}
.btnW03 {
  width: 7em;
}

/* Border for divs around Yes & No buttons upon page load */
.regPageBtnUnselected { /* Before clicking, i.e. unselected */
  border-bottom: 2px solid white;
  /* border-radius: 1.0rem; */
}
.regPageBtnSelected { /* After clicking, i.e. selected */
  border-bottom: 2px dotted #1ac051;
  /* border-radius: 1.0rem; */
}

/* Padding for divs around Yes & No buttons upon page load */
.regPageBtnP2 {
  padding-bottom: 4px;
}

/* Registration page *********************************/

.acc-input1 {
  border: 1px solid #f97824;
  border-radius: 0.5em;
}
.acc-input1:hover {
  background-color: #EBEBEB;
}

/* Account page *********************************/

.subscriptionListHeaderRow {
  background-color: #2499a6;
}

/* Subscription table, row borders */
.subGridBT {
  border-top: 1px solid #bcbdb9;
}
.subGridBB {
  border-bottom: 1px solid #bcbdb9;
}
/* border-bottom-header */
.subGridBBH {
  border-bottom: 1px solid white;
}

/* Subscription table: borders & corner radiuses */
.subGridBorders {
  border-left: 1px solid #bcbdb9;
  border-right: 1px solid #bcbdb9;
}
.subGridBandR .row:first-of-type {
  border-top: 1px solid #bcbdb9;
  border-right: 1px solid #bcbdb9;
  border-left: 1px solid #bcbdb9;
}
.subGridBandR .row:last-of-type {
  border-right: 1px solid #bcbdb9;
  border-bottom: 1px solid #bcbdb9;
  border-left: 1px solid #bcbdb9;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}
/* HBR = header-border-right */
.subGridHBR {
  border-right: 1px solid white;
}
/* RBR = rows-border-right */
.subGridRBR {
  border-right: 1px solid #bcbdb9;
}
/* RBR = header-border-radius */
.subGridHBRad {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.subGridBandR2 {
  border-right: 1px solid #bcbdb9;
  border-bottom: 1px solid #bcbdb9;
  border-left: 1px solid #bcbdb9;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}
.gridTextWrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Subscription table zebra striping. Striping needs to be hidden until seat rows are showed from lg upwards */
@media (min-width: 0px) {
  /* .grid-stripedSub { */
    /* background-color: #f8f8f8; */
  /* } */
}
@media (min-width: 992px) { /* lg */
  .grid-stripedSub .row:nth-of-type(odd) {
    background-color: #f8f8f8;
  }
  .grid-stripedSub .row:nth-of-type(even) {
    background-color: white;
  }
}
/* Subscription management modal */
.grid-stripedSubModal .row:nth-of-type(odd) {
  background-color: #f8f8f8;
}
.grid-stripedSubModal .row:nth-of-type(even) {
  background-color: white;
}
/* medium grey */
.selectedSeatRow {
  background-color: #E5EEFF !important;
}

/* Control borders of flex-column divs for subscription properties */
.flex-bordered > div {
  border-left: 1px solid #bcbdb9;
  border-top: 1px solid #bcbdb9;
  border-right: 1px solid #bcbdb9;
  padding-left: 6px;
  padding-top: 8px;
}
.flex-bordered > div:first-child {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.flex-bordered > div:last-child {
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border-bottom: 1px solid #bcbdb9;
}

/* Links on the terms-conditions page */

/* Define a custom link style */
.custom-alink-1 {
  color: #5c6b73;          /* non-hover state */
  /* text-decoration: none; optional: remove underline */
}

.custom-alink-1:hover {
  color: #1c78a0;           /* hover state */
  text-decoration: underline; /* optional: add underline on hover */
}

/* START OF: Styling for table showing Device info on Accounts page (by CoPilot) */

  /* Device Manager — layout wrapper keeps rounded corners and enables horizontal scroll */
  .dml-device-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5em;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.03) inset; /* subtle inner frame */
  }

  /* Table base: collapse borders to avoid double lines, allow fixed layout for even column sizing */
  .dml-device-table-wrap > .dml-devices-table,
  .dml-devices-table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    table-layout: fixed;
    border-radius: 0.5em;
    background-clip: padding-box;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #222;
    font-size: 14px;
  }

  /* Header cells and data cells share a single 1px border */
  .dml-devices-table th,
  .dml-devices-table td {
    border: 1px solid #d0d0cd;
    padding: 0.6em 0.75em;
    vertical-align: middle;
    word-break: break-word;
    white-space: normal;
  }

  /* Header styling */
  .dml-devices-table thead th {
    background-color: #2499a6;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    /* padding: 0.5em 0.75em; */

    text-align: center;
    vertical-align: top;   /* top-align header content */
    padding-top: 0.65em;   /* small top padding for visual spacing */
  }

  /* Small adjustments for header text wrapping on narrow screens */
  .dml-devices-table thead th {
    white-space: normal;
    word-wrap: break-word;
  }

  /* Device row cells: top-align content, keep text horizontally centered where intended */
  .dml-devices-table tbody td {
    vertical-align: top;   /* top-align cell content */
    text-align: center;    /* horizontal centering for cell content */
    padding-top: 0.6em;
  }

  /* If you have a specific class j-text-logo with a color, make sure it applies inside the table:
   this ensures your project's utility class takes effect even when other rules are present */
  

  /* Rounded corners on the outer edges (apply to specific cells) */
  .dml-device-table-wrap > .dml-devices-table thead th:first-child {
    border-top-left-radius: 0.5em;
  }
  .dml-device-table-wrap > .dml-devices-table thead th:last-child {
    border-top-right-radius: 0.5em;
  }
  .dml-device-table-wrap > .dml-devices-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.5em;
  }
  .dml-device-table-wrap > .dml-devices-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.5em;
  }

  /* Zebra rows for readability */
  .dml-devices-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }
  .dml-devices-table tbody tr:nth-child(even) {
    background-color: #fafafa;
  }

  /* Device label/UA stack: left / center nuance
   Keep the label bold and use j-text-logo color for the label text.
   UA (small) stays muted. */
  .dml-devices-table td > strong {
    display: block;
    font-weight: 600;
    text-align: center;            /* center the label horizontally */
    color: inherit;                /* allow j-text-logo to set color below */
    margin-bottom: 0.18em;
  }

  /* Apply your j-text-logo color to the main device text (strong + related cell text).
   Increase specificity so this rule wins over any general color resets */
  .dml-devices-table tbody td,
  .dml-devices-table tbody td strong {
    color: var(--j-text-logo-color, #0b2f44); /* optional CSS variable fallback */
  }

  .dml-devices-table td > small {
    display: block;
    color: #666;
    font-size: 12px;
    margin-top: 0.15em;
    text-align: center;
  }

  /* Device number styling */
  .dml-device-no {
    text-align: center;
    width: 48px;
    white-space: nowrap;
    color: #444;
    font-weight: 600;
  }

  /* Action button base */
  .dml-revoke-btn {
    display: inline-block;
    padding: 0.35em 0.6em;
    border-radius: 0.35em;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    min-width: 62px;
    background-color: transparent;
    border: 1px solid rgba(0,0,0,0.08);
    color: inherit;
  }

  /* Secondary states for accessibility */
  .dml-revoke-btn:focus {
    outline: 3px solid rgba(36,153,166,0.22);
    outline-offset: 2px;
  }
  .dml-revoke-btn:active {
    transform: translateY(1px);
  }
  .dml-revoke-btn[disabled] {
    opacity: 0.55;
    pointer-events: none;
  }

  /* Button color: prefer your project's blueBtn styling while avoiding earlier red override.
   This selector has higher specificity to override .dml-revoke-btn { background-color: red } */
  .dml-devices-table .dml-revoke-btn.btn.btn-sm.blueBtn.j-text-size5Btn,
  .dml-devices-table .btn.blueBtn.dml-revoke-btn {
    background-color: #2499a6 !important;   /* your blue (use your exact brand color) */
    border-color: rgba(0,0,0,0.06) !important;
    color: #fff !important;
    box-shadow: none;
  }

  /* Focus / active states for blue button */
  .dml-devices-table .dml-revoke-btn.btn.btn-sm.blueBtn.j-text-size5Btn:focus {
    outline: 3px solid rgba(36,153,166,0.22);
    outline-offset: 2px;
  }

  /* Ensure table revoke buttons start white/blue and get the intended hover */
  .dml-devices-table .dml-revoke-btn.btn.btn-sm.blueBtn.j-text-size5Btn {
    background-color: #ffffff !important;
    color: #4898c2 !important;
    border-color: #4898c2 !important;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  }

  /* Hover and focus state */
  .dml-devices-table .dml-revoke-btn.btn.btn-sm.blueBtn.j-text-size5Btn:not([disabled]):hover,
  .dml-devices-table .dml-revoke-btn.btn.btn-sm.blueBtn.j-text-size5Btn:not([disabled]):focus {
    background-color: #4898c2 !important;
    color: #ffffff !important;
    border-color: #4898c2 !important;
  }

  /* Active (pressed) state */
  .dml-devices-table .dml-revoke-btn.btn.btn-sm.blueBtn.j-text-size5Btn:not([disabled]):active {
    background-color: #ffffff !important;
    color: #4898c2 !important;
  }

  /* Make small screens more compact and ensure content wraps nicely */
  @media (max-width: 520px) {
    .dml-devices-table th,
    .dml-devices-table td {
      padding: 0.45em 0.5em;
      font-size: 13px;
    }
    .dml-device-no {
      width: 40px;
      font-size: 12px;
    }
    .dml-revoke-btn {
      padding: 0.3em 0.45em;
      font-size: 12px;
      min-width: 48px;
    }
  }

  /* When the table is very narrow, make cells stack visually by allowing content to wrap and keep readable spacing */
  @media (max-width: 380px) {
    .dml-devices-table td > small { font-size: 11px; }
  }

  /* Optional: subtle focus styling for rows when keyboard-navigating */
  .dml-devices-table tbody tr:focus-within {
    box-shadow: inset 0 0 0 1px rgba(36,153,166,0.10);
  }

  /* Utility to hide default table borders if other rules attempt to re-introduce them */
  .dml-devices-table,
  .dml-devices-table th,
  .dml-devices-table td {
    print-color-adjust: exact;/* Standard */
    -webkit-print-color-adjust: exact;/* Chrome, Safari */
    -moz-print-color-adjust: exact;/* Firefox */
  }

  /* Helper: visually-hidden text for screen readers (if needed) */
  .dml-visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }

  .dml-banner-alert {
    border: 1px solid #fd7e14;   /* Bootstrap warning orange */
    color: #fd7e14;              /* Text color matches badge */
    padding: 0.5rem;             /* Equivalent to Bootstrap p-2 */
    border-radius: 0.5em;        /* Rounded corners */
  }

  /* Stop badge that says 'Pending Device' or 'Current Device' from overflowing table cell */
  .dml-devices-table td .badge {
    white-space: normal;   /* allow wrapping */
    word-break: break-word; /* break long words if needed */
    max-width: 100%;       /* keep within cell */
    display: inline-block; /* respect max-width */
  }

/* END OF: Styling for table showing device info on Accounts page (by CoPilot) */


/* Tutorials page - Start */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px); /* FIXED WIDTH COLUMNS */
  gap: 20px;
  width: 100%;
  animation: fadeInGrid 0.4s ease-out;
  justify-content: flex-start;
  margin: 0;
}

.video-item {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Thumbnail */
.video-thumb {
  width: 300px;
  height: 140px;
  border-radius: 8px;
  border: 1px solid #cfd8df;
  position: relative;
  display: block;
  padding: 12px;
  padding-top: 12px;
  padding-bottom: 48px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  background: linear-gradient(135deg, #f7fbfd 0%, #e9f3f8 100%);
}

.video-thumb:hover {
  transform: translateY(-4px) translateX(4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Title (2-line clamp) */
.video-thumb-title {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 3;
  font-size: 1.05em;
  font-weight: 600;
  color: #1c78a0;
  line-height: 1.3;

  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  /* Standard property (not widely supported yet, but required for linting) */
  line-clamp: 2;

  overflow: hidden;
}

/* Play icon */
.video-thumb-icon {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;

  /* Slightly stronger, non-washed-out coral red */
  background: #e96f5f;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;

  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

.video-thumb-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-32%, -50%);

  width: 0;
  height: 0;
  border-style: solid;

  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #ffffff;

  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

/* NEW badge */
.video-badge-new {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #2ca58d;
  color: white;
  font-size: 0.75em;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* UPDATED badge */
.video-badge-updated {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #ffb703;
  color: #000;
  font-size: 0.75em;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Container - note that the div for this class uses additional Bootstrap CSS to handle other margins */
.tutorials-container {
  max-width: 1200px;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.tutorials-search {
  width: 100%;
  margin: 0 0 10px 0;
}

.tutorials-search-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 1em;
  border: 1px solid #c5d7df;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease;
}

.tutorials-search-input:focus {
  border-color: #1c78a0;
}

.tutorials-search-options {
  margin: 5px 0 10px 0;
  font-size: 0.95em;
  color: #145470;
}

.tutorials-search-divider {
  height: 1px;
  background: #d5e4ea;
  margin: 12px 0 20px 0;
}

.tutorials-search-wrapper {
  position: relative;
  width: 100%;
}

.tutorials-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #7a9aa8;
  cursor: pointer;
  display: none;
  user-select: none;
}

.tutorials-clear-btn:hover {
  color: #1c78a0;
}

.tutorial-no-results {
  font-size: 1.1em;
  color: #145470;
  background: #f1f7fa;
  border-left: 4px solid #1c78a0;
  padding: 12px 14px;
  border-radius: 4px;
  margin-top: 20px;
}

.tutorials-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.tutorials-checkbox input {
  transform: scale(1.2);
  cursor: pointer;
}

/* Fade-in animation */
@keyframes fadeInGrid {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Category headings */
.tutorial-category-heading {
  font-size: 1.4em;
  font-weight: 700;
  color: #145470;
  margin: 40px 0 20px;
  text-align: left;
  padding: 10px 14px;
  background: #d9e9f1;
  border-left: 4px solid #1c78a0;
  border-radius: 4px;
}

@media (max-width: 360px) {
  .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tutorials page - End */

/* Video Viewer page - Start */

.video-viewer-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Description ABOVE the video */
.video-description-box {
  margin-bottom: 20px; /* spacing before the video */
  line-height: 1.5;
}

/* Optional: match the thumbnail rounding style */
.video-player-wrapper {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Video Viewer page - End */