@charset "UTF-8";
/* CSS Document */

/*
	File: style.css
	Purpose: to style AHT applications
	Author: David Whimpey
	Date Created: 14/03/2021
	Last updated: 30/04/2022
*/

/*
    Theme
        Blue:       #0036D9
        Pink:       #D900A3
        Mustard:    #D9A300
        Green:      #00D936

        Teal:       #036596
        Light Blue: #00A3D9
*/

@font-face {
    font-family: 'vicregular';
    src: url('../fonts/vic-webfont.woff2') format('woff2'),
         url('../fonts/vic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

HTML {
	margin: 0;
	overflow:scroll;
	border: none;
}

body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #EEE;
	padding-left:0%;
	padding-right:0%;
	min-width:960px; /*1028*/
	max-width:960px; /*1028*/
	min-width:1028px;
	max-width:1028px;
	min-height:100vh;
	margin: 0 auto;
}

.bodyFlex{
	display: flex;
	flex-direction: column;
}

header{
	/*background-color: #00A3D9;	
	border: thin solid #EEE;*/
	border-radius: 5px;
	padding: 5px 5px 5px 5px;
}

main{
	flex-grow:1;
}

#loading {
	position: fixed;
	width: 1028px;
	height: 100vh;
	background: white;
	color: #036596;
	z-index: 9999;
	text-align: center;
	padding-top: 100px;
	font-size: 24px;
}

/*#container{
	background-color: #6A94D4;
}*/

h1{
	color: #FFF;
	text-align: left;
	margin: 0px;
	/*margin: 20px 0px 0px 0px;*/
	padding: 10px;
}

h2, h3{
	color: #036596;	
}

h4, .pink{
	color: #D900A3;
	margin-top: 10px;
	margin-bottom: 5px;
}

p, ol, li, ul, span{
	font-family: Arial, Garamond, sans-serif;
	font-weight:normal;
	font-style:normal;
	color: #666;	
	font-size:medium;
}

.lineH{
	line-height:1.7em;
}

.lineH_25{
	line-height:2.5em;
}

.verticalTextLR{
	writing-mode: vertical-lr;
}

/*span[name="practiceResultSubsection"]:hover, span[name="resultSubsection"]:hover{
	color: #FFF;
	background-color: #036596;
}*/

.inline{
	display: inline-block; /* inline */
	width:auto;
}

.vicFont{
	font-family: 'vicregular', Arial, sans-serif;
}

.arial{
	font-family: Arial, sans-serif;
}

.times{
	font-family: 'Times New Roman', Times, serif
}

form{
	width: 100%;
}

fieldset{
	border:0;
}

label{
	width: 80%;
	display: block;
	float:left;
	padding: 0px 5px 0px 5px;
	margin: 0px 0px 0px 5px;
	color: #036596; /*#666; #999*/
	font-size:90%;
}

section{
	margin: 5px 0px;
	/*margin: 10px 0px 0px 0px; --check in RAPT AND soundSaavy*/
	padding: 10px;
	background-color: #FFF;	
	border-radius: 4px;
}

aside{
	margin: 0 auto; 
	width:60%; /*40% AHTic*/
	border: 2px solid  #036596;
	border-radius: 8px;
	color: #036596;
	background-color: #FFF;
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 20px;
}

.hideAside{
    display:none;
}

.displayAside:hover + .hideAside{
    display:block;
}

summary{
    background-color: #CCC;
    width: 46%;
    margin: 1%;
    padding: 1%;
    color: #333;
	cursor: pointer;
}

article{
    display: inline-block;
    margin: 1%;
    padding: 2%;
    background-color: #FFF;
}

.label{
	display:inline-block;
	/*width: 40%;	used in RAPT
	padding-left:20px;*/
	color: #036596; /*#999;*/
	font-size:90%;
}

.labelCheckbox{
	width:30%;	
}

.checkbox label {
	display: inline;
	padding-right: 10px;
	white-space: nowrap;
	width:auto;
}

.checkbox input {
	vertical-align: middle;
}

.checkbox label span {
	vertical-align: middle;
}

input, select, textarea, option{
	margin: 0px 0px 0px 10px;
	padding:0px 0px 0px 5px;
	line-height: 18px;
	min-height:18px;
	font-size:medium;
	width: 96%;
	color:#666;
	box-sizing: border-box;
}

textarea{
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	height:36px;
	/*width:100px; //where is this required? Sentence Booster activities- but impact RAPT...
	max-width: 200px;
	min-width: 100px;*/
	resize: none;
	background-color:#FFF;
	/*border: 1px solid rgba(0, 0, 0, 0.2);*/
	border:thin solid #CCC;
	overflow-y:hidden;
	overflow-x:hidden;
}

.taWidth{
	width:68px;
	max-width: 200px;
	min-width: 68px;
}

.taWidth1{
	width:100px;
	max-width: 200px;
	min-width: 100px;
}

input[type=radio] {
	display: inline-block;
	height:18px;
	color: #666;
}

input[type=checkbox] {
	/*display: block;*/
	width:auto;
	height:18px;
	margin-right:5px;
	color: #666;
}

/*.letterCard{
	padding: 0px 10px;
	margin-right: 10px;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0px 0px 25px #D9A300;
	border-width: 4px;   
}*/

.card{
	position: absolute;
	width: 100px;
	height: 100px;
	margin:100px 10px 10px 10px;;
	transition: transform 0.8s;
  	transform-style: preserve-3d;
}

.cardFlip{
	transition: all 1s ease;
	transform:rotateY(180deg);
}

.cardFlip-active{
	transform:rotateY(360deg);
}

.fixedTL{
	position: fixed;
	top: 50%;
	left: 0%;
	/* bring your own prefixes */
	transform: translate(2%, -50%);
	z-index:21;
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
	z-index:21;
}

.top{
    position: relative;
    z-index: 20;
}

.word{
    background-color: #FFF;
	width:105px;
	height:20px;
	margin:-5px 0px 0px 0px;
	padding:0px;
}

.posRel{
	position: relative;
}

.textOverImage{
	position: absolute;
	bottom: 8px;
	left: 36%;
	/*transform: translate(-50%, -50%);*/
}

.medium{
	font-size: large;
}

.large{
    font-size: x-large;
}

.larger{
	font-size: 6em;
}

.largest{
	font-size: 12em;
}

.small{
    font-size:medium;
}

.font60{
	font-size: 60%;
}

.font80{
	font-size: 80%;	
}

.font100{
	font-size: 100%;
}

.font120{
	font-size: 120%;
}

.font150{
    font-size: 150%;   
}

.font2em{
    font-size: 2em;   
}

.font3em{
    font-size: 3em;   
}

.font4em{
    font-size: 4em;   
}

.font5em{
    font-size: 5em;   
}

.font6em{
    font-size: 6em;   
}

.font7em{
    font-size: 7em;
}

.font8em{
    font-size: 8em;   
}

img{
	/*margin: auto;*/
	padding: 0px;
}

hr{
	margin: 0%;
	padding:0px;
}

table{
    /*position: relative;
    float:left;*/
    display:inline-table;
	padding:0px;
    /*width:63%;*/
	margin: 0%;
	/*margin-left: 80px;*/
	color: #666;
}

td{
	width: 105px;
	height: 125px;
	margin:0px;
	padding:0px;
	background-size: 100%;
	background-repeat: no-repeat;
	/*background-position-x: center;*/
    text-align: center;
    vertical-align: bottom;
}

.table{
	width: 80%;
	margin: 10px 20px 10px 20px;
	padding: 5px 5px 5px 5px;
	color: #232f5f;
	table-layout: fixed;
	border-collapse:collapse;
}

th{
	text-align:left;
	vertical-align: top;	
}

tr{
	padding: 5px;	
	/*margin: 5px;*/
	vertical-align: top;
}

.td{
	width:33%;	
	vertical-align: top;
	text-align:left;
	height:auto;
	/*white-space:pre;
	word-wrap:break-word*/;
}

.hiddenBorder{
	border-collapse: collapse;
	border-style: hidden;
}

.results td{
	height:auto;
}

.articResultsEmpty td{
	height:5px;
}

.articResults td{
	height:20px;
	padding:5px 0px 5px 10px;
	text-align: left;
	color:#036596;
}

.articResults th{
	color:#036596;
}

.innerBorder{
	border-collapse: collapse;
	border-style: none;
}

.innerBorder td{
	border: 5px solid #0036D9;
}

.innerBorder tr td:first-child, .innerBorder th td:first-child{
	border-left:none;
}

.innerBorder tr td:last-child{
	border-right:none;
}

.innerBorder tr:first-child td{
	border-top:none;
}

.innerBorder tr:last-child td{
	border-bottom:none;
}

.rBackground:nth-child(4n+3), .rBackground:nth-child(4n+4){
	background-color: #CCC;
}

.rBackground:nth-child(4n+1),.rBackground:nth-child(4n+2),.nrBackground:nth-child(even){
	background-color: #FFF;
}

.nrBackground:nth-child(odd){
	background-color: #FFFACD;
}


.button, .button3{
	font-family: Arial, Garamond, sans-serif;
	text-decoration: none;
	font-size: 100%;
	/*font-size:90%;*/
	border-radius:5px;
    background-color: #036596;
    color: #FFF;
    padding: 3px 10px 3px 10px;
	border: thin solid #036596;
	text-align: center;
	/*margin-left: 1%;*/
}

.button3{
	cursor: pointer;
}

.button1{
	font-family: Arial, Garamond, sans-serif;
    text-decoration: none;	
	font-size: 100%;
	border-radius:5px;
    background-color: #036596;
    color: #FFF;
    padding: 5px 10px 5px 0px;
	border: 2px solid #FFF;
	text-align: center;
	width: auto;
	margin: 5px 0px 5px 10px;
	cursor: pointer;
}

.button2{
	font-family: Arial, Garamond, sans-serif;
    text-decoration: none;	
	font-size: 100%;
	border-radius:5px;
    background-color: #FFF;
    color: #036596;
    padding: 5px 10px 5px 0px;
	border: 2px solid #036596;
	text-align: center;
	width: auto;
	margin: 5px 0px 5px 10px;
	cursor: pointer;
}

.buttonGreen, .buttonOrange, .buttonTargetSound, .buttonSubstitution, .buttonKeyboard {
	display:inline-block;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 100%;*/
	text-align:center;
    text-decoration: none;
	vertical-align: middle;
	margin: 0px 0px 10px 13px;
	padding: 2px 20px 6px 20px;
	width: auto;
	font-size:160%;
	color:#FFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius:4px;
}

.buttonTargetSound, .buttonSubstitution{
	width: 60px;
	padding: 2px 0px 6px 0px;
	vertical-align: middle;
}

.buttonKeyboard{
	width: 55px;
	padding: 2px 0px 6px 0px;
	margin:0;
}

/*.buttonSubstitution, .buttonKeyboard{
	background-color:#FFF;
	color: #666;
}*/

.buttonGreen{
	vertical-align: middle;
	border: 1px solid #00d936;	
	padding: 8px 0px 2px 5px;
}

.buttonOrange{
	vertical-align: middle;
	border: 1px solid #d94500;
	padding: 8px 0px 2px 5px;
}

/* AHTic
.button{
	padding: 1px 10px 1px 10px;
	width: auto;
	font-size:80%;
	color:#565399;
	background-color:#56539940;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius:4px;
	text-align: center;
}*/

.button:hover{
	background-color: #FFF;	
	color: #036596;
}

.button:hover .hyper1{
    color: #036596;
	/*background-color:#565399;*/
}

.button1:hover, .button2:hover{
	border: 2px solid #99e6ff;
}

.button3:hover{
	background-color: #00A3D9;
}

.button:active {
	color:#d9b100;
}

.imgBar{
	margin: 0px 10px 0px 10px;
}

/* RAPT
.button:hover{
	cursor: pointer;
} */


.reverseButton{
	font-family: Arial, Garamond, sans-serif;
	font-size: 100%;
    text-decoration: none;
	border-radius:5px;
    color: #036596;
    background-color: #FFF;
    padding: 3px 10px 3px 10px;
	border: thin solid #036596;
	/*margin-left: 1%;*/
}

.reverseButton:hover{
	color: #FFF;
    background-color: #036596;
	cursor: pointer;
}

.icon{
	border: 1px solid transparent;
	border-radius: 5px;
	padding: 10px 0px 1px 0px;
}

.icon:hover{
	background-color: #036596;
}

.wideA{
	width: auto;
}

.wide25p{
	width:25px;	
	height:25px;
}

.wide30p{
	width:30px;	
	height:30px;
}

.wide61p{
	width:61px;
}

.wide64p{
    width: 64px;
}

/*
.wide67p{
	width:67px;
}*/

.wide68p{
	width:68px;	
}

.wide80p{
	width:80px;
	height:80px;
}

.wide84p{
	width:84px;
	height:84px;
}

.wide90p{
    width:90px;
}

.wide96p{
    width:96px;
}

.wide100p{
    width:100px;
}

.wide110p{
    width:110px;
}

.wide175p{
    width:170px;
}

.wide240p{
    width:240px;
}

.wide275p{
    width:275px;
}

.wide315p{
    width:315px;
}

.wide480p{
    width:480px;
}

.wide520p{
    width:520px;
}

.wide780p{
	width:780px;
}

.wide800p{
	width:800px;
}

/*
.wide101{
	width: 96%;	
}*/

.wide105p{
    width:105px;
}

.height5p{
	height:5px;
}

.height25p{
	height:25px;
}

.height40p{
	height:40px;
}

.height50p{
	height:50px;
}

.height61p{
	height:61px;
}

.height67p{
	height:67px;
}

.height90p{
	height:90px;
}

.height100p{
	height:100px;
}

.height105p{
	height:105px;
}

.height120p{
	height:120px;
}

.height125p{
	height:125px;
}

.height140p{
	height:140px;
}

.height150p{
	height:150px;
}

.height160p{
	height:155px;
}

.height180p{
	height:180px;
}

.height200p{
	height:200px;
}

.height245p{
	height:250px;
}

.height285p{
	height:285px;
}

.height500p{
	max-height:500px;
	overflow-y: auto;
}

.height601p{
	height:600px;
	overflow-y: auto;
}

.height600p{
	max-height:600px;
	overflow-y: auto;
}

.height480p{
	min-height:480px;
}

.height625p{
	min-height:625px;
}

.height800p{
	min-height:800px;
}

.heightVH75{
	min-height:75vh;
}

.heightVH50max{
	max-height:50vh;
}

.wide1{
    width: 1%;
}

.wide8{
    width: 8%;
}

.wide10{
	width: 10%;
}

.wide12{
	width: 12%;
}

.wide13{
	width: 13%;
}

.wide15{
	width: 15%;
}

.wide1em{
	width: 1.0em;
}

.wide1_5em{
	width: 1.5em;
}

.height12{
	height: 1.2em;
}

.height14{
	height: 1.55em;
}

.wide18{
	width: 17%;
}

.wide20{
	width: 20%;
}

.wide25{
	width: 25%;
}

.wide28{
	width: 28%;
}

.maxWide25{
	max-width: 25%;
}

.maxWide28{
	max-width: 28%;
	min-width: 15%;
}

.wide30{
	width: 30%;
}

.wide31{
	width: 31.1%;
}

.wide30mw{
	width: 30%;
	min-width: 450px;
}

.wide32{
	width: 32.5%;
}

.wide38{
	width: 38%;
}

.wide40{
    width: 40%;
}

.wide40mw{
	width: 40%;
	min-width: 550px;
}

.wide45{
    width: 45%; /*46%*/
}

.wide50{
	width: 49%;	
}

.wide55{
	width: 55%;	
}

.wide60{
	width: 60%;
}

.wide63{
	width: 63%;	
}

.wide80{
	width: 80%;	
}

.wide90{
	width: 90%;	
}

.wide95{
	width: 95%;	
}

.wide97{
	width: 97%;	
}

.wide100{
	width: 100%;	
}

.wide200{
    width: 200px;
}

.ib{
    display: inline-block;
}

.bl{
    display: block;
}

.vat{
	vertical-align: top;
}

.vab{
	vertical-align: bottom;
}

.vam{
	vertical-align: middle;
}

.col2{
	column-count: 2;
	column-gap: 10px;
  	column-rule: 2px solid #036596;
}

.col3{
	column-count: 3;
	column-gap: 10px;
  	column-rule: 2px solid #036596;
}

.flexContainer{
	display:flex;
}

.flexItem{
	flex-grow: 1;
	min-width: 15%;
	max-width: 20%;
}

.flexClassItem1{
	flex-grow: 1;
	min-width: 40%;
	max-width: 60%;
}

.flexItem-right{
	flex-grow: 3;
	max-width: 58%;
}
/*
.flexItem + .flexItem{
	margin-left: 2%;
}*/

.flexAC{
	align-items: center;
}

.flex{
    display: flex;
	flex-flow: row wrap;
	align-items:flex-start;
	align-items: center;
	gap: 5px;
}

.flex1{
    display: flex;
	min-height:480px;
}

.flexCol{
	flex-flow: column nowrap;
	align-items: flex-start;
}

.flexStretch{
	align-items:stretch;
}

.flexEnd{
	justify-content:flex-end;
}

.flexCenter{
	justify-content:center;
}

.task-content{
	flex: 3;
	/*padding: 10px;*/
}

.participant-list{
	display: grid;
	word-wrap: break-word;
	word-break: break-all;
}

.grid-one-column{
	grid-template-columns: 1fr; /* One column for fewer than 10 students */
}

.grid-two-column{
	grid-template-columns: repeat(2, 1fr); /* Two columns */
}

.marginCol{
	margin: 0px 5px 10px 5px
}

.marginA{
	margin:auto;	
}

.margin0{
	margin:0px;	
}

.margin3{
	margin: 3px;	
}

.margin5{
	margin: 5px;	
}

.margin10{
	margin: 10px;
}

.margin10L{
    margin-left:10px;
}

.margin10R{
    margin-right:10px;
}

.marginTB5{
	margin: 5px 0px;	
}

.marginTB20{
	margin: 20px 0px;	
}

.marginT5{
	margin-top: 5px;
}

.marginT7{
	margin: 7px 0px;
}

.marginT10{
	margin-top: 10px;	
}

.marginT20{
	margin-top: 20px;	
}

.marginT35{
	margin-top: 35px;
}

.marginT55{
	margin-top: 55px;
}

.marginT67{
	margin-top: 67px;
}

.marginT70{
	margin-top: 70px;
}

.marginL2{
	margin-left: 2px;	
}

.marginL4{
	margin-left: 4px;	
}

.marginL9{
	margin-left: 8px;	
}

.marginL10{
	margin-left: 10px;	
}

.marginL20{
	margin-left: 20px;	
}

.marginL100{
	margin-left: 100px;
}

.marginLR100{
	margin: 0px 100px;
}

.marginL240{
	margin-left: 200px;
}

.marginR10{
	margin-right: 10px;	
}

.marginR8{
	margin-right: 8px;	
}

.marginLR5{
	margin: 0px 5px 0px 5px;
}

.marginLR9{
	margin: 0px 9px 0px 9px;
}

.marginLR10{
	margin: 0px 10px 0px 10px;
}

.marginB5{
	margin-bottom: 5px;	
}

.marginB15{
	margin-bottom: 15px;	
}

.margin20{
	margin: 20px;
}

.marginL2p{
    margin-left:2%;
}

.padding0{
    padding: 0px;
}

.padding5{
    padding: 5px;
}

.padding10{
    padding: 10px;
}

/*.padding10{
    padding: 1%;
}*/

.padding20{
    padding: 7% 2%;
}

.padding20R{
    padding-right: 20px;
}

.paddingCueAudio{
	padding: 50px 10px 25px 10px;
}

.paddingAudio{
	padding: 0px 10px;
}

.paddingArrow{
	padding: 45px 10px;
}

.padding20A{
    padding: 5% 2%;
}

.paddingB5{
	padding-bottom: 5px;
}

.paddingB10{
	padding-bottom: 10px;
}

.paddingB20{
	padding-bottom: 20px;
}

.paddingTB5{
    padding: 5px 0px;
}

.paddingTB10{
    padding: 10px 0px;
}

.paddingTB20{
    padding:20px 0px;
}

.paddingT7{
	padding-top:7px;
}

.paddingT10{
	padding-top:10px;
}

.paddingT15{
	padding-top:15px;
}

.paddingL10{
    padding-left: 10px;
}

.paddingL20{
	padding-left:20px;
}

.paddingR10{
    padding-right: 10px;
}

.paddingR20{
	padding-right:20px;
}

.paddingLR5{
	padding: 0px 5px;
}

.paddingLR8{
	padding: 0px 5px;
}

.paddingLR10{
	padding: 0px 10px;
}

.paddingTB5LR10{
	padding: 5px 10px;
}

.white{
    color: #FFF;
}

.grey{
	color: #CCC;
}

.grey1{
	color:#666;	
}

.red{
	color: red;
}

.yellow{
	color: #FFFACD;
}

.strike {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

.blue{
	color:#0036D9;
}

.teal{
	color: #036596;
}

.lblue{
	color: #00A3D9;
}

.green{
	color: #00D936;
}

.mustard{
	color:#D9A300;
}

.pointer1, .pointer2 {
    cursor: pointer;
}

.tshadow, .pointer1:hover{
	text-shadow: 0px 0px 5px #D900A3, 0px 0px 10px #D9A300;
}

.pointer2:hover{
	box-shadow: 0px 0px 25px #D9A300;
}

.hoverYellow:hover{
	background-color: #FFFACD;
}

.hoverWhite:hover{
	color:#036596;
	background-color: #FFF;
}

.hoverTeal:hover{
	color: #FFF;
	background-color:#036596;
}

.hoverBlue:hover{
	color: #FFF;
	background-color:#00A3D9;
}

.bshadow{
	box-shadow: 0px 0px 10px #D9A300, 0px 0px 5px #D900A3 inset;
}

.backgroundWhite{
    background-color: #FFF;
}

.backgroundTransparent{
	background-color: transparent;
}

.fillWhite{
	fill: #FFF;
}

.backgroundBlack, .backgroundOmittedKeyboard, .backgroundSupraKeyboard {
    background-color: #000;
	color:white;
}

.backgroundGrey{
	background-color: #CCC;
}

.backgroundGrey1{
	background-color: #666;
}


.backgroundLGrey{
	background-color: #EEE;
	/*background-color: #CCC;*/
}

/*circle, path{
	fill: #FFF;
}*/

.backgroundDBlue, .backgroundAffricateKeyboard, .backgroundLongKeyboard{
	background-color: #0036D9;
}


.backgroundTeal, .fillTeal{
    background-color: #036596;
	fill: #036596;
}

.backgroundBlue{
	background-color: #00A3D9;
	color: #FFF;
}

.backgroundCSBlue{
	background-color: #027FFE;
}

.backgroundLBlue{
	/*background-color: #00A3D966;*/
	background-color: #99e6ff
	/*background-color: #6A94D4;*/
}

.backgroundLLBlue{
	/*background-color: #00A3D933;*/
	background-color: #ccf2ff;
}

.backgroundRed{
	background-color: #DB4403;
}

.backgroundOrange1{
	background-color:#FFC61A;
}

.backgroundOrange2, .backgroundMustard, .backgroundLiquidKeyboard, .backgroundDipthongKeyboard{
	background-color:#D9A300;
}

.backgroundOrange3{
	background-color:#FF8C00;
}

.backgroundCSOrange{
	background-color:#FF7F00;
}

.backgroundYellow1{
	background-color: #FFFFCC;
}

.backgroundYellow2{
	background-color: #FFFF99;
}

.backgroundYellow3{
	background-color: #FFFF66;
}

.backgroundYellow4{
	background-color: #FFFF33;
}

.backgroundYellow5{
	background-color: #FFFF00;
}

.backgroundGreen, .backgroundGreen1, .backgroundFricativeKeyboard{
	background-color: #00D936;
}

.backgroundGreen2{
	background-color: #009926;
}

.backgroundGreen3{
	/*background-color: #00992666;
	background-color: #99ffb3;*/
	background-color: #80ff9f;
}

.backgroundPink, .bacgroundCSPink, .backgroundStopKeyboard, .backgroundShortKeyboard{
	background-color: #D900A3;
}

.backgroundLPink{
	background-color: #e49ce4;
}

.backgroundBrown, .backgroundCSBrown, .backgroundNasalKeyboard{
	background-color: #663300;
}

.backgroundPurple{
	background-color: #6532fc;	
}

.backgroundAHT{
	background-color: #0036D9;
	background-image: linear-gradient(to bottom right, #0036D9,  #0036D9, #D900A3, #D9A300, #D9A300);
}

.backgroundOYG{
    background-color: #36D900;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #36D936);
}

.backgroundOYB{
    background-color: #00A3D9;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #FFFF66, #00A3D9 75%);
}

.backgroundOYBl{
    background-color: #000;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #000);
}

.backgroundOYGBl{
    background-color: #000;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #36D936, #000);
}

.backgroundOBlYG{
    background-color: #000;
    background-image: linear-gradient(to right, #FF8C00, #000, #FFFF66, #FFFF66, #36D936, #36D936);
}

.backgroundOYGB{
    background-color: #00A3D9;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #36D936, #00A3D9, #00A3D9);
}

.backgroundOYGP{
    background-color: #D900A3;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #36D936, #D900A3 75%);
}

.backgroundOYPG{
    background-color: #D900A3;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #D900A3, #36D936 75%);
}

.backgroundOYPGB{
    background-color: #D900A3;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #D900A3, #36D936, #00A3D9);
}

.backgroundOYGPB{
    background-color: #D900A3;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #36D936, #D900A3, #00A3D9);
}

.backgroundOOYGPB{
    background-color: #D900A3;
    background-image: linear-gradient(to right, #FF8C00, #FF8C00, #FFFF66, #36D936, #D900A3, #00A3D9, #00A3D9);
}

.backgroundOYGBB{
    background-color: #663300;
    background-image: linear-gradient(to right, #FF8C00, #FFFF66, #36D900, #00A3D9, #663300);
}

.backgroundBOYGB{
    background-color: #663300;
    background-image: linear-gradient(to right, #663300, #FF8C00, #FFFF66, #36D900, #00A3D9);
}

.backgroundBOYGPB{
    background-color: #663300;
    background-image: linear-gradient(to right, #663300, #FF8C00, #FFFF66, #36D900, #D900A3, #00A3D9);
}

.backgroundGYB{
    background-color: #00A3D9;
    background-image: linear-gradient(to right, #36D900, #36D900, #FFFF66, #FFFF66, #00A3D9 75%);
}

.backgroundP1{
	background-color: #FFC61A;
}

.backgroundP1i{
	background-color: #FF8C00;
}

.backgroundP2{
	background-color: #80ff9f; /*#00A383;*/
}

.backgroundP2i{
	background-color: #009926;
}

.backgroundFricative{
	background-color: #BFFFCF;	/* green */
	/*background-color: #00D936;*/
}

.backgroundFricativeO{
	background-color: #BFFFCF80;	/* green */
	/*background-color: #00D936;*/
}

.backgroundLiquid, .backgroundDipthong{
	background-color: #FFD101;	/* yellow */
	/*background-color:#D9A300;*/
}

.backgroundLiquidO, .backgroundDipthongO{
	background-color: #FFD10180;	/* yellow */
	/*background-color:#D9A300;*/
}

.backgroundStop, .backgroundShort{
	background-color: #FFBFBF;	/* red*/
	/*background-color: #D900A3;*/
}

.backgroundStopO, .backgroundShortO{
	background-color: #FFBFBF80;	/* red*/
	/*background-color: #D900A3;*/
}

.backgroundNasal{
	background-color: #FFCC99;	/* brown  */
	/*background-color: #663300;*/
}

.backgroundNasalO{
	background-color: #FFCC9980;	/* brown  */
	/*background-color: #663300;*/
}

.backgroundAffricate, .backgroundLong{
	background-color: #02ABFF;	/* blue */
	/*background-color: #0036D9;*/
}

.backgroundAffricateO, .backgroundLongO{
	background-color: #02ABFF80;	/* blue */
	/*background-color: #0036D9;*/
}

.gradient{
	background-image: linear-gradient(to bottom left, #00A3D9, #FFF);
}

.gradientPMGB{
	background-image: linear-gradient(to bottom right, #0036D9, #D9A300, #0036D9);
	/*background-image: conic-gradient(from 180deg, #D900A3, #D9A300, #00D936, #00A3D9,#036596, #0036D9, purple)
	background-image: linear-gradient(to bottom, #D900A3, #D9A300, #00D936, #0036D9);
	*/
}

.borderRound{
    border-radius: 5px;
}

.borderRound20{
    border-radius: 20px;
}

.borderRoundT20{
    border-radius: 16px 16px 0px 0px;
}

.borderRound50{
    border-radius: 50%;
}

.borderGrey, .borderTransition{
    border: 2px solid #CCC;
}

.borderDGrey{
    border: 2px solid #666;
}

.borderTeal{
    border: 2px solid #036596;
}

.borderWhite{
	border: 2px solid #FFF;
}

.borderBlue{
	border: 2px solid #00A3D9;
}

.borderCSBlue{
	border: 2px solid #027FFE;
}

.borderDBlue{
	border: 2px solid #0036D9;
}

.borderPurple{
	border: 2px solid #6532fc;	
}

.borderYellow{
	border: 2px solid #FF0;
}

.borderGreen, .borderGreen1, .borderTransition:active{
    border: 2px solid #00D936;
}

.borderGreen2{
    border: 2px solid #009926;
}

.borderGreen3{
    border: 2px solid #80ff9f;
}

.borderRed{
    border: 2px solid #DB4403;
}

.borderPink{
	border: 2px solid #D900A3;
}

.borderMustard, .borderOrange, .borderOrange2{
	border: 2px solid #D9A300;
}

.borderOrange1{
	border: 2px solid #FFC61A;
}

.borderOrange3{
	/*border: 2px solid #A66E00;*/
	border: 2px solid #FF8C00;
}

.borderCSOrange{
	border: 2px solid #FF7F00;
}

.borderBrown, .borderCSBrown{
	border: 2px solid #663300;
}


.borderBlack{
	border: 2px solid #000;
}

.borderThin{
	border-width: thin;
}

.borderThick{
	border-width: 4px;
}

.borderNone{
	border:none !important;
}

.wod-synonym {
	grid-area: synonym;
}

.wod-picture {
	grid-area: picture;
}

.wod-word {
	grid-area: word;
}

.wod-definition {
	grid-area: definition;
}

.wod-sentence {
	grid-area: sentence;
}

.wod-grid-container{
	display: grid;
	grid-template-areas:
	'synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym synonym picture picture picture picture picture picture picture picture picture picture picture picture picture picture picture picture picture picture picture picture'
	'. . . . . . . . . . . . . . . . . . word word word word . . . . . . . . . . . . . . . . . .'
	'definition definition definition definition definition definition definition definition definition definition definition definition definition definition definition definition definition definition definition definition sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence sentence';
	gap:5px;
}

.sg-cue1{
	grid-area: cue1;
}

.sg-cue2{
	grid-area: cue2;
}

.sg-cue3{
	grid-area: cue3;
}

.sg-cue4{
	grid-area: cue4;
}

.sg-cue5{
	grid-area: cue5;
}

.sg-cue6{
	grid-area: cue6;
}

.sg-cue7{
	grid-area: cue7;
}

.sg-cue8{
	grid-area: cue8;
}

.sg-cue9{
	grid-area: cue9;
}

.sg-cue10{
	grid-area: cue10;
}

.sg-cue11{
	grid-area: cue11;
}

.sg-cue12{
	grid-area: cue12;
}

.sg-image1{
	grid-area: image1;
}

.sg-image2{
	grid-area: image2;
}

.sg-image3{
	grid-area: image3;
}

.sg-image4{
	grid-area: image4;
}

.sg-image5{
	grid-area: image5;
}

.sg-cuefocus{
	grid-area: cuefocus;
}

.sg-grid-container{
	display: grid;
	grid-template-areas:
	'cue1 cue2 cue3'
	'cue4 image1 cue5'
	'cue6 cue7 cue8';
	gap:20px;
}

.sg1-grid-container{
	display: grid;
	grid-template-areas:
	'cuefocus cuefocus cuefocus cuefocus cue9'
	'cuefocus cuefocus cuefocus cuefocus cue8'
	'cuefocus cuefocus cuefocus cuefocus cue7'
	'cuefocus cuefocus cuefocus cuefocus cue6'
	'cue1 cue2 cue3 cue4 cue5';
	gap:10px;
}

.sg1a-grid-container{
	display: grid;
	grid-template-areas:
	'cuefocus cuefocus cuefocus cuefocus cuefocus cue9'
	'cuefocus cuefocus cuefocus cuefocus cuefocus cue8'
	'cuefocus cuefocus cuefocus cuefocus cuefocus cue7'
	'cue1 cue2 cue3 cue4 cue5 cue6';
	gap:10px;
}

.sg1b-grid-container{
	display: grid;
	grid-template-areas:
	'image1 image2 image3 image4 image5 cue9'
	'image1 image2 image3 image4 image5 cue8'
	'image1 image2 image3 image4 image5 cue7'
	'cue1 cue2 cue3 cue4 cue5 cue6';
	gap:10px;
}

.sg2-grid-container{
	display: grid;
	grid-template-areas:
	'cue1 cue2 cue3 cue4'
	'cue5 image1 image1 cue6'
	'cue7 image1 image1 cue8'
	'cue9 cue10 cue11 cue12';
	gap:5px;
}

.sg3-grid-container{
	display: grid;
	grid-template-areas:
	'cue1 cue2 cue3 cue4'
	'image1 image1 image1 image1'
	'cue5 cue6 cue7 cue8';
	gap:5px;
}

.ca_cue{
	grid-area: ca_cue;
}

.ca_description{
	grid-area: ca_description;
}

.ca_tips{
	grid-area: ca_tips;
}

.ca_col1{
	grid-area: ca_col1;
}

.ca_col2{
	grid-area: ca_col2;
}

.ca_col2_1{
	grid-area: ca_col2_1;
}

.ca_col2_2{
	grid-area: ca_col2_2;
}

.ca_col3{
	grid-area: ca_col3;
}

.menu_col1{
	grid-area: menu_col1;
}

.menu_col2{
	grid-area: menu_col2;
}

.menu_col3{
	grid-area: menu_col3;
}

.menu_col4{
	grid-area: menu_col4;
}

.menu_col5{
	grid-area: menu_col5;
}

.menu_col1, .menu_col2, .menu_col3, .menu_col4, .menu_col5{
	border: thin solid #036596;
	padding: 0px 10px 5px 0px;
	border-radius: 5px;
}

.ca-cue-grid-container, .ca-info-grid-container{
	display:grid;
	grid-template-columns:48% 49%;
	grid-template-areas:
	'ca_cue ca_description' 
	'ca_cue ca_tips';
	gap: 5px;
	margin-left:1%;
}

.ca-info-grid-container{
	grid-template-columns:49% 49%;
	grid-template-areas:
	'ca_col1 ca_col2_1' 
	'ca_col1 ca_col2_2';
}

.ca-2col-grid-container{
	display:grid;
	grid-template-areas:
	'ca_col1 ca_col2'; 
	grid-template-columns:49% 49%;
	gap: 5px;
	margin-left:1%;
}

.ca-3col-grid-container{
	display:grid;
	grid-template-areas:
	'ca_col1 ca_col2 ca_col3'; 
	grid-template-columns:33% 32% 32%;
	gap: 5px;
	margin-left:1%;
}

.menu-5col-grid-container{
	display:grid;
	grid-template-areas:
	'menu_col1 menu_col2 menu_col3 menu_col4 menu_col5'; 
	grid-template-columns:19% 19% 29% 9% 19%;
	gap: 5px;
	margin-left:1%;
}

.br50{
	border: 3px solid #0036D9;
	border-radius: 50%;
}

.br50_1{
	border: 3px solid #D9A300;
	border-radius: 50%;
}

.br50_2{
	border: 3px solid #009926;
	border-radius: 50%;
}


.center{
	text-align: center;	
}

.justify{
	text-align:justify	
}

.centerI{
    display:block;
    margin: auto;
    /*width: 50%;*/
}
.left{
	float:left;	
}

.right{
	float:right;
}

.clearL{
	clear:left;	
}

.clearR{
	clear:right;	
}

.clearB{
	clear:both;	
}

.hidden{
	display: none;
}

/*
.filter{
	position:fixed;
	left:0;
	top:0;
	z-index:10;
	/*background-color:#EEEEEE;
	opacity: 0.5;*/
	/*min-width:100%;
	min-height:100%;

	height: 0px;
	overflow: visible;
	pointer-events: none;
	background:none !important;
}
*/

.a{
	text-decoration: none;	
	vertical-align: middle;
	float: left;
	margin-right:25px;
	padding:2px 12px 2px 0px;
}

.hyper{
	text-decoration: none;	
	color:  #D900A3;
}

.hyper1{
	text-decoration: none;	
	color:  #FFF;
}

.hyper1:hover{
	color:  #036596;
}

.nodrag{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.abs{
	position: absolute;
}

.bottom{
	bottom: 5px;
}

.z1{
	z-index:1;
}

.z2{
	z-index:2;
}

.z3{
	z-index:3;
}

.z4{
	z-index:4;
}

.z5{
	z-index:5;
}

.z6{
	z-index:6;
}

.z7{
	z-index:7;
}

.z8{
	z-index:8;
}

.z9{
	z-index:9;
}

.z10{
	z-index:10;
}

.z11{
	z-index:11;
}

.z12{
	z-index:12;
}

.z21{
	z-index:21;
}

@keyframes blink { 
	50% { border-color: #00FF00 } 
 }
 .blink{
	 animation: blink .75s step-end infinite alternate;
 }

 @keyframes blink1 {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.blink1 {
    animation: blink1 2s;
    animation-iteration-count: infinite;
}
 
/*
input, select, textarea, option{
	margin: 0px 0px 0px 10px;
	padding:0px 0px 0px 5px;
	line-height: 18px;
	min-height:18px;
	font-size:medium;
	width: 80%;
	color:#666;
	box-sizing: border-box;
}

textarea{
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	height:25px;
	width: 90%;
	resize: none;
	background-color:#FFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

input[type=radio] {
	display: inline-block;
	height:18px;
	color: #666;
}

input[type=checkbox] {
	width:auto;
	height:18px;
	margin-right:10px;
	color: #666;
}*/

.cuecard{
	position: absolute;
	top:0px;
	left:0px;
	width: 60px;
	height: 60px;
	padding: 0px;
	margin: 0px;
	z-index:2;
}

.tile{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px 0px 0px 0px;
}

.counter{
	position: absolute;
	padding: 0px;
	margin-left: -45px;
	/*background-color: #0000FF;
	margin-top: -90px;*/
	/*width: 84px;
	height: 84px;*/
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.svg{
	position:absolute;
	padding:0px;
	margin-left:-45px;
	margin-top:-90px;
}

.svg1{
	/*position:absolute;*/
	padding:0px;
	border: 1px solid black;
}

.svg2{
	position:absolute;
	padding:0px;	
	margin-left:-35px;
}

.svg3{
	position:absolute;
	padding:0px;
	margin-left:-33px;
	margin-top:-71px;
}

.svg4{
	fill:#036596;
	stroke:#FFF;
	stroke-linejoin:
	round;stroke-width:2px;
}

.transform{
	position: absolute;
	transition: transform 0.8s;
  	transform-style: preserve-3d;
}

.expand, .contract, .menu, .closeMenu, .plus, .minus{
	position: absolute;
	right:0%;
	background-color: #CCCCCC;
	color: #666666;
	border: thin solid #666666;
	margin: 0px;
	padding: 1px 1px 1px 1px;
	width: 10px;
	line-height: 80%;
	height: 12px;
	border-radius:3px;
}

.menu:hover, .expand:hover, .contract:hover, .plus:hover, .minus:hover{
	border: thin solid yellow;
}

.closeMenu:hover{
	border: 2px solid #BE0B0B;
}

.expand, .closeMenu{
	top: 0%;
}

.plus{
	background-color: #4373D5;	
	bottom: -16px;
	border: thin solid #0036D9;	
	border-radius: 0px;	
}

.minus{
	background-color: #4373D5;	
	bottom: -16px;
	left: 0px;
	border: thin solid #0036D9;		
	border-radius: 0px;
}

.closeMenu{
	width:20px;
	height:20px;
	border: 2px solid #666666;	
}

.menu{
	top: 1%;
}

.score{
	position: absolute;
	width: 30px;
	height: 12px;
	background-color: #4373D5;
	bottom: -16px;
	left:14px;
	margin: 0px;
	padding: 1px 1px 1px 1px;
	border-bottom: thin solid #0036D9;
	border-top: thin solid #0036D9;
	line-height: 90%;
	color:#0036D9;
	font-size: 75%;
	z-index:0;
}

/*
#displayInstructions{
	right:1%;
}

#settings{
	right:3%;
}

#mainMenu{
	right:5%;
}
*/
	
.contract{
	bottom: 0%;
	line-height: 50%;
}

.menu{
	top: 1%;
	right: 1%;
	color: blue;
	height: 16px;
	width:12px;
	text-align:center;
}

#p1zone, #p2zone,#p1board,#p2board{
    /*position: relative;*/
    float:left;
	clear:none;
    background-color: #FFC61A;
    border: 2px solid #FF8C00;
	/*width: 13%;
	height: 30px;*/
	margin: 2% 1.5% 0% 1.5%;
	padding: 1%;
	border-radius: 5px;
}
	
#p2zone,#p2board{
    background-color: #80ff9f;
    border: 2px solid #009926;
    float:right;
}

#p1, #p2{
	color: #0036D9;
	font-variant: small-caps;
	font-weight: bold;
	margin-bottom: 10px;
}

.playerTurn{
	background-color: yellow;
	border-radius: 5px;
}

#ccBank{
	position: relative;
	width: 39%;
	padding: 2.5% 11% 1% 10%;
	margin: 1% 19% 1% 19%;
	background-color: #0036D9;
	border: thin solid #06276F;
	border-radius: 5px;
	text-align: center;	
}

#ccBankHeading{
	position: absolute;
	top: 1%;
	left: 40%;
	margin:0%;
	padding: 0%;
	color: #CCCCCC;
	font-variant: small-caps;
	font-size: 90%;
}

#cuecardsection{
	position: relative;
	padding: 1.5% 1% 1% 0%;
	width: 59%;
	margin: 1% 19% 1% 19%;
	border: thin solid #052F6D;
	border-radius: 5px;
	background-color: #4373D5;
	display: inline-block;
	text-align: center;
}

.dropzone, .cardBank{
	position: relative;
	width: 60px;
	height: 60px;
	margin: 4px 4px 0px 4px;
	padding:0px;
	background-image: url('images/dropZoneBkgrd.jpg');
	background-color: lightBlue;
	border-radius:5px;
	display: inline-block;
}

.center{
	text-align: center;
}

.taleft{
	text-align: left;
}

.taright{
	text-align: right;
}

.italic{
	font-style: italic;
}

.bold{
	font-weight: bold;
}

.uOrange1{
	text-decoration: underline #D9A300 5px;
}

.uOrange2{
	text-decoration: underline double #D9A300 5px;
}

.uBlue1{
	text-decoration: underline #00A3D9 5px;
}

.uBlue2{
	text-decoration: underline double #00A3D9 5px;
}

.uBrown1{
	text-decoration: underline #663300 5px;
}

.uBrown2{
	text-decoration: underline double #663300 5px;
}

.uBlack1, .uBlack2, .uBlack3{
	position: relative;
	display: inline-block;
	left: -49px;
	bottom: -59px;
	height: 0px;
	width: 43px;
	border: 3px solid #000;
}

.uBlack2{
	left: -36px;
	width: 30px;
}

.uBlack3{
	left: -60px;
	width: 54px;
}

.uPink1{
	text-decoration: underline #D900A3 5px;
}

.uPink2{
	text-decoration: underline double #D900A3 5px;
}

.uDBlue1{
	text-decoration: underline #0036D9 5px;
}

.uDBlue2{
	text-decoration: underline double #0036D9 5px;
}

.uGreen1{
	text-decoration: underline #00D936 5px;
}

.uGreen2{
	text-decoration: underline double #00D936 5px;
	text-underline-offset: 17px;
}

.uRed1{
	text-decoration: underline #DB4403 5px;
}

.uRed2{
	text-decoration: underline double #DB4403 5px;
	text-underline-offset: 17px;
}

.uPurple1{
	text-decoration: underline #6532fc 5px;
}

.uPurple2{
	text-decoration: underline double #6532fc 5px;
}

.uGrey1{
	text-decoration: underline #666 5px;
}

.uRed3{
	position: relative;
	display: inline-block;
	left: -32px;
	bottom: -48px;
	height: 8px;
	width: 8px;
	border-radius: 50%; 
	border: 4px solid #DB4403;
}

.uRed4{
	position: relative;
	display: inline-block;
	left: -22px;
	bottom: -64px;
	height: 2px;
	width: 8px;
	border-radius: 50%; 
	border: 4px solid #DB4403;
}

.uYellow2{
	text-decoration: underline double #FF0 5px;
}

.uGreen3{
	text-decoration: underline double #009926 5px;
}

.uOffset10{
	text-underline-offset: 10px;
}

.uOffset17{
	text-underline-offset: 17px;
}

.uOffset20{
	text-underline-offset: 20px;
}

.imgContainerTBR, .imgContainerTTL{
    position: relative;
    display: inline-block;
}

.imgContainerTBR::before{
	content:'';
	position: absolute;
	bottom: 8px;
	right: 4px;
	border-top: 40px solid transparent;
	border-right: 40px solid #D9A300;
	cursor: pointer;
}

/*.imgContainerTBR::after{
	content:'';
	position: absolute;
	top: 4px;
	left: 14px;
	border-bottom: 40px solid transparent;
	border-left: 40px solid blue;
	cursor: pointer;
}*/

.imgText{
	color: #FFF;
	text-align:center;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black background */
    /*display: flex;
    justify-content: center;
    align-items: center;*/
	opacity: 1; /* initially invisible */
	transition: opacity 0.3s ease; /* smooth transition */
}

.matchedTile{
	width: 60px;
	height: 60px;
	border: thin solid #0036D9;
	margin: 0px 1px 0px 1px;
	padding:0px;
}

.displayMenu{
	position: absolute;
	left:0;
	top:0;
	margin: 10% 14% 10% 14%;
	padding: 3%;
	width: 70%;
	background-color: #5ED1BA;
	border: thin solid #006A55;
	border-radius: 5px;
	z-index: 21;
}

.filter{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	z-index:20;
	background-color:#EEEEEE;
	opacity: 0.3;
	width:100%;
	height:100%;
	/*overflow:auto;
	overflow-y: scroll;*/

	height: 0px;
	overflow: visible;
	pointer-events: none;
	background:none !important;
}

.clearFilter{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	z-index:20;
	/*background-color:#EEEEEE;
	opacity: 0.3;*/
	width:100%;
	height:100%;
	/*overflow:auto;*/
	overflow-y: scroll;
}

.scroll{
	overflow-y:scroll;
}

.vScroll
{
	height: 80%;
	overflow-y: scroll;
}

.hScroll{
	width: 1028px;
	overflow-x: scroll;
}

.opacity{
	opacity: 0.3;
}

.setting:hover, .setting1:hover{
	border: thin solid yellow;
}

.setting{
	border: thin solid #5ED1BA;
	margin-bottom: 2%;
}

.setting1{
	border: thin solid #5ED1BA;
	margin: 4% 2% 2% 0%;
}

#scoringOn, #levelBeginner, #settingsOk{
	margin-left:2%;
}

#settingsOk{
	margin-left:4%;
}

#rubbishBin{
	position: absolute;
	width: 60px;
	height: 60px;
	bottom: 14px;
	right: 25px;
}

.not{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:3;
	width:60px;
	height:60px;
}

.whatLike, .howDoing{
	position: absolute;
	top: -15px;
	left: 5px;
	z-index:1;
	width:60px;
	height:60px;
}

.radio-button-group-vertical {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px 0px 0px 5px;
    overflow: hidden;
    color: #666;
    font-size: 90%;
    margin: 0px 0px 0px 5px;
    display: flex;
    flex-direction: column;
}

.radio-button-title-vertical {
    margin-bottom: 6px;
}

.radio-button-group-vertical input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.radio-button-group-vertical label {
    display: block; /* Ensure each label takes up a full line */
    width: auto;
    color: #666;
    text-align: center;
    font-size: 100%;
    text-shadow: none;
    padding: 1px 10px;
    margin: 0px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}

.radio-button-group-vertical input:checked + label {
    background-color: #00A3D9;
    color: #FFF;
    box-shadow: none;
}

/* Adjust border-radius for one item */
.radio-button-group-vertical label:first-of-type:last-of-type {
    border-radius: 4px; /* All corners rounded */
}

/* Adjust border-radius for multiple items */
.radio-button-group-vertical label:first-of-type:not(:last-of-type) {
    border-radius: 4px 4px 0 0; /* Top corners rounded */
}

.radio-button-group-vertical label:last-of-type:not(:first-of-type) {
    border-radius: 0 0 4px 4px; /* Bottom corners rounded */
}

.radio-button-group-horizontal {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px 0px 0px 5px;
    overflow: hidden;
    color: #666;
    font-size: 90%;
    margin: 0px 0px 0px 5px;
    display: flex;
    flex-wrap: wrap; /* Allow the buttons to wrap onto multiple lines */
    justify-content: space-between; /* Ensure even spacing */
}

.radio-button-title-horizontal {
    margin-bottom: 6px;
}

.radio-button-group-horizontal input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.radio-button-group-horizontal label {
    flex: 1 1 auto; /* Make all buttons the same width */
    text-align: center;
    font-size: 100%;
    text-shadow: none;
    padding: 1px 10px;
    margin: 0px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box; /* Ensure padding and borders are included in the width */
}

.radio-button-group-horizontal input:checked + label {
    background-color: #00A3D9;
    color: #FFF;
    box-shadow: none;
}

/* Adjust border-radius for one item */
.radio-button-group-horizontal label:first-of-type:last-of-type {
    border-radius: 4px;
}

/* Adjust border-radius for multiple items in a single line */
.radio-button-group-horizontal label:first-of-type:not(:last-of-type) {
    border-radius: 4px 0 0 4px;
}

.radio-button-group-horizontal label:last-of-type:not(:first-of-type) {
    border-radius: 0 4px 4px 0;
}

/* Adjust border-radius for first and last items when wrapping onto a new line */
.radio-button-group-horizontal label:nth-of-type(1) {
    border-radius: 4px 0 0 0;
}

.radio-button-group-horizontal label:last-of-type {
    border-radius: 0 0 0 4px;
}

.radio-button-group-horizontal label:nth-of-type(1):last-of-type {
    border-radius: 4px 4px 4px 4px;
}

.radio-button-group-horizontal label:nth-last-of-type(1) {
    border-radius: 0 4px 4px 0;
}

.radio-button-group-horizontal label:nth-last-of-type(1):first-of-type {
    border-radius: 4px 4px 4px 4px;
}

/* REMOVE BELOW */

.switch-field {
	font-family: Arial, Helvetica, sans-serif;
	padding:0px 0px 0px 5px;
    overflow: hidden;
	color: #666;
	font-size:90%;
	margin: 0px 0px 0px 5px;
}

.switch-title {
 	margin-bottom: 6px;
}

.switch-field input {
	position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
 	float: left;
}

.switch-field label {
	display: inline-block;
	width: auto;
	color: #666;
	text-align: center;
	font-size:100%;
	text-shadow: none;
	padding: 1px 10px 1px 10px;
	margin:0px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: none;
	box-shadow: none;
	/*-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;*/
}

.switch-field label:hover, .pointer {
    cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #00A3D9;
	color:#FFF;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}

/* END REMOVE */

input:focus, option:focus, select:focus, .backgroundYellow{
	background-color: #FFFACD;
}

.textarea:focus{
	background-color: #FFFACD;
}

input::placeholder, textarea::placeholder {
	color:#d9b100;
	font-style: italic;
}

input:placeholder-shown {
  	color:#d9b100;
	font-style: italic;
}

input[type=button],input[type=submit]{
	/*margin: 10px 10px 0px 0px;*/
	padding: 1px 10px 1px 10px;
	width: auto;
	font-size:80%;
	color:#FFF;
	background-color:#565399 /*#00A3D9*/;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius:4px;
}

input[type="text"]:disabled{
	color: #666;
	opacity:1;
	-webkit-text-fill-color:#666666;
	-webkit-opacity:1;
}

input[type="search"] {
	border: none;
	background: transparent;
	margin: 0;
	padding: 7px 8px;
	font-size: 14px;
	color: inherit;
	border: 1px solid transparent;
	border-radius: inherit;
  }

  input[type="search"]::placeholder {
	color: #666;
  }

  input.nosubmit {
	border: 1px solid #036596;
	border-radius: 5px;
	width: 50%;
	padding: 4px 4px 4px 40px;
	background: transparent url("../images/searchDBlue.png") no-repeat 13px center;
	background-size: 20px 20px;
  }

	/* FLIP BOX */
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
	background-color: transparent;
	/*width: 67px;
	height: 67px;
	border: 1px solid #f1f1f1;*/
	/*perspective: 1000px;  Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-box-inner {
	position: relative;
	/*width: 100%;
	height: 100%;*/
	text-align: center;
	transition: transform 0.5s;
	transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
	transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-box-front, .flip-box-back {
	position: absolute;
	/*width: 100%;
	height: 100%;*/
	backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-box-front {
	background-color: #bbb;
	color: black;
  }
  
  /* Style the back side */
  .flip-box-back {
	background-color: #FFF;
	color: dodgerblue;
	transform: rotateY(180deg);
  }

.split-overlay {
	position: absolute;
	inset: 0;                        /* left:0; top:0; right:0; bottom:0 */
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;                      /* curve renders “beneath” the cards */
}