::-webkit-scrollbar {
    width: .5em;
    height: .5em;
    border-radius: 100vw;
    margin-block: 1em;
}
::-webkit-scrollbar-track {background: rgba(243, 241, 248,1);}
::-webkit-scrollbar-thumb {background: rgb(218, 218, 218); border-radius: 100vw;}
body {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100%;
	max-height: 100%;
    max-width:100%;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 1em;
	-ms-overflow-style: none;
    scrollbar-width: none;
    overflow: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    line-height: 1.5em;
}
body::-webkit-scrollbar {display: none;}
body::-webkit-scrollbar {width: 0; background: transparent;}

.wrapper {
	height: 100dvh;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    background-color: white;
}


@media (min-width: 35em) { .wrapper {width: 300px; }}
@media (max-width: 35em) { .wrapper {margin-left: 2vw; width: 96vw;} }



.user-form {margin-left: 2vw; margin-right: 2vw;}
.form-group label {font-weight: bold; margin-left: 2vw; margin-top: 2vh; margin-bottom: 1vh;}
.form-group {display: flex; flex-direction: column;}
.form-control {height: 2.5em;}
.form-control{
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
    font-size: 1em;
	padding: 8px;
	outline: none;
	border: 1px solid #B0CFE0;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;

}
.form-control:focus{
	box-shadow: 0 0 5px #B0CFE0;
	border:1px solid #B0CFE0;
}

.wrapper h2 {margin-top: 15vh; text-align: center;}
.wrapper p {text-align: center;}

.wrapper ul {margin-top: 3vh; line-height: 2em;}
.break {font-size: 1.5em; margin-top: 5vh; text-align: center;}
.wrapper li a {
    text-decoration: none;
    font-size: 1em;
    color: black;
    position: relative;
    transition: all 250ms ease-out;
}
.btn-primary {margin-top: 3vh;}
.btn-secondary {margin-top: 2vh;}
.btnUser {
	position: relative;
    display:inline-block;
    background: none;
    font-family: 'Poppins', sans-serif;
    font-size:0.8em;
    border:none;
    cursor:pointer;
	text-decoration: none;
	color: black;
	padding-inline: 5px 5px;
    transition: all 300ms ease-out;
}
.btnUser::after {content: ''; position: absolute; width: 100%; transform: scaleX(0) translateY( 2px ); height: 1px; bottom: 0; left: 0; background-color: gray; transform-origin: bottom right; transition: transform 0.25s ease-out;}
.btnUser:hover::after {transform: scaleX(1) translateY( 2px ); transform-origin: bottom left;}


.my-5 {margin-top: 15vh; text-align: center;}
.my-ca {margin-top: 10vh; text-align: center;}
.signup-form {font-family: "Roboto", sans-serif; width:100%; margin:15px auto;}
.form-body {padding:10px 40px;}
.form-g{display:flex; align-items:center; margin-bottom:10px;}
.form-g-select{display:flex;justify-content: space-between; align-items:center; margin-bottom:10px;}
.form-body .label-title {font-size: 1em; width:30%;}
.form-body .form-input {
	font-size: 1em;
	box-sizing: border-box;
	width: 70%;
	height: 34px;
	padding-left: 10px;
	padding-right: 10px;
	color: #333333;
	text-align: left;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	background: white;
	outline: none;
}
.form-body .form-input-select {
	font-size: 1em;
	box-sizing: border-box;
	width: 30%;
	height: 34px;
	padding-left: 10px;
	padding-right: 10px;
	color: #333333;
	text-align: left;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	background: white;
	outline: none;
}
.description {display:flex; flex-direction: column;}
.horizontal-group .left{float:left; width:49%;}
.horizontal-group .right{float:right; width:49%;}
input[type="file"] {outline: none; cursor:pointer; font-size: 17px;}
::-webkit-input-placeholder {color:#d9d9d9;}
.form-footer {clear:both;}
.signup-form .form-footer  {padding:10px 40px; text-align: right;}
 .image-preview {
	width: 70%;
	height: 200px;
	border: 2px solid #dddddd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #cccccc;
	background-color: white;
	border-radius: 4px;
 }
 .image-preview0 {
	width: 5em;
	height: 5em;
	border-radius: 50%;
	border: 2px solid #dddddd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #cccccc;
	background-color: transparent;
 }
 .image-preview__image {display:none; width: 100%; height:200px; object-fit: cover;}
 #fu0, #fu1, #fu2, #fu3, #fu4, #fu5 {
    width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;

}
#lfu1, #lfu2, #lfu3, #lfu4, #lfu5{
    cursor: pointer;
    background-size:contain;
    background-repeat: no-repeat;
    width: 30%;
    height: 60px;
}
#lfu1 {background-image: url(../icons/file1.png);}
#lfu2 {background-image: url(../icons/file2.png);}
#lfu3 {background-image: url(../icons/file3.png);}
#lfu4 {background-image: url(../icons/file4.png);}
#lfu5 {background-image: url(../icons/file5.png);}

#lfu0 {cursor: pointer; background-size:contain; background-repeat: no-repeat; width: 60px; height: 60px; background-image: url(img/add.png);}
.credits {display:flex; align-items: center;}
#imagePreview0 {margin-inline: 1vw 1vw;}

.input_form {border: 0; outline: none; background-color: transparent; font-family: 'Josefin Slab', serif; font-size: 1.5em; font-weight: 600;}
#author {margin: 0; font-weight: bold; font-size: 2em;}
#position {margin: 0; color: grey; font-style: italic; font-size: 1.5em;}

.column {display:flex; flex-direction: column;} 
#header {color: white;}
#title {color: black;font-size: 1em;}