/* 22/09/21 Changed defaut body background color to same a old version
/* 02/09/21 Fix to #bids-commentary-block plus css for activity intro pages
/* 26/08/21 Fixes to when showsidebarbtn is shown
/* 02/08/21 Various changes for preferences
/* 02/06/21 Hide tooltip arrow and add min-width to tooltip container
/* 23/05/21 Added title css for activity intro pages
/* 20/05/21 Small change to planplay css.  Add spinner class.
/* 10/05/21 Small size change to scaled scards.  Small col width change to mill grid.
/* 06/05/21 Put standard font size on html tag to prevent and effect if the have changed browser font size.
/* 20/04/21 Updates for millionaire inc minibrige millionaire
/* 15/04/21 Corrected height of main bidding box container
/* 12/04/21 Added bottom bar grid
/* 11/04/21 Fixed an error
/* 09/04/21 Added min-width for tooltip inner as it was too narrow and overflowed vertically (didn't work!) on phone
/* 08/04/21 Simplified feedback grid options. Remove commented out code if OK
/* 06/04/21 Tweak height of activities on large screen (small height reduction required for iMac)
/* 02/04/21 Scale North small cards for bp-final-grid and #bp-final-grid #auction-div          
/* 01/04/21 Control the display of phone and main bid box in the css media queries instead of d-none etc in the html
/* 01/04/21 Updates to bidding practice and quiz css
/* 31/03/21 Add height to feedback-body for bidding activites (large and fallback) to fix overflow:auto not working
/* 10/03/21 Make scaling .scard media query specific to leads quiz so not inherited elsewhere
/* 09/03/21 Just changed letter spacing for .scard
/* 03/03/21 Changes for Leads quiz
/* 03/12/20 Add fallback floats for home page
/* 02/12/20 Home page grids etc
/* 07/11/20 Updates for minibridge millionaire
/* 03/03/20 Incorporated grid layouts for activities

/* Note re media queries: Our bootstrap breakpoints are: sm: 550px, md: 768px, lg: 992px, xl: 1200px */
/* And max-width MUST be one less than the breakpoint (or it cause problem) */
/* ---------------------------------BOOTSTRAP OVERRIDES ------------------------------*/
html {
    font-size: 16px;
}

body {
    background-color: #DFE6EF;
}
p { 
      margin: 0;
      margin-bottom: 8px;
      line-height: 1.4;
} 

.btn {
	padding-top: 0;	
	padding-bottom: 0;
}

.disabled {
	color: #ddd !important;
}


/* ----------------------NAV TABS ------------------*/

.nav-tabs {
    border-color: #0066CC;
}

.tab-pane {
    border: solid 1px;
    border-color: transparent  #0066CC #0066CC #0066CC;
    background: white;
    padding-bottom: 1em;    
    color: black;
}

.tab-pane a {
    color: #222;    
}

.tab-pane li {
    padding-top: 0.4rem;    
    padding-bottom: 0.4rem;
}

.nav-tabs .nav-link.active {
    color: #495057;
    background-color: white;
    border-color: #0066CC #0066CC transparent #0066CC !important;
}

.nav-tabs .nav-link:not(.active) {
    border-color: #999 #999 blue #999 !important;
    background-color: #0066CC;
    color: white;
}


/*----------------------------------GENERAL STUFF NOT IN BOOTSTRAP--------------------------- */
/* this is outer container fluid used on pages with BS rows and columns */

.nfb-font-lg1 {
    font-size: 1.1rem;
}

.nfb-font-lg4 {
    font-size: 1.4rem;
}

.btn-on-green {
	border-radius: 3px;
	border-bottom: solid 1px #333;
    border-right: solid 1px #333;
    border-top: solid 1px #bbb;
    border-left: solid 1px #bbb;
}

/*-----------------------------------CARDS AND BORDERS ----------------------------------------- */

.nfb-card-green {
      border: 4px solid #009100;
	  border-radius: 0;
      box-shadow: 5px 5px 20px #818181;
 }
.nfb-card-red {
      border: 4px solid #ff4444;
	  border-radius: 0;
      box-shadow: 5px 5px 20px #818181;
 }

.nfb-card-orange {
     border: 4px solid #E46C0A;
 	  border-radius: 0;
    box-shadow: 5px 5px 20px #818181;
 }

.nfb-card-lightblue {
      border: 4px solid #0066CC;
  	  border-radius: 0;
    box-shadow: 5px 5px 20px #818181;
 }

.nfb-card-blue {
     border: 4px solid #033C7F;
 	  border-radius: 0;
    box-shadow: 5px 5px 20px #818181;
 } 
    
.nfb-card-head-green {
      background: #009100;
    color: #ddd;
    padding:1px 5px 3px 5px;
        }
.nfb-card-head-red {
     background: #ff4444;
     color: #ddd;
     padding:1px 5px 3px 5px;
}

.nfb-card-head-orange {
     background:#E46C0A;
     color: #eee;
    padding:1px 5px 3px 5px;
}

.nfb-card-head-lightblue {
     background: #0066CC;
     color: #fff;
    padding:1px 5px 3px 5px;
}

.nfb-card-head-blue {
    background: #033C7F;
    color: #eee;
    padding:1px 5px 3px 5px;
 } 

 
/* Today's hands etc on home page */
.nfb-daily-card {
      background: #0066CC;
      padding: 10px;
	  border-radius: 0;
 } 
        
.nfb-daily-card-body {
	  border-radius: 8px;
      background: white;
      padding: 5px;

 } 


/*-----------------------------------LIGHT BUTTON ----------------------------------------- */

.nfb-btn-light {
     border: solid 1px #ccc; 
}

.nfb-btn-light:hover {
    background-color:	#F8F8F8 ;
}
 

/*---------------------- QUIZ INTRO AND OTHER LISTS -----------------------------*/
li.list-group-item {
	padding: .35em .3em .35em .7em ;
	border:none;
	
}
/* this only works with simle list, not nested list */
.nfb-striped li:nth-child(odd) {
	background: #eee;
}

.nfb-list-header {
    background-color: #0066CC;    
    color: #fff;
    padding: 0.3rem;
}

/* this for indented list items. e.g. on allquizzes page with subtopics */
.nfb-indented-list {
  padding-left: 3rem !important;
  font-style: italic;
}

.nfb-leaderbd-right {
	margin-right: 0.5em;
}

.nfb-leaderbd-badge {
    font-size: 1em; 
    margin-right: 0;
}

/* New actvity indicator on menus  */
.nfb-show-new {
	 font-size: 1em; 
}

.nfb-link-disabled {
    color: #999 ;
    cursor: not-allowed;
}
/*---------------------- ICONS AND SUI SYMBOLS -----------------------------*/

.nfb-nav-icon {
	font-size: 1.5rem;
	color: #666;

}

.nfb-icon-grey {
	color: #777;
	font-size: 1.5rem;
}

.icon-s, .icon-c {
	color: black;
}

.icon-h, .icon-d {
	color: red;
}

/* font-size must be 80% when used in conjunction with text */
.i-c {
	color: green;
	font-size: 80%;
}

.i-d {
	color: #ff6600;
	font-size: 80%;
}
.i-h {
	color: red;
	font-size: 80%;
}

.i-s {
	color:blue;
	font-size: 80%;
}

/* font-size must be 80% when used in conjunction with text  i-x is used for red/black suit symbols*/
.i-x {
	font-size: 80%;	
}




/*----------------------  TIP OF THE DAY -----------------------------*/
.nfb-tip-card {
    width: 180px;
    margin-bottom: 12px;
}
	
/* Auction */
table.nfb-tipauction {
  text-align: center;
}

/* Auction */
.nfb-tipauction td {
  min-width: 40px;
}



/* ----------------------------- CSS FROM RIBBON GENERATOR --- https://www.cssportal.com/css-ribbon-generator/-------------- */
/* This is the square container that holds the ribbon. Swich on bg colour to see it */
.nfb-ribbons {
  position: absolute;
  left: -10px; top: -10px;
  z-index: 1;
  overflow: hidden;
  width: 100px; height: 100px;
  /*background: yellow;
    opacity: 0.5;*/

}
.nfb-ribbons span {
    overflow: visible;
  position: absolute;
  top: 17px; left: -22px;
  font-family: verdana;
  font-size: 13px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 98px;
  display: block;
  background: #F70505;
  background: linear-gradient(#F70505 0%, #9C0303 100%);
 /*  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);

 */
}
.nfb-ribbons span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 5px solid #7B0000;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-top: 5px solid #7B0000;
}
.nfb-ribbons span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 5px solid transparent;
  border-right: 5px solid #7B0000;
  border-bottom: 5px solid transparent;
  border-top: 5px solid #7B0000;
}

/* Quiz Leaderboards */
.leaderboard {
    height: 540px;  
    overflow-y: scroll; 
    /* has to be scroll, not auto */         
    -webkit-overflow-scrolling: touch;             
}

.leaderboard::-webkit-scrollbar {
    -webkit-appearance: none;
}

.leaderboard::-webkit-scrollbar:vertical {
    width: 12px;
}

.leaderboard::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; 
    /* should match background, can't be transparent */
    background-color: #ccc;
}

.leaderboard li {
    padding-top: 0;
    padding-bottom: 1px;
}

/* -------------------------------------Preferences and Side Bars  ----------------------------------*/
/* The flex outer container enbles easy show and hide the nav sidebars in landscape mode */
#app-outer-container {
  max-width: 1100px;
  margin: auto;
}

/* preferences radio buttons */
#bcol-radio0-label, #bcol-radio1-label, #bcol-radio2-label {
    color: white; 
    width: 75px;
    height: 34px;   
    border-radius: 3px; 
    padding: 4px; 
    text-align: center;
}
#bcol-radio0-label {
    background-color: #0066CC; 
}

#bcol-radio1-label {
    background-color: #5e5e5e; 
}
#bcol-radio2-label {
    background-color: green; 
}
#bcol-radio2-label div {
    border: solid 1px white;
}

/* sidebars  and set preferences button*/
#sidebarleft, #sidebarright, #showsidebarsbtn, #hidesidebarsbtn, #preferencesbutton {
    display: none;
}

/* -----------------  Activity intro pages (and 2 tips page) ------------------*/
#intro-outer-container {
    max-width: 1100px;
    margin: auto;
    padding:0;
}

#intro-center-block {
    background-color: green;
}

#intro-notices-outer {
    width: 90%;
    margin: auto;
}

.intro-title {
    height: 36px;
}

/* ============================================ computer and landscape mode tablets ===================================	*/
@media only screen and (min-width: 992px) and (min-height: 500px) {
    
    #preferencesbutton {
        display: block;
    }

    
    #hidesidebarsbtn {
        display: block;
        margin-bottom: 2px;
    }
    
    .sidebars-btn-show {
        /* need !important to take precedence over the ids with display:none */
        display: block !important;
        padding-left: 6px;
        padding-right: 6px;
    }
    
    /* need !important to take precedence over the ids with display:none */
    .sidebars-show {
        display: flex !important;
        flex-direction: column; 
        justify-content: space-between;
    }

    #sidebarleft, #sidebarright {
        background-color: #565656;
        color: #eee;
        padding-top: 70px;
        width: 30px;
    }  
    
    #sidebarleft .btn, #sidebarright .btn {
        /* take off bootstrap default button padding as it causes overflow */
        padding: 0;
    }  
   #sidebarleft-dropdown button, #sidebarright-dropdown button {
        height: 500px; 
        color: inherit; 
        display: inline-flex; 
        flex-direction: column; 
        padding-left: 5px !important; 
        font-size: 1.1rem;
    }
    
    #sidebarleft-dropdown i, #sidebarright-dropdown i {
        padding-top: 10px; 
        padding-bottom: 5px;
    }
    
   #sidebarleft-menu, #sidebarright-menu {
       background-color: #555;
       opacity: 0.95;
    }
    
    #sidebarleft-menu {
        margin-left: -1px;
    }
    
    #sidebarright-menu {
        margin-right: -5px;
    }
    
    #sidebarleft-menu a, #sidebarright-menu a {
        padding-top: 3px; 
        padding-bottom: 5px;
        padding-left: 12px;
        color: #eee;
    }
    
     #sidebarleft-menu a:hover, #sidebarright-menu a:hover {
       background-color: #666;
    }
    
    /* css for activity intro pages */
    #intro-outer-container #sidebarleft,  #intro-outer-container #sidebarright, #intro-center-block {
        height: 615px;
    }
    
    #intro-notices-outer {
        width: 60%;
    }
    
}
 

/* -------------------------------------Small playing card (phone size)  ----------------------------------*/
.scard {
	font-family: 'arial';
    height: 56px;
    width: 37px;
    background-color: white;
    font-size: 1.7rem;
	/* the combination of letter-spacing and padding-right fixes character spacing for the '10' and centering of all digits */
	letter-spacing: -3px;
	/* the combination of line-height and padding-top fixes vertical spacing */
	line-height: 100%;
    border: solid 1px #ccc;
    border-radius: 5px;
	text-align: center;
	margin: 0 0 0 4px;
	padding: 0 5px 0 1px;
}
		
.scard .icon-c {
	color: green;
	font-size: 90%;
}

.scard .icon-d {
	color: #ff6600;
	font-size: 90%;
}
.scard .icon-h {
   /* takes default red color */
	font-size: 90%;
}

.scard .icon-s {
	color: blue;
	font-size: 90%;
}

.scard-suit-spacer {
	margin-left: 8px;
}

/* -----------------Normal size playing cards extra styles (the styles for the playing cards themseles are in cards.css) ---------------*/
.card-spacer {
	margin-left: -43px;
}

.card-suit-spacer {
	margin-left: 23px;
}

 /* ------------------------- Bottom bar grid used for leads quiz, bidding quiz and bidding practice (where we want a centered element in the middle)-----------*/
#bottom-bar-left{
    grid-area: bottombarleft;
    justify-self: start;
}
#bottom-bar-center{
    grid-area: bottombarcenter;
}
#bottom-bar-right{
    grid-area: bottombarright;
    justify-self: end;
}

.bottom-bar-grid{
    display: grid;
	grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "bottombarleft bottombarcenter bottombarright"
}

 /* ------------------------- Styles for bidding quizzes and bidding practice------------*/
/* --- classes for main bidding box (large) */
.main-biddingbox {
	background-color: #ccc;
	border: solid 2px #666;
	border-radius: 3px;
	height: 286px;
	width: 229px;
}


.bidbutton {
    /* padding must be cleared because phone and ipad add padding to button elembent */
	padding: 0;
    border: solid 1px #999;
	border-radius: 3px;
    background-color: #fefefe;
	font-size: 1.4rem;
	width: 45px;
}


.bidbutton-phone {
    border: solid 1px #999;
    background-color: #fefefe;
	font-size: 1.5rem;
	/* padding must be cleared because phone and ipad add padding to button elembent */
	padding: 0;
    height: 40px;
    width: 57px;
    border-radius: 0;
    border-bottom: none;
    border-left:none;
    padding-top: 3px;
}

.bid-suit-ph {
    /* This 1.5 increases the suit symbols by 1.3 from the parent container which is bidbutton! */
    font-size: 1.5rem;
}

.bidhidden {
	visibility: hidden;
}

 /* non suit bids on main bidding box */     
.bid-n {
    color: black;
    font-size: 1.1rem;
}
      
.bid-p {
	background-color: #28BF37;
	width: 75px;
	font-size: 1.2rem;
	padding: 1px 6px 1px 6px;
	color: white;

}

.bid-x {
	background-color: #df0101;
	width: 75px;
	font-size: 1.2rem;
	padding: 1px 6px 1px 6px;
	color: white;
}

.bid-xx {
	background-color: blue;
	width: 75px;
	font-size: 1.2rem;
	padding: 1px 6px 1px 6px;
	color: white;
}

/* --- classes for phone/medium style bidding box */
.phone-bidding-box {
	width: 290px;
	height: 130px;
}
		
.bidnumberrow {
	height: 60px;
	/* hack to prevent whitespace between html buttons */
	font-size:0; 
}
	
.bidbuttonrow {
	/* hack to prevent whitespace between html buttons */
	font-size:0; 
}

.bidnumber {
    border: solid 1px #999;
	border-radius: 6px 6px 0 0;
	border-bottom: none;
	border-left:none;
    background-color: #fefefe;
	font-size: 1.4rem;
	width: 41px;
	height: 50px;
	/* padding must be cleared because phone and ipad add padding to button element */
	padding: 0;
	outline: none !important; /* removes active border when clicked */
}


/* non suit bids on phone bidding box */
.bid-nt-ph {
	width: 59px;
}
.bid-p-ph {
	background-color: #28BF37;
	border-right: solid 1px #bbb;
	border-bottom-left-radius: 5px;
	color: white;
	width: 96px;
}

.bid-x-ph {
	background-color: #df0101;
	color: white;
	width: 95px;
}

.bid-xx-ph {
	background-color: blue;
	border-bottom-right-radius: 5px;
	border-right: none;
	color: white;
	width: 95px;
}


/* fixed widths ensures suitable spacing around auction box */
/* don't shows bids cards except for larger devices */
.bidcards-container {
   display: none ;
   height:  65px;
   min-width: 170px;
}

.bidcard {
   width: 84px; 
   height: 48px; 
   border: solid 1px #666; 
   border-bottom: solid 1px black; 
   border-right: solid 1px black; 
   border-radius: 2px;
   background: white; 
   font-size: 1.4em;
}

.bidcard-offset {
	margin-left: -110px;
}

.bidcard-content {
   width: 20px; 
   margin-top: 1px;
   line-height: 90%;
   font-weight: bold;
}

.bidcard-content-nt {
   width: 27px; 
   margin-top: 1px;
   margin-right: 1px;
   line-height: 95%;
   font-weight: bold;
   text-align: center;
}

.bidcard-nt-size {
	font-size: 85%;
	letter-spacing: -3px;
	font-family: arial;
}

.bidcard-c {
	color: green;
}

.bidcard-d {
	color: #ff6600;
}
.bidcard-h {
	color: red;
}

.bidcard-s {
	color:blue;
}

.callcard {
	width: 60px; 
	height: 48px; 
	border: solid 1px #000; 
	border-top: solid 1px #333; 	
	border-left: solid 1px #333; 
	border-radius: 2px;
	color: white;
}


.callcard-offset {
	margin-left: -86px;
}

.callcard-p {
	background-color: #28BF37;
}

.callcard-x {
	background-color: #df0101;
}

.callcard-xx {
	background-color: blue;
}

.passcard-content {
	font-family: arial;
    width: 12px; 
	font-size: .71rem;
	font-weight: bold;
	line-height: 100%;
	padding-top: 1px;

}

.callcard-content {
	font-family: arial;
	font-weight: bold;
	padding-top: 12px;	
	padding-right: 2px;
}



 /* ------------------------- Styles for auction------------*/

.auction {
	text-align: center;
	border-collapse: separate;
	border-spacing: 2px;
	line-height: 130%;
	border-radius: 2px;
	background-color: white;
}

.auction th{
	background-color:gray;
	padding: 0 5px 3px 5px;	
	color:white;
	font-weight:normal;
	}


.auction td {
	font-size: 1.1rem;
	}

/* ------------------------- Extra Styles Bidding Practice-----------*/
.bp-commentary-lg-card-body {
	/* fixed height works best on large screen because it's not directly in grid block.
	Don't change! */
	height: 536px; 
	overflow:auto;
}

.bp-commentary-sm-card-body {
	/* will expand to fit grid block */
	overflow:auto;
}

/* ------------------------------Audio Player ----------------*/
/* Based on https://github.com/myokyawhtun/mkhplayer   ----- */ 

/* having class for the outer container give us more control over positioning on different activity types */
.bp-audiodiv {  
	width: 112px; 
	margin: auto; 
	margin-top: 50px;
}

.audioWrapper{
     background:#ccc;
     position: relative;
     height: 32px;
	 border: solid 1px #999;
	 border-radius: 2px;
     width:112px; /*this line added to restict audio control width*/
}
.functionControl,.volumeControl,.main-content .functionControl, .main-content .volumeControl{
     color:#fff;
     text-decoration: none;
     text-indent: -1000px;
     display: block;
     overflow: hidden;
     float: left;
     width: 20px;
     height: 20px;
     margin-top: 4px;
     margin-left: 6px;
     background-image: url(../../../appimages/audiocontrols.png);
     background-size: 80px 20px;
}

.playState{
     background-position: 0px 0px;
}
.pauseState{
     background-position: -20px 0px;
}
.loudState{
     background-position: -40px 0px;
}
.muteState{
     background-position: -60px 0px;
}
.volumeWrapper{
     float: right;
     min-height: 7px;
     min-width: 100px;
     background:rgba(0,0,0,.3);
     position: relative;
     margin-top: 1px;
     margin-right: 1px;
}

.currentTime,.durationTime{
     float: left;
     min-height: 15px;
     min-width: 34px;
     margin-top:3px;
     font-family: verdana;
     font-size:11px;
     margin-left: 8px;
     color: #333;
	 background-color: white;
	 border: solid 1px #999;
	 padding: 3px 6px 3px 5px;
}

.progressWrapper{
     position: relative;
     float: left;
     margin-left: 10px;
     min-height: 5px;
     top:14px;
     background:rgba(255,255,255,.4);
     z-index: 10;
     cursor: pointer;
}

.progressBar{
     position: absolute;
     min-height: 5px;
     width:0%;
     background:rgba(255,255,255,.8);
     cursor: pointer;
     z-index: 11;
}


/* -----------------------------End of Audio Player ----------------*/

 /* ------------------------- Styles for auction help tooltip (using Bootstrap tooltip)-----------*/
.auctiontip {
		text-decoration: none !important; 	border-bottom: 1px dashed #000;  color:#000000;
}

.tooltip {
    /* both outer and inner container must have the min-width. 10px different helps with the offset 
    Note: must not be any wider than this or doesn't work in auction modals on Iphone5 */
    min-width: 290px;
}
.tooltip-inner {
    background-color: #f7f6cd;
	color: #000;
	box-shadow: 3px 3px 6px #333;
	font-size: 1.1rem;
    min-width: 280px;
}
.tooltip.show {
    opacity: 1;
} 
/* bootstrap 4 */
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    display: none;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    display: none;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    display: none;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    display: none;
}




 /* ------------------------- Styles for bottom bar and top bar-----------*/
.bar-container {
    background-color: #0066CC;
	padding: 2px 0 2px 0;
    }

.bar-item {
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}

.bar-item-content {
    background-color:white;       
    color: black;
}

 /* ------------------------- Styles Leads Quiz-----------*/
/* height is required cards block so you can 'move up' the lead chosen */
.leads-south-large-height {
	height: 130px;
}

.leads-south-small-height {
	height: 65px;
}


 /* ------------------------- Styles for feedback. Used in lead quiz, bidding quiz and bidding practice-----------*/
.feedback-card {
    height: 100%;
    border-radius: 1px;
    overflow: auto;
}
#feedback-div {
    grid-area: feedback;
    width: 99%;  /* leave a small margin either side */
}

#feedback-tryagaintxt{
    grid-area: tryagain;
    align-self: center;
}

.feedback-grid{
    display: grid;
    /* make as much space as poss for the feedback on phone version */
    grid-template-rows:86% 14%;    
	grid-template-columns:auto;
	grid-row-gap: 0.5rem;
    justify-items: center;
	height: 100%;
    grid-template-areas:
	 "feedback"
	 "tryagain"
	}

@media only screen and (min-width: 768px) and (min-height: 500px) {
	.feedback-grid{
    grid-template-rows: auto;    
	grid-template-columns: 12% 76% 12%;
    grid-template-areas:
	 "nothing feedback tryagain"
	}
}
/*
/* wide and tall has tryagain on right of feedback  
@media only screen and (min-width: 992px) and (min-height: 499px) {
	.feedback-grid{
    grid-template-rows: auto;    
	grid-template-columns: 12% 76% 12%;
    grid-template-areas:
	 "nothing feedback tryagain"
	}
}

/* medium and tall has tryagain on right of feedback 
(this is the same layout.. it's esentially an OR with the above)  
@media only screen and (min-width: 768px) and (max-width: 991px) and (min-height: 500px) {
	.feedback-grid{
    grid-template-rows: auto;    
	grid-template-columns: 12% 76% 12%;
    grid-template-areas:
	 "nothing feedback tryagain"
	}
}
*/
/*-----------------------------Weekly Quizzes Start Message border ---/
/* general use border for e.g. start message for weekly quiz, commentary ect */
.quiz-startmsg-border {
	border-radius: 5px; 
	border: solid 2px #999 ;
}

 /* ------------------------- Styles for quiz Modal-----------*/
.green-modal-header {
	background-color: #00c851; 
	border-bottom: none;  
	box-shadow:  0px 3px 6px -1px #999;
}

 /* ------------------------- Styles for quiz Modal-----------*/
.blue-modal-header {
	background-color: #1CABE1; 
	border-bottom: none;  
	box-shadow:  0px 3px 6px -1px #999;
}

 /* ------------------------- Styles for Millionaire activities-----------*/
.mill-background {
	/* From https://colorzilla.com/gradient-editor/ */
	background: rgb(76,76,76); /* Old browsers */
	background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.mill-ladder-border {
	background-color: lightblue;
	border-radius: 3px;
}

.mill-ladder-header {
	background-color: black;
}

.mill-ladder li {
	padding-top: 5px;
	height: 35px;
	width: 130px;
}
/* this only works with simle list, not nested list */
.mill-ladder li:nth-child(odd) {
	background-color:  #134462;
}

.mill-ladder li:nth-child(even) {
	background-color: #1B587C;
}

.mill-phone-ladder .list-group-item {
	background-color: #000;
	border: solid 1px #bbb;
	border-radius: 0;
	padding: 0px 5px 0px 5px;
	color: #eee;
}


.mill-success {
	border: solid 4px red !important;
	padding-top: 2px !important;
}

.mill-phone-success {
	color: black !important;
	background-color: white !important;
}

.mill-hand {
	width: 11.5rem; 
    font-size: 1.2em;
}

.mill-type2 #disphandmill {
    margin-left: 12px;
}

#disphandmill .card-body {
    padding: 0.45rem;
}

.mini-question {
	width: 250px; 
    overflow: auto;
}

.mill-hcp {
    font-size: 0.8rem ;
	color: #888;
}

.mill-card-header {
	background: black ;
}

.mill-feedback {    
     border: solid #333 2px;
     border-radius: 4px;
     background-color: #f8f8ff;
	 width: 440px;
	 height:75px;
	 overflow:auto;
}

.mini-feedback {
     padding: 10px;
     border: solid #333 2px;
     border-radius: 4px;
     text-align: center;
	 background-color:  #f8f8ff;
	 width: 440px;
	 height:75px;
	 overflow:auto;
}

.mill-feedback-correct {
	width: 100px;
	border: solid 2px white;
	border-radius: 4px;
	padding-left: 14px;
	padding-right: 14px;
}


/* ---------------------- General css used by many activities----------------------*/
/* added own fade effect because the built in fade class prevent js .hide method from working! */
#endmodal {
	opacity: 0;
    animation: fadeIn .5s;
    animation-fill-mode: forwards	
}

/* This is for end modal do not delete! */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


#spinner, .spinner {
	position: relative;
	bottom: 30px;
	margin-left: -28px;
	display:none;
	border:4px solid #bbb;
	border-radius: 50%;
	border-top: 4px solid green;
	width: 28px;
	height:28px;
	animation: spin .6s linear infinite;
}



@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*=================  GRID STYLES FOR ALL ACTIVITIES ======================*/
/* -----------------  GRID STYLES FOR BIDDING QUIZ & BIDDING PRACTICE ----------*/
#bids-south-block-large {
   display: none ;		
}

#bids-south-block-small {
   display: flex ;	
}

/* grid area assignments */
#bids-header-block {
    grid-area: header;
	justify-self: stretch;
}

#bids-auction-bidcards-block {
    grid-area: auction;
}

#bids-south-block {
    grid-area: south;
	align-self: end;
}

#bids-feedback-phone-bidbox-block {
    grid-area: feedback;
	justify-self: stretch;
}

#bids-main-bidding-box-block {
    grid-area: lgright;
	align-self: end;
    display: none;
}

#bids-footer-block {
    grid-area: footer;
	justify-self: stretch;
}

#bids-grid-container {
	background-color: green;
}
		
@supports (grid-area: auto)	 {
	/* mobile phones including wide ones */
	#bids-grid-container {
		margin: auto;
		display: grid;
		justify-items: center;
		grid-template-rows: 30px 53% auto 30px;
		grid-template-columns: 37% 63%;
		grid-row-gap: 0.3em;	
		grid-template-areas:
			 "header header"
			 "auction feedback"
			 "south south"
			 "footer footer";
	}
}

		
/* tablet portrait mode*/
@media only screen and (min-width: 768px) and (min-height: 500px)  {
	@supports (grid-area: auto)	 {
		#bids-grid-container{
		grid-template-rows: 30px auto auto 125px 30px;
		grid-template-columns: 100%;
		grid-template-areas:
		"header"
		"auction"
		"south"
		"feedback"
		"footer";
		}
	}
	/* bid cards and large playing cards */
	.bidcards-container {
		display: flex;
	}

	#bids-south-block-large {
	   display: flex ;		
	}

	#bids-south-block-small {
	   display: none ;		
	}
	
}

/* computer and landscape mode tablets */	
/* total height 595px (plus the grid gap 614px)*/
/* 1st Apr 2021 added a min height so that it doesn't use computer layout for wide and short devices like old Kindle fire */
/* note there is corresponding media query that caters for wide and short (< 500px) */
@media only screen and (min-width: 992px) and (min-height: 500px) {
	@supports (grid-area: auto)	 {
		#bids-grid-container {
        grid-template-rows: 30px 290px 125px 120px 30px;
		grid-template-columns: 75% 25%;

		grid-template-areas:
		"header header"
		"auction lgright"
		"south lgright"
		"feedback lgright"
		"footer footer"
		}
	}
    
    #phone-biddingbox  {
        display:none;
    }  
    
    #bids-main-bidding-box-block {
        display: block;
    }
	#bids-south-block-large {
	   display: flex ;		
	}

	#bids-south-block-small {
	   display: none ;		
	}
    
   /* change feedback div in order to make feedbackcard fixed width to solve issue with taking space from the sidebars when the feedback card has variable width */
    #bids-grid-container #feedback-div {
        width: 600px;
    }
    /* in conjuction with the above, change width of tryagaintxt to force it only 2 lines */
    #bids-grid-container #feedback-tryagaintxt {
        width: 40%;
    }    
    /* needs fixed height to ensure overflow auto */
    #bids-grid-container #feedback-body {
        height: 95px;
        overflow: auto;
    }
    
    /* reduce slightly to allow space for bidding box */
    #bids-grid-container .card-spacer {
        margin-left: -45px;
    }    

    /* 1st Apr 2021 these classes are used to show or hide try again txt or buttons and the small bid box when the devide is wide and tall.  Re the small bid box... we need to control it here because JS also shows/hide it. Important is required to make sure any show/hide style in js are overriden.*/
    .bids-dnone-widenotshort {
        display: none !important;
    }
    
   .bids-dblock-widenotshort {
         display: block !important;
    }
}

/* all  short devices  */
@media only screen and (max-height: 499px) and (max-width: 799px)  {
	#bids-grid-container {
		height: 100vh;
	}
}

/* this is to cater for iPhone X which has white/black link which overlays bottom of screen */
@media only screen and (max-height: 499px) and (min-width: 800px)  {
	#bids-grid-container {
		height: 97vh;
	}
}

/* -----  GRID STYLES FOR FINAL PAGE OF BIDDING PRACTICE WHERE COMMENTARY SHOWN END OF HAND ------*/
#bids-north-block-large {
   display: none ;	
   margin-top: 10px;
}

#bids-north-block-small {
    display: flex ;
}
	
#bids-north-block {
    grid-area: north;
	align-self: start;
}
 
#bids-commentary-block {
    grid-area: commentary;
	justify-self: end;
}	
	
#bp-final-grid {
	background-color: green;
}

/* use for end of hand page in bidding practice  */
/* 10th Mar 2021 note this hasn't been tested in bidding practice.  Add the #bp-final-grid to make sure the scaling only applies to bidding practice */
#bp-final-grid .north-block-small {
    transform: scale(.9);
    transform-origin: top;
} 

#bp-final-grid .south-block-small {
    transform: scale(.9);
    transform-origin: bottom;
} 


		
@supports (grid-area: auto)	 {
/* mobile phones including wide ones  */
	#bp-final-grid {
		margin: auto;
		display: grid;
		justify-items: center;
		grid-template-rows: 30px 19% minmax(39%, 135px) auto 30px;		
		grid-template-columns: 37% 63%;
		grid-row-gap: 0.16em;	
		grid-template-areas:
			 "header header"
			 "north north"
			 "auction commentary"
			 "south south"
			 "footer footer";
	}
}

		
/* tablet portrait mode*/
@media only screen and (min-width: 768px) and (min-height: 500px)  {
	@supports (grid-area: auto)	 {
		#bp-final-grid {
		grid-template-rows: 30px auto auto auto 125px 30px;
		grid-template-columns: 100%;
		grid-template-areas:
		"header"
		"north"
		"auction"
		"south"
		"commentary"
		"footer";
		}
	}
	/* bid cards and large playing cards */
	.bidcards-container {
		display: flex;
	}

	#bids-south-block-large {
	   display: flex ;		
	}

	#bids-south-block-small {
	   display: none ;		
	}
	
	#bids-north-block-large {
	   display: flex ;		
	}

	#bids-north-block-small {
	   display: none ;		
	}

	
}
		
/* computer and landscape mode tablets */
/* 1st Apr 2021 added a min height so that it doesn't use computer layout for wide and short devices like old Kindle fire */
@media only screen and (min-width: 992px) and (min-height: 500px) {
    @supports (grid-area: auto)	 {
		#bp-final-grid {
		grid-template-rows: 30px minmax(auto, 130px)  minmax(auto, 285px)  minmax(auto, 130px) 30px;
		grid-template-columns: 75% 25%;
		grid-template-areas:
		"header header"
		"north commentary"
		"auction commentary"
		"south commentary"
		"footer footer"
		}
	}
    
    #bp-final-grid #bids-main-bidding-box-block {
        display: none;
    }
    
	#bids-south-block-large {
	   display: flex ;	
	}

	#bids-south-block-small {
	   display: none ;		
	}
	
	#bids-north-block-large {
	   display: flex ;	
	}

	#bids-north-block-small {
	   display: none ;		
	}
    
   #bp-final-grid #commentary-card {
        /* made fixed width to solve issue with taking space from the sidebars when the commentary card has variable width */
        width: 240px;
    }

     /* reduce slightly to allow space for commentary box */
    #bp-final-grid .card-spacer {
        margin-left: -45px;
    }     
}

@supports not (grid-area: auto)	 {
    #bids-auction-bidcards-block {
        height: 300px;
    }
    
    #bids-main-bidding-box-block  {
        position: absolute;
        top: 30px;
        right: 0px;
    }  
    
    /* centers if on fallback devices */
    #bids-south-block-large {
        width: 750px;
        margin: auto;
    }
    
    #bids-feedback-phone-bidbox-block {
        height: 130px;
        padding: 7px 50px 0px 50px;
    }
    #bids-feedback-phone-bidbox-block  #feedback-body{
        height: 75px;
        overflow:auto;
    }

}
	
/* all short devices  */
@media only screen and (max-height: 499px) and (max-width: 799px) {
	#bp-final-grid  {
		height: 100vh;
	}
	
	#bp-final-grid #auction-div {
		height: 40vh;
		overflow: auto;
	}
}

/* this is to cater for iPhone X which has white/black link which overlays bottom of screen */
@media only screen and (max-height: 499px) and (min-width: 800px)  {
	#bp-final-grid {
		height: 97vh;
	}
    
   	#bp-final-grid #auction-div {
		height: 40vh;
		overflow: auto;
	}
}
/* -----------------  GRID STYLES FOR LEADS QUIZ ----------*/
#leads-south-block-large {
   display: none ;		
}

#leads-south-block-small {
   display: flex ;	
}

/* grid area assignments */
#leads-header-block {
    grid-area: header;
	justify-self: stretch;
}


#leads-auction-bidcards-block {
    grid-area: auction;
}

#leads-south-block {
    grid-area: south;
	align-self: end;
}

#leads-feedback-hint-block {
    grid-area: feedback;
	justify-self: stretch;
}

#leads-footer-block {
    grid-area: footer;
	justify-self: stretch;
}

#leads-grid-container {
	background-color: green;
}
		
@supports (grid-area: auto)	 {
	/* mobile phones including wide ones */
	#leads-grid-container {
		margin: auto;
		display: grid;
		justify-items: center;
		grid-template-rows: 30px 53% auto 30px;
		grid-template-columns: 63% 37% ;
		grid-row-gap: 0.3em;	
		grid-template-areas:
			 "header header"
			 "feedback auction "
			 "south south"
			 "footer footer";
	}

}

		
/* tablet portrait mode and computer landscape are identical for leads training*/
/* total height 595px (plus the grid gap 614px)*/
@media only screen and (min-width: 768px) and (min-height: 500px) {
	@supports (grid-area: auto)	 {
		#leads-grid-container{
		grid-template-rows: 30px 290px 125px 120px 30px;
		grid-template-columns: 100%;
		grid-template-areas:
		"header"
		"auction"
		"south"
		"feedback"
		"footer";
		}
	}
	/* bid cards and large playing cards */
	.bidcards-container {
		display: flex;
	}

	#leads-south-block-large {
	   display: flex ;		
	}

	#leads-south-block-small {
	   display: none ;		
	}
    
    /* needs fixed height to ensure overflow auto */
    #leads-grid-container #feedback-body {
        height: 95px;
        overflow: auto;
    }
    
   /* change feedback div in order to make feedbackcard fixed width to solve issue with taking space from the sidebars when the feedback card has variable width */
    #leads-grid-container #feedback-div {
        width: 750px;
    }
    /* in conjuction with the above, change width of tryagaintxt to force it only 2 lines */
    #leads-grid-container #feedback-tryagaintxt {
        width: 40%;
    }
}

/* all short devices  */
@media only screen and (max-height: 499px) and (max-width: 799px)  {
	#leads-grid-container {
		height: 100vh;
	}
}

/* this is to cater for iPhone X which has white/black link which overlays bottom of screen */
@media only screen and (max-height: 499px) and (min-width: 800px)  {
	#leads-grid-container {
		height: 97vh;
	}
}
@supports not (grid-area: auto)	 {
    /* centers if on fallback devices */
    #leads-south-block-large {
        width: 750px;
        margin: auto;
    }
    
    #leads-feedback-hint-block {
        height: 130px;
        padding: 7px 50px 0px 50px;
    }
    #leads-feedback-hint-block  #feedback-body{
        height: 75px;
        overflow:auto;
    }
    #leads-feedback-hint-block  #hint-body{
        height: 100px;
        overflow:auto;
    }
}

/* ------- Lead and Bidding Activities: specific changes for wide and short devices like iPhoneX and old Kindle Fire----
 For lead and bidding activies scale small cards if wide and short.  Also scale the auction font 
 10th May 2021 changed the dimensions of the scards to make slightly smaller so they don't overflow widthways on squarer devices */
@media only screen and (min-width: 667px) and (max-height: 499px)  { 

	/* this is need to give space for the selected card to 'pop up' */
    .leads-south-small-height{
		height: 23vh;
	}

	#leads-south-block-small .scard, #bids-south-block-small .scard, #bp-final-grid  #bids-north-block-small .scard {
		font-family: 'arial';
		background-color: white;
		border: solid 1px #ccc;
		border-radius: 4px;
		text-align: center;
		height: 18vh;
		width: 10.5vh;
		font-size: 9vh;
		line-height: 100%;
	}
    
    #leads-grid-container .auction th, 
    #bids-grid-container .auction th, 
    #bp-final-grid .auction th {
		font-size: 5vh;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    #leads-grid-container .auction td, 
    #bids-grid-container .auction td, 
    #bp-final-grid .auction td {
		font-size: 6vh;
        line-height: 110%;
    }

}



/* ----------------------  GRID STYLES FOR MILLIONAIRE ----------*/
.question-button {
	display: none;
}

.mill-titlespan{
	display:none;
}

/* first test for grid support */
@supports (grid-area: auto)	 {

#mill-title-block {
    grid-area: header;
	justify-self: stretch;
    margin-top: 5px;
}
#mill-auction-block {
    grid-area: auction;
    justify-items: center;
    align-self: center;
}
#mill-question-block {
    grid-area: question;
    justify-self: stretch;
    align-self: center;
}
#mill-feedback-block {
    grid-area: feedback;
	align-self: center;
}
#mill-big-ladder {
    grid-area: ladder;
    justify-self: end;
}
#mill-footer-block {
    grid-area: footer;
    justify-self: stretch;
}

/* mobile phones including wide ones */
#mill-grid-container {
    margin: auto;
    display: grid;
    justify-items: center;
    grid-template-rows: 33px auto 77px 30px;
    grid-template-columns: 34% 66%;
    grid-row-gap: 0.1em;  /*very small needed for small mobiles */	
    grid-template-areas:
         "header   header"
         "auction  question"
         "feedback feedback"
         "footer   footer";
}

#mini-grid-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    justify-items: center;
    grid-template-rows: 30px auto auto 30px;
    grid-template-columns: 34% 66%;
    grid-row-gap: 0.3em;  /*very small needed for small mobiles */	
    grid-template-areas:
         "header   header"
         "question question"
         "feedback feedback"
         "footer   footer";
}
    
.four-answers-grid {
    display: grid;
    grid-template-columns:auto;
	/*height: 130px; LH 7th Nov 2020 */
    height: 130px;
	overflow: auto;
    justify-items: center;
}

.four-answers-grid > div {   /* borders must be on the divs not buttons */
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
	
	
/* overrides for bids only version of four-answers-grid */
.mill-answer-bids-grid {
    grid-template-columns:auto auto ;
    overflow: hidden;  /* cancel out scroll bars from the four-answers-grid */
}

.mill-answer-bids-grid button   {
	padding: 11px 0 11px 0;
    font-size: 1.5rem;
	width: 80px;
}

}   /* ==================== end of @supports (grid-area: auto) ====*/


/* NOTE Dreamweaver shows error if the media queries are inside the @supports block so moved these to the end */	
/* tablet portrait mode, tablet and computer landscape mode */
/* 10th May 2021 changed columns from 83% 17% to 81% 19% so ladder doesn't overflow on portrait mode */
@media screen and (min-width: 768px) and (min-height:500px)   {
	@supports (grid-area: auto)	 {
		#mill-grid-container {
		grid-template-rows: 30px 150px auto 90px 30px;
		grid-template-columns: 81% 19%;
		grid-template-areas:
			 "header ladder"
			 "auction ladder"
			 "question ladder"
			 "feedback ladder"
			 "footer footer";
		}
        
       #mini-grid-container {
		grid-template-rows: 30px auto 90px 30px;
		grid-template-columns: 81% 19%;
		grid-template-areas:
			 "header ladder"
			 "question ladder"
			 "feedback ladder"
			 "footer footer";
		}

		#mill-phone-ladder {
		   display: none !important;		
		}
		#mill-big-ladder {
			display: block !important;
		}
		
		.mill-type0 .four-answers-grid {
			 grid-template-columns: 50% 50%;
			 height: 244px;
			 width: 370px;
		}
        
        .mill-type1 .four-answers-grid, .mill-type-minibridge .four-answers-grid {
			 grid-template-columns: 50% 50%;
			 height: 200px;
			 width: 370px;
		}
		
		/* overrides for bids only version of four-answers-grid */
		.mill-answer-bids-grid {
			height: 120px;
			width: 160px;
		}
		
		.question-button {
			display: block;
		}
		
		.question-phone {
			display: none !important;
		}

		.mill-titlespan{
			display:block;
		}
        
        #mill-title-block h6 {
            font-size: 1.2em;
            margin-top: 20px;       
        }
        
        #mill-auction-block {
           padding-top: 30px;
           height: 100px;
        }
        
        #mill-auction-block .auction td  {
            font-size: 1.2em;
            padding-top: 5px;
            padding-bottom: 5px;
        }
  
        #mill-auction-block .auction th, #milltopic, .mill-card-header {
            font-size: 1.1em;
            padding-top: 3px;
            padding-bottom: 3px;
        }
        
        #mill-answers-grid .mill-hand {
            font-size: 1.1em;
            line-height: 1.4;
        }

        #disphandmill .mill-hand {
            font-size: 1.5em;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        
        .mill-type2 #disphandmill {
           padding-left: 110px;
        }
        
        .mill-type2 #answer-buttons {
            margin-right: 110px;
        }
        
        .mini-question {
            min-height: 270px; 
        }
        
        .mill-feedback {
            width: 495px;
            height: 85px;
        }

	} 
}  


/* all short devices */
@media screen and (max-height: 499px)  {
    .question-normal{
        display: none !important;
    }
    .mill-titlespan{
        display:none;
    }
    .mill-type0 .four-answers-grid {
        height:45vh;
    }
    
    .mill-type1 .four-answers-grid {
        height:45vh;
    }
    
    .mill-type-minibridge .four-answers-grid {
        min-height: 165px;
        height:45vh;
    }
    
    .mill-type1 .mill-hand {
        width: 45vw;
        font-size: 1.1rem;
    }
    
    .mill-type0 .mill-hand {
        width: 13.5rem;
    }
    
    .mini-question {
       height:52vh;
    }
    
    #mill-auction-block {
        align-self: start;
        margin-top: 45px;
        margin-left: 15px;
    }  
    
    .mill-type-minibridge #mill-question-block {
        align-self: start;
    }
    
}

/* short and narrow devices  */
@media only screen and (max-height: 499px) and (max-width: 799px)  {
	#mill-grid-container {
			height: 100vh;
    }
    #mini-grid-container {
        height: 100vh;
    }
    #points, #hometext {
        display:none;
    }
    
}

/*  short and wider devices this is to cater for iPhone X which has white/black line which overlays bottom of screen */
@media only screen and (max-height: 499px) and (min-width: 800px)  {
    #mill-grid-container {
        height: 97vh;
    }
    #mini-grid-container {
        height: 97vh;
    }
}

@media only screen and (min-width: 667px) and (max-height: 499px)  { /* 667 is iPhone6 */
    #mill-grid-container .auction th {
         font-size: 1.1em;       
    }  
    
    #mill-grid-container .auction td {
        font-size: 1.2em;
    }
}

/* fall back for devices that don't support grid.  We don't cater for phones here */
@supports not (grid-area: auto)	 {
    #mill-grid-container,  #mini-grid-container {
        height: 600px;
        position: relative;
    }
    
    #mill-title-block {
        padding-top: 10px;
    }   
    #mill-title-block h6 {
        font-size: 1.4rem;
        text-align: left;
        margin-left: 15px;
    }
    #mill-footer-block {
       position: absolute;
       bottom: 0px;
       left: 0px;
    }
    #mill-phone-ladder {
       display: none !important;		
    }
    #mill-big-ladder {
        display: block !important;
        position: absolute;
        top: 6px;
        left: 850px;
    }
    
    #correct {
        margin-left: 180px;
    }
    
    .mill-type0 #mill-auction-block {
        position: absolute;
        top: 50px;
        left: 100px;
    }
    
    .mill-type0 #mill-question-block {
        position: absolute;
        top: 50px;
        left: 400px;
        width: 500px;
    }
    
    .mill-type-minibridge #mill-question-block {
        position: absolute;
        top: 50px;
        left: 100px;
        width: 700px;
    }
    
    .mill-type0  #mill-feedback-block {
        position: absolute;
        top: 450px;
        left: 20px;        
    }
    
    .mill-type0 #dispfeedback {
        width: 300px;
    }
    
    
    .mill-type1 #mill-question-block {
        position: absolute;
        top: 210px;
        left: 220px;
        width: 500px;
    }
    .mill-type1  #mill-feedback-block {
        position: absolute;
        top: 500px;
        left: 400px;        
    }  
    
   .mill-type1 #correct {
        margin-left: 0px;
    }
    
    .mill-type1 #mill-auction-block, .mill-type2 #mill-auction-block {
        position: absolute;
        top: 50px;
        left: 350px;
    }
    
    .mill-type2 #mill-question-block {
        position: absolute;
        top: 200px;
        left: 200px;
        width: 500px;
        font-size: 1.3rem;
    }
    
    .mill-type2  #mill-feedback-block {
        position: absolute;
        top: 450px;
        left: 200px;        
    }
    
    #mill-auction-block .auction th {
         font-size: 1.2rem;
    }
    
    #mill-auction-block .auction td {
         font-size: 1.4rem;
         line-height: 1;
    }
    
    #mill-question-block button {
        font-size: 1.3em;
        width: 100px;
        text-align: center;
    }
    
    #mill-feedback-block {
        position: absolute;
        top: 450px;
        left: 200px;        
    }
  
    .mill-type-minibridge .question-phone {
        display:none;
    }



}

/* =============================== ALL CSS FOR PLAN PLAY ACTIVITY ================= */
#plan-grid #plan-four-answers-grid {
    display: grid;
    grid-template-columns:auto;
    height: 50vh;
    max-height: 300px;
    max-width: 550px;
	overflow: auto;
}

#plan-four-answers-grid > div {   /* borders must be on the divs not buttons */
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/* ---------------------------   PLan the play Acvitivy -------------------*/
#plan-header-block {
    grid-area: header;
	justify-self: stretch;
}

/* override bootstrap styles - fix vertical alignment problem */
#plan-auction-dd-container {
    line-height: 1.3;
}

/* override bootstrap styles for drop down button */
#plan-auction-dd {
    border-radius: 0px; 
    padding-left: 1px;
    padding-right: 5px;
    border: solid 1px white;
    height: 26px;

}

#plan-north-block {
    grid-area: north;
	align-self: start;
}

#plan-north-block-large {
   display: none ;	
   transform:scale(.9);
   transform-origin:center center;  
   margin-left: 22px;
}

#plan-north-block-small {
    display: flex ;
}	

#plan-south-block {
    grid-area: south;
	align-self: end;
}

#plan-south-block-large {
   display: none ;	
   transform:scale(.9);
   transform-origin:center center;  
   margin-left: 22px;
}

#plan-south-block-small {
   display: flex ;	
}

#plan-lead-block {
    grid-area: lead;
    text-align: center;
    justify-self: center;
    align-self: center;
    transform:scale(.9);
    transform-origin:center bottom;  
}

#plan-lead-block p {
    color:white;
}

#plan-lead-card-small {
    display: flex;
}

#plan-answers-block {
    grid-area: answers;
    align-self: center;
}	

#plan-lead-card-large {
    display: none;
}

#plan-question-header {
    display: flex;
	background: #ddd;
    text-align: center;
    font-size: 1rem;
    align-items: center; 
    padding: 0px 5px 3px 5px;
}

#plan-question-header div {
    line-height: 1;
    margin: auto;
}

#plan-commentary-block {
    grid-area: commentary;
    align-self: center;
    margin-left: 1vw;
    margin-right: 1vw;
}

#plan-commentarycard .card-body {
    height: 50vh;
    max-height: 299px;
    overflow: auto;
    padding: 2px;
}


#plan-footer-block {
    grid-area: footer;
	justify-self: stretch;
}

.plan-answer-phone {
	width: 34vw; 
    margin-right: 3vw;
}


@supports (grid-area: auto)	 {
/* mobile phones including wide ones  */
	
	#plan-grid {
    background: green;
    margin: auto;
    display: grid;
    justify-items: center;
    grid-template-rows: 30px auto auto auto 30px;
    grid-template-columns: 8% 46% 46%;
    grid-row-gap: 0.0rem;
    grid-column-gap: 0rem;
    grid-template-areas:
        "header header header"
        "north north north"
        "lead answers commentary"
        "south south south"
        "footer footer footer";
    }
}

/* ipad portrait and larger */	
@media only screen and (min-height: 500px) and (min-width: 768px){
    @supports (grid-area: auto)	 {
    #plan-grid {
            grid-template-rows: 30px auto auto auto 194px 30px ;
            grid-template-columns: 15% 70% 15%;
            grid-template-areas:
                "header header header "
                ". north ."
                "lead commentary ." 
                ". south ."
                ". answers ."
                "footer footer footer";

        }

    }
   
    #plan-auction-dd {
        border: none;
    }
    
    #plan-south-block-large {
	   display: flex ;	
	}

    #plan-south-block-small {
          display: none ;		
    }

    #plan-north-block-large {
        display: flex ;	
    }

    #plan-north-block-small {
         display: none ;		
    }
    
   #plan-lead-card-small {
        display: none;
    }
    
    #plan-lead-card-large {
        display: block;
    }

    #plan-commentary-block {
        width: 95%;
    }

    #plan-commentarycard .card-body {
        height: 120px;
        overflow: auto;
        padding: 2px 5px 5px 5px;
    }
    
    #plan-question-header {
        width: 702px;
    }
    
    .plan-answer {
	    width: 350px; 
    }
    
    #plan-grid  #plan-four-answers-grid {
          grid-template-columns: 50% 50%;
          height: 180px;
          max-width: 750px;
    }
    
   #plan-grid  #plan-four-answers-grid #plan-question-header {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

/* overrides for ipad and computer landscape */
@media only screen and (min-height: 500px) and (min-width: 992px){
    @supports (grid-area: auto)	 {
        #plan-grid {
                grid-template-columns: 18% 64% 18%;
         }
        
        #plan-commentary-block {
            width: 625px;
        }

    }
}

	
/* all  short devices  */
@media only screen and (max-height: 499px) and (max-width: 799px)  {
	#plan-grid {
		height: 100vh;
	}
}

/* this is to cater for iPhone X which has white/black link which overlays bottom of screen */
@media only screen and (max-height: 499px) and (min-width: 800px)  {
	#plan-grid {
		height: 97vh;
	}
     #plan-auction-dd {
        border: none;
    }
}


@media only screen and (max-height: 499px)  { /* 667 is iPhone6 */
    
    /* Scale the small cards */
	#plan-north-block-small .scard, #plan-south-block-small .scard, #plan-lead-card-small .scard {
		font-family: 'arial';
		background-color: white;
		border: solid 1px #ccc;
		border-radius: 3px;
		text-align: center;
		height: 13.5vh;
		width: 8vh;
		font-size: 6.5vh;
		line-height: 100%;
	}
   
}



/* This is fallback for devices that don't support grid */
@supports not (grid-area: auto)	 {
    /* default for tablet portrait view we aren't going to do much fallback for phones*/
    #plan-grid {
        background: green;
        /* for unknown reason this activity overflowed on right */
        width: 97vw;
    }
    
    #plan-lead-block {
        float: left;
        margin: 40px 20px 0 20px;
    }
    #plan-answers-block {
        float: left;
        width: 400px;
        height: 250px;
        margin: 20px 20px 20px 0;
        background: pink;
    }
    #plan-commentary-block {
        float: left;
        width: 400px;
        margin: 20px 0 20px 0;
    }
    
    #plan-commentarycard .card-body {
        height: 248px;
    }
    #plan-south-block {
        clear: both;
    }
    
    #plan-north-block-large {
        width: 750px;
        margin: auto;
    }
    
    #plan-south-block-large {
        width: 750px;
        margin: auto;
    }
    
    #plan-question-header {
        width: 400px;
    }
    
    #plan-four-answers-grid {
        height: 250px !important;
        
    }
    

}

/* =========================  STYLES FOR MY BID TOPICS SELECTION PAGE ================= */

.bidtopic-list-container {
    column-count: 2;
}

.bidtopic-list-container > label:nth-of-type(odd) {
      background: #eee;
    }
    
/* The label container so that we can style the checkbox */
.bidtopic_container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: pointer;
	text-align: left;
    font-size: 1.05em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.bidtopic_container input {
    position: absolute;
    opacity: 0;
}

/* Create a custom checkbox */
.bidtopic_container .checkmark {
    position: absolute;
    top: 1px;
    left: 2px;
    height: 23px;
    width: 23px;
    background-color: #fff;
	border: solid 1px gray;
}

/* On mouse-over, add a grey background color */
.bidtopic_container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.bidtopic_container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.bidtopic_container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.bidtopic_container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.bidtopic_container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 8px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* =================================== SIDEBAR, HEADER AND HOME PAGE GRIDS ================= */
#page-outer-grid {
    max-width: 1600px;
}

#sidemenu {
    grid-area: sidemenu;
    background:#0066CC;
    display: none; 
    color: #eee;
}  
#header {
    grid-area: header;
    margin-bottom: 15px;

}

#home-content-grid {
    grid-area: content; 
}

#newscol {
    grid-area: newscol;
    margin: 0 12px 0 12px;
}
#activitiescol {
    grid-area: activitiescol;
    min-width: 170px;
    margin: 0 12px 0 12px;
}

#activitiesmenu {
    display:none;
}

#tip1, #tip2 {
     display: none;
     font-size: 0.9rem;  
     margin: 0 12px 0 12px;
}

#tip1 {
    grid-area: tip1;

}
#tip2 {
    grid-area: tip2;
}

#tipbody {
    padding: 8px;
}

#newsextracol {
    grid-area: newsextracol;
     margin: 0 12px 0 12px;
     display: none;
}


/* This is fallback for devices that don't support grid */
@supports not (grid-area: auto)	 {
    /* default for tablet portrait view we aren't going to do much fallback for phones*/
    #sidemenu {
        width: 160px;
        height: 2500px;
        display: block;
        float: left;

    }  
    #header {
        float: left;
        width: 600px;
    }
    #home-content-grid {
        float: left;
        width: 600px;
    }
    #newscol {
        margin: 0 10px 0 15px ;
        width: 370px;
       float: left;
    }

    #activitiescol {
        margin-right: 20px;
        width: 170px;
        float: left;
    }
    
   #activitiesmenu {
       display: block;
    }

    /* can't display tip in portrait view becauseof the float order */
    #tip1 {
        display: none;
        margin-right: 0;
    }
    #tip2 {
        display: none;
    }

    #newsextracol {
        display: none;
    }
    
    #content {
        width: 1000px;
    }

}
/* Fall back tablets landscape and computers */
@media only screen and (min-width: 992px)  {
    @supports not (grid-area: auto)	 {
        #header {
            width: 850px;
        }
        #home-content-grid {
            width: 850px;
        }
        #newscol {
            width: 400px;
        }
        #tip1 {
            display: block;
        }

    } 
}
/* End of fallback for devices that don't support grid */
    
/* mobile phones phones portrait */        
@supports (grid-area: auto)	 {

      #page-outer-grid {
          margin: auto;
          display: grid;

          grid-template-rows: 60px auto;
          grid-template-columns: auto;
          grid-template-areas: "header" 
                               "content" ;
      }
} 
   
        
@media only screen and (min-width: 768px)   {        
    @supports (grid-area: auto)	 {
    /* tablet portrait mode and everything bigger*/
          #page-outer-grid {
          margin: auto;
          display: grid;

          grid-template-rows: 60px auto;
          grid-template-columns:  160px auto;
          grid-template-areas: "sidemenu header" 
                               "sidemenu content" ;
          }
          #sidemenu {
              display: block;
          }
    }  
 }
		
/* ============== 5 VERSIONS OF CONTENT GRID =========== 
/* mobile phones portrait */
@supports (grid-area: auto)	 {
      #home-content-grid {
          padding: 5px;
          display: grid;

          grid-template-rows: auto auto auto;
          grid-template-columns: auto;
          grid-template-areas: "newscol"
                               "activitiescol"
                               "tip1"
      }
    #tip1 {
        display: block;
    }
} 

/* mobile phones landscape */
@media only screen and (min-width: 550px)  {    
    @supports (grid-area: auto)	 {
        
            #home-content-grid {
            display: grid;

            grid-template-rows: 720px auto;
            grid-template-columns: 2fr 1fr;
            grid-template-areas: "newscol activitiescol"
                                 "newscol tip1" ;
            }
    }
 }


/* tablet portrait mode*/
@media only screen and (min-width: 768px) and (min-height: 500px)  {
	@supports (grid-area: auto)	 {
        #home-content-grid {
            margin: auto;
            display: grid;
            grid-template-rows: 1130px auto;
            grid-template-columns: 3fr 1fr;
            grid-template-areas:  "newscol activitiescol"
                                  "newscol tip1" ;
            }
        #activitiesmenu {
            display: block;
        } 
    } 
}
	        
        
/* computer and landscape mode tablets */	
@media only screen and (min-width: 992px)  {
	@supports (grid-area: auto)	 {
        #home-content-grid {
            display: grid;
            grid-template-rows: 1160px auto;
            grid-template-columns: 3fr 1fr 2fr;
            grid-template-areas: "newscol activitiescol tip1"
                                 "newscol newsextracol newsextracol" ;
        }
         #newsextracol {
            display: block;
        }

         #tipbody {
            height: 1100px;
            overflow: auto;
        }
        
    } 
}
        
/* wide computer  */	
@media only screen and (min-width: 1200px)  {
	@supports (grid-area: auto)	 {
        #home-content-grid {
            display: grid;
            grid-template-rows: 1160px auto;
            grid-template-columns: 4fr 1fr 2fr 2fr;
            grid-template-areas:"newscol activitiescol tip1 tip2"
                                 "newscol newsextracol newsextracol newsextracol" ;
        }
         #tip2 {
            display: block;
       }
    } 
}  

/* -------------------------- NAVIGATION MENU LISTS------------- */
.menu ul{
    list-style: none; 
    padding-left: 1rem;
    padding-bottom: 1rem;
}
.menu li {
    padding: 5px 0 5px 0;
}

.menu a {
    text-decoration: none;
    color: #eee;
}

.menu a:hover  {
     color: #aaa;
}

.activitiesmenu {
      background:#008a0d;
}

/* ============== STYLE FOR LINK LIST CONTENT GRID =========== */
/* NOTE: bootstrap navtabs have style overrides at the top of this css */
#linklist-content-grid {
    grid-area: content; 
}

#linklistcol {
    grid-area: linklistcol;
    height: 100%;
}

/* mobile phones portrait */
@supports (grid-area: auto)	 {
        #linklist-content-grid {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-template-areas: "linklistcol";
            align-self: start;
}
        #linklistcol {
            margin: auto;
        }
        #linklist-content-grid #activitiesmenu {
            display: none;
        }
        .nav-link {
            padding-left: .75em;
            padding-right: .75em;
         }
} 

/* mobile phones landscape */
@media only screen and (min-width: 550px)  {    
    @supports (grid-area: auto)	 {
        #linklistcol {
            min-width: 500px;
        }

    }
 }

/* tablet portrait mode*/
@media only screen and (min-width: 768px) and (min-height: 500px)  {
    .nav-tabs .nav-link {
            margin-right: 0.3em;
    }
    .nav-link {
            padding-left: 1em;
            padding-right: 1em;
     }
}

/* computer and landscape mode tablets */	
@media only screen and (min-width: 992px)  {
    @supports (grid-area: auto)	 {
        
        #linklist-content-grid {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 5fr 1fr;
            grid-template-areas: "linklistcol activitiesmenu";
       }
        #linklistcol {
            min-width: 600px;
        }
        #linklist-content-grid #activitiesmenu {
            display: block;
            min-width: 170px;
            margin-right: 10px;
            align-self:start;
        }
        
    } 
 }

/* This is fallback for devices that don't support grid */
@supports not (grid-area: auto)	 {
    /* default for tablet portrait view */
        #linklistcol {
            width:580px;
            padding-left: 30px;
            float: left;
        }
        #linklist-content-grid #activitiesmenu {
            display: none;
        }
        .nav-link {
            padding-left: .75em;
            padding-right: .75em;
         }
}
/* Tablets landscape and computers */
@media only screen and (min-width: 992px)  {
    @supports not (grid-area: auto)	 {
        #linklistcol {
            margin: auto;
        }
        #linklist-content-grid #activitiesmenu {
            display: block;
            float: right;
            min-width: 170px;
            margin-right: 20px;
        }
    } 
}
/* End of fallback for devices that don't support grid */
/* End of styles for link list content grid */