body {
    /*Add padding to bottom of page - moves it up and allows content to be shown when fixed botton mobile nav in place
        Could add padding via js - see mobilenav, but adding here for general content move up
    */
    padding-top: 70px;
    padding-bottom: 50px;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
}
.navbar-light .navbar-nav .nav-link:hover{
    /*color:#28a745;*/ /*Coinz Orange #fe9808*/
    color: black;
    text-decoration:underline;
}
#logincard .card-header,
#forgotcard .card-header,
#registercard .card-header,
#accountbalance .card-header,
#topups .card-header,
#promotional .card-header,
#spending .card-header,
#activity .card-header,
#paymentcard .card-header,
#passwordresetcard .card-header,
#contactcard .card-header,
#notifycard .card-header,
#topupcard .card-header,
.accountcard .card-header,
#helpcard .card-header,
#termscard .card-header,
#privacycard .card-header,
#coinzbalances .card-header,
#promobalances .card-header,
.errorcard .card-header {
    text-align: center;
    font-weight: bold;
    background-color: #fe9808
}
#logincard .btn-block+.btn-block,
#topupcard .btn-block+.btn-block{
    margin-top: 1rem;
}
.orseperator{
    margin-top: 1rem;
    font-weight:bold;
    text-align:center;
}

/*Validate Text*/
.validatetxt {
    color:red;
}
/*Forms*/
.form-text {
    font-size:13px;
    font-style:italic;
    
}
/* Summary row hover*/
.summaryhover:hover {
background-color: #ededed; /*rgba(0,0,0,.075);*/
text-decoration:underline;
/*color:#ff9706;*/
color:#007bff;
}

/*Summary and Activity Highlight links*/
.summaryhover  p.summarylink {
    margin-bottom: 0;
    text-decoration: underline;
    color: #007bff;
    font-weight: bold;
}
/*Nav Notification Badge*/
.navbadge {
    position:relative;
}
/*On Mobile Navbar*/
.navbadge .badge{
    position: absolute;
    top: 2px;
    right: 12px;
    /*Override BS Setting*/
    font-size: 50%;
}
/*When Badge is on the full navbar position is different*/
@media (min-width: 768px) {
    .navbadge .badge {
    right: 4px;
    }
}
@media (max-width: 768px) {
    #mobnavmain .navbadge .badge {
    top: 5px;
    right: 2px;
    }
}
/*Nav Mobile Icons as a link - did not seem to format properly using <div class="navbar-nav"> and d-block */
/*May look into further*/
/*This changes the a tag to same colour as nav*/
.navbar-light a.d-block {
    color: rgba(0,0,0,.5);
}
.navbar-light a.d-block:focus, 
.navbar-light a.d-block:hover {
    color: rgba(0,0,0,.7);
}

/*Navbars Change colours when active - when link to new page as well - set via JS*/
/* If as a ul - li*/
/*#accountnav .nav-item > .active {
    text-decoration:underline;
    font-weight:600;
    color:#ff9706;
}*/
/*as a div - a*/
/*#accountnav .nav-item.active,
#mainnav .nav-item.active{
    text-decoration:underline;  
    color:#ff9706;
}*/
/*All navbars with class - combining the above into one JS - see JS*/
/*Need extra classes to override BS settins when using a class*/
.activenav .navbar-nav .nav-link.active,

/*Counters the colouring for .navbar-light a.d-block*/
.activenav a.mobnavactive.active {
    text-decoration:underline;
    font-weight:600;
    /*#ff9706*/
    color:#fe9808;
}

.navbar-nav > .faIcon {
    margin-right:10px;
}

/*Mobilenav*/
.mobnavmain-visible {
    visibility:hidden;
}
.mobnavside-visible {
    visibility:hidden;
}

/*Settings Page*/
/*If using Mobile Side menu pad the content more to right*/
@media (max-width: 767px) {
    #settingscontainer {
        padding-left:30px;
    }
    #activityfilter .btn {
        font-size:12px;
    }
}
/*Pagination*/
.page-link {
    color: #000000;
}
.page-link:hover{
    color:#fe9808;
}
.page-item.active .page-link {
    background-color: #fe9808;
    border-color:#fe9808;
}
/*Negate bottom margin on pagination*/
ul.pagination {
    margin-bottom:0;
}


/* Test to reduce padding - when in cardbody not quite right?*/
/*@media (min-width: 769px) and (max-width: 1024px) {
    .card-body{

    }
    .pad8 >[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
    }
}*/


/*Modals*/
/*Make Title Central - needs class w-100 on title*/
#TopUpModal .modal-header,
#TransactionModal .modal-header,
#CalStartModal .modal-header,
#CalEndModal .modal-header,
#NotificationsModal .modal-header{
    text-align:center;
}
.listheading {
    font-weight: bold;
    flex: 0 0 180px;
}


/*Account */
/*Nav Tabs*/
#settingsnav-tab > a,
#settingsnav-sidetab > a
 {
    color:black;
}
#settingsnav-tab .list-group-item.active,
#settingsnav-sidetab .list-group-item.active
{
    color: #000000;
    background-color: #fe9808;
    border-color: #fe9808;
}


/*Activity*/
#activitydate .input-group-prepend .input-group-text{
    min-width:100px;
}

/*Date Picker*/
/* all done using BS css*/
/*#reportrange {*/
    /*Covered using form-control*/
    /*background: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #ccc;*/
    /*width: 300px;*/
/*}*/
/*Alerts*/

/*Linked Numbers*/
/*@media (min-width: 768px) {
    .btnlinknumber > :first-child {
        margin-right: 5px;
    }
}*/
@media (max-width: 576px) {
   /*  .btnlinknumber > :first-child {
        margin-bottom: 10px;
    }*/

    .btnmobileblock {
        display: block;
        width: 100%;
    }
    #reportrange span {
        font-size: .90rem;
    }
}
@media (max-width: 767px) {
   
    /*BS is display flex - this allows the nav to fully center items - as top nav collapse does */
    footer .navbar {
        display: block;
    }
}
/*Back to top*/
/*https://codyhouse.co/gem/back-to-top/ */
/*.cd-top {
  display:inline-block;
  height:40px;
  width:40px;
  position:fixed;
  bottom:60px;
  right:5px;
  overflow:hidden;
  text-indent:100%;
  white-space:nowrap;
  visibility:hidden;
}

.cd-top.cd-is-visible {
  visibility: visible;
 
}

.cd-top {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    background:#fe9808;
    background: rgba(254, 152, 8, 0.8) url(/assets/Image/cd-top-arrow.svg) no-repeat center 50%;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    -o-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    -o-transition:opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
    opacity: 1;
}
.cd-top.cd-fade-out {
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}*/
/*Replacement*/
#btntotop {
    position: fixed;
    bottom: 100px;
    right: 20px;
    display: none;
    border-radius: 50%;
    padding: 6px;
}

#btntotop i {
    font-size: 30px;
}

#btntotop {
    z-index: 1040 !important;
}
/*@media (min-width:768px) and (max-width:991px) {*/
@media (max-width:991px) {
    #btntotop {
        bottom: 170px !important;
    }
}


/*END Back to top*/

.g-recaptcha{
    min-height:78px; /*From iframe of captcha - creates a space for the captcha instead of jumping down*/  
}
.g-recaptcha > div:first-child{
    margin:auto; /* the > forces only the first div to be selected - centers the captcha*/
}
/* Resize the reCAPTCHA on Mobile*/
/* NEED TO REVISIT THIS - may use a different captcha option - see options on recaptcha website - or way of styling*/
@media (max-width: 325px) {
    #rc-imageselect, 
    .g-recaptcha {
        -webkit-transform: scale(0.80);
        /*CHECK if next 3 required - Visual studio shows warning if missing*/
        -moz-transform: scale(0.80);
        -ms-transform: scale(0.80);
        -o-transform: scale(0.80);
        /*VS shows warning if not after vendor-prefixs above*/
        transform: scale(0.80);
        -webkit-transform-origin: 0 0;
        /*CHECK if next 3 required - Visual studio shows warning if missing*/
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        /*VS shows warning if not after vendor-prefixs above*/
        transform-origin: 0 0;
    }
}



/*Testing*/
/*These classes may not be use and are for showing e.g other example layouts*/
/*On Account settings - Profile*/
.example2 .input-group-prepend .input-group-text{
    min-width:100px;
}
@media (max-width: 576px) {

    .example2.input-group {
        display: block;
    }
        .example2.input-group > .form-control,
        .example2.input-group > .input-group-prepend .input-group-text,
        .example2.input-group > .input-group-append .btn {
            width: 100%;
        }

        .example2.input-group > .form-control,
        .example2.input-group > .input-group-prepend .input-group-text {
            margin-bottom: 5px;
        }
}