:root {
    --bg: #7c7c7c;
    --bg-cell: #f2f2f2;
    --filled-bg: #d9d9d9;
    --text-color: #222222;
    --alt-text-color: #ffffff;

    --highlighted: #fff3e5;
    --selected: #ffdbb3;
    --error: #ff8c8c;
	
	--screen-size:35%;

    --cell-size: 8vmin;
    --border-radius: 0.5vmin;
    --gap: 0.5vmin;

    --font-size: 3vmin;
}
@media (max-width: 400px) {
    :root {
        --screen-size: 0%;
    }
}

@media (min-width:401px) and (max-width: 500px) {
    :root {
        --screen-size: 15%;
    }
}

@media (min-width:501px) and (max-width: 600px) {
    :root {
        --screen-size: 20%;
    }
}

@media (min-width:601px) and (max-width: 700px) {
    :root {
        --screen-size: 25%;
    }
}

@media (min-width:701px) and (max-width: 800px) {
    :root {
        --screen-size: 30%;
    }
}


.modal:hover {
    opacity: 1;
}


.hide {display:none;}
.show {display:block;}


.modal-controls, .modal-control, .modal-title, .modal-left, .modal-right {
    display: inline-block;
}
.modal_header
{
	font-family: arial;
	font-size: 20px;
	font-weight: bold;
	color: #C00;
}

.modal_text
{
	font-family: arial;
	font-size: 14px;
	font-weight: bold;
	color: black;
}
#dim-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 1000;
    pointer-events: auto;
}

#global-options-dlg {
    opacity: 1.0;
    position: absolute;
    top: 30%;
    left: var(--screen-size);
    width: 21em;
    height: 23em;
    z-index: 1001;
    background: black;
    border-radius: .75em;
    padding: .3em;
    color: white;
    border: #191919 solid .15em;
    box-shadow: #3b3b3b .1em .1em;
    pointer-events: auto;
}

#global-options-dlg1 {
    opacity: 1.0;
    position: absolute;
    top: 30%;
    left: 40%;
    z-index: 1001;
    background: black;
    border-radius: .75em;
    padding: .3em;
    color: white;
    border: #191919 solid .15em;
    box-shadow: #3b3b3b .1em .1em;
    pointer-events: auto;
}

#global-message-dlg {
    opacity: 1.0;
    position: absolute;
    top: 40%;
    left: var(--screen-size);
    z-index: 1001;
    background: #000000a8;
    border-radius: .75em;
    padding: .3em;
    color: white;
    border: #191919 solid .15em;
    box-shadow: #3b3b3b .1em .1em;
    pointer-events: auto;
}

#global-options-header {
    width: 100%;
    height: 1.5em;
    position: relative;
    background-color: #161600;
    border-top-left-radius: .75em;
    border-top-right-radius: .75em;
    padding: 0 .2em;
    margin: -.2em -.2em -.2em -.2em;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
	text-align: center;
}

#global-message-header {
    width: 100%;
    height: 1.5em;
    position: relative;
    background-color: #161600;
    border-top-left-radius: .75em;
    border-top-right-radius: .75em;
    padding: 0 .2em;
    margin: -.2em -.2em -.2em -.2em;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
	text-align: center;
}

#global-options-header:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

#global-options-close-btn {
    cursor: default;
    border-radius: .3em;
    padding: 0.1em;
}

#global-options-close-btn:hover {
    background: white;
    color: black;
}

.global-options-section {
    border-radius: .5em;
    margin-bottom: -.25em;
    padding: .4em;
	margin-left: auto;
    margin-right: auto;
}

.global-options-section legend {
    font-size: 1em;
    color: white;
    display: block;
	margin-left: auto;
    margin-right: auto;
    padding-bottom: 18px;
}

.global-options-section button {
    width: 100%;
}

/* Global Options Dlg */

/* Custom Buttons */
/* http://www.bestcssbuttongenerator.com/ */
button {
    border-radius: .3em;
    background-color: #191919;
    color: white;
    border: gray solid .1em;
    font-family: Roboto, "Roboto", sans-serif;
    padding: 3px 30px 3px 30px;
}

button:hover {
    background-color: black;
}

button:disabled {
    background-color: #4e4e4e;
    color: #797979;
}

/* Custom Buttons */


.soundimg{
    width: 40px;
}

.message-table{
width: 100%;
}

.message-td{
width:50%;
}
.Score-itog{
  text-align: center;
  vertical-align: middle;
}