body {
	margin: 0;
	font-family: Roboto;
	font-size: 16px;
	overflow-y: scroll;
}

div, a {
	display: block;
}

input, textarea, button {
	font-family: Roboto;
}

input[type="date"] {
    box-sizing: content-box;
}

form {
	margin: 0;
}

a:-webkit-any-link, a:link {
	text-decoration: none;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.general-button {
	border-radius: 3px;
	padding: 8px;
	display: inline-block;
	cursor: pointer;
	background: #eee;
	text-align: center;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.general-button:hover {
	background: #ccc;
}

.cancelled {
	text-decoration: line-through;
}

.green {
	color: #26ab2c;
}

.arrived {
    background-color: #d4d4d4;
}

#load-modal {
	display: none; 
	position: fixed;
	height: 100%;
	width: 100%;
	opacity: 0;
	top: 0;
	z-index: 100;
}

#load-modal .modal-background {
	width: 100%;
	height: 100%;
	background: #fff;
}

#load-modal .modal-part {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: #fff;
	padding: 20px;
	border-radius: 3px;
}

#success-modal, #fail-modal {
	text-align: center;
	opacity: 0; 
	background: #1ed826;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-radius: 3px;
	font-size: 24px;
	color: #fff;
	padding: 20px 40px;
	display: none;
}

#fail-modal {
	background: red;
}

#export-modal {
	background: #fff;
	height: 100%;
	width: 100%;
	position: fixed;
	display: none;
	z-index: 10;
}

#export-modal .close-button {
	position: absolute;
	right: 8px;
	top: 14px;
	width: 32px;
	height: 32px;
	opacity: 0.3;
	cursor: pointer;
}

#export-modal .close-button:hover {
	opacity: 1;
}

#export-modal .close-button:before, #export-modal .close-button:after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 33px;
	width: 2px;
	background-color: #333;
}

#export-modal .close-button:before {
	transform: rotate(45deg);
}

#export-modal .close-button:after {
	transform: rotate(-45deg);
}

#export-modal .container {
	height: 80%;
	width: 50%;
	border-radius: 3px;
	padding: 14px 8px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border: 3px solid #ccc;
}

#export-modal .inputs-container {
	height: 75%;
	overflow-y: scroll;
}

#export-modal .input-container {
	width: 100%;
}

#export-modal .button-container {
	margin-bottom: 8px;
}

#export-modal .export-button {
	margin-top: 13px;
}

#login-section {
	display: block;
	text-align: center;
	height: 100%;
}

#login-section .login-title {
	font-size: 40px;
	display: block;
	position: relative;
	margin-bottom: 40px;
}

#login-section .login-section-container {
	width: 400px;
	border: 1px solid #eee;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#login-section .login-section-container  .text-part {
	padding: 20px;
	background: #eee;
}

#login-section .login-section-container  .hello-text {
	font-size: 32px;
	display: block;
}

#login-section .login-section-container  .desc-text {
	color: #4595cc;
	display: block;
	margin-top: 24px;
}

#login-section .login-form-container {
	padding: 30px;
}

#login-section #login-form {
	display: block;
	text-align: center;
}

#login-section .input-field {
	display: block;
	width: 100%;
	padding: 12px 8px;
	margin-bottom: 10px;
	border: none;
	border-bottom: 2px solid #e1e1e1;
	outline: none;
}

#login-section .input-field:hover, #login-section .input-field:focus {
	border-bottom: 2px solid #4595cc;
}

#login-section .login-button {
	width: 70%;
	padding: 12px;
	border: none;
	border-radius: 3px;
	margin-top: 20px;
	font-size: 15px;
}

#login-section .login-button:hover {
	background: #999;
	cursor: pointer;
}

#login-section .login-error-label {
	color: #ee0000;
	margin-top: 20px;
	display: none;
}

#manage-section {
	display: block;
	text-align: center;
}

#manage-section .select-screen {
	width: 400px;
	border: 1px solid #eee;
	border-radius: 3px;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
}

#manage-section .select-screen .text-part {
	padding: 20px;
	background: #eee;
}

#manage-section .select-screen .hello-text {
	font-size: 32px;
	display: block;
}

#manage-section .select-screen  .hello-sub-text {
	font-size: 20px;
	display: block;
	color: #666;
	margin-top: 2px;
}

#manage-section .select-screen .desc-text {
	color: #4595cc;
	display: block;
	margin-top: 18px;
}

#manage-section .select-screen .button-part {
	height: 140px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	padding-top: 40px;
	padding-bottom: 40px;
}

#manage-section .select-screen .select-button {
	font-size: 22px;
	color: #343434;
}

#manage-section .select-screen .select-button:hover {
	color: #4595cc;
	cursor: pointer;
}

#manage-section .manage-screen {
	padding-bottom: 30px;
}

#manage-section .manage-screen .nav-bar {
    display: block;
	position: fixed;
	right: 10%;
	transform: translateX(-50%);
	top: 0;
	background: rgba(230, 230, 230, 0.7);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	padding: 20px;
}

#manage-section .manage-screen .nav-bar .action-button {
	border-radius: 3px;
	padding: 8px;
	display: inline-block;
	cursor: pointer;
	background: #fff;
}

#manage-section .manage-screen .nav-bar .action-button:hover {
	background: #ccc;
}

#manage-section .manage-screen .nav-bar .action-button a {
    color: #555;
}

#manage-section .manage-screen .manage-information {
	margin-top: 15px;
	margin-bottom: 30px;
	margin-left: 15%;
	margin-right: 15%;
	text-align: left;
}

#manage-section .manage-screen .manage-information a {
    font-size: 21px;
}

#manage-section .manage-screen .manage-information .user-count {
	vertical-align: top;
	display: inline-block;
	margin-bottom: 10px;
}

#manage-section .manage-screen .manage-information .search-form {
	float: right;
}

#manage-section .manage-screen .manage-information .search-field {
	padding: 12px;
	border: none;
	border-bottom: 2px solid #e1e1e1;
	outline: none;
	font-size: 16px;
	font-family: 'FontAwesome', Roboto;
	cursor: text;
}

#manage-section .manage-screen .manage-information .search-field:hover, #manage-section .manage-screen .manage-information .search-field:focus {
	border-bottom: 2px solid #4595cc;
}

#manage-section .manage-title-button {
	font-size: 35px;
	display: inline-block;
	margin: 40px 20px;
	cursor: pointer;
	color: #888;
}

#manage-section .manage-title-button.active, #manage-section .manage-title-button:hover {
	color: #4595cc;
}

#manage-section .manage-screen .user-container {
	margin: auto;
}

#manage-section .user-row {
	height: 45px;
	/* margin: 0 auto; */
	/* margin-bottom: 10px; */
	/* height: 45px; */
	/* margin-left: 8%; */
	/* margin-right: 8%; */
}

#manage-section .manage-screen .user-container .user-row .row-field {
	padding: 14px 0;
}

#manage-section .manage-screen .user-container .user-row .row-field.center {
	text-align: center;
}

#manage-section .manage-screen .user-container .user-row .padding-field {
	padding: .1em .7em;
}

#manage-section .manage-screen .user-container .user-row .row-field.field-index {
}

#manage-section .manage-screen .user-container .user-row .row-field.field-name {
}

#manage-section .manage-screen .user-container .user-row .row-field.field-email {
}

#manage-section .manage-screen .user-container .user-row .row-field.field-phone {
}

#manage-section .manage-screen .user-container .user-row .row-field.field-birthdate {
}

#manage-section .manage-screen .user-container .user-row .row-field.field-prepayment {
	text-align: center;
}

#manage-section .manage-screen .user-container .user-row .row-field.field-form {
	text-align: center;
}

#manage-section .manage-screen .user-container .user-row .row-field.edit-button-field {
	text-align: center;
}

#manage-section .manage-screen .user-container .user-row .row-field .edit-field-button {
	background: #efefef;
	padding: 7px 12px;
	border-radius: 3px;
	border: 1px solid #aaa;
	width: 80px;
	cursor: pointer;
}

#manage-section .manage-screen .user-container .user-row .row-field .edit-field-button.short {
	width: 50px;
}

#manage-section .manage-screen .user-container .user-row .row-field .prepayment-save-button {
	border: none;
	border-radius: 3px;
	padding: 8px 12px;
	background: #ddd;
}

#manage-section .manage-screen .user-container .user-row .row-field .prepayment-save-button:hover {
	cursor: pointer;
	background: #aaa;
}


#manage-section .manage-screen .user-container .user-row .edit-button {
	color: #eee;
	padding: 8px 12px;
	border-radius: 3px;
	background: #ff5722;
	cursor: pointer;
	display: inline-block;
}

#manage-section .manage-screen .user-container .user-row .edit-button:hover {
	background: #de4717;
}

#edit-section {
	text-align: center;
}

#edit-section .nav-bar {
	position: fixed;
	left: 75%;
	transform: translateX(-50%);
	top: 0;
	background: rgba(230, 230, 230, 0.7);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	padding: 20px;
	min-width: 320px;
}

#edit-section .nav-bar .action-button {
	border-radius: 3px;
	padding: 8px;
	display: inline-block;
	margin-right: 12px;
	color: #fff;
	cursor: pointer;
}

#edit-section .nav-bar .back-button {
	background: #fff;
	color: #111;
}

#edit-section .nav-bar .back-button:hover {
	background: #888;
	color: #fff;
}

#edit-section .nav-bar .cancel-button {
	background: #e6d50d;
}

#edit-section .nav-bar .cancel-button:hover {
	background: #d0c000;
}

#edit-section .nav-bar .delete-button {
	background: #de4717;
}

#edit-section .nav-bar .delete-button:hover {
	background: #d63603;
}

#edit-section .nav-bar .save-button {
	background: #1dd225;
}

#edit-section .nav-bar .save-button:hover {
	background: #26ab2c;
}

#edit-section .nav-bar .pdf-button {
	background: #4267d6;
}

#edit-section .nav-bar .pdf-button:hover {
	background: #2a54d0;
}

#edit-section .nav-bar .pdf-button-click {
    color: #fff;
}

#edit-section .user-name {
	display: block;
	margin: 40px 0;
	font-size: 40px;
}

#edit-section .edit-container {
	margin: 0 auto;
	padding-bottom: 30px;
}

#edit-section .data-group {
    display: inline-block;
}

#edit-section .data-category {
	display: inline-block;
	vertical-align: top;
	text-align: right;
	margin: 0 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0 1em 1.33em 1em;
}

#edit-section .data-group .data-category {
    display: block;
}

#edit-section .data-group .data-category:first-child, #edit-section .data-group .data-category.volunteer {
    margin-bottom: 20px;
}

#edit-section .data-category .category-label {
	text-align: center;
}

#edit-section .data-category .single-data.without-input {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
}

#edit-section .single-data .data-input {
	margin: 8px 14px;
	padding: 12px;
	border-radius: 3px;
	border: 1px solid #ccc;
	min-width: 160px;
}

#edit-section .single-data .email-button {
	padding: 0.8em;
	border-radius: 3px;
	border: 1px solid #d2d2d2;
	background: #e8e8e8;
	width: 100px;
	margin: auto;
	cursor: pointer;
	text-align: center;
	margin-top: 10px;
}

#edit-section .single-data .email-button:hover {
	background: #888;
	color: #fff;
}

#edit-section .single-data .textarea-label {
	display: block;
	text-align: left;
}

#edit-section .single-data .textarea-field {
	vertical-align: middle;
	width: 100%;
    margin: 8px 0;
}

.sleep-text {
    display: block;
}

#edit-section .nav-bar .pdf-button.participant {
	display: inline-block;
}

.tablesaw-sortable-btn {
    cursor: pointer;
}

.tablesaw-sortable-btn.non-clickable {
	cursor: initial;
	padding-right: initial;
}

.tablesaw-stack .table-head {
	padding: .5em .7em;
}

.page-menu-container {
	margin-top: 12px;
}

.page-menu-container .page-button {
	display: inline-block;
	color: #000;
	padding: 10px 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-left: 10px;
	margni-right: 10px;
}

.page-menu-container .page-button.active, .page-menu-container .page-button:hover {
	color: #4595cc;
}

.prepayment-button {
	cursor: pointer;
}

input[type="checkbox"] {
	width: 25px;
	height: 25px;
	cursor: pointer;
}

.wolo-entry-date {
    margin-top: 20px;
    margin-bottom: 40px;
    padding-left: 20px;
    text-align: center;
}