/* MAKE SURE YOU MAINTAIN PHONICS.CSS and PHONICS.MOBILE.CSS TOGETHER */

/* version 4.0102.0 */


:root {
  --vowel-tile: #FE6EAC;
  --vowel-tile--hover: #FE318A;
  --tile-dim: 4.5vw;
  --box-width: 11vw;
  --box-height: calc(var(--box-width) * .80);
  --ball-size:2.5vw;
  --tile-width: calc(var(--tile-dim));
  --tile-height: calc(var(--tile-dim) * .80);
  --tile-font-size: calc(var(--tile-dim) * .7);
  --instruct-font-size: calc(var(--box-width) * .20);
  --tile-margin: 2px;
  --button-width: calc(var(--tile-dim) * 2);
  --table-padding: 2px;
  --chain-tile-width: 3.5vw;
  --chain-tile-height: 3.3vw;
  --chain-tile-font-size: calc(var(--chain-tile-height) * .6);
  --timer-button-dim: clamp(3rem, 1.5rem + 3vw, 6rem);
  --readxyz: #15B5B0;
  --readlite:#99dde5;
  --readultra:#f2fbfc;
  --readred:#f05e58;
  --readxyz-dark:#008898;
}


/* new colors for readxyz */
.text-readxyz   {color: var(--readxyz);}
.text-disabled {color: #bbbbbb}
.border-readxyz {border-color: var(--readxyz);}
.bg-readxyz {background-color: var(--readxyz);}
.bg-readxyz-dark {background-color: var(--readxyz-dark);}
.bg-readlite    {background-color: var(--readlite);}
.bg-readultra  {background-color: var(--readultra);}

.link-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
  all: initial;
  color: #cccccc !important
}

.btn-readxyz {
  color: white;
  background-color: var(--readxyz);
  border-color: var(--readxyz);
}

.btn-readxyz:hover {
  color: white;
  background-color: #008898;
  border-color: #007c8b;
}

.btn-readxyz:focus, .btn-readxyz.focus {
  color: white;
  background-color: #008898;
  border-color: #007c8b;
  box-shadow: 0 0 0 0.2rem rgba(38, 183, 200, 0.5);
}

.btn-readxyz.disabled, .btn-readxyz:disabled {
  color: white;
  background-color: var(--readxyz);
  border-color: var(--readxyz);
}

.btn-readxyz:not(:disabled):not(.disabled):active, .btn-readxyz:not(:disabled):not(.disabled).active,
.show > .btn-readxyz.dropdown-toggle {
  color: white;
  background-color: #007c8b;
  border-color: #00717e;
}

.btn-readxyz:not(:disabled):not(.disabled):active:focus, .btn-readxyz:not(:disabled):not(.disabled).active:focus,
.show > .btn-readxyz.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem rgba(38, 183, 200, 0.5);}

.btn-readred {
  color: white;
  background-color: var(--readred);
  border-color: var(--readred);
}

.btn-readred:hover {
  color: white;
  background-color: #ed3c35;
  border-color: #ec3129;
}

.btn-readred:focus, .btn-readred.focus {
  color: white;
  background-color: #ed3c35;
  border-color: #ec3129;
  box-shadow: 0 0 0 0.2rem rgba(242, 118, 113, 0.5);
}

.btn-readred.disabled, .btn-readred:disabled {
  color: white;
  background-color: var(--readred);
  border-color: var(--readred);
}

.btn-readred:not(:disabled):not(.disabled):active, .btn-readred:not(:disabled):not(.disabled).active,
.show > .btn-readred.dropdown-toggle {
  color: white;
  background-color: #ec3129;
  border-color: #eb261e;
}

.btn-readred:not(:disabled):not(.disabled):active:focus, .btn-readred:not(:disabled):not(.disabled).active:focus,
.show > .btn-readred.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(242, 118, 113, 0.5);
}

article, aside, details, dialog, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1.3;
  background: white;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, tr {
  text-align: left;
  font-weight: normal;
  float: none;
}

table, th, tr, td {
  vertical-align: middle;
  background-color: white;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
}

blockquote, q {
  quotes: "" "";
}

a img {
  border: none;
}

:focus {
  outline: 0;
}

/* basic defaults */

ul {
  list-style-type: disc;
}

ul li {
  margin: 0 0 0 30px;
  padding: 0 0 0 12px;
}

/* ----sound and spelling----------------------- */

.sound {
  font-family: sans-serif;
  font-style: normal;
  font-size: inherit;
  font-weight: bold;
  color: #666;
  border: solid 1px grey;
  border-radius: 5px;
  text-align: center;
  background: bisque;
  margin: 1px;
  padding: 3px;
}

.spelling {
  font-family: sans-serif;
  font-style: normal;
  font-size: inherit;
  color: red;
}


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

#canvas-container {
  border: black 1px solid;
  width: 810px;
  height: 810px;
}

img.floatLeft {
  float: left;
  margin: 4px;
}

img.floatRight {
  float: right;
  margin: 4px;
}

table.wordlist tr {
  border: none;
}

table.wordlist td {
  border: none;
  color: #cccccc;
}

table.wordlist td.current {
  border: none;
  color: #ff00ff;
}

table.wordlist td.processed {
  border: none;
  color: #000000;
}

.red {
  color: red;
}

.tac {
  text-align: center;
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

/* thumb class */

img.thumb {
  padding: 5px !important;
  width: 90%;
}

img:hover.thumb {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.bdp-thumb img {
  max-width: 100%;
  height: auto;
  margin-left: 5px;
  padding: 5px;
}

.pronounce-thumb img {
  max-width: 100%;
  height: auto;
  padding: 5px;
}

/* info-thumb class */

img.info-thumb {
  padding: 5px !important;
  width: 40px;
  height: 40px;
  margin-bottom: 15px;
}

img:hover.info-thumb {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

td.info-thumb {
  width: 100px;
  text-align: center;
}

.bordered {
  border: 2px solid #444 !important;
}

/* button code to handle hover effect */

.btn-img {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.btn-img:active {
  opacity: 0.3;
  transition: opacity 0.1s;
}

.btn-img-shadow-round {
  border-radius: 50%;
}

.btn-img-shadow, .btn-img-shadow-round {
  box-shadow: none;
  transition: box-shadow 0.5s;
}

.btn-img-shadow:hover, .btn-img-shadow-round:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.progressButton {
  font-family: "Comic Sans MS", Geneva, sans-serif;
  border: 3px solid var(--readxyz);
  color: var(--readxyz);
  line-height: 1.5rem;
  font-size: 150%;
  padding: 3px;
  margin: 8px;
  border-radius: 8px;
  text-align: center;
  vertical-align: center;
}

.img-scale {max-width: 100%;height: auto;}
.img-scale-90 {max-width: 90%;height: auto;}
.img-scale-75 {max-width: 75%;height: auto;}

.img-contain {
  position: relative;
}

.img-contain img {
  object-fit: scale-down;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.bw3 {
  border-width: 3px;
  border-style: solid;
}


.modal-backdrop.in {
  opacity: 0.2 !important;
}

[id*=-tab] {
  color: dimgray !important;
}


/* classes based on screen size (if using max-width order largest to smallest) */

.nodec {
  text-decoration: none !important;
}

/* @formatter:off */
/* Responsive font sizes for bootstrap */

/*@media (max-width: 1200px) {*/
/*  legend {font-size: calc(1.275rem + 0.3vw);}*/
/*  h1, .h1 {font-size: calc(1.375rem + 1.5vw);}*/
/*  h2, .h2 {font-size: calc(1.325rem + 0.9vw);}*/
/*  h3, .h3 {font-size: calc(1.3rem + 0.6vw);}*/
/*  h4, .h4 {font-size: calc(1.275rem + 0.3vw);}*/
/*  h5, .h5 {font-size: calc(1.2rem + 0.2vw);}*/
/*  .display-1 {font-size: calc(1.725rem + 5.7vw);}*/
/*  .display-2 {font-size: calc(1.675rem + 5.1vw);}*/
/*  .display-3 {font-size: calc(1.575rem + 3.9vw);}*/
/*  .display-4 {font-size: calc(1.475rem + 2.7vw);}*/
/*  .close {font-size: calc(1.275rem + 0.3vw);}*/
/*}*/

/* 0 - 575 pixels wide - phone */

.size--side-icon {height: var(--timer-button-dim); width: var(--timer-button-dim)}

@media (max-width: 575px) {
  .sfp {font-size: .6rem !important;}
  .wordlist {font-size: 1.5rem !important;}
  .scaled {transform: scale(.5, .5);}
  .size--tab-icon {height: 50px;width: 50px;}

  .size--key-icon {height: 35px;width: 35px;}
  .size--list-icon {height: 18px;width: 18px;}
  .height--title-bar {height: 60px;}
  .button-text {font-size: 1rem;}
}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767px) {
  .sfp {font-size: .6rem !important;}
  .wordlist {font-size: 2rem !important;}
  .scaled {transform: scale(.6, .6);}
  .size--tab-icon {height: 50px;width: 50px;}

  .size--key-icon {height: 45px;width: 45px;}
  .size--list-icon {height: 24px;width: 24px;}
  .height--title-bar {height: 50px;}
  .button-text {font-size: 1.1rem;}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */

@media (min-width: 768px) and (max-width: 991px) {
  .sfp {font-size: .75rem !important;}
  .wordlist {font-size: 2.5rem !important;}
  .scaled {transform: scale(.75, .75);}
  .size--tab-icon {height: 42px;width: 42px;}

  .size--key-icon {height: 60px;width: 60px;}
  .size--list-icon {height: 30px;width: 30px;}
  .height--title-bar {height: 60px;}
  .button-text {font-size: 1.25rem;}
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  .sfp {font-size: .75rem !important;}
  .wordlist {font-size: 3.0rem !important;}
  .scaled {transform: scale(1.0, 1.0);}
  .size--tab-icon {height: 90%;width: 90%; max-height: 80px; max-width: 80px; margin-right: 10px}
  .size--key-icon {height: 75px;width: 75px;}
  .size--list-icon {height: 35px;width: 35px;}
  .height--title-bar {height: 60px;}
  .button-text {font-size: 1.5rem;}
}

/*@media (min-width: 1800px) {*/
/*  .sfp {font-size: 2.75rem !important;}*/
/*  .wordlist {font-size: 5.0rem !important;}*/
/*  .scaled {transform: scale(1.5, 1.5);}*/
/*  .size--tab-icon {height: 90%;width: 90%; max-height: 100px; max-width: 100px; margin-right: 15px}*/
/*  .size--side-icon {height: 80px;width: 80px;}*/
/*  .size--key-icon {height: 100px;width: 100px;}*/
/*  .size--list-icon {height: 50px;width: 50px;}*/
/*  .height--title-bar {height: 90px;}*/
/*  .button-text {font-size: 2.3rem;}*/
/*}*/
.float-input input {
  float: left;
}

/* used for colorbox games iframe in base.html.twig line 92 */

.gameFrame {
  border: 2px solid dimgray;
}

/* override navbar-nav active color */

.nav-item.a:not(.active) {
  background-color: var(--readlite) !important;
}

/* override navbar-nav active color */

.nav-item.active {
  background-color: var(--readxyz) !important;
}

.nav-item:focus .nav-item:hover {
  background-color: var(--readxyz) !important;
}

.bg-tab {
  background-color: var(--readlite) !important;
}

/* classes to handle background images in accordion */

.accordion--image {
  height: 6vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.accordion--expanded {
  background-image: url("/images/lessonlist/accordion-expanded.png");
}

.accordion--collapsed {
  background-image: url("/images/lessonlist/accordion-unexpanded.png");
}

.lesson-list--width {
  max-width: 500px !important;
  width: 90%;
}

.mastery--image {
  height: 2em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.mastery--no-mastery {
  background-image: url("/images/lessonlist/lesson-nomastery.png");
}

.mastery--advancing {
  background-image: url("/images/lessonlist/lesson-advancing.png");
}

.mastery--mastered {
  background-image: url("/images/lessonlist/lesson-mastered.png");
}

.bg-image {
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-position--left {
  background-position: left;
}

.bg-position--center {
  background-position: center;
}

.bg-info {
  background-image: url("/images/sidebar/info.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent !important;
  height: 50px;
  width: 50px;
  transition: background-image 0.7s ease-in-out;
}

.bg-info:hover {
  background-image: url("/images/sidebar/info-hover.png");
  transition: background-image 0.7s ease-in-out;
}

.bg-image--title {
  background-image: url("/images/readxyzlogo2-2020.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  margin-left: 0;
}

.bg-contain {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 70px !important;
}

.mw-600 {
  max-width: 600px;
}

/* Customize some of the bootstrap breadcrumb class attributes */

.breadcrumb {
  margin: 0 1rem !important;
  padding: 0 !important;
  background-color: white !important;
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.center-x {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* define styling for the tiles in the spinner(spell) tab and the write tab */
/* use with .wordlist .size--list-icon */
.tile {
    width: var(--tile-width);
    height: var(--tile-height);
    line-height:  1.3;
    font-size: var(--tile-font-size);
    font-weight: normal;
	border-style: solid;
	border-width: 1px;
    cursor: pointer;
    vertical-align: middle;
	text-align: center;
	border-radius: .5rem;
	box-shadow: 2px 2px 1px #888888;
	margin: .2rem !important;
    padding:.2rem !important;
}

.chain-tile {
  width: var(--chain-tile-width);
  height: var(--chain-tile-height);
  line-height:  1.3;
  font-size: var(--chain-tile-font-size);
  font-weight: lighter;

  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  border-radius: .5rem;
  box-shadow: 2px 2px 1px #888888;
  margin: .2rem !important;
  padding:.2rem !important;
}
.tile-vowel {background-color: var(--vowel-tile)}
.tile-vowel:hover {background-color: var(--vowel-tile--hover)}
/* .tile-consonant {background-color: white} */
.tile-consonant {background-color: #99dde5}
.tile-consonant:hover {background-color: var(--readxyz)}

.tile-letter {
  font-size: var(--tile-font-size);
  line-height: var(--tile-dim);
  font-weight: normal;
  margin: .2rem !important;
}


.sbr {
  border-radius: 50%;
}

.sb, .sbr {
  box-shadow: none;
  transition: box-shadow 0.5s;
}

.sb:hover, .sbr:hover {
  /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);*/
}