/*
 * noVNC base CSS
 * Copyright (C) 2012 Joel Martin
 * noVNC is licensed under the LGPL-3 (see LICENSE.txt)
 * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 */
html,body {
    height:100%;
}

body {
  font-family: sans-serif;
  background-color:#666;
}

#noVNC_controls ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#noVNC_controls li {
  padding-bottom:8px;
}

#noVNC_host {
  width:150px;
}
#noVNC_port {
  width: 80px;
}
#noVNC_password {
  width: 150px;
}
#noVNC_encrypt {
}
#noVNC_connectTimeout {
  width: 30px;
}
#noVNC_path {
  width: 100px;
}
#noVNC_connect_button {
  width: 110px;
  float:right;
}


#noVNC_view_drag_button {
  display: none;
}

#sendCtrlAltDelButton {
}
#sendCtrlAltDelButton:hover {
} 
#sendCtrlAltDelButton:active {
}  

#noVNC_mobile_buttons {
    display: none;/* default hidden */
    float: left;
}

#noVNC_show-keyboard_button {
    float: left;
    width: 100px;
    height: 44px;
    line-height: 40px;
    padding-left:10px;
    text-align: left;
}
#noVNC_cursor_keys {
    float: left;
    width: 190px;
    height: 44px;
    line-height: 40px;
    padding-left:10px;
    text-align: left;
}
#noVNC_cursor_keys .noVNC_status_button {
    margin-top: 4px;
    line-height: 36px;
}

#sendLeftButton:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top:    6px solid transparent;
    border-right:  12px solid #000;
    border-bottom: 6px solid transparent;
    border-left:   0 solid transparent;
}
#sendRightButton:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top:    6px solid transparent;
    border-right:  0 solid transparent;
    border-bottom: 6px solid transparent;
    border-left:   12px solid #000;
}
#sendUpButton {
    margin-left: 12px;
}
#sendUpButton:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top:    0 solid transparent;
    border-right:  6px solid transparent;
    border-bottom: 12px solid #000;
    border-left:   6px solid transparent;
}
#sendDownButton:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top:    12px solid #000;
    border-right:  6px solid transparent;
    border-bottom: 0 solid transparent;
    border-left:   6px solid transparent;
}

#noVNC_extra_keys {
    float: left;
    width: 240px;
    height: 44px;
    line-height: 40px;
    padding-left:10px;
    text-align: left;
}

#noVNC_status {
  position: absolute;
  top: 44px;
  width: 100%;
  height:22px;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

#noVNC_util_keys {
    float: right;
    width: 110px;
    height: 44px;
    line-height: 40px;
    padding-right:10px;
    text-align: right;
}

#noVNC_settings_menu {
  margin: 3px;
  text-align: left;
}
#noVNC_settings_menu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}



#noVNC_apply {
  float:right;
}

.noVNC_status_normal {
  background: #eee;
}
.noVNC_status_error {
  background: #f44;
}
.noVNC_status_warn {
  background: #ff4;
}

/* Do not set width/height for VNC_screen or VNC_canvas or incorrect
 * scaling will occur. Canvas resizes to remote VNC settings */
#noVNC_screen_pad {
  margin: 0px;
  padding: 0px;
  height: 44px;
}
#noVNC_screen {
  box-sizing: border-box;
  padding-top: 99px;
  text-align: center;
  display: table;
  width:100%;
  height:100%;
  background-color:#666;
  ime-mode: disabled;
}
.drow {
    display: table-row;
}
.dcell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#noVNC_container, #noVNC_canvas {
  margin: 0px;
  padding: 0px;
}

#noVNC_canvas {
  left: 0px;
}

#VNC_clipboard_clear_button {
  float:right;
}
#VNC_clipboard_text {
  font-size: 11px;
}

#noVNC_clipboard_clear_button {
  float:right;
}

/*Bubble contents divs*/
#noVNC_settings {
  display:none;
  margin-top:77px;
  right:20px;
  position:fixed;
}

#noVNC_controls {
  display:none;
  margin-top:77px;
  right:12px;
  position:fixed;
}
#noVNC_controls.top:after  {
  right:15px;
}

#noVNC_description {
  display:none;
  position:fixed;

  margin-top:77px;
  right:20px;
  left:20px;
  padding:15px;
  color:#000;
  background:#eee; /* default background for browsers without gradient support */

  border:2px solid #E0E0E0;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

#noVNC_clipboard {
  display:none;
  margin-top:77px;
  right:30px;
  position:fixed;
}
#noVNC_clipboard.top:after {
  right:85px;
}

#keyboardinput {
  ime-mode: disabled;
  width:1px;
  height:1px;
  background-color: #b2bdcd;
  color:#fff;
  border:0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.noVNC_status_warn {
  background-color:yellow;
}

/*
 * Advanced Styling
 */

/* Control bar */
#noVNC-control-bar {
  position:fixed;
  background: #b2bdcd;
  display:block;
  height:44px;
  left:0;
  top:0;
  width:100%;
  z-index:200;
}

.noVNC_status_button, .noVNC_status_button_selected {
    height: 36px;
    border: 1px solid #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.noVNC_status_button {
    background: #f0f0f0;
    border-color: #ccc;
}

.noVNC_status_button_selected {
  background: #779ced;
  border-color: #577ced;
  color: #FFF;
}


/*Settings Bubble*/
.triangle-right {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#fff;
  background:#fff; /* default background for browsers without gradient support */
  /* css3 */
  /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
  background:-moz-linear-gradient(#2e88c4, #075698);
  background:-o-linear-gradient(#2e88c4, #075698);
  background:linear-gradient(#2e88c4, #075698);*/
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  color:#000;
  border:2px solid #E0E0E0;
}

.triangle-right.top:after {
  border-color: transparent #E0E0E0;
  border-width: 20px 20px 0 0;
  bottom: auto;
  left: auto;
  right: 50px;
  top: -20px;
}

.triangle-right:after {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#E0E0E0 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.triangle-right.top:after {
  top:-40px; /* value = - border-top-width - border-bottom-width */
  right:50px; /* controls horizontal position */
  bottom:auto;
  left:auto;
  border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #E0E0E0;
}

/*Default noVNC logo.*/
/* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  src: local('?'), url('Orbitron700.woff') format('woff'),
                   url('Orbitron700.ttf') format('truetype');
}

#noVNC_logo {
  margin-top: 170px;
  margin-left: 10px;
  color:yellow;
  text-align:left;
  font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
  line-height:90%;
  text-shadow:
       5px 5px 0 #000,
      -1px -1px 0 #000,
       1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}


#noVNC_logo span{
  color:green;
}

/* ----------------------------------------
 * Media sizing
 * ----------------------------------------
 */


.noVNC_status_button,.noVNC_status_button_selected {
  font-size: 12px;
}

#noVNC_clipboard_text {
  width: 500px;
}

#noVNC_logo {
  font-size: 180px;
}

@media screen and (min-width: 481px) and (max-width: 640px) {
  .noVNC_status_button,.noVNC_status_button_selected {
    font-size: 10px;
  }
  #noVNC_clipboard_text {
    width: 410px;
  }
  #noVNC_logo {
    font-size: 150px;
  }
}

@media screen and (min-width: 321px) and (max-width: 480px) {
  .noVNC_status_button,.noVNC_status_button_selected {
    font-size: 10px;
  }
  #noVNC_clipboard_text {
    width: 250px;
  }
  #noVNC_logo {
    font-size: 110px;
  }
}

@media screen and (max-width: 320px) {
  .noVNC_status_button,.noVNC_status_button_selected {
    font-size: 9px;
  }
  #noVNC_clipboard_text {
    width: 220px;
  }
  #noVNC_logo {
    font-size: 90px;
  }
}