/* Responsive Tabs - menucool.com/jquery-tabs
   Universal version: no fixed breakpoint.
   Tabs are pills in one row. As soon as they no longer fit on one row,
   responsive-tabs-autofit.js adds the class "rtabs-compact" to the <ul>,
   which switches to the two-column mobile layout.
   Without JS the pills simply wrap onto several rows. */

ul.rtabs
{
display:flex;
flex-wrap:wrap;
gap:4px;
justify-content:flex-start; /* flex-start (left), center, or flex-end (right) */
margin:0;
padding:0;
list-style-type:none;
position:relative; /* keeps the tabs above a panel that overlaps them */
z-index:5;
}

ul.rtabs li
{
flex:0 0 auto;
margin:0;
padding:0;
}

ul.rtabs li a
{
display:inline-block;
box-sizing:border-box;
padding:0 25px; /* It determines tab width */
font-size:1.375rem;
font-weight:100;
line-height:40px; /* height of tabs */
white-space:nowrap; /* a tab label never breaks, so width is predictable */
text-decoration:none;
color:#083150;
background:transparent;
border:0;
border-radius:999px; /* pill shape */
position:relative;
transition:background-color 0.3s ease, color 0.3s ease;
}

ul.rtabs li a:link,
ul.rtabs li a:visited
{
color:#083150;
}

ul.rtabs li a:hover
{
background:rgba(52,117,240,0.2);
color:#083150;
}

/* Keyboard focus */
ul.rtabs li a:focus
{
outline:none;
}
ul.rtabs li a:focus-visible
{
outline:2px solid #5370ac;
outline-offset:2px;
}

/* selected tab style */
ul.rtabs li.selected a,
ul.rtabs li.selected a:link,
ul.rtabs li.selected a:visited,
ul.rtabs li.selected a:hover
{
font-weight:100;
color:#fff;
background:#5370ac; /*color #2*/
text-decoration:none;
z-index:3;
}

/* ---------- Compact (mobile) layout, switched on by JS ---------- */
ul.rtabs.rtabs-compact
{
gap:0;
box-sizing:border-box;
min-width:260px;
}
ul.rtabs.rtabs-compact li
{
box-sizing:border-box;
width:50%; /* set it to 100% for one column, 33.33% for three-column */
padding:2px; /* gap between pills */
}
ul.rtabs.rtabs-compact li:last-child:nth-child(odd)
{
width:100%;
}
ul.rtabs.rtabs-compact li a
{
display:block;
padding:0 12px;
text-align:center;
white-space:normal; /* long labels may wrap inside their pill */
}

/* ---------- Panels ---------- */
div.panel-container
{
border:0;
border-radius:4px;
position:relative;
padding:0;
margin:0 0 35px 0;
outline:none;
min-width:260px;
box-sizing:border-box;
}

div.panel-container > div
{
padding:30px 0 20px 0;

/* The two settings below should not be changed. */
display:block;
margin:0;
}

div.panel-container div.inactive
{
display:none;
}

/* loading image before ajax content is retrieved. Only applicable when Ajax is used.*/
div.ajaxLoading
{
background:transparent url(loading.gif) no-repeat center center;
height:150px;
width:20px;
font-size:0;
padding:0;
margin:0 auto;
}