/* default template  */

/* lower level */
.t_balsa_child_base
{
  position   : relative   ;
  /* done in code for tabs to work ! box-sizing : border-box ; */
  overflow   : hidden     ;
  
  /*firefox border*/
  /*zpublish
  border-color: rgba(255, 255, 255, 0.5) ;
  */
  border-color : var( --my_css_color_border )!important ; 
}

.t_div_base
{
  display        : flex     ;
  flex-direction : column   ;
  flex-wrap      : nowrap   ;
}
/* =========== */


/* -------------------- */
*
{
  /*dotted line around window - by browser*/
  /* outline needed by IDE drag/resize
  outline-style : none !important ;  
  */
}  
.t_window_title_docked
{
  display: none !important ;
}
.t_window_title_floating
{
    display        : inline-flex !important ; 
}

.t_window_title_focus
{
  /* 2021
  background-image :
    linear-gradient(to left,rgba( 0, 0, 200 , 0.9) ,rgba(0,0,0,1.0) )
    ;
    color : yellow ;  
  */
  
  /* delta 
  background-image: url("https://kicchip.co.uk/leaflib/icons/bg/bm_silver.jpg");
  */
  /* @elm  */
  background-image: url("/leaflib/icons/bg/bm_silver.jpg");
  /*
  background-image :
    linear-gradient(to left,rgba( 128, 128, 128 , 0.3) ,rgba( 128, 128, 128, 0.9) )
    ; 
  */
  /*
  background-image :
    linear-gradient(to left,rgba( 0, 100, 200 , 0.9) ,rgba(0,0,0,1.0) )
    ;
  */
  /*
  color : orange ;  
  */
  color : blue !important;  
}
.t_window_title_blur
{
  /* 2021
  background-image : 
      linear-gradient(to left,rgba( 0,	0,	0 , 0.4) ,rgba(0,0,0,0.5) )
    ;
  */
  
  /* delta 
  background-image: url("https://kicchip.co.uk/leaflib/icons/bg/bm_silver.jpg");
  */
  /* @elm */
  background-image: url("/leaflib/icons/bg/bm_silver.jpg");
  
  
  /*
  background-image: url("https://res.cloudinary.com/fleetnation/image/private/c_fit,w_1120/g_south,l_text:style_gothic2:%C2%A9%20Alexander%20Nedviga,o_20,y_10/g_center,l_watermark4,o_25,y_50/v1502958965/rjfvqszd4jgfhlut85nv.jpg");
  background-image: url("https://i.pinimg.com/originals/b7/5f/64/b75f6413f720ce8c49ea1c73676a2876.jpg");
  background-image: url("https://thumbs.dreamstime.com/b/water-drops-metal-surface-texture-background-shiny-metal-surface-water-drops-metal-surface-texture-background-119422574.jpg");
  background-image: url("https://thumbs.dreamstime.com/b/stainless-steel-drops-water-background-16723112.jpg");
  background-image: url("https://thumbs.dreamstime.com/b/aluminum-foil-923077.jpg");
  background-image: url("https://thumbs.dreamstime.com/b/reflective-ripples-water-11190410.jpg");
  */
  /*
  color : navy ;
  */
  color : black !important;
  /*
  background-image : 
      linear-gradient(to left,rgba(215, 219, 227, 0.4) ,rgba(0,0,0,0.5) );
    ;
  color : silver ;
  */
  

  
}

.t_balsa_window_title
{

  flex-direction : row           !important ; 
  
  flex           : 0 0 20px      !important ; 
  flex           : 0 0 26px      !important ; 

  margin         :      0px      !important ; 

  align-items    : left           !important ; 
  /* @elm */
  align-items    : flex-start           !important ; 
  
  /*
  backgroundImage = 
    //k_color_unselected  
    //2020 'linear-gradient(to left,rgba( 150,	150,	150 , 0.9) ,rgba(255,255,255,1.0) )'
      ''
    ;  
  */
  cursor : grab !important ;    
}
.t_balsa_window
{
  
  overflow : hidden   !important ; 
  /*iotleaf*/
  border-radius    :   0px  !important ;    /* mplab */
  border-radius    :   4px  !important ;    /* iotleaf */
  border-width     :   1px  !important ;
  border-width     :   1px  !important ;    /* mplab */
  border-width     :   1px  !important ;    /* iotleaf */
  border-style: outset !important ; 
  /*
  box-shadow        : rgba(0, 0, 0, 0.4) 10px 10px 5px !important ;
  border-width     :   1px  !important ;
  border-color     : gray   !important ;
  */
  
  /* 2021
  box-shadow        : rgba(0, 0, 5, 0.4) 4px 4px 5px !important ;
  */
  
  /* @elm dialog_menu
  margin           :   0px  !important ;
  */
  
  padding          :   0px  !important ;

/*
  font : 10px Verdana, Geneva, sans-serif !important ;
  font-size: 12px !important ;
  color: #555 !important ;
  font-family: sans-serif !important ;
  */
  
    /*#IDE*/
  
}

/* + 2021*/
.t_window_focus
{
  x_delta_box-shadow        : rgba(10, 150,255 , 0.5) 1px 1px 10px !important ;  
  
  
  box-shadow : var( --my_css_win_shadow_focus )!important ; 
  /* zpublish
  --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 ;  
  */
}
.t_window_blur
{
  x_delta_box-shadow        : rgba( 150, 150,150 , 0.5) 1px 1px 5px !important ;
  
  box-shadow : var( --my_css_win_shadow_blur )!important ; 
  /* zpublish
  --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 ;  
  */
  
}


.t_window_floating
{
  position : absolute !important ; 
  resize   : both    /* !important*/ ;  
}
.t_window_docked
{
  /*- @elm docking toolbar failure
  some work may be needed for un dock to work, needs testing
  position  : relative !important ; 
  */
  resize    : none     !important ; 
  /*+ @elm docking*/  
  top       : 0px    !important ; 
  left      : 0px    !important ; 
  width     : 100%    !important ; 
  height    : 100%    !important ; 
  /*- @elm docking
  top       : unset    !important ; 
  left      : unset    !important ; 
  width     : unset    !important ; 
  height    : unset    !important ; 
  flex      : 1 1 auto !important ; 
  */
}
.t_window /* i.e.non transparent window */
{
  outline-style : none !important ;
  /* -3
  background: #fff !important ;
  */
}
.t_balsa_iot_container_base
{
  border-width      : 1px       !important ;
  border-style      : inset     !important ;
  /* - @elm border-color      : white     !important ; */
  border-radius     : 6px       !important ;
  margin            : 1px       !important ;
  padding           : 2px       !important ;  
  padding           : 5px       !important ;
  
  
  /* moved to color templates
  background-size   : 100% 100% !important ;
  background-repeat : no-repeat !important ;
  background-image  : url('https://www.iotleaf.co.uk/leaflib/icons/frames/panel_metal_200_200.png') !important;
  */
  
  /*
  background-image : url('https://www.kicchip.co.uk/leaflib/icons/frames/panel_metal_200_200_focus_light.png') !important;
  */
  /* 
  background-image  : url('https://www.iotleaf.co.uk/leaflib/icons/frames/panel_metal_200_200.png') !important;
  */
  
  /*
  background-color:  transparent !important;
  background-size :  contain     !important;
  */  

  
}
.t_balsa_iot_container_base:focus
{
  border-style      : inset     !important ;
  background-color: rgba(0,10,0,0.4) !important ;
  /*@elm*/
  /* background-color: var( --my_css_iot_panel_bg )!important ;  */
  
  /*
  background-image : url('https://www.kicchip.co.uk/leaflib/icons/frames/panel_metal_200_200_focus_light.png') !important;
  */
}
.t_iot_indicator
{
    text-align : right  !important ;
    font : 12px iotleaf_digital_clock_font !important ;
    height : 21px !important ;
    border-width : 10px !important ;
    border-color : rgba(0,0,0,0.7) !important ;
    border : none !important ;
    text-shadow : 2px 2px 1px rgba( 0  , 0  , 0, 0.2 ) !important ;
    /*margin : 2px 2px 2px 2px !important ;*/
    margin : 2px 0px 0px 0px  !important ;
    padding: 4px !important ;

    background : url('https://iotleaf.co.uk/leaflib/icons/frames/back_lcd.png')  !important ;
    background-size : 100% 100% !important ;
    background-repeat : no-repeat !important ;
  
}
.t_iot_panel
{
  border-width      : 1px       !important ;
  border-style      : inset     !important ;
  border-color      : white     !important ;
  border-radius     : 8px       !important ;
  margin            : 2px       !important ;
  padding           : 3px       !important ;  
  background-size   : 100% 100% !important ;
  background-repeat : no-repeat !important ;

  
}
  /* 2021 removed
  xbackground-image  : url("https://www.iotleaf.co.uk/leaflib/icons/frames/panel_metal_600_200_indent.png") !important ;
  */

.iot_control:focus
{
}


.t_panel
{
  margin           : 0px      /*!important*/ ;
  padding          : 0px      /*!important*/ ;

  /* avoid inheriting from window
  border-style     : none      ; 
  */
 
  
  
  /* 
    this.borderWidth = '1px';
    this.borderStyle = 'outset';
    this.f_image_url            = './leaflib/icons/application.png'      ;
    this.margin= '3px';
    this.padding= '2px';
    this.borderStyle = 'ridge' ;
    this.color_background = 'rgba(0, 0, 0, 0.05)' ; // k_semi_white ;
    this.borderWidth= '2px';  
  
  */  

  
 
 /*
  background-color : rgba(24,24,24 , 1.0)  !important ;
  color            : rgba(67,152,239)  !important ;
  border-color     : gray  !important ;
  border-width : 1px !important ;
  
  margin         : 2px !important ;
  padding        : 2px !important ;
  border-radius  : 2px !important ;  
  */
}
.tabs_no_wrap
{
  flex-wrap      		: nowrap ;    
  overflow       		: auto ; 
}
.tabs_wrap /* todo */
{
  flex-wrap      		: wrap  !important ;    
  overflow       		: hidden !important ;
}

.t_balsa_tabs_bar
{
  min-height : 20px ; 
  flex-direction 		: row   !important ;
  flex           		: 0 0 auto  !important ;
  
  
  border-color : silver !important ;
  box-shadow: none !important ; 
  border-width: 1px !important ; 
  border-width: 0px 0px 1px 0px !important ;
  border-style: single  !important ; 
  /* -1
  background-color :  #F0F0F5   !important ;
  */
  background-color :  #47474c   !important ;
}
.t_tabs
{
  /* 2021
  margin      : 0px !important ;   
  padding     : 0px  !important ;
  border-width : 2px !important ;
  border-style : outset !important ;
  border-color: rgba( 0, 0, 0, 0.1) !important;
  */
  
  /*border-width : 1px 0px 0px 0px !important ;*/
  /*border-style : inset !important ;*/
 /* background : rgba(0, 0, 0, 0.05)  !important ;*/
      
}
.t_border_top_bottom
{  
  margin: 1px 0px 1px 0px  !important ;
  border-width: 1px 0px 1px 0px !important ;
  border-width: 0px 0px 0px 0px !important ;
  border-style : groove !important ;  
}
.t_toolbar
{
  /*
      this.margin= '3px';
      this.padding= '2px';
      this.borderWidth = '2px' ;
      this.borderStyle = 'ridge' ;
      this.color_background = mod_balsa_panel.k_semi_white ;  
  
  */
  
  /*
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px inset !important ;
  border-color: red !important ;
  */
  border-color : silver !important ;
  
  /* font-size: 0.6em  !important ; */
  x_delta_background-color :  rgba(112, 215, 255, 0.10)  !important ;
  /* -1
  background-color :  #F0F0F0   !important ;
  */
  /*
  border-style: none !important ;
  */
  
  white-space: nowrap  !important ;
  user-select: none  !important ;
  
    padding: 3px !important ;/**/
      padding: 0px !important ;/**/
  /*
    height: 50px !important ;
  */
}
.t_balsa_frame_winbtns
{
  margin: 0px 1px 0px 0px !important;

}

.t_balsa_tabs_button
{
  padding : 3px !important ;
  border-radius: 4px 4px 0 0 !important ;
  /*background-color : rgba(255,0,0,1.0)    !important ;*/
}



.t_is_disabled
{
  color : gray ;
  color : red ;
  text-decoration : line-through ;
  
  opacity:0.5;
  
  /* -2
  background-color: rgba(0, 0, 0, 0.5) !important;
  */
}

.t_button_custom:hover
{
}

.t_node_blank
{
  content:url('/leaflib/icons/tree/line3.gif');  
  content:url('/leaflib/icons/tree/blank.gif');  
}
.t_node_expanded
{
  content:url('/leaflib/icons/tree/minus3.gif');    
  content:url('/leaflib/icons/tree/icon_minus3.gif');  
  /*delta*/
  content:url('/leaflib/icons/tree/icon_minus4.gif');  
  content:url('/leaflib/icons/tree/icon_minus_yellow.gif');  
}
.t_node_collpased
{
  content:url('/leaflib/icons/tree/plus3.gif');  
  content:url('/leaflib/icons/tree/icon_plus3.gif');  
  /*delta*/
  content:url('/leaflib/icons/tree/icon_plus4.gif');  
  content:url('/leaflib/icons/tree/icon_plus_yellow.gif');  
  
}
.t_node_menu_burger
{
  /*
  content:url('/leaflib/icons/tree/win_menu_16_16.png');  
  content:url('/leaflib/icons/tree/menu_burger.png');  
  content:url('/leaflib/icons/tree/win_burger_16_16.png');
  content:url('/leaflib/icons/tree/win_menu4.png');  
  */
  content:url('/leaflib/icons/tree/win_menu2_16_16.png');  
  margin-right: 10px !important;
  /*
  background-color: #445158 !important ;
  */
}
.t_pnl_sys_menu_main
{
/*
  X_delta_background-color: rgba(0, 0, 20, 1.0) !important;
  border-color:silver;
  */
  border-width:1px !important;
  
  border-style:ridge !important;
  padding:3px  !important;
  border-radius:2px  !important;

  /*delta*/
  background-image: url("https://kicchip.co.uk/leaflib/icons/bg/bm_silver.jpg");
}
.t_balsa_tree_node
{   /* important not needed */
  border-width : 0px 0px 0px 1px !important ;
  border-style : groove !important ; 
  /* border-style : dotted !important ; */
  border-color : rgba(255,255,255,0.05) !important ;   
  /* border-color : 'rgba(255,255,255,0.7)' !important ; */

  margin       : 0px 0px 0px 0px  !important;
  padding      : 0px 0px 0px 0px  !important;  

  /*
  margin       : 1px 0px 0px 0px  !important;
  padding      : 1px 0px 0px 0px  !important;  
  */
}

.t_tree
{
  border-style: none !important ;
  /* -1
  background-color :  #F0F0F0   !important ;
  */
  margin: 0px !important ;
  padding: 0px !important ;
  
}

/*.t_button_custom*/
.t_hover_pointer:active
{
  /*
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, rgba( 210,204,214, 0.9) 100%) !important;
  */
  /* causing toolbar to resize
  transform:  translate(2px,2px);
  */
  
 /* @elm docking  
  border-width: 1px 1px 0px 1px !important ;
  border-style: inset !important ;
  box-shadow: 0px 0px 1px rgba(255,128,0,0.9) !important;
  */
  
}
.t_hover_pointer:hover
{ 
  /* @elm docking
  text-shadow:    1px 1px 5px rgba(   0, 255,   0, 0.5 )            ;
  */
  
}

.t_balsa_button_no_click
{
  border-width : 1px      ;
  border-style : groove   ;
  flex-direction           : row                                ;
  display                  : inline-flex                        ;
  
}
.t_button_custom
{
  /* -4
  box-shadow        :none !important ;
  */
  /*cursor: pointer  !important ; */
}

.t_balsa_tool_button
{ 
  border-radius: 6px !important; /* @elm */
  border-width:1px !important;
  border-style:solid !important ;
  
  
  /*zpublish
  border-color: rgba( 0, 0, 0, 0.1)  !important    ;
  */
  border-color : var( --my_css_color_border_btn )!important ; 
  
  /* @elm
  box-shadow : rgba( 10, 10, 10, 0.1) 1px 1px 1px !important; 
  */
  
  /* box-shadow : rgba( 10, 10, 10, 0.3) 3px 3px 3px !important; */
  /* @elm
    margin: 0px !important ;
  */
  /* - @elm
  margin: 1px !important ;
  */
  
  /*
  @elm
  padding: 3px 4px !important ;
  */ 
    padding: 0px 0px !important ;
    cursor: pointer !important ;
    box-sizing: border-box !important ;
  /*
    font-size: 12px !important ;
    font-family: Segoe UI, Tahoma, Geneva, sans-serif !important ;
  */
  /*
  height : 20px !important ;
  background-color : rgba(255,255,255,1.0)    !important ;
  margin : 2px !important ;
  */
  /*2021 2021 css*/
 
  /*delta - disable toolbutton background to see how winbtns look
  */
  Xbackground-color :  rgb(86, 94 ,99)               !important  ;
    /*mod for design changes*/
  Xbackground-color :  #445158              !important  ;
  
  /*zpublish+*/  
  background-color : var( --my_css_background_color_btn )!important ; 
  color            : var( --my_css_color_btn            ) /* @elm window button blur/focus !important */; 

}

/*zpublish*/
.t_balsa_winbtn
{
  border-style:none !important ;
  box-shadow : none !important ;
  margin-left: 5px  !important ;
}

.t_button
{
  border-width : 1px !important ;
  border-radius: 5px !important;
  margin : 5px !important ;
}

/* keep at end for it to work */
.is_selected
{
  
  border-bottom: 1px solid #91A7B4 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;  
  
    border-right-color: rgb(145, 167, 180)  !important;
    /*border-bottom-color: rgb(145, 167, 180)  !important;*/
    border-left-color: rgb(145, 167, 180)  !important;
  
    border-color: #91A7B4 !important;
    border-top-color: #E68B2C !important;
    
  
  /*
  margin-top : 0px !important ;
  background-color : rgba(255,165,0,1.0)    !important ;
  */
}
.not_selected
{
    
    /* -2 
  box-shadow: inset 0 -3px 5px -3px rgba(0,0,0,0.1) !important;
    background-color: #f4f4f4 !important;  
  */
  /*
  margin-top : 0px !important ;
  background-color : rgba(255,255,255,1.0)    !important ;
  */
}

/* -------------------- */

/* cedar */
.t_balsa_caption
{
  font-weight: bold;
}