* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
    /*border-width: 0;
    border-style: solid;
    border-color: #e2e8f0;*/
}

input, select{
    border-width:1px; border-color: #ccc;
     background-color: #ddd; color: #101010;
     text-align: right;
 }

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    line-height: 1.7em;
    Zcolor: #7f8c8d;
    font-size: 13px;
	margin-bottom:15px;
    background-color: #101c2c;
}

h1,
h2,
h3,
h4,
h5,
h6,
p.notes {
    color: #aaa;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
    text-align: center;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
    background: #0d2042;
}
.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #AECFE5;
}


/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
    background: #1f8dd6;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 88%;
    top: 0;
    left: 0;
    position: fixed !important;
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 20px;
    font-weight: bold;
    color: white;
    border: 3px solid white;
    padding: 1em 1.6em;
    font-weight: 100;
    border-radius: 5px;
    line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: white;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {

    width: 100%;
    min-height: 12%;
    z-index: 2;
    background: white;

}

/* We want to give the content area some more padding */
.content {
	background-color:#101c2c;  /*https://datatables.net/extensions/searchbuilder/examples/styling/greyscale.html   */
}

body div.header .pure-menu-horizontal a.menu-heading {
    vertical-align: middle;
    position: relative;
    float: left;
    color: white;
    font-weight: 400;
    font-size: 120%;
    padding: .5em 1em;
}
body div.header .pure-menu-horizontal span.pure-g2{
    color:#aaa;position: relative;float: left;vertical-align: middle;
    padding: 0.9em 1em;
    font-size: 13px;
    text-align: center;height: 36px;line-height: 36px;
}



.tab-content {
    padding: 1em 1em 1em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
}
    .content-subhead i {
        margin-right: 7px;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #2d3e50;
    color: #aaa;
}

/* This is the class used for the footer */
.footer {
    background: #0d2042;
    width: 100%;
	clear: both;
	Zposition: fixed;
	bottom:0px;
	height:15px;
	left: 0px;
    right: 0px;
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }
        .home-menu ul {
            float: right;
        }

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 50%;
        height: 50%;
    }

    .splash-head {
        font-size: 250%;
    }


    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }

}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
}

h2.jbs1 {padding-top:15px;}
.jbs1 div label{display: block;}
.jbs1 div .pure-button {display: block; margin-top:15px}
.jbs1 thead tr th {width:200px;}
.jbs1 tbody tr td input{width: 100px;}
p.m-t-0{margin-top:0;color:#aaa;}
p.notes {font-size:13px;margin:0}
p.instructions{color:#aaa;font-size: 13px;margin: 0;line-height: 18px;}
 input.c2rowDeposit{width:60px;}
 .mini-button{
     background-color: #323232;
     color: white;
     padding: 2px 7px;
     border-radius: 5px;
     font-size: 15px;
 }
ol.tips{background-color: #fff; list-style: decimal-leading-zero; padding: 10px 0 10px 30px;}
div.tabs ol.tips > li {background-color: #fff}
div>p{font-weight:bold;}

.pure-table { border:0; text-align: center;}
div.l-box .user-details-table  thead {background-color: lightslategrey;}
table.pure-table.results-table thead {background-color: lightslategrey;}

table.pure-table tbody tr{background-color: #969696 ;}
table.pure-table tbody tr.pure-table-odd{background-color: #808080;}
table.pure-table tbody tr.pure-table-odd td {background-color: #808080;}
table.pure-table tbody tr.row-retired-year {border-bottom:4px solid #000;}

div.l-box .user-details-table{width:100%;background-color: #777; border:0;}

div.l-box .user-details-table.pure-table th{text-align: center; border-left:0;}
div.l-box .user-details-table.pure-table th:not(:first-of-type){padding: 5px 14px; border-left:1px solid #999;}

div.l-box .user-details-table.pure-table td{text-align: center; border-left:0;}
div.l-box .user-details-table.pure-table td:not(:first-of-type){padding: 5px 14px; border-left:1px solid #999;}

table.pure-table.results-table td,table.pure-table.results-table th{ padding: .5em .1em; }
table.pure-table.results-table td{border:1px solid #999;}
table.pure-table.results-table th{border-left:1px solid #999; text-align:center;}
table.pure-table.results-table th:last-child{border-right:1px solid #999;}
table.pure-table.results-table {border:0;margin-top:5px;}

table.pure-table.results-table th.pot1{background-color:#73a4bd;}
table.pure-table.results-table th.pot2{background-color:#5794b2;}
table.pure-table.results-table td.pot1{}
table.pure-table.results-table td.border-left-2, table.pure-table.results-table th.border-left-2{border-left:5px solid #a1a1a1;}

div.tab3 .pure-table.results-table td{padding:1px;}
div.tab3 input.c2rowDeposit{width:45px;}
div.tab3 input.c2rowRate{width:32px;}

.pure-g2{background-colorZ:0;position: relative;float: left;}
.right-bar{background-color: steelblue;margin-right:5px; float:right;}

.pure-g-wrapper{width: 100%;margin-top:20px;display: inline-block;}
.steelblue{background-color: #f0f8ff}
.l-box{background-color: #252525;}


.center{    margin-left: auto;margin-right: auto; width: fit-content;}
.max-width{width:100%;}
div.center{width:1200px;}
.t-right{text-align: right;}

 .flex {
     display: flex
 }
 .border-b {
     border-bottom-width: 1px
 }
 .-mb-px {
     margin-bottom: -1px
 }
 .mr-1 {
     margin-right: .25rem
 }
 .text-blue-500 {
     color: #4299e1
 }
 .text-black {
     color: #000;
 }

 .text-ccc {
     color: #CCC;
 }
 .text-blue-800 {
     color: #2c5282
 }
 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem
 }
 .py-2 {
     padding-top: .5rem;
     padding-bottom: .5rem
 }
 .font-semibold {
     font-weight: 600
 }
 .inline-block {
     display: inline-block
 }
 .border-l {
     border-left-width: 1px
 }
 .border-t {
     border-top-width: 1px
 }

 .border-r {
     border-right-width: 1px
 }
 .rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem
 }
 .bg-white {
     background-color: #fff
 }
 .bg-aaa {
     background-color: #aaa
 }
 .bg-444 {
     background-color: #444
 }
.hover\:text-blue-800:hover {
    color: #000
}
ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}

a {
    color: inherit;
    text-decoration: inherit
}
div.tabs li{background-color: #333;}
div.tabs ul li a{color:#ccc;}
div.tabs ul li a.text-white {color: #fff;}

#c3_tab3_popup{
    height:250px;
    width:1197px;
    background-color:#343434;
    position:absolute;
    left:44px;
    padding: 0 15px;
    color:#ddd;
    text-align:right;
}
#c3_tab3_popup p{text-align:left;margin:5px 0;}
#c3_tab3_popup table{margin:5px 0 10px 10px;}
#c3_tab3_popup td.rate input{width:100px;}
#c3_tab3_popup td.pot1 {padding:0 0 0 100px;}
#c3_tab3_popup td.pot2 {padding:0 0 0 305px;}


.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


[x-cloak] { display: none !important; }

div.grid1{
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
}
div.simple-questions{
    width: 700px;
    background-color:#444;
    padding: 25px;
    margin: 0 0 30px 30px;
}
div.simple-questions table tr{
    height: 50px;
}

div.simple-questions table tr td{
    color:#fff;
}

div.simple-questions table tr td.first-td{
    width:350px;
}

td.second-td{
    width:20px;
}

div.simple-questions table tr td.third-td input{
    width:100px;
}

div.simple-questions span{
    color:#fff;
}

div.advert001{
    width: 500px;
    background-color:#999;
    padding: 25px;
    margin: 0 0 30px 30px;
}

div.other-div{
    width: 500px;
    background-color:#999;
    padding: 25px;
    margin: 0 0 30px 30px;
}
div.other2-div{
    width: 500px;
    background-color:#444;
    padding: 25px;
    margin: 0 0 30px 30px;
}
div.other2-div td.first-td{
    background-color:#ddd;
}

div.results-div{
    width:700px;
    background-color: #666;
    padding: 25px;
    margin: 0 0 30px 30px;
}
div.results-div table tr td{
    color:#fff;
}

div.results-div table tr td.first-td{
    width:350px;
}

div.withdrawal-div{
    width:700px;
    background-color: #666;
    padding: 25px;
    margin: 0 0 30px 30px;
}
div.withdrawal-div table tr td{
    color:#fff;
}

div.withdrawal-div table tr td.first-td,
div.other-div table tr td.first-td{
    width:350px;
}

div.withdrawal-div table tr td.third-td input{
    width:100px;
}

span.bold{
    font-weight:bold;
}

div.notes1{
    display: table;
    margin-left: auto;margin-right: auto;
    Zbackground-color: #666;
    padding: 25px;
    width:676px;
}

.i5{
    width: 20px;
    top: 5px;
    position: relative;
    left: 115px;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 1000px;
  color: #aaa;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top:24px;
  left:-386px;
  font-size: 12px;
  margin: 0;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}