/* tags */
body
{
	--color-green  : #07b57a;
	--color-red    : #ff3860;
	--color-blue   : #2196f3;
	--color-black  : #222;
	--color-yellow : #ffdd57  ;
	font-family: 'Quicksand', sans-serif;
	padding: 0;
	margin: 0;
}
h1,h2,h3,h4,h5,h6
{
	font-weight: 500;
	margin:0px;
	padding:0.5em 1em;
}
hr
{
	border:0.05em solid #ddd;
}
p
{
	margin: .2em 1em;
	font-weight: 400;
}
button{
	outline: none;
	border:none ;
}
/*container class*/
.container
{
	max-width: 100%;
	min-width: 300px;
	padding: 1em 0em;
	margin: 1em auto ;
}

.text-container
{
	display: block;
	padding: 2em 0 ;
	background-color: #f8f8f8;
	width: 100%;
	border-radius: 5px;font-family: 'Quicksand', sans-serif;
	margin: 0 auto ;
	overflow: auto;
	word-wrap: break-word;

}
.text-container *
{
	word-wrap: break-word;
}
.stacked
{
	display: flex;
	flex-direction: column;
}
.stacked-center
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
/*text sizes*/
.text-small
{
	font-size: 0.9em;
}
.text-medium
{
	font-size: 1.4em;
}
.text-large
{
	font-size: 3em;
}
.text-huge{
	font-size: 4em;
	font-weight: 300;
}
/*text weightss*/
.text-light
{
	font-weight: 200;
}
.text-bold
{
	font-weight: 800;
}
/*width classes*/
.w-1
{
	width: 20%;
}
.w-2
{
	width: 50%;
}
.w-3
{
	width:  75% ;
}
.w-max
{
	width: 100%;
}
/* margin classes */
.m-1
{
	margin: 0.5em !important ;
}
.mt-1
{
	margin-top: 0.5em !important ;
}
.ml-1
{
	margin-left: 0.5em !important ;
}
.mr-1
{
	margin-right: 0.5em !important;
}
.mb-1
{
	margin-bottom: 1em !important ;
}
.m-2
{
	margin: 1em !important;
}
.mt-2
{
	margin-top: 1em !important ;
}
.ml-2
{
	margin-left: 1em  !important;
}
.mr-2
{
	margin-right: 1em !important;
}
.mb-2
{
	margin-bottom: 1em !important ;
}
.m-3
{
	margin: 2em !important;
}
.mt-3
{
	margin-top: 2em !important ;
}
.ml-3
{
	margin-left: 2em  !important;
}
.mr-3
{
	margin-right: 2em !important;
}
.mb-3
{
	margin-bottom: 2em !important ;
}
/*padding classes */
.p-1
{
	padding: 0.5em !important ;
}
.pt-1
{
	padding-top: 0.5em !important;
}
.pl-1
{
	padding-left: 0.5em !important;
}
.pr-1
{
	padding-right: 0.5em !important;
}
.pb-1
{
	padding-bottom: 0.5em !important;
}
.p-2
{
	padding: 1em !important;
}
.pt-2
{
	padding-top: 1em !important;
}
.pl-2
{
	padding-left: 1em !important;
}
.pr-2
{
	padding-right: 1em !important;
}
.pb-2
{
	padding-bottom: 1em !important;
}
.p-3
{
	padding: 2em !important ;
}
.pt-3
{
	padding-top: 2em !important ;
}
.pl-3
{
	padding-left: 2em !important;
}
.pr-3
{
	padding-right: 2em !important;
}
.pb-1
{
	padding-bottom: 2em !important;
}
/* centered elemet */
.center-children
{
	display: flex;
	justify-content: center;
	clear:both;
}
.center-text
{
	text-align: center !important;
}
.center
{
	margin: 0 auto;
}
/*navigation menu */

.nav
{
	display:flex;
	background-color: #eee;
	padding: 1.2em;
	color:#666;
	align-items: center;
}
.nav *
{
	display: flex;
	padding-right: 0.5em;
	padding-left: 0.5em;
	color:#666;
}
.nav a
{

	text-decoration: none;
}
.nav a:hover
{
	color:#222;
}
.nav-brand
{
	font-size: 1.2em;
	font-weight: 500;
	text-align: left;
}
.sb
{
	justify-content: space-between;
}
.sa
{
	justify-content: space-around;
}
.nav-center
{
	justify-content: center;
}
.nav-end
{
	justify-content: flex-end ;

}
.nav ul
{
	list-style-type: none;
	margin :0;
}
.nav li
{

}
.fixed-top
{
	position:fixed;
	top:0;
	width: 100%;
	right: 2px !important;
}
.sticky-top
{
	position:sticky;
	top:0;
}
/* light and dark backgrounds*/
.dark
{
	background-color: #2d2d2d !important ;
	color:#fafafa !important;
}
.dark a
{
	color:#ccc ;
}
.dark a:hover
{
	color:#fff !important;
}
.light
{
	background-color:#eee ;
	color:#666;

}
/* buttons */
.btn
{
	padding: 0.5em;
	outline: none;
	border:none;
	font-size: 1em;
	border-radius: 3px;
	cursor: pointer;
	font-weight: 350;
	letter-spacing: 1px;
	margin:5px 0.5em;
	box-shadow: 0px 1px 3px -2px black;
}
.btn:hover
{
	filter: brightness(95%);
}

.btn-1
{
	color:#fff;
	background-color: #009688 ;
}
.btn-2
{
	color:#fff;
	background-color: #07b57a;
}
.btn-3
{
	color:#fff;
	background-color: #00c4cc ;
}
.btn-4
{
	color:#555;
	background-color: #f6f7f8;
	border:1px solid silver;
}
.btn-5
{
	color:#fff;
	background-color: #2a3439;
}
.btn-6
{
	color:#fff;
	background-color: #2196f3;
}
.btn-success
{
	color:#fff;
	background-color: #23d160;
}
.btn-warning
{
	color:#222;
	background-color:#ffdd57;
}
.btn-danger
{
	color:#fff;
	background-color: #ff3860;
}
.btn-small
{
	font-size: 0.9em;
}
.btn-medium
{
	font-size: 1.1em;
}
.btn-large
{
	font-size: 2em;
}
/*Bagdes*/
.b-green
{
	background-color: var(--color-green);
	border-radius: 1000px;
	color:#fff ;
	padding: 1px 10px;
}
.b-red
{
	border-radius: 1000px;
	background-color:#ff3860 !important;
	color:#fff ;
	padding: 1px 10px;
}
.b-blue
{
	border-radius: 1000px;
	background-color:var(--color-blue) !important;
	color:#fff ;
	padding: 1px 10px;
}
.b-white
{
	border-radius:1000px ;
	background-color:#fff !important;
	color:#222 ;
	padding: 1px 10px ;
}
.b-black
{
	border-radius: 1000px;
	background-color:var(--color-black) !important;
	color:#fff ;
	padding:1px 10px;
}
.b-yellow
{
	border-radius:1000px ;
	background-color: var(--color-yellow) !important;
	color:#fff ;
	padding:1px 10px;
}
.b-silver
{
	border-radius:1000px ;
	background-color: #ccc !important;
	color:#555 ;
	padding: 1px 10px;
}
/*form */
.r-form
{
	margin:1em auto ;
	border:1px solid #ddd;
	border-radius: 3px ;
	padding: 2em;
	width: 400px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	box-shadow: 0px 0px 15px -2px #eee;
}
.r-form label
{
	display: block;
	font-weight: 700;
	font-size: 0.9em;
	color:#666;
}
.r-form button
{
	width: 30%;
}
.r-form textarea
{
	height: 100px;
	max-height: 200px;
	max-width: 98%;
}
.input-text
{
	font-size: 1em;
	border:0.05em solid #ddd;
	color:#333;
	border-radius: 3px;
	margin-bottom: 1em ;
	margin-top: 0.3em ;
	width: 96%;
	padding:0.5em ;
}
.input-checkbox
{
	padding: 1em;
}
.input-text:focus
{
	outline: none;
}

.tab
{
	padding: 2em 0px ;
	border-spacing: 0;


}
.tab th
{
	color:#444;
	font-weight: 400;
	border:1px solid #ddd;
	padding: 1em;
	background-color: #eee;
}

.tab td
{
	color:#666;
	padding: 1em ;
	border:0.05em solid #ddd ;
}
/*colors*/
.c-green
{
	color:var(--color-green) !important;
}
.c-red
{
	color:var(--color-red) !important;
}
.c-blue
{
	color:var(--color-blue) !important;
}
.c-white
{
	color:#fff !important;
}
.c-black
{
	color:var(--color-black) !important;
}
.c-yellow
{
 	color:var(--color-yellow) !important;
}

/*background colors*/
.bg-green
{
	background-color:var(--color-green) !important;
}
.bg-red
{
	background-color:var(--color-red) !important;
}
.bg-blue
{
	background-color:var(--color-blue) !important;
}

.bg-white
{
	background-color:#fff !important;
}
.bg-black
{
	background-color:var(--color-black) !important;
}

.bg-yellow
{
	background-color:var(--color-yellow)!important;
}
/*shadows */
.shadow
{
	box-shadow: 0px 0px 4px 1px #ddd;
}
.shadow-1
{
	box-shadow: 0px 0px 10px 3px #ddd;
}
.shadow-2
{
	box-shadow: 0px 0px 27px 6px #ddd;
}
.shadow-3
{
	box-shadow: 0px 0px 40px 10px #ddd;
}
/* borders */
.border
{
	border:1px solid #ddd;
	border-radius: 3px;
}
.border-1
{
	border:3px solid #ddd;
	border-radius: 3px;
}
.border-2
{
	border:6px solid #ddd;
	border-radius: 3px;
}
.border-3
{
	border:10px solid #ddd;
	border-radius: 3px;
}
/*round elements*/
.rounded
{
	border-radius: 5px ;
}
.rounded-1
{
	border-radius: 10px ;
}
.rounded-2
{
	border-radius: 20px ;
}
.rounded-3
{
	border-radius: 100px ;
}
/*cards*/
.r-card{
	margin:1em 0px ;
	display: flex ;
	flex-direction: column;
	justify-content: space-between;
	border:1px solid silver;
	height: 300px ;
	padding: 10px ;
	width: 300px ;
	border:1px solid silver;
	border-radius: 5px ;
	overflow: auto;
	color : #666;
}
.r-card > img {
	border-radius: 5px ;
}
.r-card button,
.r-card input[type="submit"]{
	cursor: pointer ;
}
.btn-group{
	display: flex ;
}
.card-btn{
	padding: 10px;
}
.underlined{
	text-decoration: underline ;
}
/*opacity*/
.opac{
	opacity: 0.75;
}
.opac-1{
	opacity: 0.5;
}
.opac-2{
	opacity: 0.25;
}
/*.foot
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding: 1em 0px ;
}
.foot ul
{
	display: flex;
	flex-direction: column;
	list-style-type: none;
}
*/