/* jwbs (color) class, and default styling */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');
@import url("../includes/assets/default.css");
@import url("jwbs.css");

/* global css */
body { font-family: 'Noto Sans Display', sans-serif; }
header { display: none; }

/* colors */
.text-dkblue { color: #00304f; } .bg-dkblue, .bg-dkblue:focus { background-color: #00304f; } .border-dkblue { border-color: #00304f !important; }
.text-dkgrey { color: #464646; } .bg-dkgrey, .bg-dkgrey:focus { background-color: #464646; } .border-dkgrey { border-color: #464646 !important; }
.text-orange { color: #fa8301; } .bg-orange, .bg-orange:focus { background-color: #fa8301; } .border-orange { border-color: #fa8301 !important; }

/* Header */
.carousel-caption {display: none;}

/* Homepage */
.home #main { padding:0; }
.home { background: #fa8200; }
.home .login-box { margin-top: -38%; }
.home header, .home footer { display: none; }
.home #content { margin-left:0; margin-right:0; }
.home .bg img { min-height: 100%; width: 100%; height: auto; }
.home .container { max-width: 100vw !important; padding:0; margin:0; }
.home ::placeholder { color: #fff; font-size: 24px; text-align: center; }

/* pages */
#banner { padding-bottom:20px; background: #fa8301; }
/* Data Display */
.demo-form input { font-weight:bold; letter-spacing:5px; }
/* Retrieve Data */

 */
/* media queries */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 576px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .modal-content { width: 100%; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .home .login-box { margin-top: -28%; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
}

/* Style the Image Used to Trigger the Modal */
#myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; }
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
/* Modal Content (Image) */
.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; }
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; }
/* The Close Button */
.close { position: absolute; top: 8%; right: 20%; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }
.close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }