@font-face {
  font-family: 'Gowun Batang';
  src: url('../font/GowunBatang-Bold.ttf');
}
*{
  font-family: 'Gowun Batang';
}
table th{
  font-weight: 700;
  font-family: sans-serif;
}
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

.view-list-header {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px
}

.view-list-header .user-info {
  display: flex;
  justify-content: right;
}

.view-list-header .user-email {
  color: #212529;
  font-size: 13px;
  text-decoration: none !important;
  caret-color: transparent;
  margin: auto !important;
  padding: 0 4px !important;
}

.view-list-header .user-email:hover {
  color: #212529 !important;
}

.view-list-header .logout-btn {
  font-size: 16px !important;
  color: #7485bd !important;
  padding-top: 2px;
  margin-left: 2px;
  line-height: 25px;
}

.view-list-header .logout-btn:hover,
.view-list-header .logout-btn:active,
.view-list-header .logout-btn:focus {
  color: #ff6c00 !important;
  cursor: pointer;
}

.view-list-header .logout-btn i {
  border-left: 1px solid #7485bd;
  padding-left: 4px;
  line-height: 12px;
}

/* Style the buttons that are used to open and close the accordion panel */
#disconnect,
#connected,
#windows {
  font-size: 12px !important;
}

.accordion {
  background: transparent;
  color: #222;
  cursor: auto !important;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  height: 20px;
  font-size: 12px;
}

a.disabled {
  pointer-events: none;
}

a[disabled] {
  pointer-events: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
  background: transparent;
}

/* Style the accordion panel. Note: hidden by default */
.panel0 {
  display: block;
  list-style-type: none;
  background: url(../images/line-m.png) no-repeat left;
  margin: 0 0 0 10px;
  padding: 0 0 0 10px;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background: transparent;
  display: none;
  overflow: hidden;
}

.panel button {
  font-size: 13px !important;
}

.btn-close {
  background: url(../images/ic_close1.png) center no-repeat !important;
  border: 0;
  border-radius: 0.25rem;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-close:hover {
  background: url(../images/ic_close_hover1.png) center no-repeat !important;
  border: 0;
  border-radius: 0.25rem;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button.accordion:after {
  content: url(../images/ic-plus.png);
  color: #222;
  font-weight: bold;
  float: left;
}

button.accordion.active:after {
  content: url(../images/ic-minus.png);
}

.tree {
  font-size: 13px;
  height: calc(100vh - 130px);
  overflow: auto;
}

.tree button {
  line-height: 20px !important;
  margin-bottom: 1px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 24px;
}

.tree_ch {
  background: url(../images/bg_tree.jpg) repeat;
  background-size: 10px 25px;
  /* background: url(../images/line-bt-L.png) repeat-y left; */
  font-size: 13px;
  padding-top: 1px;
}

.tree_ch button:first-child {
  background: url(../images/line-first-01.png) no-repeat left;
  background-position-x: 5px;
}

.tree_ch button:last-child {
  background: url(../images/line-last-01.png) no-repeat left;
  background-position-x: 5px;
}

.child3 button:first-child {
  background: none
}

.child3 button:last-child {
  background: none
}


.tree ul {
  margin-bottom: 0 !important;
}

ul.child3 {
  list-style-type: none;
  background: url(../images/line-bt.png) repeat-y left;
  margin-bottom: 0 !important;
  background-position-x: 28px;
}

ul.child4 {
  background: url(../images/line-bt.png) repeat-y left;
  list-style-type: none;
  margin-bottom: 0 !important;
  margin: 0 0 0 30px;
  padding: 0;
}

ul.child4 li {
  background: url(../images/line-m.png) no-repeat left;
  padding-left: 12px;
  margin-bottom: 1px;
  height: 24px;
}

ul.child4 li:last-child {
  background: url(../images/line-last.png) no-repeat left;
  padding-left: 13px;
  margin-bottom: 1px;
}

ul.child3 li {
  height: 24px;
  margin-bottom: 1px;
}

ul.child3 li a {
  white-space: nowrap;
  font-size: 13px;
  text-decoration: none;
  padding: 3px 5px;
  cursor: pointer;
  display: block;
  height: 24px;

}

.openpcbyid,
.openpcbyid:hover {
  color: #222;
}

ul.child3 li a.active {
  background: #251ef7;
  color: #fff !important;
  font-size: 13px;
  text-decoration: none;
}

span.badge {
  background: transparent;
  color: #222;
  font-size: 13px;
  font-weight: normal;
  padding: 0 0.5em;
}

.search_cate {
  position: relative;
  margin-bottom: 10px;
}

.div_treeview {
  min-width: 320px;
  margin: 0px 5px 8px 5px;
  padding: 8px;
  background: #fff;
  border: #9aa2bf 1px solid;
  font-family: Arial, sans-serif;
  user-select: none;
  /* CSS3 (little to no support) */
  -ms-user-select: none;
  /* IE 10+ */
  -moz-user-select: none;
  /* Gecko (Firefox) */
  -webkit-user-select: none;
  /* Webkit (Safari, Chrome) */
}

ul#disconnect,
ul#windows {
  padding: 0 0 0 18px;
}

.searchInput {
  background: #fff;
  width: 100%;
  border-radius: 5px;
  position: relative;
}

.searchInput input {
  background: #fff;
  border: #b9b9b9 1px solid;
  padding: 3px 5px;
  font-size: 13px;
  outline: none;
  width: 100%;
  padding-right: 55px;
}

.searchInput .resultBox {
  padding: 0;
  opacity: 0;
  pointer-events: none;
  max-height: 280px;
  overflow-y: auto;
  position: absolute;
  width: calc(100% - 32px);
  background-color: #fff;
  left: 0px;
  top: 27px;
}

.searchInput.active .resultBox {
  opacity: 1;
  pointer-events: auto;
}

.resultBox li {
  list-style: none;
  padding: 4px 12px;
  display: none;
  width: 100%;
  cursor: default;
  font-size: 12px;
}

.searchInput.active .resultBox li {
  display: block;
  border: 1px solid #b9b9b9;
}

.searchInput.active .resultBox li {
  border-top: 0;
}

.resultBox li:hover {
  background: #efefef;
}
.searchInput .btn-result-sreach{
  position: absolute;
  right: 33px;
  top: 0px;
  width: 30px;
  height: 100%;
}
.searchInput .btn-result-sreach .btn_show_cate {
    height: 10px;
    width: 10px;
    margin: 11px;
    margin-bottom: 0;
    text-align: center;
    line-height: 26px;
    font-size: 16px;
    cursor: pointer;
    background: url(../images/ic_angle-down.png) no-repeat;

}


.searchInput .btn-result-sreach .btn_show_cate:hover {
  background: url(../images/ic_angle-down_hover.png) no-repeat;
}


.searchInput .btn_search_cate {
  position: absolute;
  right: 5px;
  top: 6px;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  cursor: pointer;
  background: url(../images/bt_search.png) no-repeat;
}

.searchInput .search-separator {
  position: absolute;
  right: 30px;
  top: 0px;
  color: #5e71ac;
}

.searchInput .btn_search_cate:hover {
  background: url(../images/bt_search_hover.png) no-repeat;
}

.searchInput img {
  width: 18px;
}

.fa-caret-right {
  margin-left: 10px;
}

.field-icon {
  float: right;
  top: 7px;
  right: 25px;
  position: relative;
  z-index: 100;
  cursor: pointer;
}

.reboot:hover .child-menu {
  display: block;
}

.prompt:hover .child-menu {
  display: block;
}

.child-menu {
  display: none;
  background-color: #f5f5f5;
  position: absolute;
  border: 1px solid #ccc;
  margin-left: 80px;
  margin-top: -23px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  width: 130px;

}

#disconnect li,
#disconnect button,
#disconnect button span {
  color: #9d9d9d;
}

.disconnectbyid,
.disconnectbyid:hover {
  color: #9d9d9d;
}

#myMenu .text-red {
  color: red;
}

#myMenu .text-red span {
  color: red;
}

/* Popup */
.popup-menu {
  display: none;
  position: absolute;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 2px;
  list-style: none;
  margin: 0;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  z-index: 1;
  width: 130px;
}

.popup-menu li {
  display: block;
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #000;
  white-space: nowrap;
  cursor: pointer;
}

.popup-menu li:hover {
  background-color: #6980d7;
}
/* /-----------------------Open pc --------------------/ */
#div_dest {
  left: 0px;
  top: 0px;
  overflow: hidden;
  cursor:none;
  display: flex;
  margin: auto;
}

/* <!-- FIX SCREEN 15/07/2024 --> */
/* #div_dest {    
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: auto;
  cursor:none;
} */
 /* <!-- END FIX SCREEN 15/07/2024 --> */

 
#customCursor {
  position: fixed;
  width: 6px;
  height: 6px;
  background: url('../images/ic-mouse-hover-open-pc.png');
  pointer-events: none;
  z-index: 99990;
  display: none;
}
#canvas_mouse {
  z-index: -1;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
}

#mypaint {
  width: 183px;
  border: none;
}
/* /-----------------------Open pc --------------------/ */

/*-------------Toolbar----------------*/
div.toolbar_desktop {
  background: url(../images/bg_toolbar.png) no-repeat;
  background-size: contain;
  height: 33px;
  width: 400px;
  padding: 0;
  z-index: 1000;
  position: absolute;
  top: 0;
  left: calc(100vw / 2 - 200px);
  /* left: 0; */
  right: 0;
  /* margin: 0 auto; */
  display: none;
  cursor: move;
}

div.toolbar_mobile {
  background-color: #4e66b7;
  height: 36px;
  width: 100vw;
  padding: 5px 10px;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0 auto;
  display: none;
  z-index: 1000;
}
div.toolbar_name_pc{
  padding:0 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 30px;
  width: 100vw;
  background: #4e66b7;
  display:none;
  z-index: 1000;
}
p.pc_name{
  width: auto;
  height: auto;
  margin: auto;
  text-align: center;
  font-size: 12px;
  color: white;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 15px;
}
/* Links inside the navbar */
div.toolbar_mobile a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
div.toolbar_mobile a:hover {
  background: #ddd;
  color: black;
}

div.toolbar {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  height: 32px;
}

div.toolbar button ,.btns-keyboard{
  width: 10%;
  text-align: center;
  position: relative!important;
  outline: none;
  height: 102%;
}

button.btn_option {
  background: url(../images/ic_options.png) no-repeat center;
  width: 22px;
  height: 22px;
  border: none;
  display: none;
}

button.btn_option:hover {
  background: url(../images/ic_options_hover.png) no-repeat center;
  border: none;
}

button.btn_transfer {
  background: url(../images/ic_file_transfer.png) no-repeat center;
  width: 22px;
  height: 22px;
  border: none;
}

button.btn_transfer:hover {
  background: url(../images/ic_file_transfer_hover.png) no-repeat center;
  border: none;
}


button.btn_close {
  background: url(../images/ic_close.png) no-repeat center;
  background-size: contain;
  width: 22px;
  height: 22px;
  border: none;
}

button.btn_close.active {
  background: url(../images/ic_close_hover.png) no-repeat center;
  background-size: contain;
  border: none;
}

button.btn_full_screen {
  background: url(../images/ic_full_screen.png) no-repeat center;
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
}

button.btn_monitor {
  background: url(../images/ic_monitor.png) no-repeat center;
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
}

button.btn_mouse.enable {
  background: url(../images/ic_mouse.png);
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
  background-repeat: no-repeat;
}

button.btn_mouse:not(.enable) {
  background-image: url(../images/ic_mouse_disable.png);
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
}

button.btn_dclick {
  background: url(../images/ic_dclick.png) no-repeat center;
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
}

button.btn_dclick:disabled,
button.btn_dclick[disabled] {
  background-image: url(../images/ic_dclick_disable.png);
}

button.btn_rclick {
  background: url(../images/ic_rclick.png) no-repeat center;
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
}

button.btn_rclick:disabled,
button.btn_rclick[disabled] {
  background-image: url(../images/ic_rclick_disable.png);
}


button.btn_keyboard {
  background: url(../images/ic_keyboard.png) no-repeat center;
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
}

button.btn_keyboard_active {
  background: url(../images/ic_keyboard.png) no-repeat center;
  background-size: contain;
  width: 22px;
  height: 24px;
  border: none;
}


button.btn_paint {
  background: url(../images/ic_paint.png) no-repeat center;
  width: 25px;
  height: 24px;
  border: none;
}

button.btn_paint:hover {
  background: url(../images/ic_paint_hover.png) no-repeat center;
  border: none;
}

button.btn_reboot {
  background: url(../images/ic_reboot.png) no-repeat center;
  width: 22px;
  height: 23px;
  border: none;
}

button.btn_reboot:hover {
  background: url(../images/ic_reboot_hover.png) no-repeat center;
  border: none;
}

button.btn_window {
  background: url(../images/ic_window.png) no-repeat center;
  width: 25px;
  height: 25px;
  border: none;
}

button.btn_window:hover {
  background: url(../images/ic_window_hover.png) no-repeat center;
  border: none;
}

button.btn_refresh {
  background: url(../images/ic_refresh.png) no-repeat center;
  width: 22px;
  height: 22px;
  border: none;
}

button.btn_refresh:hover {
  background: url(../images/ic_refresh_hover.png) no-repeat center;
  border: none;
}

button.btn_command {
  background: url(../images/ic_cmd.png) no-repeat center;
  width: 23px;
  height: 23px;
  border: none;
}

button.btn_command:hover {
  background: url(../images/ic_cmd_hover.png) no-repeat center;
  border: none;
}

button.btn_multi_monitor {
  background: url(../images/ic_Primary_Monitor_1.png) no-repeat center;
  width: 24px;
  height: 23px;
  border: none;
  top:-1px
}

button.btn_multi_monitor:hover {
  background: url(../images/ic_Primary_Monitor_1_hover.png) no-repeat center;
  border: none;
}

button.btn_multi_monitor_2 {
  background: url(../images/ic_Primary_Monitor_2.png) no-repeat center;
  width: 24px;
  height: 23px;
  border: none;
}

button.btn_multi_monitor_2:hover {
  background: url(../images/ic_Primary_Monitor_2_hover.png) no-repeat center;
  border: none;
}

button.btn_multi_monitor_all {
  background: url(../images/ic_Primary_Monitor_1_2.png) no-repeat center;
  width: 24px;
  height: 23px;
  border: none;
}

button.btn_multi_monitor_all:hover {
  background: url(../images/ic_Primary_Monitor_1_2_hover.png) no-repeat center;
  border: none;
}

button.btn_multi_disable {
  background: url(../images/ic_Primary_Monitor_disible.png) no-repeat center;
  border: none;
}

button.btn_multi_disable:hover {
  background: url(../images/ic_Primary_Monitor_disible.png) no-repeat center;
  border: none;
}

button.btn_display_default {
  background: url(../images/ic_display.png) no-repeat center;
  width: 25px;
  height: 22px;
  border: none;
}

button.btn_display_default:hover {
  background: url(../images/ic_display_hover.png) no-repeat center;
  border: none;
}

button.btn_color {
  background: url(../images/ic_color.png) no-repeat center;
  width: 23px;
  height: 23px;
  border: none;
}

button.btn_color:hover {
  background: url(../images/ic_color_hover.png) no-repeat center;
  border: none;
}

/* Tooltip container */
.tooltip {
  opacity: 100 !important;
  position: relative;
  display: inline-block;
  position: static !important;
}

/* Tooltip text */
.tooltip .tooltiptext ,.tooltip .tooltiptextMobile{
  visibility: hidden;
  width: auto;
  background-color: white;
  border: #444 1px solid;
  color: #333;
  font-size: 12px;
  text-align: center;
  padding: 0 5px;
  border-radius: 0px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  top: 30px;
  z-index: 1;
  margin: 0 auto;
  display: table;
  white-space: nowrap;
}
.toolbar_mobile .toolbar button,.toolbar_mobile .toolbar .btns-keyboard{
  width: 22px!important;
}

.btn_paint span,.btn_reboot span,.btn_refresh span,.btn_multi_monitor span{
  left: -10%;
}
.btn_color span{
  left: 0%;
}
.btn_close span{
  left: -40%;
}
.toolbar_mobile .toolbar .btn_mouse span,
.btn_transfer span,.btn_display_default span,.btn_window span{
  left: -50%;
}
.btn_command span{
  left: -75%;
}
.toolbar_mobile .toolbar .btns-keyboard span,.toolbar_mobile .toolbar .btn_rclick span{
  left: -85%;
}
/* .tooltip-bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -15px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
} */
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  ;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 110px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 16px;
  text-align: left;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 6px 5px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: #4e66b7;
}

/* Change color of dropdown links on hover */
.dropdown-content a.active {
  background-color: #ddd;
  color: #4e66b7;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}
.btn_color .show{
  border: #888 1px solid;
} 

/*----------------------------------------Transfer---------------------------------------------*/
div.transfer {
  overflow: auto;
  min-height: 712px;
  height: 100%;
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

div.transfer_row {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

div.transfer_col5 {
  height: 100%;
  width: 348px;
}

div.menu_top {
  width: 100%;
  padding: 5px 0;
  display: flex;
}

/* status file transfer */
.status-info-pc{
  width: 100%;
  height: 25px;
  position: relative;
}
.status-info-pc input{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2px 35px 2px 10px;
  box-shadow: none;
  outline: none;
  border: 1px solid #8999cf;
  background: #e1e6f6;
  cursor: pointer;
  font-size: 13px;
  border-radius: 0;
}
/* .status-info-pc::before{
  content: '';
  position: absolute;
  right: 15px;
  top: 11px;
  z-index: 10000;
  width: 7px;
  height: 7px;
  border: 1px solid gray;
  border-top: none;
  border-right: none;
  transform: rotate(-225deg);
  transition: 0.3s;
  pointer-events: none;
}

.status-info-pc.active::before{
  transform: rotate(-45deg);
  border: 1px solid black;
  border-top: none;
  border-right: none;
  top: 7px;
} */
div.icon-drop{
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
  background-size: 16px 12px;
  background-repeat: no-repeat;
  width: 16px;
  height: 12px;
  position: absolute;
  right: 0;
  right: 6px;
  top: 7px;
  transform: rotate(-180deg);
  cursor: pointer;
}
div.icon-drop:hover{
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
}
.status-info-pc input:focus{
  outline: none;
}
.status-info-pc .status{
  position: absolute;
  bottom: 25px;
  background: #fff;
  border: 1px solid #8999cf;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 117.5px;
  width:100%;
  display: none;
  border-bottom: none;
  transition: 0.3s;
  box-shadow: 4px -4px 4px #0a19478c;
}


.status-info-pc .status div{
  cursor: pointer;
  padding: 2px 35px 2px 10px;
  font-size: 13px;
}
.status-info-pc .status div:hover{
  background: #e1e6f6;
}
.status-info-pc.active .status{
  display: block;
}
.status-info-pc .status div.active{
  background: #b3c5ff;
}

/* end status file transfer */
a.home {
  background-image: url(../images/ic_home.png);
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  display: inline-block;
}

a.home:hover {
  background-image: url(../images/ic_home_hover.png);
}

a.home:disabled,
a.home[disabled] {
  background-image: url(../images/ic_home_disable.png);
}

a.back {
  background-image: url(../images/ic_back.png);
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-repeat: no-repeat;
  display: inline-block;
}

a.back:hover {
  background-image: url(../images/ic_back_hover.png);
}

a.back:disabled,
a.back[disabled] {
  background-image: url(../images/ic_back_disable.png);
}

a.forward {
  background-image: url(../images/ic_forward.png);
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-repeat: no-repeat;
  display: inline-block;
}

a.forward:hover {
  background-image: url(../images/ic_forward_hover.png);
}

a.forward:disabled,
a.forward[disabled] {
  background-image: url(../images/ic_forward_disable.png);
}

a.upto {
  background-image: url(../images/ic_up-to.png);
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-repeat: no-repeat;
  display: inline-block;
}

a.upto:hover {
  background-image: url(../images/ic_up-to_hover.png);
}

a.upto:disabled,
a.upto[disabled] {
  background-image: url(../images/ic_up-to_disable.png);
}

div.content_left {
  width: 100%
}

div.content_menu {
  width: 100%;
  height: 40px;
  border: #d4d4d4 1px solid;
  background: #f5f5f5;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}


.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

div.content_menu_right a {
  margin-left: 2px;
}

a.run {
  background-image: url(../images/ic_RUN.png);
  width: 35px;
  height: 29px;
  display: inline-block;
}

a.run:hover {
  background-image: url(../images/ic_RUN_hover.png);
}

a.run:disabled,
a.run[disabled] {
  background-image: url(../images/ic_RUN_disable.png);
}

a.new_folder {
  background-image: url(../images/ic_new_folder.png);
  width: 35px;
  height: 29px;
  display: inline-block;
}

a.new_folder:hover {
  background-image: url(../images/ic_new_folder_hover.png);
}

a.new_folder:disabled,
a.new_folder[disabled] {
  background-image: url(../images/ic_new_folder_disable.png);
}

a.rename {
  background-image: url(../images/ic_rename.png);
  width: 35px;
  height: 29px;
  display: inline-block;
}

a.rename:hover {
  background-image: url(../images/ic_rename_hover.png);
}

a.rename:disabled,
a.rename[disabled] {
  background-image: url(../images/ic_rename_disable.png);
}

a.delete {
  background-image: url(../images/ic_delete.png);
  width: 35px;
  height: 29px;
  display: inline-block;
}

a.delete:hover {
  background-image: url(../images/ic_delete_hover.png);
}

a.delete:disabled,
a.delete[disabled] {
  background-image: url(../images/ic_delete_disable.png);
}

a.desktop {
  background-image: url(../images/ic_desktop.png);
  width: 35px;
  height: 29px;
  display: inline-block;
}

a.desktop:hover {
  background-image: url(../images/ic_desktop_hover.png);
}

a.desktop:disabled,
a.desktop[disabled] {
  background-image: url(../images/ic_desktop_disable.png);
}

a.document {
  background-image: url(../images/ic_document.png);
  width: 35px;
  height: 29px;
  display: inline-block;
}

a.document:hover {
  background-image: url(../images/ic_document_hover.png);
}

a.document:disabled,
a.document[disabled] {
  background-image: url(../images/ic_document_disable.png);
}

a.edit_file {
  background-image: url(../images/ic_edit_file.png);
  width: 35px;
  height: 29px;
  display: inline-block;
}

a.edit_file:hover {
  background-image: url(../images/ic_edit_file_hover.png);
}

a.edit_file:disabled,
a.edit_file[disabled] {
  background-image: url(../images/ic_edit_file_disable.png);
}

a.upload_btn {
  background-image: url(../images/btn_file.png);
  width: 72px;
  height: 29px;
  display: inline-block;
}

a.upload_btn:hover {
  background-image: url(../images/btn_file_hover.png);
}

a.upload_btn:disabled,
a.upload_btn[disabled] {
  background-image: url(../images/btn_file_dis.png);
  background-repeat: no-repeat;
}

a.upload_btn2 {
  background-image: url(../images/btn_folder.png);
  width: 72px;
  height: 29px;
  display: inline-block;
}

a.upload_btn2:hover {
  background-image: url(../images/btn_folder_hover.png);
}

a.upload_btn2:disabled,
a.upload_btn2[disabled] {
  background-image: url(../images/btn_folder_dis.png);
  background-repeat: no-repeat;
}

a.download_btn {
  background-image: url(../images/ic_download.png);
  background-repeat: no-repeat;
  width: 38px;
  height: 29px;
  display: inline-block;
}

a.download_btn:hover {
  background-image: url(../images/ic_download_hover.png);
  background-repeat: no-repeat;
}

a.download_btn:disabled,
a.download_btn[disabled] {
  background-image: url(../images/ic_download_disable.png);
  background-repeat: no-repeat;
}

div.transfer div.menu_top select {
  height: 22px;
  border: #a6b2d9 1px solid;
  font-size: 13px;
}

div.transfer_row select {
  height: 22px;
  border: #a6b2d9 1px solid;
  font-size: 13px;
}

.content_left div.content_local,.content_detail{
  border: #ababab 1px solid;
  height: auto;
  font-size: 12px;
  margin-top: 5px;
  overflow-x: hidden;
  user-select: none;
  height: 300px;
  width: 100%;
  /* CSS3 (little to no support) */
  -ms-user-select: none;
  /* IE 10+ */
  -moz-user-select: none;
  /* Gecko (Firefox) */
  -webkit-user-select: none;
  /* Webkit (Safari, Chrome) */
}
.content_detail{
  height: 145px;
}
.local_name_title {
  border-bottom: #f0f0f0 1px solid;
  font-weight: bolder;
  line-height: 16px;
  padding: 0 6px;
  /* border-right: #f0f0f0 1px solid;
  border-left: #f0f0f0 1px solid; */
}

.local_name_title th:hover {
  background-color: #edeff6;
}

.local_name_title .w55 {
  width: 55%;
}

.local_name_title .w20 {
  width: 20%;
}

.local_name_title .w25 {
  width: 25%;
}

.list_local_name {
  overflow-y: hidden;
  width: 100% !important;
  height: auto;
}

.local_name_row,.detail_name_row{
  width: 100% !important;
  display: table-row;
  border-bottom: #f0f0f0 1px solid;
  padding: 0 5px;
  cursor: pointer;
}

.local_name_row.active {
  background: #7d8ec6;
  cursor: pointer;
  border-bottom: #f0f0f0 1px solid;
}

.local_name_row .name {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

.local_name_row td {
  padding: 5px 5px;
  border: 1px solid #dddddd;
  border-left: none !important;
  border-top: none !important;
}
div.content_local tr.detail_name_row td {
  padding: 5px 5px;
  border: 1px solid #dddddd;
  border-left: none !important;
  border-top: none !important;
}
div.content_detail tr.detail_name_row td {
  padding: 5px 8px;
  border: 1px solid #dddddd;
  border-left: none !important;
  border-top: none !important;
  text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.headTableTrans tr th{
  border-left: transparent;
}
.local_name_row td.name {
  border-left:none;
}
.local_name_row td.modified  {
  border-right:none;
}
.local_name_row .w55 {
  width: 55%;
  border-bottom-width: 0;
}

.local_name_row .w20 {
  width: 20%;
  border-bottom-width: 0;
}

.local_name_row .w25 {
  width: 25%;
  border-bottom-width: 0;
}

div.content_detail {
  border: #828790 1px solid;
  width: 100%;
  margin-bottom: 5px;
  height: 145px;
  font-size: 12px;
}

div.detail_name {
  display: flex;
  border-bottom: #f0f0f0 1px solid;
  font-weight: bolder;
  line-height: 24px;
}

div.detail_name div.w5 {
  width: 24px;
  text-align: center;
  padding: 0 2px;
  border-right: #e5e5e5 1px solid;
  border-left: #e5e5e5 1px solid;
  font-weight: 700;
  font-family: sans-serif;
}

div.detail_name div.w30 {
  width: 30%;
  padding: 0 5px;
  border-right: #e5e5e5 1px solid;
  border-left: #e5e5e5 1px solid;
  font-weight: 700;
  font-family: sans-serif;
}

div.detail_name div.w15 {
  width: 20%;
  padding: 0 5px;
  border-right: #e5e5e5 1px solid;
  border-left: #e5e5e5 1px solid;
  font-weight: 700;
  font-family: sans-serif;
}

div.detail_name div.w45 {
  width: 45%;
  border-right: #e5e5e5 1px solid;
  border-left: #e5e5e5 1px solid;
  padding: 0 5px;
  text-align: center;
  font-weight: 700;
  font-family: sans-serif;
}

div.detail_name div.w10 {
  width: 10%;
  padding: 0 5px;
  text-align: center;
  border-right: #e5e5e5 1px solid;
  border-left: #e5e5e5 1px solid;
  font-weight: 700;
  font-family: sans-serif;
}

tr.detail_name_row:hover {
  cursor: pointer;
}

tr.detail_name_row.active {
  background: #7d8ec6;
  cursor: pointer;
}



/* --------------------process list ---------------------*/
/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #e1e6f6;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 2px 15px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #fff;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding-top: 5px;
  height: calc(100% - 30px);
}

.processlist {
  margin: 0 auto;
  width: 96%;
  background: #fff;
  overflow: auto;
  height: auto;
  border:1px solid #ababab;
  height: calc(100% - 90px);
}

.processlist_form {
  border: #828790 1px solid;
  width: 100%;
  margin-bottom: 5px;
  height: 630px;
  font-size: 12px;
}

.processlist_title {
  /* display: flex; */
  font-weight: bolder;
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

.processlist_detail {
  display: block;
  overflow: auto;
  height: 350px;
  /* height: 100%; */
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  display: table-row-group;
  /* vertical-align: middle; */
  border-color: inherit;
}


.processlist_detail_row:hover {
  color: white;
  background: #191ae4;
  cursor: pointer;
}


.hadActive:hover{
  color: #000;
  background: white;
}
.processlist_detail_row.active {
  color: white;
  background: #191ae4;
  cursor: pointer;

}
.processlist_detail_row td {
  /* position: relative; */
  padding: 3px 5px !important;
  border-right: 1px solid #ababab;
}

.processlist_detail_row div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.processlist_detail_row {
  display: flex;
  width: 100%;
}

.processlist_title_row {
  display: flex;
  width: 100%;
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
  position: sticky;
  top: 0;
  background: #ffffff;
}

.processlist_title_row th {
  position: relative;
  white-space: nowrap;
  padding: 3px 5px !important;
  font-size: 12px;
}

.processlist_title_row th:hover {
  background-color: #edeff6;
}

.processbtn {
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse !important;
  height: 40px;
}

.processbtn button {
  padding: 5px 10px;
  margin: 4px 0px;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 2px solid #5d5c5c;
  box-shadow: -5px 0 10px -4px #ccc;
  outline: none;
  background-color: #8595ca;
  min-width: 70px;
  min-height: 30px;
  color: white;
  font-weight: 500;
  font-size: 16px;
  transition: 0.4s;
}


.end_process:hover {
  background: #536dc1;
  color: white;
  font-weight: 500;
  font-size: 16px;
}
.processbtn button:disabled,.processbtn button[disabled]{
  background-color: #acacb0db;
}
.processlistbar {
  width: 100%;
  padding-left: 5px;
  display: flex;
  justify-content: space-between;
}

.processlistbar div {
  display: flex;
  justify-content: center;
  padding: 2px;
  font-size: 11px;
  background-color: #e1e6f6;
  margin-left: -4px
}

/*--------------button--------------*/
a.btns {
  padding: 0 !important;
  background-image: url(../images/btn.png);
  background-repeat: round;
  width: 78px;
  height: 27px;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
  color: #fff;
  text-decoration: none;
  transition: 0.4s;
}
.btn-file{
  width: 78px;
  height: 27px;
}
.content-menu-left {
  width: 25%;
}

.content-menu-right {
  width: 75%;
}
.content-menu-right .form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}   
.content-menu-right .form-select:hover{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}   
.label_new_folder {
  width: 25%;
  margin-top: auto;
  margin-bottom: auto;
}

#eName {
  width: 75%;
}
@media screen and (min-height:750px) {
  .content_left div.content_local{
    height: 350px;
  }
  .transfer .file-up{
    height: 25vh;
  }
}
@media screen and (min-height:780px) {
 
  .transfer .transfer_flex{
    height: 58vh;
  }
  .transfer .transfer_flex .transfer_col5 .content_left
  {
    height: 85%;
  } 
  .transfer .transfer_flex .transfer_col5 .content_left  {
    height: 100%;
  }
  #list_local_name{
    height: 100%;
  }
  div.file-up{
    height: 15vh;
  }
  div.file-up .content_detail{
    height: 95%;
  }
}
@media screen and (min-height:830px) {
  .content_left div.content_local{
    height: 380px;
  }
  div.file-up{
    height: 30vh;
  }
  div.file-up .content_detail{
    height: 95%;
  }
}
@media screen and (min-height:830px) {
  .content_left div.content_local{
    height: 380px;
  }
  div.file-up{
    height: 30vh;
  }
  div.file-up .content_detail{
    height: 95%;
  }
}
@media screen and (min-height:900px) {
  .content_left div.content_local{
    height: 47vh;
  }
  
}


@media screen and (max-width:475px) and (min-width:371px) {
  /* .label_new_folder {
    font-size: small !important;
    width: 31% !important;
  } */

  #eName {
    width: 69% !important;
  }

  .menu_top .content-menu-left {
    min-width: 110px!important;
  }
}
@media screen and (max-width:370px) {
  /* .label_new_folder {
    font-size: 12px;
    width: 35% !important;
  }  */
  .processlistbar div {
   font-size: 9px;
  }
  #eName {
    width: 65% !important;
  }

  .menu_top .content-menu-left {
    min-width: 110px!important;
  }
}


a.btns:hover {
  background-image: url(../images/btn_hover.png);
  background-repeat: round;
  color: #fff;
  text-decoration: none;
}

a.btns:disabled,
a.btns[disabled] {
  background-image: url('../images/btn_disable.png');
  background-repeat: round;
}

/*-----------command--------------*/
div.command {
  background: #000;
  height: 100vh
}

#propertiesModal .modal-dialog,
#renameModal .modal-dialog,
#rebootModal .modal-dialog,
#shutdownModal .modal-dialog,
#passwordModal .modal-dialog,
#modalLogout .modal-dialog,
#modalAlert .modal-dialog ,
#modalWarningZoom .modal-dialog{
  position: relative;
  top: 25%;
  width: auto;
  font-size: 13px;
}
/*..................paint..............*/
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

#mypaint {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
}

#mypaintheader {
  background-color: #8595ca;
  padding: 2px;
  padding-left: 4px;
  cursor: move;
  display: flex;
  justify-content: space-between;
  border: 1px solid rgb(69, 91, 131);
}
#mypaintheader .btn-title-paint{
  padding-top: 1px;
}
#mypaintheader .modal-title {
  display: inline;
  font-size: 14px;
  color: #fff;
  height: 30px;
}

#mypaintheader .btn-close {
  float: right;
}
#mypaintheader .logo-remote7-paint{
  width: 18px;
  height: 18px;
}
#mypaintheader .btn-title-paint .zoom-out-paint-btn{
  background: url('../images/ic_customize.png')center no-repeat !important;
  width: 20px;
  height: 20px;
  padding: 4px;
  border: none;
  outline: none;
  cursor: pointer;
}
#mypaintheader .btn-title-paint .zoom-out-paint-btn:hover{
  background: url('../images/ic_customize_hover.png')center no-repeat !important;;
}
#mypaintheader .btn-title-paint .zoom-in-paint-btn{
  background: url('../images/ic_customize_down.png')center no-repeat !important;
}
#mypaintheader .btn-title-paint .zoom-in-paint-btn:hover{
  background: url('../images/ic_customize_down_hover.png')center no-repeat !important;;
}
.modal-header {
  display: flex;
  background: #8595ca !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px !important;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.modal-header h6.modal-title {
  color: #fff !important;
  font-size: 14px !important;
  margin-left: 7px;
}
p.nameFileClipboard{
  padding-bottom:5px ;
  margin-bottom: 0px; 
  font-size: 13px;
  color:#000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.percentClipboard{
  width:100%; 
  font-size:13px; 
  display: flex; 
  justify-content:space-between
}
.processkbsClipboard{
  height:22px; 
  border:none;
  background-color: transparent;
  font-size: 13px;
  border-radius:5px
}
div.percentClipboard .w3-light-grey{
  color: #000 !important;
  background-color: #f1f1f1 !important;
}
div.percentClipboard .w3-green{
  color: #fff !important;
  background-color: #4CAF50 !important;
}
.modal-footer {
  background: #eff1f9 !important;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #d7dbe3;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

section {
  background: #fff;
  /* border-radius: 7px; */
}

.tools-board {
  width: 183px;
  height: 355px;
  padding: 5px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid rgb(69, 91, 131);
  border-left: 1px solid rgb(69, 91, 131);
  border-right: 1px solid rgb(69, 91, 131);
}

.tools-board .row {
  width: 100%;
  margin: 0 auto;
  border:1px solid #dbdbdb;
}

.tools-board label.title {
  font-weight: 600;
  color: black;
}

.row .options {
  list-style: none;
  /* margin: 10px 0 0 5px; */
  margin: 5px 0 0 0;
 
}

.row .options .option {
  display: flex;
  cursor: pointer;
  align-items: center;
  margin-bottom: 10px;
}

.option img {
  width: 24px;
}

.option:is(:hover, .active) img {
  filter: invert(17%) sepia(90%) saturate(3000%) hue-rotate(900deg) brightness(100%) contrast(100%);
}

.option :where(span, label) {
  color: #5A6168;
  cursor: pointer;
  padding-left: 10px;
}

.option:is(:hover, .active) :where(span, label) {
  color: #4A98F7;
}

.option #fill-color {
  cursor: pointer;
  height: 14px;
  width: 14px;
}

#fill-color:checked~label {
  color: #4A98F7;
}

.option #size-slider {
  width: 100%;
  height: 5px;
  margin-top: 10px;
}

.colors .options {
  display: flex;
  justify-content: space-between;
}

.colors .option {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-top: 3px;
  position: relative;
  border: 1px solid #bfbfbf;
}

.colors .option:nth-child(1) {
  background-color: #fff;
}

.colors .option:nth-child(2) {
  background-color: #000;
}

.colors .option:nth-child(3) {
  background-color: #E02020;
}

.colors .option:nth-child(4) {
  background-color: #6DD400;
}

.colors .option:nth-child(5) {
  background-color: #4A98F7;
}

.colors .option:hover {
  border: 1px solid #000;
}

.colors .option.selected::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  height: 12px;
  width: 12px;
  background: inherit;
  border-radius: inherit;
  border: 1px solid #fff;
  transform: translate(-50%, -50%);
}

.colors .option:first-child.selected::before {
  border-color: #ccc;
}

.option #color-picker {
  opacity: 0;
  cursor: pointer;
}

.color-picker {
  background: url(../images/ic_color.png) no-repeat center;
}

.buttons button {
  width: 100%;
  color: #fff;
  border: none;
  outline: none;
  padding: 5px 0;
  font-size: 0.9rem;
  background: none;
  border-radius: 4px;
  cursor: pointer;
}

button.btn_viewer {
  padding: 0.1rem 0.5rem;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 2px solid #5d5c5c;
  box-shadow: -5px 0 10px -4px #ccc;
  outline: none;
  background-color: #8595ca;
  min-width: 70px;
  min-height: 30px;
  color: white;
  font-weight: 500;
  font-size: 15px;
}

button.btn_viewer:hover {
  background: #536dc1 !important;
  color: white;
  font-weight: 500;
  font-size: 15px;
}

.buttons .undo-canvas {
  background-image: url('../images/btn_undo.png');
  background-repeat: no-repeat;
  width: 63px;
  height: 28px;
  margin: 0 2px;
}

.buttons .undo-canvas:hover {
  background-image: url('../images/btn_undo_hover.png');
  background-repeat: no-repeat;
}

.buttons .clear-canvas {
  width: 63px;
  height: 28px;
  margin: 0 2px;
  background-image: url('../images/btn_eraser.png');
  background-repeat: no-repeat;
}

.buttons .clear-canvas:hover {
  background-image: url('../images/btn_eraser_hover.png');
  background-repeat: no-repeat;
}

.acolor div {
  float: left;
  padding-top: 1px;
  width: 20px;
}

.acolor:not(.active) img {
  display: none;
}

.acolor.active img {
  display: block;
}

.amonitor div {
  float: left;
  padding-top: 1px;
  width: 20px;
}

.amonitor:not(.active) img {
  display: none;
}

.amonitor.active img {
  display: block;
}

/*loader*/
div.loader_page {
  background-color: white;
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #7c8ec7;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1s linear infinite;
  /* Safari */
  animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}