/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
	display:none;
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font-size: 12px;
 font-weight: bold;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background-color: #DDE;
 text-decoration: none;
 border-radius: 4px 4px 0px 0px;
 white-space: nowrap;
}

ul.tabbernav li a:link { color: #448; text-decoration: none;}
ul.tabbernav li a:visited { color: #667; text-decoration: none;}

ul.tabbernav li a:hover
{
 color: #000;
 background-color: #AAE;
 border-color: #227;
 text-decoration: none;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 3px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background-color: white;
 border-bottom: 3px solid white;
 text-decoration: none;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /*height:200px;*/
 height:100%;

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /*overflow:auto;*/
 /*padding:0 0;*/
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}








/*************** New Tab design v.2 ( AND-956) ********************/

:root {
  --space-between-tabs: 7px;
  --shadow-top-footer: 0 -3px 6px rgba(0, 0, 0, 0.15); /*Used also for drop area on import form (AND-941)*/
}

  .form-root-tabs {
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc(100vw - var(--width-left_side_menu)); 
    /*background-color: transparent !important;*/
    background-color: var(--ui-tabs-color_background) !important; /*AND-1055*/
    /*box-shadow: 0 -24px 32px rgba(0, 0, 0, 0.40)
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.25);*/
    box-shadow: var(--shadow-top-footer);
    z-index: 250;

  }
  .form-root-tabs DIV.tabberlive {
    box-sizing:border-box;
    margin:0;
  }
  .form-root-tabs .tabbernav {
    /*background-color:#485874;*/
    background-color: var(--ui-header-color);
    box-sizing: border-box;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;

    padding:2px;
    position: relative;
    z-index: 10;
  }
  .form-root-tabs DIV.tabbertab {
    width: calc(100vw - var(--width-left_side_menu)); 
    overflow-x: auto;
    box-sizing:border-box;
    /*height:300px; Default height - High*/
    height:100px; /*Default height - Low (AND-1122 Fix #2) */
    transition: height 0.3s ease;
    padding:0;
  }



  .form-root-tabs .tabbernav li {
    display:block;
    margin:3px;
    margin-left:var(--space-between-tabs);
    margin-right:0px;
  }

  .form-root-tabs .tabbernav li a
  , .form-root-tabs .tabbernav li a:hover
  , .form-root-tabs .tabbernav li.tabberactive a 
  , .form-root-tabs .tabbernav li.tabberactive a:hover {
    margin:0px;
    border-radius: var(--border-radius-huge);
    display:inline-block;
    padding: 5px;
    padding-left:10px;
    padding-right:10px;
    border:none;
  }
  .form-root-tabs .tabbernav li a {
    background-color: #FFF !important;
    color:#000 !important;
  }
  .form-root-tabs .tabbernav li a:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color:#000 !important;
  }
  .form-root-tabs .tabbernav li.tabberactive a {
    background-color: rgba(255, 255, 255, 0.3) !important;
    /*color:#FFF !important;*/
    color:rgba(0, 0, 0, 0.45) !important;
   
    /*border:solid 1px rgba(255, 255, 255, 0.15) !important;*/
  }
  .form-root-tabs .tabbernav li.tabberactive a:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    /*color:#FFF !important;*/
    color:rgba(0, 0, 0, 0.45) !important;
    cursor: default;
  }


  .form-root-tabs .expand_collapse {
    background-color: var(--ui-header-color);
    box-shadow: none !important;
    transform: translateY(-4px);
    cursor:pointer;

    width:32px;
    height:32px;
    position:absolute;
    right:38px; /*AND-1552*/
    margin-top:-20px;
    text-align:center;

    border-top-left-radius: var(--border-radius-medium);
    border-top-right-radius: var(--border-radius-medium);

    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2) !important;
  }
  .form-root-tabs .expand_collapse SPAN {
    color:#FFF;
    line-height:22px !important;
    font-size:32px;
    width:auto;
    box-sizing:border-box;
  }

  .form-root-tabs .tabbertab {
    background-color: #F9F9F9; /*AND-1686*/
  }



  /*Tab's Icon*/
	.form-root-tabs UL LI > A > SPAN {
		line-height:1px;
		position:relative;
		transform: translateY(1px);
		margin-left:-1px;
		margin-right:10px;
		text-align:left;
	}

  
  /*** Tab Groups ***/

    .form-root-tabs UL DIV[tab-group] {
      /*border:dashed 2px red;*/
      display:flex;
      flex-direction:row;
    }

    .form-root-tabs UL DIV[tab-group] > LI {
      margin-left:1px;
      margin-right:0px;
    }

    /* Custom style for specific group of tabs (tab-group-2) - reserved */
    /*.form-root-tabs UL DIV[tab-group="tab-group-2"] LI A {
      background-color: yellow;
      border-bottom:solid 3px #CCCC00;
      padding-bottom:2px;
    }*/


    .form-root-tabs UL DIV[tab-group] > LI > A {
      border-radius:0 !important;
    }

    .form-root-tabs UL DIV[tab-group] > LI:first-child { /*left element*/
      margin-left:var(--space-between-tabs);
    }
    .form-root-tabs UL DIV[tab-group] > LI:first-child > a { /*A of the left element*/
      border-top-left-radius: var(--border-radius-huge) !important;
      border-bottom-left-radius: var(--border-radius-huge) !important;
    }

    .form-root-tabs UL DIV[tab-group] > LI:last-child a { /*right element A */
      border-top-right-radius: var(--border-radius-huge) !important;
      border-bottom-right-radius: var(--border-radius-huge) !important;
    }

  /*** End code block***/





  /*If Tabs are at the top (AND-1245) */
  .form-root-tabs-top {
    width:100%;
    height:100% !important;
    box-shadow:none;
  }
  .form-root-tabs-top .tabbertab {
    width:100% !important;
    height:100% !important;
    padding-bottom: 24px !important;
    border:none !important;
  }
  .form-root-tabs-top *.tabbernav {
    box-shadow: inset 0px 6px 10px -6px rgba(0, 0, 0, 0.5), 0px 6px 10px -6px rgba(0, 0, 0, 0.4);
    min-height:42px;
    background-color:#999;
    border:none;
  }



  /* *** Vertical lines-separatos between columns in tables under Tabs (AND-1265, AND-1362) *** */

    DIV.tabbertab TABLE[id^="TBLSELT"] td:not(:first-child) {
      padding-left:4px;
      padding-right:4px;
      box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
    }

    /*first row with headers - we use light color on dark background*/
    DIV.tabbertab TABLE[id^="TBLSELT"] TR:first-child td:not(:first-child) {
      box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.2);
    }

  /*End code block*/














/* *********** End code block *********** */