/* .desktop_device
{

width: 800px;
height: 400px;
background: #6D6E70;
box-shadow: inset 0px 0px 1px 0.5px #AAAAAA;
border-radius: 2% 2% 0px 0px;
padding:3px;

overflow:hidden;
box-sizing: border-box;
} */

.remote_machine_view 
{

}
.remote_screen_wrapper
{

  background-color: #500927;
  min-height:100vh;
  max-height: 100vh;


}
#remote_screen_view .vjs-video-wrap
{
  width: 100%;
  height:100% !important ;

}



.screen_view_default
{


  width:100%; 
  height:100%; 

  text-align:center;

   overflow: hidden; 
   box-sizing: border-box;
}
.screen_view_flow_record
{
  width:100vw; 
  height:100vh; 
  text-align:left;

   overflow: scroll; 
   padding-bottom: 100px;

}


.live_screen_tools_bar
{
  width:100%;

  padding:5px;
  height:45px;

padding-left:0px;
padding-right:2px;
position:fixed;
z-index:1000000000;
display: flex;

background:#828282;
border-bottom: 1px solid #ddd;
border-radius:0px;
left:50%;

transform: translate(-50%, 0px);

display: flex;
align-items: center; 
justify-content: space-between;
margin-top:5px;

/* flex-direction: row-reverse; */







}

.tools_bar_on_fscreen_hidden
{
  background:rgba(0,0,0,0) !important;
  opacity:0 !important;
  max-height:4px !important;
  margin-top:0px !important;


}

.tools_bar_on_fscreen
{
  margin-top:0px !important;

  background:rgba(0,0,0,0.5) !important;
  opacity:1 !important;

  max-height:45px !important;

}




.machine_toolbar_icons
{
  display: flex;

}
.live_screen_exit_button
{
  width: 100px;
  background-color: #fff;
  display:inline-block;
  padding:3px;

  border-radius: 3em;

  font-size:16px;
  font-weight: bold;

  color:blue;
  text-align: center;

  cursor: pointer;

}
.live_screen_full_screen
{
  width:100vw;
  height: 100vh;

}



.live_screen_zoom_level
{
  box-sizing: border-box;
width:100px;
height:50px;


height: 40px;


background-color:transparent;
border: 1px solid #fff;
border-radius: 4px;
transform: rotate(0deg);


}
.live_screen_zoom_level .label_zoom
{
  background-color: transparent;
   display: inline-block;
  
   position: absolute;
   left:50%;
   top:0px;
   transform: translate(-50%,0%);

   z-index:1000000000;
   font-size:10px;
   font-weight: bold;

   



}


.live_screen_zoom_level:focus
{
  outline:0;
  /* border: 1px solid #111113; */

}
.live_screen_zoom_level input
{
  border:0px solid transparent !important;

 outline:0 !important;
 width: 100%;
 height: 100%;
 padding: 13px 16px;
 border-radius: 4px;
 text-align: center;
   font-size:14px;


}
.live_screen_zoom_level input:focus
{
  outline:0 !important;

  border:0px solid transparent !important;

}


.desktop_device_fullscreen
{


/* background: #9279DA; */
/* box-shadow: inset 3px 4px 4px rgba(255, 255, 255, 0.25); */
border-radius: 0px 0px 0 0;
box-sizing: border-box;



/* overflow: hidden; */

box-sizing: border-box;
transform: rotate(0deg);

display: block;






}

.desktop_device_fullscreen .outer_screen
{

/* box-shadow: 2px 4px 4px rgba(255, 255, 255, 0.35), inset 2px 0px 4px rgba(255, 255, 255, 0.65); */
 border-radius: 20px 20px 0 0; 


margin-left:auto;
margin-right:auto;



}
.desktop_device_fullscreen .inner_screen
{
  

background: #FFFFFF;
/* border-radius: 20px; */

cursor: none;
transform: rotate(0deg);
overflow: hidden;
border:5px solid #9279DA;
box-sizing: border-box;



}

.desktop_device_fullscreen .custom_cursor{
    position:absolute;

    width: 20px;
    height: 20px;
    /* border: 2px solid rgb(80, 60, 60); */
    /* border-radius: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transform-origin: center;
    box-sizing: border-box;
    transform: translate(-50%, -50%) rotate(-1deg);

  }
 .desktop_device_fullscreen .custom_cursor2{
  position:absolute;

  width: 12px;
  height: 12px;
  /* border: 2px solid rgb(80, 60, 60); */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  transform-origin: center;
  box-sizing: border-box;
  }
  .mobile_device .custom_cursor .cusom_cursor_tip{
    width: 20px;
    height: 20px;
    /* border:0.5px solid rgb(0, 0, 0) ; */
    /* border-radius: 50%; */
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    z-index:10000000;
    transition: background-color 0.200s;






  }




.desktop_device
{


background: #9279DA;
/* box-shadow: inset 3px 4px 4px rgba(255, 255, 255, 0.25); */
border-radius: 20px 20px 0 0;
box-sizing: border-box;
padding: 6px 17px 9px 17px;
margin-top: 70px;
margin-left: 70px;

/* overflow: hidden; */

box-sizing: border-box;
transform: rotate(0deg);

display: inline-block;




}

.desktop_device .outer_screen
{

background: #9279DA;
/* box-shadow: 2px 4px 4px rgba(255, 255, 255, 0.35), inset 2px 0px 4px rgba(255, 255, 255, 0.65); */
 border-radius: 20px 20px 0 0; 
display: flex;
justify-content: center;
align-items: center;
align-content:center;
padding:10px;
padding-top:20px;
padding-bottom:10px;

margin-left:auto;
margin-right:auto;



}
.desktop_device .inner_screen
{
  width: 780px;
  height: 400px;

background: #FFFFFF;
/* border-radius: 20px; */

cursor: none;
transform: rotate(0deg);
overflow: hidden;


}
.preload_class_screen .desktop_device 
{

  position: absolute;
  left:45%;
  transform: translate(-50%,0px) scale(1);
  
}
.preload_class_screen .mobile_device
{
  position: absolute;
  left:50%;
  transform: translate(-50%,0px) scale(1.1);

}
.preload_class_screen .setFullScreen_btn
{
pointer-events: none;
}
.screen_view_full_screen .desktop_device #remote_screen_view
{
  width: 100vw !important;
  height: 100vh !important;
}

.screen_view_full_screen .setFullScreen_btn
{
  display: none !important;
}
.screen_view_full_screen .desktop_device
{
 background-color: #FFFFFF !important;
}
.screen_view_full_screen .desktop_device
{
  width: 100vw !important;
  height: 100vh !important;
  margin-top:0px;
  margin-left:0px;
  padding: 0px;
}

.screen_view_full_screen .desktop_device .outer_screen

{
  padding: 0px;

}
.screen_view_full_screen .screen_view_flow

{
  padding: 0px;
  width: 100vw !important;
  height: 100vh !important;

}

.screen_view_full_screen .mobile_device
{
  width: 100vw !important;
  height: 100vh !important;
  margin-top:0px;
  margin-left:0px;
  padding: 0px;
  box-shadow: none !important;
  background-color: #fff !important;
  border-radius: 0px !important;

}

.screen_view_full_screen .graph_toolbar_icon_wrap
{
   display: none;
}

.multidevice_screen_view_full_screen .graph_toolbar_icon_wrap
{
   display: none;
}



.screen_view_full_screen .mobile_device .outer_screen

{
  padding: 0px;
  width:100vw !important;
  height: 100vh !important;

  box-shadow: none !important;
  background-color: #2d292cd6 !important;
  border-radius: 0px !important;

}

.screen_view_full_screen .mobile_device .inner_screen
{
  position:absolute;
  left:50%;
  top:24px;
  transform: translate(-50%,0);
  /* width: 400px !important;
  height: 600px !important; */
}
.hflowtreeRenderRemote
{
  display: none;
}
.live-screen-loaded .hflowtreeRenderRemote
{
  display: block !important;
}
.live_screen_graph 
{
  display: none;
}
.live-screen-loaded.live_screen_graph 
{
  display: block;
}
.graph_view_full_screen #remote_screen_view
{
  /* width: 200px !important;
  height: 200px !important; */
  position: fixed;
  top: 445px;
  left:1185px;
}

.graph_view_full_screen .tree_head_btns_onfullscreen
{

  display: flex !important;
}
@media screen and (max-width:1500px) {
  .graph_view_full_screen #remote_screen_view
{
  

  top: 380px;
  left:982px;
}
}


.minimizdmovdwn{
  top: 91% !important;
  left: 66% !important;
}

.deskpmve{
  position: relative;
  left: 21%;
}

.graph_view_full_screen .desktop_device
{
  width: 0px !important;
  height: 200px !important;
  margin-top:0px;
  margin-left:0px;
  padding: 0px;
  position: fixed;
}

.graph_view_full_screen .desktop_device .outer_screen

{
  padding: 0px;

}

.graph_view_full_screen .mobile_device
{
  width: 0px !important;
  height: 200px !important;
  margin-top:0px;
  margin-left:0px;
  padding: 0px;
  position: fixed;
}

.graph_view_full_screen .mobile_device .outer_screen

{
  padding: 0px;
  width:0px;

}
.graph_view_full_screen .screen_view_flow

{
  padding: 0px;

}
.graph_view_full_screen .live_screen_graph
{
  position:sticky;
  top:0px;
  left:0px;
  width: 100vw;
  height: 96vh;
  z-index: 999999; 
  

}
.graph_view_full_screen .graph_minimizeToBar_icon

{
  display: none !important;
}



.graph_view_full_screen .screen_view_flow
{
  position: fixed;
  width: 0px;
  height: auto;
  z-index: 99999999;
}

.screen_view_flow .draggable_true
{
  /* border: 8px solid #9279da;
  border-top: 17px solid #9279da;
  border-top-left-radius: 13px;
  border-top-right-radius: 14px; */

  border: 4px solid #9279da;
  border-top: 4px solid #9279da;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.graph_minimized_bar
{

  height: 25px !important;
  top:400px;
  overflow: hidden;


}
.live_screen_graph_minimized .hflowtreeRenderRemote
{
  zoom:0.5 !important;
}
.live_screen_graph_minimized .hflowtreeRender1LiveTree
{
  zoom:0.5 !important;
}

 

.graph_view_full_screen .graph_minimized_bar
{
display:none !important;
}

.graph_minimized_bar .graph_maximize_icon
{
  display: none !important;

}


.desktop_device .custom_cursor{
    position:absolute;

    width: 20px;
    height: 20px;
    /* border: 2px solid rgb(80, 60, 60); */
    /* border-radius: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transform-origin: center;
    box-sizing: border-box;
    transform: translate(-50%, -50%) rotate(-1deg);

  }
 .desktop_device .custom_cursor2{
  position:absolute;

  width: 12px;
  height: 12px;
  /* border: 2px solid rgb(80, 60, 60); */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  transform-origin: center;
  box-sizing: border-box;
  }
  .mobile_device .custom_cursor .cusom_cursor_tip{
    width: 20px;
    height: 20px;
    /* border:0.5px solid rgb(0, 0, 0) ; */
    /* border-radius: 50%; */
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    z-index:10000000;
    transition: background-color 0.200s;






  }

.desktop_under
{
    width:100%;
    height:30px;
    background: linear-gradient(180deg, #232323 0%, #0A0A0C 100%);

}
.desktop_case
{
  width:110%;

  height:40px;
  position: absolute;
  bottom:0px;
  left:50%;
  transform: translate(-50%, 100%);




}
.desktop_case .case_image
{

}

  /* .live_screen_node_wrapper
  {

     width:140px;
     height:41px;
    padding-top:10px;
    padding-bottom:10px;
     color:#fff;
     box-shadow: rgb(0 0 0 / 15%) 0px 2px 13px 1px;


     border-radius: 5px;

     text-align: center;
     color:#08b84b;
     font-weight:bold;

     height:50px;
     transform: rotate(0deg);




  }

  .live_screen_node_wrapper_child
  {
    width:200px;
    padding-top:10px;
    padding-bottom:10px;
     color:#fff;
     box-shadow: rgb(0 0 0 / 15%) 0px 2px 13px 1px;


     border-radius: 5px;

     text-align: center;
     color:#08b84b;
     font-weight:bold;

     height:50px;
     transform: rotate(0deg);
     opacity: 0;

     animation: fadeIn 0.10s 1;
     animation-fill-mode: forwards;

  }

   
   
  .live_screen_node_wrapper .status_wrapper
  {
    width:50px;
    height:40px;
  }
  .branch_vertial_wrapper
  {
    width: 2px;
    transform: rotate(0deg);
    position: absolute;
    top:55px;
    left:50%;
    box-sizing: border-box;


    transform: translate(-50%,0);

  }

  .live_screen_tree_vertical
   {
     width: 2px;
     height:0px;
     border-left:2px dotted #16c760; 
    
     animation: live_screen_tree_vertical_height 0.10s 1;

     animation-fill-mode: forwards;


   }
   .live_screen_parent_join_horizon
   {
       width: 25px;
       height:2px;
       border-bottom:2px dotted #16c760; 
       top:50%;
       left:-5px;
       position: absolute;


       transform: translate(-100%,-50%);


   }

   .live_screen_tree_parent_branch
   {
    width: 2px;
    height:0px;
    border-left:2px dotted #16c760; 
    box-sizing: border-box;
    position: absolute;
    top:55px;
    left:5%;

    transform: translate(0%,0);
    animation: parent_branch_expansion_height 0.10s 1;
    animation-fill-mode: forwards;

   }
   .live_screen_tree_parent_branch::after
   {
     content:'';
     width: 0px;
    height:2px;
    border-bottom:2px dotted #16c760; 
    box-sizing: border-box;
    position: absolute;
    top:100%;
    left:100%;
    animation: parent_branch_expansion_width 0.03s 1;

    animation-delay: 0.10s;


    transform: translate(0,-100%); 
    animation-fill-mode: forwards;


   }

   .live_screen_minimum_window
   {
     width:600px;
     padding-top:6px;
     padding-bottom:6px;
     background-color: #08b84b;
     color:#fff;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
   }

   .live_screen_child_expan_wrapper
   {
       width: 20px;
       height:20px;
       top:40%;
       left:5px;
       position: absolute;


       transform: translate(0,-50%);


   } */

  @keyframes fadeIn_breadcrumitem {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  @keyframes parent_branch_expansion_height {
    from {height: 0px;}
    to {height: 60px; }

  }
  @keyframes parent_branch_expansion_width {
    from {width: 0px;}
    to {width: 20px;}

  }
  @keyframes live_screen_tree_vertical_height {
    from {height: 0px;}
    to {height: 100%;}

  }
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}

  }


  /* custom select */

  .select {
    position: relative;
    margin-bottom: 3px;
    width: 150px;
    font-size:12px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */

    background:#ac1956ea;


    
  }
  .select .selectBtn {
    color:#fff;

    padding: 10px;
    box-sizing: border-box;
    border-radius: 3px;
    width: 100%;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
            background: #ac1956;

            transform: rotate(0deg);
    
  }
  .select .selectBtn:after {
    content: "";
    position: absolute;
    top: 45%;
    right: 15px;
    width: 6px;
    height: 6px;
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: 0.2s ease;
  }
  .select .selectBtn.toggle {
    border-radius: 3px 3px 0 0;
  }
  .select .selectBtn.toggle:after {
    -webkit-transform: translateY(-50%) rotate(-135deg);
            transform: translateY(-50%) rotate(-135deg);
  }
  .select .selectDropdown {
    position: absolute;
    top: 100%;
    width: 100%;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
    background: transparent;
    border-top: 1px solid #eee;
    z-index: 1;
    background: #fff;
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: top center;
            transform-origin: top center;
    visibility: hidden;
    transition: 0.2s ease;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    max-height: 500px;
    overflow: scroll;
  }
  .select .selectDropdown .option {
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .select .selectDropdown .option:hover {
    background: #f8f8f8;
  }
  .select .selectDropdown.toggle {
    visibility: visible;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }


  /*Tooltips */

  
  
  .x_tooltip_dark
  {
    display:none;

    position: absolute;

    animation: fadeIn 0.10s 1;
    animation-fill-mode: forwards;

    background-color: #0A0A0C;
    /* border:1px solid #fff; */
    border-radius: 5px;
    color:#fff;
    white-space: nowrap;
    padding:5px;
    transform: rotate(0deg);
    font-size: 12px;
    top:100%;
    left:70%;


    
  }

  .select .selectBtn:hover .x_tooltip_dark
  {
    display:block;

  }

  .fit_screen_button:hover .x_tooltip_dark
  {
    display:block;

  }

  .fit_screen_button:hover .x_tooltip_dark_left
  {
    display:block;

  }

  .machine_toolbar_button:hover .x_tooltip_dark
  {
    display:block;

  }

  .machine_toolbar_button:hover .x_tooltip_dark_left
  {
    display:block;

  }

  .x_tooltip_dark::after
  {

    content:'';
    position: absolute;
    top:0;
    left:10%;
    border-bottom: 5px solid black;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    transform: translate(0,-100%);

     


  }

  .x_tooltip_dark_left
  {
    display:none;

    position: absolute;

    animation: fadeIn 0.10s 1;
    animation-fill-mode: forwards;

    background-color: #0A0A0C;
    /* border:1px solid #fff; */
    border-radius: 5px;
    color:#fff;
    white-space: nowrap;
    padding:5px;
    transform: rotate(0deg);
    font-size: 12px;
    top:100%;
    right:10%;


    
  }

  .x_tooltip_dark_left::after
  {

    content:'';
    position: absolute;
    top:0;
    right:10%;
    border-bottom: 5px solid black;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    transform: translate(0,-100%);

     


  }

  .machine_exit_modal
  {
    background-color: #fff !important;
    border-radius: 2em !important;

    padding:20px;
    padding-top:35px;

    padding-bottom:35px;

    border: 1px solid #DEE2E6;

    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 20px 20px rgba(0, 0, 0, 0.08);



  }

  .machine_modal_close
  {
    position: absolute;
    right:10px;
    top:10px;

  }

 .machine_exit_cancel_button
 {
  width:188px;

  padding:8px;
  border: 1px solid #4F4F4F;
  border-radius: 2em;
  background-color: #fff;
  text-align: center;
 }
 .machine_exit_confirm_button
 {
  width:188px;
  padding:8px;

  border: 1px solid #4F4F4F;
  border-radius: 2em;
  background-color: #4F4F4F;
  text-align: center;
  color:#fff;

 }

 .allDevicesList
 {
  width: 96.5vw;
  border: 8px solid rgb(197, 197, 197);
  padding: 0px;
  background-color: rgb(255, 255, 255) !important;
  display: block;

  position: absolute;
  top: 0 !important;
  bottom: 0;
  left: 49px !important;
  box-sizing: border-box;

 }


 .livescreen-machineloader
{
    position:absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    background-color: #000;
}

.livescreen-loader-img
{
    /* width:100%; */
    /* height: auto; */
    
   
}
.livescreen-loader-img img
{
    width:100px;
    height: auto;
   
}

.livescreen-device-connerr
{

    position:absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    background-color: #fff;
    display: none;
}
.livescreen-connerr-msg
{

    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:#099710;

}