body {
	background-image: url("../images/linen-background.png");
	font-size: 16px;
	/* https://stackoverflow.com/questions/58308340/the-horizontal-scroll-bar-automatically-appears-when-clicking-select2 */
	overflow-x: hidden; /* Fix Select2 bug where horizontal scrollbar appears*/
	/*background-repeat: no-repeat;
	background-size: 100% 100vh;*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.jumbotron{
    background-color:#2E2D88;
    color:white;
}
/* Adds borders for tabs */
.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.navbar-brand {
  margin-top: 5px;
  padding: 0 5px;
}



.outline-text{
	color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

.trashbutton {
	background-color: #ff0000;
}

.grey-disable:disabled,
.grey-disable[disabled]{
  background-color: #cccccc !important;
  color: #666666;
  opacity: 1;
}

.error {color: #FF0000;}

/* Full-width inputs */
input[type=text], input[type=password], input[type=number] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
	background-color: #f1f1f1;
}

/* Set a style for all buttons */
button {
    background-color: #3467B2;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
	border-radius: 4px;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}

/* Brand colour override for Bootstrap btn-primary */
.btn-primary,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #3467B2;
    border-color: #2a54a0;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus {
    background-color: #2a54a0;
    border-color: #1d3d7a;
}

/* Brand colour for Bootstrap label-primary */
.label-primary {
    background-color: #3467B2;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #2a54a0;
}

/* Collapsible panel chevron — points right when closed, rotates to down when open */
.cg-collapse-icon {
    display: inline-block;
    transition: transform 0.2s ease;
}
a[aria-expanded="true"] .cg-collapse-icon {
    transform: rotate(90deg);
}

/* Make all labels clearly pill-shaped badges (not button-like) */
.label {
    border-radius: 50em;
    font-size: 0.75em;
    font-weight: 600;
    padding: .2em .65em;
    line-height: 1;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* Navbar inverse dropdown — match dark nav theme */
.navbar-inverse .dropdown-menu {
    background-color: #222;
    border-color: #080808;
}
.navbar-inverse .dropdown-menu > li > a {
    color: #9d9d9d;
}
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
}
.navbar-inverse .dropdown-menu .divider {
    background-color: #444;
}

/* Section heading within grey containers (account page, future pages) */
.cg-section-heading {
    margin-top: 0;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

/* Add padding to containers */
.container {
    padding: 16px;
}

footer {
  margin-top:18px;
  text-align: center;
  padding: 5px;
  background-color: #000000b0;
  color: white;
}

.footer-container .col-md-3 ul {
    display: block; /* Stack the items vertically */
    padding: 0; /* Remove padding around the list */
    list-style: none; /* Remove default list styling */
    margin: 0; /* Remove default margin */
    text-align: center; /* Center-align the text */
}

.footer-container .col-md-3 ul li {
    margin-bottom: 10px; /* Add space between links */
}

.footer-container .col-md-3 ul li:last-child {
    margin-bottom: 0; /* Remove margin from the last link */
}

.footer-container .col-md-3 ul li a {
    color: white; /* Standard white text */
    font-size: 12px; /* Adjust font size */
    text-decoration: none; /* Remove underline */
}

.footer-container .col-md-3 ul li a:hover {
    color: #ccc; /* Optional hover effect for better UX */
}

.before-footer {
  flex: 1;
}

.login-or {
	position: absolute;
    padding: 0px 0.5rem;
    background: #f1f1f1;
    font-weight: bold;
    margin-top: -1rem;
    left: 50%;
    transform: translateX(-50%);
}

.iframe-container{
  position: relative;
  text-align: center;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}