/*==============================================
    GENERAL  STYLES    
    =============================================*/
body
{
	font-family: 'Open Sans' , sans-serif;
	line-height: 30px;
}

#wrapper
{
	width: 100%;
	margin-top: 50px;
}

#page-wrapper
{
	padding: 15px 15px;
	min-height: 600px;
	background: #F3F3F3;
}
#page-inner
{
	width: 100%;
	margin: 10px 20px 10px 0px;
	background-color: #fff !important;
	padding: 10px;
	min-height: 1050px;
}
.pad-top
{
	padding-top: 15px;
}
.navbar-fixed-top
{
	position: absolute;
}

.div-square input
{
	height: 100px;
}
.div-square h4
{
	font-size: 24px;
}
/*==============================================
    TOP  TITLE STYLES    
    =============================================*/

.top-title h2
{
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-family: auto;
}


.navbar-side
{
	border: none;
	background-color: #fff;
}
.navbar-inverse
{
	background-color: #0389d0;
	border-color: #F0F0F0;
	min-height: 80px; /*background-color: #0093E9; background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
	background-color: #4158D0;
	background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

img.logo
{
	height: 72px;
	padding-bottom: 21px;
}

h1.welcm
{
	font-size: 50px;
	padding-top: 11px;
	background: -webkit-linear-gradient(#7555ca, #d266b2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/*==============================================
    DASHBOARD STYLES    
    =============================================*/

.alert label
{
	padding-left: 10px;
}
.div-square
{
	padding: 5px;
	border: 3px double #e1e1e1;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin: 5px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
	margin-bottom: 15px;
}

.div-square > a, .div-square > a:hover
{
	color: #808080;
	text-decoration: none;
}
/*
.card
{
	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
*/
.div-square:hover
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
/*==============================================
    FOOTER STYLES     
    =============================================*/
.footer
{
	background-color: #214761;
	width: 100%;
	color: #fff;
	padding: 20px 50px 20px 50px;
	padding-left: 20px;
}


.footer > a, .footer > a:hover
{
	color: #fff;
}
.alert img
{
	width: 80px;
}
.alert.alert-info.cont
{
	display: inline-flex;
	width: 100%;
}

.details h3
{
	font-size: 20px;
}
.conticon
{
	padding-right: 6px;
}



/*==============================================
    BACK TO TOP   
    =============================================*/

#button
{
	display: inline-block;
	background-color: #FF9800;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 50%;
	position: fixed;
	bottom: 30px;
	right: 3px;
	transition: background-color .3s;
	visibility: hidden;
	z-index: 1000;
}
#button::after
{
	content: "\f077";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-size: 2em;
	line-height: 50px;
	color: #fff;
}
#button:hover
{
	cursor: pointer;
	background-color: #333;
}
#button:active
{
	background-color: #555;
}
#button.show
{
	opacity: 1;
	visibility: visible;
}

/* Styles for the content section */

.content
{
	width: 77%;
	margin: 50px auto;
	font-family: 'Merriweather' , serif;
	font-size: 17px;
	color: #6c767a;
	line-height: 1.9;
}
@media (min-width: 500px)
{
	.content
	{
		width: 43%;
	}
	#button
	{
		margin: 30px;
	}
}
.content h1
{
	margin-bottom: -10px;
	color: #03a9f4;
	line-height: 1.5;
}
.content h3
{
	font-style: italic;
	color: #96a2a7;
}



/* width */
::-webkit-scrollbar
{
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track
{
	box-shadow: inset 0 0 5px grey;
	border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb
{
	background: #FF9800;
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
	background: #b30000;
}

a:hover, a:focus
{
	text-decoration: none;
}
/*==============================================
    MEDIA QUERIES     
    =============================================*/

@media (min-width:768px)
{
	#page-wrapper
	{
		padding: 15px 30px;
		min-height: 1050px;
	}


	.navbar-side
	{
		z-index: 1;
		position: absolute;
		width: 260px;
	}


}
@media screen and (max-width: 767px)
{

	.top-title h2
	{
		font-size: 20px;
	}
	h1.welcm
	{
		font-size: 28px;
	}

	.alert img
	{
		width: 50px;
	}

	.details h3
	{
		font-size: 15px;
		margin-top: 10px;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
	.div-square h4
	{
		font-size: 17px;
	}


}

@media (min-width: 280px) and (max-width: 320px)
{
	.top-title h2
	{
		font-size: 15px;
	}
	h1.welcm
	{
		font-size: 20px;
	}
	.alert label
	{
		font-size: 15px;
	}
	.div-square h4
	{
		font-size: 16px;
	}
	.details h3
	{
		font-size: 9px;
	}

}