/* Import css*/
@import "plugins.css";

/*.navbar-brand img {display: none;}*/
/*Custome Font*/
@import "../fonts/poppins/style.css";
* {outline: none;}
body { background: #fff; font-family: "Poppins Regular"; font-weight: 400; color: #272727; overflow-x: hidden; font-size: 14px; /*line-height: 26px; padding-top:100px; */ }
/*h1,
h2,
h3,
h4,
h5,
h6 { color: #272727; margin-top:0; }*/
iframe { border: none; width: 100%; }
/*List Tag*/
li { list-style-type:none; }
/*Float Tag*/
.left { float:left; }
.right { float:right; }
/*Align tag*/
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}
.text-nowrap {white-space: nowrap;}
.text-lowercase {text-transform: lowercase;}
.text-uppercase {text-transform: uppercase;}
.text-capitalize {text-transform: capitalize;}
/*Padding*/
.p-t { padding-top:10px !important; }
.p-r { padding-right:10px !important; }
.p-b { padding-bottom:10px !important; }
.p-l { padding-left:10px !important; }

.pl-3, .px-3 {
    padding-left: 1rem !important;
}
/*Margin*/
.m-t { margin-top:10px !important; }
.m-r { margin-right:10px !important; }
.m-b { margin-bottom:10px !important; }
.m-l { margin-left:10px !important; }
.pt-100 {padding-top: 100px;}
.pb-90 { padding-bottom:90px}
/*Vertical Align*/
.vAlign-Top { vertical-align:top; }
.vAlign-Bottom { vertical-align:bottom; }
.vAlign-Middle { vertical-align:middle; }
.vAlign-Baseline { vertical-align:baseline; }
/*Position*/
.pRelative { position:relative; }
.pAbsolute { position:absolute; }
.pFixed { position:fixed; }
.pStatic { position:static; }
/* Font Size*/
/* Font Size*/
.text-00x { font-size: 0.750rem !important; }
.text-0x { font-size: 0.875rem !important; }
.text-x { font-size: 1rem !important; }
.text-1x { font-size: 1.313rem !important; }
.text-2x { font-size: 1.500rem !important; }
.text-3x { font-size: 1.750rem !important; }
.text-4x { font-size: 2rem !important; }
.text-5x { font-size: 2.313rem !important; }
.text-6x { font-size: 2.500rem !important; }
.text-7x { font-size: 2.750rem !important; }
.text-8x { font-size: 3rem !important; }
.text-9x { font-size: 3.313rem !important; }
.text-10x { font-size: 3.500rem !important; }
.text-11x { font-size: 3.750rem !important; }
.text-12x { font-size: 4rem !important; }
.text-13x { font-size: 4.313rem !important; }
.text-14x { font-size: 4.500rem !important; }
.text-15x { font-size: 4.750rem !important; }
.text-16x { font-size: 5rem !important; }

/* Font Size*/
.smallFont { font-size:10px !important; }
.mediumFont { font-size:11px !important; }
.normalFont { font-size:13px !important; }
.largeFont { font-size:15px !important; }
/*Font Weight*/
.boldFont { font-weight:bold !important; }
.font-bold { font-weight: 600 !important; }
.font-noraml { font-weight: 400 !important; }
.font-lite { font-weight: 100 !important; }
/*Font Style*/
.italicFont { font-style:italic !important; }
/*Text Decoration*/
.underlineFont { text-decoration:underline !important; }
.overlineFont { text-decoration:overline !important; }
.linethroughFont { text-decoration:line-through !important; }
/*Text Transform*/
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-lowercase { text-transform: lowercase; }
/*Global*/
.no-padding { padding: 0 !important; }
.no-margins { margin: 0 !important; }
.full-width { width: 100% !important; }

.left-align { text-align:left; }
.right-align { text-align:right; }
.cen-align { text-align:center; }

.img-circle { border-radius: 50%;}
.img-circle-5 { border-radius: 2%;}


.mobileView {display: none;}
.desktopView {display: block;}
@media (max-width: 992px){
	.mobileView {display: block;}
	.desktopView {display: none;}
	
}

.w-100 {width: 100%;}

.img-responsive, .img-t1.img-responsive, .img-a1.img-responsive, .img-g1.img-responsive {
    margin: auto;
    max-width: 100%;
}

.img-responsive {
    display: inline-block;
}

.login_Box {
    min-height: 450px; border: 1px solid #dddddd; border-radius: 15px; padding: 20px 0;}

.gray {
    background-color: #f8f8f8;
}
.bdr {
    border-width: 1px;
    border-style: solid;
}
a { text-decoration: none; color: #0095e5; -webkit-transition: color 400ms, background-color 400ms; -moz-transition: color 400ms, background-color 400ms; -o-transition: color 400ms, background-color 400ms; transition: color 400ms, background-color 400ms;}
a:hover{ text-decoration: none; color: #0095e5;}
a:focus { outline: 0;}
a:active {outline: none;border: none;}

hr { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #fff; }
.text-white { color:#fff !important; }
.text-black { color : #000 !important; }

ul , li {margin: 0; padding: 0; list-style-type: none;}
/*Text area*/
textarea { height:75px !important; resize:none; }
/*Pre*/
pre { height:75px !important; resize:none; }

.no-padding-inner {
    padding: 5px 20px;
}

/*.dropdown-toggle::after {display: none;}*/
.dropdown-toggle i:after {display: none;}
.dropdown-progress-menu {left: auto!important; right: 0 !important; top: 20px!important; padding: 10px;}
.dropdown-progress-menu li a {width: 100%; display: block; font-weight: 100; font-size: 0.875rem;padding: 5px 0;}

.disabled span, 
.disabled button, 
.disabled input, 
.disabled select, 
.disabled textarea, 
.disabled pre, 
.disabled p, 
.disabled img, 
.disabled label, 
.disabled span, 
.disabled a, 
.disabled i { pointer-events: none !important;}

.wrapper{overflow: hidden;}
.wrapper.animated { animation-duration:0.1s; animation-fill-mode:both; opacity:1}

/*theme button*/
.theme-btn { font-size: 15px; padding: 13px 31px;  border-radius: 5px;  text-transform: uppercase;  position: relative;  z-index: 1;  -webkit-transition: .9s;   transition: .9s;   display: inline-block; color: #000; background-color: #8edb13;  border: 1px solid #8edb13  ;  outline: 0 !important;  overflow: hidden;}

    
/*PEACE */
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.pace-inactive { display: none; }
.pace .pace-progress { position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; }
.pace-inactive { display: none; }

/*progress Bar*/
.progress { margin-bottom:0; }
.progress-bar .sr-only { position:relative; }

.main-body {margin-top: 77px;}

.navbar-shadow {-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px; -ms-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;}

.section-header { margin-bottom: 50px; position: relative; }
.section-header:before { content: ""; position: absolute; width: 140px; bottom: -25px; left: 50%; margin-left: -70px; height: 3px; background: #fac408; }

.footer-header { margin: 20px 0 50px 0; position: relative; }
.footer-header:after { content: ""; position: absolute; z-index: 99; width: 100%; bottom: -25px; left:0; height: 4px; background: #c4c4c4; }
.footer-header:before { content: ""; position: absolute; z-index: 100; width: 25%; bottom: -25px; left:0; height: 4px; background: #fac408; }

.footer-menu li {Padding: 5px 0;}
.footer-menu a {color: #fff; line-height: 20px;}

.footer-container .social {margin-top: 10px;}

.nav-item {/*margin: 5px 0;*/}
.nav-item:last-child {margin-right: 0px;}

.nav-item:last-child {margin-right: 0px; padding: 0 !important;}
/*.nav-item:last-child a {padding: 0.5rem 1.65rem !important;}*/

.btn-social-icon>:first-child {font-size: 1.1em}
/*@media(min-width:992px) {
..navbar-light .navbar-nav .nav-link, .nav-item .btn {margin-right: 10px;}
}
*/
.navbar-light .navbar-nav .nav-item {padding: 0.5rem 1.1rem; font-size:1rem; position: relative; font-weight: 700;}
.navbar-light .navbar-nav .nav-link,
.nav-item .btn {font-size: 0.875rem; /* font-size:1rem;*/ /*border-bottom-width:3px; border-bottom-style:solid;*/ font-weight:500; padding: 0rem 0rem; }
.nav-item .btn {padding: 0.375rem 1.75rem;}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-item.active .nav-link {/* border-bottom-width:3px; border-bottom-style:solid;*/ font-weight:700; }
.navbar-light .navbar-brand img {width: 60%;  transition: all linear .5s}
.navbar-light.navbar-shadow .navbar-brand img {width: 50%;}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar-light .navbar-nav .nav-link, 
    .nav-item .btn { font-size:0.875rem; }
    .navbar-light .navbar-brand img {width: 80%;}
  }
@media screen and (min-width: 240px) and (max-width: 991px) {
    .navbar-light .navbar-nav .nav-link, 
    .nav-item .btn { font-size:1rem; }
    .navbar-light .navbar-brand img {width: 80%;}
  }
.login_Box {min-height: 450px; border: 1px solid #dddddd; border-radius: 15px; padding: 20px 0}
.login_Box .colHeight { padding: 10px 20px}
.login_Box .colHeight h2 {font-weight: bold; width: 100%; text-align: center; color: #1e6489; font-size: 40px; padding: 25px 0;}

.favorite-heart-button {min-width: 20px;height: 20px;position: absolute;top: -14px;line-height: 12px;font-weight: bold;right:0px; font-size: 0.7rem; border-radius: 5px; background: #8edb13; color: #000;}

/*Index Header*/

.headerImage {background: url("../images/hero-bg.png")repeat-x bottom;/* width: 100%;*/ height: 800px; background-size: cover; background-position: bottom right;    background-repeat: no-repeat; /*background-size: cover; */position: relative; transition: all .5s; text-align: center; overflow: hidden;}
.headerImage:before { height: 103px; width: 100%; content: ""; left: 0; bottom: 0; position: absolute; z-index: 1; background-image: url(../images/pattern.png)}
.headerImage .transparentWhiteBG {background: rgb(255,255,255);width: 100%; height: 550px; opacity: 70%; transition: all .5s;}
.headerImage .transparentText {color: #000; width: 1200px; margin: 0 auto;  position: absolute;  top: 20vh; right: 0;  bottom: 0; left: 0;}
.headerImage .transparentText .title-modern-title {/*position: absolute; left: 5%; top: 26vh; width: 100% */}

.headerImage .transparentText h1 { margin-top: 0vh; transition: all .5s;font-family: "Poppins ExtraBold"; font-size: 80px; color: #333; }
.headerImage .transparentText .title-modern-text {/*position: absolute; left: 5%; top: 26vh; width: 100%;*/ }
.headerImage .transparentText .title-modern-text h4 {margin:14px 0;}
.headerImage .transparentText a.more { margin-top: 2vh; padding: 10px 20px; cursor: pointer; font-size: 16px; border-radius: 5px; display: inline-block;}
.headerImage .transparentText a.video {color: #272727; margin-top: 2vh; padding: 10px 20px; font-size: 22px; border-radius: 5px; display: inline-block;}

/*Heading Section*/
.title-modern {  position: relative; text-align: center; /*margin-bottom: 100px;*/margin-bottom: 0px;}
.title-modern  .title-modern-subtitle { position: absolute; top: 50%; transform: translateY(-115%); font-size: 40px;  color: #333; /* opacity: .1; */ font-weight: 900; pointer-events: none; width: 100%;  font-family: "Poppins SemiBold"; line-height: 44px; }

.title-modern  .subtitle { position: absolute; top: 50%; transform: translateY(100%); font-size: 20px;  color: #333; /* opacity: .1; */  pointer-events: none; width: 100%;}
.title-modern .title-modern-title { position: relative;  z-index: 1; font-weight: 700; display: none;}
.title-modern h2 { line-height: 1.1;}

@media (max-width: 1200px){
	.title-modern  .title-modern-subtitle {font-size: 40px;}
}
@media (max-width: 992px){
	.title-modern  .title-modern-subtitle {font-size: 40px;}
}
@media (max-width: 768px){
	.title-modern  .title-modern-subtitle {font-size: 35px;	}
}
@media (max-width: 576px){
	.title-modern  .title-modern-subtitle {font-size: 30px;	}
}



canvas{ display:block; vertical-align:bottom;}
/* ---- stats.js ---- */
.count-particles{ background: #000022; position: absolute; top: 48px; left: 0;  width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px;  line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold;}
.js-count-particles{ font-size: 1.1em;}
#stats,.count-particles{ -webkit-user-select: none; margin-top: 5px;  margin-left: 5px;}
#stats{ border-radius: 3px 3px 0 0; overflow: hidden;}
.count-particles{ border-radius: 0 0 3px 3px;}
/* ---- particles.js container ---- */
#particles-js{ width: 100%; height: 100%; background-color:transparent; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}

/*style upper*/
.upper.section_sub_title1 h6 { letter-spacing: 0; color: #0c5adb; font-size: 18px; font-weight: 700; padding: 0 0 0 40px; position: relative; z-index: 1;}
.upper.section_sub_title1 h6:before { position: absolute; content: ""; left: -1px; top: 11px; width: 32px; height: 1px; background: #0C59DB;}

.service {background: url("../images/service-bg.png"); background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; z-index: 1;}

.feature-single-box { margin: 30px 0; background: #fff; box-shadow: 0 0px 16px rgb(0 0 0 / 12%); padding: 10px 10px 4px 10px; border-radius: 7px; text-align: left; }
.feature-single-box h3 {font-weight: 700; }
.feature-single-box p {color: #000; }
.feature-single:nth-child(odd) .feature-icon i {display: inline-block; font-size: 45px; color: #104FFE; width: 40px; height: 40px; line-height: 85px; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%); /*border-radius: 50%;*/text-align: center; position: relative; z-index: 1; background: linear-gradient(to top, #51B5FD 0%, #0E43FE 100%);}
.feature-single:nth-child(odd) .feature-icon i:after {position: absolute; content: ""; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: linear-gradient(to top, #51B5FD 0%, #0E43FE 100%);/* border-radius: 50%; */transform: scale(0); transition: .5s;}
.feature-single:nth-child(odd) .feature-title h3 {font-size: 16px; color: #000E52; margin: 2px 0 0; background: linear-gradient( to right, #1046FE, #48A6FE, 50%, #000E52 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: .5s;}
.feature-single:nth-child(odd) .feature-title h3:hover { background-position: 0;}
.feature-single:nth-child(odd):hover .feature-icon i { color: #fff;}
.feature-single:nth-child(odd):hover .feature-icon i:after {transform: scale(1);}

/*box style three*/
.feature-single:nth-child(even) .feature-icon i {    display: inline-block; font-size: 45px; color: #2BBC19; width: 40px; height: 40px; line-height: 85px; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%); /*border-radius: 50%;*/ text-align: center; position: relative; z-index: 1; background: linear-gradient(to top, #AFE83C 0%,  #2BBC19 100%);}
.feature-single:nth-child(even) .feature-icon i:after {    position: absolute; content: ""; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: linear-gradient(to top, #AFE83C 0%,  #2BBC19 100%); /*border-radius: 50%; */transform: scale(0); transition: .5s;}
.feature-single:nth-child(even) .feature-title h3 {font-size: 16px; color: #000E52; margin: 2px 0 0; background: linear-gradient( to right, #37C01C, #9DE237, 50%, #000E52 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: .5s;}
.feature-single:nth-child(even) .feature-title h3:hover { background-position: 0;}
.feature-single:nth-child(even):hover .feature-icon i { color: #fff;}
.feature-single:nth-child(even):hover .feature-icon i:after { transform: scale(1);}


.feature-icon2 i { display: inline-block; font-size: 45px; color: #F13F2E; width: 85px; height: 85px; line-height: 85px; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%); border-radius: 50%; text-align: center; position: relative; z-index: 1;}
.feature-icon2 i:after { position: absolute; content: ""; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: linear-gradient(to top, #F96D49 0%,  #F13F2E 100%); border-radius: 50%; transform: scale(0); transition: .5s;}
.feature-title-2 h3 { font-size: 28px; font-weight: 700; color: #000E52; margin: 35px 0 13px; background: linear-gradient( to right, #F24531, #F86645, 50%, #000E52 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: .5s;}
.feature-title-2 h3:hover {    background-position: 0;}
.feature-single-box:hover .feature-icon2 i {    color: #fff;}
.feature-single-box:hover .feature-icon2 i:after {    transform: scale(1);}

/*box style three*/
.feature-icon3 i {    display: inline-block; font-size: 45px; color: #2BBC19; width: 85px; height: 85px; line-height: 85px; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%); border-radius: 50%; text-align: center; position: relative; z-index: 1;}
.feature-icon3 i:after {    position: absolute; content: ""; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: linear-gradient(to top, #AFE83C 0%,  #2BBC19 100%); border-radius: 50%; transform: scale(0); transition: .5s;}
.feature-title-3 h3 {font-size: 28px; color: #000E52; margin: 35px 0 13px; background: linear-gradient( to right, #37C01C, #9DE237, 50%, #000E52 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: .5s;}
.feature-title-3 h3:hover { background-position: 0;}
.feature-single-box:hover .feature-icon3 i { color: #fff;}
.feature-single-box:hover .feature-icon3 i:after { transform: scale(1);}


.offer-title h3 {color: #000E52;}

.dashBox { height: 249px; margin-bottom: 15px;}

.webinar-news  li div { padding: 10px; margin-bottom: 15px;min-height: 112px;}

.modal-window { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);}
.modal-window > div { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 40%;}
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer;}
.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}
.modal-window header {font-weight: bold;}
.modal-window h1 {font-size: 150%;margin: 0 0 15px;}
.modal-close {color: #fff; line-height: 50px; background-color: #555555; text-align: center; top: 0; width: 70px; text-decoration: none;}
.modal-close:hover {color: black;}


.red {
    color: #ff0000;
}

.preloader { position:fixed; left:0; top:0; bottom:0; right:0; z-index:10000; display:flex; justify-content:center; align-items:center; padding:20px;  transition:.3s all ease}
.preloader.loaded { display: none;}
.preloader-body { text-align:center}
.preloader-body p { position:relative; right:-8px}

/*.navbar .rounded-circle {border:1px solid #042c4f;}*/

.dropdown-divider {margin: 0.2rem 0;}

.dropdown-menu.dropdown-menu-avatar {left: auto; right: 0;}
.dropdown-menu.dropdown-menu-avatar h6 {font-size: 12px; padding: 0 0.25rem; text-transform: capitalize;font-weight: 700;}
.dropdown-menu.dropdown-menu-avatar .dropdown-item {padding: 0.25rem; font-size: 12px;}
.dropdown-menu.dropdown-menu-avatar a.dropdown-item i {padding: 0 0.5rem; font-size: 12px;}

.slick-slide img {display:inline-block;}
.slick-active {opacity: 1;}
.slick-prev:before, .slick-next:before {color:#000;}
.slick-slide .card {min-height: 225px;}
.slick-slide .card h5 {font-weight: bold;}

/* Form fields run a touch smaller than the Bootstrap default. */
.form-control { font-size: 0.8rem; }

/* Profile page picture, as on profile.php. */
.profile-pic { width: 150px; height: 150px; background-size: contain; border-radius: 50%; object-fit: cover; }

/* Space between form rows. */
.colHeight { margin-bottom: 10px; }

/* Password show/hide toggle (js/fvw-password.js). */
.fvw-password-wrap { position: relative; }
.fvw-password-wrap .form-control { padding-right: 34px; }
.fvw-password-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: #8a96a3; font-size: 13px; line-height: 1;
}
.fvw-password-toggle:hover { color: #4c9ef2; }

/* Field-level validation (signup.js and similar forms) — a red-bordered
   input with a small pink warning banner directly under it, instead of a
   single message at the top of the form. */
.form-control.field-invalid,
select.field-invalid {
  border-color: #E5484D !important;
  box-shadow: 0 0 0 1px #E5484D;
}
.field-error-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 12px;
  background: #FDECEC;
  border: 1px solid #E5484D;
  border-radius: 6px;
  color: #C22;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Webinar card CTA (js/pages/webinar.js) — was an unstyled plain link. */
.join-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #0078d4;
  color: #0078d4;
  border-radius: 5px;
  width: 100%;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.join-button:hover {
  background-color: #0078d4;
  color: #fff;
}
.field-error-msg::before {
  content: '⚠';
  flex-shrink: 0;
  font-size: 0.85rem;
}
.fvw-password-toggle:focus { outline: none; }

/* Fields the profile page is asking the visitor to correct. */
.fvw-needs-attention { border-color: #f0ad4e !important; background-color: #fffaf2; }

/* ---- Tighter typography -------------------------------------------------
   The page ran at 14px with footer headings near 27px, which read heavy
   against the rest. Sizes here step everything down a notch and pull the
   footer's spacing in with it. */

body { font-size: 13px; }

.navbar-light .navbar-nav .nav-link { font-size: 13px; }

/* Footer: headings were 27px and the news line 23px - both far larger than
   anything they sat beside. */
.footer-header { margin: 14px 0 34px 0; }
.footer-header h3 { font-size: 16px; letter-spacing: 0.2px; }
.footer-header:after,
.footer-header:before { bottom: -16px; height: 3px; }

.footer-menu li { Padding: 3px 0; }
.footer-menu a { font-size: 12.5px; line-height: 18px; }

.footer-news h4 { font-size: 14px; margin-bottom: 4px; }
.footer-news h6 { font-size: 12.5px; line-height: 18px; }

.footer-text h6 { font-size: 12.5px; line-height: 19px; margin-bottom: 6px; }

/* .text-0x carries !important, so the copyright line needs the same weight. */
.footer-container p,
.footer-container p.text-0x { font-size: 12px !important; }
.footer-container .social { margin-top: 6px; }

/* Select arrow: the native control draws a large triangle that sits oddly
   against the small field text, so a compact chevron replaces it. */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23212529' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  /* The Blue theme paints its own arrow with !important, so this one has to
     say the same to replace it rather than stack on top of it. */
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 8px 5px !important;
  padding-right: 26px;
}
/* IE/Edge legacy draws its own button on top of the background image. */
select.form-control::-ms-expand { display: none; }

/* Profile gate: while mandatory details are missing, the menus are inert.
   They stay visible and readable - greying them out would look like a fault
   rather than a step still to do. */
.fvw-profile-locked .navbar-nav > li > a:not(#fvw-logout),
.fvw-profile-locked .footer-container a { cursor: not-allowed; }

.fvw-gate-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 1080;
  max-width: 90%;
  padding: 9px 18px;
  border-radius: 4px;
  background: #b4561a;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s linear, transform .2s linear;
}
.fvw-gate-notice.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Home page Highlights: a fixed-height window with the list crawling up
   through it. The height is set here rather than by the content so the
   column beside the webinar card does not grow with the number of
   highlights the admin ticks. */
.fvw-ticker {
  position: relative;
  /* Deep enough to sit level with the video strip beside it, so the second
     row ends on one line rather than leaving a step down its right side. */
  height: 248px;
  overflow: hidden;
}
.fvw-ticker-track {
  margin: 0;
  padding: 0;
  will-change: transform;
}
.fvw-ticker .webinar-news li { list-style: none; }

/* An even step per highlight, so the ticker moves one line's worth at a time
   whether a highlight runs to one line or two. */
.webinar-news li div { min-height: 50px; }
.fvw-ticker .news-detail {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7785;
}

/* A line with no link is not clickable, so it should not read as one. */
.fvw-ticker .webinar-news li > .news-text { cursor: default; }

/* Someone who cannot tolerate motion gets the list still and scrollable. */
@media (prefers-reduced-motion: reduce) {
  .fvw-ticker { overflow-y: auto; }
  .fvw-ticker-track { transform: none !important; }
  .fvw-ticker-clone { display: none; }
}

/* ---- video page ---------------------------------------------------------
   A player with its playlist beside it. The player keeps a 16:9 box whatever
   the file's own size, so the page does not jump as one video is swapped for
   another of different proportions. */
.fvw-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.fvw-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fvw-player-title {
  margin: 14px 0 2px;
  font-family: "Poppins SemiBold";
  font-size: 17px;
  line-height: 1.35;
  color: #272727;
}

.fvw-player-meta {
  margin: 0;
  font-size: 12.5px;
  color: #7a8290;
}

.fvw-playlist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px 10px;
  font-family: "Poppins SemiBold";
  font-size: 14px;
  color: #272727;
}

.fvw-playlist-count {
  font-family: "Poppins Regular";
  font-size: 12px;
  color: #7a8290;
}

/* Scrolls on its own rather than lengthening the page: the list sits beside
   the player and should not push the footer down as videos are added. The
   cap is set from the player's measured height in js/pages/video.js; this
   is the fallback for the moment before that runs. */
.fvw-playlist {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;

  /* Thin rather than the platform default, which is wide enough to crowd
     the thumbnails in a narrow column. */
  scrollbar-width: thin;
  scrollbar-color: #c6cfdd transparent;
}

.fvw-playlist::-webkit-scrollbar { width: 7px; }

.fvw-playlist::-webkit-scrollbar-track {
  background: #f1f4f9;
  border-radius: 4px;
}

.fvw-playlist::-webkit-scrollbar-thumb {
  background: #c6cfdd;
  border-radius: 4px;
}

.fvw-playlist::-webkit-scrollbar-thumb:hover { background: #a9b4c7; }

.fvw-playlist-item {
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.fvw-playlist-item:hover { background: #f1f4f9; }

.fvw-playlist-item.is-playing { background: #e8edfb; }

.fvw-playlist-thumb {
  position: relative;
  flex: 0 0 120px;
  width: 120px;
  height: 68px;
  border-radius: 5px;
  overflow: hidden;
  background: #0d1b3e;
}

.fvw-playlist-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;      /* the row is the click target, not the still */
}

/* The duration sits on the still, as it does on any video thumbnail. */
.fvw-playlist-time {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
}

.fvw-playlist-text { min-width: 0; }

.fvw-playlist-text h6 {
  margin: 0 0 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #272727;

  /* Two lines, then an ellipsis: a long session title should not make one
     row three times the height of its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fvw-playlist-text small { font-size: 11.5px; color: #7a8290; }

/* Below the large breakpoint the playlist sits under the player, so it gets
   its own height back rather than scrolling inside a short box. */
@media (max-width: 991px) {
  .fvw-playlist { max-height: none; margin-bottom: 20px; }
}

/* The header carried no background until the page was scrolled, so at the
   top of every page it blended into the content beneath it. It now sits on
   white with a hairline under it; the deeper shadow is still kept for the
   scrolled state, so the bar still reads as lifting off the page as you go
   down it. */
.navbar.navbar-light {
  background: #fff;
  border-bottom: 1px solid #e6eaf0;
}

.navbar.navbar-light.navbar-shadow { border-bottom-color: transparent; }

/* ---- page breadcrumb ----------------------------------------------------
   Replaces the large page title. It says the same thing in one line, so the
   content starts near the top of the page instead of below a block of
   display type. */
/* A band of its own under the header: a tinted strip with a rule beneath,
   so it reads as the page's own heading area rather than as the first line
   of the content. */
.fvw-crumbbar {
  background: #f4f6fa;
  border-bottom: 1px solid #e6eaf0;
}

.fvw-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  font-size: 13px;
  line-height: 1;
}

.fvw-crumbs a {
  color: #7a8290;
  text-decoration: none;
}

.fvw-crumbs a:hover {
  color: #1046FE;
  text-decoration: none;
}

.fvw-crumbs-sep { color: #c3c9d4; }

.fvw-crumbs-here {
  font-family: "Poppins SemiBold";
  color: #272727;
}

/* ---- entry forms --------------------------------------------------------
   The referral form sat as bare fields on white, with 100px of empty page
   above them. It is now a card: the form reads as one object with a heading
   that says what it is for, and the page starts where the content does. */
.fvw-form-page {
  padding: 36px 0 60px;
}

.fvw-form-card {
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
  padding: 30px 34px 26px;
}

.fvw-form-head {
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid #eef1f6;
}

.fvw-form-head h1 {
  margin: 0 0 6px;
  font-family: "Poppins SemiBold";
  font-size: 24px;
  line-height: 1.25;
  color: #0d1b3e;
}

.fvw-form-head p {
  margin: 0;
  max-width: 56ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6a7481;
}

/* Labels sit above their field as their own line, rather than as loose text
   leaning on the input below. */
.fvw-form-card label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: #4b5563;
}

.fvw-form-card .form-control {
  height: 42px;
  border-color: #dfe4ec;
  border-radius: 7px;
  font-size: 13.5px;
  color: #272727;
}

.fvw-form-card textarea.form-control { height: auto; padding-top: 10px; }

.fvw-form-card .form-control::placeholder { color: #a9b1bd; }

.fvw-form-card .form-control:focus {
  border-color: #1046FE;
  box-shadow: 0 0 0 3px rgba(16, 70, 254, .12);
}

/* A field filled in for you reads as information, not as something broken. */
.fvw-form-card .form-control:disabled {
  background: #f4f6fa;
  color: #6a7481;
}

.fvw-field-note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #98a1ad;
}

.fvw-form-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 20px;
  margin-top: 6px;
  border-top: 1px solid #eef1f6;
}

.fvw-form-foot small { font-size: 11.5px; color: #98a1ad; }

/* The brand blue, not the green the theme's generic button used - green is
   the accent here, and a page's one action should be the primary colour. */
.fvw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 7px;
  background: #1046FE;
  color: #fff;
  font-family: "Poppins Medium";
  font-size: 13.5px;
  letter-spacing: .01em;
}

.fvw-btn-primary:hover,
.fvw-btn-primary:focus { background: #0c3ad6; color: #fff; }

.fvw-btn-primary:disabled { background: #93a6f3; }

.fvw-btn-primary:focus-visible {
  outline: 2px solid #1046FE;
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .fvw-form-card { padding: 22px 18px 20px; }
  .fvw-btn-primary { width: 100%; }
}

/* These pages label their fields with loose text inside .colHeight rather
   than a <label>, so the text is styled through its container. The inputs
   set their own size, so they are unaffected. */
.fvw-form-card .colHeight {
  font-size: 12.5px;
  color: #4b5563;
  margin-bottom: 14px;
}

.fvw-form-card .colHeight .form-control,
.fvw-form-card .colHeight select { margin-top: 5px; }

/* Destructive action: red, and never the same shape as a save button, so it
   is not pressed by habit. */
.fvw-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 44px;
  padding: 0 26px;
  border: 1px solid #e5484d;
  border-radius: 7px;
  background: #fff;
  color: #c02626;
  font-family: "Poppins Medium";
  font-size: 13.5px;
}

.fvw-btn-danger:hover,
.fvw-btn-danger:focus { background: #e5484d; border-color: #e5484d; color: #fff; }

.fvw-btn-danger:focus-visible {
  outline: 2px solid #e5484d;
  outline-offset: 2px;
}

/* The explanatory line above a destructive form. */
.fvw-form-card form > p {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff6f6;
  border: 1px solid #ffdede;
  font-size: 13px;
  line-height: 1.6;
  color: #8a2b2b;
}

/* ---- empty states -------------------------------------------------------
   Nothing scheduled is a normal answer, not a fault, so it is stated plainly
   with somewhere to go next - rather than a stock banner that says the
   opposite of the line beneath it. */
.fvw-empty-state {
  max-width: 520px;
  margin: 10px auto;
  padding: 46px 30px;
  text-align: center;
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
}

.fvw-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #eef2ff;
  color: #1046FE;
  font-size: 23px;
}

.fvw-empty-state h3 {
  margin: 0 0 8px;
  font-family: "Poppins SemiBold";
  font-size: 19px;
  color: #0d1b3e;
}

.fvw-empty-state p {
  margin: 0 auto 22px;
  max-width: 40ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: #6a7481;
}

/* ---- webinar cards ------------------------------------------------------
   Equal-height cards with the action pinned to the foot, so buttons line up
   across a row. Deliberately quiet: the thumbnail is the loud part, and the
   text under it is there to be read rather than to compete with it. */
.fvw-webinar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
  transition: box-shadow .18s ease;
}

/* Shadow only: the card is not a link, so lifting it on hover promised an
   action the whole card does not have. */
.fvw-webinar-card:hover {
  box-shadow: 0 10px 28px rgba(16, 24, 40, .08);
}

.fvw-webinar-thumb {
  position: relative;
  padding-top: 45%;
  background: #0d1b3e;
}

.fvw-webinar-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fvw-webinar-body {
  display: flex;
  flex-direction: column;
  padding: 10px 14px 10px;
}

/* When it is, before what it is called: for a session that has not happened
   yet, the date is the thing being looked for. Grey rather than brand blue -
   it is a timestamp, not a link. */
.fvw-webinar-when {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: #8a93a2;
}

.fvw-webinar-when i { font-size: 11px; }

.fvw-webinar-dot {
  width: 3px;
  height: 3px;
  margin: 0 5px;
  border-radius: 50%;
  background: #cdd3dd;
}

/* Two lines at most. A heading that runs to four lines stops being a heading
   and starts being the paragraph underneath it. */
.fvw-webinar-body h5 {
  margin: 0 0 7px;
  font-family: "Poppins Medium";
  font-size: 13.5px;
  line-height: 1.5;
  color: #16233f;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fvw-webinar-text {
  margin: 0 0 20px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #7a8290;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The action sits below a hairline, so the card reads as content and then a
   thing to do, rather than one block of mixed weight. */
.fvw-webinar-join {
  align-self: flex-start;
  margin-top: auto;
  min-width: 0;
  height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 12.5px;
  text-decoration: none;
}

.fvw-webinar-join:hover { text-decoration: none; }

.fvw-webinar-body > .fvw-webinar-join {
  margin-top: auto;
  padding-top: 0;
}

/* The rule above the action, drawn on the body so it spans the padding. */
.fvw-webinar-text + .fvw-webinar-join {
  position: relative;
  margin-top: auto;
}

.fvw-webinar-text {
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f3f8;
  margin-bottom: 4px;
}

/* The crumb band already separates the page from the header, so the section
   under it does not need the 100px the marketing pages use. */
.fvw-webinar-section,
.fvw-video-section { padding-top: 28px; }

/* The home page has no crumb band under the header, so the slider would
   otherwise start against it. */
.fvw-home-section { padding-top: 24px; }

/* Profile picture field -----------------------------------------------
   The avatar is the field: the camera badge sits on the picture it changes,
   and the native file input behind it is moved off-screen rather than
   hidden, so it still takes focus when the badge is tabbed to. */
.fvw-avatar-field { flex: 0 0 auto; }

/* The header carries the picture, so it runs as a row with the title. */
.fvw-form-head-avatar {
  display: flex;
  align-items: center;
  gap: 22px;
}

.fvw-form-head-text { min-width: 0; }

@media (max-width: 575px) {
  .fvw-form-head-avatar { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.fvw-avatar-shot {
  position: relative;
  width: 96px;
  height: 96px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #1046FE;
}

.fvw-avatar-field .profile-pic {
  width: 100%;
  height: 100%;
  display: block;
}

.fvw-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* Overlapping the ring rather than sitting inside it, as a camera badge
   does, so it reads as attached to the picture and not part of it. */
.fvw-form-card label.fvw-avatar-badge,
.fvw-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1046FE;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.fvw-avatar-badge i { color: inherit; }

.fvw-form-card label.fvw-avatar-badge:hover,
.fvw-avatar-badge:hover { background: #0c3ad6; color: #fff; }

/* The off-screen input cannot show focus, so the badge carries it. */
.fvw-avatar-input:focus + .fvw-avatar-badge {
  outline: 2px solid #1046FE;
  outline-offset: 2px;
}

/* Sits under the blurb, where it reads as a note about the picture beside
   it rather than as a caption squeezed under the circle. */
.fvw-avatar-note {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: #8a93a2;
  word-break: break-all;
}


/* The nav avatar. "rounded-circle" is a Bootstrap class and the public pages
   do not load Bootstrap's CSS, so the shape has to be stated here. */
.navbar .avatar img {
  border-radius: 50%;
  border: 1px solid #d6dbe4;
  background: #fff;
  object-fit: cover;
}

/* Latest Video on the home page -----------------------------------------
   A strip of thumbnails under the slider, linking into the video page. */
.fvw-latest-videos { margin-top: 0; }

/* The second row sits clear of the first without either side needing its
   own spacer, so both headings start on the same line. */
.fvw-home-second { margin-top: 34px; }

/* A section heading, used by both columns of the second row so the two read
   as the same kind of thing. The rule runs the width of the section and the
   title sits on it, which is what marks where one section starts and the
   page background stops. */
.fvw-latest-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e9f2;
}

.fvw-latest-head h3 {
  position: relative;
  margin: 0;
  padding-bottom: 10px;
  font-family: "Poppins SemiBold";
  font-size: 20px;
  line-height: 1.2;
  color: #0d1b3e;
}

/* Sits on the hairline under the title, so the heading owns the rule rather
   than floating above it. */
.fvw-latest-head h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -11px;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: #1046FE;
}

.fvw-latest-head a {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: #1046FE;
}

.fvw-latest-head a:hover { text-decoration: underline; }

.fvw-video-card {
  display: block;
  margin-bottom: 24px;
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
}

.fvw-video-card:hover { text-decoration: none; border-color: #cfd8e8; }

.fvw-video-thumb {
  position: relative;
  display: block;
  padding-top: 56.25%;              /* 16:9, the shape the files are in */
  background: #0d1b3e;
}

.fvw-video-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fvw-video-locked {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: #cfd8e8;
}

/* Sits over the still, so the card reads as something to play rather than
   a picture. */
.fvw-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(16, 70, 254, .92);
  color: #fff;
  font-size: 15px;
}

.fvw-video-text { display: block; padding: 14px 16px 16px; }

.fvw-video-text h6 {
  margin: 0 0 4px;
  font-family: "Poppins Medium";
  font-size: 13.5px;
  line-height: 1.5;
  color: #16233f;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fvw-video-text small { font-size: 11.5px; color: #8a93a2; }

/* An uploaded cover sits where the video still would. */
.fvw-video-thumb img,
.fvw-playlist-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Views, likes and dislikes under the player -----------------------------
   The date and the counts share a line: one says when it happened, the
   other how it has been received, and both are about the video playing. */
.fvw-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.fvw-video-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fvw-video-views {
  font-size: 12.5px;
  color: #8a93a2;
  margin-right: 4px;
}

.fvw-vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid #e3e8f1;
  border-radius: 16px;
  background: #f6f8fc;
  font-size: 12.5px;
  color: #4b5563;
  cursor: pointer;
}

.fvw-vote:hover { background: #eef2f9; }

/* Pressed is shown by the filled icon as well as the colour, so it does not
   rest on colour alone. */
.fvw-vote.is-on {
  border-color: #1046FE;
  background: #eaf0ff;
  color: #1046FE;
}

/* A dislike is not an approval, so it is not shown in the approval colour. */
#fvwDislike.is-on {
  border-color: #d9342b;
  background: #fdeeed;
  color: #d9342b;
}

/* The word is for width that can spare it; the count always shows. */
.fvw-vote-label { display: none; }

@media (min-width: 576px) {
  .fvw-vote-label { display: inline; }
}


/* Home: the Highlights ticker ------------------------------------------
   Each line is a card rather than loose text on the page background: the
   list scrolls, so without an edge a line that is halfway past the bottom
   reads as broken text rather than as the next one coming. */
.fvw-ticker .webinar-news li div.fvw-hl-item {
  position: relative;
  min-height: 0;
  padding: 12px 14px 12px 18px;
  margin: 0 0 10px;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  background: #fff;
}

/* The accent reads as a bullet that does not need its own column. */
.fvw-ticker .fvw-hl-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #1046FE;
}

.fvw-ticker .fvw-hl-item h6 {
  margin: 0;
  font-family: "Poppins Medium";
  font-size: 12.5px;
  line-height: 1.5;
  color: #16233f;
}

.fvw-ticker .news-detail {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #7a8290;
}

/* A linked highlight is the one worth reacting to. */
.fvw-ticker .webinar-news li > a { text-decoration: none; display: block; }
.fvw-ticker .webinar-news li > a:hover .fvw-hl-item { border-color: #1046FE; }

/* The last card is cut by the ticker's edge, so it is faded out: a hard
   crop looks like a rendering fault, a fade looks like more to come. */
.fvw-ticker {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* Home: the next-webinar card is the webinar page's card, so it only needs
   the differences - it stands alone here rather than in a row of three, and
   it sets the height of the top row beside the slider. */
/* The card fills the column so its foot lands level with the slider beside
   it, and the thumbnail takes up the slack rather than the body: growing
   the picture keeps the text block the size it wants to be, where growing
   the body would just open a gap above the button. */
#webinarCard { display: flex; }

#webinarCard .fvw-webinar-card {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

#webinarCard .fvw-webinar-thumb {
  flex: 1 1 auto;
  padding-top: 0;
  min-height: 150px;
}

/* No slack to absorb here, so the button sits straight under the rule. */
#webinarCard .fvw-webinar-join { margin-top: 0; }

#webinarCard .fvw-webinar-body { flex: 0 0 auto; }

#webinarCard .fvw-webinar-body h5 { font-size: 14.5px; }

/* The placeholder shown when nothing is scheduled keeps the card's shape. */
.fvw-webinar-placeholder img { border-radius: .25rem .25rem 0 0; }

/* Footer ----------------------------------------------------------------
   The same navy as the card thumbnails, the blue accent the section
   headings use, and one muted tone for secondary text, so the foot of the
   page belongs to the rest of it. */
.fvw-footer {
  background: #0d1b3e;
  color: #c3cde1;
  font-size: 13px;
}

.fvw-footer-top {
  padding: 42px 0 30px;
}

.fvw-footer-head {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 10px;
  font-family: "Poppins Medium";
  font-size: 15px;
  letter-spacing: .01em;
  color: #fff;
}

/* A short accent rather than a rule across the column: the same device the
   page's section headings use. */
.fvw-footer-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: #2f6bff;
}

.fvw-footer-links {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.fvw-footer-links li { margin-bottom: 9px; }

.fvw-footer-links a,
.fvw-footer-contact a,
.fvw-footer-cta {
  color: #c3cde1;
  text-decoration: none;
}

.fvw-footer-links a:hover,
.fvw-footer-contact a:hover { color: #fff; text-decoration: none; }

/* One shape in one colour: four brand colours in a row pull the eye away
   from the contact details, which are what people come down here for. */
.fvw-footer-social { display: flex; gap: 8px; }

.fvw-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  color: #c3cde1;
  font-size: 14px;
  text-decoration: none;
}

.fvw-social:hover { background: #2f6bff; color: #fff; text-decoration: none; }

.fvw-footer-news-title {
  margin: 0 0 4px;
  font-family: "Poppins Medium";
  font-size: 13.5px;
  color: #fff;
}

.fvw-footer-text { margin: 0 0 12px; line-height: 1.7; }

.fvw-footer-cta {
  display: inline-flex;
  align-items: center;
  color: #6f9bff;
}

.fvw-footer-cta:hover { color: #fff; text-decoration: none; }

.fvw-footer-company {
  margin: 0 0 12px;
  font-family: "Poppins Medium";
  font-size: 13.5px;
  color: #fff;
}

.fvw-footer-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The icon holds its own column, so the second line of the address lines up
   with the first rather than tucking under the icon. */
.fvw-footer-contact li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  line-height: 1.7;
}

.fvw-footer-contact i {
  flex: 0 0 auto;
  width: 14px;
  margin-top: 4px;
  color: #6f9bff;
  font-size: 12px;
}

.fvw-footer-bottom {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.fvw-footer-bottom p {
  margin: 0;
  font-size: 12px;
  color: #93a1bd;
  text-align: center;
}

/* Header ----------------------------------------------------------------
   The footer is a solid navy block, and against it the bar read as an
   unfinished edge: white on white with a hairline. Given the logo is dark
   type on light, the bar stays light - but it is given a tinted ground, a
   soft lift and a brand rule along the top, so it reads as a bar rather
   than as the top of the page. */
.navbar.navbar-light {
  background: linear-gradient(180deg, #fff 0%, #f6f8fc 100%);
  border-bottom: 1px solid #dfe5ef;
  box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

/* The same solid blue the footer's heading accents use, as a rule across
   the top of the page. */
.navbar.navbar-light::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #2f6bff;
}

.navbar.navbar-light.navbar-shadow {
  background: #fff;
  border-bottom-color: #e6eaf0;
  box-shadow: 0 6px 20px rgba(13, 27, 62, .08);
}

/* Navy rather than the template's near-black, matching the headings. */
.navbar-light .navbar-nav .nav-link {
  color: #0d1b3e;
  transition: color .15s ease;
}

.navbar-light .navbar-nav .nav-link:hover { color: #1046FE; }

/* The page you are on is marked under the label rather than by colour
   alone, so it is still legible if the colours wash out. */
.navbar-light .navbar-nav .nav-item { position: relative; }

.navbar-light .navbar-nav .nav-item > .nav-link::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: #1046FE;
  opacity: 0;
  transition: opacity .15s ease;
}

.navbar-light .navbar-nav .nav-item > .nav-link:hover::after,
.navbar-light .navbar-nav .nav-item > .nav-link.is-here::after { opacity: 1; }

/* User menu -------------------------------------------------------------
   Who you are at the top, the two everyday pages next, and the two ways of
   leaving set apart at the foot - so neither is reached by a slip of the
   hand on the way to Profile. */
.dropdown-menu.fvw-usermenu {
  left: auto;
  right: 0;
  min-width: 248px;
  padding: 0;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(13, 27, 62, .14);
  overflow: hidden;
}

.fvw-usermenu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: #f6f8fc;
  border-bottom: 1px solid #eceff5;
}

.fvw-usermenu-avatar img {
  display: block;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  border: 1px solid #d6dbe4;
  object-fit: cover;
}

.fvw-usermenu-who { min-width: 0; }

.fvw-usermenu-who strong {
  display: block;
  font-family: "Poppins Medium";
  font-size: 13px;
  color: #0d1b3e;
  text-transform: capitalize;
}

/* The email is what tells two accounts apart, so it is shown rather than
   left to be guessed at. */
.fvw-usermenu-who small {
  display: block;
  font-size: 11px;
  color: #8a93a2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fvw-usermenu-list { padding: 6px; }

.fvw-usermenu-foot {
  border-top: 1px solid #eceff5;
}

.fvw-usermenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: #22304f;
  text-decoration: none;
}

.fvw-usermenu-item i {
  width: 15px;
  font-size: 12px;
  color: #8a93a2;
  text-align: center;
}

.fvw-usermenu-item:hover {
  background: #f1f5ff;
  color: #1046FE;
  text-decoration: none;
}

.fvw-usermenu-item:hover i { color: #1046FE; }

/* Signing out ends the session, so it is coloured for what it does. */
.fvw-usermenu-item.is-danger,
.fvw-usermenu-item.is-danger i { color: #d9342b; }

.fvw-usermenu-item.is-danger:hover {
  background: #fdf0ef;
  color: #b4231b;
}

.fvw-usermenu-item.is-danger:hover i { color: #b4231b; }

/* Playlist row text: the title at the top, the date and the view count on
   one line at the foot, so both line up down their own edge however many
   lines the title above them runs to. */
.fvw-playlist-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fvw-playlist-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.fvw-playlist-meta span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* "New" badge on a video thumbnail. Top-left, away from the duration badge
   in the opposite corner, so the two never collide. */
.fvw-new-badge {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e8372c;
  color: #fff;
  font-family: "Poppins Medium";
  font-size: 10px;
  letter-spacing: .04em;
  line-height: 16px;
}

/* The home card's thumbnail is larger, so the badge is too. */
.fvw-video-thumb .fvw-new-badge {
  left: 10px;
  top: 10px;
  padding: 3px 10px;
  font-size: 11px;
}

/* The stacked layout runs the slider straight into this heading, so it needs
   the room the two-column layout gets from the row gap. */
.fvw-mobile-head { margin-top: 28px; }

/* Review box under the player ------------------------------------------- */
.fvw-review {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eceff5;
}

.fvw-review-label {
  display: block;
  margin-bottom: 7px;
  font-family: "Poppins Medium";
  font-size: 13px;
  color: #16233f;
}

.fvw-review-box {
  height: auto;
  border-color: #dfe4ec;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

.fvw-review-box:focus {
  border-color: #1046FE;
  box-shadow: 0 0 0 3px rgba(16, 70, 254, .12);
}

/* The message sits on the button's line rather than above the box, so the
   layout does not shift when it appears. */
.fvw-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.fvw-review-note {
  font-size: 12px;
  color: #d9342b;
}

.fvw-review-note.is-saved { color: #2ba84a; }

.fvw-review-save {
  min-width: 0;
  height: 38px;
  padding: 0 20px;
  font-size: 12.5px;
}

/* Slider images. The radius is set here rather than in the vendored
   owl.carousel.css, so a plugin update does not take it away again. */
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  border-radius: .25rem;
}

/* Home: the card when nothing is scheduled. Centred in the space the real
   card would fill, so the row still reads as two blocks of equal weight. */
.fvw-webinar-none {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px;
}

.fvw-webinar-none-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #eef3ff;
  color: #1046FE;
  font-size: 20px;
}

.fvw-webinar-none h5 {
  margin: 0 0 6px;
  font-family: "Poppins Medium";
  font-size: 15px;
  color: #16233f;
}

.fvw-webinar-none p {
  margin: 0 0 18px;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: #7a8290;
}

/* The button centres itself here rather than sitting at the left edge, and
   has no hairline above it - there is no content for it to follow. */
.fvw-webinar-none .fvw-webinar-join {
  align-self: center;
  margin-top: 0;
  border-top: 0;
}