* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    width: 100%;
    font-size: 16px;
    flex-direction: column;
    background-color: #D1D6D8;
    display: flex;
}
body.light {
    background-color: #fff;
}
img {
    border: none;
}
p
{
	margin-top: 0px;	
	margin-bottom: 8px;
}
p:last-child
{
	margin-bottom: 0px;
}
textarea
{
	font-family: Arial, helvetica, Sans-Serif;
}
table
{
	border-spacing: 0px;
}
input[type='text']
{
	margin: 0px;
	padding: 0px;
}
h5 {
    margin: 0px;
}
#navContent
{
    position: fixed;
    top: 32px;
    bottom: 0px;
}
#top-menu
{
	width: 100%;
	background-color: #18121e;
	color: #fff;
	top: 0px;	
    display: flex;
    position: relative;
}
a.logo {
    flex: 1 1;
    display: flex;
}
a.logo img {
	padding: 2px;
}
.italic {
    font-style: italic;
}
.error,
.info {
    text-align: center;
    font-weight: bold;
    width: 100%;
    padding: 4px;
}
div.error:empty,
div.info:empty {
    display: none;
}
.error {
    color: red;
}
.info {
    background-color: #fff3c4;
    color: #ca5e16;
}
div.main-wrap 
{
    margin: auto;
    max-width: 800px;
    margin-bottom: 10px;
}
#debug {
    margin: auto;
    border: 1px solid #ccc;
    position: relative;
    color: #666;
    font-family: Courier New, Monospace;
    margin-top: 0px;
    padding: 8px;
    display: none;
}

#debug .log-error {
    color: #aa6666;
}

#debug-wrap {
    background-color: #eee;
    margin: 8px auto;
    position: relative;
    max-width: 90%;
}
#debug-wrap .debug-header {
    background-color: #A5B9C0;
    padding: 4px;
    font-size: 15px;
    border: 1px solid #ccc;
    cursor: pointer;
}
#debug-wrap .debug-show {
}
#debug-wrap .debug-hide {
    display: none;
}
div#debug div {
    border: 1px solid #ccc;
}
div.blocks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    margin: 30px 0px 0px 30px;
}
div.blocks.single {
    flex-direction: column;
}
.big-button {
    padding: 8px 16px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #555;
}
.big-button:hover {
    text-decoration: underline;
    border-color: #bbb;
}
div.blocks .widget {
    background-color: #233237;
    color: #eac67a;
    flex: 1 1;
    margin: 0px 30px 30px 0px;
}
div.blocks .widget p {
    font-size: 14px;
    margin-right: 8px;
}
div.blocks .widget .decks p {
    font-size: 13px;
}
div.blocks .widget a {
    color: #fff;
}
div.blocks .widget .big-button {
    background-color: #355CAF;
    color: #eac67a;
    margin: 0px 0px 0px 0px;
    display: inline-block;
}
div.blocks .widget h1 {
    color: #fff3c4;/*#eac67a;*/
    margin: 0px 0px 8px 0px;
}
div.blocks .widget.review h1 {
    margin: 0px;
}
div.blocks .widget h2 {
    color: #fff3c4;/*#eac67a;*/
    margin: 0px 0px 4px 0px;
}
div.blocks.three-up .widget {
    min-width: 300px;
    padding: 16px;
    flex: 1 1 25vw;
}
div.blocks.single .widget {
    min-width: 32vw;
    padding: 16px;
    flex: 1 1 25vw;
}
div.blocks .widget.detail {
    padding: 14px;
}
div.blocks .widget.detail h1 {
    margin-bottom: 4px;
    font-size: 28px;
    padding: 0px;
    line-height: 1;
}
div.blocks .widget .info-detail {
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-right: 20px;
}
#top-menu div.userid
{
	padding: 4px;
	float: right;
}
#top-menu a
{
	color: #fff;
}
#body {
    flex: 1 1;
    overflow: auto;
}
#content,
#body {
    color: #333;
}
#content {
	overflow: hidden;
    min-height: 90%;
}
#content-inner
{
/*	overflow-y: scroll;
	height: 100%;*/
	position: relative;
/*	top: 90px;*/
	left: 0px;
	right: 0px;
	padding: 0px 6px;
}
div.spacer
{
	height: 200px;
}
#info-wrap
{
	height: 27px;
	background-color: #f4f4f4;
	border-bottom: 1px solid #e4e4e4;	
}
#info,
#error
{
	padding: 12px 16px;
	font-weight: bold;
	display: none;
	position: fixed;
	top: 20px;
	left: 20px;
	right: 20px;
	z-index: 99999;
	font-size: 11pt;
    width: auto !important;
}
#info
{
	background-color: #ffffe0;
	color: #666666;
	border: 2px solid #e8e899;
	box-shadow: 5px 5px 10px #000;
	background-image: url('/assets/img/close-small.png');
	background-repeat: no-repeat;
	background-position: right top;
}
#error,
div.error
{
	background-color: #cc3333;
	color: #ffffe8;
}
#error
{
	border: 2px solid #880000;
	box-shadow: 5px 5px 10px #000;
	background-image: url('/assets/img/close-small-white.png');
	background-repeat: no-repeat;
	background-position: right top;
}
div.error
{
	padding: 6px 8px;
	font-weight: bold;
}
div.dialog
{
	margin: auto;
}
div.dialog div.controls
{
	margin: 1px auto;	
}
div.dialog div.controls label
{
	padding-top: 3px;
	color: #333;
}
div.dialog div.controls label,
div.dialog div.controls input
{
	float: right;
}
div.dialog h2
{
	text-align: center;
	background-color: #3030c0;
	font-size: 11pt;
	color: #fff;
	margin: 0px;
	padding: 2px;
}
.main-wrap h1,
.main-wrap h2,
.main-wrap h3 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 4px;
    color: #00c0ff;
}
.main-wrap h2
{
}
.main-wrap h3
{
}
.main-wrap h1 {
    color: #034A61;
}
form input.ui-spinner-input,
x form input
{
	color: #00a;
	font-size: 9pt;
}
.rpg-header-wrap{
	margin: 0px;
	padding: 0px;
	color: #369;
	font-size: 15px;
	background-color: #e0e0e8;
	padding: 5px;
	vertical-align: bottom;
    font-weight: bold;
}
.rpg-header-wrap div#cp,
.rpg-header-wrap div#cpa
{
	float: right;
	margin-left: 10px;
}
.rpg-header-wrap div.title
{
	float: left;
}
.rpg-header-wrap div.character
{
	float: left;
	margin-left: 10px;
	margin-top: 2px;
	font-size: 14px;
	color: #666;
}
form label
{
	color: #333;
	padding-right: 6px;
}
th
{
	font-size: 8pt;
	border-bottom: 1px solid #ccc;	
}
td
{
	font-size: 8pt;
}
td.center,
th.center
{
	text-align: center;
}
.right
{
	text-align: right;
}
.float-left
{
	float: left;
	margin-right: 12px;
}
div.nav-bar
{
	margin: 0px;
	background-color: #e0e0e0;
	padding: 3px;
	height: 33px;
	overflow: hidden;
	font-size: 14px;


}
div.nav-bar-right
{
	float: right;
}
div.nav-bar-right .button
{
	float: left;
}
div.nav-bar-left
{
	float: left;
}
div.nav-bar-left input
{
	float: left;
}
div.nav-bar-left div
{
	float: left;
/*	border: 1px solid #ddd;*/
	padding-left: 8px;
}
div.nav-bar-left div span
{
	font-weight: bold;
	float: left;
	display: inline-block;
	padding-top: 4px;
}
input[type='text'][readonly]
{
	color: #aaa;
}
.negative
{
	color: #C11B17;
}
span.restricted1
{
	color: #F88017;
}
span.restricted2
{
	color: #F62817;
}
table.grid
{
	border-collapse: collapse;
	background-color: #fcfcfc;
}
table.grid td
{
	border: 1px dotted #ccc;
}
table.grid tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}
table.aspect-chart tr td:first-child
{
	font-weight: bold;
}
td.int
{
	text-align: center;
}
table.grid td div.pts
{
}
table.grid td div.pts div.ptvalue
{
	float: right;
	padding: 1px 4px;
	border: 1px solid #eee;
}
.help
{
	font-size: 9pt;
	background-color: #f4f4ff;
	padding: 8px;	
}
tr.help
{
	background-color: #f4f4f4;
}
.fleft{
    float: left;
}
.fright{
    float: right;
}
.detail-section.medium,
.help.medium
{
	max-width: 1200px;
}
.detail-section.large,
.help.large
{
	max-width: 1500px;
}
.detail-block
{
	border: 1px solid #ddd;
	padding: 6px;
/*	font-weight: bold;*/
	margin-bottom: 6px;
}
.detail-subblock
{
	padding: 6px;
/*	font-weight: bold;*/
	margin: 10px 0px;
	background-color: #f8f8f8;
	box-shadow: 2px 2px 4px #bbbbee;
}
.detail-subblock.small
{
	max-width: 600px;
}
.detail-block h3
{
	margin: 0px 0px 8px 0px;
	padding: 0px;
	text-decoration: underline;
	font-size: 16px;
}
.detail-block h4
{
	margin: 0px 0px 8px 0px;
	padding: 0px;
	color: Navy;
	border-bottom: 1px solid #ccc;
	font-size: 11pt;
}
.data-section
{
	margin-top: 8px;
}
.data-section {
    max-width: 1000px;
}
.detail-block .button{
    max-width: 200px;
    margin-auto;
}
.not-implemented
{
	font-family: Times New Roman, Serif;
	font-style: italic;
	color: brown;
}
.dialog .error
{
	display: none;
}
#main-campaign
{
	margin: 10px 20px;
}
#main-campaign h2
{
    padding: 8px;
    font-size: 24px;
	color: #567;
    margin: 2px 0px;
}
th.type-detail
{
	white-space: normal;
	word-wrap: break-word;
	font-weight: normal;
	font-size: 8pt;
	font-style: italic;
}
th.typeHeader,
.character-page .table-wrap h3,
.character-main .table-wrap h3 {
    background-color: #1e2182;
    color: #fff;
    margin: 0px;
    padding: 0px 2px;
    font-size:8pt;
}
div.label-data
{
	font-weight: bold;	
	color: Navy;
}
div.label-data span
{
	color: #444;
	font-weight: bold;
	font-size: 8pt;
	font-style: italic;
	padding-right: 8px;
}
div.ctitle
{
	float: left;
}
.ui-widget-overlay {
    background: #024;
    opacity: 0.18;
}
.header-menu
{
    top: 0px;
}
#user-menu {
    flex: 1 1;
    align-self: center;
    text-align: right;
    padding: 4px;
    vertical-align: middle;
    align-content: right;
    justify-items: right;
}
#user-menu a.due,
.highlight .circle,
#user-menu a.user,
.button-a 
{
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    padding: 4px 10px;
    background-color: #346B80;
    border-radius: 15px;
    color: #fff;
    border: 1px solid #555;
    margin-left: 5px;
}
.widget .list .game-row.turn-due {
    background-color: #a3292d;
}
div.blocks .widget a.circle,
.highlight .circle {
    background-color: #eac67a;
    color: #233237;
    margin-left: 0px;
}
div.blocks .widget .big-button.nudge,
div.blocks .widget .big-button.skip,
#user-menu a.due {
    background-color: #AB2C2F
}
#user-menu a.due:hover,
#user-menu a.user:hover,
.button-a:hover
{
    color: #FFF8BA;
    border-color: #bbb;
    cursor: pointer;
}
#user-menu a.due:hover {
    color: #F3E881;
}
div.ui-tooltip {
    max-width: 100px;
    width: 200px;
}
.report-wrap
{
	margin: 20px;
}
.report-wrap table td
{
	text-align: center;
	padding: 2px 4px;
}
.report-wrap table tbody tr:nth-child(odd) {
   background-color: #f8f8fc;
}
.report-wrap table tbody tr td:first-child {
   font-weight: bold;
   border-right: 1px solid #ddd;
}
.report-wrap table thead tr.top-head th:first-child {
   border: none;
}
.report-wrap table td.highlight1 {
   background-color: #e0e0f0;
}
.report-wrap table td.highlight2 {
   background-color: #d0d0e0;
}
#left-nav .input,
#left-nav .button
{
    width: 180px;
    margin: 5px auto;
}
div.inset 
{
    margin-left: 20px;
}
div.one-column {
    display: flex;
    flex-direction: column;
}
div.one-column > div {
    margin-top: 0px;
}
.inline-modal {
    margin: 0;
    padding: 0px;
}
.inline-modal h3{
    margin: 0px;
    padding: 3px 6px;
    color: #fff;
    background-color: #3333aa;
    text-align: center;
    font-size:11pt;
}
.inline-modal .inline-content {
    margin: 10px;
}
.form-small .inline-modal .button-bar {
    display: block;
    width: 90%;
    margin: auto;
}
.form-small .inline-modal .button-bar .button {
    min-width: 100px;
    display: inline;
    width: auto;
}
.button-bar > * {
    display: inline-block;
}
#debug {
    font-size: 13px;
}
#debug h3 {
    font-size: 13px;
    margin: 0px;
}
#debug h4 {
    font-size: 13px;
    margin: 0px;
    font-weight: normal;
    overflow: hidden;
    height: 19px;
}
.left {
    text-align: left;
}
.red {
    color: red;
}
.organe {
    color: darkorange;
}
.blue {
    background-color: blue;
    color: #fff;
}
.orange {
    color: darkorange;
}
.yellow {
    color: yellow;
    background-color: #333;
}
.purple {
    background-color: rebeccapurple;
    color: #fff;
}
.green {
    color: green;
}
.no-wrap
{
    text-wrap: none;
}
.no-wrap .button-small {
    margin: 0px 1px;
}
.widget ul.widget-menu {
    list-style: none;
    padding: 15px;
    margin: 0px;
    background-color: #A4C2B8;
    display: flex;
    flex-flow: row wrap;
}
.widget ul.widget-menu li {
    flex: 1 1 50%;
    min-width: 180px;
}
.widget ul.widget-menu li a {
    color: #18121e;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    display: block;
}
.widget ul.widget-menu li a:hover {
    text-decoration: underline;
    background-color: #BFD4DB;
}
div.blocks .widget .important {
    color: #D46A1C;
    padding-left: 5px;
}
.widget .internal:empty{
    display: none;
}
.widget .internal,
.widget .status,
.widget .buttons,
.widget .list {
    margin-top: 10px;
    padding: 10px;
    padding-bottom: 16px;
}
.widget .list {
    background-color:#818a9c;
    padding-bottom: 10px;
}
.widget .internal {
    background-color: #315C4E;
    color: #FFF8BA;
}
.widget .status {
    background-color: #51638a;
    color: #B8DEB8;
}
.widget .buttons {
    padding: 0px;
}
div.blocks .widget .status h2,
div.blocks .widget .internal h2 {
    color: #FBF2D4;
    margin: 0px 0px 8px 0px;
}
.widget .internal input {
    text-decoration: underline;
    color: darkblue;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    max-width: 100%;
    margin-right: 5px;
    border-radius: 4px;
    border: none;
    margin-bottom: 10px;
    display: inline-block;
}
.widget .internal .link {
    width: 300px;
}
.widget .internal .code {
    width: 80px;
}
.widget .game-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.widget .player-row h3,
.widget .game-row h3,
.widget .internal h3 {
    margin: 0px;
    font-size: 15px;
}
.widget .game-row h3 {
    font-size: 16px;
    min-width: 100%;
    color: #fff3c4;
}
.widget .game-row h4 {
    margin: 0px;
    font-size: 13px;
    min-width: 100%;
}
.widget .list .game-row,
.widget .list .player-row {
    margin-bottom: 8px;
    background-color: #51638a;
    padding: 6px;
    color: #fff;
    display: flex;
}
.widget .player-row > h3
{
    flex-basis: 100%;
}
.widget .list .button-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.widget .player-row .info-detail,
.widget .list .game-row .info-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 4 1;
}
.widget .list .game-row .button-a {
    flex: 0 0;
}
.widget .list .game-row .info-detail p {
    flex: 1 1;
    margin-right: 8px;
    margin-bottom: 0px;
}
.widget .list .game-row:last-child,
.widget .list .player-row:last-child {
    margin-bottom: 0px;
}
.widget .list .game-row.waiting,
.widget .list .player-row.open {
    background-color: #8A5F4A;
}
.widget .list .player-row .info-detail {
    font-weight: normal;
}
.widget .game-display .list.games,
.widget .list.decks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 0px;
    padding-right: 0px;
}
.decks .deck {
    min-width: 114px;
    min-height: 165px;
    background-color: #fff;
    color: #000;
    flex: 0 0;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 6px;
}
.widget .game-display .list.games {
    background-color: #3c555d;
}
.widget .game-display .list.games .game {
    background-color: #787e8c;
    color: #eac67a;
}
.games .game {
    min-width: 218px;
    background-color: #fff;
    color: #000;
    flex: 0 0;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 6px;
}
.games .game img {
    max-width: 206px;
    max-height: 310px;
}
.games .game h3,
.decks .deck h3 {
    margin: 0px;
    font-size: 17px;
}
.games .game h3 {
    color: #fff3c4;
}
.games .game h3 a,
.games .game h3 a:active,
.games .game h3 a:visited,
.games .game h3 a:hover {
    color: #fff3c4;
}
.games .game h3 a:hover {
    text-decoration: none;
}
.drawing-wrap h4,
.games .game h4,
.decks .deck h4 {
    margin: 0px;
    font-size: 14px;
}
.games .game h4 {
    font-size: 13px;
    color: #bed3da;
    margin-bottom: 6px;
}
.drawing-wrap h4 {
    color: #fff;
}
.drawing-wrap h5 {
    max-width: 210px;
    min-height: 2.5em;
    color: #fff3c4;
}
img.mini {
    height: 72px;
    width:  48px;
}
.game-row img {
    margin-right: 6px;
    margin-bottom: 6px; 
}
.decks .deck p {
    color: #333;
    font-size: 13px;
    margin: 0px;
}
.decks .deck.you p {
    color: #252BFF;
    font-weight: bold;
}
.info-detail h3 {
    margin: 0px;
    font-size: 17px;
}
.info-detail h4 {
    margin: 0px;
    font-size: 14px;
}
.info-detail h5 {
    color: #80a8ff;
    margin: 0px;
    font-size: 16px;
}
.info-detail p {
    font-size: 12px;
    font-weight: normal;
}

div.blocks .widget .deck .big-button,
div.blocks .widget .turn .big-button {
    color: #fff;
    margin: auto;
    display: block;
    text-align: center;
    margin: 10px;
}
.deck-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.widget .subwidget,
.deck-list .deck {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #3c555d;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 20px;
}
.widget .subwidget {
    max-width: 500px;
}
div.blocks .widget .subwidget h2 {
    color: #b4c3e4;
    width: 95%;
}
div.with-p,
img.with-p {
    margin-bottom: 8px;
}
div.with-p {
    display: flex;
    flex: 1 1 100%;
    flex-flow: row wrap;
}
div.with-p p {
    min-width: 50%;
    flex: 1 1;
}
div.with-p img {
    margin-right: 8px;
}
.subwidgets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.subwidgets .subwidget {
    flex: 1 1 450px;
    margin: 0px 16px 16px 0px;
    display: block;
}
.subwidgets .subwidget img {
    flex: 0 0;
}
.deck-list .deck h3 {
    margin: 0px 0px 4px 0px;
    font-size: 20px;
}
div.blocks .widget .game-detail h2 {
    margin: 0px 0px 0px 0px;
    color: #98B9C4;
    font-size: 24px;
}
.game-detail h4 {
    margin: 0px 0px 0px 0px;
    font-size: 14px;
}
.game-detail p {
    font-size: 13px;
}
.game-detail {
    margin-bottom: 12px;
}
.deck-list .deck .deck-detail {
    min-width: 100%;
    margin-bottom: 8px;
}
.drawing-list .drawing-wrap,
.deck-list .turn-wrap {
    background-color: #818a9c;
    padding: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
}
.deck-list .turn {
    width: 287px;
    height: 425px;
}
.deck-list .turn,
.turn .deck {
    background-color: #fff;
    color: #000;
    flex: 0 0;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 6px;
    flex: 0 0 275px;
}
.deck-list .turn {
    width: 218px;
    height: 321px;
}
.drawing-wrap img,
.deck-list .turn img {
    width: 206px;
    height: 309px;
}
.deck-list .turn-wrap .turn {
    margin: 0px;
}
.deck-list .turn {
    flex: 0 0 287px;
}
.list.turn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.widget .emph {
    font-style: italic;
    color: #EAE17A;
}
.deck-list .turn .deck-text,
.turn .deck .deck-text {
    /*    width: 100%;
    height: 100%;*/
    border: none;
    text-align: center;
    vertical-align: middle;
    font-size: 28px;
    font-weight: bold;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #000;
}
.deck-list .turn .deck-text,
.small-screen .deck-list .turn .deck-text,
.small-screen .turn .deck .deck-text {
    width: 100%;
    height: 100%;
}
div.blocks .widget.w2 {
    flex-basis: 60%;
}
.drawing-list {
    display: flex;
    flex-flow: row wrap;
}
.review .deck-list .turn-wrap .turn {
    width: 164px;
    height: 243px;
}
.review .deck-list .turn img {
    width: 156px;
    height: 235px;
}
.review .deck-list .turn {
    padding: 4px;
}
.review .deck-list .turn .deck-text {
    font-size: 20px;
}
.review .deck-list .turn-wrap {
    padding: 6px;
    margin-right: 8px;
}
div.blocks .widget.review h1 {
    margin: 0px;
    font-size: 27px;
}
div.blocks .widget.review .game-detail h2 {
    font-size: 20px;
}
.review .deck-list .deck h3 {
    margin: 0px 0px 0px 0px;
    font-size: 17px;
}
.review .game-detail h4 {
    font-size: 13px;
}
.turn .deck .controls {
    flex: 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/*literally, .literally * {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    min-height: initial;
}*/
canvas.color-picker {
    border: 1px solid #666;
    width: 255px;
    height: 10px;
    flex: 0 0;
}
.deck-img, 
canvas.draw {
    border: 1px solid #666;
}
.deck-text,
.deck-img,
canvas.draw {
    width: 264px;
    height: 396px;
    flex: 0 0;
}
local .small-screen .deck-text,
.small-screen .deck-img,
.small-screen canvas.draw {
    width: 220px;
    height: 330px;
    flex: 0 0 220px;
    min-width: 220px;
}
/*.small-screen .review .deck-img,
.small-screen .review canvas.draw {
    width: 156px;
    height: 235px;
    flex: 0 0 156px;
    min-width: 156px;
}*/
.small-screen .deck {
    width: 232px;
    height: initial; /*342px;*/
    flex-basis: initial; /*232px*/
    max-height: 342px;
}
/*.small-screen .review .deck {
    max-width: 95%;
    height: initial; 
    max-height: initial;
    margin: auto;
}*/
canvas.color-picker {
    border: 1px solid #666;
    width: 255px;
    height: 10px;
    flex: 0 0;
}
.color-swatch {
    width: 100%;
    border: 1px solid black;
    min-height: 25px;
    min-width: 100px;
    margin-bottom: 6px;
}
.draw-sys i,
.draw-tool i {
    font-size: 24px;
}
.draw-sys,
.draw-tool {
    border: 2px solid #bbb;
}
.draw-tool.selected {
    background-color: #346B80;
    color: #fff;
    border: 2px solid #233237;
}
input[type=range] {
    -webkit-appearance: none;    
    margin: 2px 0px;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 15px;
    padding: 0px;
}
input[type=range]::-moz-range-track {
    height: 15px;
}
input[type=range]::-ms-track {
    height: 15px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    background: #ccc;
    height: 15px;
    width: 15px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    background: #ccc;
    margin-top: -1px;
}
input[type=range]::-ms-thumb {
    border: none;
    background: #ccc;
}
#tool_brush_red,
#tool_brush_red::-webkit-slider-runnable-track {
    background: red;
}
#tool_brush_red::-moz-range-track {
    background: red;
}
#tool_brush_red::-ms-track {
    background: red;
}
#tool_brush_green,
#tool_brush_green::-webkit-slider-runnable-track {
    background: green;
}
#tool_brush_green::-moz-range-track {
    background: green;
}
#tool_brush_green::-ms-track {
    background: green;
}
#tool_brush_blue,
#tool_brush_blue::-webkit-slider-runnable-track {
    background: blue;
}
#tool_brush_blue::-ms-track {
    background: blue;
}
#tool_brush_blue::-moz-range-track {
    background: blue;
}




.play-turn .controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1;
    align-items: flex-start;
}
.play-turn {
    font-size: 11px;
}
.play-turn .slider {
    width: 255px;
    max-width: 100%;
    min-width: 100px;
    margin-bottom: 6px;
}
.play-turn .tools {
    max-height: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
}
.decks .deck p.completed {
    font-weight: bold;
    color: darkgreen;
}
#local_message {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    right: 0;
    bottom: 0;
    flex: 0 0 100%;
    text-align: center;
    display: none;
    background-color: #fff3c4;
    color: #ca5e16;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
#local_message a {
    margin-left: 10px;
    color: #0E806D;
}

.breadcrumbs {
    text-align: left;
    width: 100%;
    margin-right: 30px;
    margin-top: -25px;
    color: #18121e;
    margin-bottom: 5px;
}
.breadcrumbs a {
    color: #355CAF;
    font-weight: bold;
    font-size: 14px;
    margin-right: 8px;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
h3 a {
    color: inherit;
    text-decoration: none;
}
h3 a:hover {
    text-decoration: underline;
}

.play-turn .control-wrap {
    display: flex;
    flex-direction: column;
}

.import-instruct,
.import-instruct p {
    font-size: 14px;
    color: #F57973;
    font-weight: bold;
}

.review label.img-check {
    font-size: 14px;
    margin-top: 3px;
}

.review .form-sub div.input.check-list {
    flex-direction: column;
    color: #fff;
}

.review .form-sub div.input.check-list .pair > * {
    display: inline-block;
}

.review .form-sub div.input.check-list .pair label {
    width: 100px;
    margin-right: 8px;
}

.review .form-sub div.input.check-list .pair p {
    margin-bottom: 4px;
    color: #eac67a;
}
.buttons a,
.buttons button {
    margin-right: 8px !important;
}
.slide-wrap span {
    display: block;
}
.decks .deck.you p.overdue,
.decks .deck p.overdue {
    color: #cc0000;
}
i.large-icon {
    font-size: 28px;
    margin-right: 8px;
    margin-bottom: 8px;
    color: #fff;
}
.orangey {
    color: #eac67a;
}
.greeney {
    color: #8cd9bf;
}
.info-note {
    font-style: italic;
    color: #ff974d;
}
img.gallery-small {
    width: 30%;
    height: 30%;
}

.preventVSfromScrewingLayout below {
}


@media all and (max-width: 700px) {
    div.blocks {
        margin: 15px 0px 0px 15px;
    }

    div.blocks .widget {
        flex: 1 1 300px;
        min-width: 300px;
        margin: 0px 15px 15px 0px;
    }

    div.blocks.single .widget {
        flex: 1 1 300px;
        min-width: 300px;
    }

    div.blocks .widget.detail {
        padding: 12px;
    }

    .play-turn .text-wrap {
        height: initial;
        display: none;
    }

    .play-turn .tool-select {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        flex: 0 1 40px;
        max-width: 40px;
    }

    .play-turn .tool-select button {
        flex: 0 1 40px;
    }

    .play-turn .slide-wrap,
    .play-turn .cpick-wrap,
    .play-turn .cpick-wrap canvas,
    .play-turn .color-wrap {
        max-width: 150px;
        flex: 0 1 100px;
    }
    .play-turn .tools {
        max-height: initial;
    }
    .play-turn .tools.moved {
        flex-direction: row;
        display: flex;
    }
    div.blocks .widget .info-detail p {
        font-size: 12px;
    }
}

@media all and (max-width: 500px) {
    #content {
        width: 100%;
    }
    div.blocks {
        margin: 8px 0px 0px 8px;
    }

    .play-turn .text-wrap.previous {
        display: none;
    }

    div.blocks .widget h2 {
        font-size: 16px;
    }

    .info-detail p {
        display: none;
    }

    .info-detail h5 {
        font-size: 14px;
    }

    div.blocks.single .widget {
        padding: 8px;
    }

    div.blocks .widget {
        margin: 0px 8px 8px 0px;
    }
    .subwidgets .subwidget img {
        max-width: 97%;
    }
    div.blocks .widget p {
        font-size: 13px;
    }
    div.blocks .widget .decks p {
        font-size: 12px;
    }
    div.list.turn {
        padding-right: 0;
        padding-left: 7px;
    }
    div.turn-draw div.blocks div.widget {
        padding-left: 0;
        padding-right: 0;
    }
}
p.highlight {
    color: white;
}
div.with-p p.highlight {
    flex: 60%;
}
p.turn-due {
    font-weight: bold;
}
p.turn-due.over-due {
    color: #f25a5c;
}


@media all and (max-width: 400px) {

    .draw-sys i, .draw-tool i {
        font-size: 16px;
    }

    .play-turn .deck {
        overflow: hidden;
        flex: 0 0 276px;
        display: flex;
    }

    .small-screen.play-turn .deck {
        flex: 0 0 220px;
        padding: 0px;
        align-self: flex-start;
    }

    .review .deck-list .turn .deck-text,
    .play-turn .turn .deck .deck-text {
        width: 100%;
        font-size: 20px;
        min-height: 100px;
    }

    .play-turn .turn .deck .deck-text {
        min-width: 264px;
    }

    .review .deck-list .turn-wrap .turn {
        height: 55vw;
        width: 38vw;
        overflow-x: hidden;
    }

    .review .deck-list .turn .deck-text {
        height: 52vw;
    }

    .small-screen.play-turn .turn .deck .deck-text {
        min-width: 220px;
    }

    .review .deck-list .turn img {
        width: 35vw;
        height: initial;
        max-height: 53vw;
    }

    .review div.form-sub .input {
        width: calc(100% - 16px);
    }

    .review .deck-list .turn-wrap {
        padding: 5px;
    }

    .small-screen canvas.draw {
        border: none;
    }

    .small-screen .review .deck {
        max-height: initial; 
        width: initial;
    }

    .play-turn .tool-select {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        flex: 0 1 30px;
        max-width: 30px;
    }

    .play-turn .tool-select button {
        flex: 0 1 30px;
        max-width: 30px;
    }

    .play-turn .button-bar {
        flex: 1 1;
    }

    .turn-text div.blocks .widget .controls .big-button {
        margin: 0px;
    }

    .turn-text .controls {
        flex: 1 1 80px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .widget ul.widget-menu li {
        flex-basis: 100%;
    }

    .small-screen .review .deck-img {
        flex: initial;
        min-width: initial;
    }
}

@media all and (max-width: 350px) {
    .play-turn .tools.moved {
        margin: 0px;
    }

    .widget .list {
        padding: 4px;
    }

    .play-turn .tools.moved {
        display: block;
    }

    .turn-text .controls {
        max-width: 50px;
    }

    .turn-text div.blocks .widget .controls .big-button {
        margin: 0px;
        padding: 4px 6px;
        font-size: 15px;
    }

    div.blocks {
        margin-top: 0px;
    }

    .info-detail h5 {
        font-size: 10px;
    }
}