@font-face {
  font-family: 'Open Sans Condensed';
  src: url('/fonts/OpenSans-CondBold-webfont.ttf') format('ttf'),
       url('/fonts/OpenSans-CondBold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

:root {
	--darker-grey: #222222;
	--dark-grey: #282828;
	--dark-us_resort: #900;
	--light-grey: #666;
	--title-font: 'Open Sans Condensed', sans-serif;
	--light: #fff;
	--green :#390;
	--gold: #F90;
	--red: #F00
}


body {padding:0; margin:0;font-family: 'Poppins', sans-serif; background-color:#000;}
.middle {background-color:var(--darker-grey); padding-bottom:25px}
h1, h2, h3, .side_heading, .side_heading-mobile .conetitle {font-family: var(--title-font); color:var(--light); margin:0; padding-top:20px; text-transform:uppercase}
h1, .conetitle {text-align:center; width:100%; display:block; font-size:2em}
.conetitle {font-weight:bold}
p {line-height:1.55; letter-spacing:1px; text-align:center; margin:20px auto; width:95%}
h2 { padding-left:5px; text-align:center; margin:0 auto}
	.left_col {max-width:300px; min-width:280px; float:left; width:23%; display:block;}
	.left_col .padding {padding:10px}
	.right_col {width:76%; max-width:900px; display:block; float:left;}
	.clear {width:100%; height:1px; display:block; overflow:hidden; clear:both}
.container {width:100%; max-width:1365px; margin-left:auto; margin-right:auto}
.container-bottom {width:96%; max-width:1320px; margin-left:auto; margin-right:auto}

.flexbox {
        display: flex;
		gap: 50px;
      }
.left_col_flex {display:none}
@media only screen and (min-width: 770px) {
.left_col_flex { flex: 0 0 300px; display:block}	
}
.right_col_flex { flex:1;}	  
     /* Custom CSS Document */
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none; outline:none
}

.video_holder, .header_dt_content {width:100%; max-width:1365px; margin-left:auto; margin-right:auto; display:block}
.header_dt {width:100%; height:55px; display:block; background-color:var(--dark-grey); padding-top:9px; padding-bottom:5px; margin-bottom:0px; position:fixed; top:0; left:0}
.logo {width:100px; height:50px; display:inline-block; background-image:url(images/ecoach-logo.gif); background-repeat:no-repeat; background-size:100% auto; margin-left:20px; margin-top:0; background-position:0 -3px}  
.ecoach-logo {width:256px; height:50px; display:block; background-image:url(images/ecoach-logo.gif); background-repeat:no-repeat; background-size:256px 50px; margin-left:10px}  
@media only screen and (min-width: 231px) {
.logo {width:150px; margin-top:5px}
}
.dt-dropdown-bg {position:fixed; top:80px; left:0; height:100%; display:block; z-index:89}
.dropdownholder {display:inline-block; color:#fff; font-family:var(--title-font); font-size:18px; position:relative; top:-24px; left:78px; padding-right:40px; background-repeat:no-repeat; background-position:right center}
.drill_menu {padding-left:10px}
.arrow-down {background-image:url(images/arrow-down.png)}	  
.arrow-up {background-image:url(images/arrow-up.png)}	  
/* new dropdwon */
.dt-dropdown-bg {width:100%; background-color:var(--dark-grey); opacity:0.95;position:fixed; top:69px; left:0; height:100%; display:none; z-index:89}
.dt-dropdown {display:none; height:auto; position:fixed; top:69px; left:0; z-index:91; color:#fff; width:100%; overflow:hidden}	  
	   
/* menu grid */
.menugrid { 
display:grid;
grid-template-columns: repeat(6, 1fr); 
    gap: 10px; 
    width: 96%; 
    margin: 0 auto;
	max-width:1291px;
	padding-top:25px
}
@media only screen and (min-width: 1300px) {
.menugrid {    width: 100%; }
}
.grid-item a {display:block; text-decoration:none; color:#fff; margin:10px 0; font-size:14px}	
@media only screen and (min-width: 1400px) {
	.grid-item a {font-size:16px}
}

.dt-menu-title {text-transform:uppercase; font-size:18px; font-family:var(--title-font); font-weight:bold; margin-bottom:10px}
	   
.drill_menu a { height:40px; width:250px; text-decoration:none; display:block; margin-bottom:10px; width:100%;  background-color:#333;  background-size:250px 40px; background-repeat:no-repeat; border-top-left-radius:25px; border-bottom-left-radius:25px}
.drill_main_link {padding-left:45px; padding-top:4px; font-size:14px; display:block; text-transform:uppercase; font-weight:bold; color:#fff}
.drill_sub_link { font-size:12px; display:block; padding-left:45px; color:#fff; text-transform:uppercase}
.mobile-menu-item-holder {width:100%; display:block;height:45px; padding-top:5px}
.drill_link_basic {background-image:url(images/basic_drill_bg.gif)}
.drill_link_medium {background-image:url(images/medium_drill_bg.gif)}
.drill_link_advanced {background-image:url(images/advanced_drill_bg.gif)}
.mobile-stars {width:66px; height:19px; display:block; float:right;background-repeat:no-repeat; margin-right:3px; margin-top:9px }
.stars_basic {background-image:url(images/icons/1star.svg); background-size:20px 17px; background-repeat:none; background-position:center center }
.stars_medium {background-image:url(images/icons/2star.svg); background-size:44px 17px; background-repeat:none; background-position:center center }
.stars_advanced {background-image:url(images/icons/3star.svg); background-size:66px 17px; background-repeat:none; background-position:center center }

@media only screen and (max-width: 322px) {
.drill_main_link  {font-size:3.8vw}
.drill_sub_link {font-size:3.4vw}
}

.apptext {color:var(--light);}
.main_login_button {width:200px; margin:0 auto; padding:10px 0px; text-align:center; display:block}
a.main_login_button:active,a.main_login_button:visited, a.main_login_button:link, a.main_login_button:hover {text-decoration:none; color:var(--dark-grey); background-color:var(--light); border:2px solid var(--dark-grey); font-family:var(--title-font); text-transform:uppercase}
a.main_login_button:hover {background-color:var(--dark-grey); color:var(--light); border:2px solid var(--light);}

.drill_button {width:100%; margin:0 auto; padding:10px 0px; text-align:center; display:block}
a.drill_button:active,a.drill_button:visited, a.drill_button:link, a.drill_button:hover {text-decoration:none; color:var(--light); background-color:var(--dark-grey); border:2px solid var(--light); font-family:var(--title-font); text-transform:uppercase; width:100%; box-sizing:border-box}
a.drill_button:hover {background-color:var(--light); color:var(--dark-grey); border:2px solid var(--light);}

.registerButton {width:98%; margin:0 auto; padding:20px 0px; text-align:center; display:block;color:var(--light); background-color:var(--dark-grey); border:2px solid var(--light); font-family:var(--title-font); text-transform:uppercase; position:relative; left:3px; margin-top:20px;}


@media only screen and (min-width: 450px) {
a.drill_button:active,a.drill_button:visited, a.drill_button:link, a.drill_button:hover {width:100%}
}
a.tile_link:active,a.tile_link:visited, a.tile_link:link, a.tile_link:hover { width:100%; text-decoration:none; color:var(--light); background-color:var(--dark-grey); border:2px solid var(--light); font-family:var(--title-font); text-transform:uppercase; display:block; text-align:center; padding:10px 0}
a.tile_link:hover {color:var(--dark-grey); background-color:var(--light); border:2px solid var(--dark-grey);}
   .menu-icons-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .icons-flex-item {
      flex: 1; /* Each column takes equal width */
      min-width: calc(33.33% - 10px); /* Account for the gap */
      padding: 10px;
      box-sizing: border-box;
    }

    /* Define the number of columns per row (2 rows in this case) */
    @media (max-width: 600px) {
      .icons-flex-item {
        min-width: calc(70% - 10px); /* Two columns per row */
		max-width:80%; margin:0 auto
      }
    }
	
@media only screen and (min-width: 900px) {
    .icons-flex-item {
      flex: 1; /* Each column takes equal width */
      min-width: calc(16.66666667% - 10px); /* Account for the gap */
	}
}


.side_heading {padding-left:5px; font-size:19px; margin-bottom:0px; cursor:pointer; margin-bottom:10px}
.side_heading-mobile {padding-left:5px; font-size:19px; margin-bottom:0px; cursor:pointer;}
.mobile_menu_switch {width:50px; height:50px; display:block;background-repeat:no-repeat; background-image:url(images/hamburger.png); background-size:50px 100px; float:right; margin-right:10px; cursor:pointer; margin-top:0px; user-select: none;
  -webkit-user-select: none; /* For iOS Safari */
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For Microsoft Edge */}
.menu_closed  {background-position:0 0 }
.menu_open  {background-position:0 -50px}
.mobile-flyout-holder, .mobile-flyout-bgfade {display:none}
.mobile-flyout-bgfade {width:100%; height:100%; position:fixed; background-color:var(--darker-grey); z-index:50; top:65px; left:0}
.mobile-flyout-bgfade-login {width:100%; height:auto; position:fixed; background-color:var(--darker-grey); color:var(--light); z-index:48; top:65px; left:0; display:none}
@media only screen and (min-width: 770px) {
.mobile-flyout-bgfade-login {display:none}

}

.loginformmobile {width:auto; padding:10px; margin:20px auto; max-width:175px}
.loginformmobile a, .loginform a {text-decoration:none; color:var(--green);}
.mobilecenter {width:auto; padding:10px; margin:20px auto;}
.loginfield {width:100%; max-width:230px; display:block}
.mobilecenter input {padding:7px 1px; margin-bottom:5px; box-sizing: border-box;  border:2px solid var(--light);}
.loginbutton { width:100%; max-width:243px; text-align:center; text-transform:uppercase; background:none; border:2px solid var(--light); color:var(--light); margin-top:5px; font-family:var(--title-font); padding:7px 0; cursor:pointer; display:block; margin-top:20px}
.loginbutton:hover {background-color:var(--light); color:var(--darker-grey)}
.open {display:block !important}
.messages {width:auto; margin:3px auto; display:block; text-align:center; background-color:var(--light-grey)}
.mobile-flyout-holder {width:100%; z-index:51; background-color:#F00; height:auto; padding:10px;}
header, .header_dt, .middle {z-index:1}
.hidenmenu {display:none}
.sidemenuswitch {float:right; padding-right:20px; cursor:pointer}
.mobile-flyout-bgfade .side_heading-mobile {color:#fff; padding-left:15px; border-bottom:0px solid #444; border-top:0px solid #444; padding-top:15px; padding-bottom:15px; text-transform:uppercase}
.hidenmenu { border-bottom:1px solid #444; border-top:1px solid #444; padding-top:14px; padding-bottom:0px}
#teamtrainingmobile{border-top:0px solid #444;border-bottom:2px solid #444 !important}
.side_heading6 {border-bottom:2px solid #444 !important}
.mobile-flyout-bgfade .sidemenuswitch {padding-right:33px}
.mobile-flyout-bgfade a{text-decoration:none; padding-top:20px; padding-bottom:5px; display:block; width:100%; background-repeat:no-repeat}
.mobile-flyout-bgfade .drill_main_link {color:#fff}
.mobile-flyout-bgfade .drill_sub_link {color:#fff}
.mobilescroll {position:relative; top:0; left:0; padding:0; margin:0; width:100%; height:100%; overflow:scroll}
.mobilescroll::-webkit-scrollbar{
    display: none;
  }

.mobilescroll .drill_link_basic {background-image:url(images/basic_drill_bg_mobile.gif)}
.mobilescroll .drill_link_medium {background-image:url(images/medium_drill_bg_mobile.gif)}
.mobilescroll .drill_link_advanced {background-image:url(images/advanced_drill_bg_mobile.gif)}
.mobile_equipment_link {width:100%; text-align:center; background-color:#900; color:#fff; padding-top:10px; padding-bottom:10px; display:block; letter-spacing:2px; font-size:20px}
a.dt_equipment_link:active, a.dt_equipment_link:link,a.dt_equipment_link:visited, a.dt_equipment_link:hover { color:#900; padding-top:10px; padding-bottom:10px; display:block; font-size:19px}
@media only screen and (max-width: 1200px) {
  .right_col {width:62vw}  
}	

.mobile {display:none}
@media only screen and (max-width: 770px) {
.mobile {display:block}
.desktop {display:none}
header {position:fixed; top:0; left:0; width:100%}
.fixed_head_space {width:100%; height:69px; display:block}
}
@media only screen and (min-width: 770px) {
.mobile-flyout-bgfade {display:none !important}
.drill_menu a, .hidenmenu {border:none}
.fixed_head_space {width:100%; height:69px; display:block}
}



.drill_content {padding:20px}
.skill_level, .targets {text-align:left; margin-left:auto; margin-right:auto; display:block; color:var(--light); font-size:16px}
.targets {text-align:left; margin-top:15px; margin-bottom:25px; padding-right:20px; padding-left:10px}
.beginners, .players, .pros {font-size:1.2em; font-weight:bold; width:100%; text-align:center; display:block; margin-left:auto; margin-right:auto; text-transform:uppercase; background-repeat:no-repeat; background-position:top center; padding-top:40px; margin-bottom:50px}

.beginners {background-image:url(images/icons/bigstars-basic.png); background-size:26px 25px}
.players {background-image:url(images/icons/bigstars-medium.png); background-size:52px 25px}
.pros {background-image:url(images/icons/bigstars-advanced.png); background-size:78px 25px}
.notstartedyet { color:var(--red)}
.target_amount {color:var(--gold);}

.coneimage {width:90%; display:block; margin-left:auto; margin-right:auto; text-align:center; margin-bottom:20px}
.coneimage img {max-width:400px; margin-left:auto; margin-right:auto}






.drill_content p {text-align:left}
.drill_link_title {font-weight:bold; color:#111}
.drill_link_info {font-weight:normal; color:#444; font-size:14px; font-style:italic}
.drill_link_info, .drill_link_title {display:block}
.drill_menu2 {color:var(--light);}
.drill_menu2 a{display:block; margin-bottom:10px; text-decoration:none; color:var(--light); padding-left:5px; width:93%; font-family:var(--title-font)}

.drill_link2_basic {background-image:url(images/dt-1star.gif); background-position:right center; background-repeat:no-repeat; background-size:15px 15px}
.drill_link2_medium {background-image:url(images/dt-2star.gif); background-position:right center; background-repeat:no-repeat; background-size:30px 15px}
.drill_link2_advanced {background-image:url(images/dt-3star.gif); background-position:right center; background-repeat:no-repeat; background-size:45px 15px}
.drill_link2_basic:hover {background-image:url(images/dt-1star-on.gif);}
.drill_link2_medium:hover {background-image:url(images/dt-2star-on.gif);}
.drill_link2_advanced:hover {background-image:url(images/dt-3star-on.gif);}

.targetflex {display: flex;
		gap: 50px;}
.mobile-menu-item-holder {padding-top:4px !important}

#mobile_banner {display:none; background-color:var(--dark-grey)}
#dt_banner {display:block; z-index:2}

@media only screen and (max-width: 770px) {
#mobile_banner {display:block}
#dt_banner {display:none}
}

@media only screen and (max-width: 395px) {
.targetflex { display:flex; gap:3vw}
.beginners{font-size:4vw; background-size:7vw; padding-top:27px}
.pros {font-size:4vw; background-size:20vw; padding-top:27px}
.players {font-size:4vw; background-size:14vw; padding-top:27px}
.target_amount {font-size:5vw}
}


.bottom-nav {clear:both; padding-bottom:50px; padding-top:20px; display:block}
.next {float:right; padding-right:20px}
.previous {float:left; padding-left:20px}

.prev_icon {background-image:url(images/cones/prev.svg); background-size:100% 100%; display:block;background-repeat:no-repeat;  height:40px; width:40px; display:inline-block}
.next_icon { background-image:url(images/cones/next.svg); background-size:100% 100%; display:block;background-repeat:no-repeat;  height:40px; width:40px; display:inline-block}
.prev_text {position:relative; top:-14px; padding-left:5px}
.next_text {position:relative; top:-14px; padding-right:5px}
.prev_link a {padding-left:60px}
.next_link a {padding-right:60px}
a.prev_link:active, a.prev_link:visited, a.prev_link:link, a.prev_link:hover {text-decoration:none; color:var(--light)}
a.next_link:active, a.next_link:visited, a.next_link:link, a.next_link:hover {text-decoration:none; color:var(--light)}
@media only screen and (max-width: 900px) {
.prev_link, .next_link {text-indent:-9999px; padding:0}
}
@media only screen and (max-width: 500px) {
.prev_text, .next_text {display:none}
}

.spacer {width:100%; height:25px; display:block; clear:both}
.upsell { display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 1.4vw;
    padding: 0px;
    width: 100%; max-width:550px; margin-left:auto; margin-right:auto}

.product_image {margin:0; padding:0}
.product_image img {width:100%; height:auto}
.product_text {background-color:#333; text-align:center}
.product_text a {text-decoration:none}

a.image_link:link, a.image_link:hover, .image_link:visited, .image_link:active {margin:0; padding:0; display:block !important; width:238px; height:238px}
a.text_link:link, a.text_link:hover, .text_link:visited, .text_link:active {margin:0; padding:0; display:block; color:#fff; text-decoration:none; font-weight:bold; text-align:center; position:relative; top:-4px}


.upsell_area {width:100%; max-width:550px; margin-left:auto; margin-right:auto; display:block}
.product {width:100%; max-width:238px; height:auto; display:block; float:left; background-color:#333; border-radius:5px; overflow:hidden}

.footer {width:100%; margin:0; display:block; padding:25px 0; background-color:#000; color:#fff; text-align:center}
.footerlogo {width:50%; max-width:200px; height:10vw; display:block; margin:0 auto; background-image:url(images/quickplay-logo.gif); background-repeat:no-repeat; background-size:100% auto}

@media only screen and (min-width: 425px) {
	.footerlogo {width:200px; height:50px;}

}


  .gallery_container {
    width: 100%;
    height: auto;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: #333;
    padding: 0; margin:25px 0
  }

  .gallery_div {
    width: 80%;
    height: auto;
    display: inline-block;
	margin:5px;  vertical-align: top; 
  }
 
 @media only screen and (min-width: 770px) {
   .gallery_div {
    width: 40%;
   }
 }
 @media only screen and (min-width: 1100px) {
   .gallery_div {
    width: 20%;
   }
 }
.gallery_div a {width:100%}
.gallery_v_spacer {width:100%; height:50px; display:block; clear:both}

.videoshortdesc {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:left;
  background-color:#333
}
.videoshortdesc p{ text-align:left; font-size:12px}


.gallery_flex {display:flex; gap:20px; flex-wrap: wrap; margin:0 auto}
.drill_item {  flex: 0 0 calc(100%);   margin: 0px; margin-bottom:25px !important }
.drill_desc, .drill_desc p {text-align:left}

 @media only screen and (min-width: 450px) {
.drill_item {  flex: 0 0 calc(50% - 15px);   margin: 0px; }
.gallery_flex {gap:15px;}
 }
 @media only screen and (min-width: 800px) {
.drill_item {  flex: 0 0 calc(33.33% - 15px);   margin: 0px; }
 }
 @media only screen and (min-width: 1000px) {
.drill_item {  flex: 0 0 calc(25% - 15px);   margin: 0px; }
 }
 @media only screen and (min-width: 1200px) {
.drill_item {  flex: 0 0 calc(20% - 15px);   margin: 0px; }
 }

a.viewmore:link,a.viewmore:visited,a.viewmore:active,a.viewmore:hover {background-color:var(--green); color:var(--light); padding:10px 25px; display:block; text-decoration:none; font-family:var(--title-font)}

.accordion {
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-title {
    cursor: pointer;
    margin: 0;
    padding: 10px;
	 font-family:var(--title-font)
}

.accordion-content {
    display: none;
    padding: 10px;
	color:var(--light)
}
.accordion-plus {width:18px; height:18px; display:block; float:right; background-image:url(images/plus.gif); background-repeat:no-repeat; background-size:100% auto; position:relative; top:2px; right:20px}
.accordion-open {background-position:0 100% !important}
.drill .container-bottom, .drill .drill_content {padding:0; width:100%}
.drill h1 {font-size:22px; text-align:left; padding:20px 20px; width:calc(100% - 40px)}
.drill h2 {font-size:18px; text-align:left; padding-left:20px;}
.skill_level {text-align:left; font-size:16px}
.accordion-content p{margin:0; color:var(--light); width:calc(100% - 20px); padding:0 10px}

.drill_thumb {width:86%; margin:0 auto; margin-bottom:20px; color:var(--light)}

/* register */
.error {margin:20px 0; padding-left:4px;color:#C00; font-weight:bold; display:block}
.success {margin:20px 0; padding-left:4px;color:#0C0; font-weight:bold; display:block}
.head_left {display:inline-block}
.loginicon {width:35px; height:35px; background-image:url(images/icons/account.svg); background-repeat:no-repeat; background-size:100% auto; display:block; cursor:pointer;  margin-top:7px; margin-left:15px}
.closeX {background-image:url(images/closeX.gif) !important} 
.loginforms {width:100%; margin:0 auto; max-width:550px}
.loginform {width:100%; margin:0 auto; max-width:550px; margin-top:40px}
.desktop, {visibility:hidden}
.mobile {visibility:visible}
.formhide {display:none}
.loginhead, .registerhead {display:inline-block;}
.headdeactive  {opacity:0.2; cursor:pointer}
.headdeactive:hover   {opacity:1}
.formholder input {padding:5px}
 @media only screen and (min-width: 770px) {
.logintext {float:right; text-indent:0; margin-top:14px; padding-right:20px}
.logintext a {text-decoration:none; color:#fff; font-family:var(--title-font); text-transform:uppercase}
 .desktop { visibility:visible}
 .mobile {visibility:hidden}
 }
.formholder {width:80%; margin:25px auto}
.us_resort {width:100%; padding:25px; background-color:var(--dark-us_resort); color:var(--light); box-sizing: border-box;}
.green {width:100%; padding:25px; background-color:var(--green); color:var(--light);box-sizing: border-box;}
.red {width:100%; padding:25px; background-color:var(--red); color:var(--light);box-sizing: border-box;}
.miderror {width:100%; margin:0 auto; max-width:1320px; text-align:center; display:block; padding:0 20px; box-sizing: border-box;}
.accountLinks ul li a {text-decoration:none; color:#fff; text-transform:uppercase; font-size:19px}
.accountLinks ul li {list-style:none; padding:15px}
.accountLinks ul {margin:0; padding:0}
.account form {margin:25px 0}
.account form .fakelabel, .account form label {width:94%; display:block; text-align:center}
.account form  input {padding:8px; width:80%; margin:0 auto; display:block; margin-bottom:15px}
.acc_extra_mar {margin:11px 0; text-align:center}
.account {width:100%}
.forgotpassform {background-color:var(--darker-grey)}
.forgotpassform .loginbutton, .forgotpassInput {padding:10px; width:50%; max-width:330px; display:block; margin:0 auto}
.backtologin {width:90%; text-align:center; display:block; cursor:pointer;max-width:330px; display:block; margin:20px auto}
 @media only screen and (min-width: 550px) {
.account {width:440px; margin:0 auto}
.account form .fakelabel, .account form label {width:200px; display:inline-block; text-align:left}
.account form  input { width:200px; display:inline-block}
.acc_extra_mar {text-align:left}

 }
/* Create the flex container with 100% width */
.mobilehead-container {
    display: flex;
    width: 100%;
	background-color:var(--dark-grey);
	position:fixed;
	top:0; left:0;
	height:59px;
	padding-top:10px;
	z-index:10
}

/* Define the fixed columns with specific widths */
.fixed-column {
    flex: 0 0 50px; /* Fixed width of 100px */
    padding: 0px;
    text-align: center;
}

/* Make the middle column fill the remaining space */
.flex-fill {
    flex: 1; /* Fill available space */
    padding: 0px;
    text-align: center;
}

.faketab  {display: flex; gap:5px;  width: 97%; flex-wrap: wrap; margin:0 auto}
.faketab div {flex:1; width:100%; min-width:98%; max-width:98%}
.labelholder {margin-top:15px}
.inputholder input {width:100%}
 @media only screen and (min-width: 600px) {
.faketab div {flex:1; max-width:calc(50% - 25px); min-width:calc(50% - 25px); gap:25px}
.labelholder {margin-top:0}

 }
 
 .sectioncontent {color:var(--light); display:none}
 .sectionswitch {background-image:url(images/icons/plus.png); background-repeat:no-repeat; background-position:95% 70%}
  .scoreleft {text-align:left}
 .scoreright {text-align:right; text-transform:uppercase; font-style:italic}
 .beginner {color:#960}
 .player {color:silver}
 .pro {color:gold} 
  .section h2 {margin-top:15px}
 .progressbar-container {
            height: 10px;
            position: relative;
            width: 100%;
            background: linear-gradient(109.6deg, rgb(212, 0, 46) 11.2%, rgb(255, 206, 59) 100.2%);
            min-width: 5px;
        }

        .progressbar-overlay {
            height: 100%;
             background-color:#000;
            float:right; display:block
        }  
  
  .accountflex {display:flex; flex-wrap:wrap; gap:10px}
  .accountflex .accountleft {width:100%}
  .accountflex .accountright {width:100%}
 .chartHolder {width:100%; color:#FFF !important; max-width:525px; margin:0 auto}
 .sectionswitch {text-align:left} 
.individualDrill {padding:10px}
  .individualDrill:nth-child(even) {
  background-color: var(--darker-grey);
}

.individualDrill:nth-child(odd) {
  background-color: var(--dark-grey);
}
  .individualDrill:nth-child(even):hover {
  background-color: var(--light-grey);
}

.individualDrill:nth-child(odd):hover {
  background-color: var(--light-grey);
}

a.drillLink:active, a.drillLink:visited, a.drillLink:link, a.drillLink:hover {color:#fff; text-decoration:none; font-family:var(--title-font)}
a.individualDrill:active, a.individualDrill:visited, a.individualDrill:link, a.individualDrill:hover {color:#fff; text-decoration:none; width:100%; display:block}
.drillName {font-family:var(--title-font);}
   @media only screen and (min-width: 770px) {
   .accountflex .accountleft {width:60%}
  .accountflex .accountright {width:38%}
  .accountright h2 {font-size:20px}
  }
  
   @media only screen and (min-width: 925px) {
  .accountright h2 {font-size:24px}
   }
   
   .accountHolder {width:94%; margin:0 auto; display:block; max-width:400px; color:var(--light)}