/* Lesson #1 - Basic styles, header, buttons */
body{
	font-family: 'Open Sans', sans-serif;
	margin: 0px;
	color: gray;
	text-align: center
}

#mymeddata2{
	margin:  0px 0px 20px 0px;
	font-size:14px;
	text-align: left;
	!font-family: 'Nothing You Could Do', cursive;
	font-family: sans-serif;
}

h1{
	margin:  0px 0px 20px 0px;
	font-size: 14px;

	font-family: sans-serif;
}

img{
	width: 100%;
}

#idreset {
	padding: 5px 12px 5px 12px;
	background: linear-gradient(#a29b9b, grey);
	color: white;
	border: 0px;
	border-radius: 2px;
	font-size: 14px;
	margin-top: 20px;
	background: linear-gradient(#a6d1ec, orange);!#32a1d7
!display: none !important;
}
#idreset:hover{
	background: linear-gradient(#a6d1ec, red);!#32a1d7
}

#idsubmit {
	padding: 5px 12px 5px 12px;
	background: linear-gradient(#a29b9b, grey);
	color: white;
	border: 0px;
	border-radius: 2px;
	font-size: 14px;
	margin-top: 20px;
	background: linear-gradient(#a6d1ec, blue);!#32a1d7
!display: none !important;
}
#idsubmit:hover{
	background: linear-gradient(#a6d1ec, green);!#32a1d7
}

button {
	padding: 5px 12px 5px 12px;
	background: linear-gradient(#a29b9b, grey);
	color: white;
	border: 0px;
	border-radius: 2px;
	font-size: 14px;
	margin-top: 20px;
!display: none !important;
}

button:hover{
	background: linear-gradient(#a6d1ec, green);!#32a1d7
}

button:focus{
	outline: none
}

.hide{
	display: none !important;
}

.auth{
	cursor: pointer;
}

#header{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 40px;
	text-align: right;
	padding: 20px 40px 30px 40px;
}

#logo{
	max-width: 300px;
	float: left
}

#profile-photo-header{
	max-width: 60px;
	border-radius: 100px;
	margin-top: 10px;
	float: right
}

#user-details-header{
	text-align: right
}

#sign-in-link-header{
	padding: 0px 20px 5px 10px;
	transition: 0.5s;
	font-size: 14px;
	color: white;
	background: linear-gradient(#a6d1ec, #32a1d7);
}

#sign-in-link-header:hover{
	padding: 0px 20px 0px 20px;
	border-left: 1px solid #32a1d7
}

/* Lesson #1 Footer */
#footer{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background-color: #f9f4f4;
	padding: 30px 20px 50px 20px;
}

/* Lesson #2 Modal */
#modal{
	display:none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4)
}

#modal-content{
	background-color: #fefefe;
	margin: 4% auto;
	border: 1px solid #888888;
	max-width: 350px;
}

#close{
	float: right;
	margin-right: -15px;
	margin-top: -15px;
	font-weight: bold;
	padding: 0px 7px 5px 7px;
	border-radius: 100px;
}

#close:hover, #close:focus{
	text-decoration: none;
	cursor: pointer;
}


/* Lesson #3 Forms and Toggle */
input{
	width: 100%;
	font-size: 14px;
	padding: 10px 0px 10px 0px;
	border-width: 0px 0px 2px 0px;
}

input::placeholder{
	color: #989898
}

input:focus{
	border-color: green;
	outline: none;
}

#authentication{
	padding: 40px 20px 20px 20px;
}

#sign-in-link, #create-user-link{
	color: #32a1d7
}

#create-user-inputs, #sign-in-inputs{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-bottom: 30px;
}

#forgot-password-inputs{
	margin-bottom: 20px;
}

#forgot-password-link{
	text-align: right;
	font-size: 10px;
	margin-top: -17px;
}

#create-user-display-name{
	grid-column-end: span 2;
}

#have-or-need-account-dialog{
	padding-top: 10px;
}


/* Lesson #7 User Dasboard */
#account {
	background-color: #f9f4f4;
	padding: 30px;
	border-radius: 20px;
	background-color: lightblue;
}

#dashboard{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	padding: 20px 40px 50px 40px;
border-width: medium;
	border-right-color: lightblue;
		font-size: 14px;
		!background-color: #f9f4f4;
		border-color:  lightblue;
}

#profile-photo-account{
	max-width: 150px;
	margin: auto;
	border-radius: 100px;
}

#display-name{
	margin: 30px 20px;
	float: right
}


/* Lesson #9 Handling error and success messages */
#message{
	display: none;
	border: 1px solid;
	position: relative;
	margin: 40px 20px 20px 20px;
	padding: 10px;
}

/* Lesson #10 Loading visual cue */
#loading-outer-container{
	margin: 40px auto;
}

#loading-inner-container{
	position: relative;
	width: 40px;
	height: 40px;
	left: 0;
	right: 0;
	margin: auto;
	top: 20%;
}

#loadspin{
	width: 40px;
	height: 40px;
	position: absolute;
	margin: 0 auto;
}

#circle1{
	background-color: #39B1C6;
}

#circle2{
	background-color: #EC3F8C;
}

#circle1, #circle2{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation:bounce 2s infinite ease-in-out;
	animation:bounce 2s infinite ease-in-out;
}

#circle2{
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

@-webkit-keyframes bounce {
	0%, 100%{
		-webkit-transform: scale(0)
	}
	50%{
		-webkit-transform: scale(1)
	}
}


@webkit-keyframes bounce {
	0%, 100%{
		-webkit-transform: scale(0)
	}
	50%{
		-webkit-transform: scale(1)
	}
}


/* Lesson #11 Email verificaiton */
#email-not-verified-notification{
	background-color: red;
	color: white;
	font-size: 12px;
	padding: 4px;
}


/* Lesson #13 Prepare for OAuth */
#oauth-providers-grid{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 45px;
	padding-bottom: 40px;
}

#or{
	border-top: 2px solid #EFEFEF;
	position: relative;
	margin-bottom: 40px;
}

#or > p {
	position: absolute;
	top: -13px;
	left: 45%;
	width: 10%;
	text-align: center;
	margin: 0px;
	background-color: white;
}

/* Lesson #18 Delete account */
#show-delete-account-dialog-trigger{
	color: red;
	text-align: center;
	margin-top: 30px;
	font-size: 12px;
}

#delete-account-dialog{
	color: red;
	text-align: center;
	border-radius: 5px;
	margin-top: 40px;
	padding: 10px 10px 15px 10px;
	border: 3px solid #EFEFEF;
	background-color: white;
}

#delete-account-dialog > p{
	font-size: 12px;
	margin: 0px;
}

#hide-delete-account-dialog-trigger:hover{
	background-color: linear-gradient(#FF8597, red)
}

/* Lesson #19 Profile Image */
#progress-bar{
	color: white;
	background-color: orange;
	padding: 3px 0px 3px 0px;
	text-align: center;
	font-size: 10px;
	width: 0%;
}

input[type=file]::-webkit-file-upload-button{
	padding: 5px 12px 5px 12px;
	background: linear-gradient(#A29B9B, grey);
	color: white;
	border: 0px;
	border-radius: 2px;
	font-size: 20px;
	margin-top: 20px;
	text-align: center;
	cursor: pointer;
}

input[type=file]::-webkit-file-upload-button:hover{
	 background: linear-gradient(#A6D1EC, #32A1D7);
}

input[type=file]::-webkit-file-upload-button:focus{
	outline:none
}

input[type=file]{
	margin: auto;
	display: inline;
	width: 60px;
}

/* Lesson #20 To do list application */
.delete-button{
	margin-left: 20px;
}