/***************************************
			Generic Styling
***************************************/
/*Makes sure that the html and body cover the whole page.*/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: Verdana;
}
/*To ensure the page doesn't display until the javascript has run, the body is set to "display: none" here but is later displayed in our javascript
section at the end of the "HTMLLoaded" section.*/
body {
    display: none;
}
/*The wrapper will hold everything minus the modal, so we need to make sure that its at 100% height too. Display flex is used for the logoButtonsAndIframe
child element next. Flex direction column is up and down.*/
.wrapper{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
/*Flex grow means that this div will grow to fill all empty space between it and the next div, which is the footer. This way the footer will always
stay at the bottom of the screen. This only works because the parent's display is set to flex.*/
.logoButtonsAndIframe{
    flex-grow: 1;
}
/*Styling for the div around our logo.*/
.logo_container {
	text-align: center;
	font-size: 24px;
	color: white;
	background-color: white;
	margin-top: 1%;
	margin-bottom: 2.4%;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Set the table to take up the entire width of the div.*/
#headerAlign {
	width: 100%;
}

/*Sets the table cell with the school logo to only take up the first part of the div.*/
#img-cell {
	width: 20%;
}

/*Shifts the table cell with the school information to the right to make space between it and the logo. Only done on desktops.*/
@media screen and (min-width: 1024px){
	#info-cell {
		padding-left: 3%;
	}
}

/*Moves the back button slightly to the left.*/
#back-btn-cell {
	padding: 1%;
}


/*Keeps our two tables in the center of the screen. This trick is used quite often for horizontal centering.*/
#infoTable {
	margin-left: auto;
	margin-right: auto;
	width: 65%;
	text-align: left;
	display: table-cell;
    vertical-align: middle;
}

/*Simple styling for the cells in our table.*/
#infoTable td {
	/*padding-left: 15px;*/
}

/*When there is only a name a phone number in the table, we want them closer together, so we move the school name
to the bottom of its cell.*/
#SchoolName {
    vertical-align: bottom;
	font-size: 48px;
}

#schoolURL {
	color: black;
}

/*When there is only a name a phone number in the table, we want them closer together, so we move the school phone number
to the top of its cell.*/
#PhoneNumber {
    vertical-align: top;
}

/* ?? Thistable shouldn't show at the start, only when there is an iframe, so we'll not display it at first.*/
#infoTableBack, #infoTableBackMobile {
    display: none;
}

/*Styling for the back button when an iframe is present.*/
#ButtonBack{
    background-color: #17468f;
    color: white;
    cursor: pointer;
    border-radius: 15px;
    outline: none;
	border: none;
	padding: 10px 30px 10px 30px;
	width: 100%;
	margin-right: 5%;
	display: none;
}

/*Styling for button animations*/
#ButtonBack:hover {
	transform: scale(1.05, 1.05);
	transition: 0.3s;
}

/*Styling for button animations*/
#ButtonBack:active {
	transform: scale(1, 1);
}



/*Styling for the logo*/
#Logo {
	max-width: 330px;
	height: auto;
}

/*Styling for the phone number*/
#PhoneLink {
	color: white;
}

/*Styling for the white border around our buttons*/
#button_container {
    background-color: white;
    padding: 3%;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

/*Our two buttons are in columns. They're both taking up a width of 50%. On smaller screens, we change this, and when that happens,
the float attibute allows us to move the right button to the next line. So they'll be stacked instead of side by side.*/
.btn-column {
    width: 50%;
    float: left;
}

/*::after makes sure this is done last, when using float, its good practice to clear after it.*/
.btn-row::after {
    clear: both;
    display: table;
    content: "";
}

/*This shows a little line between the two buttons, but is really just a part of the div for the PayPal button.*/
#bottom {
    border-left: 1px solid grey;
}

/*Styling for our two buttons*/
#buttonPayCC, #buttonPayPP {
    background-color: white;
    border: 5px solid white;
    border-radius: 15px;
    color: white;
    outline: none;
    width: 55%;
    cursor: pointer;
    font-weight: bold;
	margin-top: 5%;
	margin-bottom: 5%;
	
}

/*Changing the color of the background within the button slightly to give feedback back to the user.*/
#buttonPayCC:hover, #buttonPayPP:hover {
    background-color: #D3D3D3;
}

/*Styling for the images in our buttons*/
#PayPalVenmo, #CardAndACH {
    width: 70%;
}

/*Styling for the div that will hold our iframe. The default height for it here is going to be the height of your own screen.*/
.portal_container {
    position: relative;
    height: 100vh;
    display: none;
    margin-bottom: 1%;
	padding: 3%;
	margin-top: 1%;
}

/*Styling for the iframe itself. The iframe is absolute positioned inside the parent div, and takes up the entirety of their parent div.*/
.portal_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Styling for our footer. "flex-shrink" is set to 0 so that it doesn't shrink itself when the "logoButtonsAndIframe" div pushes up against it with its
"flex-grow".*/
footer {
    width: 100%;
    color: white;
    text-align: center;
    flex-shrink: 0;
	background-color: white;
	margin-bottom: 0.3%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding-top: 0.2%;
	font-weight: bold;
}

/*"*" is the universal selector. It macthes any type.*/
* {
    box-sizing: border-box;
}

/***************************************
		    Modal Styling
***************************************/
/*A modal is a form of popup window, it will hold our legal information.*/
/*Styling for the top of our modal*/
.modal-header {
	background-color: white;
}
/*Styling for our title which is in our modal header.*/
.modal-title {
	font-size: 1.5em;
	color: #ffffff;
}
/*Styling for the title of the modal.*/
.modal-h4 {
	color: white;
	font-weight: bold;
}
/*Styling for the close button which is also in our header.*/
.close {
    box-shadow: none;
    text-align: right;
}
/*Styling for the middle section of our modal.*/
.modal-content {
	background-color: #efefef;
}
/*Setting the font size of the body of the modal.*/
.modal-body {
	font-size: 12pt;
}
/*Styling the accept button at the bottom of our modal.*/
#payAccept{
    background-color: white;
    color: #ffffff;
}
/***************************************
            Media Styling
***************************************/
/*These edits are for mobile devices. We determine this based off the screen width. So these style rules are only applied 
if the screen width meets the criteria.*/
/*Edits for devices around the size of an iPad Pro.*/
@media screen and (max-width: 1024px){
    #button_container { 
        width: 100%;
		height: 100%;
    }
    #buttonPayCC, #buttonPayPP{
        width: 85%;
    }
}

/*Styling for devices around the size of an iPad.*/
@media screen and (max-width: 768px){
    .btn-column {
        width: 100%;
    }
    #bottom {
        border-left: none;
    }
    #buttonPayCC, #buttonPayPP {
        margin: 1%;
    }
}

/*styling for devices in landscape mode and have a width of 767 or less*/
/*@media screen and (max-width: 768px) and (orientation: landscape){
	#button_container {
		width: 60%;
	}
}*/

/*Styling for most smart phones.*/
@media screen and (max-width: 600px) {
	#headerAlign {
		margin: auto;
	}
	
	#headerAlign td {
		display: block;
		text-align: center;
	}
	
	#infoTable {
		width: 100%;
		display: initial;
	}
	
	#img-cell {
		width: 100%;
	}
	
	#info-cell {
		width: 100%;
	}
	
	#ButtonBack {
		width: 80%;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	#SchoolName	{
		/*font-size: 6.25vw;*/
		font-size: 6vw;
	}
	
	#PhoneNumber, #PhoneLink {
		font-size: 5vw;
	}
	
	.logo_container {
		margin-top: 2%;
		margin-bottom: 10%;
	}

	.btn-column {
        width: 100%;
    }
    #buttonPayCC, #buttonPayPP {
        width: 100%;
    }
    .portal_container {
        height: 80vh;
    }
    footer {
		margin-top: 5%;
        font-size: .7em;
    }
}
/*Styling for smaller smart phones (iPhone 5 for example).*/
@media screen and (max-width: 320px) {
    .logo_container {
		font-size: 1.3em;
    }
    .portal_container {
        height: 70vh;
    }
    .modal-body {
        font-size: 10pt;
    }
}
/***************************************
		Unsupported Browsers
***************************************/
/*This will be displayed if a user is using IE versions 10 or below*/
/*Styling for the background*/
#unsupportedIE {
	display: none;
}
/*Styling for our div around our text*/
#unsupportedBlock {
	color: #17468f;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,0.19);
	text-align: center;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10%;
}