/* styles for app_courses.php and nfb_course_html.php */
/* 02/05/25 add new ol "continued" class

/* ====================== overriding defaut bootstrap styling =========================== */

/* increase font size in html blocks */
.formattedhtml p, .formattedhtml li {
   font-size: 1.4rem; 
}

p {
    font-size: 1.2rem;
    margin-bottom: 18px;
}

h1 {
    margin-bottom: 20px;
}

h2,h3,h4 {
    margin-bottom: 14px 
}

table{
    border-collapse:collapse;
}

table th,td{
border:1px solid #ccc;
padding: 5px 10px 5px 10px;
text-align: center;
}   

table th {
    background: #ddd;
}

/* numbered list in green circle */
ol {
list-style: none;
counter-reset: item;
      padding-left: 40px;
}

    
ol li {
   counter-increment: item;
   margin-bottom: 14px;
   font-size: 1.2rem;
   position: relative;  /* needed for the absolute positioning be;ow */
 }
ol li:before {
   margin-right: 10px;
   content: counter(item);
   background: #25BB64;
   border-radius: 50%;
   color: white;
   font-size: 1.5rem;
   text-align: center;
   display: inline-block;
  /* making these absolute positioned enabled the correct left alignment of text when line wraps. See csstricks custom counters */
  position: absolute;
  --size: 34px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
 }

/* green coloured number (not list item) used on course intro page*/
.coloured-number {
   background: #25BB64;
   border-radius: 50%;
   color: white;
   font-size: 1.5em;
   width: 1.5em;
   height: 1.5em;
   line-height: 1.4;
   text-align: center;
}

/* 2nd May 2025 Use the class continue to force the next OL to not reset counter*/
ol.continued {
	counter-reset: none;
}  
    
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 0;
  border-top: 1px solid rgba(0,0,0, 1);
}    

     
/* ====================== styles for the main lesson page =========================== */

/* Styles for colapsing side bar */
 .side-navbar {
    width: 260px;
    height: 100%;
    position: fixed;
    margin-left: -260px;
    background-color: #eef0f7;
    transition: 0.5s;
    overflow: auto;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
    background-color: #ffffff;
}

.main-container {
    transition: 0.4s;
}

.active-nav {
    margin-left: 0;
}

/* fthis class is needed as it's toggled on and off in the JS*/
.active-cont {
    margin-left: 260px;
}

div li a {
    color: #212529;
    text-decoration: none;
}

.navlink {
}

.dropdown-item {
    color: white;
}
.form-check-input {
    background-color: white;
} 

.btn-round {
    font-size: 1.75rem; 
    padding: 2px 30px 2px 30px;
}

/* ====================== styles for added html components =========================== */

/* responsive iframe from w3schools */
.iframe-container {
  margin:auto;
  margin-top: 40px;
  margin-bottom: 40px;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
    
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}   
  
/* popovers */
.poplink {
      text-decoration:none;
      text-decoration: underline;
      text-decoration-color: #0000FF;
      text-decoration-style: dashed;
      cursor: pointer;
  }
.popover{
  /* it resizes itself OK if phone */
  max-width: 500px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}   


.popover-body {
    font-size: 1.1rem;
    padding:15px;;
}   

/*======================== styles for hand diagrams =====================*/
    
/* --------------Small playing card courses display version (smaller than scard in app.css) -----------------*/
.scard {
	font-family: 'arial';
    height: 44px;
    width: 28px;
    background-color: white;
    font-size: 1.3rem;
	/* 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: 4px;
	text-align: center;
	margin: 0 0 0 4px;
	padding: 0 5px 0 1px;
}

.scard-ew-suit-spacer {
    height: 46px;
}   

/* for gquestions and app_courses.php suit symbols for small cards are red and black */
.scard .icon-s, .scard  .icon-c {
	color: black;
}

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

/* --------------Suit only playing card courses display version (for showing distribution only) -----------------*/
.sscard {
	font-family: 'arial';
    height: 33px;
    width: 25px;
    background-color: white;
    font-size: 1.3rem;
	/* 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: 4px;
	text-align: center;
	margin: 0 0 0 4px;
	padding: 5px 3px 0 0;
}

.sscard-suit-spacer {
    width: 12px;
}  
    
.highlightcard {
     background-color: yellow;
}
    
.allhands-container {
    max-width: 650px;
}

/* ===================== compass block for hand diagrams ==============*/
.compass-box {
    color: white;
    text-align: center;
    width: 100px; 
    height: 100px; 
    background: #21A288;
}
.compass-box-inner {
    background: white;
    width: 60px; 
    height: 53px;
}
.compass-box-ew {
    writing-mode: vertical-lr;
} 

/* ===================== styles for inline questions  ==============*/
.inline-questions {
    margin: 0 20px 12px 20px;

}
.inline-questions input {
   /* this is get wrapping OK with long text for answer */
   float: left;
}

.inline-questions label {
    margin-left: 20px;
    display: block;
}
.question-box {
   max-width: 800px;
}
.tellme-btn {
    color: white;
    background: #aaa;
    font-size: 1.2rem;
    margin:auto;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
    opacity: 1;
}    
.form-check-input:disabled {
    opacity: 1;
} 

/* These classes enable use to add a fade in effect e.g. when displaying 'Incorrect' when they get a wrong answer */        
.faded {
    opacity: 0;
}
.fadein {
 opacity: 1; transition: opacity 2s;
}

/* Classes for the "continue" line and button */
.continue-triangle {      
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #0d6efd transparent transparent transparent;
}
.continue-label {
    width: 160px;
    color: white;
    background: #0d6efd;
    font-size: 1.75rem;
    padding: 2px 0 6px 0;
    margin: auto;
    margin-top: -20px;
    border-radius: 50rem;
}
.continue-btn {
     width: 100%;
/*     border-top: solid 1px #0d6efd;*/
     margin-bottom: 20px;
}