.hint {
    font-size: .8em;
    margin-bottom: 2px;
    padding-top: 2px;
    background-color: white;
    border: solid 1px black;


}
/*SVG ELEMENTS*/

svg {
    overflow: hidden;
}

.svgMap {
    display: none;
}


g.q:hover:not(.answered):not(.flashing) polygon:not(.showbefore), g.q:hover:not(.answered):not(.flashing) circle:not(.city):not(.city1):not(.city2):not(.showbefore), g.q:hover:not(.answered):not(.flashing) path:not(.showbefore), g.q:hover:not(.answered):not(.flashing) {
    fill: #37915a;
    stroke-width: 1px;

}

g.q:hover:not(.answered) circle.city {
    stroke-width: 3px;
    stroke-opacity:1;
    /*filter: drop-shadow( -5px -5px 5px #ffffff ); /* Same syntax as box-shadow */
}
g.q:hover:not(.answered) circle.city1 {
    stroke-width: 2px;
    stroke-opacity:1;
    /*filter: drop-shadow( -5px -5px 5px #ffffff ); /* Same syntax as box-shadow */
}





#hints {
    display: inline-block;
    padding: 2px;
    font-size: .8em;
    text-align: center;
    width: 125px;
    margin:0px;
    background-color: white;
        opacity:0.7;    
            word-wrap:break-word;
}

/*SVG ELEMENTS*/

svg {
    overflow: hidden;
}

g.prompted:not(.answered):not(.flashing) polygon, g.prompted:not(.answered):not(.flashing) circle:not(.city):not(.city1):not(.city2), g.prompted:not(.answered):not(.flashing) path {

    fill: #831e5b;


}



g.prompted circle.city, g.prompted circle.city1 {

    fill: #831e5c !important;
}



.svgMap {
    display: none;
}

.river {
    fill: none !important;
}

g.q:hover:not(.answered) .river {
    opacity: 1;
    fill-opacity: 0;
    fill: none;
    stroke-width: 3px !important;
}

#promptInputForm input[type="text"]{
    opacity:0.95;
    border:1px solid black;
    padding:1px;
    width: 127px;
    text-align: center;
    background-color:#cbb4c2;
    margin:0px;
}

.prompt-input-form {
    position: absolute;
    align-items: center;
    width:130px;
    align-self:center;

}


#promptInputForm input[type="button"] {
    opacity:0.7;
    margin:0px;
    width:100%;
    padding:1px;
        width:130px;


}

#promptInputForm input[type="button"]:hover {
    opacity:1;

}

.river {
    stroke-width: 1.5px;
    fill: none;
    stroke: #75b7c7;
    border-width: 3px;
    opacity: 1;
}


g.q:hover:not(.answered) circle.city2 {
    stroke-width: 3px;
    stroke: #FFFFFF;
    stroke-opacity: 0.3;
    opacity: 1;
    fill: none;
}


g.flashing .city2  {
    stroke-width: 5px;
    stroke: #FFFFFF;
    stroke-opacity: 0.3;
    opacity: 1;
    fill: none;
}


g.q:hover:not(.answered) .semitransparent {
    fill-opacity: 0.12;
    fill:#FFFFFF !important; 

}



g.prompted .semitransparent {
    opacity: 0.18;
    stroke-opacity:0;
    fill:#FFFFFF !important; 

}


g.q:hover:not(.answered) .semitransparent2 {
    fill-opacity: 0.2;
    opacity:1;
    stroke-opacity:0;
    fill:#FFFFFF !important; 

}

g.q:not(.answered) .showafter {
    opacity:0.0;
}

g.q .showafter {
    opacity:1;
}






g.q.answered .showbefore {
    opacity:0;
}


#cbVoice {   
    margin-right:10px;

}

#cbSoundOn {   
    margin-right: 10px;

}



.semitransparent.answered {
    stroke-width: 1px;
    stroke: #888888;
    stroke-opacity: 0.1;
    fill-opacity: 0.1;
}



/*polygon.q:hover:not(.answered):not(.flashing), path.q:hover:not(.answered):not(.flashing) {
    fill: #157a3e;
    stroke-width: 0.5px;
}

.q:hover:not(.answered):not(.flashing) polygon, .q:hover:not(.answered):not(.flashing) path {
    fill: #157a3e;
    stroke-width: 0.5px;
}

.hovering:not(.answered):not(.flashing) path {
    fill: #157a3e;
}

.hovering:not(.answered):not(.flashing) polygon {
    fill: #157a3e;
}

    */

.svgLabelText {
    font-size: 13px;
    pointer-events: none;
    opacity: .8;
    font-weight: 200;
    text-anchor: middle !important;
    z-index: 500;
    padding-top: 5px;
}

.svgLabelTextVideo {
    font-size: 20px;
    pointer-events: none;
    opacity: .8;
    font-weight: 200;
    text-anchor: middle !important;
    z-index: 500;
    padding-top: 5px;
    color:#ffffff;

        paint-order: stroke;
    stroke: #000000;
    stroke-width: 0px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity:1;
    font-weight: 800;
}

.labelBkgrd {
    /*  position:absolute !important;*/
    padding-top: 18px;
    pointer-events: none;
    stroke: #c0c0c0;
    stroke-width: 1px;
    stroke-opacity: 0.2;
    opacity: 1;
    z-index: 499;
    rx: 3;
    ry: 3;
}


.labelBkgrd2 {
    /*  position:absolute !important;*/
    padding-top: 18px;
    pointer-events: none;
    stroke: #c0c0c0;
    stroke-width: 1px;
    stroke-opacity: 0.2;
    opacity: 0.7;
    z-index: 499;
    rx: 3;
    ry: 3;
}


.labelBkgrd3 {
    /*  position:absolute !important;*/
    padding-top: 18px;  
    pointer-events: none;
    stroke: #c0c0c0;
    stroke-width: 1px;
    stroke-opacity: 0.2;
    opacity: 1;
    z-index: 499;
    rx: 3;
    ry: 3;
}


.learnClicked path:not(.semitransparent), .learnClicked polygon:not(.semitransparent), .learnedClicked circle {
    transition: fill 0.5s ease;
    fill: #157a3e;
}

.message {
    font-size: 18px;
}




canvas {
    background-color: white;
}

#colorDataForm {
    position: absolute;
    right: 350px;
    width: 350px;
}

#svgWrapper {
    position: relative;
}

.label {
    position: absolute;
    z-index: 410;
    /*  padding: 0px 0px 10px 5px;
        height:25px;*/
    /*  background-image: url('/images/system/mapMarker.png');*/
    background-position: 8px 14px;
    background-repeat: no-repeat;
    pointer-events: none;
    display: inline-block;
    color: black;
    padding: 0px 0px 10px 5px;
}


.tempLabel {
    position: absolute;
    z-index: 9;
    padding: 15px 0px 15px 5px;
    height: 45px;
    /*  background-image:url('/images/system/mapMarkerUpper.png');
    background-position:8px 3px;
    background-repeat:no-repeat;*/
    opacity: .88;
    pointer-events: none;
}


.labelText {
    font-size: 17px;
    color: #000000;
    background-color: #ffffff;
    opacity: 0.8;
    /*padding:3px 3px 3px 3px;*/
    padding: 2px;
    border-radius: 3px;
    pointer-events: none;
}


.tempLabel .labelText {
    background-color: #005000;
    color: #FFFFFF;
    opacity: 0.5;
}


.formItem {
    width: 400px;
    height: 25px;
    margin: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c0c0c0;
    clear: both;
}



.patch {
    float: left;
    margin-right: 15px;
    width: 20px;
    height: 20px;
}

.pixels {
    float: left;
    margin-left: 20px;
    margin-right: 25px;
    width: 100px;
    font-size: 12px;
    font-family: Verdana;
    text-align: right;
}

.formField {
    float: left;
}

#HUDGroup {
    position: absolute;
    width: 100%;
    height: 50px;
    z-index: 550;
    display: none;
    pointer-events: none;
}

#HUDWrapper {
    position: absolute;
    margin: 0px;
    width: 100%;
    height: 36px;
    background-color: #ffffff;
    z-index: 500;
    opacity: 0.5;
    pointer-events: none;
    border-bottom: 1px solid #dddddd;
}

#HUD {
    position: absolute;
    margin: 0px;
    width: 100%;
    font-size: 22px;
    padding: 3px 0px 3px 10px;
    z-index: 510;
    text-align: left;
    color: #000000;
    pointer-events: none;
}

#canvasContainer {
    width: 975px;
    height: 675px;
}

.gamewindow {
    clear: both !important;
}

#gameOptions {
    clear: both;
    height: 5px;

}

#gameModeWrapper {
    padding-left:0px;
    float: left;
    padding-bottom:25px;

}




/*#HUDWrapper:hover
{
 display:none;   
}
*/




/*INFO LABEL*/

.infoLabel {
    position: relative;
    display: table-cell;
    text-align: left;
    max-width: 350px;
    padding: 10px;
    background-color: #ffffff;
    opacity: 0.95;
    color: #353535;
    border-radius: 5px;
    z-index: 500;
}

    .infoLabel img {
        float: left;
        height: 50px;
        margin-right: 7px;
        margin-bottom: 7px;
        opacity: 1;
    }

    .infoLabel #infoText {
        font-size: 0.8em;
        line-height: 0.8em;
    }


.closer {
    position: absolute;
    right: -5px;
    top: -5px;
    width: 13px;
    height: 13px;
    background-color: #ffffff;
    padding-left: 4px;
    padding-bottom: 3px;
    padding-top: 1px;
    overflow: visible;
    border-radius: 12px;
    border: solid 2px #202020;
    font-size: 12px;
    font-weight: bold;
}

    .closer:hover, .infoLink:hover {
        cursor: pointer;
    }

.infoLink {
    color: #ffffff;
    background-color: #339966;
    z-index: 500;
    position: absolute;
    right: -5px;
    top: -5px;
    width: 13px;
    height: 13px;
    padding-left: 5px;
    padding-bottom: 3px;
    padding-top: 1px;
    overflow: visible;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

/*DRAG LABELS*/


#dragLabels {
    clear: both;
    float: left;
    position: relative;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.dragItem {
    position: relative;
    float: left;
    font-size: 13px;
    font-weight: 200;
    color: #000000;
    fill: #EEEEEE;
    background-color: #EEEEEE;
    opacity: .9;
    border-radius: 3px;
    border: 1px solid #c0c0c0;
    margin: 3px 5px;
    z-index: 650;
}



.draggable {
    opacity: 0.2;
}

.dragHandle {
    position: relative;
    float: left;
    font-size: 13px;
    font-weight: 200;
    fill: none;
    opacity: .9;
    border-radius: 3px;
    margin: 3px 5px;
    z-index: 650;
    font-size: 18px;
    cursor: default;
    font-family: 'Arial';
}

.dragInnerHandle {
    position: absolute;
    left: -5%;
    top: -5%;
    background-color: transparent;
    width: 110%;
    height: 110%;
}

.testItem {
    float: left;
    background-color: #dddddd;
    opacity: 0.7;
    padding: 2px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: bolder;
    font-family: Verdana,sans serif;
    color: #000000;
    margin: 20px;
    z-index: 650;
}


.clickedLabel {
    -webkit-box-shadow: 0px 0px 5px 5px rgb(33, 33, 33);
    -moz-box-shadow: 0px 0px 5px 5px rgb(33, 33, 33);
    box-shadow: 0px 0px 0px 5px rgb(33, 33, 33);
}



.qImgWrapper {
    position: absolute;
}

    .qImgWrapper img {
        height: 25px;
    }