.sq_tabcontrol {
}

    .sq_tabcontrol > div[name="buttonsPanel"] {
        border: none;
        display: flex;
    }


        .sq_tabcontrol > div[name="buttonsPanel"] > div[name="fillerPanel"] {
            border: none;
            border-bottom: 1px solid black;
            flex-grow: 1;
            /*align-items: stretch;*/
            display: inline-block;
        }

    .sq_tabcontrol > div[name="pagesPanel"] {
        border: 1px solid black;
        border-top: none;
        background-color: white;
        color: black;
        position: absolute;
        top:7mm;
        left:0;
        bottom:0;
        right:0;
    }

.sq_tabbutton {
    margin: 0;
    border: 1px solid black;
    background-color: rgba(255,255,255,0.5);
    color: black;
    padding: 4px;
    position: relative;

    white-space: nowrap;
    cursor:pointer;
}

.sq-rounded .sq_tabbutton,
.sq_tabcontrol.sq-rounded .sq_tabbutton {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.sq_tabbutton>label {
    cursor:pointer;
}

    .sq_tabbutton:not(:nth-last-child(2)) {
        border-right: none;
    }

    .sq_tabbutton.sq-selected {
        /*margin-bottom: -1px;*/
        border-bottom: 1px solid white;
        background-color: rgba(255,255,255,1);
    }

    .sq_tabbutton > img {
        width: 16px;
        height: 16px;
    }

        .sq_tabbutton > img:not([src]) {
            display: none;
        }

.sq_tabpage {
    display: none;
    /*! padding: 4px; */
    /* overflow-y: auto; */
}

    .sq_tabpage.sq-selected {
        display: block;
        position:absolute;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        overflow-y:auto;
    }

.sq_tabbutton button {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    background-color: red;
    border: 1px solid black;
    display: none;
    border-top-right-radius: 6px;
    border-right: none;
    border-top: none;
    opacity: 0.25;
    cursor: pointer;
}

.sq_tabcontrol[data-sq-sq_tabcontrol\.closebuttons="hover"] > div > .sq_tabbutton:hover button {
    display: initial;
}

/*********************************************/

.sq_tabcontrol[data-sq-sq_tabcontrol\.sizing="fixed"] {
    position: relative;
    /*width: 400px;
    height: 200px;*/
}

    .sq_tabcontrol[data-sq-sq_tabcontrol\.sizing="fixed"] > div[name="buttonsPanel"] {
        position: absolute;
        top: 0;
        height: 2em;
        left: 0;
        right: 0;
    }

    .sq_tabcontrol[data-sq-sq_tabcontrol\.sizing="fixed"] > div[name="pagesPanel"] {
        position: absolute;
        top: 2em;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .sq_tabcontrol[data-sq-sq_tabcontrol\.sizing="fixed"] > div > .sq_tabpage {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

/*********************************************/

.sq_tabcontrol[data-sq-sq_tabcontrol\.buttonsstyle="flex"] > div[name="buttonsPanel"] {
    display: flex;
    flex-direction: row;
    flex-grow: unset;
}

    .sq_tabcontrol[data-sq-sq_tabcontrol\.buttonsstyle="flex"] > div[name="buttonsPanel"] > div {
        flex: 1 1;
        width: 0;
    }


/*Center Top aligned buttons panel  */

.sq_tabcontrol.sq-centered {
  width:100%;
  height:100%;
  /*background:#2C3E50;*/
}

.sq_tabcontrol.sq-centered > div[name="buttonsPanel"]{
  position: absolute;
  top:0;
  left:50%;
  width:70mm;
  display:table;
  right:0;
  transform: translateX(-50%);
}
.sq_tabcontrol.sq-centered > div[name="buttonsPanel"] .sq_tabbutton{
  border:none;
  display:table-cell;
  font-family: bebasneue;
  font-size:4.4mm;
  padding-left:4mm;
  padding-right:4mm;
  padding-bottom:0.25mm;
  background:none;
  border-radius:0;
  /*color:white;*/

}.sq_tabcontrol.sq-centered > div[name="buttonsPanel"] .sq_tabbutton:hover,
.sq_tabcontrol.sq-centered > div[name="buttonsPanel"] .sq_tabbutton.sq-selected {

 border-bottom: 0.75mm solid #363D45;
}
.sq_tabcontrol.sq-centered > div[name="buttonsPanel"] .sq_tabbutton:hover > label,
.sq_tabcontrol.sq-centered > div[name="buttonsPanel"] .sq_tabbutton.sq-selected > label{

  cursor: pointer;
}
.sq_tabcontrol.sq-centered > div[name="pagesPanel"]{
  position: absolute;
  top:7mm;
    border:none;
  left:0;
  bottom:0;
  right:0;
  background: whitesmoke;
}


/*Left Aligned Tab Buttons*/

.sq_tabcontrol.sq-left > div[name="buttonsPanel"]{
 display: table-cell;
  width:70mm;
  top:0;
  left:0;
  bottom:0;
  position: absolute;
 overflow-y: auto;
}

.sq_tabcontrol.sq-left > div[name="buttonsPanel"] .sq_tabbutton{
border:none;
  border-radius:none;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
  background:unset;
  margin-top:3mm;
  margin-bottom:3mm;
 padding-left:10mm;
}
.sq_tabcontrol.sq-left > div[name="buttonsPanel"] .sq_tabbutton:hover{
 background: #DDE1E6;
}

.sq_tabcontrol.sq-left > div[name="buttonsPanel"] .sq_tabbutton > label{
   color: #22313F;
  cursor:pointer;
  font-size:5mm;
  font-family: lane;
}

.sq_tabcontrol.sq-left > div[name="pagesPanel"]{
 display: table-cell;
  border:none;
  border-radius:none;
  background:#F6F7F8;
  left:70mm;
  position: absolute;
  top:0;
  bottom:0;
  right:0;
}

.sq_tabcontrol.sq-left > div[name="pagesPanel"] .sq_tabpage{

}

/*sq-basic*/
.sq_tabcontrol.sq-simple {
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
}

.sq_tabcontrol.sq-simple [name="pagesPanel"]
{
  position:absolute;
  top:26px;
  bottom:0px;
  left:0px;
  right:0px;

  background-color:#f6f7f8;
  border:none !important;
}

.sq_tabcontrol.sq-simple .sq_tabpage {
   position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
    padding:1mm;
  background-color:#f4f4f4;
}

.sq_tabcontrol.sq-simple .sq_tabbutton {
  border-radius:0px !important;
  border:none;
  /*border-left:1px solid #444444;*/
  /*! background-color:#c0c0c0; */
  padding-left:10px;
  padding-right:10px;
  font-size:14px;


}
.sq_tabcontrol.sq-simple .sq_tabbutton:hover {
  background-color:#e6e6e6;
  color:#596363;
}

.sq_tabcontrol.sq-simple .sq_tabbutton.sq-selected {
  /*! background-color:#666666; */
  /*! color:#f6f7f8; */
  padding-left:15px;
  padding-right:15px;
}

.sq_tabcontrol.sq-simple [name="buttonsPanel"] {
  position:relative;
  top:0px;
  /*border-top:1px solid #444444;*/
}

.sq_tabcontrol.sq-simple [name="fillerPanel"] {
  border:none !important;
  /*border-left:1px solid #444444 !important;*/
  background-color:#c0c0c0;


}