/* theme 2 
https://encycolorpedia.com/
https://www.w3schools.com/cssref/css_websafe_fonts.asp
*/
/*
2021 this is a dark style
*/
.is_selected
{
  background-image: linear-gradient(to bottom, #F5F7FC, #CCD7F0) !important;
  color: navy !important;  
  
  background-image: linear-gradient(to bottom, #F5F7FC, rgb(0,14,14) ) !important; 
  color: white !important;  
  
  box-shadow: inset 0 11px 0 -8px #FFC73C !important;
  
}
.not_selected
{
    box-shadow: inset 0 -3px 5px -3px rgba(0,0,0,0.1) !important;
    
    background-color: #f4f4f4 !important;  
    color: navy !important;  
  
    background-color: black !important;  
    color: white !important;  
  
    
}
.t_is_node_selected
{ 
  background-color: rgb(61 117 173) !important ; 
  /* 2021
  background-color: #30475e !important ; 
  */
}

:root
{
  /* --myCSS_ValueOne: 30px  ; */
  /* @elm
  --my_css_btn_height : 30px  ;
  */
  --my_css_btn_height : 25px  ;
  --my_css_btn_min_width : 0px ;
  --my_css_btn_sized_margin : 5px ;
  
  /*delta*/
  --my_css_page_background_color:rgba(255,255,255) ;
  --my_css_background_color : rgba(128,128,128) ;
  --my_css_color            : rgba(255,255,255) ;
  
  /*zpublish+*/
  --my_css_background_color_btn : rgba( 77  77  81 / 89%) ;
  --my_css_color_btn            : rgba(220 230 233 / 92%) ;
  /* @elm
  --my_css_color_border_btn     : rgba( 222 222 222 / 20% )         ; 
  */
  --my_css_color_border_btn     : rgba( 255 255 255 / 50% )         ; 
  
  --my_css_color_border         : rgba(255, 255, 0, 0.1) ;
  --my_css_win_shadow_focus     : rgba(0, 0, 0, 0.4) 10px 10px 5px ;
  --my_css_win_shadow_blur      : rgba(0, 0, 0, 0.4) 10px 10px 5px ;
 
  
  /*--my_css_desktop_image       : url(/leaflib/icons/bg/desktop_galaxy.jpg) ;   */
  --my_css_desktop_image       : url() ;  
  
  
  --my_css_font : 11px Verdana, Geneva, sans-serif ;
  
  /* --my_css_iot_panel_bg : rgba( 0 , 0 , 0 , 0.7 ); */
  --my_css_panel_metal  : url('/leaflib/icons/frames/panel_metal_200_200.png') ;
  
  --my_css_smooth_parent_dial_bg: black ;
}

/*zpublish+*/
/*.t_balsa_applicationX*/
.t_desk
{
  background-image  : var(  --my_css_desktop_image  ) !important ; 
  background-size   : 100% 100% !important ;
  background-repeat : no-repeat !important ;
}

html
{
  /* ++ background color */
  background-color  : var(  --my_css_page_background_color ) !important ; 
}

.t_btn_height
{
  height : var( --my_css_btn_height )!important ; 
  /* -@elm 
  min-width : var( --my_css_btn_min_width )!important ; 
  */
  
  /* + @elm*/
  margin-left : var( --my_css_btn_sized_margin )!important ;
  margin-right: var( --my_css_btn_sized_margin )!important ;
  margin-top  : var( --my_css_btn_sized_margin )!important ;
  
  /*
  height : 30px !important ; 
  */
  
}
.t_balsa_node_place
{
    flex : 0 0 25px  !important;  
  /* ++ 
  background-color: rgba(255,255,255,0.5) !important ;  
  */
}
.iot_control
{
 /* - 2021 color: black !important ; */
}


.t_balsa_window
{
  background-color : var( --my_css_background_color )!important ; /* check importance*/
  /* opacity:0.95; */
  color : var( --my_css_color )!important ; 
  
  /* font : 16px "Lucida Console" !important ; */
  
  /* @elm_font
  font : 11px Verdana, Geneva, sans-serif !important ;
  */
  font : var( --my_css_font ) !important ;
  
  /*
  font : bold 15px Arial, Geneva, sans-serif !important ; 
  background-clip : text !important ; 
  text-shadow : 2px 2px 3px rgba(255,255,255,0.6) !important ;   
  */

    
}

/* delta grid page number was blue  */
a
{
  color : var( --my_css_color )!important ;  
}



.t_balsa_iot_container_base
{
  border-width:1px !important ; /* @elm +1 */
  /*
  not for container, just the dial 
  background-size   : 100% 100% !important ;
  background-repeat : no-repeat !important ;
  background-image  : var( --my_css_panel_metal ) !important;
  */

  
  
  /*2021*/
  /* -- background-color:rgb(101 114 121 / 38%) ; */
  
  /* 2021 removed
  background-image  : url('https://www.iotleaf.co.uk/leaflib/icons/frames/panel_metal_200_200.png') !important;
  */
  
/*
  this is a steel background
  background-image  : url('https://www.iotleaf.co.uk/leaflib/icons/bg/panel_metal.jpg') !important;
  */
  
  /* @elm 
  make this a theme option, but also add setting for caption font color - currently using button color
  var( --my_css_panel_metal ) //// '/leaflib/icons/frames/panel_metal_200_200.png'
  */
  
  
}
.t_panel { }

  /*2021 2021 css*/
.t_button
{
  color            : #f5f7fc         !important  ;
  background-color : rgb(86, 94 ,99) !important  ;
  /*zpublish*/
  background-color : var( --my_css_background_color_btn )!important ; 
  color            : var( --my_css_color_btn            )!important ; 
  
  
  /*zpublish
  border-color     : #a7aaaf8f       !important  ; 
  */
  border-color : var( --my_css_color_border_btn )!important ; 
  
}
.t_shortcut
{
  color            : #f5f7fc         !important  ;
  color            : cream         !important  ;
  
  background-color : rgba(97, 95, 121, 0.75 ) !important  ;
  background-color : rgba(10, 10, 10, 0.6 ) !important  ;
  border-color     : #a7aaaf8f       !important  ; 
}
.t_hover_pointer:hover
{ 
  color: black !important ;
  /* @elm docking
  background-color: rgba(255, 255, 204 ,1.0) !important;
  */background-color: rgba(255, 255, 0 ,0.5) !important;
  
}

  /*2021*/
.t_smooth_parent_base
{
  /* 2021
  background-color :  rgb(12 10 33 / 20%)               !important  ;
  */
  /*@elm
  background-color: var( --my_css_iot_panel_bg )!important ;   
  */
  /* @elm 
    border-style: inset;
    border-width: 1px;    
  */
    border-style: none;
    
  
}

/* @elm */
.t_smooth_parent_plot
{
  background-color: var( --my_css_smooth_parent_dial_bg )  !important;   
}
.t_smooth_parent_dial
{
  /*
  background-color: var( --my_css_smooth_parent_dial_bg )  !important;   
  */
  
  background-size   : 100% 100% !important ;
  background-repeat : no-repeat !important ;
  background-image  : var( --my_css_panel_metal ) !important;
  
}