:root {
--primary:#2FA4E6;
--secondary:#86cb92;
--dark: #000;
--light: #eae8e2;
--gray: #4b494c;
--lightgray: #585757;
--lightgray_300: #969696;
--lightgray_100: #1c1c1c;
--error: #df3a47;
--success: #3ac07c;
--warning: #F98600;
--green: #00BA34;
--yellow: #FF9C64;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 4px;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 3px;
background: #cccccc;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(70,70,70,0.6);
}
/********************************** Theme *********************************/
#mainnav {
background-color: var(--primary);
color: var(--light);
}
#mainnav-menu>.active-sub>a, #mainnav-menu>.active-sub>a:hover {
color: #fff;
background-color: rgba(255, 255, 255, 0.13);
border-radius: 8px;
}
#mainnav-menu>li>a:hover, #mainnav-menu>li>a:active {
color: #cbcbcb;
}
#mainnav-menu>.active {
background-color: var(--primary);
}
.mainnav-profile .profile-wrap {
background-color: var(--primary);
}
.mainnav-profile .mnp-name {
color: #fff;
}
#mainnav .mainnav-profile .list-group-item {
color: #fff;
background-color: var(--primary);
}
#mainnav .mainnav-profile .list-group-item:hover {
background-color:#289ebc;
color: #fff;
}
#mainnav-menu .active:not(.active-sub)>a {
color: #fff;
}
#mainnav-menu>.active .active {
/*background-color: rgba(255, 255, 255, 0.13);*/
border-radius: 8px;
}
#mainnav-menu>.active-sub .active-sub>a, #mainnav-menu>.active-sub .active-sub>a:hover {
color: #fff;
font-weight: 700;
}
.navbar-brand {
background-color: var(--primary);
}
#content-container:before {
background-color: #F7F7F7;
}
.navbar-content {
background-color: #F7F7F7;
}
.page-header, #page-head, #page-head h1, #page-head h2, #page-head h3, #page-head h4, #page-head h5, #page-head h6, #page-head .text-main, #page-head .breadcrumb li, #page-head .breadcrumb li a, #page-head .breadcrumb .active {
color: var(--dark);
}
#mainnav-menu ul a:hover, .menu-popover .sub-menu ul a:hover {
color: #cbcbcb;
}
#content-container {
background-color: #F7F7F7;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 600;
color: var(--dark);
}
.hd1_48{
font-style: normal;
font-size: 48px;
line-height: 60px;
vertical-align: top;
color: #000;
}
.hd2_36{
font-style: normal;
font-size: 36px;
line-height: 48px;
vertical-align: top;
color: #000;
}
.hd3_24{
font-style: normal;
font-size: 24px;
line-height: 32px;
vertical-align: top;
font-weight: 600;
color: #000;
}
.hd4_20{
font-style: normal;
font-size: 20px;
line-height: 28px;
vertical-align: top;
font-weight: 500;
color: #000;
}
.hd5_15{
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 22px;
vertical-align: top;
color: #585757;
}
.hd5_16{
font-style: normal;
font-size: 16px;
line-height: 24px;
vertical-align: top;
color: #969696;
}
.hd6_13{
font-style: normal;
font-size: 13px;
line-height: 21px;
vertical-align: top;
color: #969696;
}
.hd7_13{
font-style: normal;
font-size: 12px;
line-height: 19px;
vertical-align: top;
color: #969696;
}
.hd_5_bold{
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
.p1_20{
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #585757;
}
.p2_16{
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #585757;
}
.p3_13{
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: #969696;
}
.status_avatar{
width: 8px;
height: 8px;
border-radius: 100px;
display: inline-block;
}
.status_avatar_active{
background: #0085FF;
}
.status_avatar_success{
background: #00BA34;
}
.status_avatar_warning{
background: #F98600;
}
.status_avatar_danger{
background: #E92C2C;
}
.text-warning{
color: var(--warning);
}
.text-dark{
color: var(--dark) !important;
}
.text-lightgray{
color: var(--lightgray);
}
.text-lightgray_300{
color: var(--lightgray_300) !important;
}
.text-lightgray_100{
color: var(--lightgray_100) !important;
}
.text-green{
color: var(--green) !important;
}
.fit-content {
width: fit-content;
}
.flex-vm-shrink {
display: flex;
align-items: center;
flex-shrink: 0;
}
.text-primary,
a.text-primary:hover,
a.text-primary:focus {
color: var(--primary) !important;
}
.text-danger{
color: var(--error);
}
.label{
font-size: 13px;
}
.main-title{
font-size: 50px;
font-weight: 700;
color: var(--dark);
}
.section-title{
font-size: 32px;
font-weight: 600;
color: var(--dark);
}
.subhead{
font-size: 24px;
font-weight: 400;
color: var(--dark);
}
.object-title{
font-size: 18px;
font-weight: 600;
text-transform: none;
color: var(--dark);
}
.link{
font-size: 16px !important;
font-weight: 600 !important;
color: var(--dark);
}
.text-body1{
font-size: 16px;
font-weight: 400;
color: var(--dark);
}
.text-body2{
font-size: 14px;
font-weight: 400;
color: var(--dark);
}
.overline{
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--dark);
}
.small{
font-size: 11px !important;
font-weight: 400 !important;
color: var(--dark);
}
.text-normal {
font-weight: 400 !important;
}
.primary-btn-block{
display: block;
width: 100%;
padding: 20px;
}
.primary-button-fill {
background-color: var(--primary);
color: var(--light);
border: var(--primary) 1px solid;
}
button[disabled], html input[disabled] {
cursor: not-allowed;
}
.primary-btn-circle{
border-radius: 50%;
padding: 8px 14px;
font-size: 20px;
font-weight: 900;
color: var(--dark);
}
.primary-btn-circle.large{
padding: 20px 28px;
}
.dark-light-text{
color: rgba(36, 47, 64, 0.5);
}
.primary-text{
color: var(--primary) !important;
}
.danger-text{
color: var(--error);
}
.lightgray_300-text{
color: var(--lightgray_300) !important;
}
.yellow-text{
color: var(--yellow);
}
.bgc-light{
background-color: #fff !important;
}
.bgc-light-15{
background-color: rgba(234,232,226,0.15);
}
.bgc-light-30{
background-color: rgba(234,232,226,0.3);
}
.bg-primary-9{
background: linear-gradient(0deg, rgba(34, 178, 217, 0.09), rgba(34, 178, 217, 0.09)), linear-gradient(0deg, #FFFFFF, #FFFFFF);
}
.bg-primary-1{
background: rgba(34, 162, 217, 0.1);
}
/****************************************************************************/
.flex-vm{
display: flex;
align-items: center;
/* justify-content: center; */
}
.flex-vm-center{
display: flex;
align-items: center;
justify-content: center;
}
.flex{
display: flex;
}
.flex-container, .xs-flex-container{
display: flex;
}
.justify-center{
justify-content: center;
}
@media (max-width: 1200px) {
.flex-container{
flex-direction: column;
}
}
@media (max-width: 768px) {
.xs-flex-container{
flex-direction: column;
}
}
.warning-menu-bar{
float: right;
margin-top: 7px;
}
.flex-0{
flex: 0;
}
.flex-1{
flex-grow: 1 !important;
}
.flex-2{
flex-grow: 2;
}
.flex-3{
flex-grow: 3;
}
.flex-4{
flex-grow: 4;
}
.flex-5{
flex-grow: 5;
}
.flex-6{
flex-grow: 6;
}
/****************************************************************************/
.pt-10{
font-size: 10px;
}
.pt-12{
font-size: 12px;
}
.pt-13{
font-size: 13px;
}
.pt-14{
font-size: 14px;
}
.pt-15{
font-size: 15px;
}
.pt-16{
font-size: 16px;
}
.pt-17{
font-size: 17px;
}
.pt-18{
font-size: 18px;
}
.pt-19{
font-size: 19px;
}
.pt-20{
font-size: 20px;
}
.pt-21{
font-size: 21px;
}
.pt-24{
font-size: 24px;
line-height: 32px;
}
.pt-25{
font-size: 25px;
}
.pt-30{
font-size: 30px;
}
.pt-35{
font-size: 35px;
}
.pt-45{
font-size: 45px;
}
.pt-60{
font-size: 60px !important;
}
.pt-70{
font-size: 70px;
}
.mar-top-5{
margin-top: 5px;
}
.mar-btm-5{
margin-bottom: 5px;
}
.mar-rgt-5{
margin-right: 5px;
}
.mar-rgt-2{
margin-right: 2px;
}
.pad-top-5{
padding-top: 5px;
}
.pad-rgt-5{
padding-right: 5px;
}
.pad-lft-5{
padding-left: 5px !important;
}
.p-0-top-bottom {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.pb-0{
padding-bottom: 0px !important;
}
.pb-10{
padding-bottom: 10px !important;
}
.pb-30, .py-30 {
padding-bottom: 30px !important;
}
.pb-20{
padding-bottom: 20px !important;
}
.pt-30, .py-30 {
padding-top: 30px !important;
}
.pt-0{
padding-top: 0;
}
.m-btm-30{
margin-bottom: 30px;
}
.m-rgt-5{
margin-right: 5px;
}
.m-lft-5{
margin-left: 5px;
}
.m-sm-top {
margin-top: 10px !important;
}
.m-sm-bottom {
margin-bottom: 10px !important;
}
.m-0 {
margin: 0 !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.p-0-right {
padding-right: 0 !important;
}
.m-0-bottom {
margin-bottom: 0 !important;
}
.m-0-top {
margin-top: 0 !important;
}
.m-md-top {
margin-top: 20px !important;
}
.mb-20{
margin-bottom: 20px;
}
.mb-40{
margin-bottom: 40px;
}
.mt-10, .my-10 {
margin-top: 10px!important;
}
.mb-10, .my-10 {
margin-bottom: 10px!important;
}
.mb-100{
margin-bottom: 100px !important;
}
.ml-8{
margin-left: 8px;
}
.ml-5{
margin-left: 5px;
}
.ml-10{
margin-left: 10px;
}
.ml-20{
margin-left: 20px;
}
.ml-30{
margin-left: 30px;
}
.ml-40{
margin-left: 40px;
}
.ml-50{
margin-left: 50px;
}
.mt-3{
margin-top: 3px;
}
.mt-5{
margin-top: 5px;
}
.mt-20{
margin-top: 20px;
}
.mt-30{
margin-top: 30px;
}
.mt-40{
margin-top: 40px;
}
.mt-50{
margin-top: 50px;
}
.mt-60{
margin-top: 60px;
}
.mt-80{
margin-top: 80px;
}
.mt-100{
margin-top: 100px;
}
.mt-120{
margin-top: 120px;
}
.mr-10{
margin-right: 10px;
}
.mr-20{
margin-right: 20px;
}
.mr-30{
margin-right: 30px;
}
.pdt-1{
padding-top: 10px;
}
.pdl-1{
padding-left: 10px;
}
.pdl-2{
padding-left: 20px !important;
}
.pdl-3{
padding-left: 30px;
}
.pd-15{
padding: 15px !important;
}
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.space-between {
justify-content: space-between;
}
.duration_pricing_item{
padding: 10px 5px;
border: 1px solid #999;
border-radius: 5px;
}
.word_break{
word-break: break-all;
}
/******************************************************** Service Color *******************************************************************/
.service-color-1--bd-light {
background-color: #FF961B !important;
}
.service-color-1--bd {
border-color: #F98600 !important;
}
.service-color-1--app{
background-color: rgba(249, 134, 0, .1) !important;
color: #FF961B !important;
border: none !important;
}
.service-color-2--bd-light {
background-color: rgba(255,0,0,.5) !important;
}
.service-color-2--bd {
border-color: red !important;
}
.service-color-2--app{
background-color: rgba(255,0,0,.5) !important;
color: rgba(255,0,0) !important;
border: none !important;
}
.service-color-3--bd-light {
background-color: rgba(196,0,255,.5) !important;
}
.service-color-3--bd {
border-color: #c400ff !important;
}
.service-color-3--app{
background-color: rgba(196,0,255,.1) !important;
color: rgba(196,0,255) !important;
border: none !important;
}
.service-color-4--bd-light {
background-color: rgba(0, 186, 52,.5) !important;
}
.service-color-4--bd {
border-color: #00BA34 !important;
}
.service-color-4--app{
background-color: rgba(0, 186, 52,.1) !important;
color: rgba(0, 186, 52) !important;
border: none !important;
}
.service-color-5--bd-light {
background-color: rgba(0,85,255,.5) !important;
}
.service-color-5--bd {
border-color: #05f !important;
}
.service-color-5--app{
background-color: rgba(0, 85, 255,.1) !important;
color: rgba(0, 85, 255) !important;
border: none !important;
}
.service-color-6--bd-light {
background-color: rgba(0,179,216,.5) !important;
}
.service-color-6--bd {
border-color: #2FA4E6 !important;
}
.service-color-6--app{
background-color: rgba(0,179,216,.1) !important;
color: rgba(0,179,216) !important;
border: none !important;
}
.service-color-7--bd-light {
background-color: rgba(0,38,255,.5) !important;
}
.service-color-7--bd {
border-color: rgba(0,38,255) !important;
}
.service-color-7--app{
background-color: rgba(0,38,255,.1) !important;
color: rgba(0,38,255) !important;
border: none !important;
}
.service-color-8--bd-light {
background-color: rgba(0,178,255,.5) !important;
}
.service-color-8--bd {
border-color: rgba(0,178,255) !important;
}
.service-color-8--app{
background-color: rgba(0,178,255,.1) !important;
color: rgba(0,178,255) !important;
border: none !important;
}
.service-color-9--bd-light {
background-color: rgba(102,0,255,.5) !important;
}
.service-color-9--bd {
border-color: rgba(102,0,255) !important;
}
.service-color-9--app{
background-color: rgba(102,0,255,.1) !important;
color: rgba(102,0,255) !important;
border: none !important;
}
.service-color-10--bd-light {
background-color: rgba(255,0,127,.5) !important;
}
.service-color-10--bd {
border-color: rgba(255,0,127) !important;
}
.service-color-10--app{
background-color: rgba(255,0,127,.1) !important;
color: rgba(255,0,127) !important;
border: none !important;
}
.service-color-11--bd-light {
background-color: rgba(0,230,142,.5) !important;
}
.service-color-11--bd {
border-color: rgba(0,230,142) !important;
}
.service-color-11--app{
background-color: rgba(0,230,142,.1) !important;
color: rgba(0,230,142) !important;
border: none !important;
}
.service-color-12--bd-light {
background-color: rgba(200,255,0,.5) !important;
}
.service-color-12--bd {
border-color: rgba(200,255,0) !important;
}
.service-color-12--app{
background-color: rgba(200,255,0,.1) !important;
color: rgba(200,255,0) !important;
border: none !important;
}
.service-color-13--bd-light {
background-color: rgba(255,46,227,.5) !important;
}
.service-color-13--bd {
border-color: rgba(255,46,227) !important;
}
.service-color-13--app{
background-color: rgba(255,46,227,.1) !important;
color: rgba(255,46,227) !important;
border: none !important;
}
.service-color-14--bd-light {
background-color: rgba(242,0,255,.5) !important;
}
.service-color-14--bd {
border-color: rgba(242,0,255) !important;
}
.service-color-14--app{
background-color: rgba(242,0,255,.1) !important;
color: rgba(242,0,255) !important;
border: none !important;
}
.service-color-15--bd-light {
background-color: rgba(0,132,255,.5) !important;
}
.service-color-15--bd {
border-color: rgba(0,132,255) !important;
}
.service-color-15--app{
background-color: rgba(0,132,255,.1) !important;
color: rgba(0,132,255) !important;
border: none !important;
}
.service-color-16--bd-light {
background-color: rgba(255,47,0,.5) !important;
}
.service-color-16--bd {
border-color: rgba(255,47,0) !important;
}
.service-color-16--app{
background-color: rgba(255,47,0,.1) !important;
color: rgba(255,47,0) !important;
border: none !important;
}
.service-color-17--bd-light {
background-color: rgba(189,0,94,.5) !important;
}
.service-color-17--bd {
border-color: rgba(189,0,94) !important;
}
.service-color-17--app{
background-color: rgba(189,0,94,.1) !important;
color: rgba(189,0,94) !important;
border: none !important;
}
.service-color-18--bd-light {
background-color: rgba(189,0,0,.5) !important;
}
.service-color-18--bd {
border-color: rgba(189,0,0) !important;
}
.service-color-18--app{
background-color: rgba(189,0,0,.1) !important;
color: rgba(189,0,0) !important;
border: none !important;
}
.service-color-19--bd-light {
background-color: rgba(0,217,255,.5) !important;
}
.service-color-19--bd {
border-color: rgba(0,217,255) !important;
}
.service-color-19--app{
background-color: rgba(0,217,255,.1) !important;
color: rgba(0,217,255) !important;
border: none !important;
}
.service-color-20--bd-light {
background-color: rgba(149,0,255,.5) !important;
}
.service-color-20--bd {
border-color: rgba(149,0,255) !important;
}
.service-color-20--app{
background-color: rgba(149,0,255,.1) !important;
color: rgba(149,0,255) !important;
border: none !important;
}
.service-color-21--bd-light {
background-color: rgba(224,0,0,.5) !important;
}
.service-color-21--bd {
border-color: rgba(224,0,0) !important;
}
.service-color-21--app{
background-color: rgba(149,0,255,.1) !important;
color: rgba(149,0,255) !important;
border: none !important;
}
.service-color-22--bd-light {
background-color: rgba(0,209,24,.5) !important;
}
.service-color-22--bd {
border-color: rgba(0,209,24) !important;
}
.service-color-22--app{
background-color: rgba(0,209,24,.1) !important;
color: rgba(0,209,24) !important;
border: none !important;
}
.service-color-23--bd-light {
background-color: rgba(111,255,0,.5) !important;
}
.service-color-23--bd {
border-color: rgba(111,255,0) !important;
}
.service-color-23--app{
background-color: rgba(111,255,0,.1) !important;
color: rgba(111,255,0) !important;
border: none !important;
}
.service-color-24--bd-light {
background-color: rgba(255,0,174,.5) !important;
}
.service-color-24--bd {
border-color: rgba(255,0,174) !important;
}
.service-color-24--app{
background-color: rgba(255,0,174,.1) !important;
color: rgba(255,0,174) !important;
border: none !important;
}
.service-color-25--bd-light {
background-color: rgba(230,0,115,.5) !important;
}
.service-color-25--bd {
border-color: rgba(230,0,115) !important;
}
.service-color-24--app{
background-color: rgba(230,0,115,.1) !important;
color: rgba(230,0,115) !important;
border: none !important;
}
.service-color-26--bd-light {
background-color: rgba(255,234,0,.5) !important;
}
.service-color-26--bd {
border-color: rgba(255,234,0) !important;
}
.service-color-26--app{
background-color: rgba(255,234,0,.1) !important;
color: rgba(255,234,0) !important;
border: none !important;
}
.service-color-27--bd-light {
background-color: rgba(255,187,0,.5) !important;
}
.service-color-27--bd {
border-color: rgba(255,187,0) !important;
}
.service-color-27--app{
background-color: rgba(255,187,0,.1) !important;
color: rgba(255,187,0) !important;
border: none !important;
}
.service-color-28--bd-light {
background-color: rgba(0,242,194,.5) !important;
}
.service-color-28--bd {
border-color: rgba(0,242,194) !important;
}
.service-color-28--app{
background-color: rgba(0,242,194,.1) !important;
color: rgba(0,242,194) !important;
border: none !important;
}
.service-color-29--bd-light {
background-color: rgba(157,255,0,.5) !important;
}
.service-color-29--bd {
border-color: rgba(157,255,0) !important;
}
.service-color-29--app{
background-color: rgba(157,255,0,.1) !important;
color: rgba(157,255,0) !important;
border: none !important;
}
.service-color-30--bd-light {
background-color: rgba(15,224,0,.5) !important;
}
.service-color-30--bd {
border-color: rgba(15,224,0) !important;
}
.service-color-30--app{
background-color: rgba(15,224,0,.1) !important;
color: rgba(15,224,0) !important;
border: none !important;
}
.service-color-31--bd-light {
background-color: rgba(255,140,0,.5) !important;
}
.service-color-31--bd {
border-color: rgba(255,140,0) !important;
}
.service-color-31--app{
background-color: rgba(255,140,0,.1) !important;
color: rgba(255,140,0) !important;
border: none !important;
}
.service-color-32--bd-light {
background-color: rgba(229,255,0,.5) !important;
}
.service-color-32--bd {
border-color: rgba(229,255,0) !important;
}
.service-color-32--app{
background-color: rgba(229,255,0,.1) !important;
color: rgba(229,255,0) !important;
border: none !important;
}
/*************************************************************************************************/
.color-picker-modal_serviceColorCircle {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
margin: 12px;
border-radius: 50%;
cursor: pointer;
border: 2px solid #FFFFFF;
box-shadow: 0px 1px 3px rgb(0 0 0 / 10%), 0px 2px 1px rgb(0 0 0 / 6%), 0px 1px 1px rgb(0 0 0 / 8%);
}
.color-picker-modal_tickIcon{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: #fff;
font-weight: 800;
font-size: 40px;
}
.service-details_media{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.service-details_upload{
margin: 3px;
width: 480px;
height: 170px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 65px 16px;
background: #F7F7F7;
border: 2px dashed #E8E8E8;
border-radius: 6px;
flex: none;
flex-grow: 0;
}
.service-details_uploadImage{
color: #8c8b88;
/* display: block !important; */
margin-right: 8px;
text-align: center;
}
.service-details_imagesList{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
min-height: 200px;
}
.service-details_image{
margin: 3px;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
width: 228px;
height: 144px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
border-radius: 4px;
cursor: pointer;
}
.b-modal_modal{
z-index: 100000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
padding: 1.5rem;
overflow: auto;
overscroll-behavior-y: contain;
padding: 0px !important;
background-color: rgb(0, 0, 0) !important;
display: none;
}
.b-modal_modal header{
width: 100%;
padding: 1.5rem;
}
.cr-slider{
display: none;
}
.img_show_content{
height: calc(100% - 80px);
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
@media (max-width: 480px) {
.business-header_header_28oO2 {
width: 600px;
}
}
.business-header_header{
border-radius: 8px;
height: 360px;
background-position: 50%;
background-size: cover;
position: relative;
padding: 1.5rem;
overflow: hidden;
z-index: 2;
max-width: 100%;
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.column {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
/* .column, .flex, .row {
--grid-gap: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
} */
.business-header_actionRow {
max-height: 32px
}
.business-header_nameRow {
padding-bottom: 4px;
}
.flex-center, .items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.business-avatar_logoWrapper-comment {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #D6D6D7;
display: flex;
justify-content: center;
align-items: center;
}
.business-avatar_logoWrapper {
position: relative;
width: 112px;
}
.business-avatar_logoWrapper_top {
position: relative;
}
.business-avatar_logoWrapper.map_sidebar_log_logWrapper {
width: 80px !important;
}
.business-avatar_logoWrapper.xs {
width: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.business-avatar_logoWrapper.xxs {
width: 35px;
}
/* .mainnav-sm .business-avatar_logoWrapper.xs {
width: 40px;
left: 5px;
} */
.icon-business-profile{
/* font-size: 60px; */
}
.xs .icon-business-profile{
font-size: 24px;
}
.icon-business-profile1{
font-size: 11px;
}
.mainnav-sm .xs .icon-business-profile{
font-size: 15px;
}
.business-avatar_logoPlaceholder {
width: 112px;
height: 112px;
border: 4px solid #fff;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #d6d6d7;
}
.business-avatar_logoPlaceholder_top {
width: 40px;
height: 40px;
border: 4px solid #fff;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #d6d6d7;
font-size: 14px !important;
}
.business-avatar_logo {
width: 112px;
height: 112px;
border: 4px solid #fff;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.business-avatar_logo_award {
width: 35px;
height: 35px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.award_achievement_img {
width: 100%;
height: 100%;
/* border-radius: 50%; */
-o-object-fit: cover;
object-fit: cover;
}
.plan_item_lock {
width: 100%;
height: 180px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* background-color: white; */
border-radius: 10px;
/* border: 1px solid #E8E8E8; */
}
.mainnav-sm .xs.footer-mobile-center {
display: flex;
justify-content: center;
width: 54px;
}
.mainnav-sm .footer-nav-achievement {
/* width: 54px; */
transition: width 0.5s ease-in-out;
}
.business-avatar_logo_top {
width: 40px;
height: 40px;
border: 4px solid #fff;
border-radius: 50%;
object-fit: cover;
}
#notification_badge {
font-size: 0.8rem !important;
}
.award_item_bottom {
border: 1px solid rgba(34,162, 217, 0.4);
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 35px;
font-size: 16px;
padding: 10px;
border-radius: 10px;
}
.footer-nav-achievement {
position: absolute;
bottom: 30px;
transition: width 0.5s ease-in-out;
/* width: 300px; */
}
.business-avatar_logo-comment {
width: 50px;
height: 50px;
border: 4px solid #fff;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.xs .business-avatar_logoPlaceholder{
width: 60px;
height: 60px;
}
.xxs .business-avatar_logoPlaceholder{
width: 35px;
height: 35px;
}
.mainnav-sm .xs .business-avatar_logoPlaceholder{
width: 40px;
height: 40px;
}
.detailed_page_content.business-avatar_logoPlaceholder{
width: 60px !important;
height: 60px !important;
}
.detailed_page_content.business-avatar_logoPlaceholder.custom_log_Wrapper{
width: 80px !important;
height: 80px !important;
}
.xs .business-avatar_logoPlaceholder.cart{
width: 48px;
height: 48px;
}
.xs .business-avatar_logo{
width: 60px;
height: 60px;
}
.xxs .business-avatar_logo{
width: 35px;
height: 35px;
}
.business-header_businessName {
color: #fff;
padding-left: 20px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-height: 200px;
}
.service_name_span{
border-left: 2px solid;
margin-left: 10px;
padding-left: 10px;
}
.voucher-service_serviceWrapper{
flex: 2;
position: relative;
-webkit-box-flex: 2;
-ms-flex: 2;
border-left: 3px solid;
width: 90%;
}
.voucher-service_item{
flex: 1;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
}
.voucher-service_size--16_Si_Sf {
font-size: 16px;
font-weight: 500;
line-height: 1.5em;
}
.voucher-service_serviceHeader_4e-l6 {
line-height: 16px;
margin-left: 12px;
margin-bottom: 8px;
}
.voucher-service_size--12_2xbIY {
font-size: 12px;
font-weight: 500;
line-height: 1.5em;
}
.voucher-service_serviceSubHeader_19wp3 {
line-height: 12px;
color: #8c8b88;
margin-left: 12px;
}
.voucher-service_serviceRemove_2PQ6i {
color: #ef153d;
cursor: pointer;
}
.service_item_list, .service_item_list_all{
padding: 16px;
border-radius: 8px;
background-color: #f9f9f9;
margin-bottom: 14px;
border: 1px solid #dbdbdb;
}
.service_action_group{
display: none;
}
.voucher-service_serviceInputs_34sIn{
margin: 0 -12px;
padding-top: 20px;
}
.services-multi-selector_optionSeparator_2Fn74 {
margin: 0 1rem 0 12px;
width: 3px;
height: 32px;
}
.btn-w-100{
width: 100px;
}
.btn-w-125{
width: 125px;
}
.panel-title{
padding: 10px 20px;
}
.time_tr td{
padding-top: 20px !important;
padding-bottom: 20px !important;
}
#mainnav-menu a {
font-size: 16px;
}
.book-service_item_list{
background-color: #f9f9f9;
padding: 16px;
border-radius: 8px;
margin-bottom: 16px;
}
.membership_history_item{
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 12px 0;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.membership_history_item_left{
vertical-align: middle;
font-size: 25px;
margin-right: 10px;
}
/* .nav-tabs>li.active{
border-top: 1px solid #cacaca;
border-left: 1px solid #cacaca;
border-right: 1px solid #cacaca;
} */
/* .tab-content{
border: 1px solid #cacaca;
box-shadow: 0.1em 0.3em 0.5em rgb(0 0 0 / 30%);
} */
.inline-pannel{
box-shadow: none;
}
.panel-controlled{
padding: 24px;
}
.panel-controlled .panel-control {
float: left;
}
.panel-controlled .panel-heading {
height: 42px;
}
.panel-controlled .panel-control .nav-tabs > li:not(.active) {
opacity: 1;
}
.panel-controlled .panel-control .nav-tabs > li:not(.active) a:hover {
background-color: unset;
}
.membership_item{
cursor: pointer;
}
.voucher-service_size--16-sb_3ON34{
font-size: 16px;
font-weight: 600;
line-height: 2.5em;
}
/******************************************************************************/
input[type=radio].custom-magic-radio, input[type=checkbox].custom-magic-checkbox {
position: fixed;
z-index: -50;
top: -2000px;
}
.custom-magic-radio+label:before {
border-radius: 50%;
}
.custom-magic-radio+label:not(:empty), .custom-magic-checkbox+label:not(:empty) {
margin: 0 5px 0 0;
text-indent: 25px;
}
.custom-magic-checkbox+label {
min-height: 17px;
min-width: 17px;
}
.custom-magic-radio+label, .custom-magic-checkbox+label {
cursor: pointer;
display: inline-block;
padding: 0;
position: relative;
vertical-align: middle;
}
.custom-magic-checkbox+label:before {
border-radius: 2px;
}
.custom-magic-radio+label:before, .custom-magic-checkbox+label:before {
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 0 0 0 rgb(0 0 0 / 7%);
content: '';
display: block;
left: 0;
position: absolute;
top: 0;
transition: all 0.3s;
}
.custom-magic-radio+label:before, .custom-magic-checkbox+label:before {
width: 22px;
height: 22px;
top: 1px;
}
.custom-magic-radio+label:after, .custom-magic-checkbox+label:after {
content: '';
display: none;
position: absolute;
}
.custom-magic-radio:checked+label:after, .custom-magic-checkbox:checked+label:after {
display: block;
}
.custom-magic-checkbox+label:after {
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
box-sizing: border-box;
transform: rotate(48deg);
}
.custom-magic-radio:checked+label:after, .custom-magic-checkbox:checked+label:after {
display: block;
}
.custom-magic-checkbox:checked+label:before {
background: var(--primary);
border-color: var(--primary);
width: 22px;
height: 22px;
top: 1px;
}
.custom-magic-radio+label, .custom-magic-checkbox+label {
font-size: 17px;
}
.custom-magic-checkbox+label:after {
height: 20px;
left: 6px;
top: 0;
width: 10px;
}
.custom-magic-radio:checked+label:before {
border: 2px solid var(--primary);
}
.active_disabled .custom-magic-radio:checked+label:before {
border: 2px solid var(--lightgray_300);
}
.custom-magic-radio+label:after {
background: var(--primary);
border-radius: 50%;
height: 14px;
left: 4px;
top: 5px;
width: 14px;
}
.active_disabled .custom-magic-radio+label:after {
background: var(--lightgray_300);
}
.avatar_img{
width: 60px;
height: 60px;
}
.avatar_img.cart{
width: 48px;
height: 48px;
}
#navbar {
z-index: 900;
}
.package_item, .membership_item{
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
margin-bottom: 20px;
}
.package_item:hover, .membership_item:hover{
background-color: #f4f4f4;
}
/************************************************/
ul.appointment_ul {
list-style: none;
padding-left: 0;
}
.list_appointment {
cursor: pointer;
}
.appointment_appointment {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 13px;
}
.appointment-date_date{
/* display: -webkit-box;
display: -ms-flexbox;
display: flex; */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
line-height: 1.1;
-webkit-box-flex: 0;
-ms-flex: 0 0 68px;
flex: 0 0 68px;
text-transform: capitalize;
max-width: 100px;
}
.appointment-date_size--12_3Djhn {
font-size: 12px;
font-weight: 500;
line-height: 1.5em;
}
.appointment-date_day_16tSN, .appointment-date_hour_325nV, .appointment-date_month_3UW-H {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
text-align: center;
}
.appointment-date_size--20_2zrPz {
font-size: 20px;
font-weight: 500;
line-height: 1.5em;
}
.appointment_info_3_RuS {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 1.2;
}
.appointment_status_2aNUo {
margin: 0 -3px 10px -3px;
}
.appointment-status_statusWrapper_3TxqT {
line-height: 12px;
border-radius: 8px;
color: #fff;
display: inline-block;
text-transform: uppercase;
padding: .2em .6em .2em;
margin: 0 3px;
}
.appointment-status_statusGreen_3xAmE {
background-color: var(--secondary);
}
.appointment-status_primary{
background-color: var(--primary);
}
.appointment-status_success{
background-color: var(--success);
}
.appointment-status_error{
background-color: var(--error);
}
.appointment-status_authorized{
background-color: #ff5e00;
color: #fff;
}
.appointment-status_size--9_13uKK {
font-size: 9px;
font-weight: 500;
line-height: 1.55556em;
}
.appointment-service_service_17PCZ {
position: relative;
padding-left: 5px;
word-break: break-word;
}
.appointment-service_serviceBar_24JLw {
position: absolute;
left: 0;
top: 0;
border-radius: 28px;
width: 3px;
height: 100%;
}
.service-color-1--bg-2 {
background-color: #ff5e00;
}
.appointment-service_size--14_2zOBe {
font-size: 14px;
font-weight: 500;
line-height: 1.57143em;
}
.appointment-service_serviceHeader_1Zcpq {
line-height: 14px;
margin-left: 12px;
margin-bottom: 7px;
}
.appointment-service_size--12_39wih {
font-size: 12px;
font-weight: 500;
line-height: 1.5em;
}
.appointment-service_serviceSubHeader_lBvML {
color: #a9a9a9;
margin-left: 12px;
}
.appointment_additionals_K2Lit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.appointment_additionalsLonger_2wvFk, .appointment_total_31Pwi{
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
.appointment_redo_33pRq {
padding: 0 12px;
}
.appointment_additionalsLonger_2wvFk, .appointment_total_31Pwi {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
.appointment_size--16-sb_2Ib2F {
font-size: 16px;
font-weight: 600;
line-height: 1.5em;
}
.appointment_total_31Pwi {
margin-top: 21px;
text-align: center;
vertical-align: middle !important;
}
.list_hr_Zu8mn {
color: #ebebeb;
margin: 13px 0;
}
/************************************************/
.client-details-item{
display: flex;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
/******************************************************* Swticher Widget ************************************************/
.Switcher {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 16px;
text-transform: uppercase;
will-change: transform;
background-color: rgba(33,179,217,0.1);
background-color: #F7F7F7;
color: #585757;
font-weight: 500;
border: 2px solid #f7f7f7;
}
.Switcher::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 200%;
border-radius: inherit;
background-color: #FFFFFF;
-webkit-transform: translateX(-75%);
transform: translateX(-75%);
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.Switcher__checkbox:checked + .Switcher::before {
-webkit-transform: translateX(25%);
transform: translateX(25%);
}
.Switcher__trigger {
position: relative;
z-index: 1;
padding: 8px 14px;
}
.Switcher__trigger::after {
content: attr(data-value);
}
.Switcher__trigger::before {
--i: var(--x);
content: attr(data-value);
position: absolute;
color: #1c1c1c;
-webkit-transition: opacity .3s;
transition: opacity .3s;
opacity: calc((var(--i) + 1) / 2);
-webkit-transition-delay: calc(.3s * (var(--i) - 1) / -2);
transition-delay: calc(.3s * (var(--i) - 1) / -2);
}
.Switcher__checkbox:checked + .Switcher .Switcher__trigger::before {
--i: calc(var(--x) * -1);
}
.Switcher__trigger:nth-of-type(1)::before {
--x: 1;
}
.Switcher__trigger:nth-of-type(2)::before {
--x: -1;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.switcher-button-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
-webkit-perspective: 750px;
perspective: 750px;
color: #21b3d9;
}
/***************************************************************/
.business_content_item{
flex-grow: 1;
display: flex;
padding: 15px;
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 11%);
border: 1px solid #ebebeb;
margin-bottom: 20px;
}
.business_content_date_item{
text-align: center;
padding-right: 20px;
padding-left: 20px;
padding-top: 3px;
}
.business_content_main_item{
flex-grow: 1;
padding-left: 15px;
border-left: 4px solid var(--primary);
text-align: left;
}
.business_appointment_item{
display: flex;
}
/********************************************/
.category_stuff.closed{
border-bottom: 1px solid #ccc;
}
.category_stuff.closed .category-items{
display: none;
}
.category_stuff .anchor-down, .category_stuff.closed .anchor-up{
display: none;
}
.category_stuff.closed .anchor-down{
display: block;
}
.inhighlighted{
opacity: 0.5 !important;
}
.main-form-control{
height: 40px;
font-size: 16px;
border-radius: 3px;
box-shadow: none;
background-color: white;
border: 1px solid rgba(70, 73, 76, 0.2);
transition-duration: .5s;
color: var(--dark);
display: block;
width: 100%;
padding: 6px 12px;
}
.main-form-control.large{
height: 60px;
}
textarea.main-form-control.large, textarea.main-form-control{
height: auto;
}
.has-error .main-form-control{
border-color: var(--error);
padding-right:calc(1.5em + 1rem);
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23d9534f'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23d9534f' stroke='none'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right calc(.375em + .25rem) center;
background-size:calc(.75em + .5rem) calc(.75em + .5rem)
}
.main-form-control:focus, .main-form-control:focus-visible {
border-color: var(--dark);
box-shadow: none;
transition-duration: .5s;
color: var(--dark);
outline: none;
}
.has-error .main-form-control:focus, .has-error .main-form-control:focus-visible {
border-color: var(--error);
}
.main-form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(70, 73, 76, 0.5);
}
.main-form-control::-moz-placeholder { /* Firefox 19+ */
color: rgba(70, 73, 76, 0.5);
}
.main-form-control:-ms-input-placeholder { /* IE 10+ */
color: rgba(70, 73, 76, 0.5);
}
.main-form-control:-moz-placeholder { /* Firefox 18- */
color: rgba(70, 73, 76, 0.5);
}
/******************************** Nav Bar ******************************/
.navbar-brand{
display: flex;
justify-content: center;
align-items: center;
}
.profile-wrap{
padding: 20px 5px !important;
border-top: 1px solid rgba(70,73,76,0.2);
border-bottom: 1px solid rgba(70,73,76,0.2);
}
.navbar-top-links>li>a{
color: var(--primary);
font-weight: bold;
}
/* .navbar-top-links>li>a:not(.mainnav-toggle)>i {
color: var(--primary);
} */
.navbar-top-links>li>a:hover {
background-color: #fcfcfc !important;
color: var(--primary);
transition: all 0.4s;
font-weight: bold;
}
.navbar-top-links>.open>a, .navbar-top-links>.open>a:focus {
background-color: #fff !important;
color: var(--primary);
box-shadow: none !important;
}
.vm-center-item{
display: flex;
align-items: center;
}
.posreader-action-item{
border: 2px solid #efefef;
padding: 10px;
cursor: pointer;
border-radius: 10px;
flex-grow: 1;
}
.posreader-action-item:hover{
background-color: #eee;
}
.posreader-action-item.offline{
cursor: not-allowed;
}
.rounded_item_60{
border-radius: 50%;
height: 50px;
background-color: var(--light);
width: 50px;
display: inline-block;
position: relative;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
object-fit: cover;
display: flex;
}
.rounded_item_60 i{
font-size: 20px;
}
.vm{
vertical-align: middle !important;
}
.credits-history-item{
padding-top: 5px;
padding-bottom: 5px;
}
.later-option-control{
height: 43px;
font-size: 16px;
border-radius: 3px;
box-shadow: none;
border: 1px solid rgba(0,0,0,0.07);
transition-duration: .5s;
}
.later-option-control-label:before{
top: 10px !important;
}
.magic-radio:checked+.later-option-control-label:after {
top: 14px !important;
}
.review-details-button{
cursor: pointer;
}
.review-item-details{
display: none;
}
.review-item-part{
display: none;
}
.review-item-part.active{
display: block;
}
/************************************************************************************************/
.switch-td{
width: 55px;
}
.switchery{
width: 50px;
}
.location_profile_preview{
margin-right: 5px;
cursor: pointer;
}
/* .modal .modal-right-side{
top: 20px;
left: 20px;
margin-top: -0.75em;
left: 20px;
right: auto;
position: absolute;
background-color: transparent !important;
font-size: 36px;
} */
.modal .modal-right-side{
top: 22px;
left: 20px;
right: auto;
position: absolute;
background-color: transparent !important;
font-size: 36px;
}
.modal .modal-body, .modal .modal-footer{
padding-left: 84px;
text-align: left;
}
.credtis_value_group{
padding: 20px;
background: #f7f7f7;
border-radius: 4px;
}
.review_content_group{
background: #F7F7F7;
border-radius: 8px;
padding: 8px 14px;
}
.integration-item{
border: 1px solid #E8E8E8;
border-radius: 8px;
padding: 24px 16px !important;
/* margin: 24px 12px; */
cursor: pointer;
height: 100%;
}
.integration-item-img{
border: 1px solid #E8E8E8;
border-radius: 100%;
width: 60px;
height: 60px;
}
.integration_text_content{
padding: 0 18px;
}
.row.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row.row-eq-height [class*="col-"]{
/* margin-bottom: 30px; */
}
/************************************************ Auth *************************************/
.h-100 {
min-height: 100vh !important;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.back-auth{
background: linear-gradient(0deg, rgba(34, 178, 217, 0.15), rgba(34, 178, 217, 0.15)), url(../img/auth_bg.png);
}
.signin-business-auth{
background: rgba(34, 162, 217, 0.1);
}
.business_auth_detail{
padding: 67px 52px 32px;
}
.auth_head{
padding: 20px 0px;
max-width: 570px;
margin: 0 auto;
}
.auth_head_location{
padding: 20px 0px;
max-width: 770px;
margin: 0 auto;
}
.auth_form{
border: 1px solid #E7F0F9;
border-radius: 8px;
padding: 24px;
background-color: #fff;
}
.reveal_password span{
cursor: pointer;
}
.blocked_item{
border-radius: 30px;
height: 36px;
background: rgba(34, 178, 217, 0.15);
display: inline-block;
padding: 8px 12px;
font-weight: 600;
font-size: 13px;
color: #22B2D9;
text-align: center;
margin-right: 5px;
margin-top: 5px;
cursor: pointer;
}
.blocked_item.active{
background: #22B2D9;
color: #fff;
}
.no_box_shadow{
box-shadow: none;
}
.payment_plan_item, .main_service_item{
padding: 24px;
border: 1px solid #E8E8E8;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06), 0px 1px 1px rgba(0, 0, 0, 0.08);
border-radius: 8px;
margin-bottom: 24px;
}
.plan_item_contain{
margin-bottom: 25px;
}
.plan_item{
padding: 20px;
margin: 0 auto;
height: 100%;
border: 1px solid #E8E8E8;
border-radius: 20px;
max-width: 350px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06), 0px 1px 1px rgba(0, 0, 0, 0.08);
position: relative;
cursor: pointer;
background: linear-gradient(#EBF7FC, 60%, #fff, transparent);
}
.plan_item.a{
background: #FDF2F0;
}
.plan_item.b{
background: #E1E2F5;
}
.plan_item.c{
background: #FFF4D4;
}
.plan_item.d{
background: #BEDBED;
}
.plan_item.e{
background: #E4DFD9;
}
.plan_item.f{
background: #FFF2E1;
}
.plan_item.g{
background: #BCDBD6;
}
.plan_item.h{
background: #FFF0CF;
}
.plan_item.i{
background: #B7EAE3;
}
.eva-outline-button {
font-size: 12px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
display: flex;
align-items: center;
}
.contain-earning-points {
display: flex;
justify-content: end;
align-items: center;
/* position: absolute;
top: 16px;
right: 35px; */
span {
z-index: 10;
}
}
.lock-container {
position: relative;
}
.award-lock {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
background: rgb(12, 12, 12, 0.32);
/* background-color: ; */
}
.award-font{
color: black !important;
}
.visit-days{
position: absolute;
top: 26px;
left: 35px;
font-size: 18px;
}
.award_lock_avatar{
width: 50px;
}
.achievement-sidebar{
background-color: #38ABDD;
padding: 16px;
margin-inline: 16px;
border-radius: 10px;
width: 265px;
visibility: visible;
transition: width 0.3s ease-in-out;
}
.contain-mainnav-pos {
position: fixed !important;
}
.contain-mainnav-menu {
position: relative;
}
.sidebar-award {
background: #88CDEB;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
/* Do NOT put a z-index here to make the brand link clickable. #navbar carries its own
z-index, which makes it a stacking context, so any value on this descendant is
resolved INSIDE that context and can never clear #mainnav-container. position:fixed
does not escape it either — an ancestor with a non-auto z-index still contains it.
The fix lives on `.student_content #navbar`; search "brand link" further down. */
.navbar-header.lms_sidebar {
position: fixed;
top: 0px !important;
}
.navbar-brand.lms_sidebar{
height: 79px !important;
padding-top: 20px !important;
}
.radio-label-item{
cursor: pointer;
}
.service-details_media_1{
border: 1px dashed #878787;
padding: 10px;
cursor: pointer;
}
.service-details_upload_avatar{
margin: 0 auto;
width: 100%;
height: 170px;
max-width: 170px;
border-radius: 50%;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 65px 16px;
background: #F7F7F7;
border: 2px dashed #E8E8E8;
/* border-radius: 6px; */
flex: none;
flex-grow: 0;
}
#course_image_avatar {
width: 170px;
max-width: 170px;
border-radius: 50%;
}
.course_image-group-avatar{
position: relative;
overflow: hidden;
z-index: 2;
max-width: 100%;
padding: 1.5rem;
}
.service-details_upload_1{
text-align: center;
font-size: 16px;
height: 360px;
}
.no-image_uploads{
text-align: center;
font-size: 16px;
padding-bottom: 70px;
}
.workspace_image{
border-radius: 8px;
height: 360px;
background-position: 50%;
background-size: cover;
position: relative;
padding: 1.5rem;
overflow: hidden;
z-index: 2;
max-width: 100%;
}
.mainnav-lg .navbar-header .brand-icon{
margin-left: 25px;
}
.mainnav-sm .location_profile_preview{
display: none !important;
}
.brand-icon-collapse{
cursor: pointer;
}
.mainnav-sm .brand-icon-collapse{
display: none !important;
}
.navbar-header .plan_part{
color: #fff;
margin-left: 14px;
margin-top: 10px;
}
.mobile-navbar-header {
display: none;
}
@media (max-width:768px){
.mobile-navbar-header {
display: block;
}
}
.mobile-navbar-header .plan_part{
color: #fff;
margin-left: 14px;
}
.mainnav-sm .navbar-header .plan_part {
display: none;
}
.navbar-header .plan_part .top_text{
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 24px;
margin-bottom: 2px;
}
.navbar-header .plan_part .plan_text{
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
}
.mobile-navbar-header .plan_part .top_text{
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 24px;
margin-bottom: 7px;
}
.mobile-navbar-header .plan_part .plan_text{
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
}
.footer-nav-group {
padding: 10px 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mainnav-sm .footer-nav-group {
padding-left: 2px;
padding-right: 2px;
}
.profile_tab .business-avatar_logo{
width: 48px;
height: 48px;
}
.mainnav-sm .profile_tab .text-part{
display: none;
}
.mainnav-sm .achievement-sidebar{
width: 0px;
visibility: hidden;
transition: width 0.3 ease-in-out;
}
.xs.footer-mobile-center {
/* margin-top: 54px; */
display: none;
}
.nano.menu-lms {
height: 73% !important;
overflow-y: auto;
}
.award-font-grey {
color: #585757;
}
.btn-navbar-action{
padding: 4px 8px;
border: 1px solid #E8E8E8;
box-shadow: 0px 1px 1px rgb(0 0 0 / 6%);
border-radius: 8px;
}
.mainnav-lg .menu-title{
padding-left: 12px;
}
#page-head{
padding-left: 10px;
}
.rounded_span{
padding: 2px 10px;
border-radius: 24px;
display: flex;
align-items: center;
text-align: center;
}
.rounded_span.blue{
color: #1998CE;
background-color: #2FA4E61A;
}
.modal .modal-dialog.modal-full{
width: 100%;
margin: 0px;
}
.modal-dialog.modal-full .modal-body{
padding: 0;
display: flex !important;
flex: 1 1 auto;
min-height: 100px;
overflow-y: auto;
overflow-x: hidden;
z-index: 0;
}
.modal-full .modal-content {
min-height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
}
.modal-full .full_body{
display: flex;
flex-direction: column;
flex-shrink: unset !important;
flex-grow: 1;
min-height: 0;
max-width: 100%;
position: relative;
}
.modal-full .full_body_content{
flex-direction: row;
overflow-y: hidden;
max-height: 100%;
display: flex;
flex-grow: 1;
flex-basis: auto;
height: 100%;
overflow-x: hidden;
}
.modal-full .control-part{
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-basis: 33.3%;
min-width: 400px;
max-width: 448px;
flex-grow: 0;
order: 1;
border-left: 1px solid #d5d7da;
background-color: #fff;
overflow-x: hidden;
overflow-y: auto;
}
.modal-full .main-work-part{
flex-grow: 1;
position: relative;
flex-basis: 66.7%;
flex-shrink: 1;
overflow-x: hidden;
overflow-y: auto;
}
.modal-full .main-work-content{
display: flex;
flex-direction: column;
max-width: 900px;
padding: 24px 40px;
margin: 0 auto;
}
.modal-full .control-part-content, .modal-full .client_detail_group{
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.modal-full .control-part-button-group{
width: 100%;
border-top: 1px solid #d5d7da;
padding: 16px 24px;
}
.modal-full .control-content{
display: flex;
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
position: relative;
}
.modal-full .list-group{
display: flex;
flex-direction: column;
flex-grow: 1;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.app_date_picker{
position: absolute;
z-index: 10000000;
background-color: #fff;
border: 1px solid #d5d7da;
padding: 0;
box-shadow: 0 4px 8px 0 rgb(16 25 40 / 10%);
border-color: #d5d7da;
}
/****************************************************************************************/
.appointment_repentance_group{
display: none;
}
.holistico_popup_modal{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background: rgba(135,140,147,.5);
}
.holistico_popup_modal_content .holistico_popup_arrow{
left: calc(50% - 8px);
position: absolute;
height: 16px;
width: 16px;
overflow: hidden;
transform: scale(1.5);
top: -20px !important;
}
.holistico_popup_modal header{
display: flex;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
border-bottom: 1px solid #bbb;
}
.holistico_popup_modal header .header-title{
display: flex;
align-items: center;
align-self: stretch;
justify-content: center;
}
.holistico_popup_modal_content .holistico_popup_arrow::before {
background-color: #fff;
color: #101928;
top: 12px;
left: 2px;
border-color: #d5d7da !important;
content: "";
display: block;
position: absolute;
height: 8px;
width: 8px;
transform: rotate(45deg);
border: 1px solid #d5d7da;
}
.holistico_popup_modal_content{
opacity: 1;
transform: translateY(0px);
transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
width: 377px;
z-index: 2000;
background-color: #fff;
position: fixed;
left: 909.805px;
top: 150px;
}
.holistico_popup_modal_content.holistico_popup_content-md{
width: 576px;
max-width: 576px;
}
.holistico_popup_modal_content .holistico_popup_content{
border-radius: 2px;
align-items: flex-start;
font-size: 12px;
line-height: 14px;
padding: 7px;
position: relative;
text-align: left;
/* white-space: pre-line;*/
min-width: 32px;
border: 1px solid #d5d7da;
width: 100%;
}
.holistico_popup_modal_content_body, .holistico_popup_modal_content_footer{
padding: 20px 10px;
}
.holistico_popup_modal_content_footer{
border-top: 1px solid #d5d7da;
}
/*****************************************************************************************/
.holistico-dropup-button.active, .holistico-dropup-button:not(.disabled):not(:disabled):hover{
background-color: #fff !important;
box-shadow: none !important;
color: #000 !important;
border-color: rgba(0, 0, 0, 0.3) !important;
}
#container .fc-button, #container .fc button {
color: #000 !important;
font-size: 16px !important;
}
.select_appointment_time_block{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: var(--primary);
z-index: 9000;
color: #fff;
font-weight: bold;
text-align: center;
align-items: center;
justify-content: center;
display: flex;
padding: 8px 0;
flex-shrink: 0;
font-size: 20px;
}
.select_appointment_time_block_close{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 8px;
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
}
.active_selectable .fc-time-grid .fc-slats {
z-index: 7;
}
.fc-slats .fc-widget-content:hover{
background-color: rgba(234,232,226,0.7);
}
.daterangepicker{
z-index: 90000 !important;
}
.lh-10{
line-height: 10px;
}
.credit_card_required_group{
background-color: #E8E8E8;
padding: 12px;
}
.credit_card_required_group.disabled{
cursor: not-allowed;
}
.take_deposit_add_tooltip {
width: 100%;
text-indent: 0px !important;
}
.first-element {
margin-left: 40px;
}
.appointment_control_group.sticky{
position: fixed !important;
top: 0px;
left: 50px;
}
.no-whitespace{
white-space: unset !important;
}
.adjust-100{
width: 100% !important;
}
.adjust-height-100{
height: 100% !important;
}
/********************* Profile preview ************************************/
.business_selectable_item{
flex-direction: column;
align-items: center;
padding: 10px;
margin-right: 24px;
width: 350px;
border: 1px solid #DBDBDB;
border-radius: 8px;
}
.business_selectable_item_live{
flex-direction: column;
align-items: center;
/* padding: 10px; */
margin-right: 10px;
margin-bottom: 24px;
width: 320px;
border: 1px solid #f1eded;
border-radius: 8px;
display: inline-block;
/* background: #F7F1DF; */
}
.business_selectable_item_live:hover{
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
cursor: grab;
}
.video-duration{
position: absolute;
bottom: 8px;
right: 8px;
color: #f0f0f0;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.45);
border-radius: 4px;
line-height: 1.2;
font-size: 13px;
font-weight: 600;
}
.btn-join-meeting {
padding: 6px 13px !important;
font-size: 13px !important;
}
@media(max-width: 768px){
.btn-join-meeting {
width: 100%;
}
.footer-nav-achievement {
bottom: 10px;
}
}
.business-image-side{
height: 200px;
background-size: cover;
background-position: 50%;
position: relative;
border-radius: 6px;
}
.prfessional-image-side{
height: 120px;
background-size: cover;
background-position: 50%;
position: relative;
border-radius: 6px;
}
.prfessional-image-side-live{
height: 200px;
background-size: cover;
background-position: 50%;
position: relative;
border-radius: 6px;
}
.professional-avatar_logoWrapper{
position: absolute;
bottom: -45px;
left: 23px;
padding: 6px;
border-radius: 100%;
background-color: #fff;
border: 1px solid #eee;
}
.professional-avatar_logoWrapper_live{
position: absolute;
bottom: -45px;
left: 15px;
padding: 1px;
border-radius: 100%;
background-color: #fff;
border: 1px solid #eee;
}
.professional-instructor-live{
position:absolute;
top: -50px;
left: 41%;
max-width: 175px;
}
.live-course-title{
height: 28px;
max-height: 28px;
display: -webkit-box;
-webkit-line-clamp: 1; /* Number of lines to show */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
}
.professional-avatar_logo_live{
width: 60px;
height: 60px;
display: flex;
-webkit-box-pack: center;
justify-content: center;
border-radius: 50%;
}
.business-details-live{
padding: 10px;
position: relative;
}
.professional-avatar_logo{
width: 90px;
height: 90px;
display: flex;
-webkit-box-pack: center;
justify-content: center;
border-radius: 50%;
}
.rounded_item_90{
border-radius: 50%;
display: inline-block;
position: relative;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
object-fit: cover;
display: flex;
font-size: 90px;
height: 90px;
width: 90px;
background-color: #D0D3D8;
}
/************************************** Custom select ***********************************/
.bootstrap-select>.btn.btn-default.dropdown-toggle, .bootstrap-select>.btn.btn-default.dropdown-toggle:hover {
color: #4d627b !important;
background-color: #fff !important;
border-color: rgba(0,0,0,.09) !important;
box-shadow: none!important;
outline: none!important;
padding-left: 15px;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: auto !important;
}
.appointment_form{
border: 1px solid #ddd;
padding: 30px 20px 30px 40px;
border-radius: 10px;
background-color: #fafafa;
}
.bootstrap-select.full:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 100% !important;
}
/***************************** Loading Stuff ****************************************/
.ajaxloading{
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(15,15,15,0.7);
z-index: 999999999;
display: none;
}
.ajaxloading_full{
background-color: rgba(15,15,15,1);
}
.ajaxloading .loader{
top: 50%;
position: fixed;
left: 50%;
}
#footer {
height: auto;
}
/************* cart *************************/
.service_details_cart{
background-color: #F7F7F7;
padding: 10px 12px;
}
.tip_details_cart{
border: 1px solid var(--lightgray_300);
border-radius: 10px;
padding: 20px;
}
.tip_item{
padding: 6px 0px;
text-align: center;
border: 1px solid #E8E8E8;
border-radius: 36px;
cursor: pointer;
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: #1C1C1C;
width: 100%;
display: inline-block;
}
.tip_item:hover, .tip_item.active{
background-color: #eee;
}
/*************************** navigation *********************************/
.auth_navigation{
padding: 40px 20px 20px;
max-width: 1050px;
margin: 0 auto;
}
.auth_navigation_item{
padding: 5px;
color: var(--primary);
font-size: 14px;
cursor: pointer;
}
.auth_navigation_item .circled_item{
width: 40px;
height: 40px;
border: 2px solid var(--primary);
border-radius: 100%;
padding-left: 10px;
}
.auth_navigation_item.active .circled_item{
background-color: var(--primary);
color: #fff;
}
.auth_navigation_item .circle-label-check{
display: none;
}
.auth_navigation_item.active .circle-label{
display: none;
}
.auth_navigation_item.active .circle-label-check{
display: block;
}
.bootstrap-select .btn{
font-weight: 400 !important;
}
.boost_credit{
height: 50px;
}
#img_show_content_img{
max-width: 100%;
}
#img_show_content_img_slide{
max-width: 100%;
}
.discussion_detail_content{
padding: 16px 24px;
}
/************************************* special course *****************************************/
.course_explain_part{
padding: 24px;
background: #22A2D90D;
border-radius: 8px;
border: 1px solid #22A2D9;
}
.special-offer-item{
border: 1px solid #DBDBDB;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 2px 1px rgba(0, 0, 0, 0.03), 0px 1px 1px rgba(0, 0, 0, 0.04);
border-radius: 8px;
padding: 16px;
}
.course_choice_item{
flex-direction: column;
align-items: center;
padding: 10px;
margin-right: 20px;
width: 312.5px;
border-radius: 8px;
}
.course-image-side{
height: 228px;
background-size: cover;
background-position: 50%;
position: relative;
border-radius: 8px;
}
.course_checker_group{
width: 34px;
height: 34px;
background-color: #fff;
border-radius: 100%;
padding-left: 6px;
padding-top: 6px;
top: 10px;
position: relative;
right: 10px;
}
.course_checker_group.rect{
border-radius: 8px;
padding-left: 7px;
padding-top: 3px;
}
.light-white-border {
border-color: rgb(255, 255, 255, 0.2);
}
/******************************* Overlay action ****************************************/
@keyframes loader{to{transform:rotate(1turn)}}
.overlay-loader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
border-radius: 4px;
background: hsla(0,0%,100%,.8);
display: flex;
align-items: center;
justify-content: center;
}
.overlay-loader-text {
padding: 1.5rem;
width: 10rem;
aspect-ratio: 1;
flex-direction: column;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
--loader-size: 4.5rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: var(--loader-size);
height: var(--loader-size);
font-weight: 700;
}
.loader-sm {
--loader-size: 3rem;
}
.loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid transparent;
border-top-color: #2FA4E6;
border-right-color: #2FA4E6;
border-left-color: #2FA4E6;
border-radius: 5rem;
-webkit-animation: loader 1s ease infinite;
animation: loader 1s ease infinite;
}
.loading-button{
opacity: 0.3;
}
.virtual_input_group{
background: #f7f7f7;
border: 1px solid #E8E8E8;
border-radius: 8px;
padding: 12px;
font-size: 13px;
font-weight: 400;
display: flex;
}
.full-calendar-control-part{
display: none;
}
.text-lightbold {
font-weight: 500 !important;
}
.text-semibold{
font-weight: 600 !important;
}
.add-appointment-group{
display: none;
position: fixed;
bottom: 40px;
right: 20px;
z-index: 5208;
}
.add-appointment-mobile-button{
width: 48px;
height: 48px;
border: none;
border-radius: 100%;
padding: 0;
color: #FFF;
background-color: var(--primary);
justify-content: center;
}
.mobile_date_confirm_part{
display: none;
}
.mobile-date-handling{
display: none;
padding: 10px;
flex-grow: 1;
}
.disable_elments_wrapper.active_disabled{
pointer-events: none;
}
.lh-28{
line-height: 28px;
}
.lh-30{
line-height: 30px;
}
.credit_group{
width:200px;
margin: 0 auto;
}
.backend-pad-container{
padding-left: 130px;
padding-right: 130px;
margin-top: 20px;
}
/*************** Bootstrap tags ********************/
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.twitter-typeahead .tt-hint{
display: none;
}
.tt-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
cursor: pointer;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: nowrap;
}
.tt-suggestion:hover,
.tt-suggestion:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}
.bootstrap-tagsinput{
height: 40px;
}
.bootstrap-tagsinput .tag, .bootstrap-tagsinput input {
font-size: 15px;
}
.helper-block{
cursor: pointer;
}
.modal-title{
margin-top: 8px;
}
.no_payout_group {
max-width: 608px;
margin: 0 auto;
padding: 16px;
text-align: center;
}
.pexel_search_item{
padding: 8px 12px;
color: #585757;
display: inline-block;
cursor: pointer;
}
.pexel_search_item.active{
background: linear-gradient(0deg, rgba(0, 133, 255, 0.1), rgba(0, 133, 255, 0.1)), #FFFFFF;
border-radius: 8px;
color: #0085FF;
}
.setting-action-button{
background: #FFFFFF;
border: 1px solid #E8E8E8;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 4px 8px;
}
.setting-group{
min-height: 260px;
border: 1px solid #f2f2f2;
}
.student_head{
padding: 41px 102px 30px;
position: relative;
}
.student_auth_form{
padding: 52px 102px;
}
.student_auth_form_group{
padding: 24px;
border-radius: 8px;
border: 1px solid #E7F0F9;
background: #FFF;
}
.student_auth_form_group_panel{
box-shadow: none;
padding: 0px;
margin-bottom: 0px;
}
.discussion_header{
padding: 16px 24px 16px 24px;
border-bottom: 1px solid #E8E8E8;
}
.label.label-success-fill {
background-color: #73C64C;
color: #FFF;
font-size: 11px;
line-height: 12px;
font-weight: 400;
}
.ml-08 {
margin-left: 8px;
}
.forum-tags-group-list {
visibility: hidden;
width: 0px;
}
.forum-tags-group-list.active {
visibility: hidden;
width: 0px;
}
.mobile-forum-tags-icon {
visibility: hidden;
}
.background_grey{
background: #F6F6F6 !important;
}
.banner_announce {
/* height: 50px; */
background: #1B4A7A;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 15px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.banner_announce a {
font-size: 15px;
font-weight: 700;
color: white;
text-decoration: underline;
}
.map_main {
padding-top: 16px;
}
.black-friday-banner-contain {
display: flex;
justify-content: center;
align-items: center;
padding: 14px;
background: black;
position: relative;
}
.black-friday-banner{
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
color: white;
font-family: "Fraunces", serif !important;
}
.learn-color-black-friday{
color: #F98600 !important;
}
.font-work_sans {
font-family: "Work Sans", sans-serif !important;
}
@media (min-width: 768px) {
/* var, not a fixed 95px: the header grows whenever its row wraps (promo strip +
title + impersonation chip + search), and a short clearance let the topbar
overlap the first card of the page. --cwf-header-h is published by
layouts/student.blade.php from .navbar-content's offsetHeight. The 95px stays
as the fallback for the pre-JS paint. The !important is the original rule's —
it has to outrank nifty's #content-container padding-top. */
.show_announce_pad {
padding-top: var(--cwf-header-h, 95px) !important;
}
}
@media (max-width: 1200px){
.discussion_item .xs-flex-container {
flex-direction: column !important;
}
}
@media (max-width: 768px){
.show_announce_pad {
padding-top: var(--cwf-header-h, 100px) !important;
}
.black-friday-banner{
font-size: 12px;
text-align: center;
}
.forum-tags-group-list{
position: fixed;
bottom: 0;
top: 0;
z-index: 4000;
background-color: rgba(0, 0, 0, 0.75);
width: 0px !important;
visibility: hidden !important;
}
.forum-tags-group-list .list-group{
width: 0;
visibility: hidden;
}
.forum-tags-group-list.active .list-group{
width: 300px;
background-color: #2FA4E6;
padding: 12px 18px;
visibility: visible;
transition: width 0.3s ease-in-out;
margin-bottom: unset;
height: 100vh;
overflow-y: auto;
}
.forum-tags-group-list .p2_16 {
color: white !important;
}
.forum-tags-group-list i {
color: white !important;
}
.forum-tags-group-list.active{
width: 100% !important;
visibility: visible !important;
}
.forum-tags-group-list .list-group-item{
border: none !important;
}
.forum-tags-group-list .list-group-item.active {
background-color: #4aafe9 !important;
}
#show_all_topics_mobile {
padding-inline: 25px;
/* height: calc(100vh - 110px);
overflow-y: auto; */
}
.mobile-forum-tags-icon.active {
visibility: visible;
}
.discussion_group{
margin-inline: 20px;
}
.pad-inline-xs-no {
padding-inline: unset !important;
}
.x-pt-16{
font-size: 16px !important;
}
.xs-front-switch-item{
display: flex;
align-items: center;
flex-shrink: 0;
}
.xs-justify-center{
justify-content: center !important;
}
}
.discussion-group{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px 15px;
padding: 16px 24px 16px 24px;
}
.contain-discussion-item{
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #E8E8E8;
border-radius: 10px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 1px rgba(0, 0, 0, 0.08);
overflow: hidden;
max-width: 350px;
width: 350px;
/* margin: 0 auto; */
cursor: pointer;
}
.forum-public-filter{
margin-left: 50px;
}
.discussion-item{
padding: 16px;
cursor: pointer;
/* overflow: hidden; */
}
.overflow-hidden{
overflow: hidden;
}
.discussion-item-footer{
padding: 0 16px 16px;
}
.discussion-item-title{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.discussion-item-text-content {
/* height: 100px; */
/* max-height: 150px; */
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
}
.discussion-tags-height{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.student_header{
padding: 0 24px 16px 24px !important;
border-bottom: 1px solid #E8E8E8;
}
.discussion_subtitle{
padding: 16px 24px 16px 24px;
}
.contain-discussion_item{
border: 1px solid #E8E8E8;
margin-top: 10px;
border-radius: 10px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 1px rgba(0, 0, 0, 0.08);
}
.discussion_item{
display: flex;
padding: 16px 24px 16px 24px;
cursor: pointer;
}
.pin-discussion{
background-color: #FAE6B6;
height: 30px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.discussion_item:not(:last-child){
/* border-bottom: 1px solid #E8E8E8; */
}
.discussion_item:hover{
background: #fcfcfc;
}
.discussion_item .discussion_tags .label{
display: inline-block;
}
.pad-top-no {
padding-top: unset !important;
}
.discussion_item .discussion_content{
position: relative;
height: 120px;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}
.discussion_detail_head{
padding: 40px 24px 40px 24px;
background: #22A2D90D;
text-align: center;
}
.discussion_reply_item_parent {
border-radius: 30px;
box-shadow: 1px 2px #B2B2B2;
background: white;
margin-bottom: 20px;
}
.discussion_course_label{
background: #D0EAF9 !important;
color: #03a9f4 !important;
border-radius: 13px !important;
line-height: 2.5 !important;
}
.student_discussion_tag{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.student_discussion_tag_p {
margin-right: 10px !important;
}
.student_discussion_tag_item {
margin-top: 10px;
margin-bottom: 10px;
}
.discussion_reply_item{
padding: 24px 20px 24px;
}
.discussion_reply_item:not(:last-child){
/* border-bottom: 1px solid #E8E8E8; */
}
/* :not(.grp-post) keeps this off the redesigned group board, which sets its own
spacing — the community forum markup (no .grp-post class) is unaffected */
.discussion_reply_item.replied:not(.grp-post){
padding: 24px !important;
border-radius: 10px;
margin-top: -35px;
}
.discussion_reply_item_action{
visibility: hidden;
height: 0px;
}
.discussion_reply_item:hover .discussion_reply_item_action{
visibility: visible;
height: auto;
}
.discussion_like_button.active{
color: var(--primary);
}
.discussion_pin_button.active{
color: var(--primary);
}
.member_list, .learning_content{
padding: 24px;
}
.member_list .member_item{
padding: 12px 16px;
border-radius: 8px;
display: flex;
height: auto;
}
.connect_map_button{
padding: 8px 30px;
border-radius: 20px;
}
.member_list .member_item:hover, .member_list .member_item.active{
border: 2px solid var(--primary);
background: rgba(34, 162, 217, 0.05);
}
.member_list_group{
height: calc(100vh - 200px );
position: relative;
overflow: auto;
}
.learn-my-enrolled-course-item{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
/* margin-top: 35px; */
}
.enrolled_course_selectable_item{
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 10px;
flex: 0 0 350px;
border: 1px solid #DBDBDB;
border-radius: 8px;
width: 350px;
height: 100%;
/* margin: 0 auto; */
}
.learn-business-image-side{
height: 260px;
background-size: cover;
position: relative;
border-radius: 6px;
}
.learn-course-banner{
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
font-size: 11px;
}
.learn-best-seller{
width: fit-content;
background: #cefafe;
border-radius: 6px;
padding: 3px 7px;
color: #0586a9;
font-weight: 600;
}
.learn-enrolled-student{
width: fit-content;
background: #ede9fe;
border-radius: 6px;
padding: 3px 7px;
color: #4338ca;
font-weight: 600;
}
.learn-new-course-tag{
width: fit-content;
background: #2FA4E6;
border-radius: 6px;
padding: 3px 7px;
color: white;
}
.learn-color-black{
color: #000 !important;
}
.learn-tags-section {
display: flex;
flex-wrap: wrap;
}
.learn-course-category-item {
display: flex;
align-items: center;
width: fit-content;
/* background: #F9F5FF; */
border-radius: 6px;
/* color: #6941C6; */
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
overflow: hidden;
line-height: 12px;
}
.learn-course-category-item.category-color-0{
background: #CEFAFE;
color: #0586A9;
}
.learn-course-category-item.category-color-1{
background: #FEF2C3;
color: #B4540A;
}
.learn-course-category-item.category-color-2{
background: #ECFBCB;
color: #4D7C0F;
}
.learn-course-category-item.category-color-3{
background: #E8EFFE;
color: #558CC5;
}
.learn-course-module-item {
width: fit-content;
display: flex;
align-items: center;
border-radius: 6px;
border: 1px solid #EEEEEE;
color: black;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
line-height: 12px;
}
.course_item{
margin-bottom: 24px;
margin-right: 10px;
max-width: 320px;
display: inline-block;
position: relative;
}
.course_item_title{
padding: 16px;
background: #F7F1DF;
}
.course_item_img{
border-top-right-radius: 12px;
border-top-left-radius: 12px;
}
.course_item_title{
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.course_item_image_section{
position: relative;
}
.course_item_info{
position: absolute;
bottom: -11px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-inline: 10px;
}
.course_item_info .label{
line-height: 1.5 !important;
border-radius: 10px;
font-size: 11px;
}
.course_best_seller_item{
position: absolute;
left: 10px;
top: 10px;
}
.course_item.new:after{
content: attr(data-new);
z-index: 1;
overflow: hidden;
font-size: 14px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
width: 120px;
display: block;
background: #22A2D9;
/* background: linear-gradient(#22A2D9 0%, #22A2D9 100%); */
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 20px;
right: -30px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px);
}
.text-grey {
/* color : #4d627b; */
font-family: 'Inter', sans-serif;
font-size: 14px;
}
.plan_include_item{
/* padding: 20px; */
margin-top: 20px;
min-height: 320px;
max-width: 1399px;
display: flex;
position: relative;
background: rgba(147, 147, 147, 0.05);
justify-content: center;
}
.plan_include_item.bottom{
align-content: flex-end;
align-items: flex-end;
}
.plan_include_item.center{
align-content: center;
align-items: center;
}
.payment_method_item{
background: #FFFFFF;
border: 1px solid #E0E0E0;
box-shadow: 0px 1px 3px rgba(56, 56, 56, 0.1);
border-radius: 6px;
padding: 10px 20px;
margin-bottom: 12px;
transition: all 0.3s ease-in-out;
}
.payment_method_item.active{
border: 1px solid #22A2D9;
}
.payment_method_item_body{
display: none;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
}
.payment_method_item.active .payment_method_item_body{
display: block;
}
/*********************** Search result page *****************************************/
#map-canvas {
width: 100%;
height: calc(100vh - 100px);
}
#map-canvas.sticky{
position: fixed !important;
top: 0px;
width: calc(50% - 40px);
}
.pac-container {
z-index: 10000 !important;
}
.find_map_content_item{
/* display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; */
width: fit-content;
overflow: hidden;
}
.map_sidebar_log{
width: 80px !important;
height: 80px !important;
}
.d-lg-flex {
display: flex !important;
}
.rounded-pill-20 {
border-radius: 20px;
padding-inline: 20px;
}
.forum_main_content_detail{
width: 100%;
padding-inline: 50px !important;
}
.start-discussion-detail {
height: 70px;
border-radius: 35px;
padding-inline: 15px;
justify-content: space-between;
border: 1px solid #E3E3E3;
background-color: white;
}
.start-discussion-detail-form {
height: 40px;
border-radius: 20px;
flex: 1 auto;
background-color: #F6F6F6;
border: 1px solid #E3E3E3;
display: flex;
align-items: center;
padding-inline: 30px;
color: #5E5E5E;
}
.start-discussion-detail-form-comment {
height: 40px;
border-radius: 20px;
flex: 1 auto;
background-color: #F6F6F6;
border: 1px solid #E3E3E3;
display: flex;
align-items: center;
padding-inline: 15px;
color: #5E5E5E;
margin-left: 10px;
}
.start-discussion-detail-picture{
font-size: 30px;
margin-right: 15px;
}
.discussion_reply_item_content{
overflow: hidden;
}
@media (max-width: 1460px){
.learn-my-enrolled-course-item{
grid-template-columns: repeat(auto-fill, minmax(269px, 1fr));
gap: 15px;
}
.enrolled_course_selectable_item{
width: unset;
}
.learn-business-image-side{
height: 220px;
}
}
@media (max-width: 1200px) {
.d-lg-flex {
display: none !important;
}
.learn-my-enrolled-course-item {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.enrolled_course_selectable_item{
width: 320px;
}
.learn-business-image-side {
height: 260px;
}
}
@media (max-width : 768px){
.rounded-pill-20 {
padding-inline: 20px !important;
}
.connect_map_button{
padding: 8px 30px !important;
}
.find_map_content_item_button{
display: block;
}
.find_map_content_item{
display: block;
}
.forum_main_content_detail{
width: 100%;
padding-inline: 25px !important;
}
.start-discussion-detail-picture{
font-size: 25px;
margin-right: 10px;
}
.student_discussion_tag {
display: block;
}
.discussion_reply_item.replied{
margin-top: -60px;
}
.enrolled_course_selectable_item{
width: 330px;
margin: 0 auto;
}
.learn-my-enrolled-course-item{
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 15px;
}
.learn-business-image-side {
height: 260px;
}
.discussion-group{
grid-template-columns: auto;
}
.contain-discussion-item{
max-width: 360px;
margin: 0 auto;
}
.forum-public-filter{
margin-left: unset;
margin-top: 20px;
width: 100%;
}
.course_item {
margin-right: unset;
}
}
/**********************************************************************/
.front-switch{
background-color: #F7F7F7;
border-radius: 8px;
padding: 2px;
display: inline-block;
}
.front-switch-item{
padding: 6px 12px;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
cursor: pointer;
}
.front-switch-item.active, .offer-switch-item.active{
background-color: #FFF;
}
.offer-switch{
background: #F0FBFF;
border-radius: 16px;
padding: 6px;
display: inline-block;
}
.offer-switch-item{
padding: 2px 10px;
border-radius: 16px;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
cursor: pointer;
}
/********** student laytout *****************/
/* One shell colour for the student area — header band, content and footer.
Was #FFF here (and #FFF !important on .navbar-content, which nothing could
restyle); see the matching block at the end of this file. */
#container.student_content{
background-color: #FDFBF5;
}
.student_content #content-container{
background-color: #FDFBF5;
}
.student_content #content-container:before {
background-color: #FDFBF5;
}
.student_navbar .navbar-content {
background-color: #FDFBF5;
height: auto;
min-height: 59px;
border-bottom: 1px solid #E8E8E8;
}
.student_navbar .navbar-content::after {
content: "";
display: block;
clear: both;
}
.student_content .fixed-fluid > .fixed-sm-200 {
min-width: 220px;
min-height: calc( 100vh - 95px);
}
/**/
.upgrade_show_image_group{
/* max-width: 524px;
display: flex; */
padding-left: 20px;
padding-right: 20px;
}
.upgrade_show_image_group img{
width: 100%;
padding: 20px;
}
/* .upgrade_show_image_group img:first-child{
margin-right: 24px;
} */
.upgrade_professional_show_image_group{
max-width: 524px;
display: flex;
margin: auto;
}
.upgrade_professional_show_image_group img{
width: calc(50% - 12px);
}
.upgrade_professional_show_image_group img:first-child{
margin-right: 24px;
}
.register_panel{
border-radius: 8px;
border: 1px solid #DBDBDB;
padding: 16px;
}
.holifront_scroll_group .holifront_content{
overflow-x: auto;
}
.holifront_scroll_group .holifront_content{
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.holifront_scroll_group .holifront_content::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
/**************** Upsell item *******************************/
.upsell-img{
width: 258px
}
/***********************************************************/
.center_align_span{
display: flex;
flex-direction: row;
}
.center_align_span::before, .center_align_span::after{
content: "";
flex: 1 1;
border-bottom: 1px solid #5d5d5d;
margin: auto;
}
/*********************************************************************/
.certificate_element{
margin-bottom: 24px;
margin-right: 10px;
width: 326px;
display: inline-block;
padding: 16px;
background-color: #fff;
border-radius: 8px;
border: 1px solid #E8E8E8;
position: relative;
}
.certificate_item{
padding: 40px 50px;
background: linear-gradient(180deg, rgba(33, 178, 240, 0.09) 0%, rgba(7, 168, 237, 0) 100%);
}
.certificate_item.blurred{
filter: blur(2px);
}
.certificate_content_item{
text-align: center;
}
.cert_image_group{
padding: 20px 10px;
border: 1px solid #E8E8E8;
border-radius: 8px;
width: 124px;
}
/********************************************************************/
.certificate_element.completed:after{
/* content: "completed"; */
content: attr(data-completed);
z-index: 1;
overflow: hidden;
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
width: 120px;
display: block;
background: #22A2D9;
/* background: linear-gradient(#22A2D9 0%, #22A2D9 100%); */
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 20px;
right: -30px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px);
}
.appointment_item {
border: 1px solid #DBDBDB;
padding: 12px;
border-radius: 8px;
margin-bottom: 14px;
}
.border-none {
border: none !important;
}
.free-pro-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: 2px solid #1ea7fd; /* Light blue border */
border-radius: 22px; /* Rounded pill shape */
font-size: 16px;
font-weight: 500;
color: #1ea7fd;
background: #eaf6ff; /* Light blue background */
cursor: default;
white-space: nowrap;
}
.free-pro-badge img {
height: 20px;
width: auto;
display: block;
}
.free-pro-badge .text {
display: inline-block;
}
.quote-card {
background: linear-gradient(135deg, #e0f7fa, #fce4ec);
border-radius: 1rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
padding: 1rem 1.5rem;
max-width: 360px;
position: fixed;
top: 20px;
right: 20px;
z-index: 1050;
font-style: italic;
color: #333;
font-size: 18px;
font-weight: 500;
}
/********************************************************************/
@media (min-width: 992px) {
.fixed-fluid > .fixed-md-385 {
width: 385px;
}
.no_payout_group{
padding: 72px 16px 40px;
}
}
@media (max-width: 1200px) {
.datepicker-inline {
width: 100% !important;
}
.s-display_block{
display: block !important;
}
.datepicker table {
width: 100% !important;
}
.s-mt-20{
margin-top: 20px;
}
.s-mt-30{
margin-top: 30px;
}
.s-mt-40{
margin-top: 40px;
}
.s-mb-0{
margin-bottom: 0px !important;
}
.panel-body {
padding: 20px 10px 20px 10px;
}
.panel-controlled {
padding: 12px;
}
.auth_head{
padding: 20px;
}
#container .fc-left, .fc-myCustomButton-button{
display: none;
}
.backend-pad-container{
padding-left: 40px;
padding-right: 40px;
margin-top: 20px;
}
.xs-flex-row{
flex-direction: row;
flex-wrap: wrap;
}
.discussion_item .discussion_content {
height: 100px;
}
.discussion_reply_item:hover .discussion_reply_item_action{
visibility: visible;
height: auto;
}
.map_content{
display: none;
}
.map_content.add_in{
display: block;
}
.add-appointment-group.forum{
display: block;
}
}
@media (max-width: 992px) {
.payment_method_item_body{
padding-left: unset;
}
}
@media (max-width: 767px) {
#content-container{
padding-bottom: 0px;
}
.add-appointment-group{
display: block;
}
.modal-full .control-part{
display: none;
}
.modal-full .new_app .main-work-content, .modal-full .edit_app .main-work-content{
padding: 0px;
}
.date_confirm_part{
display: none;
}
#chart-orders{
min-width: 1000px;
}
.chart-orders-group{
overflow-x: auto;
}
#full-calendar{
min-width: 1000px;
}
.full-calendar-group{
overflow-x: auto;
}
#container .fc-toolbar {
text-align: left;
}
#container .fc-toolbar>*>*, #container .fc-toolbar .fc-button-group>* {
float: left !important;
}
.fc-custom_add_new_appointment_button-button{
margin-right: 10px !important;
}
.panel-body {
padding: 20px 10px 20px 10px;
}
.panel-body.main {
padding: 20px 30px;
}
.x-mt-10{
margin-top: 10px !important;
}
.x-mt-20{
margin-top: 20px !important;
}
.x-mt-30{
margin-top: 30px;
}
.x-mb-0{
margin-bottom: 0px !important;
}
.x-mb-20{
margin-bottom: 20px;
}
.x-mr-0{
margin-right: 0px;
}
.x-ml-0{
margin-left: 0px;
}
.x-ml-10{
margin-left: 10px;
}
.x-pd-hor-20{
padding-left: 20px;
padding-right: 20px;
}
.btn {
padding: 8px 12px;
}
.panel-control .nav-tabs > li > a {
padding: 0 9px;
}
.modal .modal-body, .modal .modal-footer {
padding-left: 14px;
text-align: left;
}
.modal .modal-right-side {
display: none;
}
.modal-title {
margin-left: 0px;
}
.auth_head{
padding: 20px 10px;
}
.auth_form{
padding: 20px;
}
.hd3_24{
font-style: normal;
font-size: 20px;
line-height: 28px;
vertical-align: top;
font-weight: 500;
}
.hd4_20{
font-size: 17px;
line-height: 22px;
}
.hd5_15{
font-size: 13px;
line-height: 22px;
font-weight: 400;
}
.x-text-left{
text-align: left;
}
.x-text-center{
text-align: center;
}
.x-btn-block {
display: block;
width: 100%;
}
#page-content{
padding: 0px;
}
.sidebar_control_appointment{
display: none;
}
.sidebar_control_appointment.active{
display: flex;
}
.fc-header-toolbar{
display: none;
}
.full-calendar-control-part{
display: block;
}
.appointment_control_group{
display: none;
}
.mobile-hidden{
display: none !important;
}
.mobile_date_confirm_part{
display: block;
}
.mobile-date-handling.active{
display: block;
}
.holistico_popup_modal_content.holistico_popup_content-md{
width: 99%;
}
.appointment_form{
background-color: #FFF;
}
.backend-pad-container{
padding-left: 0px;
padding-right: 0px;
margin-top: 20px;
}
.xs-full-width{
width: 100% !important;
}
.empty-main-body{
padding-left: 10px;
padding-right: 10px;
}
.student_auth_form{
padding: 20px 10px;
}
.front-switch-item{
font-size: 11px;
}
}
/* ---------- header bell notification dropdown (ntfd) ---------- */
.dropdown-menu.ntfd-menu {
width: 360px;
max-width: 92vw;
padding: 0;
border: 1px solid #ece7dc;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(31,42,46,.12);
}
.ntfd { font-family: 'Noto Sans', Verdana, sans-serif; color: #1f2a2e; }
.ntfd-head {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 16px; border-bottom: 1px solid #ece7dc; background: #fff;
}
.ntfd-title { font-size: 14px; font-weight: 700; }
.ntfd-count {
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: #c0584a; color: #fff; font-size: 11px; font-weight: 700;
}
.ntfd-list { max-height: 400px; overflow-y: auto; background: #fff; }
.ntfd-row {
display: flex; align-items: center; gap: 11px;
padding: 11px 16px; border-bottom: 1px solid #f3efe6;
text-decoration: none; color: #1f2a2e;
transition: background .12s;
}
.ntfd-row:last-child { border-bottom: none; }
.ntfd-row:hover, .ntfd-row:focus { background: #faf9f5; text-decoration: none; color: #1f2a2e; }
.ntfd-row.is-unread { background: #f0f8fa; box-shadow: inset 3px 0 0 #2c9db7; }
.ntfd-row.is-unread:hover, .ntfd-row.is-unread:focus { background: #e9f4f7; }
.ntfd-ava {
position: relative; flex: 0 0 auto;
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, #225863, #163338);
color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase;
display: flex; align-items: center; justify-content: center;
}
.ntfd-type {
position: absolute; right: -4px; bottom: -4px;
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid #fff; color: #fff;
display: flex; align-items: center; justify-content: center;
}
.ntfd-type-reply { background: #2c9db7; }
.ntfd-type-like { background: #c0584a; }
.ntfd-type-follow { background: #4f9d69; }
.ntfd-type-system { background: #b98f2f; }
.ntfd-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntfd-msg {
font-size: 13px; line-height: 1.4; white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ntfd-row.is-unread .ntfd-msg { font-weight: 600; }
.ntfd-msg .primary-text { color: #1f8298; font-weight: 600; font-style: normal; }
.ntfd-time { font-size: 11.5px; color: #7c8a8e; }
.ntfd-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #2c9db7; }
.ntfd-empty { padding: 30px 16px; text-align: center; color: #7c8a8e; background: #fff; }
.ntfd-empty svg { color: #ece7dc; margin-bottom: 8px; }
.ntfd-empty p { font-size: 13px; margin: 0; }
.ntfd-all {
display: block; text-align: center; padding: 12px 16px;
font-size: 13px; font-weight: 600; color: #1f8298;
border-top: 1px solid #ece7dc; background: #fff; text-decoration: none;
}
.ntfd-all:hover, .ntfd-all:focus { background: #faf9f5; color: #1f8298; text-decoration: none; }
/**************** Student sidebar: LEARN/COMMUNITY/GROW sections + profile card ****************/
.mainnav-section-title {
padding: 18px 20px 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
.mainnav-sm .mainnav-section-title {
display: none;
}
.menu-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.menu-badge-count {
background-color: #fff;
color: #1D3A5F;
}
.menu-badge-gift {
background-color: #DFF5E9;
color: #1E8E5A;
font-size: 11px;
}
.menu-dot {
display: inline-block;
width: 10px;
height: 10px;
margin-top: 5px;
border-radius: 50%;
background-color: #F7C948;
}
.mainnav-sm .menu-badge, .mainnav-sm .menu-dot {
display: none;
}
.sidebar-profile-card {
background-color: rgba(255, 255, 255, 0.18);
border-radius: 14px;
padding: 14px;
margin-inline: 16px;
width: 265px;
visibility: visible;
transition: width 0.3s ease-in-out;
}
.mainnav-sm .sidebar-profile-card {
width: 0px;
visibility: hidden;
transition: width 0.3s ease-in-out;
}
.sidebar-profile-row {
display: flex;
align-items: center;
}
.sidebar-profile-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.sidebar-profile-initial {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
color: #1D3A5F;
font-size: 16px;
font-weight: 700;
}
.sidebar-profile-meta {
flex: 1;
min-width: 0;
padding-left: 10px;
}
.sidebar-profile-name {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-profile-streak {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
/* Carries a tooltip explaining what earns and what breaks the streak, so it needs
the "there is more here" affordance. width:fit-content keeps the dotted rule
under the text instead of running the full card width. */
cursor: help;
width: -moz-fit-content;
width: fit-content;
border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
}
.sidebar-profile-settings img {
width: 20px;
height: 20px;
opacity: 0.85;
}
.sidebar-profile-settings:hover img {
opacity: 1;
}
.sidebar-profile-impact {
display: block;
margin-top: 12px;
text-decoration: none;
}
.sidebar-impact-track {
height: 8px;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.35);
overflow: hidden;
}
.sidebar-impact-fill {
height: 100%;
width: 0%;
border-radius: 6px;
background-color: #fff;
transition: width 0.4s ease-in-out;
}
.sidebar-impact-meta {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 12px;
font-weight: 600;
color: #fff;
}
.sidebar-impact-meta span:last-child {
font-weight: 700;
}
/* Student/Practitioner role toggle (sidebar top) */
.sidebar-role-toggle-item {
padding: 12px 16px 4px;
}
.sidebar-role-toggle {
display: flex;
background-color: rgba(255, 255, 255, 0.18);
border-radius: 22px;
padding: 4px;
}
#mainnav-menu .sidebar-role-option {
flex: 1;
text-align: center;
padding: 7px 12px;
border-radius: 18px;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
}
#mainnav-menu a.sidebar-role-option:hover {
color: #fff;
}
#mainnav-menu .sidebar-role-option.active {
background-color: #fff;
color: #1D3A5F;
cursor: default;
}
.mainnav-sm .sidebar-role-toggle-item {
display: none;
}
/* Profile card: avatar+name+streak links to settings */
.sidebar-profile-link {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
text-decoration: none;
}
.sidebar-profile-link:hover {
text-decoration: none;
}
/**************** Courses dashboard (enrolled courses redesign) ****************/
.courses-welcome {
padding: 10px 15px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.courses-welcome-left {
flex: 1;
min-width: 0;
}
.courses-welcome-title {
margin: 0 0 6px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 30px;
font-weight: 700;
color: #1D3A5F;
}
.courses-welcome-sub {
margin: 0 0 10px;
font-size: 15px;
color: #4A6076;
}
.courses-next-live-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 18px;
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
flex-shrink: 0;
max-width: 45%;
}
.courses-next-live-card:hover {
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.courses-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #2BB3A3;
margin-top: 6px;
flex-shrink: 0;
}
.courses-live-title {
display: block;
font-size: 14px;
font-weight: 700;
color: #1D3A5F;
}
.courses-live-detail {
display: block;
font-size: 13px;
color: #4A6076;
}
@media (max-width: 768px) {
.courses-welcome {
flex-direction: column;
}
.courses-next-live-card {
max-width: 100%;
}
}
.courses-featured-card {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 20px 15px;
padding: 24px 28px;
background-color: #DEEDFA;
border-radius: 16px;
overflow: hidden;
}
.courses-featured-card::after {
content: "";
position: absolute;
right: -50px;
bottom: -90px;
width: 240px;
height: 240px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.35);
}
.courses-featured-main {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 18px;
flex: 1;
min-width: 0;
}
.courses-featured-thumb {
width: 84px;
height: 84px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
background-color: #fff;
}
.courses-featured-body {
flex: 1;
min-width: 0;
}
.courses-featured-label {
margin: 0 0 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #2F6FB2;
}
.courses-featured-title {
margin: 0 0 4px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
color: #1D3A5F;
}
.courses-featured-progress {
margin: 0 0 10px;
font-size: 13px;
color: #4A6076;
}
.courses-featured-track {
height: 8px;
max-width: 420px;
border-radius: 6px;
background-color: #C9DFF3;
overflow: hidden;
}
.courses-featured-dots {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.courses-featured-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #B9D4EC;
background-color: transparent;
}
.courses-featured-dots span.is-done {
background-color: #2F6FB2;
border-color: #2F6FB2;
}
.courses-featured-dots span.is-current {
border-color: #2F6FB2;
background-color: #fff;
}
.courses-featured-cta {
position: relative;
z-index: 1;
text-align: center;
flex-shrink: 0;
}
.courses-resume-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px;
border-radius: 26px;
background-color: #2F6FB2;
color: #fff;
font-size: 14px;
font-weight: 700;
}
.courses-resume-btn:hover, .courses-resume-btn:focus {
background-color: #275E99;
color: #fff;
text-decoration: none;
}
.courses-resume-btn .fa-play {
font-size: 10px;
}
.courses-featured-eta {
margin: 8px 0 0;
font-size: 12px;
color: #4A6076;
}
.courses-btn {
border-radius: 8px;
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
margin: 20px 15px;
}
.courses-grid-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 26px 15px 0;
}
.courses-grid-meta {
margin: 0;
font-size: 13px;
color: #4A6076;
}
.courses-tabs {
display: flex;
gap: 4px;
padding: 4px;
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 24px;
}
.courses-tab {
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 700;
color: #4A6076;
}
.courses-tab:hover {
color: #1D3A5F;
text-decoration: none;
}
.courses-tab.active {
background-color: #1B4A7A;
color: #fff;
}
.courses-card {
display: flex;
flex-direction: column;
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.15s ease-in-out;
}
.courses-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-decoration: none;
}
.courses-card-img-wrap {
position: relative;
}
.courses-card-img {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
display: block;
}
.courses-new-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 3px 10px;
border-radius: 10px;
background-color: #F7C948;
color: #1D3A5F;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
/* Received-as-a-gift flag on an enrolled card. Same footprint as .courses-new-badge,
in the sidebar gift-pill palette; z-index clears .courses-card-cover (z-index 1). */
.courses-gift-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
padding: 3px 10px;
border-radius: 10px;
background-color: #DFF5E9;
color: #1E8E5A;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.courses-card-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
flex: 1;
}
.courses-card-title {
margin: 0 0 8px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 16px;
font-weight: 700;
color: #1D3A5F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.courses-card-track {
height: 8px;
border-radius: 6px;
background-color: #DCE9F5;
overflow: hidden;
margin-bottom: 8px;
}
.courses-card-fill {
height: 100%;
width: 0%;
border-radius: 6px;
background-color: #2F6FB2;
transition: width 0.4s ease-in-out;
}
.courses-card-progress {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: #1D3A5F;
}
.courses-card-meta {
margin: 8px 0 0;
font-size: 12px;
color: #7A8CA0;
}
.courses-card-btn {
margin-top: auto;
align-self: flex-start;
border-radius: 20px;
padding: 7px 18px;
font-size: 13px;
}
.courses-section-title {
margin: 30px 15px 0;
font-size: 18px;
font-weight: 700;
color: #1D3A5F;
}
.courses-referral-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 30px 15px 20px;
padding: 20px 24px;
background-color: #E3F1FC;
border-radius: 14px;
}
.courses-referral-title {
margin: 0 0 6px;
font-size: 17px;
font-weight: 700;
color: #1D3A5F;
}
.courses-referral-desc {
margin: 0;
font-size: 13px;
color: #4A6076;
}
.courses-referral-card .btn {
flex-shrink: 0;
}
@media (max-width: 768px) {
.courses-featured-card {
flex-direction: column;
align-items: flex-start;
}
.courses-featured-main {
width: 100%;
}
.courses-referral-card {
flex-direction: column;
align-items: flex-start;
}
}
/* Top header bar: page title, super-admin chip, course search */
.topbar-left {
float: left;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0 0 24px;
}
.topbar-title {
margin: 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: 22px;
font-weight: 700;
color: #1D3A5F;
line-height: 34px;
}
/* Impersonation pill, inline beside the page title.
Shown on desktop only — see the max-width:1249px hide further down. The earlier
attempts to make it survive narrow widths (wrapping inside .topbar-left, then a
full-width bar above the promo strip) are gone: restricting it to the widths where
it fits is what actually keeps the topbar a single clean row, and it never has to
reflow. Sizes below are the original pill. */
.topbar-admin-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background-color: #FBF3D9;
border: 1px solid #EAD9A0;
border-radius: 16px;
font-size: 13px;
font-weight: 600;
color: #8A6D1D;
line-height: 1.2;
white-space: nowrap;
flex: 0 0 auto;
}
.topbar-admin-chip a {
color: #8A6D1D;
text-decoration: underline;
font-weight: 700;
}
.topbar-admin-close {
border: 0;
background: transparent;
color: #8A6D1D;
font-size: 16px;
line-height: 1;
padding: 0 2px;
cursor: pointer;
}
.topbar-search-item {
padding: 12px 8px 0 0;
}
.topbar-search {
display: flex;
align-items: center;
gap: 8px;
background-color: #fff;
border: 1px solid #E3E3E3;
border-radius: 20px;
padding: 8px 16px;
width: 240px;
}
.topbar-search .fa-search {
color: #9AA7B5;
}
.topbar-search input {
border: 0;
outline: none;
background: transparent;
width: 100%;
font-size: 13px;
}
/* Catalog cards: badges, price, actions */
.courses-card-school {
margin: 0 0 8px;
font-size: 12px;
color: #7A8CA0;
}
.courses-card {
align-self: start;
position: relative;
}
.courses-card-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
cursor: pointer;
}
.courses-card .courses-card-btn {
position: relative;
z-index: 2;
}
.courses-bestseller-badge {
position: absolute;
top: 10px;
right: 10px;
padding: 3px 10px;
border-radius: 10px;
background-color: #1E8E5A;
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.courses-badge-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
}
.courses-off-badge {
padding: 3px 10px;
border-radius: 12px;
background-color: #FBEDC9;
color: #8A6D1D;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.courses-launch-label {
font-size: 12px;
color: #4A6076;
}
.courses-card-price {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
color: #1D3A5F;
}
.courses-card-price del {
margin-left: 6px;
color: #B6C2CF;
font-size: 13px;
font-weight: 400;
}
.courses-card-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.courses-view-btn {
display: inline-block;
padding: 8px 18px;
border: 1px solid #2F6FB2;
border-radius: 20px;
background-color: #fff;
color: #1D3A5F;
font-size: 13px;
font-weight: 700;
}
.courses-card:hover .courses-view-btn {
background-color: #F0F7FD;
}
.courses-enroll-btn {
padding: 8px 18px;
border-radius: 20px;
font-size: 13px;
}
/* Catalog: badges + price merged on one line */
.courses-badge-row .courses-card-price {
margin: 0 0 0 auto;
}
/**************** Course overview page (enrolled_course_item, no ?go) ****************/
.topbar-crumb {
color: #7A8CA0;
font-weight: 400;
}
.topbar-crumb:hover {
color: #1D3A5F;
text-decoration: none;
}
.topbar-crumb-sep {
margin: 0 8px;
color: #B6C2CF;
font-weight: 400;
}
.cov-header-card {
position: relative;
display: flex;
align-items: center;
gap: 22px;
margin: 20px 15px;
padding: 24px 28px;
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 16px;
overflow: hidden;
}
.cov-header-card::after {
content: "";
position: absolute;
right: -60px;
top: -60px;
width: 220px;
height: 220px;
border-radius: 50%;
background-color: #EAF4FC;
}
.cov-header-main {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
}
.cov-title {
margin: 0 0 10px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 26px;
font-weight: 700;
color: #1D3A5F;
}
.cov-info-row {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 0 0 14px;
font-size: 13px;
color: #4A6076;
}
.cov-info-row .fa {
margin-right: 5px;
color: #7A8CA0;
}
.cov-progress-row {
display: flex;
align-items: center;
gap: 14px;
}
.cov-track {
flex: 1;
max-width: 520px;
height: 8px;
border-radius: 6px;
background-color: rgba(47, 164, 230, 0.15);
overflow: hidden;
}
.cov-progress-text {
font-size: 13px;
font-weight: 700;
color: #1D3A5F;
white-space: nowrap;
}
.cov-header-cta {
position: relative;
z-index: 1;
text-align: center;
flex-shrink: 0;
}
.cov-pdf-btn {
display: inline-block;
margin-top: 12px;
}
.cov-card {
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 14px;
padding: 20px 22px;
margin: 0 15px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.cov-content-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.cov-h3 {
margin: 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
color: #1D3A5F;
}
.cov-content-hint {
font-size: 12px;
color: #7A8CA0;
}
.cov-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 4px;
border-bottom: 1px solid #F0F0F0;
}
.cov-row:last-child {
border-bottom: 0;
}
.cov-row:hover {
text-decoration: none;
background-color: #FAFCFE;
}
.cov-row-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid #D8E4EF;
color: #7A8CA0;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
background-color: #fff;
}
.cov-row-icon.is-done {
border-color: #2E9E77;
color: #2E9E77;
}
.cov-row-icon.is-current {
border-color: #2F6FB2;
background-color: #2F6FB2;
color: #fff;
}
.cov-row-icon.is-final {
border-color: #E8C662;
color: #C99B1D;
}
.cov-row-body {
flex: 1;
min-width: 0;
}
.cov-row-title {
display: block;
font-size: 14px;
font-weight: 700;
color: #1D3A5F;
}
.cov-row-sub {
display: block;
font-size: 12px;
color: #7A8CA0;
margin-top: 2px;
}
.cov-pill {
flex-shrink: 0;
padding: 3px 12px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
}
.cov-pill-done {
background-color: #DFF5E9;
color: #1E8E5A;
}
.cov-pill-next {
background-color: #E3F1FC;
color: #2F6FB2;
}
.cov-pill-future {
color: #B6C2CF;
background-color: #F4F6F8;
}
.cov-pill-locked {
background-color: #F4F6F8;
color: #7A8CA0;
}
.cov-row-arrow {
color: #B6C2CF;
}
.cov-row-final {
background-color: #FDFAF0;
border-radius: 10px;
margin-top: 6px;
padding-left: 10px;
padding-right: 10px;
}
.cov-ring-card {
text-align: center;
}
.cov-ring {
width: 120px;
height: 120px;
margin: 6px auto 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cov-ring-value {
display: flex;
align-items: center;
justify-content: center;
width: 92px;
height: 92px;
border-radius: 50%;
background-color: #fff;
font-family: Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: 700;
color: #1D3A5F;
}
.cov-ring-line {
margin: 0 0 4px;
font-size: 13px;
color: #1D3A5F;
}
.cov-ring-sub {
margin: 0;
font-size: 12px;
color: #7A8CA0;
}
.cov-cert-card {
text-align: left;
}
.cov-cert-img {
width: 100%;
border-radius: 8px;
border: 1px solid #E8E8E8;
margin-bottom: 12px;
}
.cov-cert-blur {
filter: blur(2px);
opacity: 0.8;
}
.cov-h4 {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: #1D3A5F;
}
.cov-card-text {
margin: 0 0 12px;
font-size: 13px;
color: #4A6076;
}
.cov-community-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.cov-live-line {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 12px;
color: #4A6076;
}
.cov-live-line .courses-live-dot {
margin-top: 0;
}
a.cov-live-line:hover {
color: #1D3A5F;
text-decoration: none;
}
@media (max-width: 992px) {
.cov-header-card {
flex-direction: column;
align-items: flex-start;
}
}
/* Courses page: search pill in the tabs row */
.courses-grid-head .courses-grid-meta {
flex: 1;
}
.courses-grid-head .topbar-search {
width: 220px;
}
/* Course overview: community card avatars + online now */
.cov-online-row {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
}
.cov-avatars {
display: flex;
}
.cov-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
margin-left: -8px;
}
.cov-avatar:first-child {
margin-left: 0;
}
.cov-online-count {
color: #2BB3A3;
font-weight: 700;
}
.cov-online-text {
font-size: 13px;
color: #4A6076;
}
/* Course overview: HTML certificate preview (real name + course) */
.cov-cert-preview {
position: relative;
margin-bottom: 12px;
padding: 24px 16px;
text-align: center;
background-color: #FDFDFB;
border: 6px solid #AEB8D8;
border-radius: 6px;
}
.cov-cert-preview::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
border: 1px solid #C5CDE4;
pointer-events: none;
}
.cov-cert-course {
margin: 0 0 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #444;
}
.cov-cert-name {
margin: 0 0 10px;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 24px;
color: #C99B1D;
}
.cov-cert-line {
margin: 0;
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #666;
}
.cov-cert-date {
margin: 8px 0 0;
font-size: 10px;
color: #888;
}
/**************** Sidebar polish: prototype blue, lotus watermark, compact, white active pill ****************/
.student_content #mainnav,
.student_content #mainnav-menu > .active,
.student_navbar .navbar-brand,
.student_navbar .navbar-header {
background-color: #4A9BD8;
}
.student_content #mainnav {
position: relative;
}
.student_content #mainnav::after {
content: "";
position: absolute;
bottom: 140px;
right: -50px;
width: 240px;
height: 240px;
background: url('../img/logo/short_logo.png') no-repeat center / contain;
filter: brightness(0) invert(1);
opacity: 0.1;
pointer-events: none;
}
/* compact rows */
.student_content #mainnav-menu a {
font-size: 14px;
font-weight: 600;
}
.student_content #mainnav-menu > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin: 1px 10px;
border-radius: 10px;
}
.student_content #mainnav-menu a img {
width: 20px;
height: 20px;
}
.student_content .mainnav-section-title {
padding: 12px 22px 4px;
font-size: 10px;
letter-spacing: 1.3px;
font-weight: 800;
color: rgba(255, 255, 255, 0.75);
}
.student_content .sidebar-role-toggle-item {
padding: 8px 14px 2px;
}
.student_content #mainnav-menu .sidebar-role-option {
padding: 6px 12px;
font-size: 13px;
}
/* active item = solid white pill with navy text, like the prototype */
.student_content #mainnav-menu > .active-sub > a,
.student_content #mainnav-menu > .active-sub > a:hover {
background-color: #fff;
color: #1D3A5F;
border-radius: 10px;
font-weight: 700;
}
.student_content #mainnav-menu > .active-sub > a img {
filter: none;
background-color: #4A9BD8;
border-radius: 8px;
padding: 3px;
box-sizing: content-box;
}
/* badges readable on both blue and white backgrounds */
.menu-badge-count {
background-color: #E3F1FC;
color: #1D3A5F;
}
/* slightly smaller profile card text */
.student_content .sidebar-profile-card {
padding: 12px;
}
.student_content .sidebar-profile-name {
font-size: 13px;
}
.student_content .sidebar-profile-streak {
font-size: 11px;
}
.student_content .menu-badge {
font-size: 11px;
}
/* Topbar search: magnifier is a submit button */
.topbar-search-btn {
border: 0;
padding: 0;
background: transparent;
color: #9AA7B5;
cursor: pointer;
display: flex;
align-items: center;
}
.topbar-search-btn:hover {
color: #1D3A5F;
}
/**************** Certificates page redesign ****************/
.cert-head {
margin: 20px 15px 0;
}
.courses-tabs .front-switch-item {
background: transparent;
border: 0;
}
.courses-tabs .front-switch-item.active {
background-color: #1B4A7A;
color: #fff;
}
.cert-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
padding: 20px 15px;
}
.cert-grid .certificate_element {
width: auto;
float: none;
margin: 0;
padding: 0;
}
.cert-grid .certificate_element.completed:after {
display: none;
}
.cert-card {
display: flex;
flex-direction: column;
align-self: start;
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
text-align: left;
}
.cert-card-img {
width: 100%;
display: block;
background-color: #F4F6F8;
}
.cert-card-img-dim {
opacity: 0.55;
}
.cert-card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
padding: 14px 16px;
}
.cert-earned-note {
margin: 0 0 6px;
font-size: 12px;
color: #C99B1D;
}
.cert-pill {
margin: 0 0 10px;
}
.cert-stars-row {
margin: 4px 0 8px;
}
.cert-card-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
width: 100%;
margin-top: auto;
padding-top: 8px;
}
.cert-print-note {
margin: 6px 15px 0;
font-size: 12px;
color: #7A8CA0;
text-align: center;
}
/* Certificates: earned certs as wide trophy cards */
.cert-card-earned {
grid-column: 1 / -1;
position: relative;
flex-direction: row;
align-items: center;
gap: 36px;
padding: 28px 32px;
background-color: #FDFBF2;
border: 1px solid #F0E6C8;
border-radius: 14px;
overflow: visible;
width: 100%;
max-width: 1140px;
justify-self: center;
}
.cert-card-earned::before {
content: "";
position: absolute;
top: -8px;
left: 40px;
width: 90px;
height: 22px;
background-color: #F2DFA0;
opacity: 0.8;
transform: rotate(-3deg);
}
.cert-earned-img {
width: 46%;
max-width: 520px;
flex-shrink: 0;
border-radius: 6px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
background-color: #fff;
}
.cert-earned-body {
flex: 1;
min-width: 0;
}
.cert-card-earned .cert-earned-note {
margin: 0 0 6px;
font-family: 'Brush Script MT', 'Segoe Script', cursive;
font-size: 20px;
color: #C99B1D;
}
.cert-earned-title {
margin: 0 0 8px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 26px;
font-weight: 700;
color: #1D3A5F;
}
/* Ordering a printed certificate is a paid action — make it a real button, not a text link */
.cert-order-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border: 0;
border-radius: 20px;
background-color: #C99B1D;
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.cert-order-link:hover, .cert-order-link:focus {
background-color: #B0871A;
color: #fff;
text-decoration: none;
}
@media (max-width: 992px) {
.cert-card-earned {
flex-direction: column;
align-items: flex-start;
}
.cert-earned-img {
width: 100%;
max-width: 100%;
}
}
/* Earned cert card: keep the rating stars compact */
.cert-card-earned .cert-stars-row {
align-self: flex-start;
display: inline-block;
}
/* Earned cert card: breathing room like the design */
.cert-card-earned .cert-earned-note {
margin-bottom: 10px;
}
.cert-card-earned .cert-earned-title {
margin: 0 0 12px;
}
.cert-card-earned .courses-card-meta {
margin: 0 0 22px;
}
.cert-card-earned .cert-stars-row {
margin: 0 0 16px;
}
.cert-card-earned .cert-card-actions {
padding-top: 0;
gap: 12px;
}
/* Earned cert card: restore inner padding (beats the .cert-grid padding reset) */
.cert-grid .cert-card-earned {
padding: 28px 32px;
}
/* Earned cert card: gap between meta line and the stars row */
.cert-card-earned .courses-card-meta {
margin: 0 0 14px;
}
.cert-card-earned .cert-stars-row {
margin: 0 0 30px;
}
/* Earned cert card: real generated certificate embedded + order status text */
.cert-earned-frame {
aspect-ratio: 297 / 210;
height: auto;
border: 0;
background-color: #fff;
pointer-events: none;
}
.cert-order-status {
font-size: 13px;
color: #4A6076;
}
/* Earned cert embed: clip the PDF viewer scrollbar */
.cert-earned-frame-wrap {
aspect-ratio: 297 / 210;
height: auto;
overflow: hidden;
position: relative;
border-radius: 6px;
background-color: #fff;
}
.cert-earned-frame-wrap .cert-earned-frame {
width: calc(100% + 20px);
height: calc(100% + 20px);
border: 0;
pointer-events: none;
}
/* Earned cert embed: overscan-clip the viewer's gray margins on all sides */
.cert-earned-frame-wrap .cert-earned-frame {
position: absolute;
top: -14px;
left: -14px;
width: calc(100% + 28px);
height: calc(100% + 28px);
}
/* Earned card: keep Download / LinkedIn / order link on one row */
.cert-card-earned .cert-card-actions {
flex-wrap: nowrap;
white-space: nowrap;
}
/* Earned cert card: width 100% must beat the .cert-grid width reset */
.cert-grid .cert-card-earned {
width: 100%;
max-width: 1140px;
}
/* Cert tiles: lock badge, status pill, footer row */
.cert-lock-badge {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 12px;
background-color: rgba(29, 42, 58, 0.78);
color: #fff;
font-size: 11px;
font-weight: 600;
}
/* Received-as-a-gift flag on a certificate card, matching .courses-gift-badge on the course
grid. Sits top-left: .cert-lock-badge owns the top-right corner of the locked tile. */
.cert-gift-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
padding: 3px 10px;
border-radius: 10px;
background-color: #DFF5E9;
color: #1E8E5A;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
/* The earned card is a wide horizontal tile whose top-left corner already carries a decorative
ribbon (.cert-card-earned::before), so its flag sits inline above the title instead. */
.cert-gift-badge-inline {
position: static;
display: inline-block;
margin-bottom: 8px;
}
.cert-status-pill {
padding: 4px 12px;
border: 1px solid #E0E4EA;
border-radius: 14px;
background-color: #FAFBFC;
color: #4A6076;
font-size: 12px;
white-space: nowrap;
}
.cert-tile-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
margin-top: auto;
padding-top: 10px;
}
/* Locked cert preview: frost the title/name band until earned */
.cert-lock-blur {
position: absolute;
top: 20%;
left: 7%;
right: 7%;
height: 36%;
background-color: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
/* Cert tile body uses align-items:flex-start — force the track full width */
.cert-card-body .courses-card-track {
width: 100%;
}
/* Earned cert embed: scale up inside the clip to push viewer gutters out of view */
.cert-earned-frame-wrap .cert-earned-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1.12);
transform-origin: 50% 50%;
}
/* Sidebar watermark: proper lotus silhouette instead of the logo plate */
.student_content.mainnav-lg #mainnav {
overflow: hidden;
}
.student_content #mainnav::after {
content: "";
position: absolute;
bottom: 150px;
right: 26px;
width: 168px;
/* box ratio matches the 100x80 viewBox so `contain` leaves no dead space */
height: 134px;
background: url("data:image/svg+xml,. */
.livec-up-desc {
margin: 0; color: #5A6E84; font-size: 13px; line-height: 1.5;
}
.livec-up-cta {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: auto; padding-top: 14px;
border-top: 1px solid #EEF1F5;
}
.livec-up-price { font-size: 17px; font-weight: 700; color: #1D3A5F; direction: ltr; unicode-bidi: isolate; }
.livec-up-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 22px; border-radius: 24px;
background-color: #1B4A7A; color: #fff;
font-size: 13px; font-weight: 700; white-space: nowrap;
box-shadow: 0 2px 6px rgba(27,74,122,0.24);
transition: background-color .15s ease, box-shadow .15s ease;
}
.livec-up-btn:hover, .livec-up-btn:focus {
background-color: #163C64; color: #fff; text-decoration: none;
box-shadow: 0 4px 12px rgba(27,74,122,0.32);
}
.livec-rec-list { display: flex; flex-direction: column; gap: 10px; margin: 0 15px; }
.livec-rec-row {
display: flex; align-items: center; gap: 16px;
background-color: #fff; border: 1px solid #E8E8E8; border-radius: 12px;
padding: 14px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.livec-rec-date { flex-shrink: 0; min-width: 150px; font-size: 13px; font-weight: 600; color: #7A8CA0; }
.livec-rec-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Handouts and the recording button share the right edge, so every row's actions land in the
same place whether or not the class handed anything out. Side by side while the row is wide
enough for it; they stack into two lines below 768px — see the media block. */
.livec-rec-actions {
flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end;
flex-wrap: wrap; gap: 10px; margin-left: auto;
}
.livec-rec-title { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; font-weight: 700; color: #1D3A5F; }
/* Below the tags on its own line: flex-basis 100% because .livec-rec-main is a wrapping flex
row, so without it the blurb would try to sit beside the last tag. */
.livec-rec-desc {
flex-basis: 100%; margin: 0; color: #5A6E84; font-size: 13px; line-height: 1.5;
}
.livec-rec-btn {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 18px; border-radius: 22px;
background-color: #fff; color: #2F6FB2; border: 1.5px solid #2F6FB2;
font-size: 13px; font-weight: 700;
}
.livec-rec-btn:hover, .livec-rec-btn:focus { background-color: #F0F6FF; color: #2F6FB2; text-decoration: none; }
.livec-rec-btn .fa { font-size: 10px; }
/* Paid recording the student hasn't bought — links to checkout instead of playback */
.livec-rec-btn.is-locked { background-color: #B5502F; border-color: #B5502F; color: #fff; }
.livec-rec-btn.is-locked:hover, .livec-rec-btn.is-locked:focus { background-color: #9C4227; border-color: #9C4227; color: #fff; }
/* ---- class materials (slides / handouts) ----
The pill geometry of .livec-rec-btn beside it — same height, radius and border weight —
but carried in neutral grey rather than the action blue, so a handout reads as the
lesser thing to do next to watching the class. The chip is a link only in shape: its
href is javascript:void(0) and the real URL is fetched on click, so a paid class's deck
is never in the page source. */
.livec-materials { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.livec-material-chip,
.livec-rec-material {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 7px; max-width: 230px;
padding: 9px 18px; border-radius: 22px;
background-color: #fff; border: 1.5px solid #D6DEE7; color: #3D5A73;
font-size: 13px; font-weight: 700; white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.livec-material-chip:hover, .livec-material-chip:focus,
.livec-rec-material:hover, .livec-rec-material:focus {
background-color: #F0F6FF; border-color: #2F6FB2; color: #2F6FB2; text-decoration: none;
}
.livec-material-chip .fa, .livec-rec-material .fa { font-size: 13px; flex-shrink: 0; }
/* The name is the only part allowed to shrink, so a long filename ellipsises inside the
pill instead of the icon sliding out from under its own border. */
.livec-material-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.livec-material-chip.is-loading, .livec-rec-material.is-loading { opacity: 0.6; pointer-events: none; }
/* Files past the first are held back so one handout and six cost the same single line;
the counter trades itself for them on click. */
.livec-material-chip.is-extra { display: none; }
.livec-materials.is-expanded .livec-material-chip.is-extra { display: inline-flex; }
.livec-materials.is-expanded .livec-material-more { display: none; }
.livec-material-more {
flex-shrink: 0;
display: inline-flex; align-items: center;
padding: 9px 15px; border-radius: 22px;
background-color: #F4F7FA; border: 1.5px solid #D6DEE7; color: #5A6E84;
font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.livec-material-more:hover, .livec-material-more:focus {
background-color: #F0F6FF; border-color: #2F6FB2; color: #2F6FB2;
}
/* On the calendar detail card they stack ABOVE the action button, right-aligned to it — hence
margin-bottom rather than -top; .livec-detail-action is a plain block, so this margin is the
only thing separating the chips from the button under them, and an empty container is display
:none so it contributes nothing. max-width because .livec-detail-action is flex-shrink:0 in
the detail row — an unbounded chip would widen that column and squeeze the title/meta side. */
.livec-detail-materials { justify-content: flex-end; margin-bottom: 10px; max-width: 260px; }
.livec-detail-materials:empty { display: none; }
.livec-loadmore-wrap { text-align: center; margin: 20px 15px 10px; }
.livec-loadmore {
padding: 10px 28px; border-radius: 22px;
background-color: #fff; border: 1px solid #D6DEE7; color: #1D3A5F;
font-size: 13px; font-weight: 700; cursor: pointer;
}
.livec-loadmore:hover { background-color: #F0F6FF; border-color: #2F6FB2; }
.livec-loadmore.is-loading { opacity: 0.6; cursor: default; }
/* Below 1200px the previous-classes row no longer has the width to keep the handout beside
the recording, so the two go into a stack — handout on top, recording under it.
align-items:stretch makes both rows the width of the widest (the button), which is what
turns two loose controls into one tidy block; a class with no handout is a stack of one and
looks unchanged. Declared ahead of the narrower blocks below so they can still override it. */
@media (max-width: 1199px) {
.livec-rec-actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
.livec-rec-actions .livec-materials { justify-content: center; }
.livec-rec-actions .livec-material-chip { flex: 1 1 auto; justify-content: center; }
.livec-rec-actions .livec-rec-btn { justify-content: center; }
}
@media (max-width: 767px) {
.livec-up-grid { grid-template-columns: 1fr; }
.livec-rec-row { flex-wrap: wrap; }
.livec-rec-date { min-width: 0; }
.livec-up-cta { flex-wrap: wrap; }
/* the row is already stacked here, so a chip may use the full width */
.livec-material-chip, .livec-rec-material { max-width: 100%; }
/* Calendar detail card: its chips read from the left once the card is stacked. The
previous-classes rows are not listed here on purpose — their actions block keeps
hugging the right through the tablet range, and only takes a full-width line on a
phone (see the 575px block). */
.livec-detail-materials { max-width: 100%; justify-content: flex-start; }
}
#liveFcCalendar .livec-ev.is-selected {
border-color: #2F6FB2;
box-shadow: 0 0 0 1px #2F6FB2;
}
/* Click-to-open detail card */
.livec-detail { margin-bottom: 16px; }
.livec-detail-card {
background-color: #fff;
/* Same blue as the selected entry on the grid (.livec-ev.is-selected), so the card
reads as belonging to the class that is outlined on the calendar. */
border: 1px solid #2F6FB2;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
padding: 20px 24px;
}
.livec-detail-label {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.livec-detail-label.is-past { color: #2F6FB2; }
.livec-detail-label.is-upcoming { color: #1E8E6E; }
/* Same red as the list card's "Live now" pill (.livec-up-soon.is-live), so a class in
progress reads identically whichever view the student is in. */
.livec-detail-label.is-live { color: #E23D3D; }
.livec-detail-label.is-live .livec-detail-mark.is-dot { background-color: #E23D3D; }
.livec-detail-mark { font-size: 9px; line-height: 1; }
.livec-detail-mark.is-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #2BB3A3;
display: inline-block;
}
.livec-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.livec-detail-left { flex: 1; min-width: 0; }
.livec-detail-title {
margin: 0 0 10px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: 700;
color: #1D3A5F;
}
.livec-detail-sub {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 13px;
color: #4A6076;
}
/* Class blurb under the meta row. The text is capped at 100 characters server-side;
72ch keeps it off the full width of a desktop card so it reads as a caption. */
.livec-detail-desc {
margin: 10px 0 0;
max-width: 72ch;
font-size: 14px;
line-height: 1.6;
color: #4A6076;
}
/* "Read more" at the end of a blurb that was cut short. A link, not a button: it reveals text
that is already on the page rather than performing an action, so it should not compete with
the card's one real CTA. Reset of the theme's chrome, since it is a for the
keyboard and for screen readers. Inline with the blurb's own line-height so it rides the last
line's baseline instead of stretching the line box; the gap is the margin alone, because the
markup deliberately leaves no whitespace between the text and the button. */
.livec-detail-more {
display: inline;
margin: 0 0 0 6px;
padding: 0;
border: 0;
background: none;
font-size: 13px;
font-weight: 600;
line-height: inherit;
color: #1D3A5F;
text-decoration: underline;
cursor: pointer;
}
.livec-detail-more:hover,
.livec-detail-more:focus {
color: #2BB3A3;
}
/* The hidden attribute only works through the UA's display:none, which the rule above outranks —
so a class with a short blurb kept showing the toggle. Restate it at author level. */
.livec-detail-more[hidden] { display: none; }
.livec-detail-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #EAF2FB;
color: #2F6FB2;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
overflow: hidden;
}
.livec-detail-avatar.has-img { background: none; }
.livec-detail-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.livec-detail-with { font-weight: 700; color: #1D3A5F; }
.livec-detail-facts { color: #4A6076; }
.livec-detail-topics { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.livec-detail-topics .livec-tag {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* isolate so RTL currency symbols (e.g. AED) don't reorder the price line */
.livec-detail-price { color: #4A6076; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.livec-detail-action { flex-shrink: 0; }
.livec-detail-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 24px;
border-radius: 24px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.livec-detail-btn.is-primary { background-color: #1B4A7A; color: #fff; border: 1.5px solid #1B4A7A; }
.livec-detail-btn.is-primary:hover, .livec-detail-btn.is-primary:focus { background-color: #163C64; color: #fff; text-decoration: none; }
.livec-detail-btn.is-outline { background-color: #fff; color: #2F6FB2; border: 1.5px solid #2F6FB2; }
.livec-detail-btn.is-outline:hover, .livec-detail-btn.is-outline:focus { background-color: #F0F6FF; color: #2F6FB2; text-decoration: none; }
.livec-detail-btn.is-muted { background-color: #F3F5F7; color: #9AA7B4; border: 1.5px solid #E4E8ED; cursor: default; }
.livec-detail-btn .livec-ev-play { font-size: 10px; color: inherit; }
@media (max-width: 767px) {
/* toolbar: view toggle + topic full width, legend on its own line */
.livec-toolbar { margin: 2px 15px 12px; gap: 10px; }
.livec-toolbar-left { width: 100%; }
.livec-viewtoggle { flex: 1; }
.livec-view-btn { flex: 1; justify-content: center; padding: 8px 10px; }
.livec-topic { flex: 0 0 auto; }
.livec-legend { display: none; }
.livec-topic-menu { min-width: 0; width: auto; max-width: calc(100vw - 30px); }
/* calendar: compress to fit a phone */
.livec-calendar-card { padding: 12px 8px 16px; }
#liveFcCalendar .fc-toolbar { text-align: center; }
#liveFcCalendar .fc-toolbar h2 { font-size: 17px; margin-right: 8px; }
#liveFcCalendar .fc-button { padding: 6px 10px; margin-left: 5px; font-size: 12px; }
#liveFcCalendar .fc-prev-button, #liveFcCalendar .fc-next-button { width: 30px; height: 30px; }
#liveFcCalendar .fc-day-grid .fc-row { min-height: 56px; }
#liveFcCalendar .fc-day-header { font-size: 10px; padding: 8px 0 8px 5px; }
#liveFcCalendar .fc-day-number { padding: 5px 0 0 5px; font-size: 12px; }
#liveFcCalendar .fc-day-grid-event { margin: 2px 3px 0; }
#liveFcCalendar .livec-ev { padding: 1px 4px; }
#liveFcCalendar .livec-ev .fc-time, #liveFcCalendar .livec-ev .fc-title { font-size: 10px; }
#liveFcCalendar .livec-ev-play { display: none; }
.livec-today-badge { width: 22px; height: 22px; }
/* detail card */
.livec-detail-row { flex-wrap: wrap; }
.livec-detail-title { font-size: 20px; }
.livec-detail-desc { font-size: 13px; margin-top: 8px; }
.livec-detail-action { width: 100%; }
.livec-detail-btn { width: 100%; justify-content: center; }
/* upcoming list cards */
.livec-up-grid { grid-template-columns: 1fr; margin: 0 15px 8px; }
.livec-up-cta { flex-wrap: wrap; gap: 10px; }
.livec-up-btn { width: 100%; justify-content: center; }
/* recordings rows: stack date/title. The button is NOT stretched here — it sits in the
right-hand actions group next to the handout chip, so a full-width button would blow
that column out. It goes full width on a phone, where the group stacks (575px block). */
.livec-rec-row { flex-wrap: wrap; gap: 10px 14px; }
.livec-rec-date { min-width: 0; flex-basis: 100%; }
}
/* Phone: the previous-classes row is stacked outright, so the actions block takes its own
full-width line rather than being squeezed into a right-hand column. Nothing else is needed
— the block is already a stretched column, so both rows fill whatever width it is given. */
@media (max-width: 575px) {
.livec-rec-actions { flex-basis: 100%; margin-left: 0; }
}
/* =====================================================================
Live-lesson checkout (redesign, 2026-07-23) — /course_catalog/purchase/live/{id}
===================================================================== */
.lco-wrap { max-width: 1120px; margin: 0 auto; padding: 24px 15px 40px; }
.lco-head { margin-bottom: 22px; }
.lco-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: #2F6FB2; }
.lco-back:hover, .lco-back:focus { color: #1B4A7A; text-decoration: none; }
.lco-back .fa { font-size: 15px; }
.lco-title { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700; color: #1D3A5F; }
.lco-accent { color: #B5502F; font-style: italic; }
.lco-sub { margin: 0; font-size: 15px; color: #4A6076; }
.lco-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 24px; align-items: start; }
.lco-card { background-color: #fff; border: 1px solid #E8E8E8; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
.lco-class-banner { position: relative; aspect-ratio: 16 / 10; background: #EAF2FB; }
.lco-class-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lco-class-body { padding: 20px 22px 22px; }
.lco-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2F6FB2; }
.lco-class-title { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; color: #1D3A5F; }
.lco-instr { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.lco-instr-avatar { width: 32px; height: 32px; border-radius: 50%; background: #EAF2FB; color: #2F6FB2; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.lco-instr-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.lco-instr-name { font-size: 14px; font-weight: 700; color: #1D3A5F; }
.lco-class-facts { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; font-size: 13px; color: #4A6076; }
.lco-fact { display: inline-flex; align-items: center; gap: 6px; }
.lco-fact .fa { color: #2BB3A3; }
.lco-class-desc { margin: 0 0 16px; font-size: 14px; color: #4A6076; line-height: 1.5; }
.lco-included { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid #EEF1F5; }
.lco-included li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; }
.lco-inc-label { color: #7A8CA0; }
.lco-inc-val { color: #1D3A5F; font-weight: 700; }
.lco-inc-val.lco-yes { width: 22px; height: 22px; border-radius: 50%; background: #E7F4EF; color: #1E8E6E; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.lco-payment .lco-card { padding: 22px 24px 24px; }
.lco-currency-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.lco-currency-label { font-size: 14px; color: #4A6076; font-weight: 600; }
.lco-payment .lco-currency-row .bootstrap-select { width: 150px !important; }
.lco-divider { border: none; border-top: 1px solid #EEF1F5; margin: 14px 0; }
.lco-section-title { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 700; color: #1D3A5F; }
.lco-pay-heading { margin-top: 22px; padding-top: 20px; border-top: 1px solid #EEF1F5; }
.lco-order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 14px; font-size: 15px; color: #1D3A5F; }
.lco-order-row .course-title { font-weight: 600; }
.lco-order-price { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.lco-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 4px; border-top: 1px solid #EEF1F5; }
.lco-total-label { font-size: 16px; font-weight: 700; color: #1D3A5F; }
.lco-total-amount { font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 700; color: #1B4A7A; direction: ltr; unicode-bidi: isolate; }
.lco-gc-toggle { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #E6EBF0; border-radius: 12px; margin-bottom: 16px; background: #F7FDFB; }
.lco-gc-text { flex: 1; font-size: 14px; color: #1D3A5F; }
.lco-gc-covered { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: 1px solid #1F9E7A; border-radius: 12px; background: #ECFDF5; margin-bottom: 16px; color: #15734F; font-size: 14px; }
.lco-gc-covered .fa { font-size: 18px; }
.lco-methods { display: flex; flex-direction: column; gap: 12px; }
.lco-methods .payment_method_item { border: 1.5px solid #E4E9EF; border-radius: 12px; padding: 14px 16px; transition: border-color .15s, box-shadow .15s; }
.lco-methods .payment_method_item.active { border-color: #2F6FB2; box-shadow: 0 0 0 1px rgba(47,111,178,0.18); }
.lco-methods .payment_method_item_header { align-items: center; }
.lco-methods .payment_method_item_body { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid #EEF1F5; }
.lco-methods .payment_method_item.active .payment_method_item_body { display: block; }
.lco-field-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #1D3A5F; }
.lco-field-label-mt { margin-top: 16px; }
.lco-pay-btn { display: block; width: 100%; margin-top: 22px; padding: 14px; border: none; border-radius: 26px; background-color: #1B4A7A; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .15s; }
.lco-pay-btn:hover { background-color: #163C64; }
.lco-secure-note { margin: 12px 0 0; text-align: center; font-size: 12px; color: #7A8CA0; }
.lco-secure-note .fa { color: #1E8E6E; }
@media (max-width: 900px) { .lco-grid { grid-template-columns: 1fr; } }
/* Sticky mobile Pay bar */
.lco-mobilebar { display: none; }
@media (max-width: 767px) {
.lco-wrap { padding: 18px 20px 96px; }
.lco-title { font-size: 24px; }
.lco-sub { font-size: 14px; }
.lco-class-body { padding: 18px 18px 20px; }
.lco-payment .lco-card { padding: 18px 18px 20px; }
.lco-mobilebar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
background: #fff; border-top: 1px solid #E8E8E8; box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.lco-mobilebar-label { display: block; font-size: 11px; color: #7A8CA0; line-height: 1.2; }
.lco-mobilebar-amount { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 700; color: #1B4A7A; direction: ltr; unicode-bidi: isolate; }
.lco-mobilebar-btn { flex-shrink: 0; border: none; border-radius: 24px; background: #1B4A7A; color: #fff; font-size: 14px; font-weight: 700; padding: 12px 28px; cursor: pointer; }
.lco-mobilebar-btn:hover { background: #163C64; }
}
/* Earned card: stars sit compact, no wide empty band before the buttons */
.cert-card-earned .cert-stars-row {
display: inline-flex;
width: auto;
margin: 0 0 10px;
line-height: 1;
}
/* Earned card: more breathing room between stars and the action buttons */
.cert-card-earned .cert-stars-row {
margin: 0 0 20px;
}
/* Gap above the action buttons — set here because the stars carries
nifty's .mar-no (margin:0 !important), which kills any margin on it */
.cert-card-earned .cert-card-actions {
padding-top: 20px;
}
/**************** Certificate order page (reuses the live-class checkout shell) ****************/
/* certificate is landscape and shouldn't be cropped like a course banner */
.cert-order-banner {
aspect-ratio: 297 / 210;
background: #fff;
padding: 14px 14px 0;
}
.cert-order-banner img {
height: auto;
max-height: 100%;
object-fit: contain;
}
.lco-radio-list {
margin: 0 0 18px;
}
.lco-radio-list .radio {
margin: 0 0 8px;
}
.lco-radio-list .radio:last-child {
margin-bottom: 0;
}
.lco-order-label {
font-size: 14px;
color: #4A6076;
}
/* initial hidden state; the Stripe country handler sets inline display, which wins */
.lco-hidden {
display: none;
}
#sa-province-container {
margin-top: 16px;
}
/* Certificate order page: give it the same cream/gold treatment as an earned certificate */
.cert-order-card {
background-color: #FDFBF2;
border-color: #F0E6C8;
}
.cert-order-banner {
position: relative;
background: transparent;
padding: 26px 22px 6px;
overflow: visible;
}
.cert-order-banner::before {
content: "";
position: absolute;
top: 6px;
left: 34px;
width: 86px;
height: 20px;
background-color: #F2DFA0;
opacity: 0.85;
transform: rotate(-3deg);
}
.cert-order-banner img {
position: relative;
border-radius: 4px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
background-color: #fff;
}
.cert-order-card .lco-class-body {
background-color: #fff;
border-top: 1px solid #F0E6C8;
}
.cert-order-card .lco-eyebrow {
color: #C99B1D;
}
/* gold CTA — continues the gold "Order a printed copy" button that leads here */
.cert-order-page .lco-pay-btn,
.cert-order-page .lco-mobilebar-btn {
background-color: #C99B1D;
border-color: #C99B1D;
}
.cert-order-page .lco-pay-btn:hover,
.cert-order-page .lco-pay-btn:focus,
.cert-order-page .lco-mobilebar-btn:hover {
background-color: #B0871A;
border-color: #B0871A;
}
/* Cert order: separate the course title from the section headings */
.cert-order-card .lco-class-title {
margin: 0 0 22px;
padding-bottom: 16px;
border-bottom: 1px solid #F0E6C8;
font-size: 22px;
}
.cert-order-card .lco-section-title {
margin: 0 0 12px;
font-family: 'Nunito', -apple-system, 'Segoe UI', Arial, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #7A8CA0;
}
.cert-order-card .lco-pay-heading {
margin-top: 24px;
}
/* Cert order: clearer separation between the course title and section headings */
.cert-order-card .lco-eyebrow {
margin-bottom: 6px;
}
/* =====================================================================
Course checkout redesign (2026-07-24) — /course_catalog/purchase/{id}
resources/views/student/learning/purchase.blade.php
Base: guided two-step stepper (sticky rail + live savings + mobile pay
bar) grafted with the cream/gold certificate HERO, Fraunces total and
two-tier CTA colors. Scoped under .course-checkout-head /
.course-checkout-page only.
PREREQUISITE: delete the stale block "Course checkout page
(course_catalog/purchase) — match the new checkout look" at
backend.css lines ~7718-7823 so it cannot fight these rules.
REUSES the shared .lco-* checkout system already in backend.css
(~7514-7591): .lco-wrap .lco-grid .lco-card .lco-class-banner/-body
.lco-eyebrow .lco-included .lco-gc-toggle .lco-gc-text .lco-gc-covered
.lco-methods .lco-field-label .lco-secure-note .lco-mobilebar(+parts).
Do NOT re-declare those; only page-specific overrides live below.
===================================================================== */
/* ---------- page shell ---------- */
.course-checkout-page {
background-color: #FAFAF7 !important;
font-family: 'Nunito', -apple-system, 'Segoe UI', Arial, sans-serif;
}
/* neutralize the old bootstrap gutter wrapper if class .pad-10 lingers */
.course-checkout-page .pad-10 { padding: 0; }
/* ---------- head + 01/02 numbered stepper ---------- */
.course-checkout-head {
background-color: transparent; border-bottom: 0; padding: 0;
}
.course-checkout-head .cco-head-inner {
max-width: 1120px; margin: 0 auto; padding: 26px 15px 4px;
display: flex; align-items: flex-end; justify-content: space-between;
flex-wrap: wrap; gap: 16px 24px;
}
.course-checkout-head .cco-head-lead { min-width: 240px; }
.course-checkout-head .lco-back { margin-bottom: 10px; }
.course-checkout-head .lco-title {
margin: 0; font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
font-size: 30px; font-weight: 700; line-height: 1.05;
letter-spacing: -0.4px; color: #1D3A5F;
}
.course-checkout-head .purchase-steps { padding: 0; margin: 0 0 4px; }
.course-checkout-head .cco-steps {
display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
}
.course-checkout-head .auth_navigation_item {
display: flex; align-items: center; gap: 10px;
padding: 11px 18px 11px 10px; border-radius: 40px;
border: 1px solid #E4E9EF; background: #fff;
font-size: 13px; font-weight: 800; color: #7A8CA0;
cursor: pointer; white-space: nowrap;
transition: border-color .15s, color .15s, box-shadow .15s;
}
.course-checkout-head .auth_navigation_item.location_info { cursor: default; }
.course-checkout-head .auth_navigation_item .cco-step-text { line-height: 1; }
.course-checkout-head .circled_item {
position: relative; width: 30px; height: 30px; flex-shrink: 0; padding: 0;
border: 0; /* neutralize the global .circled_item blue ring so "upcoming" reads muted */
border-radius: 50%; background: #F1F4F8; color: #7A8CA0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
transition: background-color .15s, color .15s;
}
.course-checkout-head .circle-label { display: inline-flex; }
.course-checkout-head .circle-label-check { display: none; font-size: 12px; }
/* step 1 (business_info) reads as current by default until .active is set on step 2 */
.course-checkout-head .auth_navigation_item.business_info:not(.active) {
color: #1D3A5F; border-color: #2F6FB2; box-shadow: 0 0 0 1px rgba(47,111,178,.14);
}
.course-checkout-head .auth_navigation_item.business_info:not(.active) .circled_item {
background: #2F6FB2; color: #fff;
}
/* JS adds .active to business_info at step 2 -> mark step 1 complete (green check) */
.course-checkout-head .auth_navigation_item.active .circle-label { display: none; }
.course-checkout-head .auth_navigation_item.active .circle-label-check { display: inline-flex; }
.course-checkout-head .auth_navigation_item.business_info.active {
color: #1E8E6E; border-color: #CDEBDD; box-shadow: none;
}
.course-checkout-head .auth_navigation_item.business_info.active .circled_item {
background: #E7F4EF; color: #1E8E6E;
}
/* once step 1 is complete, step 2 becomes the current blue chip */
.course-checkout-head .auth_navigation_item.business_info.active ~ .auth_navigation_item.location_info {
color: #1D3A5F; border-color: #2F6FB2; box-shadow: 0 0 0 1px rgba(47,111,178,.14);
}
.course-checkout-head .auth_navigation_item.business_info.active ~ .auth_navigation_item.location_info .circled_item {
background: #2F6FB2; color: #fff;
}
/* ---------- two-column shell (reuses .lco-wrap + .lco-grid) ---------- */
.course-checkout-page .lco-grid { margin-top: 4px; align-items: start; }
.course-checkout-page .cco-main { min-width: 0; display: flex; flex-direction: column; }
/* ---------- left rail: sticky persistent course card ---------- */
.course-checkout-page .cco-rail {
position: sticky; top: 20px;
display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 900px) { .course-checkout-page .cco-rail { position: static; } }
.course-checkout-page .cco-course-card .lco-class-title {
font-family: 'Fraunces', Georgia, serif; font-size: 19px;
}
.course-checkout-page .cco-course-title-link:hover { text-decoration: none; }
.course-checkout-page .cco-course-title-link:hover .lco-class-title { color: #2F6FB2; }
.course-checkout-page .cco-headline {
margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: #4A6076; text-align: left;
}
.course-checkout-page .cco-view-course {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 800; color: #2F6FB2;
}
.course-checkout-page .cco-view-course:hover { color: #1B4A7A; text-decoration: none; }
.course-checkout-page .cco-view-course .fa { font-size: 14px; }
/* trust facts reuse .lco-included list rhythm; green ticks via .lco-yes */
.course-checkout-page .cco-guarantee {
display: flex; align-items: center; gap: 10px; margin: 16px 0 0;
padding: 12px 14px; border: 1px solid #F0E6C8; border-radius: 12px; background: #FDFBF2;
}
.course-checkout-page .cco-guarantee .fa { font-size: 20px; color: #C99B1D; flex-shrink: 0; }
.course-checkout-page .cco-guarantee span { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #6B5A22; }
/* live-mirrored rail total (synced by the existing $('.course_detail_price').html()) */
.course-checkout-page .cco-rail-total {
display: flex; align-items: baseline; justify-content: space-between;
margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #EEF1F5;
}
.course-checkout-page .cco-rail-total-label {
font-size: 12px; font-weight: 800; letter-spacing: .5px;
text-transform: uppercase; color: #7A8CA0;
}
.course-checkout-page .cco-rail-total .course_detail_price {
font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700;
color: #1B4A7A; direction: ltr; unicode-bidi: isolate;
}
.course-checkout-page .cco-promo { width: 100%; border-radius: 14px; display: block; }
/* ---------- currency pill (right-aligned) ---------- */
.course-checkout-page .cco-currency-row {
display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 16px;
}
.course-checkout-page .cco-currency-label { font-size: 13px; font-weight: 800; color: #7A8CA0; }
.course-checkout-page .bootstrap-select.select_currency,
.course-checkout-page .select_currency + .bootstrap-select {
width: auto !important; min-width: 160px; margin: 0; float: none;
}
.course-checkout-page .bootstrap-select > .dropdown-toggle {
border-radius: 22px; border: 1px solid #E3E3E3; background: #fff;
}
/* ---------- step cards + step title ---------- */
.course-checkout-page .cco-main .lco-card { padding: 22px 24px 24px; margin-bottom: 16px; }
.course-checkout-page .cco-step-title {
margin: 0 0 16px; font-family: 'Fraunces', Georgia, serif;
font-size: 20px; font-weight: 700; color: #1D3A5F;
}
/* ---------- bulk-discount accordion (live savings) ---------- */
.course-checkout-page .add-more-course {
position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
margin: 0; padding: 14px 48px 14px 16px; cursor: pointer;
background: linear-gradient(180deg,#F1F8FF 0%,#EAF4FC 100%);
border: 1px solid #DCE8F5; border-radius: 12px;
transition: border-color .15s, box-shadow .15s;
}
.course-checkout-page .add-more-course:hover { border-color: #BBD6F0; box-shadow: 0 2px 8px rgba(47,111,178,.1); }
.course-checkout-page .add-more-course .mobile_add_more_title {
display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
margin: 0; padding: 0; text-align: left; font-size: 15px; font-weight: 800; color: #1D3A5F;
}
/* gold "%" badge cues the savings mechanic at a glance */
.course-checkout-page .add-more-course .mobile_add_more_title::before {
content: "%"; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
background: #C99B1D; color: #fff; font-size: 13px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
}
.course-checkout-page .add-more-course-icon {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
font-size: 24px; line-height: 0; color: #2F6FB2; transition: transform .3s ease;
}
.course-checkout-page .add-more-course-icon p { margin: 0; }
/* chevron flips when the panel is open (progressive enhancement; graceful no-op) */
.course-checkout-page .add-more-course:has(+ .switch-bulk-select.active) .add-more-course-icon {
transform: translateY(-50%) rotate(180deg);
}
/* mirrored savings message surfaced on the opener; hidden until non-empty */
.course-checkout-page .cco-save-pill {
flex-basis: 100%; margin: 6px 0 0; padding: 4px 12px; border-radius: 999px;
background: #E7F4EF; color: #1E8E6E; font-size: 12px; font-weight: 800; text-align: center;
}
.course-checkout-page .cco-save-pill:empty { display: none; }
/* JS animates .switch-bulk-select height to 300px/0 — keep the contract */
.course-checkout-page .switch-bulk-select { overflow-y: auto; height: 300px; }
.course-checkout-page .bulk-select {
height: 250px; overflow-y: auto; word-wrap: break-word; overflow-wrap: break-word; padding-right: 4px;
}
.course-checkout-page .switch-bulk-select .cco-bulk-divider { border: none; border-top: 1px solid #EEF1F5; margin: 12px 0; }
.course-checkout-page .add_more_courses {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
border: 1px solid #EEF1F5; border-radius: 10px; background: #fff;
transition: border-color .15s, background-color .15s;
}
.course-checkout-page .add_more_courses:hover { border-color: #DCE8F5; }
.course-checkout-page .add_more_courses:has(.bulk-form-checkbox:checked) { border-color: #2F6FB2; background: #F5F9FD; }
.course-checkout-page .add_more_courses .checkbox { margin: 0; }
.course-checkout-page .add_more_courses .course-title {
font-size: 14px; color: #1D3A5F; word-break: break-word; overflow-wrap: break-word;
}
.course-checkout-page .check_bulk_add_cert { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* labeled pill so the action is self-explanatory ("Add certificate" / "Certificate added") */
.course-checkout-page .bulk-add-cert {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
border-radius: 16px; border: 1px solid #DCE8F5; background: #EAF4FC; color: #2F6FB2;
cursor: pointer; font-size: 12.5px; font-weight: 700; white-space: nowrap;
transition: background-color .15s, color .15s, border-color .15s;
}
.course-checkout-page .bulk-add-cert:hover { background: #DCEBFA; border-color: #BBD6F0; }
.course-checkout-page .bulk-add-cert.minus-icon { background: #E7F4EF; border-color: #CDEBDD; color: #1E8E6E; }
.course-checkout-page .bulk-add-cert.minus-icon:hover { background: #D8EFE4; }
.course-checkout-page .bulk-add-cert.hidden { display: none; }
@media (max-width: 600px) {
.course-checkout-page .bulk-add-cert { padding: 5px 9px; font-size: 11.5px; }
}
/* ---------- certificate HERO (cream/gold, aspirational) ---------- */
.course-checkout-page .cco-cert-card { background: #FDFBF2; border: 1px solid #F0E6C8; }
.course-checkout-page .cco-cert-inner { display: flex; gap: 24px; align-items: center; }
.course-checkout-page .cco-cert-figure {
position: relative; flex-shrink: 0; width: 200px; max-width: 200px; margin: 0; padding: 14px;
border: 1px solid #F0E6C8; border-radius: 12px; background: #fff;
}
/* gold "tape" accent over the cert preview */
.course-checkout-page .cco-cert-figure::before {
content: ""; position: absolute; top: -6px; left: 26px; width: 80px; height: 18px;
background: #F2DFA0; opacity: .85; transform: rotate(-3deg); border-radius: 2px;
}
.course-checkout-page .cco-cert-figure .cov-cert-preview-img {
position: relative; width: 100%; display: block; border-radius: 4px;
box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.course-checkout-page .cco-cert-copy { flex: 1; min-width: 0; }
.course-checkout-page .cco-cert-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.course-checkout-page .cco-cert-eyebrow .hd5_15 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 700; color: #1D3A5F; }
.course-checkout-page .cco-cert-badge {
display: inline-block; padding: 2px 8px; border-radius: 6px;
background: #C99B1D; color: #fff; font-size: 11px; font-weight: 800;
}
.course-checkout-page .cco-cert-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #4A6076; }
.course-checkout-page .cco-cert-price { margin: 0 0 14px; }
.course-checkout-page .cco-cert-price del { color: #B08A5A; font-size: 15px; margin-right: 10px; }
.course-checkout-page .cco-cert-price .cco-cert-price-now {
font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; color: #C99B1D;
}
.course-checkout-page .cco-cert-toggle {
margin: 0; padding: 11px 16px; background: #fff; border: 1px solid #F0E6C8; border-radius: 10px; display: inline-block;
}
.course-checkout-page .cco-cert-toggle label { margin: 0; }
.course-checkout-page .cco-hidden { display: none; }
@media (max-width: 600px) {
.course-checkout-page .cco-cert-inner { flex-direction: column; align-items: stretch; }
.course-checkout-page .cco-cert-figure { width: auto; max-width: 240px; margin: 0 auto; }
}
/* ---------- order summary ---------- */
.course-checkout-page .cco-order-heading {
margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
text-transform: uppercase; color: #7A8CA0;
}
/* static rows + the AJAX-injected wrapper (each injected item = one
holding 1-2 .flex-vm lines).
The outer
MUST stack (block); each inner .flex-vm is a full-width title-left/price-right line. */
.course-checkout-page .cco-order-row,
.course-checkout-page .order-summary > * {
padding: 11px 0; border-bottom: 1px solid #F1F3F6;
}
.course-checkout-page .order-summary > * {
display: block !important;
}
.course-checkout-page .cco-order-row,
.course-checkout-page .order-summary .flex-vm {
display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
}
/* two stacked lines inside one injected item (course + certificate) get a little breathing room */
.course-checkout-page .order-summary .flex-vm + .flex-vm { margin-top: 6px; }
.course-checkout-page .cco-order-row .course-title,
.course-checkout-page .order-summary .course-title {
flex: 1; margin: 0; font-size: 15px; font-weight: 600; color: #1D3A5F;
word-break: break-word; overflow-wrap: break-word;
}
/* injected price cell: keep price + trash together, right-aligned */
.course-checkout-page .order-summary .hd5_15.ml-10,
.course-checkout-page .order-summary .cert_remove {
display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap;
font-size: 15px; font-weight: 700; color: #1D3A5F; direction: ltr; unicode-bidi: isolate;
}
.course-checkout-page .cco-order-amt {
display: inline-flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap;
font-size: 15px; font-weight: 700; color: #1D3A5F; direction: ltr; unicode-bidi: isolate;
}
.course-checkout-page .hide-position { opacity: 0; }
.course-checkout-page .cco-order-amt .fa-trash,
.course-checkout-page .order-summary .fa-trash,
.course-checkout-page .order-summary .cert_remove { color: #B5502F; cursor: pointer; font-size: 13px; }
/* ---------- total climax + discount + CTA ---------- */
.course-checkout-page .cco-total-block { margin-top: 4px; padding-top: 16px; border-top: 1px solid #EEF1F5; }
.course-checkout-page .cco-total-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 0;
}
.course-checkout-page .cco-total-row .lco-total-label,
.course-checkout-page .cco-total-label { font-size: 16px; font-weight: 800; color: #1D3A5F; }
.course-checkout-page .cco-total-amounts { display: inline-flex; align-items: baseline; gap: 12px; }
.course-checkout-page .total_price_nodiscount { color: #B5502F; font-size: 16px; font-weight: 600; }
.course-checkout-page .cco-total-amounts .course_detail_price {
font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 700;
color: #1B4A7A; direction: ltr; unicode-bidi: isolate;
}
.course-checkout-page .discount_message:not(:empty) {
display: inline-block; margin: 8px 0 0; padding: 4px 12px; border-radius: 999px;
background: #E7F4EF; color: #15734F; font-size: 12px; font-weight: 800;
}
.course-checkout-page .discount_message:empty { display: none; }
/* two-tier CTA: proceed = primary blue (forward), pay = deep navy (commit) */
.course-checkout-page .proceed_to_billing_button,
.course-checkout-page .pay_now_button {
display: block; width: 100%; margin-top: 20px; padding: 15px; border: none; border-radius: 30px;
color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .2px; cursor: pointer;
transition: background-color .15s, transform .05s;
}
.course-checkout-page .proceed_to_billing_button { background: #2F6FB2; }
.course-checkout-page .proceed_to_billing_button:hover,
.course-checkout-page .proceed_to_billing_button:focus { background: #275E99; color: #fff; text-decoration: none; }
.course-checkout-page .pay_now_button { background: #1B4A7A; }
.course-checkout-page .pay_now_button:hover,
.course-checkout-page .pay_now_button:focus { background: #163C64; color: #fff; text-decoration: none; }
.course-checkout-page .proceed_to_billing_button:active,
.course-checkout-page .pay_now_button:active { transform: translateY(1px); }
/* ---------- payment step (reuses .lco-methods / .lco-gc-* / .lco-secure-note) ---------- */
.course-checkout-page .gc-payable-methods.hidden { display: none; }
/* ---------- mobile sticky pay bar: step-aware button swap ---------- */
.cco-mobilebar .cco-mb-step2 { display: none; }
.cco-mobilebar[data-step="2"] .cco-mb-step1 { display: none; }
.cco-mobilebar[data-step="2"] .cco-mb-step2 { display: inline-flex; align-items: center; justify-content: center; }
/* ---------- responsive ---------- */
@media (max-width: 1200px) {
.course-checkout-head .cco-head-inner { padding: 22px 15px 4px; }
}
@media (max-width: 767px) {
.course-checkout-head .cco-head-inner { align-items: flex-start; }
.course-checkout-head .lco-title { font-size: 24px; }
.course-checkout-head .auth_navigation_item { flex: 1; justify-content: center; }
.course-checkout-page .cco-main .lco-card { padding: 18px 18px 20px; }
.course-checkout-page .cco-currency-row { justify-content: space-between; }
.course-checkout-page .add-more-course .mobile_add_more_title { font-size: 16px; }
.course-checkout-page .add-more-course-icon { font-size: 20px; }
}
/* ==========================================================================
Student home (dashboard landing page) — student/home/index.blade.php
========================================================================== */
.nhome-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 22px;
padding: 12px 15px 40px;
align-items: start;
}
.nhome-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.nhome-rail {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ---- greeting ---- */
.nhome-greet-title {
margin: 0 0 6px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 30px;
font-weight: 700;
color: #1D3A5F;
}
.nhome-greet-sub {
margin: 0;
font-size: 15px;
color: #4A6076;
}
.nhome-greet-sub b {
color: #1D3A5F;
}
/* ---- hero: continue / start here ---- */
.nhome-hero {
position: relative;
display: flex;
align-items: center;
gap: 22px;
padding: 24px 28px;
border-radius: 16px;
background-color: #1D3A5F;
overflow: hidden;
}
.nhome-hero::after {
content: "";
position: absolute;
right: -60px;
bottom: -110px;
width: 260px;
height: 260px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.06);
}
.nhome-hero-cover {
position: absolute;
top: 0;
left: 0;
width: 152px;
height: 100%;
z-index: 3;
}
.nhome-hero-art {
position: relative;
z-index: 2;
width: 104px;
height: 104px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
background-color: #fff;
}
.nhome-hero-body {
position: relative;
z-index: 2;
flex: 1;
min-width: 0;
}
.nhome-hero-kicker {
margin: 0 0 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #9EC4E6;
}
.nhome-hero-title {
margin: 0 0 10px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 26px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nhome-hero-dots {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.nhome-hero-dots i {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.28);
}
.nhome-hero-dots i.is-done {
background-color: #F0C033;
}
/* the module you're on: white, breathing (prototype .mod-dots i.now) */
.nhome-hero-dots i.is-now {
background-color: #fff;
animation: nhomePulse 2.2s ease infinite;
}
@keyframes nhomePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.nhome-hero-dots i.is-now {
animation: none;
}
}
.nhome-hero-track {
height: 5px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.2);
overflow: hidden;
margin-bottom: 10px;
max-width: 320px;
}
.nhome-hero-track .courses-card-fill {
height: 100%;
border-radius: 3px;
background-color: #F0C033;
}
.nhome-hero-sub {
margin: 0;
font-size: 14px;
color: #C6DCF0;
}
.nhome-hero-btn {
position: relative;
z-index: 4;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
background-color: #F0C033;
color: #1D3A5F;
font-size: 15px;
font-weight: 700;
}
.nhome-hero-btn:hover,
.nhome-hero-btn:focus {
background-color: #FFD35C;
color: #1D3A5F;
text-decoration: none;
}
.nhome-hero-empty .nhome-hero-title {
font-size: 22px;
}
/* ---- today row: live class + impact ---- */
.nhome-today {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* no live class to show (none scheduled, or a locale that doesn't offer them) —
the impact card takes the whole row instead of leaving a hole */
.nhome-today > .nhome-card:only-child {
grid-column: 1 / -1;
}
.nhome-card {
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.nhome-card-kick {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6B7C8C;
}
.nhome-kick-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #E0644F;
flex-shrink: 0;
}
.nhome-kick-dot.is-green {
background-color: #2EA194;
}
.nhome-card-title {
margin: 0 0 8px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 19px;
font-weight: 700;
color: #1D3A5F;
line-height: 1.25;
}
.nhome-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 14px;
font-size: 13px;
color: #4A6076;
}
.nhome-meta-av {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
}
.nhome-meta-name {
font-weight: 600;
color: #1D3A5F;
}
.nhome-card-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.nhome-countdown {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 999px;
background-color: #EAF3FB;
color: #1D3A5F;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.nhome-countdown.is-live {
background-color: #FDE7E3;
color: #B03A26;
}
.nhome-countdown:empty {
display: none;
}
/* rendered as an
for the paid/checkout branch and as a for the two
.enter-live-room branches — both have to look identical */
.nhome-ghost-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px;
border-radius: 999px;
border: 1px solid #C9DCEC;
color: #1D3A5F;
font-family: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
background-color: #fff;
cursor: pointer;
}
.nhome-ghost-btn:hover,
.nhome-ghost-btn:focus {
background-color: #EAF3FB;
color: #1D3A5F;
text-decoration: none;
}
.nhome-impact {
background-color: #F1F8F6;
border-color: #D5E9E3;
}
.nhome-impact-line {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.nhome-impact-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
}
/* ocean-plastic tier: the Impact page's wide illustration, cropped into a thumb */
.nhome-impact-illus {
flex-shrink: 0;
display: block;
width: 74px;
height: 52px;
border-radius: 10px;
overflow: hidden;
background-color: #E6F0F5;
}
.nhome-impact-illus svg {
display: block;
width: 100%;
height: 100%;
}
.nhome-impact.is-plastic {
background-color: #EEF6FB;
border-color: #CFE5EE;
}
.nhome-impact.is-plastic .nhome-kick-dot {
background-color: #3B9AE1;
}
.nhome-impact.is-plastic .nhome-impact-line p b {
color: #1E6FA8;
}
.nhome-impact.is-plastic .nhome-green-btn {
background-color: #2680C2;
}
.nhome-impact.is-plastic .nhome-green-btn:hover,
.nhome-impact.is-plastic .nhome-green-btn:focus {
background-color: #3B9AE1;
}
/* free-course (bonus) tier: cream + gold, matching the Impact page's gift card */
.nhome-impact.is-bonus {
background-color: #FBF6EC;
border-color: #EADDC2;
}
.nhome-impact.is-bonus .nhome-kick-dot {
background-color: #D4A04E;
}
.nhome-impact.is-bonus .nhome-impact-line p {
color: #6A5636;
}
.nhome-impact.is-bonus .nhome-impact-line p b {
color: #8A6420;
}
.nhome-impact.is-bonus .nhome-impact-illus {
background-color: #F5EDDC;
}
.nhome-impact.is-bonus .nhome-impact-track {
background-color: #EDE0C6;
}
.nhome-impact.is-bonus .nhome-impact-track .courses-card-fill {
background-color: #D4A04E;
}
.nhome-impact.is-bonus .nhome-green-btn {
background-color: #A55A3F;
}
.nhome-impact.is-bonus .nhome-green-btn:hover,
.nhome-impact.is-bonus .nhome-green-btn:focus {
background-color: #C46B47;
}
.nhome-impact-line p {
margin: 0;
font-size: 14px;
color: #3C5A52;
line-height: 1.5;
}
.nhome-impact-line p b {
color: #1F5A50;
}
.nhome-impact-track {
height: 6px;
border-radius: 3px;
background-color: #DCEBE6;
overflow: hidden;
margin-bottom: 14px;
}
.nhome-impact-track .courses-card-fill {
height: 100%;
border-radius: 3px;
background-color: #2EA194;
}
.nhome-green-btn {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 999px;
background-color: #1F7A6F;
color: #fff;
font-size: 13px;
font-weight: 700;
}
.nhome-green-btn:hover,
.nhome-green-btn:focus {
background-color: #2EA194;
color: #fff;
text-decoration: none;
}
/* ---- from your community ---- */
.nhome-community {
display: flex;
flex-direction: column;
gap: 12px;
}
.nhome-block-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.nhome-block-label b {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6B7C8C;
}
.nhome-block-label a {
font-size: 13px;
font-weight: 800;
color: #2E77B6;
}
.nhome-teaser {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background-color: #fff;
border: 1px solid #E8E8E8;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.nhome-teaser:hover,
.nhome-teaser:focus {
text-decoration: none;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
.nhome-teaser-av {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background-color: #EAF3FB;
display: flex;
align-items: center;
justify-content: center;
}
.nhome-teaser-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nhome-teaser-initial {
font-size: 14px;
font-weight: 700;
color: #2F6FB2;
}
.nhome-teaser-body {
flex: 1;
min-width: 0;
}
.nhome-teaser-meta {
display: block;
font-size: 12.5px;
color: #6B7C8C;
margin-bottom: 2px;
}
.nhome-teaser-tag {
font-weight: 600;
color: #2F6FB2;
}
.nhome-teaser-title {
display: block;
font-family: Georgia, 'Times New Roman', serif;
font-size: 17px;
font-weight: 700;
color: #1D3A5F;
line-height: 1.3;
margin-bottom: 4px;
}
.nhome-teaser-x {
display: block;
font-size: 13.5px;
color: #4A6076;
line-height: 1.45;
}
.nhome-teaser-jump {
flex-shrink: 0;
align-self: center;
font-size: 13px;
font-weight: 800;
color: #2E77B6;
white-space: nowrap;
}
.nhome-empty {
padding: 18px;
background-color: #fff;
border: 1px dashed #DCE4EC;
border-radius: 14px;
font-size: 13.5px;
color: #6B7C8C;
text-align: center;
}
/* ---- right rail ---- */
.nhome-rail-card {
padding: 16px 18px;
}
.nhome-rail-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6B7C8C;
}
.nhome-rail-side {
display: inline-flex;
align-items: center;
gap: 6px;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
font-weight: 800;
color: #1F7A6F;
}
.nhome-rail-side i {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #2EA194;
}
.nhome-class-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #F0F2F5;
}
.nhome-class-row:hover,
.nhome-class-row:focus {
text-decoration: none;
}
/**************** Mobile drawer brand logo ****************/
/* the generic sidebar menu-icon rule (`#mainnav-menu a img { 20px }`) was also
hitting the drawer logo and squashing it, ignoring the markup height=50 */
.student_content #mainnav-menu > .mobile-navbar-header > a {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
/* left inset 28px = the menu links' 10px margin + 18px padding, so the logo
lines up with the Home/Courses icons directly below it */
padding: 18px 16px 14px 28px;
border-radius: 0;
}
.student_content #mainnav-menu > .mobile-navbar-header > a:hover,
.student_content #mainnav-menu > .mobile-navbar-header > a:focus {
background-color: transparent;
text-decoration: none;
}
.student_content #mainnav-menu .mobile-navbar-header a img.brand-icon-mobile {
width: 44px;
height: 44px;
flex: 0 0 44px;
padding: 3px;
box-sizing: border-box;
background-color: #fff;
border-radius: 12px;
object-fit: contain;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.mobile-navbar-header .plan_part {
margin-left: 0;
min-width: 0;
}
/* zero the inherited `p { margin-bottom: 10px }` — that dead space made the
text block taller than its ink and pushed it visually above the logo */
.mobile-navbar-header .plan_part .top_text,
.mobile-navbar-header .plan_part .plan_text {
margin-top: 0;
margin-bottom: 0;
}
.mobile-navbar-header .plan_part .top_text {
line-height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-navbar-header .plan_part .plan_text {
margin-top: 2px;
line-height: 17px;
opacity: 0.85;
}
/* separate the brand from the first menu group, like the desktop header does */
.mobile-navbar-header {
margin-bottom: 6px;
}
/* narrow phones (iPhone SE / Galaxy S-mini class) */
@media (max-width: 380px) {
.student_content #mainnav-menu > .mobile-navbar-header > a {
gap: 10px;
/* menu links keep their 28px inset at every width — stay aligned */
padding: 14px 14px 12px 28px;
}
.student_content #mainnav-menu .mobile-navbar-header a img.brand-icon-mobile {
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 10px;
}
.mobile-navbar-header .plan_part .top_text {
font-size: 16px;
line-height: 20px;
}
.mobile-navbar-header .plan_part .plan_text {
font-size: 13px;
}
}
.nhome-class-row:hover .nhome-class-body b {
color: #2F6FB2;
}
.nhome-date-tile {
flex-shrink: 0;
width: 44px;
padding: 6px 0;
border-radius: 10px;
background-color: #EAF3FB;
text-align: center;
line-height: 1.15;
}
.nhome-date-tile span {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #6B87A3;
}
.nhome-date-tile b {
display: block;
font-size: 17px;
font-weight: 700;
color: #1D3A5F;
}
.nhome-class-body {
flex: 1;
min-width: 0;
}
.nhome-class-body b {
display: block;
font-size: 13.5px;
font-weight: 700;
color: #1D3A5F;
line-height: 1.3;
margin-bottom: 2px;
}
.nhome-class-body > span {
display: block;
font-size: 12px;
color: #6B7C8C;
}
.nhome-rail-more {
display: inline-block;
margin-top: 12px;
font-size: 13px;
font-weight: 800;
color: #2E77B6;
}
.nhome-presence {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nhome-presence-av {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background-color: #EAF3FB;
display: flex;
align-items: center;
justify-content: center;
}
.nhome-presence-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nhome-presence-initial {
font-size: 12px;
font-weight: 700;
color: #2F6FB2;
}
/* ---- responsive ---- */
@media (max-width: 1200px) {
.nhome-grid {
grid-template-columns: minmax(0, 1fr);
}
.nhome-rail {
flex-direction: row;
flex-wrap: wrap;
}
.nhome-rail > .nhome-card {
flex: 1 1 280px;
}
}
@media (max-width: 768px) {
/* nifty's .fixed-fluid pulls -10px either side; on desktop the content container's
padding absorbs it, on mobile there is none left and the page scrolls sideways.
.learning_content's 24px also doubles up with .nhome-grid's own padding here. */
.nhome-page .fixed-fluid {
margin-left: 0;
margin-right: 0;
}
.nhome-page .learning_content {
padding: 0;
}
.nhome-grid {
padding: 10px 12px 30px;
gap: 16px;
}
.nhome-greet-title {
font-size: 24px;
}
.nhome-hero {
flex-wrap: wrap;
gap: 12px;
padding: 18px;
}
.nhome-hero-cover {
width: 80px;
}
.nhome-hero-art {
width: 64px;
height: 64px;
}
/* the text column is narrow here — stop the kicker breaking across two lines */
.nhome-hero-kicker {
font-size: 10px;
letter-spacing: 0.06em;
}
.nhome-hero-title {
font-size: 18px;
white-space: normal;
}
.nhome-hero-sub {
font-size: 13px;
}
.nhome-hero-btn {
width: 100%;
justify-content: center;
}
.nhome-today {
grid-template-columns: minmax(0, 1fr);
}
/* reply count drops to its own line instead of squeezing the title column */
.nhome-teaser {
flex-wrap: wrap;
}
.nhome-teaser-body {
flex: 1 1 calc(100% - 54px);
}
.nhome-teaser-jump {
flex: 1 1 100%;
align-self: flex-start;
margin-left: 54px;
}
.nhome-rail {
flex-direction: column;
}
/* the ≤1200 rule above sets flex-basis 280px for the side-by-side row; once the
rail is a COLUMN that basis becomes a height and pads every card out. */
.nhome-rail > .nhome-card {
flex: 0 0 auto;
}
}
/* ==========================================================================
Topbar hamburger — prototype .hicon burger, left of the page title
(student layout only; toggles the sidebar via nifty's .mainnav-toggle)
========================================================================== */
.student_navbar .topbar-burger {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
padding: 0;
border: 0;
border-radius: 12px;
background-color: transparent;
color: #5D6B73;
transition: background-color .15s ease, color .15s ease;
}
.student_navbar .topbar-burger:hover,
.student_navbar .topbar-burger:focus {
background-color: #EAF3FB;
color: #1D3A5F;
text-decoration: none;
}
.student_navbar .topbar-burger svg {
width: 20px;
height: 20px;
}
/* the title row keeps its own left padding; the burger supplies the gap */
.student_navbar .topbar-left {
padding-left: 12px;
}
/* the old decorative arrow in the sidebar brand is replaced by this burger */
.student_navbar .brand-icon-collapse {
display: none !important;
}
/* the top-links copy has to out-specify nifty's `> li > a` table-cell rule */
.student_navbar .navbar-top-links > li > a.topbar-burger {
display: inline-grid;
height: 40px;
padding: 0;
margin: 9px 0 0;
color: #5D6B73;
}
.student_navbar .navbar-top-links > li > a.topbar-burger:hover,
.student_navbar .navbar-top-links > li > a.topbar-burger:focus {
background-color: #EAF3FB !important;
color: #1D3A5F;
}
@media (max-width: 768px) {
/* mobile keeps the existing top-links toggle (it survives the pages that
swap the title row for a search field) — the desktop one steps aside */
.student_navbar .topbar-burger-desktop {
display: none;
}
}
/* =====================================================================
Sticky right sidebar (2026-07-31) — shared by every student page.
A page opts in with .lms-sticky-side on the column it wants pinned; the
offset comes from --cwf-sticky-top, measured off the fixed header by the
student layout. align-self:start matters for grid/flex parents: a stretched
item is already full height and has nothing left to stick against.
#container.cwf-unclip is id+class, so it outranks the bare #container rule
above without !important.
===================================================================== */
#container.cwf-unclip,
.cwf-unclip {
overflow: clip;
}
@media (min-width: 992px) {
.lms-sticky-side {
position: sticky;
top: var(--cwf-sticky-top, 71px);
align-self: start;
}
}
/* ---------------------------------------------------------------------
Promo strip slides away on scroll (2026-07-31).
.banner_announce lives INSIDE the pinned #navbar, so without this it would
ride along for the whole scroll. The layout publishes --cwf-nav-shift =
min(scrollY, strip height); the strip leaves with the page and the topbar
comes to rest at the top. Verified: no position:fixed descendants inside
#navbar, so the transform's containing block is harmless here.
--------------------------------------------------------------------- */
/* The transform goes on .navbar-content — the row that actually holds the strip and
the topbar — NOT on #navbar. A transformed element becomes the containing block for
its position:fixed descendants, and .navbar-header.lms_sidebar (the left sidebar's
brand block) is fixed: transforming #navbar re-anchored it to the header box and put
the logo out of reach. Shifting only .navbar-content leaves the brand alone, so it
needs no counter-shift either. */
.student_navbar .navbar-content {
transform: translateY(calc(-1 * var(--cwf-nav-shift, 0px)));
}
/* =====================================================================
Student shell background (2026-07-31) — one colour for the whole area.
Header band, main content and footer all sit on #FDFBF5, so no page shows
a seam between them. Scoped to .student_content, which is on #container for
student pages only, so the admin theme is untouched.
Specificity beats the theme without !important: #container.student_content
#footer is (2 ids + 1 class) against nifty's bare #footer. The layout's old
inline `background: #F6F6F6 !important` on #content-container / .navbar-content
was removed for the same reason — an inline !important cannot be restyled.
===================================================================== */
#container.student_content,
#container.student_content #content-container,
#container.student_content .navbar-content,
#container.student_content #footer {
background-color: #FDFBF5;
}
/* ---------------------------------------------------------------------
Left nav stays expanded on student pages (2026-08-01).
The desktop collapse BEHAVIOUR is still disabled: collapsing put #container
into mainnav-sm, which reserves only the narrow icon rail, so the content sat
over a gap once the nav was open again. The layout still always renders
mainnav-lg, and layouts/student.blade.php still keeps the capture-phase click
killer and the MutationObserver that restore it. The MOBILE burger
(.tgl-menu-btn, visible-xs) is untouched — that one opens the nav rather
than shrinking it.
2026-08-03: the icon itself is shown again on desktop for visual parity with
the design, so every student subpage has a burger at the left of the header.
It is DELIBERATELY INERT above 992px — the guards above swallow the click.
Only the :hover / :focus state (see .topbar-burger:hover — #EAF3FB pill,
#1D3A5F glyph) is meant to respond. Do not re-add `display: none` here; to
make the control functional again, the mainnav-sm gap has to be fixed first.
--------------------------------------------------------------------- */
/* =====================================================================
STUDENT AREA — RESPONSIVE PASS (2026-08-03)
Targets: 1460 / 1200 / 968 / 768 / 480.
The one number that drives all of this: the student nav is a 296px
padding-left on #content-container, applied only from 992px up
(nifty.css, `@media (min-width: 992px) #container.mainnav-lg`). So the
width a page actually gets is
content = (W >= 992) ? W - 296 : W
which does NOT shrink monotonically with the viewport:
W=1460 -> 1164 W=992 -> 696 <-- narrowest content anywhere
W=1200 -> 904 W=991 -> 991 <-- jumps back up
W= 968 -> 968 W=768 -> 768
Content bottoms out at ~696px on a 992px viewport, then jumps to 991px
one pixel below that. Every breakpoint below is derived from the content
width, not the viewport, which is why they sit at 1279/1023 rather than
the usual 1200/992 - a rail that collapses at 992 has already spent the
whole 992-1288 band squeezing the main column into ~400px.
Appended (not merged into the per-page blocks above) so each rule simply
extends the range of the block it belongs to; nothing here overrides a
deliberate choice, it only covers widths that had no rule at all.
===================================================================== */
/* ---------- Home (.nhome-) ---------- */
/* Rail collapse moves 1200 -> 1279: main = W - 296 - 30 - 320 - 22 = W - 668,
so a 1200px viewport was giving the hero a 532px column next to a 320px
rail. 1279 keeps main >= ~611px wherever the rail is still alongside. */
@media (max-width: 1279px) {
.nhome-grid { grid-template-columns: minmax(0, 1fr); }
.nhome-rail { flex-direction: row; flex-wrap: wrap; }
.nhome-rail > .nhome-card { flex: 1 1 280px; }
}
@media (max-width: 480px) {
.nhome-greet-title { font-size: 21px; }
.nhome-hero { padding: 14px; }
.nhome-hero-title { font-size: 18px; }
/* single column: two 280px cards cannot sit side by side in 456px */
.nhome-rail > .nhome-card { flex: 1 1 100%; }
.nhome-countdown { padding: 6px 11px; font-size: 12px; }
}
/* ---------- Courses (.courses-) ---------- */
/* .courses-grid is repeat(auto-fill, minmax(300px, 1fr)) inside content-30,
which already resolves to 3 / 2 / 2 / 2 / 1 columns at the five targets.
Only the head row and the very small screens needed rules. */
@media (max-width: 600px) {
/* title + tab pills cannot share a row once the pills carry counts */
.courses-grid-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.courses-tabs { width: 100%; justify-content: center; }
.courses-tab { flex: 1; text-align: center; }
}
@media (max-width: 480px) {
.courses-welcome-title { font-size: 23px; }
.courses-featured-card { padding: 18px; gap: 14px; }
.courses-featured-main { flex-direction: column; align-items: flex-start; gap: 12px; }
.courses-featured-cta { width: 100%; }
.courses-resume-btn { width: 100%; justify-content: center; }
.courses-referral-card .btn { width: 100%; }
}
@media (max-width: 380px) {
/* a 300px track no longer fits 320px-wide phones once the 15px gutters go */
.courses-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
}
/* ---------- Certificates (.cert-) ---------- */
@media (max-width: 380px) {
.cert-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
}
/* ---------- Live classes, v2 rebuild (.livec-) ---------- */
@media (max-width: 480px) {
/* date chip + body side by side leaves ~330px for the title; stack instead */
.livec-list-row { flex-direction: column; align-items: flex-start; gap: 8px; }
.livec-list-date { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; }
.livec-toolbar { margin: 12px 12px 10px; }
}
/* ---------- Live classes, legacy list (.live-) ---------- */
@media (max-width: 480px) {
.live-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.live-cal-cell { min-height: 38px; font-size: 12px; }
.live-cal-weekdays span { font-size: 10px; }
}
/* ---------- Course overview (.lco-) ---------- */
/* minmax(300px, 400px) 1fr needs ~750px; content is 904 at W=1200 but only
696 at W=992, so the existing 900px cut leaves 992-1199 broken. */
@media (max-width: 1279px) {
.lco-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
TABLET BAND FIX (768-991px) — horizontal overflow
---------------------------------------------------------------------
nifty treats `mainnav-lg` in this band as "the off-canvas nav is open"
and SHIFTS the page instead of insetting it:
@media (min-width: 768px) and (max-width: 991px) {
#container.mainnav-lg #content-container { left: 296px; }
}
`left` on a positioned block moves it without narrowing it, so the page
ran exactly 296px past the right edge of the viewport - a permanent
horizontal scrollbar with the right-hand column cut off. On the student
layout `mainnav-lg` is hardcoded on #container and never removed, so this
was on at every tablet width rather than only while the nav was open.
Swapping `left` for `padding-left` keeps the nav exactly where it is and
simply reserves its width, which is what the >=992px rule already does.
Not made off-canvas instead: in this band the burger runs nifty's
`colExpToggle` (mainnav-lg <-> mainnav-sm, i.e. collapse to the icon
rail) - it never sets `mainnav-in`, so hiding the nav here would leave no
way to open it. Scoped to .mainnav-sm's sibling class only, so collapsing
to the icon rail still uses nifty's own narrower offset.
Specificity: #container.student_content.mainnav-lg is id + 2 classes and
beats nifty's #container.mainnav-lg (id + 1 class) without !important.
===================================================================== */
/* CORRECTION 2026-08-04: `mainnav-lg` alone was the wrong target. Below 992px nifty
switches the container to `mainnav-in` (it keeps the desktop value parked in
`lg-mainnav-lg`), and the shift that overflows the page in that state comes from a
DIFFERENT rule with no upper bound at all:
@media (min-width: 768px) { // nifty.css ~1750
#container.mainnav-in #content-container { left: 296px; }
}
so both states have to be covered. Confirmed against a live 900px viewport, where
#container reads `... cwf-unclip lg-mainnav-lg mainnav-in`. */
@media (min-width: 768px) and (max-width: 991px) {
#container.student_content.mainnav-in #content-container,
#container.student_content.mainnav-in #footer,
#container.student_content.mainnav-lg #content-container,
#container.student_content.mainnav-lg #footer {
left: 0;
padding-left: 296px;
}
}
/* ---------------------------------------------------------------------
Knock-on retune: with the nav now inset rather than overlapping, content
in this band is W - 296 (672px at 968, 472px at 768) instead of the full
viewport the earlier pass assumed. Two grids needed their tracks
loosened to keep a sensible column count.
--------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
/* 320px tracks only fit one column in 642px of usable width; 280 keeps
two, matching what Courses and Live already do at this size */
.cert-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 860px) {
/* two reward tiles in 472px of content is ~224px each - below the width
the tile's own padding + figure needs, so go single-column earlier
than the old 720px cut (which was measured against the full viewport) */
.impact-page .rewards,
.impact-page .unlock-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------
Topbar, same band. The header is 674px wide at a 968px viewport, and
burger + title + super-admin chip + search + icons overflows it, wrapping
the search pill onto a second row. The chip is impersonation-only
(Session imper_student_id), so it is the part that gives way: it drops
under the title the way it already does below 768px, instead of pushing
the search out of the row.
--------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 991px) {
/* the chip is its own bar now, so .topbar-left is only burger + title and has
nothing left to wrap — just the type size still needs easing here.
This band is the tightest the topbar ever gets: the nav is still the full
296px but the viewport is at its smallest, so the row has 473-695px to fit
burger + title + search + icons + avatar. Trimming the search and dropping
the avatar's name (the photo and caret still identify it, and it is the same
thing the mobile block does) brings the row to ~456px, which clears 769. */
.topbar-left { padding-left: 14px; }
.topbar-title { font-size: 19px; line-height: 30px; }
.topbar-search { width: 140px; }
.student_navbar #dropdown-user .ic-user .text-overflow { display: none; }
}
/* ---------------------------------------------------------------------
Sidebar logo inset in the tablet band (2026-08-04).
The 25px left margin that keeps the logo off the sidebar edge lives on
`.mainnav-lg .navbar-header .brand-icon` (~line 2455) — desktop state only.
Below 992px nifty switches the container to `mainnav-in`, the selector stops
matching, and the logo drops to margin-left:0, sitting flush against the
sidebar's left edge (visible at 976px).
Same 25px rather than a new value, so the logo does not move as the layout
crosses 992px. Scoped to .student_content so the admin/instructor layouts,
which share nifty's chrome, are untouched.
--------------------------------------------------------------------- */
.student_content.mainnav-in .navbar-header .brand-icon {
margin-left: 25px;
}
/* =====================================================================
STUDENT HEADER (2026-08-04) — clearance + fit
---------------------------------------------------------------------
1. Clearance. nifty gives #content-container a flat `padding-top: 59px`
to clear the fixed header. That is only ever right for a single-row
header. Add the promo strip, the impersonation chip and the search
field and the row wraps — at a 1138px viewport the header measures
157px, so the first 98px of the page rendered UNDERNEATH it (the live
class strip was half-hidden behind the topbar).
--cwf-header-h is the measured height, published by the student
layout. 59px stays as the fallback for the first paint. The banner
variant is handled where .show_announce_pad is defined (~line 3459),
which already carried !important and had to keep it to outrank nifty.
2. Fit. .navbar-content is viewport - 296px, so 842px at 1138. burger +
title + chip + search + icons + avatar needs ~880px there and wraps.
Without the chip it is ~610px, so this only ever bites while a
superadmin is impersonating — the chip and the search give up a
little room rather than the row breaking.
===================================================================== */
.student_content #content-container {
padding-top: var(--cwf-header-h, 59px);
}
/* The chip no longer competes for this row (it is a full-width bar below), so the
topbar is just burger + title + search + icons + avatar — about 596px against
viewport - 296 (or - 55 with the nav collapsed). That clears on its own well
below 768px, and the compaction/wrap rules that used to live here are gone with
it. The narrower search is kept: it keeps the title and the icons from crowding
each other once the row is under ~1000px. */
@media (max-width: 1300px) {
.topbar-search { width: 190px; }
}
/* Impersonation pill: desktop only, and only where the topbar can actually carry it.
Inline, the row is
24 pad + 34 burger + 14 + 70 title + 14 + 287 pill + 190 search + 8 + 114 icons
+ 140 avatar = 895px
against viewport - 296 for the nav, so it needs ~1191px before anything breaks.
1250 is that threshold with ~60px of slack, which is also what the >=1301 case has
once the search returns to its full 240px (945px needed against 1005px).
Hiding it below that rather than reflowing it is deliberate: this element is only
ever seen by a superadmin who is impersonating, so a breakpoint is worth more than
a fallback layout. It supersedes the narrower hide in the "Mobile header" block
(~line 6297, "keep admin chip hidden") — that rule still stands for <=768, this
extends the same intent up through tablet and small-desktop. Same specificity,
later in the file. */
@media (max-width: 1249px) {
.topbar-admin-chip {
display: none;
}
}
/* =====================================================================
Create group (redesign, 2026-08-04) — /student/group/create
Built on the .lco-* checkout shell (head, card, methods, pay button,
mobile bar); only what the prototype adds is defined here.
===================================================================== */
.cgp-wrap { max-width: 1180px; }
.cgp-head { margin-bottom: 18px; }
.cgp-head .lco-title {
margin: 0 0 6px; font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.4px; color: #1D3A5F;
}
.cgp-head .lco-sub { max-width: 640px; }
.cgp-order .lco-section-title { font-family: 'Fraunces', Georgia, serif; font-size: 18px; }
.cgp-freenote {
display: flex; gap: 11px; align-items: flex-start;
background: #F2F8F5; border: 1px solid #D4E6DD; border-radius: 12px;
padding: 13px 16px; margin: 14px 0 0;
font-size: 13.5px; line-height: 1.55; color: #3C4C53;
}
.cgp-freenote-icon { flex: 0 0 auto; color: #1F7A6F; font-size: 15px; line-height: 1.7; }
.cgp-freenote b { color: #233239; font-weight: 700; }
.cgp-freenote-link { color: #1F7A6F; font-weight: 700; white-space: nowrap; }
.cgp-freenote-link:hover, .cgp-freenote-link:focus { color: #14574F; text-decoration: none; }
/* two-column shell: details left, sticky order rail right */
.cgp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
/* ---------------- group details card ---------------- */
.cgp-form { padding: 24px 26px 26px; margin: 0; display: flex; flex-direction: column; gap: 18px; overflow: visible; }
.cgp-label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: #233239; }
.cgp-req { color: #A85757; margin-left: 3px; }
.cgp-hint { margin: 6px 0 0; font-size: 12.5px; color: #5D6B73; }
.cgp-err { display: none; margin: 6px 0 0; font-size: 12.5px; color: #A85757; }
.cgp-field.has-err .cgp-err { display: block; }
.cgp-input {
width: 100%; font-size: 14.5px; color: #233239;
background: #FBFAF7; border: 1px solid #EAE7DD; border-radius: 11px;
padding: 11px 15px; outline: 0; box-shadow: none;
-webkit-appearance: none; appearance: none;
transition: border-color .15s ease, background .15s ease;
}
.cgp-input:focus { border-color: #55A2DD; background: #fff; box-shadow: none; }
.cgp-input::placeholder { color: #9AA7AE; }
.cgp-field.has-err .cgp-input,
.cgp-field.has-err .selectize-input { border-color: #A85757; }
.cgp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cgp-selwrap { position: relative; display: block; }
.cgp-selwrap::after {
content: ""; position: absolute; right: 15px; top: 50%;
width: 8px; height: 8px; transform: translateY(-70%) rotate(45deg);
border-right: 2px solid #5D6B73; border-bottom: 2px solid #5D6B73; pointer-events: none;
}
.cgp-select { height: 46px; padding-right: 34px; cursor: pointer; }
/* members stepper */
.cgp-stepper { display: inline-flex; align-items: center; background: #FBFAF7; border: 1px solid #EAE7DD; border-radius: 11px; overflow: hidden; }
.cgp-step-btn { width: 42px; height: 44px; border: 0; background: transparent; color: #2E77B6; font-size: 19px; line-height: 1; transition: background .15s ease; }
.cgp-step-btn:hover { background: #EAF3FB; }
.cgp-step-input {
width: 64px; height: 44px; text-align: center; border: 0; background: transparent;
font-size: 15px; font-weight: 700; color: #233239; outline: 0; -moz-appearance: textfield;
}
.cgp-step-input::-webkit-outer-spin-button,
.cgp-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* course picker (selectize, multi) */
.cgp-form .selectize-control { width: 100%; }
.cgp-form .selectize-input {
min-height: 46px; padding: 8px 12px; font-size: 14.5px; color: #233239;
background: #FBFAF7; border: 1px solid #EAE7DD; border-radius: 11px; box-shadow: none;
}
.cgp-form .selectize-input.focus { border-color: #55A2DD; background: #fff; box-shadow: none; }
.cgp-form .selectize-input > input { font-size: 14.5px; }
.cgp-form .selectize-input.has-items { padding: 6px 12px 3px; }
.cgp-form .selectize-control.multi .selectize-input > div,
.cgp-form .selectize-control.multi .selectize-input > div.active {
margin: 0 5px 4px 0; padding: 3px 9px; border: 1px solid #D7E7F4; border-radius: 8px;
background: #EAF3FB; background-image: none; box-shadow: none; text-shadow: none;
color: #16466E; font-size: 13px; font-weight: 600;
}
.cgp-form .selectize-control.multi .selectize-input > div .remove { border-left-color: #D7E7F4; color: #2E77B6; padding: 1px 6px; }
.cgp-form .selectize-control .item a { margin-left: 5px; }
.cgp-form .selectize-dropdown { border-color: #EAE7DD; border-radius: 0 0 10px 10px; }
.cgp-form .selectize-dropdown .active { background: #EAF3FB; color: #16466E; }
/* school headers, shown when the picker is on "All schools" — a tinted band that sticks to the
top of the scroll area, so the school a course belongs to is never off-screen */
.cgp-form .selectize-dropdown .optgroup-header {
position: sticky; top: 0; z-index: 2;
padding: 8px 12px 7px;
background: #EAF3FB; color: #16466E;
border-bottom: 1px solid #D7E7F4;
font-family: 'Fraunces', Georgia, serif;
font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cgp-form .selectize-dropdown .optgroup + .optgroup .optgroup-header { border-top: 1px solid #D7E7F4; }
.cgp-form .selectize-dropdown .optgroup:before { display: none; }
.cgp-form .selectize-dropdown .option { padding: 5px 12px; }
.cgp-form .selectize-dropdown .optgroup .option { padding-left: 16px; }
/* add-me + handwritten note */
.cgp-check { margin: 0; }
.cgp-check label { margin: 0; font-size: 14.5px; font-weight: 500; color: #233239; }
.cgp-note { margin: 0; font-family: 'Caveat', cursive; font-size: 20px; line-height: 1.2; color: #B9700E; }
/* ---------------- order rail ---------------- */
.cgp-rail { position: sticky; top: 84px; }
.cgp-order { padding: 20px 22px 22px; }
.cgp-order .lco-section-title { margin-bottom: 14px; }
.cgp-currency-row { margin: 0 0 14px; }
.cgp-rail .lco-currency-row .bootstrap-select { width: 150px !important; }
.cgp-sum { border-top: 1px dashed #EAE7DD; padding-top: 13px; }
.cgp-sum-empty { margin: 0; padding: 6px 0 2px; font-size: 13.5px; color: #5D6B73; }
.cgp-order.has-order .cgp-sum-empty { display: none; }
.cgp-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; color: #5D6B73; }
.cgp-sum-row b { min-width: 0; color: #233239; font-weight: 600; }
.cgp-amt { white-space: nowrap; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.cgp-sum-discount { color: #1F7A6F; }
.cgp-sum-total { align-items: baseline; margin-top: 6px; padding-top: 11px; border-top: 1px solid #EAE7DD; }
.cgp-sum-total b { font-family: 'Fraunces', Georgia, serif; font-size: 17px; }
.cgp-sum-total .cgp-amt { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 600; color: #16466E; }
/* payment method marks */
.cgp-marks { display: flex; gap: 5px; margin-left: auto; }
.cgp-mark {
font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .04em;
padding: 2px 6px; border: 1px solid #EAE7DD; border-radius: 5px; background: #fff; color: #5D6B73;
}
.cgp-mark-visa { color: #1A1F71; }
.cgp-mark-mc { color: #EB001B; }
.cgp-mark-amex { color: #2E77B6; }
.cgp-mark-pp { color: #253B80; }
.cgp-pm-note { margin: 0; font-size: 12.5px; color: #5D6B73; }
.cgp-order.has-order .cgp-card-empty { display: none; }
.cgp-guarantee { color: #1F7A6F; font-weight: 700; }
@media (max-width: 991px) {
.cgp-grid { grid-template-columns: 1fr; }
.cgp-rail { position: static; }
}
@media (max-width: 767px) {
.cgp-two-col { grid-template-columns: 1fr; }
.cgp-form { padding: 18px 18px 20px; }
.cgp-order { padding: 18px 18px 20px; }
.cgp-freenote { font-size: 13px; }
}
/* =====================================================================
Group sub-pages (redesign, 2026-08-04) — /student/group/{slug}/...
Members · Purchased courses · Learning · Progress · Forum.
Shares the palette of the create-group page (.cgp-*).
===================================================================== */
.grp-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 15px 40px; }
/* ---------------- header + tabs ---------------- */
.grp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.grp-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2F6FB2; }
.grp-title {
margin: 0 0 8px; font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.4px; color: #1D3A5F;
}
.grp-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 13.5px; color: #5D6B73; }
.grp-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.grp-meta-item .fa { color: #2BB3A3; }
.grp-head-actions { display: flex; gap: 10px; }
.grp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.grp-tab {
display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 22px;
background: #F1EEE6; color: #5D6B73; font-size: 13.5px; font-weight: 600; white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
.grp-tab:hover, .grp-tab:focus { background: #EAF3FB; color: #1D3A5F; text-decoration: none; }
.grp-tab.is-active { background: #1B4A7A; color: #fff; }
.grp-tab.is-active:hover, .grp-tab.is-active:focus { background: #163C64; color: #fff; }
/* ---------------- card shell ---------------- */
.grp-card {
background-color: #fff; border: 1px solid #E8E8E8; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px; overflow: hidden;
}
.grp-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 18px 22px; border-bottom: 1px solid #EEF1F5;
}
.grp-card-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 700; color: #1D3A5F; }
.grp-toolbar-count { margin: 0; font-size: 13px; color: #7A8CA0; }
/* search box */
.grp-search { position: relative; display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 480px; margin: 0; }
.grp-search .fa-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9AA7AE; font-size: 13px; pointer-events: none; }
.grp-search input {
flex: 1; min-width: 0; height: 42px; padding: 0 14px 0 36px;
font-size: 14px; color: #233239; background: #FBFAF7;
border: 1px solid #EAE7DD; border-radius: 21px; outline: 0;
transition: border-color .15s ease, background .15s ease; -webkit-appearance: none; appearance: none;
}
.grp-search input:focus { border-color: #55A2DD; background: #fff; }
.grp-search input::placeholder { color: #9AA7AE; }
.grp-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.grp-search-btn {
flex-shrink: 0; height: 42px; padding: 0 20px; border: 0; border-radius: 21px;
background: #EAF3FB; color: #1B4A7A; font-size: 13.5px; font-weight: 700; cursor: pointer;
transition: background .15s ease;
}
.grp-search-btn:hover { background: #D9E9F8; }
/* buttons */
.grp-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 24px;
font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.grp-btn-primary { background: #1B4A7A; color: #fff; }
.grp-btn-primary:hover, .grp-btn-primary:focus { background: #163C64; color: #fff; text-decoration: none; }
.grp-btn-ghost { background: #F1EEE6; color: #5D6B73; }
.grp-btn-ghost:hover, .grp-btn-ghost:focus { background: #E6E1D5; color: #233239; text-decoration: none; }
/* ---------------- rows ---------------- */
.grp-list { display: flex; flex-direction: column; }
.grp-row { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid #F2F0EA; }
.grp-row:last-child { border-bottom: none; }
.grp-avatar {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
background: #EAF3FB; color: #2F6FB2; font-size: 14px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.grp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grp-thumb { flex: 0 0 auto; width: 72px; height: 50px; border-radius: 10px; overflow: hidden; background: #EAF2FB; }
.grp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grp-row-main { flex: 1 1 auto; min-width: 0; }
.grp-row-name { margin: 0; font-size: 15px; font-weight: 600; color: #233239; }
.grp-row-sub { margin: 2px 0 0; font-size: 13px; color: #7A8CA0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-you { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: #EAF3FB; color: #2F6FB2; font-size: 11px; font-weight: 700; vertical-align: middle; }
/* status pills */
.grp-status { flex: 0 0 auto; }
.grp-pill { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.grp-pill-green { background: #E7F4EF; color: #1E8E6E; }
.grp-pill-blue { background: #EAF3FB; color: #2F6FB2; }
.grp-pill-amber { background: #FDF3E2; color: #B9700E; }
.grp-pill-red { background: #FBECEC; color: #A85757; }
/* row actions */
.grp-row-actions { flex: 0 0 auto; }
.grp-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.grp-chip-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 18px;
background: #F1EEE6; color: #5D6B73; font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.grp-chip-btn:hover, .grp-chip-btn:focus { background: #EAF3FB; color: #1B4A7A; text-decoration: none; }
.grp-chip-danger:hover, .grp-chip-danger:focus { background: #FBECEC; color: #A85757; }
/* seats badge (purchased courses) */
.grp-seats { flex: 0 0 auto; text-align: center; min-width: 64px; }
.grp-seats-num { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 700; color: #1B4A7A; }
.grp-seats-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #7A8CA0; }
/* ---------------- progress ---------------- */
.grp-progress { display: block; width: 100%; height: 7px; margin-top: 8px; border-radius: 4px; background: #EEEAE0; overflow: hidden; }
.grp-progress-bar { display: block; height: 100%; width: 0; border-radius: 4px; background: #2F6FB2; transition: width .3s ease; }
.grp-progress-bar.is-done { background: #1E8E6E; }
.grp-percent { flex: 0 0 auto; min-width: 48px; text-align: right; font-size: 14px; font-weight: 700; color: #1B4A7A; font-variant-numeric: tabular-nums; }
.grp-progress-row .grp-row-name { margin-bottom: 2px; }
/* ---------------- learning cards ---------------- */
.grp-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; padding: 20px 22px; }
.grp-course-card {
display: flex; flex-direction: column; border: 1px solid #EEE9DE; border-radius: 14px; overflow: hidden;
background: #fff; color: inherit; transition: box-shadow .15s ease, transform .15s ease;
}
.grp-course-card:hover, .grp-course-card:focus { text-decoration: none; color: inherit; box-shadow: 0 8px 20px -10px rgba(22,70,110,.35); transform: translateY(-2px); }
.grp-course-card.is-blocked { opacity: .65; cursor: not-allowed; }
.grp-course-card.is-blocked:hover { transform: none; box-shadow: none; }
.grp-course-cover { position: relative; display: block; aspect-ratio: 16 / 10; background: #EAF2FB; }
.grp-course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grp-course-lock {
position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%;
background: rgba(29,58,95,.85); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.grp-course-body { display: block; padding: 14px 16px 16px; }
.grp-course-title { display: block; font-size: 14.5px; font-weight: 600; color: #233239; line-height: 1.35; }
.grp-course-modules { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: #7A8CA0; }
.grp-course-percent { display: block; margin-top: 6px; font-size: 12.5px; color: #5D6B73; }
/* ---------------- forum rows ---------------- */
.grp-disc-row { cursor: pointer; align-items: flex-start; transition: background .15s ease; }
.grp-disc-row:hover { background: #FBFAF7; }
.grp-disc-excerpt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grp-disc-meta { margin: 6px 0 0; font-size: 12px; color: #9AA7AE; }
.grp-disc-likes { display: flex; gap: 8px; margin-top: 8px; }
.grp-like-btn {
display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
border-radius: 50%; background: #F4F1EA; color: #7A8CA0; font-size: 12px; transition: background .15s ease, color .15s ease;
}
.grp-like-btn:hover, .grp-like-btn:focus { background: #EAF3FB; color: #2F6FB2; text-decoration: none; }
.grp-like-btn.active { background: #EAF3FB; color: #1B4A7A; }
.grp-disc-replies { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #7A8CA0; }
/* ---------------- empty state + pagination ---------------- */
.grp-empty { grid-column: 1 / -1; padding: 46px 22px; text-align: center; color: #9AA7AE; }
.grp-empty .fa { font-size: 30px; color: #D7D1C4; }
.grp-empty p { margin: 12px 0 0; font-size: 14px; font-style: italic; }
.grp-pagination { padding: 6px 22px 14px; text-align: right; }
.grp-pagination .pagination { margin: 0; }
/* ---------------- modals ---------------- */
.grp-modal { border-radius: 16px; border: none; overflow: hidden; }
.grp-modal .modal-header { padding: 18px 22px; border-bottom: 1px solid #EEF1F5; }
.grp-modal .modal-title { font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 700; color: #1D3A5F; }
.grp-modal .modal-body { padding: 20px 22px; }
.grp-modal .modal-footer { padding: 14px 22px 18px; border-top: 1px solid #EEF1F5; display: flex; justify-content: flex-end; gap: 10px; }
.grp-field { margin-bottom: 16px; }
.grp-field:last-child { margin-bottom: 0; }
.grp-label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: #233239; }
.grp-req { color: #A85757; margin-left: 3px; }
.grp-input {
width: 100%; height: 44px; padding: 11px 15px; font-size: 14.5px; color: #233239;
background: #FBFAF7; border: 1px solid #EAE7DD; border-radius: 11px; box-shadow: none; outline: 0;
transition: border-color .15s ease, background .15s ease;
}
.grp-input:focus { border-color: #55A2DD; background: #fff; box-shadow: none; }
.grp-modal-note { margin: 4px 0 0; font-size: 12.5px; color: #7A8CA0; }
@media (max-width: 767px) {
.grp-wrap { padding: 18px 15px 40px; }
.grp-title { font-size: 24px; }
.grp-head { align-items: flex-start; }
.grp-head-actions { width: 100%; }
.grp-head-actions .grp-btn { width: 100%; justify-content: center; }
/* no sideways scroller: the pills wrap, and each row grows to fill the width
(flex-grow shares the leftover space, so longer labels stay wider).
max-width keeps a pill that ends up alone on the last row from stretching
edge to edge — the leftover space is then split by justify-content, so it
sits centred instead. */
.grp-tabs { gap: 8px 7px; overflow: visible; padding-bottom: 0; justify-content: center; }
.grp-tab {
flex: 1 1 auto; max-width: 220px; justify-content: center; text-align: center;
padding: 10px 12px; font-size: 13px;
}
.grp-toolbar { padding: 16px; }
.grp-search { max-width: none; }
.grp-row { flex-wrap: wrap; padding: 16px; }
.grp-row-main { flex-basis: calc(100% - 56px); }
.grp-status, .grp-row-actions, .grp-seats, .grp-percent { margin-left: 56px; }
.grp-percent { text-align: left; }
.grp-course-grid { grid-template-columns: 1fr; padding: 16px; }
}
/* Group pages sit on the cream page background: the shell no longer carries
.bgc-light, so #FDFBF5 shows through behind the white .grp-card sections. */
/* ---------------- group hero card (2026-08-05) ---------------- */
.grp-hero {
position: relative; background: #fff; border: 1px solid #E8E8E8; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 18px;
}
.grp-hero-strip { display: block; height: 5px; background: linear-gradient(90deg, #2BB3A3 0%, #55A2DD 55%, #F0C033 100%); }
.grp-hero-body { padding: 20px 26px 22px; }
.grp-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.grp-tag { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 16px; font-size: 12.5px; font-weight: 600; }
.grp-tag-green { background: #E4F1EE; color: #1F7A6F; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.grp-tag-blue { background: #EAF3FB; color: #16466E; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-hero-title {
margin: 0 0 6px; font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.4px; color: #1D3A5F;
}
.grp-hero-sub { margin: 0 0 18px; max-width: 700px; font-size: 14.5px; color: #5D6B73; }
.grp-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.grp-hero-people { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grp-faces { display: inline-flex; flex-shrink: 0; }
.grp-face {
width: 34px; height: 34px; margin-left: -9px; border-radius: 50%; border: 2px solid #fff; overflow: hidden;
background: #EAF3FB; color: #2F6FB2; font-size: 12px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.grp-face:first-child { margin-left: 0; }
.grp-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grp-face-more { background: #F1EEE6; color: #5D6B73; font-size: 11px; }
.grp-hero-meta { margin: 0; font-size: 13.5px; color: #5D6B73; }
.grp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.grp-btn-outline { background: #fff; color: #1B4A7A; border: 1.5px solid #C9DCEF; }
.grp-btn-outline:hover, .grp-btn-outline:focus { background: #EAF3FB; color: #1B4A7A; text-decoration: none; }
.grp-btn-outline[disabled] { opacity: .6; cursor: default; }
@media (max-width: 767px) {
.grp-hero-body { padding: 18px 18px 20px; }
.grp-hero-title { font-size: 24px; }
.grp-tag-blue { max-width: 200px; }
.grp-hero-foot { align-items: flex-start; }
.grp-hero-actions { width: 100%; }
.grp-hero-actions .grp-btn { flex: 1 1 auto; justify-content: center; }
}
/* ---------------- group discussion board + sidebar (2026-08-05) ---------------- */
.grp-board-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.grp-board-card { margin-bottom: 0; }
.grp-board-head { padding: 18px 22px 14px; border-bottom: 1px solid #EEF1F5; }
/* back pill + owner actions, above the card */
.grp-board-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.grp-back-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 24px;
background: #fff; border: 1px solid #E8E8E8; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
font-size: 13.5px; font-weight: 700; color: #1D3A5F; transition: background .15s ease, border-color .15s ease;
}
.grp-back-btn:hover, .grp-back-btn:focus { background: #EAF3FB; border-color: #C9DCEF; color: #1B4A7A; text-decoration: none; }
.grp-back-btn .fa { font-size: 15px; }
.grp-board-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; color: #1D3A5F; line-height: 1.25; }
.grp-board-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* composer (opens the existing reply editor) */
.grp-composer {
display: flex; align-items: center; gap: 12px; margin: 16px 22px;
padding: 8px 8px 8px 12px; border: 1px solid #EAE7DD; border-radius: 28px; background: #FBFAF7; cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.grp-composer:hover { border-color: #C9DCEF; background: #fff; }
.grp-composer-field { flex: 1; min-width: 0; font-size: 14px; color: #9AA7AE; }
.grp-composer-btn {
flex-shrink: 0; padding: 9px 22px; border-radius: 22px; background: #1B4A7A;
color: #fff; font-size: 13.5px; font-weight: 700;
}
.grp-composer:hover .grp-composer-btn { background: #163C64; }
.grp-face-lg { width: 38px; height: 38px; font-size: 13px; }
/* posts — the wrappers keep their legacy class names for the JS, so the old
.discussion_reply_item_parent look (30px radius + hard 1px/2px drop shadow that
only painted a right/bottom edge) is reset here into a proper bordered card */
.grp-posts { padding: 18px 22px; }
.grp-posts .discussion_reply_item_parent {
margin: 0 0 14px; padding: 2px 18px; background: #fff;
border: 1px solid #EEE9DE; border-radius: 14px; box-shadow: none;
}
.grp-posts .discussion_reply_item_parent:last-child { margin-bottom: 0; }
.grp-posts .grp-post { padding: 16px 0; border-bottom: 1px solid #F2F0EA; }
.grp-posts .grp-post:last-child { border-bottom: none; }
.grp-posts .grp-post-reply {
margin: 0 0 0 46px; padding: 16px 0 16px 16px;
border-left: 2px solid #EEEAE0; border-bottom: none; border-radius: 0;
}
.grp-post-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.grp-post-name { margin: 0; font-size: 14.5px; font-weight: 700; color: #233239; }
.grp-post-time { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: #9AA7AE; }
.grp-post-content { padding-left: 53px; font-size: 14.5px; color: #3C4C53; line-height: 1.6; }
.grp-post-content p:last-child { margin-bottom: 0; }
.grp-post-content img { max-width: 100%; height: auto; }
.grp-post-reply .grp-post-content { padding-left: 53px; }
.grp-post-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-left: 53px; }
.grp-post-likes { display: inline-flex; gap: 6px; }
.grp-post-likes .grp-like-btn { width: auto; height: 28px; padding: 0 11px; gap: 6px; border-radius: 14px; font-size: 12px; }
.grp-post-link {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: 14px;
background: transparent; color: #7A8CA0; font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.grp-post-link:hover, .grp-post-link:focus { background: #EAF3FB; color: #1B4A7A; }
.grp-post-link-danger:hover, .grp-post-link-danger:focus { background: #FBECEC; color: #A85757; }
/* sidebar */
.grp-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.grp-side-card { background: #fff; border: 1px solid #E8E8E8; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 18px 20px 20px; }
.grp-side-title { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7A8CA0; }
.grp-side-course { margin: -8px 0 14px; font-size: 13.5px; font-weight: 700; color: #1D3A5F; }
.grp-live-row { display: flex; gap: 14px; align-items: flex-start; }
.grp-live-date {
flex: 0 0 auto; width: 52px; padding: 6px 0 8px; border-radius: 12px; background: #EAF3FB; text-align: center;
}
.grp-live-month { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #2F6FB2; }
.grp-live-day { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 700; color: #1B4A7A; line-height: 1.1; }
.grp-live-main { min-width: 0; }
.grp-live-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #233239; line-height: 1.35; }
.grp-live-meta { margin: 0; font-size: 12.5px; color: #7A8CA0; }
.grp-side-btn {
display: block; margin-top: 16px; padding: 11px; border-radius: 24px; background: #1F7A6F;
color: #fff; font-size: 13.5px; font-weight: 700; text-align: center;
}
.grp-side-btn:hover, .grp-side-btn:focus { background: #176057; color: #fff; text-decoration: none; }
.grp-walk-list { display: flex; flex-direction: column; }
.grp-walk-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid #F2F0EA; }
.grp-walk-row:last-child { border-bottom: none; }
.grp-walk-main { flex: 1; min-width: 0; }
.grp-walk-name { margin: 0; font-size: 13.5px; font-weight: 600; color: #233239; }
.grp-walk-percent { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #1B4A7A; font-variant-numeric: tabular-nums; }
.grp-side-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #F2F0EA; font-size: 12.5px; color: #7A8CA0; line-height: 1.5; }
.grp-side-empty { margin: 0; font-size: 13px; font-style: italic; color: #9AA7AE; }
@media (max-width: 991px) {
.grp-board-grid { grid-template-columns: 1fr; }
.grp-side { position: static; }
}
@media (max-width: 767px) {
.grp-board-head { padding: 16px; }
.grp-composer { margin: 14px 16px; }
.grp-posts { padding: 14px 16px; }
.grp-posts .discussion_reply_item_parent { padding: 2px 14px; }
.grp-post-content, .grp-post-actions { padding-left: 0; }
.grp-posts .grp-post-reply { margin-left: 14px; padding-left: 12px; }
.grp-composer-field { font-size: 13.5px; }
}
/* Next-live-class card: CTA styles + empty state (2026-08-05) */
.grp-side-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.grp-side-btn .fa { font-size: 13px; }
.grp-side-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #1F7A6F; }
.grp-side-link:hover, .grp-side-link:focus { color: #14574F; text-decoration: none; }
/* ===== Refer-a-friend gift modal (student layout + Your Impact) — 2026-08-06 ===== */
.gift-modal .modal-dialog { width: auto; max-width: 560px; margin: 40px auto; padding: 0 16px; }
.gift-modal .gift-modal-content { position: relative; background: #fff; border: none; border-radius: 16px; box-shadow: 0 24px 60px rgba(29, 58, 95, .22); padding: 32px 34px 34px; }
.gift-modal .gift-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #7A8CA0; font-size: 15px; line-height: 1; opacity: 1; transition: background .15s ease, color .15s ease; }
.gift-modal .gift-modal-close:hover, .gift-modal .gift-modal-close:focus { background: #EEF1F5; color: #1D3A5F; outline: none; }
.gift-modal-head { display: flex; align-items: center; gap: 16px; padding-right: 34px; margin-bottom: 18px; }
.gift-modal-icon { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #E7F4EF; color: #1E8E6E; }
.gift-modal-icon svg { display: block; width: 26px; height: 26px; }
.gift-modal-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #1D3A5F; }
.gift-modal-text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #4A6076; }
.gift-modal-linkrow { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; background: #F5F8FC; border: 1px solid #E8E8E8; border-radius: 12px; }
.gift-modal-link { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0; border: none; background: transparent; box-shadow: none; font-size: 14px; color: #4A6076; text-overflow: ellipsis; }
.gift-modal-link:focus { outline: none; }
.gift-modal-copy { flex: 0 0 auto; padding: 10px 20px; border: none; border-radius: 9px; background: #2F6FB2; color: #fff; font-family: 'Poppins', 'Inter', sans-serif; font-size: 14px; font-weight: 600; transition: background .15s ease; }
.gift-modal-copy:hover, .gift-modal-copy:focus { background: #1B4A7A; color: #fff; outline: none; }
.gift-modal-copy.is-copied { background: #1E8E6E; }
@media (max-width: 575px) {
.gift-modal .modal-dialog { margin: 20px auto; padding: 0 12px; }
.gift-modal .gift-modal-content { padding: 26px 20px 24px; }
.gift-modal-head { gap: 12px; margin-bottom: 14px; }
.gift-modal-icon { width: 44px; height: 44px; border-radius: 12px; }
.gift-modal-icon svg { width: 22px; height: 22px; }
.gift-modal-title { font-size: 21px; }
.gift-modal-text { font-size: 14px; margin-bottom: 18px; }
.gift-modal-linkrow { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
.gift-modal-link { height: 30px; }
.gift-modal-copy { width: 100%; }
}