/* custom text colour */
h1.custom-h1 {color: #ccc;}
h3.custom-h3 {color: #ccc;}
h4.custom-h4 {color: #ccc;}
h5.custom-h5 {color: #ccc;}
p.custom-p {color: #ccc;}
p {color:#ccc;}
b {color:#ccc;}   

/* sticky footer */
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column; 
    min-height: 100vh; 
    margin: 0; 
}

#wrap {
    flex: 1;   
}

#footer {
    height: 60px;
}
/* end sticky footer */


/* custom background colour */
body.custom-body {
    background-color: #181818;
    }

/* custom background colour - prevents 'flash' on refresh/get request in dark mode */
html.html-custom{
    background: #181818
    }

/* custom box */
div.custom-box{
    display: block; 
    width: 100%; 
    font-size: 14px;
    line-height:1.42857143; 
    color: #ccc; 
    background-color: #333;
    background-image: none; 
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);  
    transition: border-color ease-in-out .15, box-shadow ease-in-out .15s;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left; 
    padding: 5px; 
    word-wrap: break-word;
    word-break: break-word;
    }

/* custom 'copy' button colour */
button.btn-custom {
    color: #ccc; 
    background-color: #333
    }

/* custom navbar colour */
nav.navbar-custom {
    background-color: #181818;
    border-color: #181818;
    }

/* custom navbar button text colour */
.navbar-default .navbar-nav>li>a.a-custom{
    color: #ccc; 
    }

/* custom navbar dropdown 
.dropdown-menu.dropdown-menu-custom{
    color: tomato;
    }*/

/* custom navbar 'Blockbill' home button text colour */
a.navbar-brand.navbar-brand-custom {
    color: #ccc;
    }

/* custom form StringField / TextAreaField label colour */
label.label-custom {
    color: #ccc
    }

/* custom form StringField colour */
input.input-custom {
    color:#ccc; 
    background-color: #333;
    border: 1px solid #ccc
    } 

/* custom form SubmitField button colour */
input.input-button {
    color: #ccc;
    background-color: #333
    } 


/* custom form TextAreaField colour */
textarea.textarea-custom{
    color:#ccc; 
    background-color: #333;
    }    

/* custom form FileField colour */
input.filefield-custom {
    color: #ccc;
    }

/* custom tooltip colour */
a.tooltip-custom{
    color: #ccc
    }

/* custom dropdown menu colour */
.dropdown-menu.dropdown-menu-custom>li>a {
    color: #ccc; 
    background-color: #333
    } 

/* custom dropdown menu top and bottom padding colour */
.dropdown-menu.dropdown-menu-custom {
    background-color: #333
    }

/* custom footer */
footer.footer-custom {
    position: absolute;
    bottom: 0; 
    height: 100px; 
    background-color: #333;
    font-size: 100px; 
} 


/* Toggle */

/* Hide the checkbox */
.dark-mode-checkbox {
    display: none;
}

/* Style the label as a toggle switch */
.dark-mode-label {
    display: block;
    width: 40px; /* Adjust the width as needed */
    height: 20px; /* Adjust the height as needed */
    background-color: #ccc;
    border-radius: 15px; /* Make it round */
    position: relative;
    cursor: pointer;
}

/* Style the switch (the thumb) */
.dark-mode-checkbox:checked + .dark-mode-label {
    background-color: #ccc; /* Blue or your desired color */
    }

.dark-mode-label::before {
    content: '';
    position: absolute;
    width: 15px; /* Adjust the width of the thumb */
    height: 15px; /* Adjust the height of the thumb */
    border-radius: 50%; /* Make it round */
    background-color: #fff;
    top: 2.5px; /* Center it vertically */
    left: 2.5px; /* Start it at the left edge */
    transition: 0.4s;
    }

/* Move the thumb to the right when the checkbox is checked */
.dark-mode-checkbox:checked + .dark-mode-label::before {
    transform: translateX(20px); /* Adjust the distance to move the thumb */
    }

/*End Toggle */