/* --------------------------------------*/
/* OVERALL PAGE-RELATED */
/* --------------------------------------*/
/* Alter the overall font base size (bootstrap uses this to calculate $font-base-size) */
html {
  font-size: 14px;
}
/* Background color of every page's main content area */
.MAG-maincontent-background {
	/*background-color: #e9ecef;   off-white */
	/*background-color: #ffffff;   white */
	background-color: #ffffff;
}
/* Setting this removes the horizontal scrollbar caused by the fluid container default margins */
.fluid-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* The color of the various "Info" buttons that appear on the site */
.MAG-info-icon {
	color: #a9a9ff;
}
.MAG-info-icon-alt {
	color: #ffa9a9;
}
/* The Momentum logo font */
@font-face {
    font-family: MAGlogofont;
    src: url(images/fonts/sansation_light.woff);
}

/* --------------------------------------*/
/* SITE HEADER-RELATED */
/* --------------------------------------*/
/* Adjust spacing and padding of the main company logo area */
.MAG-jumbotron {
	padding: .75rem .50rem .25rem;
	min-height: 50px;
	margin: 0px;
}
/* Adjust the color and size of the informational notification area at the top of the site */
.MAG-notification-info {
	padding: .2rem .2rem;
	min-height: 30px;
	margin: 0px;
	background-color: green;
	color: white;
}
/* Adjust the color and size of the system notification area at the top of the site */
.MAG-notification-system {
	padding: .2rem .2rem;
	min-height: 30px;
	margin: 0px;
	background-color: red;
	color: #dddddd;
}
/* Adjust the color and size of the special notification area at the top of the site */
.MAG-notification-special {
	padding: .2rem .2rem;
	min-height: 30px;
	line-height: 30px;
	font-weight: bold;
	margin: 0px;
	background-color: yellow;
	color: #000000;
	font-size: 16px;
}

/* --------------------------------------*/
/* NAVBAR-RELATED */
/* --------------------------------------*/
/* Add borders to the top and/or bottom of the navbar */
 .navbar {
    border-bottom:1px solid #ccc;
	border-top:1px solid #ccc;
 }
/* Add some padding around the main nav buttons */
.MAG-navbutton {
	padding-left: 15px;
	padding-right: 15px;
}
/* Add a dividing line between the buttons (can be either left or right) */
.MAG-navbutton-rightborder { /*border-right: solid 1px #aaaaaa;*/ }
.MAG-navbutton-leftborder { /*border-left: solid 1px #aaaaaa;*/ }
/* Change the color of the "Order an Appraisal" button */
#MAG-navbutton-order {
	font-weight: bold;
	color: #000089;
}
/* Remove the dividing lines between the nav buttons when we shrink down to "mobile size" */
@media (max-width: 768px) {
	.navbar-expand-md .navbar-nav .nav-item {
		border-left: none;
		border-right: none;
	}
}

/* --------------------------------------*/
/* PAGE SIDE MENU ("SUPPORT MENU") RELATED */
/* --------------------------------------*/
/* Color of an option when it's selected, and what to do with the cursor when it's moused-over */
.MAG-supportmenu-selected {
	 background-color: #e9ecef;
	 cursor: default;
}
/* Adjust the margin for the navigation section on the left of the menu in the 'Support' section */
.MAG-supportmenu-nav {
	margin-right: -20px;
}
/* Padding and formatting for the main content section of the 'Support' section */
.MAG-supportmenu-content {
	margin: 4rem 4rem; 
	padding-left: 4rem; 
	border-left: solid 1px #dddddd; 
	background-color: #ffffff;
}
/* Indicate where to "split" support menu content when moving to mobile, and remove border/padding as we shrink */
@media (max-width: 540px) {
	.MAG-supportmenu-content {
		border-left: none;
		padding-left: 0rem;
	}
}

/* --------------------------------------*/
/* SPECIFIC PAGE-RELATED */
/* --------------------------------------*/

/* /////////////////// */
/*      HOME PAGE      */
/* /////////////////// */
/* Background of the home page part of the site */
.MAG-homepage-background {
	background-image: url('../images/cityscape.jpg');
	background-size: cover;
}
/* Set up the slide carousel properties used on the home page */
.carousel-indicators li {
  width: 20px;
  height: 5px;
  margin-right: 3px;
  margin-left: 3px;
  background-color: rgba(255, 255, 255, 0.5);
}
.carousel-indicators .active {
  background-color: #fff;
}
/* Set up the container for the video background on the home page */
.MAG-homepagevideo-container {
	width: 100%;
	padding: 0px;
	background-color: #000000;
	height: 550px;
	overflow-x: hidden;
	overflow-y: hidden;
}
#homepagevideo {
	width: 100%;
	height: auto;
	margin-left: 0px;
}
#homepagevideotext {
    position: absolute;
    top: 20px;
	text-align: center;
    background: rgba(255, 255, 255, 0.4);
    /*color: #f1f1f1;*/
	color: #000000;
    width: 100%;
    padding: 5px;
	font-family: "Calibri", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
@media (max-width: 1000px) {
	#homepagevideo {
		width: auto;
		height: 100%;
		padding-left: -250px;
	}
}
@media (max-width: 750px) {
	#homepagevideo {
		width: auto;
		height: 100%;
		margin-left: -250px;
	}
}

/* /////////////////// */
/*    ABOUT US PAGE    */
/* /////////////////// */
.MAG-aboutusheader-underline {
	color: #aaaaff;  /* colour of underline */
	text-decoration: underline;
}
.MAG-aboutusheader-text {
	color: black; /* original colour of p */
}

/* /////////////////// */
/*   CONTACT US PAGE   */
/* /////////////////// */
/* The color of the arrow infront of the text on the "Contact Us" page */
.MAG-indicator-arrow {
	color: #aaaaaa;
}

/* /////////////////// */
/*  INTEGRATIONS PAGE  */
/* /////////////////// */
/* Make sure the button text wraps in the FAQ buttons */
#integrationlogos img {
	padding: 10px;
}

/* /////////////////// */
/*       FAQ PAGE      */
/* /////////////////// */
/* Make sure the button text wraps in the FAQ buttons */
.MAG-faq-accordion-button {
	white-space: normal;
}

/* /////////////////// */
/*    REBUTTAL PAGE    */
/* /////////////////// */
/* Make sure the button text wraps in the 'Download Rebuttal' button */
.MAG-rebuttal-download-button {
	white-space: normal;
}

/* /////////////////// */
/* APPRAISAL ORDER PAGE */
/* /////////////////// */
/* Label color and size for each major section of the order form */
.MAG-appraisalorder-sectionlabel {
	width: 100%;
	height: 2rem;
	line-height: 2em;
	background-color: #ccffcc;
	text-align: center;
}
/* Label color and size for each subsection of the major section of an order form */
.MAG-appraisalorder-subsectionlabel {
	width: 100%;
	height: 1.5rem;
	line-height: 1.5em;
	background-color: #ddddee;
	text-align: center;
}
/* Class used to color/format the icon next to a required field */
.MAG-reqd {
	height: 1.0rem;
	color: #ff0000;
}
/* Format the "Order Error" div */
.MAG-appraisalorder-ordererror {
	border: solid 1px #dc3545;
	padding: 10px;
	display: table;
}
/* Format the "Payment Reminder" div in the middle of the order form */
.MAG-appraisalorder-paymentreminder {
	border: solid 1px #aaaaaa;
	padding: 5px;
	display: table;
}
/* Format the "Contract Reminder" div at the bottom of the order form */
.MAG-appraisalorder-contractreminder {
	border: solid 1px #aaaaaa;
	padding: 5px;
	display: table;
}

/* --------------------------------------*/
/* FOOTER-RELATED */
/* --------------------------------------*/
/* Overall settings for the entire footer section */
.MAG-footer {
	/*background: #000012;  DARK BLUE*/
	/*background: #DEE2F6;  LIGHT BLUE*/
	/*background: #ffffff;  WHITE*/
	background: #000028;
	/*color: #aaaaaa;*/
	color: #5b5b5b;
}
/* Make footer link colors, clicked or not, the same */
.MAG-footer a:link,
.MAG-footer a:visited
{
	color: #aaaaaa;
}
/* The style/color/etc of the column header text */
.MAG-footercolumnheader {
	font-weight: bold;
}
/* Adjust the padding between the sections of the footer */
.MAG-footer-column {
	padding-top: 3rem;
}
/* The icon color for the social media icons */
.MAG-footer-socialmediaicons {
	color: #aaaaaa;
	font-size: 2rem;
}
/* The icon color for the payment type icons */
.MAG-footer-paymenttypeicons {
	color: #aaaaaa;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --------------------------------------*/
/* ADDITIONAL ADD-ONS AND FUNCTIONS */
/* --------------------------------------*/

/* //////////////////////////////// */
/*    "First Visit" Popup Add-On    */
/* //////////////////////////////// */
/* Settings of the blackout div that darkens the page */
#fvpp-blackout {
  display: none;
  z-index: 499;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}
/* Settings of the message div that pops up */
#website2018welcomemessage {
  display: none;
  z-index: 500;
  position: fixed;
  left: 30%;
  width: 36%;
  top: 20%;
  padding: 20px 2%;
  font-family: Calibri, Arial, sans-serif;
  background: #FFF;
  min-width: 300px;
}
/* Settings of the close button on the message div */
#fvpp-close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}
/* Fonts and margins for the message div's title information */
#fvpp-dialog h2 {
  font-size: 2em;
  margin: 0;
}
/* Paragraph settings of the message div */
#fvpp-dialog p { margin: 0; }

/* //////////////////////////////// */
/*    "Processing Spinner" Add-On   */
/* //////////////////////////////// */
/* Style of the div that contains the processing spinner image and text that display during any type of order submission */
#processing-spinner {
  display: none;
  z-index: 500;
  position: fixed;
  width: 110px;
  top: 20%;
  padding: 20px;
  text-align: center;
  background: #FFF;
  min-width: 100px;
}
/* Settings of the blackout div that darkens the page during any type of order submission */
#processing-spinner-blackout {
  display: inline;
  z-index: 499;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

.invalid-feedback {
	font-weight: bold;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/*                      DEPRECATED, UNUSED                          */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* The color of a "primary button" after it's clicked */
/*
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}*/

/* Background of the contact page part of the site (UNUSED CURRENTLY)*/
.MAG-contactpage-background {
	/*background-image: url('../images/contactus-phone-transparent.jpg');*/
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
}

/* Animated spinning loader for online payment submission */
#MAG-onlinepayment-loader {
    border: 4px solid #cccccc; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
	visibility: hidden;
}
/* Related to spinner above */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

