:root{

--darkBlue: #3174b8;
--lightBlue: #7eadf3;
--white: #FFFFFF;
--radius:22px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:var(--darkBlue);

font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;

overflow-x:hidden;

}

/* ===========================
HEADER
=========================== */

.header{

position:sticky;

top:0;

z-index:999;

height:65px;

background:var(--lightBlue);

padding:
env(safe-area-inset-top)
15px
0
15px;

display:flex;

align-items:center;

justify-content:space-between;

box-shadow:0 2px 12px rgba(0,0,0,.2);

}

.logo{

height:42px;

}

.mobile-nav-toggle{

font-size:28px;

color:#FFF;

cursor:pointer;

}

/* ===========================
MENU
=========================== */

#navbar{

position:fixed;

top:65px;

right:-240px;

width:220px;

height:100vh;

background:#FFF;

transition:.3s;

box-shadow:-5px 0 20px rgba(0,0,0,.15);

padding-top:20px;

z-index:998;

}

#navbar.active{

right:0;

}

#navbar ul{

list-style:none;

padding:0;

}

#navbar li{

border-bottom:1px solid #EEE;

}

#navbar a{

display:block;

padding:15px 20px;

text-decoration:none;

font-weight:600;

color:#333;

}

#navbar a:hover{

background:#F2F2F2;

}

/* ===========================
HERO
=========================== */

.hero{

/*
display:flex;

position:absolute;

top:-220px;

left:50%;

transform:translateX(-50%);

width:100%;
  
max-width:420px;
  
height:180px;

align-items:center;

justify-content:center;

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/banner-tsg.png');
  
background-size: cover;
  
background-position: center;
  
background-repeat: no-repeat;

opacity: 0.6;
  
border-radius:0 0 60px 60px;
*/


height:150px;

border-radius:0 0 100px 100px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

box-shadow:0 5px 15px rgba(0,0,0,.12);

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/banner-tsg.png');
  
background-size: cover;
  
background-position: center;
  
background-repeat: no-repeat;

opacity: 0.6;


}

/* ===========================
CARD
=========================== */

.content{

width: 100%;

padding:15px;

margin-bottom:30px;

}

/*
.card-box{

background: #FFF;

border-radius:10px;

padding:20px;

margin:20px; 

box-shadow:0 5px 20px rgba(0,0,0,.15);

min-width:100%;

min-height: auto;

}
*/

.card-box {
      position: relative;
      min-width:100%;
      min-height: auto;
      padding: 30px;
      color: #000000;
      /* Fallback background color */
      background-color: #0b1d6b; 
      /* Cuts out the bottom-left corner */
      background: linear-gradient(135deg, transparent 25px, #FFFFFF 0);
      border-radius: 5px;
      margin: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* The Folded Flap Effect */
    .card-box::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      /* Width and height must match the diagonal size of the gradient cut */
      width: 35px;
      height: 35px;
      /* Splitting the box diagonally into a semi-transparent white triangle */
      background: linear-gradient(45deg, transparent 50%, rgba(12, 42, 211, 0.35) 50%);
      /* Optional slight shadow behind the fold for a 3D effect */
      box-shadow: 2px -2px 3px rgba(0, 0, 0, 0.15);
      border-top-right-radius: 5px;
    }


.footer{

min-width:100%;

min-height: auto;

padding: 15px;

margin-top:20px;

font-size:15px;

text-align:center;

color: var(--darkBlue);

background-color: #fff;

}

th { font-size:11px; background-color:#091369; color:#fff}
td { font-size:11px; color:#091369;}
th,td{padding:5px 8px;}
th{ text-transform: uppercase; color:#FFF; }
table tr:nth-child(odd){background-color:#E7EBCE;color: #000; }
table tr:nth-child(even){background-color:#00FFFF;color: #000; }