@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,400i&display=swap");

/*-------------------------------------------------------------------------------------------------------------------*/
/* Style the tab */

.tab 
{
    overflow:            hidden;
    border:              1px solid #ccc;
    background-color:    #F8F8F8;
}

/*-------------------------------------------------------------------------------------------------------------------*/
/* Style the tab buttons */

.tab button 
{
    background-color:    inherit;
    float:               left;
    border-top:          0px;
    border-bottom:       0px;
    border-left:         0px;
    border-left:         0px;
    border-right:        1px solid #ccc;/*none;*/
    outline:             none;
    cursor:              pointer;
    padding-top:         0.50em;
    padding-bottom:      0.50em;
    padding-left:        1.00em;
    padding-right:       1.00em;
    transition:          0.3s;
    font-family:         'Roboto Mono','Arial';
    font-size:           1.25em;
}

/*-------------------------------------------------------------------------------------------------------------------*/
/* Change background color of buttons on hover */

.tab button:hover 
{
    background-color:    #C2D9F8;/*#ddd;*/
}

/*-------------------------------------------------------------------------------------------------------------------*/
/* Create an active button class */

.tab button.active 
{
    background-color:    #86CDF9;/*#E0FFFF;*/
}

/*-------------------------------------------------------------------------------------------------------------------*/
/* Style the tab pages */

.tabPage 
{
    display:             none;
    padding:             6px 12px;
    border:              1px solid #ccc;
    border-top:          none;
}

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