/*****************************************/

  /************** TEXT INPUT  **************/

  /************ (mobile first) *************/

  #textinput {
      position: fixed;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      background: rgba(0, 0, 0, .85);
      z-index: 100;
  }

  #textinput #writer {
      position: fixed;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  #textinput #status {
      position: fixed;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }


  #textinput #status .actions {
      display: flex;
      justify-content: center;
      margin-top: var(--HD60px);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
  }

  #textinput #status .actions.active {
      opacity: 1;
      pointer-events: initial;
      transition: opacity 0.3s;
  }


  #textinput #status .actions>div {
      display: none;
      justify-content: center;
      align-items: center;
      height: var(--HD75px);
      min-width: var(--HD240px);
      padding: 0 var(--HD30px) 0 0;
      margin: var(--HD15px);

      font-size: var(--HD24px);
      font-weight: bold;
   
  }

  #textinput #status .actions>div .icon {
      font-size: var(--HD36px);
      margin-right:var(--HD15px);
  }

  #textinput #status .actions>div.active {
      display: flex;
  }

  #textinput .title {
      font-weight: bold;
      text-align: center;
      color: #fff;
      font-size: var(--HD30px);
      margin-bottom: var(--HD45px);
  }

  #textinput .purpose {
      font-weight: normal;
      text-align: center;
      color: #ccc;
      font-size: var(--HD21px);
      margin-bottom: var(--HD75px);
      margin-top: calc(0px - var(--HD75px));
      border-bottom: 1px solid #666;
      padding: 0 var(--HD30px) 0.6em;
      min-width: 50vw;
  }
  #textinput .purpose .meta{
      /* display: block; */
      text-transform: uppercase;
      font-size: 0.8em;
      /* margin-bottom:0.5em; */
      font-weight: bold;
      margin-right:0.3em;
      
  }

  #textinput .title .sub {
      font-weight: initial;
      font-size: var(--HD30px);
      display: block;
  }

  #textinput .sugg-n-errors {
      opacity: 0;
      pointer-events: none;
      color: #f00;
      font-size: var(--HD21px);
      font-weight: bold;
      margin-top: var(--HD18px);
      height: 2em;
      display: flex;
      justify-content: center;
      max-width: 75%;
      transition: opacity .2s;
  }

  #textinput .sugg-n-errors.active {
    opacity: 1;
    pointer-events: initial;
    transition: opacity .2s;
}

  #textinput .sugg-n-errors .btn-suggestion {
    
      font-weight: normal;
      font-size: var(--HD18px);
      margin: 0 var(--HD9px);
      display: flex;
      align-items: center;
      padding: 0 1em;
      line-height: 1em;
  }

  #textinput .msg {
      /* position: absolute; */
      display: none;
      color: #fff;
      font-size: var(--HD45px);
      text-align:center;
  }

  #textinput #input-and-submit {
      display: flex;
      flex-direction: row;
      justify-items: center;
      align-content: center;
  }

  #textinput .btn-submit {
      height: var(--HD90px);
      width: var(--HD180px);
      background: var(--yes);
      color: #fff;
      margin-left: var(--HD18px);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--HD30px);
      font-weight: bold;
      border-radius: 0 10px 10px 0;
  }

  #textinput .btn-clear, #textinput .btn-reveal {
      height: var(--HD36px);
      width: var(--HD36px);
      background: #eee;
      border-radius: 50%;
      margin: calc(0px - var(--HD18px));
      transform: translateX(-100%);
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: center;
      /* mobile */
      font-size: 18px;
  }

  #textinput .btn-reveal {
      font-size: 21px;
      visibility: hidden;
      pointer-events: none;
  }

  #textinput .btn-submit .material-icons {
      font-size: var(--HD45px);
  }

  #textinput .inputfield {
      width: 40vw;
      height: var(--HD90px);
      font-size: var(--HD45px);
      background: #fff;
      padding: 0 var(--HD60px) 0 var(--HD30px);
      border-radius: 10px 0 0 10px;
      border: none;
      background-image: none !important;
  }

  /* #textinput.search .inputfield {
      font-size: var(--HD45px);
  } */

  #textinput.pin .inputfield, #textinput.loanernum .inputfield {
      width: 20vw;
      margin-left: calc(var(--HD180px) + var(--HD18px));
      padding: 0 var(--HD15px) 0 var(--HD15px);
      text-align: left;
      font-size: var(--HD60px);
      letter-spacing: 0.05em;
  }

  #textinput.pin .inputfield[type="text"], #textinput.loanernum .inputfield[type="text"] {
      font-size: var(--HD30px);
      letter-spacing: 0.26em;
  }

  #textinput.pin .btn-submit, #textinput.loanernum .btn-submit {
      width: var(--HD150px);
  }

  #textinput.pin .btn-clear, #textinput.loanernum .btn-clear {
      visibility: hidden;
      pointer-events: none;
  }

  #textinput.pin .btn-reveal, #textinput.loanernum .btn-reveal {
      visibility: visible;
      pointer-events: initial;
  }

  #textinput .inputfield.guide {
    position:absolute;
    pointer-events: none;
    background-color: transparent;

    color:#ccc
}

 

  #textinput #keyboard {
      display: flex;
      z-index: 100;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      margin-top: var(--HD12px);
      /* mobile */
      opacity: 0;
      pointer-events: none;
  }

  #textinput #keyboard .keyline {
      display: flex;
      flex-direction: row;
  }

  #textinput #keyboard .key {
      width: var(--HD75px);
      height: var(--HD75px);
      margin: var(--HD9px);
      font-size: var(--HD24px);
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      /* border-radius: 50%; */
  }

  #textinput #keyboard .backspace {
      width: calc(var(--HD150px) + var(--HD18px));
      font-size: var(--HD36px);
  }

  #textinput #keyboard .backspace.del_small {
      width: var(--HD75px);
  }

  #textinput #keyboard .space {
      width: calc(5 * (var(--HD75px) + var(--HD18px)));
  }




  /* SELECT BOX STUFF */

  #textinput #selectbox {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      left: 0;
      right: 0;

  }

  #textinput #selectbox .optionlist {
      display: grid;
      width: 40%;
      grid-auto-columns: auto;
      grid-gap: 30px;
      margin-bottom: var(--HD60px);
      opacity: 0;
  }

  #textinput #selectbox .optionlist.twocol {
      grid-template-columns: 1fr 1fr;
      width: 70%;
  }

  #textinput #selectbox .btnselect {
      height: var(--HD75px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--HD24px);
      transition: background-color 0.3s;
  }


  #textinput #selectbox .btnselect.active {
      transition: background-color 0.3s;
      background-color: #fff
  }

  #textinput #selectbox .btnselect .check {

      width: var(--HD30px);
      height: var(--HD30px);
      border: 3px #000 solid;

      border-radius: 50%;
      position: absolute;
      left: var(--HD30px);
  }

  #textinput #selectbox .btnselect.active .check:before {
      background-color: #000;
      position: absolute;
      display: block;
      content: "";
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 50%;
  }


  #textinput #selectbox .submit {
      height: var(--HD90px);
      padding: 0 var(--HD60px);
      color: #fff;
      background: var(--yes);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--HD30px);
      font-weight: bold;
      border-radius: 10px;
      transition: opacity 0.3s;

  }

  #textinput #selectbox .submit.disabled {
      pointer-events: none;
      opacity: 0.5;
      transition: opacity 0.3s;
  }




  /***************************************/

  /********* (DESKTOP LANDSCAPE) *********/

  @media (min-width: 900px) {
      #textinput #keyboard {
          opacity: 1;
          pointer-events: initial;
      }

      #textinput .sugg-n-errors {
          max-width: 75%;
      }
  }

  /***************************************/

  /********** (DESKTOP PORTRAIT) *********/

  @media (min-width: 900px) and (orientation: portrait) {
      #textinput .inputfield {
          width: 60vw;
      }

      #textinput.pin .inputfield, #textinput.loanernum .inputfield {
          width: 35vw;
      }

      #textinput #keyboard .key {
          width: var(--HD60px);
          height: var(--HD60px);
          margin: var(--HD9px);
          font-size: var(--HD21px);
      }

      #textinput #keyboard .backspace {
          width: calc(var(--HD120px) + var(--HD9px));
          font-size: var(--HD30px);
      }

      #textinput #keyboard .backspace.del_small {
          width: var(--HD60px);
      }

      #textinput #keyboard .space {
          width: calc(5 * (var(--HD60px) + var(--HD18px)));
      }

      /* MAP */
      #map .map-title {
          max-width: 50vw;
      }

      #textinput .btn-clear {
          font-size: 24px;
      }

      #textinput .sugg-n-errors {
          max-width: 95%;
      }

      #textinput #selectbox .optionlist {

          width: 60%;
          grid-auto-columns: auto;

      }

      #textinput #selectbox .optionlist.twocol {

          width: 80%;
      }
  }

  /* mobile */

  /* ms surface pro (912 x 1368) skal vise desktop på begge led */

  /* ipad  (768 x 1024) skal kun vise desktop i bredformat */