/*color theme
red: #800B13
dark red: #66090F
light red: #990E17
blue: #170C53
dark blue: #10083B
light blue: #1D0F6E
green: #2F8C00
light green: #37A600
yellow: #E6B400
light yellow: #FFCC00
*/
* {
  font-family: "Quicksand","Nunito","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-display: swap;
}
/*apply background to full page*/
body {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/*link restyling*/
a {
  text-decoration: none;
}
a:link:not(.btn) {
  color: #ffffff;
}
a:visited:not(.material-icons-outline, .btn, .nav-link) {
  color: #66090F;
}

/*remove scrollbar*/
.no-scroll::-webkit-scrollbar {
  display: none;
}
/*give content containers transparent white background*/
.bg-container {
  --bs-bg-opacity: .25; 
  border-radius: 0.5rem;
}
.bg-container-full {
  --bs-bg-opacity: .75; 
  border-radius: 0.5rem;
}

/*main nav logo*/
.logo {
  min-height: 70px;
  max-height: 70px;
}
.frontlogo {
  max-height: 25vh;
}
/*big logo as whole body but behind content*/
.biglogo {
  position: absolute !important;
  display: block !important;
  margin: auto;
  z-index: -1;
  overflow: visible !important;
  height: auto;
  max-width: 75vw;
  opacity: 0.15;
  filter: grayscale(0.6);
  filter: saturate(0.25);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   
}

/*sponsor logo*/
.sponsor {
  height:auto;
  width:100%;
  max-height: 5rem;
}
/*header and footer color*/
.bg-red {
  background-color:rgba(128, 11, 19, 0.5)
}
.bg-blue {
  background-color:rgba(23, 12, 83, 1)
}

/*active nav item color*/
.nav-pills .nav-link.active {
  background-color:#fff;
  border-radius: .25rem;
  color: #170C53;
}
.nav-pills .nav-link.active span {
  background-color:#fff;
  border-radius: .25rem;
  color: #170C53;
}
.nav-pills .nav-link.active.text-truncate {
  
  border-radius: 0;
  
}
/*hover menu items color*/
.list-group-item {
  color: #fff;
}
.list-group-item:hover {
  background-color:#800B13;
  border-radius: .25rem;
  color: #fff;
}
.list-group-item.text-truncate:hover {
  background-color:#fff;
  border-radius: 0;
  color: #fff;
}
/*icon formatting*/
.icon {
  color: #170C53;
  text-decoration: none;
}
.icon:hover {
  color: #800B13;
  text-decoration: none;
}

/*make the front page title and subtitles themed*/
.title {
  color: #170C53;
  font-weight: 900;
}
.subtitle {
  color: #800B13;
  font-weight: 100;
}

/*make icon larger*/
.bi-m {font-size: 2rem}
.bi-l {font-size: 3rem}
.bi-xl {font-size: 4rem}
.bi-xxl {font-size: 5rem}



/*material design icon colors*/
.material-icons {color: #fff;}
.material-icons-outlined {color: #fff;}
.material-icons-round {color: #fff}
.md-icon-red { color: #800B13; }
.md-icon-blue { color: #170C53; }

.md-icon-green { color: #2F8C00; }

/*material design icon sizes*/
.material-icons.md-s { font-size: 1rem; }
.material-icons.md-m { font-size: 2rem; }
.material-icons.md-l { font-size: 3rem; }
.material-icons.md-xl { font-size: 4rem; }
.material-icons.md-xxl { font-size: 5rem; }
.material-icons-round.md-s { font-size: 1rem; }
.material-icons-round.md-m { font-size: 2rem; }
.material-icons-round.md-l { font-size: 3rem; }
.material-icons-round.md-xl { font-size: 4rem; }
.material-icons-round.md-xxl { font-size: 5rem; }
.material-icons-outlined.md-s { font-size: 1rem; }
.material-icons-outlined.md-m { font-size: 2rem; }
.material-icons-outlined.md-l { font-size: 3rem; }
.material-icons-outlined.md-xl { font-size: 4rem; }
.material-icons-outlined.md-xxl { font-size: 5rem; }
.material-icons-round.md-s { font-size: 1rem; }
.material-icons-round.md-m { font-size: 2rem; }
.material-icons-round.md-l { font-size: 3rem; }
.material-icons-round.md-xl { font-size: 4rem; }
.material-icons-round.md-xxl { font-size: 5rem; }

/*material design icon to match bootstrap display - used for page titles*/
.material-icons.disp-6 { font-size: calc(1.375rem + 1.5vw * 2); }
.material-icons.disp-5 { font-size: calc(1.425rem + 2.1vw * 2); }
.material-icons.disp-4 { font-size: calc(1.475rem + 2.7vw * 2); }
.material-icons.disp-3 { font-size: calc(1.525rem + 3.3vw * 2); }
.material-icons.disp-2 { font-size: calc(1.575rem + 3.9vw * 2); }
.material-icons.disp-1 { font-size: calc(1.625rem + 4.5vw * 2); }
.material-icons-outlined.disp-6 { font-size: calc(1.375rem + 1.5vw * 2); }
.material-icons-outlined.disp-5 { font-size: calc(1.425rem + 2.1vw * 2); }
.material-icons-outlined.disp-4 { font-size: calc(1.475rem + 2.7vw * 2); }
.material-icons-outlined.disp-3 { font-size: calc(1.525rem + 3.3vw * 2); }
.material-icons-outlined.disp-2 { font-size: calc(1.575rem + 3.9vw * 2); }
.material-icons-outlined.disp-1 { font-size: calc(1.625rem + 4.5vw * 2); }
.material-icons-round.disp-6 { font-size: calc(1.375rem + 1.5vw * 2); }
.material-icons-round.disp-5 { font-size: calc(1.425rem + 2.1vw * 2); }
.material-icons-round.disp-4 { font-size: calc(1.475rem + 2.7vw * 2); }
.material-icons-round.disp-3 { font-size: calc(1.525rem + 3.3vw * 2); }
.material-icons-round.disp-2 { font-size: calc(1.575rem + 3.9vw * 2); }
.material-icons-round.disp-1 { font-size: calc(1.625rem + 4.5vw * 2); }

/*vertically aligns icons inside div*/
.icon-align {
  display: flex;
  align-items: center;
}

/*google maps frames*/
.map-responsive iframe {
  
  width:100%;
  min-height: 40vh;
  border-radius: 1rem;
}

/*MRT train icons*/
.mrt {
  display: grid;
  align-self: center;
  justify-self: center;
  grid-template-columns: 1fr 3fr;
  border-radius: 15px;
  align-self: center;
  justify-self: center;
}
.mrt-text {
  text-align: start;
}
.mrt-green {background-color: #00943a;}
.mrt-blue {background-color: #0056b8;}
.mrt-purple {background-color:#9e27b5;}
.mrt-yellow {background-color: #ff9e1a;}
.mrt-red {background-color: #e2211c;}

/*card formatting*/
.card-header .collapsed .collapsecontrol {
  transform: rotate(180deg);
}
.card {
  background: none;
  border: none;
}
.card-img-top {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  object-fit: cover;
  object-position: top;
}
.card-header {
  background: none;
  border: none;
}


/*change primary button colours - blue then red on click/hover/active*/
.btn-primary {
  background-color: #170C53;
  border-color: #10083B;
}

.btn-primary:hover {
  color: #fff;
  background-color: #800B13;
  border-color: #66090F;
}
.btn-check:focus+.btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: #800B13;
  border-color: #66090F;
  box-shadow: 0 0 0 0.25rem rgb(125 25 31 / 50%);
}
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #800B13;
  border-color: #66090F;
}

.btn-outline-primary {
  
  border:none;
  background-color: #adb5bd;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #170C53;
  border-color: #10083B;
}
.btn-outline-primary:focus {
  box-shadow: none;
}

/*change danger button colours - blue then red on click/hover/active*/
.btn-danger {
  background-color: #800B13;
  border-color: #66090F;
}
.btn-danger:hover {
  color: #fff;
  background-color: #66090F;
  border-color: #66090F;
}
.btn-check:focus+.btn-danger, .btn-danger:focus {
  color: #fff;
  background-color: #66090F;
  border-color: #66090F;
  box-shadow: 0 0 0 0.25rem rgb(125 25 31 / 50%);
}
.btn-check:active+.btn-danger, .btn-check:checked+.btn-danger, .btn-danger.active, .btn-danger:active, .show>.btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #800B13;
  border-color: #66090F;
}
/*change warning button colours*/
.btn-warning {
  color: #fff;
}
.btn-warning:focus {
  color: #fff;
}
.btn-warning:active {
  color: #fff;
}

/*white border on footer*/
.white-border {
  border-top: solid 0.3rem;
  border-color: #fff;
}
/*remove styling from menu toggle button*/
.navbar-toggler {
  border: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
/*remove styling from form control*/
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #1d0f6e;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(23 12 83 / 50%);
}
/*fix info box border radius on forms that have a validation(?!) */
.form-control.fix-radius, .input-group-text.fix-radius {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.btn.fix-radius {
  border-radius: 0.25rem !important;
  
}

.bg-bds {
  background-image: url("../assets/background/bg-triangle.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
}

.w-20 {
  width: 20% !important;
}

.offcanvas {
  border: none;
}

/*large toggle switch*/
.form-check-input {
  clear: left;
}

.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}

.form-check-input:checked {
  border-color: #2F8C00;
  background-color: #37A600;
}
/*change toggle switch focus color (the hex number after %23)*/
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23800B13'/%3e%3c/svg%3e");
  box-shadow: 0 0 0 0.25rem rgb(138 0 0 / 25%);
  border-color: #66090F
}

.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  box-shadow: 0 0 0 0.25rem rgb(47 140 0 / 25%);
  border-color: #37A600
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #6c757d;
}
a.dropdown-item:link:not(.btn).active {
    color: #fff;
}
.filter-control {
  margin: 0.25rem;
}
.collapsed .collapsecontrol {
  transform: rotate(180deg);
}