/* generic gimik design */

th {
    background: #faebd7;
}

.subtable {
    margin: 0 auto;
    width: 100%;
}

.subheader {
    font-weight: bold;
}
.subheader a {
    font-weight: normal;
}
.blockcontent{
    padding: 1em;
}
.blocktable {
    width: 100%;
    margin-top: 0.5em;
    border-collapse: collapse;
    border: 1px solid black;
}

table.blocktable > tbody >tr > td, table.blocktable >tbody >tr > th {
    border: 1px solid black;
}
table.blocktable > tbody >tr > td {
    padding: 10px;
}

table.inner > tbody >tr > td, table.inner >tbody >tr > th {
    padding: 1px;
}

input[type=submit], input[type=button]  {
  background-color: #6d5d47;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: none;
  color: #faebd7;
  cursor: pointer;
  display: inline-block;
  /* font-family: sans-serif; */
  /* font-size: 100%; */
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  box-shadow: 2px 2px 5px grey;
}
input[type=submit]:disabled, input[type=button]:disabled{
  background-color: #6d5d4760;
  cursor: not-allowed;
}

/* nicer checkboxes */

input[type='checkbox']{
    width: 1em !important;
    height: 1em !important;
    margin: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance:none;
    outline: 2px solid #6d5d47;
    box-shadow: none;
    font-size: 1em;
    text-align:center;
    line-height:1em;
    vertical-align: middle;
}

input[type='checkbox']:checked:after {
	content: '✓';
}
input[type='checkbox']::after {
	content: '';
}
input[type='checkbox']:indeterminate:after {
        content: '-';
}

input[type='checkbox']:indeterminate {
    background-color: #faebd7;
}
input[type='checkbox']:checked {
    background-color: #ac977a;
}
input[type='checkbox'].trs_implied {
    background-color: #faebd7;
}

/* span containing an input (i.e. checkbox or select) with label */
.cmg_inputpspan {
    white-space: nowrap;
}

/* changed input / invalid data */

@keyframes glowing {
    0% {
      background-color: #6d5d47;
      box-shadow: 2px 2px 5px grey;
    }
    50% {
      background-color: #ac977a;
      box-shadow: 2px 2px 5px lightgrey;
    }
    100% {
      background-color: #6d5d47;
      box-shadow: 2px 2px 5px grey;
    }
  }
  
form.invalid_data input[type=submit]  {
    animation: glowing 1300ms infinite;
}


input.input_changed, select.input_changed, textarea.input_changed {
    color: #ff0000;
}
input[type='checkbox'].input_changed {
    outline: 2px solid #ff0000;
    background-color: #d3c1a8;
}
/* sliders */
input[type='range'] {
    accent-color: #6d5d47;
}
input[type='range'].input_changed {
    accent-color: #ff0000;
}


/* value setter buttons */
.valuesetter {
    text-wrap: nowrap;
    border: 1px solid;
    border-radius: 3px;
    background: #faebd7;
    color: #6d5d47;
    padding: 1px 5px;
    margin: 3px;
    line-height: 1.6em;
    text-decoration:none;
    box-shadow: 2px 2px 5px grey;
}

.spacertable, .spacertable td , .spacertable  th {
    border: 0px none;
}

/* magic sticky top headers */

.stickytop1, .stickytop2, .stickytop3 {
    position: sticky;
    border: 1px solid black;
    /* horizontal border workaround */
    /*
    z-index: 2;
    border-bottom: none;
    border-top: none;
    box-shadow: inset 0 2px 0 black, inset 0 -1px 0 black;
    */
}


.stickytop1 {
    top: 0px;
    height: 30px;
    white-space: nowrap; 
    z-index:100; /* tooltips down */
}

.stickytop2 {
    top: 30px;
    height: 25px;
    white-space: nowrap; 
    z-index:97;
}

.stickytop3 {
    top: 55px;
    z-index:98;
}

/* icon styles */
.imgicon {
    vertical-align: bottom;
}
.cntricon {
    border-radius: 50%;
    width: 5px;
    height: 5px;
    padding: 2px;
    background: #fff;
    border: 1px solid #666;
    color: 0;
    text-align: center;
    vertical-align: super;
    font: 8px Arial, sans-serif;
    margin-left: -8px;
}

/* mobile-compatible help tooltip */


[data-mtitle], [mtitle] {
    text-decoration: underline dotted 1px;
    cursor: help;
    position:relative;
}

@keyframes fadeIn {
    0% {opacity:0;}
    35% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    35% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    35% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
    35% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    35% {opacity:0;}
    100% {opacity:1;}
}

[data-mtitle]:after, [mtitle]:after{ 
    content: attr(data-mtitle);
    text-align: left;
    position: absolute;
    pointer-events: none;
    z-index: 9999; 
    top: 100%;
    left: 80%;
    color: #faebd7;
    background-color: #6d5d47;
    border-radius: 8px;
    border: 2px solid;
    width: max-content;
    max-width: 40vw;
    font-style: normal;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    white-space: pre-wrap;
    padding: 4px;
    opacity: 0;
}

.mtitle_right[data-mtitle]:after{
    left: auto;
    right: 20%;
    top: 100%;
}

[mtitle]:after{ 
    content: attr(mtitle);
}

[data-mtitle]:hover::after,  [mtitle]:hover::after{ 
    animation: fadeIn linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
    animation-fill-mode: forwards;
  }

[data-mtitle]:hover, [mtitle]:hover {
    text-decoration: underline solid 2px #6d5d47;
    background-color: #faebd7;
}

/* for the intro */
.cmg_g_intro {
  display: none; /* Hidden by default */
}

/* popup or expand sideways styles */

.cmg_popup, .cmg_ex_right {
    cursor:pointer;
    color:#6d5d47;
    font-weight:bold;
}

.cmg_popup:before {
    content: '\25b2  ';
    font-style: normal;
    white-space: nowrap;
}

.cmg_ex_right:after {
    content: '  \25b6';
    font-style: normal;
    white-space: nowrap;
}
.cmg_ex_right.active:after {
    content: '  \25c0';
    font-style: normal;
    white-space: nowrap;
}


/* expand down styles (must be in a div) */

.cmg_ex_content {
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    overflow: hidden;
}
.cmg_ex_content.active {
    max-height: 5000px;
    transition: max-height 0.5s ease-in-out; 
}
.cmg_ex_content.active.opened {
    overflow: visible;
}

.cmg_ex_header {
  cursor: pointer;
}

.cmg_ex_header:before {
    content: '\25bc  ';
    font-style: normal;
    white-space: nowrap;
}

.cmg_ex_header.active:before {
    content: '\25b2  ';
    font-style: normal;
    white-space: nowrap;
}


/* spare border on small devices */
@media only screen and ( max-width: 640px ) /* 640 */ {
    body{
        margin: 2px;
    }
    
}