/* patua-one-regular - latin */
@font-face {
  font-family: 'Patua One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/patua-one-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Patua One'), local('PatuaOne-Regular'),
       url('../fonts/patua-one-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/patua-one-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/patua-one-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/patua-one-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/patua-one-v11-latin-regular.svg#PatuaOne') format('svg'); /* Legacy iOS */
}



h2 {
  font-family:  'Patua One';
  font-weight: normal;
}
em {
  display: inline-block;
  background: #e5f1ff;
  border-radius: 4px;
  font-style: normal;
}

a {
  color: #0078ff;
  font-weight: bold;
}

    .dgxl-clipboard:focus {
      outline:  2px solid red;
    }

    body {
      font-family: sans-serif;
    }

    hr {
border: 1px solid #eaecee;
    }

    p {
      margin:  10px 0;
      line-height: 1.6;
    }

    textarea#testarea {
      position:  absolute;
      top:  0;
      left:  0;
      background:  yellow;
      width:  500px;
      height:  200px;
      z-index:  1000;
    }

    .controls {
      margin:  20px 0;
    }

    .controls-table {
      line-height: 1.4;
      width: 100%;
    }

    .controls-table tr.header td {
      padding: 12px 0;
    }

    .controls-table td {
      border-bottom:  1px solid #eee;
      /* vertical-align: top; */
    }

    .controls-table td:first-child {
      min-width: 180px;
    }

    .controls-table div {

    }

    .controls i,
    .controls-table i {
      font-style: normal;
      background:  #ddd;
      padding:  2px 4px;
      border-radius:  2px;
            margin: 4px 0;
                  display:  inline-block;

          width: 20px;
          text-align: center;
    }



    .controls b,
    .controls-table b {
      background:  #ddd;
      padding:  2px 4px;
      border-radius:  2px;
      white-space: nowrap;
      margin: 4px 0;
            display:  inline-block;
            width: 20px;

            text-align: center;

            font-family: 'Patua One';
            font-weight: normal;
    }

    .controls b.mod,
    .controls-table b.mod {
      width:  60px;

    }

    .controls b.act,
    .controls-table b.act {
      width:  60px;
    }

    .controls b.long,
    .controls-table b.long {
      width: 100px;
    }

    html, body {
      
      /* iOS scroll bounce fix... */
      position:  fixed;
      overflow:  hidden;
      height:  100%;


      /* Safari */
      
/*       -webkit-touch-callout: none;
      -webkit-user-drag: none;
      user-drag: none;  */

/*       -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none; */
      
    }

  	body {
  		margin:  0;
  		padding:  0;
  	}

    #decoy {
      position:  absolute;
      top:  0;
      left:  0;
      background:  lightblue;
      width:  200px;
      height:  120px;
      border:  2px solid black;

      display:  block;

      z-index:  1000;

      /* override any user-select */
      -webkit-touch-callout: none;
      -webkit-user-select:  text !important;
      user-select: text !important;

    }

    #app {
      height:  100%;
      width:  100vw;
      position:  relative; /* fixed... */
      overflow:  hidden;
    }

/*     #header {
      display:  flex;
      align-items: center;
      height:  52px;
      padding:  0 8px;
      background:  #77f3ea;
      box-sizing:  border-box;
      border-bottom: 1px solid #48a7a0;
      font-family:  sans-serif;
    } */

    #open-button,
    #save-button {
      display: flex;
      position: relative;
      -moz-user-select: none;
      user-select: none;
    }

    #open-button [type="file"] + label {
/*       border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: none; */
    }

    .extra-options {
      display: none;
      position: absolute;
      top: 100%;
      margin-top: 4px;
      left: 0;
      background: white;
      z-index: 999;
      border-radius: 4px;
      background: white;
/*       border: 2px solid rgb(241, 241, 241);
      border-bottom: 4px solid rgb(241,241,241); */
      padding: 4px 0;
      box-shadow: rgba(0,0,0,.35) 0 1px 4px;
      word-break: 
    }

    .extra-options > div {
      padding: 8px 20px;
      cursor: pointer;
      white-space: pre;
    }

    .extra-options > div:hover {
      background: #0078ff;
      color: white;
    }

    .button-extras {
      box-sizing: border-box;

      cursor: pointer;
      height: 44px;
      border-radius: 6px;
      padding: 0;
      width: 28px;
  /*     margin-left: 6px; */
      display: inline-block;
      
      background: rgb(221, 221, 221);
      border: 2px solid rgb(221, 221, 221);
      border-bottom: 4px solid rgb(201,201,201);
      /* color: #009f7e; */
      text-decoration: none;
      line-height: 44px;
      font-family: monospace;
      font-size: 1.4em;
      font-weight: bold;

      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: none;

      margin-left: -8px;
      position: relative;
    }

    .button-extras div {
      position: absolute;
      width: 20px;
      height: 44px;
      left: 50%;
      margin-left: -4px;
    }

    .button-extras:hover {
      background-color:  rgb(231,231,231);
      border-color:  rgb(201,201,201);
/* 
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-left: 2px solid rgb(201, 201, 201); */

    }

    button,
    [type="file"] + label {

      box-sizing: border-box;

      cursor: pointer;
      height: 44px;
      border-radius: 6px;
      padding: 0 20px;
  /*     margin-left: 6px; */
      display: inline-block;
      
      background: rgb(221, 221, 221);
      border: 2px solid rgb(221, 221, 221);
      border-bottom: 4px solid rgb(201,201,201);
      /* color: #009f7e; */
      text-decoration: none;
      line-height: 44px;
      font-family: monospace;
      font-size: 1.4em;
      font-weight: normal;
      color: black;

    }

    button:hover,
    [type="file"] + label:hover {
      background-color:  rgb(231,231,231);
      border-color:  rgb(201,201,201);
    }


[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}



    button.icon-button,
    button.color-button {
      width:  40px;
      padding:  0;
    }

    .btn-blue {
      background:  #e1f0ff;
    }

    .btn-pink {
      background: #ffe1f0;
    }

    .btn-green {
      background: #f0ffe1;
    }

    #app-header {
      display: flex;
      padding:  0;
      height:  60px;
      align-items:  center;
      /* background:  #2dcfdb; */
      box-sizing: border-box;
      right: 600px;
      position: absolute;
      top: 0;
      left: 0;
      justify-content: space-between;


      border-right: 1px solid #cecece;
    }

    #app-status {
      display: flex;
      align-items: center;
    }

    #app-title {
      font-size: 1.2em;
    }

    #app-title img {
      height: 40px;
      display: block;
    }

    #app-file-name {
      font-size: 1.2em;
      height: 44px;
      line-height: 44px;
      border-radius: 8px;
      padding: 0 20px;
      display: flex;
    }

    #app-file-name:not(.editing){
      cursor: pointer;
      -moz-user-select: none;
      user-select: none;
    }

    #app-file-name:not(.editing):hover {

      background: #f4f4f4;
    }

    #app-save-state {
      font-size: .8em;
    }

    #toolbar {
      padding:  0 8px;
      height:  60px;
      box-sizing: border-box;
      flex-grow:  1;
      display:  flex;
      justify-content:  space-between;
      align-items:  center;

      margin-right: 26px;
    }

  	#main {
  		/* https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d */
/*   		height:  100%;
  		width:  100vw;
  		background:  yellow;
  		position:  relative; /* fixed... */

      position:  absolute;
      top:  0; /* 24 + 48 */
      left:  0;
      right:  0;
      bottom:  0;
      box-sizing:  border-box;
  	}

    #grid {

      position:  absolute;
      top:  60px; /* 24 + 48 */
      left:  0;
      right:  600px;
      bottom:  0;
      box-sizing:  border-box;

    }








/* 
  #pane2 {
    flex-grow:  1;
    overflow-y:  scroll;

    display:  flex;
    flex-direction:  column;
    justify-content: flex-end;
  } */


  #console {
    background:  #fff;
    flex-grow:  0;
    display:  flex;
    flex-direction:  column;

    flex-basis:  600px;
    font-size: 1.1em;

  

  }

    #console {
      position:  absolute;
      top:  0; /* 24 + 48 */
      right:  0;
      width:  600px;
      bottom:  0;
      box-sizing:  border-box;


      font-family: sans-serif;



      /* border-left:  1px solid #abb1b5; */


    }

/*     #console:before {
      content: '';
      border-left: 1px solid #c6c8c9;
      top: 0;
      position: absolute;
      bottom: 0;
      left: -1px;
    }
 */

    #console-handle {
      position: absolute;
      top: 5px;
      left: -28px;
      height: 50px;
      background: #f4f4f4;
      width: 28px;
display: flex;
align-items: center;
      border-radius: 4px 0 0 4px;
      cursor: pointer;
      justify-content: center;
      border: 1px solid #cecece;
      border-right: none;
      box-sizing: border-box;
    }

    #console-handle img {
      width: 18px;
    }

  #console-content {
    position:  absolute;
    top:  60px;
    left:  0;
    right:  0;
    bottom:  32px;
    overflow-y:  scroll;
    padding:  0 48px;
    border-top: 1px solid #cecece;

    border-bottom: 1px solid #cecece;
  }

  .section {
    margin:  40px 0;
  }

  #console-header {
    height: 60px;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    padding: 0 48px;
    font-size: 1.4em;

  }

  #console-header img {
    height: 40px;
    display: block;
  }

  #console-footer {
    position:  absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    line-height: 32px;
    padding:  0 48px;
    font-size: .8em;

    background: #f4f4f4;
  }

  #log {
    flex-grow:  1;
    flex-basis:  340px;
    color:  white;
    overflow-y:  scroll;
    padding:  8px;
    line-height:  140%;

    font-family:  monospace;
    /* white-space:  pre; */
    font-size:  12px;

    white-space: pre-wrap; 
    word-wrap:  break-word;

  }

  #log div {
    margin-bottom:  8px;
  }

  #commandline {
    display:  flex;
    align-items: center;
    flex-basis:  60px;
    border-top:  2px solid #aaa;
    flex-grow:  0;
  }

  #commandline, #commandline input {
    font-size:  20px;
    font-family:  monospace;
    background:  none;
    border:  none;
    color:  white;
    height:  60px;
  }

  #commandline input {
    flex-grow:  1;
    border:  2px solid #aaa;
    padding:  0 4px;
  }


  .eventName {
    background:  #444;
  }

  .eventName-drag {
    background:  #888;
  }



  	#fixed {
  		position:  fixed;
  		bottom:  0;
  		left:  0;
  		background:  pink;
  	}



    #title {
      display:  flex;
      align-items: center;
      justify-content: space-between;
      height:  24px;
      background:  #77f3ea;
      padding:  0 8px;
    }

    h1, h3 {
      margin:  0;
      padding:  0;
      font-weight:  normal;
    }

    h1 {
      font-size:  1em;
    }

    h3 {
      font-size:  .8em;
    }

    #settings {
      position:  absolute;
      top:  0;
      left:  0;
      width:  100vw;
      height:  248px;
      background:  white;
      border-bottom:  1px solid #aaa;
      box-sizing:  border-box;
      padding:  0;
      transform:  translate(0, -248px);
      transition:  transform 0.2s ease;
      z-index:  2;
    }

    #settings.open {
      transform:  translate(0, 0);
    }

    #iOS-easterEgg {
      position:  fixed;
      top:  -40px;
      left:  0;
    }

    .settings-header {
      display:  flex;
      justify-content: space-between;
      align-items: center;
      background:   #77f3ea;
      padding:  4px 8px;
    }

    .settings-title {
      padding:  0;
      font-size:  24px;
    }

    .settings-button {
      width: 40px;
      height:  40px;
      background:  #fff;
      border-radius:  2px;
      text-align:  center;
      line-height:  40px;
      font-size:  28px;
      font-weight:  bold;
    }

    .settings-content {
      padding:  8px;
      height: 200px;
      box-sizing: border-box;
      overflow-y:  scroll;
    }

    #overlay {
      background:  rgba(0,0,0,.5);
      position:  fixed;
      top:  0;
      left:  0;
      right:  0;
      bottom:  0;
      z-index:  1;
      display:  none;
    }

    .subline {
      font-size: .9em;
      font-style: italic;
    }

    #dialog {
      position: absolute;
      top: 33%;
      left: 50%;
      transform: translate(-50%, -33%);
      max-width: 600px;
      width: 100%;
      height: 400px;
      max-height: 100vh;
      background: white;
      z-index: 99999;
      border-radius: 4px;
      display: none;
      box-shadow: rgba(0,0,0,.35) 0 1px 4px;
      border-top: 60px solid #f4f4f4;
      border-bottom: 60px solid #f4f4f4;
      box-sizing: border-box;
    }

    #dialog input {
      width: 100%;
      box-sizing: border-box;
      margin: 24px 0;
      padding: 8px 12px;
      font-size: 1.2em;
    }

    #dialog textarea {
      width: 100%;
      box-sizing: border-box;
      height: 100%;

    }


    .dialog-header {
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: space-between;
      position: relative;
      border-bottom: 1px solid #cecece;
      position: absolute;
      top: -60px;
      left: 0;
      right: 0;
    }

    .dialog-title {
      padding-left: 20px;
      font-size: 1.5em;
      font-family: 'Patua One';
    }

    .dialog-header button {
      width: 40px;
      padding: 0;
      font-size: 2em;
      margin-right: 8px;
    }

    .dialog-content {
      padding: 20px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: 1.1em;
    }

    .dialog-actions {
      position: absolute;
      bottom: -60px;
      left: 0;
      right: 0;
      height: 60px;
      padding: 0 20px;
      display: flex;
      align-items: center;
    }

    textarea#csv-textarea {
      border: 2px solid #cecece;
    }

    textarea#csv-textarea.textarea-error {
      background: pink;
      border-color: red;
    }

    input#url-input {
       border: 2px solid #cecece;
       border-radius: 4px;
    }

    input#url-input.input-error {
      background: pink;
      border-color: red;
    }


/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */

 /* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  /* margin-bottom: 12px; */
  padding-top:  6px;
  padding-bottom:  6px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 50%;
  margin-top:  -12px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 

#touch-input {
  display: none;
}

@media only screen and (max-width: 1000px) {

    #grid {
      right:  0;
    }

    #console {
      display:  none;
      width:  0;
    }

    #grid {
      bottom: 52px;
    }

    #touch-input {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 52px;
      display: flex;
    }

    #touch-input textarea {
      flex: 1;
      box-sizing: border-box;
      padding: 0;
      border: 0;
      font-size: 1.3em;
      border-left: 1px solid #c6c8c9;
      border-right: 1px solid #c6c8c9;
      line-height: 52px;
      padding: 0 8px;
    }



    #cell-coord {
      background: #eaecee;
      width: 56px;
      text-align: center;
      line-height: 52px;
      font-size: 1.3em;
    }

    #app-header {
      right: 0;
    }

    #toolbar {
      margin-right: 0;
    }

    button,
    [type="file"] + label {
      padding: 0 4px;
      font-size: 1em;
    }

    #app-file-name {
      padding: 0;
    }

    #app-file-name input {
      max-width: 35%;
    }

}