:root {
  --primary: #3f51b5;
  --secondary: #9EA8DA;
}

html,body {
    font-family:Verdana,sans-serif;
    font-size:14px;
    line-height:1.5;
    background-color: var(--primary);
    color: white;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

html {
    overflow-x:hidden;
}

img {
    padding: 0px;
    margin: 0px;
    border-style:none;
    vertical-align:middle;
}

h1,h2,h3,h4 {
    text-align: center;
    margin: 0px;
    padding: 0px 0px 2px 0px;
}

h4 { 
    font-size: 14px;
}

p {
    margin-top: 3px;
    margin-bottom: 7px;
    margin-left: 3px;
    width:350px;
    text-align: left;
}

textarea {
    box-sizing: border-box;
    font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:0px;
    font-size: 14px;
    resize: none;
    border: 1px solid black;
}

input {
    padding: 2px;
    margin: 2px;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 4px;
    text-align: left;
    font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:0px;
    font-size: 14px;
}

#pagemessage {
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    text-align:center;
}

.error {
    color: #FEDE00;
}

.message {
    color: white;
}

#headerwrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 53px;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid var(--secondary);
}

#pageheader {
    margin: auto;
    padding: 3px 0px 0px 0px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 360px;
}

#pagebanner {
    margin: auto;
    padding: 0px;
    width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: inline-block;
}

#pageicon {
    width: 50px;
    display: inline-block;
}

#pageavatar {
    width: 50px;
    padding-top: 5px;
    display: inline-block;
}

#pagebanner img {
    margin: auto;
    display: block;
}

#pageicon img {
    margin: auto;
    display: block;
    width: 48px;
    height: 48px;
}

.headshotbanner {
    width: 48px;
    height: 48px;
    position: relative;
    display: inline-block;
}

.headshot {
    width: 48px;
    height: 48px;
    position: relative;
    display: inline-block;
}

.headshot img {
    width: 48px;
    height: 48px;
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
}

.bodyshot {
    width: 48px;
    height: 74px;
    position: relative;
    display: inline-block;
}

.bodyshot img {
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
}

#pagewrapper {
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    left: 0px;
    bottom: 130px;
    padding: 0px;
    margin: 0px;
    width: 100%;
    text-align: center;
    z-index: 9000;
}

#mapbody {
    position: relative;
    text-align: center;
    display: inline-block;
    min-width: 360px;
    width: 100%;
    height: 770px;
    overflow-x: auto;
}

#pagebody {
    display: inline-block;
    margin: auto;
    position: relative;
    text-align: center;
    width: 360px;
}

#pagenav {
    position: fixed;
    z-index: 9000;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 130px;
    padding: 0px;
    border-top: 1px solid var(--secondary);
}

#pagefooter {
    color: #ddd;
    text-align: center;
    font-size: 12px;
    padding: 3px 0px 5px 0px;
    width: 100%;
    margin: auto;
}

/** Fixed head tables **/
.theFixDiv {
    border: 1px solid black;
    border-radius: 8px;
    align: center;
    margin: auto;
    margin-bottom: 4px;
    padding-bottom: 4px;
    width: 360px;
    color: black;
    background-color: white;
    z-index: 200;
    overflow:hidden;
}

.theFixDiv thead {
    position: sticky;
    top: 1;
    background-color: var(--secondary);
    border-collapse: collapse;
    color: white;
    z-index: 100;
}

.theFixDiv tbody {
    overflow-y: auto;
    display: inline-block;
    background-color: white;
    color: black;
    z-index: 300;
}

.theFixTable {
    border-collapse: collapse;
    background-color: white;
    display: inline-block;
    font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:0px;
    font-size: 14px;
}

.theFixTable td, th {
    vertical-align: top;
    padding: 3px;
}

.theFixTable .first {
    padding: 3px 3px 3px 6px;
}

.theFixTable .last {
    padding: 3px 6px 3px 3px;
}

/** End Fixed head tables **/

.right {
    text-align: right;
    vertical-align: top;
}

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

.center {
    text-align: center;
    vertical-align: top;
}


/** Dialogs **/

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#modaldialog {
    z-index: 9800;
}

#modalmapop {
    z-index: 9800;
}

#modalbusy {
    z-index: 9999;
}

#busycontent {
    width: 360px;
    height: 130px;
    top: 195px;
    left: 50%;
    margin-left: -180px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('/3.55/img/gearsT.gif');
}

#mapop {
    width: 360px;
    height: 480px;
    top: 8px;
    left: 50%;
    margin-left: -183px;
    position: absolute;
    color: white;
    background-color: var(--secondary);
    border: 3px solid black;
    border-radius: 10px;
    text-align: center;
}

#mapoptitle {
    padding: 5px;
    font-size: 11pt;
}

#mapopcontent {
    color: white;
    background-color: var(--secondary);
    height: 410px;
}

#dialog {
    width:360px;
    top: 75px;
    left: 50%;
    margin-left: -182px;
    position:absolute;
    background-color: var(--secondary);
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 5px;
}

#dialog input {
    border: 1px solid #7C86B6;
}


#dialogmsg {
    color: white;
    text-align: center;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
}

#dialog .label {
    color: white;
    text-align: left;
    margin-right: 5px;
}

#dialogbuttons {
    background-color: var(--secondary);
    margin-top: 5px;
}

.buttonpanel {
    padding-bottom: 4px;
    padding-top: 4px;
    margin: 0px;
    text-align:center;
}

select {
    text-align: left;
    vertical-align: middle;
    display: block;
    height: 25px;
    width: 140px;
    margin: 2px;
    padding: 3px;
    font-size: 14px;
    color: #333;
    background-color: white;
    background-image: none;
    border: 1px solid black;
    border-radius: 4px;
    -ms-word-break: normal;
    word-break: normal;
}

table {
    text-align: center;
    display: inline-block;
    border: 0px;
}

td {
    text-align: left;
    vertical-align: middle;
}

.label {
    text-align: left;
    vertical-align: middle;
    width: 90px;
}


select:disabled, input:disabled {
    color: white;
    background-color: var(--secondary);
    border: 1px solid black;
    cursor:not-allowed;
    pointer-events:none;
}

a {
    color: var(--primary);
    text-decoration: none;
    background-color:transparent;
    @media (hover: hover) {
	&:hover {
	    color: #efbbff;
	    outline-width:0;
	}
    }
}

.poplink {
    color: white;
    text-decoration: none;
    background-color:transparent;
    @media (hover: hover) {
	&:hover {
	    color: #efbbff;
	    outline-width:0;
	}
    }
}

#pagefooter a {
    color: #ddd;
    text-decoration: none;
    background-color:transparent;
    @media (hover: hover) {
	&:hover {
	    color: #efbbff;
	    outline-width:0;
	}
    }
}

.pagebutton {
    margin: 2px;
    padding:2px 8px 3px 8px;
    border-radius: 6px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
    display:inline-block;
    background-color:inherit;
    color:inherit;
    border:none;
}

.pagetab {
    background-color: black;
    color: white;
    margin: 0px 1px 0px 0px;
    padding: 4px 8px 8px 8px;
    overflow: hidden;
    text-decoration:none;
    text-align:left;
    border-radius: 6px;
}

.pagebutton, .pagetab {
    @media (hover: hover) {
	&:hover {
	    color: black;
	    background-color: #ccc;
	}
    }
}

.gd-normal {
    background-color: black;
    color: white;
}

.gd-control {
    background-color: #ffdd77;
    color: #af5e28;
    border: 1px solid #af5e28;
    @media (hover: hover) {
	&:hover {
	    color: #af5e28;
	    background-color: #fbedc5;
	}
    }
}

.gd-home {
    background-color: crimson;
    color: white;
    @media (hover: hover) {
	&:hover {
	    color: black;
	    background-color: #ccc;
	}
    }
}

.gd-special {
    background-color: #01579B;
    color: white;
}

.dialog-off {
    background-color: #ccc;
    color: white;
    pointer-events:none;
}

.gd-off {
    background-color: var(--secondary);
    color: white;
    pointer-events:none;
}

#pagetabs {
    position: fixed;
    top: 53px;
    padding: 12px 0px 3px 0px;
    margin: 0px;
    border-bottom: 1px solid var(--secondary);
    text-align:center;
    width: 360px;
    display: none;
    overflow: hidden;
}

#tabbody {
    padding: 0px;
    margin: 0px;
    position: relative;
    text-align: center;
    width: 362px;
    min-height: 300px;
    display: inline-block;
}

#gamecontrols {
    display: flex;
    background-color: white;
    color: black;
    justify-content: center;
    align-items: center; 
    width: 360px;
    height: 80px;
    border: 1px solid black;
    border-radius: 8px;
    position: relative;
    text-align: center;
    font-size: 12px;
}

#notes {
    width: 360px;
    height: 80px;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    border-radius: 8px;
    background: white;
    display: none;
    overflow: hidden;
    background-color: white;
    color: black;
}

#gameopp {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
    border-right: 1px solid #bbb;
    height: 80px;
    width: 54px;
}

#gameopp .bodyshot {
    margin-top: 4px;
}

#noteswrapper {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    overflow-y: auto;
    text-align: left;
    height: 80px;
    width: 300px;
}

#gamenotes {
    font-size: 12px;
    height: 80px;
    width: 300px;
    margin: auto;
    display: inline-block;
}

#gamenote {
    width: 320px;
    height: 60px;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 6px;
    background-color: white;
}

.author {
    color: var(--primary);
    display: inline-block;
}

.notedate {
    display: inline-block;
    color: var(--primary);
}

.note {
    color: black;
    background: white;
    display: block;
    margin-bottom: 4px;
}

#togglenotes {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center; 
    height: 22px;
    margin: auto;
    padding-top: 5px;
}

#togglenotes img {
    height: 17px;
    width: 17px;
    padding-left: 10px;
    display: inline-block;
}

.variation {
    margin-top: 3px;
    padding:3px;
    vertical-align: middle;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #bbb;
    border-radius: 6px;
}

.poplabel {
    width: 60px;
}
.popfield {
    width: 200px;
}

.titlefilter {
    width: 120px;
}

.optionfilter {
    width: 90px;
}

.timerfilter {
    width: 75px;
}

#gamebody {
    padding: 0px;
    margin-top: 0px;
    position: relative;
    text-align: center;
    width: 360px;
    min-height: 430px;
    display: inline-block;
}

/* controls */

#scoretable {
    border-collapse: collapse;
    position: relative;
    display: inline-block;
    margin: auto;
    font: 14px;
}

#scoretable td {
    vertical-align: middle;
}

#scoretable .turn {
    width: 25px;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

.turn img {
    width: 17px;
    height: 17px;
    padding: 0px;
    margin: 0px;
}

#scoretable .name {
    text-align: left;
    padding-right: 5px;
    margin: 0px;
}

#scoretable .score {
    text-align: right;
}

.move:hover {
    cursor: pointer;
}

/* For Dictionary Dialog */
#dictLabel {
    height: 20px;
    text-align: center;
    margin: 5px;
}

#dictMessage {
    height: 80px;
    text-align: center;
    margin: 5px;
}

.found {
    color: var(--primary);
}

.notfound {
    color: crimson;
}

.faded {
    opacity: .75;
}

.action {
    width: 20px;
    height: 20px;
}

.actionimg {
    width: 17px;
    height: 17px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

.link {
    color: #ddd;
    text-decoration: none;
    background-color:transparent;
    @media (hover: hover) {
        &:hover {
            color: #efbbff;
            outline-width:0;
        }
    }
}

.pinphoto {
    border: 1px solid white;
    width: 81px;
    height: 81px;
}