/*latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Franklin'), local('LibreFranklin-Regular'),
	url('./fonts/LibreFranklin-Regular-Latinext.woff2') format('woff2'),
	url('./fonts/LibreFranklin-Regular.ttf') format('truetype');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Franklin'), local('LibreFranklin-Regular'),
	url('./fonts/LibreFranklin-Regular.woff2') format('woff2'),
	url('./fonts/LibreFranklin-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 400;
	color: #666666;
	margin: 0;
	padding: 0;
}

a {
	color: #5D2F82;
	text-decoration: none;
	display: inline-block;
	transition: all .5s ease;
	cursor: pointer;
}

a:hover {
	color: #D2D63B;
	text-decoration: none;
	transform: scale(1.1);
}

a:visited {
	color: #5D2F82;
	text-decoration: none;
	display: inline-block;
	transition: all .5s ease;
}

h1 {
	color: #5D2F82;
	font-size: 1.4em;
}

h2 {
	color: #D2D63B;
	font-size: 1.2em;
}

form {
	margin: 0px;
	padding: 0px;
}

select {
    width: auto;
    padding: 8px 15px;
    background: #f7f7f7;
    border: 1px solid #eee;
}

textarea {
	width: 100%;
	height: 30%;
	padding: 8px 15px;
	background: #f7f7f7;
	border: 1px solid #eee;
}

.header {
	overflow: hidden;
	display: inline-block;
	background-color: #FAFAFA;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
}

img.logo {
	display: inline-block;
	margin-left: 15%;
	margin-right: 30px;
	max-height: 80px;
	width: auto;
	vertical-align: middle;
}

.wrap {
	max-width: 650px;
	overflow: hidden;
	margin: 100px auto;
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 30px;
	text-align: center;
}

.identification {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

button {
	color: #FFFFFF;
	background-color: #F8882C;
	border: none;
	text-align: center;
	font-size: 0.9em;
	padding: 8px 15px;
	cursor: pointer;
	border-radius: 3px;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-property: box-shadow,transform;
	-webkit-transition-property: box-shadow,transform;
}
	
button:hover {
	box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.button_delete {
	font-size: 0.7em;
	padding: 4px 8px;
}

.input_text {
	width: 50%;
	padding: 12px 30px;
	margin: 8px 0;
	border: none;
	border-bottom: solid 1px #666666;
	box-sizing: border-box;
	text-align: center;
}

.input_text:focus {
	border: none;
	border-bottom: solid 1px #6A408D;
}

#topbar {
	font-size: 1.0em;
	text-align: center;
	width: 100%;
	background-color: #FFFFFF;
	display: inline-block;
}

#topbar_wrap {
	max-width: 650px;
	margin: auto;
	display: flex;
	border-bottom: 1px dotted #ddd;
}
		
#topbar-left {
	width: 65%;
	text-align: left;
	padding: 5px 0px 6px 0px;
	float: left;
	clear: none;
}
		
#topbar-left .topbar-margin {
	margin-left: 5px;
	margin-right: 20px;
}

#topbar-left .fas.fa-home {
	margin-right : 15px;
}

#topbar-left .fas.fa-comment-dots {
	margin-right : 15px;
}
	
#topbar-left .fas.fa-user-circle {
	margin-right : 3px;
}
		
#topbar-right {
	width: 35%;
	text-align: right;
	padding: 5px 0px 3px 0px;
	float: left;
	clear: none;
}

#topbar-right button {
	height: auto;
	width: auto;
	padding: 3px 10px 3px;
}

#loader_div {
	text-align: center;
	margin: 5px auto 15px;
	width: 100%;
	visibility: hidden;
}


#upload_div {
	text-align: left;
	visibility: visible;
	width: 100%;
}

#upload_div img {
	vertical-align: middle;
	width: auto;
	height: 3%;
}



#back2top {
	display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
	z-index: 999;
    border: 3px solid #d2d63b;
    outline: none;
    background-color: #fff;
    color: #d2d63b;
    cursor: pointer;
    border-radius: 50%;
	padding: 10px;
	transition: all 0.25s ease-in-out;
}

#back2top:hover {
	border: 3px solid #5d2f82;
	background-color: #5d2f82;
    color: #fff;
}

label {
	margin-right : 10px;
}

.inner_div{
	margin-top: 15px;
	margin-bottom: 15px;
	width: 100%;
}

.no_border {
	width: 100%;
}

td.ajax-link {
	cursor: pointer;
}

td.ajax-link:hover {
	color: #5d2f82;
	font-weight: bold;
}

tr.ajax-link {
	cursor: pointer;
}

tr.ajax-link:hover {
	color: #fff;
	background-color: #5d2f82;
	font-weight: bold;
}

.counter_selected {
	color: #d2d63b; 
}

.follow {
	cursor: pointer;
	font-size: 0.7em;
	font-style: italic;
	visibility: hidden;
}

@media screen and (max-width: 640px) {
	body {
		font-size: 1.1em;
		line-height: 175%;
	}
	
	table, tbody, th, tr, td {
		display: block!important;
		width: auto!important;
		word-wrap:break-word!important;
	}
	
	table {
		table-layout: fixed!important;
	}

	input {
		vertical-align: middle!important;
	}

	select {
		width: 70%!important;
		vertical-align: middle!important;
	}

	
	img.logo {
		display: block!important;
		max-height: 40px;
	}
	
	span.logo {
		margin-left: 15.5%!important;
		text-align: center!important;
	}
	
	.wrap {
		max-width: 100%!important;
		text-align: center!important;
		margin: 80px auto!important;
	}
	
	.input_text {
		width: 65%!important;
		padding: 10px 15px!important;
	}
	
	.icon_password {
		top: 17px;
	}
	
	#topbar {
		padding: 0 0 10 0!important;
	}
	
	#topbar_wrap {
		padding : 0 15 0 15!important;
	}
	
	#topbar-left {
		width: 50%!important;
	}
	
	#topbar-right {
		width: 50%!important;
	}
	
	#topbar-right button {
		height: auto!important;
		width: auto!important;
		padding: 5px 10px 5px!important;
	}
	
	#name {
		display: none!important;
	}
	
	#topbar-left .fas.fa-home {
		margin-right: 25px!important;
		font-size: 1.5em!important;
	}
		
	#topbar-left .fas.fa-user-circle {
		margin-right: 3px!important;
		font-size: 1.5em!important;
	}
	
}