* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
      text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

/*  text need our own with this */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
} 

/* colours */


:root { 
            --primary-color: hsl(32, 80%, 50%); 
            --secondary-color: hsl(32, 80%, 30%)); 
            --input-border: #8b8a8b;
            --input-focus-h: 245;
            --input-focus-s: 100%;
            --input-focus-l: 42%;
            
        } 

/* https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/ */

/*  underline - for divs in move/shuffle - 2090 appx */

.underline {
border-bottom: 3px solid #000; /* 3px solid black bottom border */
font-size: 16px;
}

/* .inuser left:20px; width:250px; top:250px; height:50px; border: solid red 2px; background-color: lightyellow;  */

.uiinput {
  font-size: 16px;
  font-size: max(16px, 1em);
  font-family: inherit;
  padding: 0.25em 0.5em;
  background-color: green;
  color:white;
  border: 2px solid var(--input-border);
  border-radius: 4px;
}

.example-obtuse {
	position:relative;
	padding:15px 30px;
	margin:0;
	color:#000;
	background:#f3961c; /* default background for browsers without gradient support */
	/* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(#f9d835, #f3961c);
	background:-o-linear-gradient(#f9d835, #f3961c);
	background:linear-gradient(#f9d835, #f3961c);
	/* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
	-webkit-border-top-left-radius:25px 50px;
	-webkit-border-top-right-radius:25px 50px;
	-webkit-border-bottom-right-radius:25px 50px;
	-webkit-border-bottom-left-radius:25px 50px;
	-moz-border-radius:25px / 50px;
	border-radius:25px / 50px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
.example-obtuse:before {
	content:"";
	position:absolute;
	bottom:-30px;
	right:80px;
	border-width:0 0 30px 50px;
	border-style:solid;
	border-color:transparent #f3961c;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the smaller triangle */
.example-obtuse:after {
	content:"";
	position:absolute;
	bottom:-30px;
	right:110px; 
	border-width:0 0 30px 20px;
	border-style:solid;
	border-color:transparent #fff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* ESSENTIAL STYLES BELOW */

body {
	font-size: clamp(1.1em, calc(0.25em + 0.7vw), 1.6em);
	line-height: 1.30;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",	"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

main {
	font-weight: 300; 	width: 90vw; 	max-width: 80rem;
	margin: 0 auto; 	padding: 4em 0; 	 background-color: black;
}

main > * {
	margin: 0;
}
main > * + * {
	margin-top: 1em;
}

main img {
	width: 100%;
	height: auto;
}

.text-center {
	text-align: center;
}

a {outline : none;}
:link:focus, :visited:focus {outline: none;}

 a {
       text-decoration: none;
}

.vd18 {font-family: Verdana, Geneva, sans-serif; font-size:18px;  text-decoration:none; color: red;}
.vd17 {font-family: Verdana, Geneva, sans-serif; font-size:17px;  text-decoration:none;}
.vd16 {font-family: Verdana, Geneva, sans-serif; font-size:16px;  text-decoration:none;}
.vd15 {font-family: Verdana, Geneva, sans-serif; font-size:15px;  text-decoration:none;}
.vd14 {font-family: Verdana, Geneva, sans-serif; font-size:14px;  text-decoration:none;}
.vd13 {font-family: Verdana, Geneva, sans-serif; font-size:13px;  text-decoration:none;}

.sf18 {font-family: Lucida Bright, Georgia, serif; font-size:18px; text-decoration:none; color: red;}
.sf17 {font-family: Lucida Bright, Georgia, serif; font-size:17px; text-decoration:none; color: red;}
.sf16 {font-family: Lucida Bright, Georgia, serif; font-size:16px; text-decoration:none; color: red;}
.sf15 {font-family: Lucida Bright, Georgia, serif; font-size:15px; text-decoration:none; color: red;}
.sf14 {font-family: Lucida Bright, Georgia, serif; font-size:14px; text-decoration:none; color: red;}
.sf13 {font-family: Lucida Bright, Georgia, serif; font-size:13px; text-decoration:none; color: red;}
.sf12 {font-family: Lucida Bright, Georgia, serif; font-size:12px; text-decoration:none; color: red;}

@font-face {font-family: 'ArchitectsDaughter-Regular'; 
    src: url('ArchitectsDaughter-Regular.ttf');
    font-size:25px;  text-decoration:italic; color: darkgreen;}
    
@font-face {font-family: 'phitradesign Handwritten Thin'; 
    src: url('phitradesign Handwritten Thin.ttf');
    font-size:35px;  text-decoration:none; color: magenta;}    
    
   
   /*     INDEX.php   	overflow-y: auto;
	 scroll-behavior: smooth;    */

   
.whole {
	height: 100vh;  
	height: calc(var(--vh, 1vh) * 100);
	overflow: visible;
	overflow-x: hidden;
	/* amybe not these 2 
  min-width: calc(100vw - 350px);*/
 margin: 0 auto;  /* Center the element horizontally */
}  
   
header {
    height: 40px;
    background-color: lightgreen;
    padding: 0px 0;
   }

.siteHeader {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
   max-width: 320px; 
   height: 43px;

  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   
   .menu-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    height: 70px;
}


.menu-wrap > :nth-child(3) { margin-right: auto }


   */
  justify-content: space-between;
  padding: 7px;
  background-color: purple; /* sort of green #56727C; */
}
   


.sub-menu-1 {
    display: flex;
    max-width: 115px; 
    justify-content: space-between;
    background-color: lightyellow;
    height: 31px;
}

.sub-menu-2 {
    display: inline-block;
    background-color: transparent;
    height: 31px;
    width: 200px;
}

.logo-img {
    width: 30px;  height: 30px;
}
.menu-icon {
    font-size: 2.4em;
    color: #ffffff;
    line-height: 50px;
}

/* dropdown */

.dropdown{float:left; width:90%;overflow:hidden;}    

/* the anchor without hover */                                                                                                                /* font size */    
.dropdown .dropbtn{border:none;outline:none;color:yellow;padding:20px 16px; width:150px; margin-top:0px; background-color:pink;}

/* the anchor with hover */
.dropdown:hover .dropbtn { background-color: orange;   color: white; }
.dropdown-content{display:none;position:absolute;background-color:#000;width:150px;height:auto; box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}

/* the bit that drops down */
.dropdown-content a{float:none;color:padding:8px 10px;display:block;text-align:left;background-color:blue;color:white}
.dropdown-content a:hover{background-color:purple;color:#FFFFFF}


h1{
    line-height: 1.2;
    text-align: center;
    padding: 60px 40px 30px;
    color: #3D4852;
}
p{
    line-height: 1.6;
    text-align: center;
    padding: 0 40px;
    color: #3D4852;
}

/* buttons for penants2 */

.butnn-f {
	background-color:transparent; border: 0px solid blue; color:white; 	padding: 1px 3px 1px 3px; margin-top:0;
}

.butnn-f > img,
.butnn-f > span {
  vertical-align: middle;
}

.butnn-f:hover {   background: #3cb0fd; }

.butnn-cl {
	background-color:transparent; border: 0px solid blue; color:blue; direction:auto;	padding: 1px 3px 1px 3px; margin-top:0;
}

.butnn-cl > img,
.butnn-cl > span {
  vertical-align: middle;
}

.butnn-cl:hover {   background: #3cb0fd; }

/* ----------------------------------- */



.ordinary-sp { 	vertical-align: middle; }

.butnn-n { 	background-color:transparent; border: 0px solid blue; color:blue; }

.ft_group { text-align: right; min-width: 270px; }

.flg_group { display:inline-block; position:relative; width:23px; height:23px;  }

.langs {
    display:none; 
    direction:auto;
    min-width:200px;  /* changed - april 2021  text-align: left;  text-align: right; */
    padding-left:0px; 
    background-color: lightyellow; 
    height:220px;  /*height:110px;*/
    overflow:auto;
   }

.flg {
  display: flex;
  direction:auto;
  justify-content: center;
  text-align: center;
  background: transparent;   /*padding: 10px;   margin-bottom: 2.5rem; */
} 

  
/*  for slides in fixed.... August 2021 ============================================================ */

.fixed-width-5S{   /* width: 1200px;  height: 530px; */
    display: flex; height:600px;
    padding-left: 10px; 	border: 1px solid red;
	border-radius: 5px;	display: inline-block;   margin: 2px 2px; color: purple;
}

.fixed-width-5H{   /* width: 1200px;  height: 530px; */
    display: flex; height:600px;
    padding-left: 10px; 	border: 1px solid blue;
	border-radius: 5px; 	display: none;   margin: 2px 2px;	color: red;
}

.fixed-width-3{
  width: 340px; height: 350px;
  padding-left: 13px; border: 1px solid purple; border-radius: 5px; display: inline-block; margin: 5px 5px;
}
.fixed-width-333{
  position: relative; left:-10px; top: 20px; width: 325px;  height: 230px; 
  padding-left: 13px; border: 2px solid black;	border-radius: 5px;  /*  display: inline-block; display: block; */ 
  margin: 5px 5px;
}

.im-div-SH { position: absolute; width: 1280px; height: 780px; background-color:lightblue; display:flex; align-items: center; justify-content: center; border:1px solid black;  }

.im-div-HH { position: absolute; width: 1280px; height: 780px; background-color:lightblue; display:none; align-items: center; justify-content: center; border:1px solid black;  }

/* Buttons */

.butn {
  -webkit-border-radius: 1;
  -moz-border-radius: 1;
  border-radius: 1px;
  font-family: Verdana;   color: blue;   font-size: 14px;   background: #ffffff;
  padding: 4px 7px 4px 7px;   font-size:14px;font-family: Verdana, Geneva, sans-serif; text-decoration:none;
}

.butn:hover {
  background: #3cb0fd;    font-size:14px; font-family: Verdana, Geneva, sans-serif;  text-decoration:none;
}

.butnn-l {
    display: inline; 	background-color:transparent; border: 2px solid blue; color:blue; 
	padding: 4px 7px 4px 7px; font-size:14px; font-family: Verdana, Geneva, sans-serif;   text-decoration:none;
}

.butnn-l:hover {
  display: inline;   background: #3cb0fd;
  font-size:14px;font-family: Verdana, Geneva, sans-serif;  text-decoration:none;
}

.butnn-l-hide {
    display: none; 	background-color:transparent; border: 2px solid blue; color:blue; 
	padding: 4px 7px 4px 7px; font-size:14px; font-family: Verdana, Geneva, sans-serif;   text-decoration:none;
}

.butnn-l-hide:hover {
  display: none;   background: #3cb0fd;
  font-size:14px;font-family: Verdana, Geneva, sans-serif;  text-decoration:none;
}

.butnn-bk {
    display: inline;
    background-image: url("../../images/zz_icons/arrowR.png") no-repeat center;
	background-color:transparent; border: 2px solid blue; color:blue; 
	padding: 4px 7px 4px 7px; font-size:14px; font-family: Verdana, Geneva, sans-serif;   text-decoration:none;
}

 /* buttons */

 .bxtn {
    font-size: 1.8rem;     padding: 1rem 0;     width: 20rem;     text-align: center;
    border: 0.1rem solid #56a5eb;     margin-bottom: 1rem;     text-decoration: none;     color: #56a5eb;     background-color: white;
 }

 .bxtn:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
    transform: translateY(-0.1rem);     transition: transform 150ms;
 }

 .bxtn[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;

 }

 .mn_1 {
 display: inline-block;
 width: 2rem;  height: 1.9rem;
 text-align: center; border: 0rem solid #56a5eb;
 padding-top: 0.1rem;  margin-bottom: 0rem;  margin-left: 0.2rem;  margin-right: 0.2rem; 
 text-decoration: none; color: #56a5eb; background-color: white;
 } 
 
  .mn_2 {
 display: inline-block;
 width: 2rem;  height: 1.9rem;
 text-align: center; border: 0rem solid #56a5eb;
 padding-top: 0.1rem; margin-bottom: 0rem; margin-top: 0rem;  margin-left: 0.2rem;  margin-right: 0.2rem;
 text-decoration: none; color: #56a5eb; background-color: white;
 } 
 
  .mn_3 {
 display: inline-block;
 width: 2rem;  height: 1.9rem;
 text-align: center; border: 0rem solid #56a5eb;
 padding-top: 0.1rem; margin-bottom: 0rem;  margin-left: 0.2rem;  margin-right: 0.2rem;
 text-decoration: none; color: #56a5eb; background-color: white;
 } 
 
 .mn_0 {
 display: none;
 width: 2rem;  height: 1.9rem;
 text-align: center;
 border: 0rem solid #56a5eb;
 padding-top: 0.1rem; margin-bottom: 0rem;  margin-left: 0.2rem;  margin-right: 0.2rem;
 text-decoration: none; color: #56a5eb; background-color: white;
 }  
  
/* =========================================================================== */  

/*  for slide content - text process.php */

/* the overall container */

.task {  position:absolute;  left:1px;  top:1px;  width:300px; height:490px;          
         border:1px solid purple; background:hsl(104, 80%, 92%); color:transparent; 
         padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center;
}
  
/* the instructions */

.instructions { position:absolute;  left:5px;  top:10px;  width:290px; height:22px;  border-radius:5px; 
                border:0px solid purple;  background:lightgrey;  color:red;  padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center;
}


/* container for sounds and images */

/* $F_img_over = "<div id="."IMG_OVER_".$TASK_ID." class=\"unslid-0\">"; 
$NI = "<img src=".$iMMM." class=\"c_img\""." alt=\"The other\"".">";
// 6) image area and class 
$IMG_dv_0 = "<div id=".$IMG_ID." class=\"immmg\""." alt=\"The other\">".$NI.$E_dv; // .c_img {  width:90px; height:90px;  }
$ALL_IMG = $F_img_over.$SOUNDS_DIV.$IMG_dv_0.$E_dv; */

.unslid-0 { position: absolute; top:5px; left:5px; border-radius:5px; height: 100px;  width:170px; padding-left:0px; background-color:teal;
}

.immmg { position:absolute;   left:0px;  top:0px;  width:110px;  height:100px; 
 border:1px solid yellow;  background-color:orange; color:transparent; /* red background: hsl(0, 80%, 50%); hover  background:hsl(0, 80%, 40%); background:hsl(90, 10%, 32%); */
 border-radius:5px; padding-left:0px; padding-right:0px; padding-top:3px; margin-left:0px;  margin-right:0px; text-align: center;
}

/* sounds - part of image */

.soundZZ { display: inline-block; position:absolute;  left:120px;  top:10px;  width:40px;  height:80px; 
 border:1px solid blue;  background:pink; color:transparent;  border-radius:5px;  padding:5px;  margin-left:0px;  margin-right:0px; 
}

.sound1 { position:absolute;   left:0px; top:3px;  width:30px;  height:30px; 
 border:1px solid red;  background:lightgreen; color:transparent; border-radius:5px; padding-left:0px; padding-right:0px;  margin-left:5px;  margin-right:0px; text-align: center; /* red background: hsl(0, 80%, 50%); hover  background:hsl(0, 80%, 40%); */
}

.sound2 { position:absolute;   left:0px; top:40px;  width:30px;  height:30px; 
 border:1px solid black;  background:lightblue; color:transparent;  border-radius:5px;  padding-left:0px; padding-right:0px;  margin-left:5px;  margin-right:0px; text-align: center; /* red background: hsl(0, 80%, 50%); hover  background:hsl(0, 80%, 40%); */
}  

/* container for buttons and countings */

/* overall container */

/* $SEECT_ID="SEECT_".$iiDD;
$F_SEE_CT = "<div id=".$SEECT_ID." dir=\"auto\" class=\"seect\">".$ALL_IMG.$F_buttons_plus.$E_dv; */

.seect { position:absolute; display: inline-block; direction: auto;  border-radius:5px; border:1px solid blue; background:lightyellow;  color:blue;
            left:5px; top:40px; width:290px;  height:110px;  padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center; overflow:hidden;
} 

/* the div which has both counters and buttons - for this slide */

/* $F_buttons_bbb = "<div id="."BBB_".$TASK_ID." class=\"unslid-1\">"; 
$F_buttons_plus = $F_buttons_bbb.$F_actions_0.$CTX_dv_0.$E_dv; */

.unslid-1 { position: absolute; top:5px; left:190px;  height: 100px;  width:100px; padding-left:0px; background-color:magenta;
}

/* these 3 are the bits for the counting/total for each slide */

.monitors  { position: absolute;   padding: 5px; left:5px; top:10px; width:94px; height:35px;   
  background-color: cyan;   color: #fff;   border-radius: 5px;  text-align: center;  margin: 0 0px; 
}

.total { position:absolute; display:inline; border:2px solid red; left:40px; top:5px; width:25px; height:25px; 
background-color:lightgrey; color:black; padding-top:1px; padding-left:0px; text-align:center; overflow:hidden;
}

.count { position:absolute; display:inline; border:2px solid red; left:15px; top:5px; width:25px; height:25px; 
background-color:lightgrey; color:black; padding-top:1px; padding-left:0px; text-align:center; overflow:hidden;
}

/* these 2 are the buttons for each slide ----  position: absolute; */

/* display: flex; flex-wrap: wrap;  width:100%; height: 600px; background: #a0d6b4; border:1px solid #40826d; overflow: scroll;  
.unslid-2 { display: flex; flex-wrap: wrap; top:60px; left:5px; height: 35px;  width:90px; padding-left:0px; background-color:green;
} */
.unslid-2 {  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 60px;
  left: 5px;
  height: 35px;
  width: 90px;
  padding-left: 0px;
  background-color: green;
  /* Add these properties for centering */
  justify-content: center; /* Centers items horizontally */
  align-items: center; /* Centers items vertically */
  }
/* the buttons */

.redo { position:absolute;  
 left:20px;  top:5px;  width:25px;  height:25px;  border:1px solid blue;  background:hsl(190, 80%, 92%); color:transparent; border-radius:5px; padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center;
}

.reshuffle { position:absolute;  
 left:50px;  top:5px;  width:25px;  height:25px;  border:1px solid blue;  background:hsl(190, 80%, 92%); color:transparent;   border-radius:5px; padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center;
}

.checko { position:absolute;  
 left:215px;  top:5px;  width:25px;  height:25px;  border:1px solid blue;  background:hsl(190, 80%, 92%); color:transparent; border-radius:5px; padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center;
}


/* THIS IS THE BIT WITH ALL THE DRAGGABLES IN */
.sim-div-SH { 
    position:absolute; left:2px;  top:160px; width:293px; height: 195px; border:1px solid black; 
    background:white; color: black; border-radius:5px; padding-left:0px; padding-right:0px; margin-left:1px; margin-right:0px; text-align: center;
}

/* THIS IS THE BIT WITH the input field IN */
.input-SH { 
    position:absolute; left:2px;  top:130px; width:293px; height: 45px; border:1px solid black; 
    background:lightgrey; color: blue; border-radius:5px; padding-left:0px; padding-right:0px; margin-left:1px; margin-right:0px; text-align: center;
}

/* history of actions */
.history { position:absolute; display: none;  border:1px solid blue;            background:yellow;    color:blue; left:120px;            top:320px; width:140px;            height:25px; 
           padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center; overflow:scroll;
 }


/* feedback on individual actions */

.vvbx { display:inline; width:auto; border:0px solid blue; background:lightgrey; color:black; padding-left:0px; padding-right:0px; margin-left:0px; margin-right:0px; text-align: center; }
.vvbxa { display:none; position:relative; left:5px; width:auto; border:0px solid blue; background:transparent; color:black; padding-left:0px; padding-right:0px; margin-left:50px; margin-right:10px; text-align: center; }

.feedback { position:absolute; direction: auto; left:2px;  top:370px;  width:293px;  height:110px; border:1px solid yellow;  
background:lightblue;  color:red;  border-radius:5px;  padding-left:0px; padding-right:0px;  margin-left:1px;  margin-right:0px; text-align: center; overflow:scroll;
}
  
.feebk { display: inline; direction: auto;  left:1px;  top:10px;  width:220px;  height:100px; 
 border:0px solid red;  background:lightyellow;  color:black;  border-radius:5px; padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center; overflow:scroll;
}

.cfeed1 { display:inline; width:auto; border:0px solid blue; background:lightgrey; color:black; 
  padding: 3px; margin-left:0px; margin-right:0px; text-align: center;
}
 
.hint_0 { position:absolute; 
           display: none;            border:1px solid blue;  background:yellow;   color:blue; 
           left:10px;  top:380px; width:260px;    height:100px; 
           padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center; overflow:hidden;
 } 
   
.hint_1 { position:absolute; 
           display: block;           border:1px solid blue;            background:yellow;   color:blue; 
           left:10px;            top:380px; width:260px;            height:100px; 
           padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center; overflow:hidden;
 }  
 
.hint_2 { position:absolute; display: block;          border:1px solid blue; background:lightyellow;  color:blue;
            left:180px; top:180px; width:260px;  height:100px;  padding-left:0px; padding-right:0px;  margin-left:0px;  margin-right:0px; text-align: center; overflow:hidden;
 } 
 
 


/*  August 2023 */

.modalOverlay {
  position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index:500; /* Ensure it's above other content */
  display: none; /* Hide by default */
}

.dialogContainer {
  position: fixed;   top: 50%;  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;   padding: 20px;   border-radius: 5px;
  z-index: 1001; /* Ensure it's above the overlay */
  display: none; /* Hide by default */
}


/*  June 2023 */

.modal {
    position: relative;     display: block;    top: 70%;    /*  padding-inline: 10px 10px;     padding-block: 30px 20px;     margin-inline: auto; */
    border-radius: 8px;    background-color: lightyellow;    z-index: 600;
    width: 150px;    min-height: 150px;     display: none;
    max-height: 80%;     box-sizing: border-box;
}

.modal-js-overlay-0 {
    background: #444;     opacity: .2;    position: fixed;
    border:2px solid blue;  left: 0px; top: 100px;    width: 100%;    height: 300px;
}

.modal-js-overlay-1 {
    background: #444;    opacity: .2;    position: fixed;
    border:2px solid blue;   left: 0px; top: 590px;    width: 100%;    height: 70px;
     z-index: 60000;
}

.modal-js-close {
    position: absolute;     display: block;
    bottom: 0px;     right: 0px;  height: 20px; width: 20px;  top: -10px;    right: -10px;
    background: black;     color: white;    border-radius: 50%;  
    text-align: center;     padding: 1px;
    box-shadow: var(--box-shadow);     cursor: pointer;     font-size: 12px;     font-weight: bold;
}

 

/*  for moves etc */

.mfixed-width-3{
  position: relative; display:block; width:330px; height: 330px; top:5px; left:-11px;  padding:5px; border: 1px solid blue; border-radius: 5px; color:transparent;
}

@media (max-width: 1250px) and (min-width: 768px) { 
.mfixed-width-3{
  position: relative; display:block; width:300px; height: 330px; top:5px; left:-11px;  padding:5px; border: 1px solid blue; border-radius: 5px;color:transparent;
}
}

.draggable {
 cursor: move;
  width: 140px;
  height: 140px;
  background: #F90;
  border-radius: 0px;
}
.draggable.is-pointer-down {
  background: #09F;
}
.draggable.is-dragging { opacity: 0.7; }


/* scroll bar */

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue lightblue;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: lightblue;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid lightblue;
}


/* hubs.php */


.hubs { display: flex; flex-wrap: wrap;  width:100%; height: 600px; background: #a0d6b4; border:1px solid #40826d; overflow: scroll;}

.item {
  display: flex;   flex: 1 0 300px;  height: auto;  box-sizing: border-box;  background: lightgrey;  color: blue;
  padding: 10px;  margin-left: 10px; margin-right: 10px;  margin-top: 10px;
  align-items: center; justify-content: center;  border-radius:15px;  border:2px solid red;
}


.one-img {    /*flex: 0 0 50%;  top: 5px; height: 90px; width: 100px; */   /*display : inline-flex; */
  position:relative; height: 100px; width:200px; top:0; left: 0;  background: lightyellow;  
  padding: 6px;  margin-left: 10px;  margin-top: -10px;  border-radius:15px;  border:1px solid red;
}

.one-text {   /*flex: 1 0 50%;  top: 5px; height: 90px; width: 100px; */
  display : inline-flex;  height: 120px; width: 210px;  background: lightyellow;
  padding: 8px;  margin-left: 10px;   border-radius:5px;  border:1px solid blue;
   overflow-y: auto;   overflow-x: hidden;
}

.one-hub {
  display: none;  position:absolute; top: 10px; height: 700px; width:100%;
  background: white;  padding: 10px;  margin-left: 10px; margin-right: 10px;  margin-top: 10px;  border-radius:15px;  border:4px solid red;
} 

.one-hub-show {
  display: block;  position: absolute; width:100%; top: 70px; height: 700px; 
  background: transparent;  padding: 10px;  margin-left: 10px; margin-right: 10px;  margin-top: 10px;  border-radius:15px;  border:3px solid black;
}

/* nov 2022 */

.item-outer {
  display: flex;   flex: 1 0 309px;  height: 560px;  box-sizing: border-box;  background: yellow;  color: black;
  padding: 1px;  margin-left: 1px; margin-right: 1px;  margin-top: 5px;
  align-items: center; justify-content: left;  border-radius:15px;  border:1px solid purple;
}

.item-inner {
 position: relative;  /* NEED */ 
  display:block; width:305px; height: 555px; top:2px; left:2px;  padding:5px; border: 1px solid green; border-radius: 5px; color:transparent; overflow: hidden;
}

/* images */

.img ri{
        width: 100%;
        height: auto;
      }

.c_img {
width:90px; height:90px;
}

.xc_img {
width:20px; height:20px;
}

.c_img_20 {
width:20px; height:20px;
}

.c_img_40 {
width:40px; height:40px;
}

/* input */
.cinpt {  display:inline-block; border: solid blue 1px;  padding:3px; width:85%; margin-top:1px; height:28px; }
.cinpt:focus { display:inline-block; border: solid red 1px;  padding:3px; width: 85%; margin-top:1px; height:28px; }

/*  mc stuff */
/* outer div */

.mc-div-SH { position:absolute; display:inline-block; border:1px solid black; 
             left:3px; top:3px; width:290px; height:225px; background-color:white; color:black; padding-top:1px; padding-left:5px; text-align:left; overflow:hidden; }

.mc1-div-SH { position:absolute; display:inline-block; border:1px solid red; left:5px; width:280px; height:25px; background-color:lightyellow; color:black; padding-top:1px; padding-left:5px; text-align:left; overflow:hidden; }

/*   single slider */


/*  for slides in fixed.... Jan 2023 */

.o-fixed-width-5S{   display: flex;     align-items: center;    justify-content: center;    flex-direction: column;
     width: 370px;  height: 600px;     padding-left: 3px;	border: 0px solid red;
	border-radius: 5px;	margin: 2px 2px;   transition: all 0.5s ease;
}

.o-fixed-width-5H{     display: none;   width: 370px;  height: 600px;     align-items: center; justify-content: center; flex-direction: column; 
    padding-left: 3px;	border: 0px solid blue;	border-radius: 5px; 	  		margin: 2px 2px;	  transition: all 0.5s ease; 
}

.o-im-div-SH { position: absolute;  width: 370px;  height: 400px; background-color:lightblue; align-items: center; justify-content: center;   transition: all 0.5s ease; border: 1px solid black;  }

.o-im-div-HH { position: absolute;  width: 370px;  height: 400px;  background-color:lightblue; display:none; align-items: center; justify-content: center; transition: all 0.5s ease; border:1px solid black;  }

.fixed-width-3{
   width: 370px;  height: 470px;    padding-left: 3px; border: 0px solid blue; border-radius: 5px; display: inline-block; margin: 5px 5px;
}

.o-fixed-width-333{
  position: relative; left:-10px; top: 250px; width: 325px;  height: 230px;   padding-left: 3px; border: 0px solid black;	border-radius: 5px;    margin: 5px 5px;
}

/* The slide next/previous controller  */

.slid-1 { display: flex; position: absolute; top:500px; justify-content: space-between; height: 35px;  width:95%; padding-left:10px; background-color:red; }

/* Style for Child Items */

.other-sl {
  padding: 5px; /* Add padding for spacing inside the child items */
  background-color: transparent; /* Set a background color */
  color: #fff; /* Set text color */
  border-radius: 5px; /* Add rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
  text-align: center; /* Center the text horizontally */
  margin: 0 0px; /* Add margin for spacing between child items */
}
.sl-item {
  padding: 5px; /* Add padding for spacing inside the child items */
  background-color: #3498db; /* Set a background color */
  color: #fff; /* Set text color */
  border-radius: 5px; /* Add rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
  text-align: center; /* Center the text horizontally */
 /* flex: 1; Allow child items to grow and fill available space equally */
  margin: 0 5px; /* Add margin for spacing between child items */
}

/* Optional Hover Effect */
.sl-item:hover {
  background-color: #297fb8; /* Darken the background color on hover */
}

.slid-a {
display: flex; justify-content: left; background-color:lightblue;
}

.slid-b {
display: flex; width:auto; justify-content: left; background-color:lightgrey;
}

.slid-c {
display: flex; width:auto; justify-content: left; background-color:black;
}

/* NOV 2024  - for moveable divs */

.statics { position: absolute;  
width: 270px;  height: 60px;  background-color:lightblue; 
display:inline-block; align-items: center; transition: all 0.5s ease; border:1px solid black;  }

.movedvs {
      display: flex;       position: relative;
      flex-direction: column;
      gap: 5px;
      max-width: 220px;       margin: 0 auto;
      left: 30px;       top: 130px;
      height: 100px;  background-color:lightgrey;
    }
    
    .row {
      flex: 1;
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: nowrap;
      overflow-x: auto;
      
      /* Optional: Hide scrollbar */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    
    .row::-webkit-scrollbar {
      display: none;
    }
    
    /* Script will add .empty class to hide empty row */
    .row.empty {
      display: none;
    }

	
/* funny grid -- only used in footer */

.dgrid {    --min: 30ch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
  gap: 1rem;
  overflow: default;
}

.gridI{
  /* orig display: sticky; */
  display: none;
  top:100px;
  place-items:center;
   overflow-y: auto;
}

.xgridI{
  position: sticky;

}