@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=7774d7fc-fb0c-4ee1-b362-6cb4a10aa3f0&fontids=692088");

/* Very similar to Didact. The upper and lower case U do not have a leg such as Didact has.
@font-face {
    font-family: "Century Gothic W01";
    src: url("Fonts/692088/bd45538f-4200-4946-b177-02de8337032d.eot?#iefix");
    src: url("Fonts/692088/bd45538f-4200-4946-b177-02de8337032d.eot?#iefix") format("eot"),url("Fonts/692088/700cfd4c-3384-4654-abe1-aa1a6e8058e4.woff2") format("woff2"),url("Fonts/692088/9908cdad-7524-4206-819e-4f345a666324.woff") format("woff"),url("Fonts/692088/b710c26a-f1ae-4fb8-a9fe-570fd829cbf1.ttf") format("truetype");
}
*/

/* default font face*/
@font-face {
    font-family: "Didact Gothic Regular";
    src: url("Fonts/DidactGothic-Regular.ttf");
}

/*/ override thead grid.css (use the entire window) */
.container {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.BodyWrapper {
    display: inline-block;
    max-width: 1020px;
}

/* container for each activity */
div.Panel {
    /* center the activity content horizontal and vertical in the window/screen */
    /*
    display: flex;
    align-items: center;
    justify-content: center;
    */
}

/* container for target and distractor sets */
.flex-container {
    align-items: stretch;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: -webkit-box;
    justify-content: left;
}

/* h1 style for target content in the single letter, letter pair and noun activities */
.flex-item-target-narrow {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    min-width: 100px;
    text-align: center;
}

/* h1 style for distractor content in the single letter, letter pair and noun activities */
.flex-item-distractor-narrow {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 100px;
    text-align: center;
}
/* background flash for wrong left to right order on letter pair */
.wrong-order {
    background-color: yellow;
}

.instruction-text {
    font-size: 20px;
    display: flex;
    color: #64451b;
}

/* h1 style for target content in the verbAdverb and phrase activities */
.flex-item-target-wide {
    background-color: transparent;
    margin-left: 0px;
    margin-right: 0px;
    cursor: default;
    text-align: left;
}

/* h1 style for distractor content in the verbAdverb and phrase activities */
.flex-item-distractor-wide {
    background-color: transparent;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: default;
    text-align: left;
}

/* h1 style for all target and distractor content */
div, h1 {
    /* force left and right edge clipping of target/distractor content in narrow windows (rather than wrapping) */
    white-space: nowrap;
    /* don't allow selecting target/distractor content */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
    background-color: transparent;
    cursor: default;
    font-family: 'Didact Gothic Regular';
}

header div._RightSide {
    position: absolute;
    right: 0;
}

header span._Logo {
    letter-spacing: 4px;
    text-align: center;
    font-size: 22pt;
    color: #FFF;
}

html, body {
    /* light brown */
    background-color: #e3c699;

    /* maximize the area available for rendering target and distractor content */
    margin: 0;
    padding: 0;
}

#BodyWrapper {
    /* center the target and distractor content horizontal and vertical in the window/screen */
    position: absolute;
}

/* tag for distractor content that matches the sight word "pick me! pick me!" */
.match {
}

/* tag for distractor content the user selected correctly as a sight letter/word */
.matched {
    background-color: lightgreen;
}

/* tag for distractor content the user selected incorrectly as a sight letter/word */
.foiled {
    background-color: #c20000; /* lightred */
}

.choose-activity {
    background: #64451b; /* dk brown */
    color: #f4e7d7;      /*super lt brown */
}

.slidecontainer {
    /*
    width: 70%;
    margin-right: 15%;
    margin-left: 15%;
    */
    width: 368px;
    position: absolute;
    left: 0px;
    right: 0px;
}
/* The slider itself */
.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    height: 5px; /* Specified height */
    background: #64451b; /* dk brown */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    transition: opacity .2s;
    position: relative;
    top: -2px;
    margin: 0px;
}
/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        width: 7px; /* Set a specific slider handle width */
        height: 30px; /* Slider handle height */
        background: #64451b; /* dk brown */
        cursor: pointer; /* Cursor on hover */
    }

.slider-edge {
    width: 15%;
    display: inline;
    color: #64451b; /* dk brown */
}

/* style for "Install as App" content */
.install {
    float: right;
    letter-spacing: 2px;
    text-align: center;
    font-size: 16pt;
    color: #FFF;
    padding-top: 5px;
}

.modal-open {
    width: 100vw;
    height: 100vw;
}

.activity-button {
    background-color: #64451b; /* dk brown */
    border: none;
    color: #f4e7d7; /*super lt brown */
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 32px;
    width: 100%;
}

.slider-button {
    background-color: #64451b; /* dk brown */
    border: none;
    color: #f4e7d7; /*super lt brown */
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Mouse-over effects */
.slider-button:hover {
    opacity: 0.5; /* Fully shown on mouse-over */
}

.activity-button:hover {
    opacity: 0.5; /* Fully shown on mouse-over */
}

.splash-button:hover {
    opacity: 0.5; /* Fully shown on mouse-over */
}

.activity-button-space {
    padding: 5px;
}

.splash-button {
    background-color: 
    border: none;
    color: #f4e7d7; /*super lt brown */
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 32px;
    width: 100%;
}

div.alert {
    white-space: normal; /* allow word breaks on white space */
    font-size: 24px;
}

table, th, td {
    border: 1px solid #64451b; /* dk brown */
    border-collapse: collapse;
}