body {
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}



.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}


.navbar-custom-gradient{
    /* The standard linear gradient */
    background-image: linear-gradient(to bottom, #436E98, #6C94BC);
    /* Vendor prefixes for older browsers */
    background-image: -webkit-linear-gradient(top, #436E98, #6C94BC);
    background-image: -moz-linear-gradient(top, #436E98, #6C94BC);
    background-image: -o-linear-gradient(top, #436E98, #6C94BC);
    background-image: -ms-linear-gradient(top, #436E98, #6C94BC);

    /* Fallback background color, just in case */
    background-color: #436E98 !important;
}


/* Style for the normal state of the button */
.btn-black-borderless {
    background-color: transparent;
    color: black !important;
    font-weight: bold;
    border: 1px solid white;
}

/* Style for the button when the user hovers over it */
.btn-black-borderless:hover {
    border: 1px solid black;
}


/* Style for the link in its normal state */
.link-white-borderless {
    color: white !important;
    font-weight: 500;
    text-decoration: none !important;
}

/* Style for the link when a user hovers over it */
.link-white-borderless:hover {
    text-decoration: none !important;
    color: #B8DCF9 !important;
}


/* Style for the link in its normal state */
.link-footer {
    color: #436E98 !important;
    font-weight: bold;
}

/* Style for the link when a user hovers over it */
.link-footer:hover {
    color: #456077 !important;
    font-weight: bold;
}




/* --- BASE MODAL STYLES --- */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto; 
  padding: 0; /* No padding here, the header/body divs handle it */
  width: 90%; 
  max-width: 400px; 
  border-radius: 10px; 
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  overflow: hidden; /* CRITICAL: Clips the content to the rounded corners */
}

/* --- HEADER BAR STYLES (The Blue Bar) --- */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    
    /* Blue color from the image */
    background-color: #4682B4; 
    padding: 10px 20px; 
}

/* Title in the header bar */
.modal-header h2 {
    color: white; /* Title text is white */
    font-weight: 500; 
    font-size: 1.25em; 
    margin: 0;
}

/* The Close Button ('x') */
.close {
  color: white; /* 'X' button is white */
  font-size: 28px;
  font-weight: normal; 
  line-height: 1; 
  cursor: pointer;
}

.close:hover {
  color: #ddd; 
  text-decoration: none;
}

/* --- BODY CONTENT STYLES (The White Area) --- */
.modal-body {
    padding: 20px; 
}

.modal-body p {
    margin: 0 0 20px 0;
    /* Adjusting the text color to match the subtle gray in the image */
    color: #555; 
}

/* Label for Campaign field */
.modal-body label {
    font-weight: bold; 
    display: block; 
    margin-bottom: 5px;
}

/* Campaign Input Field */
#campaign-select {
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    font-size: 1em; 
    box-sizing: border-box;
}

/* Checkout Button Styling (The Blue Button) */
.checkout-button {
  background-color: #007bff; 
  color: white;
  border: none;
  padding: 12px 20px;
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  font-weight: bold;
}

.checkout-button:hover {
  background-color: #0056b3;
}