.app-settings .middle-col{
  background: url("/images/settings/c_settings_box.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 0 0 0.4vw;    
  width: 52.2vw;
  height: 44.1vw;
  text-align: left;
  text-align: center;
}

.app-settings .middle-col .col-box{
  padding-top: 2vw;
}

.app-emails .left-col,
.app-documents .left-col,
.app-detail .left-col{
  background: url("/images/document/c_menu_box.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 0 0 5.4vw;      
  width: 17.7vw;
  height: 44.4vw;
  position: relative;
}

.app-emails .left-col .left-col-2,
.app-documents .left-col .left-col-2,
.app-detail .left-col .left-col-2{
  padding: 2vw;
  background-size: cover;  
  margin: 1.1vw 0 0 -0.4vw;
  width: 17.7vw;
  height: 16.5vw;
  clear: left;
  position: absolute;
  bottom: 0;
}

.app-emails .middle-col,
.app-documents .middle-col,
.app-detail .middle-col{
  background: url("/images/document/c_main_box.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 0 0 0.3vw;    
  width: 52.7vw;
  height: 44.4vw;
  font-size: 0.8vw;
  text-align: left;
  text-align: center;
}

.app-emails .middle-col,
.app-documents .middle-col,
.app-detail .middle-col{
  background-image: url("/images/document/c_long_main_box.png");
}

.app-emails .middle-col .col-box,
.app-documents .middle-col .col-box,
.app-detail .middle-col .col-box{
  background: url("/images/document/c_inner_box.png") no-repeat top left;
  background-size: cover;  
  width: 47vw;
  height: 37.4vw;
  margin: 4vw 2vw;
  padding: 0.4vw;
  box-sizing:content-box;
}

.app-detail .middle-col .col-box{
  margin: 0vw 2vw;  
}

.app-detail .middle-col .menu-box{
  width: 49vw;  
  height: 1vw;
  text-align: right;
  padding-right: 1vw;
  margin: 3vw 0 0 1.5vw;  
}

.app-detail .middle-col .menu-box a{
  margin-left: 0.5vw;
}

ul.documents-list{
  list-style: none;
  display: block;
  padding: 0;
}

ul.documents-list li{
  background: url("/images/document/c_document_button.png") no-repeat top left;
  background-size: cover;
  width: 47vw;
  height: 3.6vw;
  display: block;
  color: #e5f2ff;
  padding: 0.5vw 1vw;
  font-size: 0.9vw;
  text-align: left;
  position: relative;
}

ul.documents-list li.active-alert:after{
  right: 1vw;
  top: 1vw;
  content: "!";
}

ul.documents-list li .document-icon{
  display: block;
  width: 1.4vw;
  height: 1.4vw;
  float: left;
  margin: 0vw 1vw 0 0;
}

ul.documents-list li small{
  float: right;
  color: #acacac;
  margin-right: 2.5vw;
}

ul.documents-menu{
  list-style: none;
  display: block;
  padding: 0;
}

ul.documents-menu li{
  background: url("/images/document/c_email_button.png") no-repeat top left;
  background-size: cover;
  width: 100%;
  height: 2.4vw;
  display: block;
  color: #e5f2ff;
  padding: 0.5vw 1vw;
  font-size: 0.9vw;
  text-align: left;
  color: #f8e1a2;
}

ul.documents-menu li.active{
  background-image: url("/images/document/c_email_button_pink1.png");
  color: #f8e1a2;
}

ul.documents-menu li:hover{
  background-image: url("/images/document/c_email_button_white.png");
  color: #1b1b1b;
}

ul.documents-menu li a{
  width: 100%;
  height: 100%;
  color: inherit;
  display: block;
}

ul.documents-menu li a:hover{
  text-decoration: none;
}

.app-emails ul.documents-list li,
.app-documents ul.documents-list li{
  padding-top: 1vw;
}

ul.documents-list li a{
  color: #f8e1a2;
}

.content-login .text-background{
  margin: 0 auto;
}

.document-header{
  border-bottom: 3px solid #135;
  padding: 0 1vw 1vw 1vw;
}

.document-body{
  text-align: left;
  padding: 0.5vw 1vw;
}

.document-body img{
  width: 50%;
  margin: 1vw auto;
  display: block;
}

.document-header h3{
  margin-top: 0.5vw;
  text-align: left;
  font-size: 1.4vw;
  color: #f8e1a2;
}

.document-header table{
  color: #d94d4d;
  width: auto;
  text-align: left;
  text-transform: uppercase;
}

.document-header table td{
  padding-right: 0.5vw;
}

.app-manage .form,
.app-settings .form{
  margin: 2vw auto 5vw auto;
  width: 20vw;
}

.app-manage .form select,
.app-settings .form select{ 
  width: 90%;
  margin-top: -0.3vw;
}

.app-manage .form .inputs{
  background-image: url("/images/create_account/c_register_inputs.png");
  width: 20vw;
  height: 13.2vw;    
}

.app-settings .form .inputs{
  background-image: url("/images/settings/c_register_inputs.png");
  width: 20vw;  
  height: 10.6vw;    
}

.app-manage .left-col{
  background: url("/images/create_account/c_emloyee_overview_box.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 0 0 5.5vw;      
  width: 58.9vw;
  height: 22.9vw;
}

.app-manage .left-col .left-col-2{
  padding: 0.4vw;
  background: url("/images/create_account/c_summary_box.png") no-repeat top left;
  background-size: cover;  
  margin: 1.1vw 0 0 -0.4vw;
  width: 58.9vw;
  height: 20.8vw;
  clear: left;
}

.app-manage .left-col .left-col-2 .col-box{
  height: 18.8vw;
}

.app-manage .right-col{
  background: url("/images/create_account/c_create_new_account_box.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 3.7vw 0 0;      
  width: 31.4vw;
  height: 44.4vw;
  font-size: 0.8vw;
  text-align: left;
  text-align: center;
}

.app-manage .table-employees{
  width: 90%;
  margin: 1% 5%;
}

.app-manage .table-employees td{
  padding-top: 0.35vw;
  text-align: center;
}

.app-manage .table-employees th{
  border-bottom: 1px solid #e5f2ff;
  text-align: center;
}

.app-manage .table-employees input{
  background-color: #d94d4d;
  color: #f8e1a2;
}

.app-manage .table-employees td img.person-icon{
  width: 2vw;
  height: auto;
  float: left;
  margin-top: -0.2vw;
}

.app-manage .form-horizontal{
  width: 36.5vw;
  height: 9vw;
  margin: 3vw auto;
}

.app-manage .form-horizontal.important{
  border: 0.2vw solid red;
  border-radius: 0.5vw;
  padding: 0.3vw;
  width: 37.5vw;
  height: 10vw;
}

.app-manage .form-horizontal .form-title{
  height: 2vw;
  width: inherit;
}

.app-manage .form-horizontal .input{
  height: 2.0vw;
  margin-top: 0.3vw;
  padding: 0.1vw 0.7vw;
  width: 9.0vw;
  background: none;
  border: none;
  text-align: center;
  display: block-inline;
  float: left;
}

.app-manage img#evaluation{
  cursor: pointer;
}

.app-manage .form-horizontal .input.input-long{
  width: 18vw;
}

.app-manage .form-horizontal .inputs{
  width: inherit;
  height: 4.3vw;
  background: url("/images/create_account/c_confirmation.png") no-repeat top left;
  background-size: cover;
}

.app-manage img#evaluation{
  width: 8vw;
  height: 1.4vw;
}

.app-welcome .left-col,
.app-settings .left-col{
  margin-top: 3vw;
  margin-left: 5.5vw;      
  width: 17.8vw;
  height: 18.9vw;
}

.app-welcome .left-col .col-box,
.app-settings .left-col .col-box{
  padding: 0;
}

.app-welcome .left-col img,
.app-settings .left-col img{
  width: 17.8vw;
  height: 18.9vw;
  margin: -0.35vw;
}

.app-welcome .left-col .left-col-2,
.app-settings .left-col .left-col-2{
  margin-left: -0.4vw;
  padding: 0.4vw;
  background: url("/images/welcome/c_events_box.png") no-repeat top left;
  background-size: cover;  
  margin-top: 2.6vw;
  width: 17.8vw;
  height: 23.3vw;
  clear: left;
}

.app-welcome .middle-col{
  background: url("/images/welcome/c_welcome_boxes.png") no-repeat top left;
  background-size: contain;
  margin: 3vw 0 0 0.5vw;    
  width: 52.0vw;
  height: 27.2vw;
}

.col-box.col-box-left,
.col-box.col-box-right{
  width: 25vw;
  float: left;
}

.app-welcome .col-box.col-box-left{
  padding: 0.5vw 2vw;
}

.app-welcome .col-box.col-box-right{
  padding: 0vw 2vw;
}

.app-welcome .col-box.col-box-right img{
  width: 15vw;
  margin: 0vw auto;
  display: block;
}

.col-box h4{
  margin: 0.3vw 0 0.5vw 0;
}

.col-box.col-box-right{
  float: right;
}

.app-welcome .middle-col .middle-col-2-left{
  margin-top: 0.7vw;
  background: url("/images/welcome/c_news_box.png") no-repeat top left;
  background-size: cover;   
  width: 36.4vw;
  height: 16.1vw;
  float: left;
}

.app-welcome .middle-col .middle-col-2-right{
  background: url("/images/welcome/c_tracking_box.png") no-repeat top left;
  background-size: cover;   
  width: 15.2vw;
  height: 16.2vw;
  float: right;
}

.app-welcome .right-col,
.app-emails .right-col,
.app-documents .right-col,
.app-detail .right-col,
.app-settings .right-col{
  background: url("/images/welcome/c_manage_box.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 3.7vw 0 0;      
  width: 20vw;
  height: 14.9vw;
  font-size: 0.8vw;
  text-align: left;
  text-align: center;
}

.app-welcome .right-col .col-box,
.app-emails .right-col .col-box,
.app-documents .right-col .col-box,
.app-detail .right-col .col-box,
.app-settings .right-col .col-box{
  padding: 1.5vw 1vw;
  font-size: 0.9vw;
  -webkit-text-stroke: 0.3px #000;
}

.app-manage .right-col .col-box{
  padding-top: 7vw;
}

.right-col .col-box .manage-header{
  background: url("/images/application/c_top_hacked_buttons.png") no-repeat top left;
  background-size: cover;
  padding: 0.3vw 1vw;
  text-align: left;
  color: #acacac;
  width: 31.1vw;
  position: absolute;
  top: 0.3vw;
  left: 0;
  color: #d94d4d;
}

.right-col .col-box .manage-header span{
  background-color: #d94d4d;
  color: #fff;
  padding: 0 1vw;
  display: block;
  animation: opacity-blinker 2s linear infinite;
  opacity: 1;
}

.right-col .col-box .manage-header p{
  
}

.chat{
  background: url("/images/application/c_chat_box.png") no-repeat top left;
  background-size: cover;
  margin: -0.4vw 3.7vw 0 -0.4vw;
  padding: 0.4vw;
  clear: right;
  width: 20vw;
  height: 25.7vw; 
  z-index: 90;
}

body.overlay-chat .chat{
  background-image: url("/images/application/c_chat_box_red.png");
}

body.overlay-chat .chat ::-webkit-scrollbar-thumb{
  background-color: #f1f0f0;
}

.content-login .chat{
  background-image: url("/images/login/c_chat_box.png") !important;
  position: fixed;
  right: -3.8vw;
  bottom: 4.2vw;
  width: 24vw;
  height: 20vw; 
  transition: margin 2s;
}

.content-login .chat.hidden-on-login{
  margin-bottom: -16vw;
}

body.overlay-chat .chat:before{
  background: url("/images/application/c_hacker_eye.png") no-repeat top left;
  background-size: cover;
  position: absolute;
  content: "";
  right: 0vw;
  bottom: -6.8vw;
  height: 6vw;
  width: 6vw;
  margin-right: -1.8vw;
  z-index: 1000;
  opacity: 0.9;
  display: block;
  transition: opacity 0.5s;
  pointer-events: none;
}

body.overlay-chat .content-login .chat:before{
  bottom: 18vw;
  margin-right: -0.2vw;
}

body.overlay-chat .col-box .chat:before{
  bottom: 21.3vw;
}

.right-col-2:hover .chat::before,
.right-col-2.chat:hover::before,
.chat:hover::before{
   opacity: 0.2 !important;
}

body.overlay-chat .content-login footer:before{
  background: url("/images/login/c_downbar_overlay.png") no-repeat top left;
  background-size: cover;
  position: fixed;
  content: "";
  right: 0vw;
  bottom: 3vw;
  width: 100vw;
  height: 4.2vw;  
  pointer-events: none;
}

.right-col-2.chat{
  margin-top: 2.7vw;
}

.chat .chat-buttons,
.chat .chat-input,
.chat .chat-content,
.chat .chat-header{
  margin: -0.05vw -0.15vw 0 -0.15vw;
  width: 19.4vw;
  height: 1.75vw;
}

.chat .chat-header{
  background: url("/images/application/c_top_hacked_buttons.png") no-repeat top left;
  background-size: cover;
  padding: 0.3vw 1vw;
  text-align: left;
  color: #acacac;
}

.chat-content .chat-msg{
  text-align: left;
  color: #1e74b0;
  margin-bottom: 0.4vw;
}

.chat-content .chat-msg .chat-msg-head{
  font-weight: bold;
}

/*.chat-content .chat-msg .chat-msg-head:before{
  content: "# ";
}*/

.chat-content .chat-msg.chat-msg-to-me{
  color: #f8e1a2;
}

.chat-content .chat-msg.chat-msg-to-me{
  color: #f8e1a2;
}

.chat-content .chat-msg.chat-msg-to-me-private{
  color: #dd3b8b;
}

.chat-content .chat-msg.chat-msg-to-group{
  color: #9f1b4d;
}

.chat-content .chat-msg.chat-msg-to-me-hacker{
  color: #acacac;
}

.chat-content .chat-msg.chat-msg-to-me-hacker.new-msg{
  color: #f0c080;
}

.chat-content .chat-msg.chat-msg-mine{
  color: #ace;
}

.content-login .chat-content .chat-msg.chat-msg-to-me-hacker{
  color: #f1f0f0;
}

.content-login .chat-content .chat-msg.chat-msg-to-me-hacker.new-msg{
  color: #f8e1a2;
}

.chat .chat-buttons button,
.chat .chat-buttons select{
  background: url("/images/application/c_chat_left_button.png") no-repeat top left;
  background-size: cover;
  width: 9.65vw;
  height: 1.75vw;
  padding: 0; 
  border: 0;
  padding: 0;
  float: left;
  text-align: center;
  padding-left: 1vw;
  color: #acacac;
}

.chat .chat-buttons select{
  background: url("/images/application/c_chat_right_button.png") no-repeat top left;
  background-size: cover;
  width: 9.75vw;
  float: right;
  cursor: auto;
  color: #fff;
}

body.overlay-chat .chat .chat-buttons button{
  background-image: url("/images/application/c_chat_left_button_red.png");
}

body.overlay-chat .chat .chat-buttons select{
  background-image: url("/images/application/c_chat_right_button_red.png");
}

.chat .chat-content{
  margin: 0.3vw -0.15vw 0vw -0.15vw;
  padding: 0.8vw 1vw;
  height: 20.8vw;  
}

.content-login .chat .chat-content{
  margin: 0;
  width: 23.5vw;
  padding: 0.8vw 1vw;
  height: 17.8vw;  
}

.chat .chat-input{
  margin: 0.3vw 0 0 0;
  position: relative;
}

.chat .chat-input input[name="chatText"],
.chat .chat-input input[name="chatTo"]{
  background: none;
  border: none;
  color: #e5f2ff;
  height: 1.75vw;
  width: 11.5vw;
  display: block;
  float: left;
}

.chat .chat-input input[name="chatTo"]{
  color: #1e74b0;
  width: 6vw;
  text-align: center;
}

.chat .chat-input select.chat-to-list{
  background: url("/images/application/c_chat_button.png") no-repeat top left;
  background-size: cover;
  width: 1.75vw;
  height: 1.75vw;
  padding: 0; 
  border: 0;
  padding: 0;
  float: left;
  color: transparent;
  cursor: pointer;
  position: relative;
}

body.overlay-chat .chat .chat-input select.chat-to-list{
  background-image: url("/images/application/c_chat_button_red.png");
}

.chat .chat-input:after{
  content: "@";
  width: 1.75vw;  
  height: 1.75vw;
  position: absolute;
  color: #e5f2ff;
  display: block;
  font-size: 0.9vw;
  top: 0.3vw;
  left: 0vw;
  pointer-events: none;
}

.right-col-2 .chat .chat-input:after{
  left: 0.6vw;
}

.events-box,
.events{
  width: 100%;
}

.events-box .event .event-header{
  background: url("/images/welcome/c_event_button.png") no-repeat top left;
  background-size: cover;
  width: 100%;
  height: 3vw;
  padding: 0.1vw;
  text-align: center;
  cursor: pointer;
  color: #f8e1a2;
  line-height: 1vw;
  padding-top: 0.5vw;
}

.events-box .event .event-header img{
  height: 2vw;
  width: auto;
  float: left;
  margin-left: 0.5vw;
}

.events-box .event .event-header small{
  font-size: 0.7vw;
  color: #acacac;
}

.events-box .event .event-body{
  background: url("/images/welcome/c_event_gradient.png") no-repeat top left;
  background-size: cover;
  width: 100%;
  min-height: 5vw;
  padding: 0.5vw 0.8vw;
  font-size: 0.8vw;
}

.ip-box{
  background: url("/images/welcome/c_tracking_inner_box.png") no-repeat top left;
  background-size: cover;  
  width: 12.5vw;
  height: 9.83vw;
  margin: 0.5vw;
  padding: 0.4vw 0.5vw;
  overflow-x: hidden;
  overflow-y: scroll;
}

.ip-box .ip-address{
  width: 12vw;
  font-size: 0.8vw;
  text-align: center;
}

.ip-box .ip-address span{
  color: #acacac;
}

.system-startup .left-col{    
  background-image: url("/images/servers/c_server_nodes_box.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 3vw;
  margin-left: 5.7vw;      
  width: 70.5vw;
  height: 44.4vw;
}

.system-startup .left-col.empty{
  background-image: url("/images/servers/c_servers_box.png");
}

.system-startup .left-col.notification{
  background-image: url("/images/servers/c_servers_box_lines2.png"); 
  width: 89.6vw;
  height: 43.8vw;
}

.system-startup .center-text{
  background: url("/images/servers/c_node_box_big_03.png") no-repeat top left;
  background-size: cover;
  width: 38vw;
  height: 21.4vw;
  margin: 7.5vw 0 0 27vw;
  padding: 4vw 3vw;
  position: relative;
}

.system-startup .center-text form{
  background: url("/images/servers/c_button_password.png") no-repeat top left;
  background-size: cover;
  width: 11.9vw;
  height: 5.4vw;
  top: 14vw;
  left: 13vw;
  position: absolute;
  overflow: hidden;
}

.system-startup .center-text form button.form-submit{
  margin-top: 0;
}

.system-startup .right-col{
  background: url("/images/servers/c_system_management.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 3.7vw 0 0;
  width: 19.8vw;
  height: 28.7vw;
  font-size: 0.8vw;
  text-align: center;
  position: absolute;
  color: #f7d6d6;
}

.system-startup .right-col .right-col-2{
  padding: 0.4vw;
  background-image: url("/images/servers/c_tutorial_box.png");
  background-size: cover;  
  margin: 2.7vw 3.7vw 0 -0.4vw;
  width: 19.8vw;
  height: 14.5vw;  
  clear: right;
}

.button-bottom{
  position: absolute;
  bottom: 0.2vw;
  display: block;
  width: 100%;
  font-size: 1.1vw;
  text-transform: uppercase;
  text-align: center;
  color: #e5f2ff;
  margin-left: -0.4vw;
  background: none;
  border: none;
  left: 0;
}

.box-option .button-bottom{
  margin-left: 0vw;
  bottom: 1vw;
}

.button-bottom:hover{
  text-decoration: none;
  color: #fff8ae;
}

.system-startup  .right-col .box-option,
.system-startup  .right-col .right-col-2 .box-option{
  position: relative;
  height: inherit;
  width: 100%;
}

.system-startup  .right-col .box-option p,
.system-startup  .right-col .right-col-2 .box-option p{
  width: 100%;
  display: block;
  padding: 0 1vw 3vw 1vw;
  bottom: 0;
  position: absolute;
}

.system-startup  .right-col .right-col-2 .box-option{
  bottom: 1.0vw;
}

.system-startup  .right-col .right-col-2 .box-option p{
  padding-bottom: 5vw;  
}

.system-startup .server{
  background-image: url("/images/animations/server_widget.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;  
  width: 29.4vw;
  margin: 1vw 0 0 1vw;
  padding: 4.8vw 2vw 0 5.5vw;
  height: 18.9vw;
  float: left;
  color: #bbe6ef;
}

.system-startup .server.server-create{
  background-image: url("/images/animations/new_server_node.png");
  height: 12.5vw;
  position: relative;
  padding: 4vw 0 0 5vw;
}

.system-startup .server strong{
  font-size: 1.1vw;
  font-weight: normal;
}

.system-startup .server span{
  font-size: 0.9vw;
}

.system-startup .server .server-status{
  position: absolute;
  float: left;
  margin-left: 4%;
  margin-top: 8.7%;
}

.system-startup .server .server-buttons{
  background-image: url("/images/servers/c_connect_button.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  float: left;  
  margin: 9.3vw 0 0 -0.4vw;
  padding: 0.3vw;
  width: 11vw;  
  height: 1.9vw;
  color: #bbe6ef;
}

.system-startup .server.server-create .server-buttons{
  background-image: url("/images/servers/c_new_button_green.png");
  top: 0;
  margin: 7vw 0.3vw;
  position: absolute;
}

.system-startup .server.server-create p{
  margin-top: 0vw;
  width: 12vw;
}

.system-startup .server .server-buttons:hover{
  background-image: url("/images/servers/c_connect_button_hover.png");
}

.system-startup .server.server-create .server-buttons:hover{
  background-image: url("/images/servers/c_new_button_green_hover.png");
}

.system-startup span.type{
  display: block;
  text-align: center;
  width: 6vw;
  float: right;
  margin: 0.9vw 2.8vw 0 0;
}

.system-startup span.players{
  display: block;
  text-align: center;
  width: 6vw;
  float: right;
  font-size: 1.6vw;
  margin: 2vw 2.8vw 0 0;
  line-height: 1.3vw;
}

.system-startup span.players small{
  font-size: 0.8vw;
}

.system-startup .configured{
  margin-bottom: -0.25vw;
  display: inline-block;
  width: 1vw;
  height: 1vw;
  border-radius: 100px;
  background-color: #a8ff90;
}

.system-startup .unconfigured{
  margin-bottom: -0.25vw;
  display: inline-block;
  width: 1vw;
  height: 1vw;
  border-radius: 100px;
  background-color: #f8e1a2;
}

.system-startup .server .server-connect{
  display: block;
  text-align: center;
  color: #F8FAF9;
  font-size: 1.1vw;
  width: 8.6vw;  
  padding: 0 0 0 1.6vw;
  float: left;
}

.system-startup .server .server-connect:hover{
  text-decoration: none;
}

.system-startup .server.server-create .server-connect{
  width: 10.3vw;
}

.system-startup .server .server-delete{
  display: block;
  color: #F8FAF9;
  font-size: 1.1vw;
  float: right;
  width: 1.4vw;
  padding-top: 0.1vw;
  text-align: center;
}

.system-index .left-col{
  background: url("/images/terminal/c_location_box_03.png") no-repeat top left;
  background-size: contain;
  margin-top: 4vw;
  margin-left: 5.7vw;      
  width: 18vw;
  height: 28vw;
}

.system-index .left-col .col-header,
.system-index .left-col .col-header-menu{
  width: 18vw;
}

.system-index .left-col{
  background: url("/images/terminal/c_location_box_03.png") no-repeat top left;
  background-size: cover;
  margin-top: 3vw;
  margin-left: 5.5vw;      
  width: 17.8vw;
  height: 28.3vw;
}

.system-index .left-col.bg-clear{
  background-image: url("/images/terminal/c_location_box_02.png");
}

.system-index .left-col .left-col-2{
  margin-left: -0.4vw;
  padding: 0.4vw;
  background: url("/images/map/c_map_box.png") no-repeat top left;
  background-size: cover;  
  margin-top: 2.6vw;
  width: 17.5vw;
  height: 13.55vw;
  clear: left;
}

.system-index .middle-col{
  background: url("/images/terminal/c_terminal_box.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 0 0 0.4vw;    
  width: 52.2vw;
  height: 44.1vw;
}

.system-index .right-col{
  background: url("/images/terminal/c_status_box_01.png") no-repeat top left;
  background-size: cover;
  margin: 3vw 3.7vw 0 0;      
  width: 20vw;
  height: 15vw;
  font-size: 0.8vw;
  line-height: 0.9vw;
  text-align: left;
}

.system-index .right-col-2{
  background: url("/images/terminal/c_info_tips_box_02.png") no-repeat top left;
  background-size: cover;
  margin: 3.6vw 3.7vw 0 -0.4vw;
  padding: 0.4vw;
  clear: right;
  width: 20vw;
  height: 25.9vw; 
}

.terminal{
    margin: -0.4vw 0 0 0;
    width: 52vw;
    height: 100%;
    color: #A0E6F0;
    font-family: "White Rabbit";
    font-size: 0.8vw;
    border-radius: 5px;
    float: left;
}

.terminal .terminal-effect{
  margin-bottom: -100%;
  white-space: nowrap;
  width: calc(100% - 1vw);
  height: 96%;
  float: left;
  color: #1a1a1a;
  z-index: 1;
  overflow: hidden;
}

.terminal .terminal-chat{
  color: #ddd;
}

.terminal .terminal-chat[class*=" terminal-chat-"]{
  color: #9f1b4d;
}

.terminal .terminal-chat.terminal-chat-private{
  color: #dd3b8b;
}

.terminal .terminal-effect img{
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.5s;
}

.terminal .terminal-effect img.terminal-effect-static{
  opacity: 0.15;
}

.terminal .terminal-main{
    width: 100%;
    height: 40.7vw;
    overflow-y: scroll;
    overflow-x: no-content;
    word-break: break-word;
    line-height: 0.9vw;
    box-sizing: border-box; 
    z-index: 10;
    position: relative;
    padding-right: 0.7vw;
}

.terminal .terminal-main table td{
    padding: 0 0.7vw 0 0;
}

#alt-terminal .terminal-main{
  font-size: 0.7vw;
  padding: 0.3vw 0 0.3vw 0.4vw;
}

.terminal form{
  width: 50.5vw;
  height: 2vw;
}

.terminal input,
.cmd-solution{
    width: inherit;
    margin-top: 0.7%;
    height: 2vw;
    z-index: 1000;
    color: #A0E6F0;
    border: 0;
    outline: none;  
    font-family: "White Rabbit";
    font-size: 0.9vw;
    padding: 0;
    float: left;
    box-sizing: border-box;
    background-color: transparent;
    border-bottom-right-radius: 0.7vw;
    position: relative;
}

.cmd-solution{
  color: #ffc;
  position: absolute;
  height: 2vw;
  opacity: 0.3;
  padding-top: 0.4vw;
}

.terminal .terminal-line{
  overflow: hidden;
  width: fit-content;
  position: relative;
}

.terminal .terminal-behind-text{
  background: url("/images/terminal/c_terminal_anim_text_revealer.png") no-repeat;
  background-position: top left;
  height: 1.3vw;
  width: 9vw;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: -9vw;
  transition: all 0.4s;
}

.terminal .terminal-behind-text.end{
  left: calc(100% + 9vw);
}

.clickable-input, 
.clickable-command,
.clickable-input:focus, 
.clickable-command:focus,
.clickable-input:visited, 
.clickable-command:visited{
    cursor: pointer;
    color: #1e74b0;
}

.clickable-input:hover, 
.clickable-command:hover{
    color: #f8e1a2;
}

#terminal .clickable-input, 
#terminal .clickable-command,
#tutorial-modal .clickable-input, 
#tutorial-modal .clickable-command{
  color: #f8e1a2;
}

.terminal-path{
  color: #f8e1a2;
}

.terminal-info{
    color: #99ff5c;
}

.terminal-error{
    color: #d94d4d;
}

.terminal-os{
    color: #ff7e5b; /*#f84*/;
}

.terminal-important{
    color: #ff7e5b; /*#fb4*/;
}

.terminal-notice{
    color: #f8e1a2;
}

.modal-body .terminal-notice,
#tutorial .terminal-notice{
  color: #f8e1a2;
}

.corrupted{
  width: 80%;
  text-align: center;
  padding: 5%;
  border: 0.5vw dashed #fff8ae;
  color: #fff8ae;
  text-transform: uppercase;
  font-size: 150%;
  font-weight: bold;
  display: block;
  margin: 20% auto;
}

.blackout{
  color: #000;
  background-color: #000;
  padding: 0.4vw 0.2vw;
}

#alt-gui{
  position: relative;
}

#alt-gui .clickable-command,
#alt-gui .clickable-input,
#nodes .clickable-input,
.nodes .clickable-input{
  color: #f8e1a2;
}

#alt-gui .clickable-command:hover,
#alt-gui .clickable-input:hover,
#nodes .clickable-input:hover,
.nodes .clickable-input:hover{
  color: #1e74b0;
}

#alt-gui .clickable-command.clickable-command-button{
  background-color: lightskyblue;
  color: white;
  border: lightblue;
  border-radius: 0.3vw;
  padding: 0.2vw 0.3vw;
  display: inline-block;
  margin: 0.4vw 0.4vw;
  width: fit-content;
}

#alt-gui .col-content{
  font-size: 0.8vw;
  word-break: break-word;
  padding: 1vw 0.8vw 0.3vw 0.5vw;
}

#alt-gui .file-laser{
  background: url("/images/terminal/c_purple_laser.png") no-repeat;
  background-size: contain;
  width: 17vw;
  height: 3.9vw;
  transition: all 1s;
  position: absolute;
  margin-top: -5vw;
}

#alt-gui .file-laser.active{
  margin-top: 23vw;
}

#alt-gui b{
  color: #9d5;
}

#alt-gui .terminal-image{
  width: calc(100% + 0.5vw);
  margin: 0vw -0.5vw 0 -0.5vw;
}

#alt-gui span{
  width: inherit;
}

#alt-gui .terminal-image-bg{
  height: 27.45vw;
  margin: 0 0 0 -50%;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 3.5vw;
  z-index: -1;
  opacity: 0.7;
}

#alt-gui .left{
  float: left;
  width: 8vw;
  clear: left;
}

#alt-gui .right{
  float: right;
  width: 7.9vw;
  clear: right;
}

#alt-gui .center{
  text-align: center;
}

#alt-gui hr{
  clear: both;
  display: block;
}

#alt-gui.tab-content{
  height: auto;
}

#alt-gui textarea{
  height: 27vw;
}

#alt-gui textarea.browser{
  height: 7vw;
  width: 16vw;
}

#alt-gui textarea.textarea-wide-scrollable{
  overflow-x: auto;
  width: calc(100% - 0.7vw);
  white-space: nowrap;
}

#alt-gui .frame{
  border: 1px solid black;
  color: black;
  background-color: white;
  padding: 0.3vw;
  width: 15.7vw;
  text-align: center;
}

.left-col ::-webkit-scrollbar{ 
    width: 0.4vw;
}

.web-form{
  border: 1px solid #fff;
  color: #23527c;
  padding: 0.1vw;
  text-align: center;
}

.web-form label{
  margin: 0 0.5vw 0 0;
}

.web-form .web-form-input{
  margin-bottom: 0.3vw;
}

.web-form .web-form-submit{
  text-align: center;
}

.web-form button{
  background-color: #23527c;
  border: none;
  margin: 0.1vw auto;
  padding: 0.2vw 0.5vw;
}

.web-form input{
  background-color: #F8FAF9;
  border: 1px solid #1e74b0;
  color: #1e74b0;
  width: auto;
  float: none;
  padding: 0.3vw;
  height: 1.2vw;
  border: 0.1vw solid #99c5e1;
  border-radius: 0.1vw;
}

.nodes{
  height: 1.2vw;
  font-size: 0.8vw;
  overflow: hidden;
}

#status-content{
  height: 100%;
  width: 100%;
  padding-top: 1vw;
  text-align: center;
}

.status-line{
  width: 3.3vw;
  height: 12vw;
  float: left;
  text-align: center;
  font-size: 1vw;
}

.status-info{
  float: left;
  width: 8.4vw;
  height: 12vw;
  margin-left: 0.8vw;
  font-size: 0.9vw;
}

.status-info .wicon{
  margin-bottom: -2px;
}

.status-line .status-bars{
  text-align: center;
  height: 9vw;
  width: 2vw;
  margin: 0.3vw 0.6vw;
  position: relative;
}

.status-line .status-bars-frame{
  background: url("/images/terminal/c_disk_frame.png") no-repeat top center;
  background-size: contain;
  position: absolute;
  width: 2.1vw;
  height: 9vw;
  top: 0;
  display: block;
}

.status-line .status-bars-filling,
.status-line .status-bars-default{
  width: 1.7vw;
  margin: 0.1vw 0.15vw;
  bottom: 0;
  position: absolute;
  transition: height 1s;
}

.status-line .status-bars-default{
  background-color: #0f203f !important;
  height: 8.9vw;
}

.status-line.status-cpu .status-bars-filling{
  background-color: #f56747;
}

.status-line.status-ram .status-bars-filling{
  background-color: #a8ff90;
}

.status-line.status-disk .status-bars-filling{
  background-color: #f8e1a2;
}

.status-line .status-value{
  margin-top: 5px;
  font-size: 0.8vw;
}

.status-diagram{
  width: 7.4vw;
  height: 7.4vw;
  margin: 1vw auto;
  position: relative;
}

.status-diagram-active svg{
  position: absolute;
  top: 0;
  left: 0;
}

.status-diagram-world{
  position: absolute;
  top: 0;
  left: 0;
  width: 5.2vw;
  height: 5.2vw;
  border-radius: 1000px;
  overflow: hidden;
  margin: 1.1vw;
  transform: rotate(-90deg);
  transition: transform 1s ease-in-out;
}

.status-diagram:hover .status-diagram-world{
  transform: rotate(0deg);
}

.status-diagram span{
  display: none;
}

.status-diagram span.top{
  top: 1.1vw;
}

.status-diagram span.bottom{
  bottom: 1.1vw;
}

.status-diagram:hover span{
  display: block;
  position: absolute;
  width: inherit;
  text-align: center;
  color: #fff;
  font-size: 0.65vw;
}

.status-diagram:hover .status-diagram-bar{
  opacity: 0;
}

.status-diagram-world-top,
.status-diagram-world-bottom{
  width: inherit;
  height: 50%;
  display: flex;
  flex-direction: column;
  float: left;
}

.status-diagram-world-top{
  justify-content: flex-end;
  border-bottom: 0.15vw solid #667;
}

.status-diagram-bar{
  background-color: #a8ff90;
  opacity: 0.6;
  height: 0.3vw;
  width: inherit;
  margin: 1px;
  animation: opacity-blinker 3s linear infinite;
}

.status-diagram-bar.status-diagram-bar-danger{
  animation: opacity-blinker-danger 2s linear infinite;
}

@keyframes opacity-blinker {
  50% {
    opacity: 0.4;
  }
}

@keyframes opacity-blinker-danger {
  50% {
    opacity: 1;
  }
}

.status-diagram-world-top .status-diagram-bar.status-diagram-bar-danger{
  background-color: #f8e1a2;  
}

.status-diagram-world-bottom .status-diagram-bar{
  background-color: #A0E6F0;  
}

.status-diagram-world-bottom .status-diagram-bar.status-diagram-bar-danger{
  background-color: #ff7e5b;  
}

/* other */

.home-index .form,
.home-reset .form{
  margin: 2vw auto 5vw auto;
  width: 20vw;
}

.home-index .form .inputs,
.home-reset .form .inputs{
  width: 20vw;
  height: 5.5vw;    
  background-image: url("/images/login/c_inputs.png");
}

.home-index .form .inputs.inputs-security{
  background-image: url("/images/login/c_answer_textbox.png");
  width: 20vw;
  height: 2.75vw;
  margin: 2vw auto 1vw auto;    
}

#tutorial-modal a.simple-button{
  padding-top: 0.5vw;
}

#tutorial-modal small{
  font-size: 0.8vw;
  color: #999;  
  display: block;
}

.left-col .col-box.terminal{
  width: 17.7vw;
  height: 30.5vw;
  font-size: 0.9vw;
  position: relative;
}

.left-col .col-box.terminal .terminal-effect{
  display: none;
}

.left-col .col-box.terminal .terminal-main{
  height: 26vw;
  padding: 0;
}

.right-col-2 hr{
  border-color: #f8e1a2;
  border-width: 0.2vw;
  margin: 0.4vw 0;
}

.right-col-2 .quest-item{
  color: #ffc;
  background-color: #e64;
  margin-bottom: 0.19vw;
  padding: 0.2vw;
  display: block;
  opacity: 0.8;
  position: relative;
  border-radius: 0.5vw;
  width: 99%;
  background: url(/images/terminal/c_location_box_02.png);
  background-size: calc(100% + 2vw) auto;
  background-position: -1vw -6vw;
  border: 1px solid #f8e1a2;
}

.right-col-2 .quest-item .quest-order-number{
  border: 1px solid #f8e1a2;
  background-color: #765;
  color: #f8e1a2;
  display: inline-block;
  width: auto;
  padding: 0 0.2vw 0 0.2vw;
  text-align: center;
  min-width: 1.5vw;
  margin: -0.25vw 0.5vw 0 -0.3vw;
  position: absolute;
  font-size: 1vw;
  border-top-left-radius: 0.3vw;
  border-bottom-right-radius: 0.3vw;
}

.right-col-2 .quest-item.quest-item-ordered{
  border: 3px solid #f8e1a2;
}

.right-col-2 .quest-item.quest-item-inline{
  float: left;
}

.right-col-2 .terminal-chat,
#gui .terminal-chat{
  color: #fff;
  background-color: #555;
  margin-bottom: 0.25vw;
  padding: 0.2vw;
  display: block;
  opacity: 0.8;
}

.col-profile{
  border: 0.35vw solid #e0eaff;
  border-radius: 0.35vw;
  position: relative;
}

.col-box.col-profile .col-profile-special{
  position: absolute;
  background: url("/images/profiles/frames_confirmed.png") no-repeat top left;;
  background-size: cover;
  content: " ";
  top: -3.9vw;
  left: -4.1vw;
  width: 21.7vw;
  height: 26vw;
}

.col-header.col-header-frame{
  z-index: 1000;
  margin-left: -0.5vw;
}

.col-profile .col-profile-special.col-profile-manager{
  background-image: url("/images/profiles/frames_manager.png")
}

.col-profile .col-profile-special.col-profile-leader{
  background-image: url("/images/profiles/frames_leader.png")
}

.col-profile .col-profile-special.col-profile-month{
  background-image: url("/images/profiles/frames_month.png")
}

.col-profile .col-profile-special.col-profile-researcher{
  background-image: url("/images/profiles/frames_researcher.png")
}

#paths .map-menu{
  padding-left: 0.3vw;
  color: #A0E6F0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  pointer-events : none;
}

#paths .map-menu span.map-menu-right{
  float: right;
  margin-right: 1vw;
}

#paths .map-menu span{
  margin: 0.5vw 0.2vw;
  padding: 0px;
  color: #A0E6F0;
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
}

#paths .map-menu span i{
  margin: 0.15vw 0 -0.15vw 0;
}

#paths > svg{
  padding: 10vw;
  box-sizing: content-box;
}

#paths svg{
  display: block;
  overflow: visible;
  z-index: 10;
  position: relative;
}

#paths .map-subnet:hover > image,
paths .map-subnet:hover > .terminal-ip image{
  opacity: 0.5;
}

#paths line{
  transition: stroke-opacity 0.5s;
  stroke-opacity: 0;
}

#paths svg:hover > line{
  stroke-opacity: 1;
}

#paths svg.terminal-ip{
  z-index: 100;
}

#paths circle.map-current{
  animation: map-blink-fill 1s linear 1s infinite;
}

#paths image.map-current{
  animation: map-blink-opacity 1s linear 1s infinite;
}

#paths .map-subnet-active{
  animation: map-blink-opacity 1s linear 1s infinite;
  pointer-events : none;
}

#paths .map-popup,
#paths .map-popup > text,
#paths .map-popup > image{
  pointer-events: auto;
}

#paths .map-popup-btn{
  cursor: pointer;
}

@keyframes map-blink-fill {
  from {fill-opacity: 1;}
  to {fill-opacity: 0;}
}

@keyframes map-blink-opacity {
  from {opacity: 1;}
  to {opacity: 0;}
}

#rating{
  padding: 0.5vw;
}

#rating h3{
  margin-top: -0.5vw;
}