/* this is sass */
html {
width: 100%;
word-break: normal;
}
body {
width: 100%;
margin: 0;
min-height: 100vh;
background-color: #F65E40;
}
.content {
position: relative;
min-height: 500px;
max-width: 1100px;
width: 100%;
margin: 3em auto;
padding: 3vh 3vw;
overflow-x: auto;
background: #FEF4EC;
border: 4px dashed #F65E40;
}
@media (max-width: 30em) {
.content {
border: none;
overflow-x: hidden;
}
}
@font-face {
font-family: "open_sans";
src: url(/assets/opensans-bold-webfont-c7ed20b303213342e5d9ad560df7c7c10d592838406ae06748a9796abe21a2a1.woff2) format("woff2"), url(/assets/opensans-bold-webfont-62030d17140d3dea570805d50d1ccd63ca2cdff7da6331dd6086fb39657b0009.woff) format("woff");
font-weight: 700;
font-style: bold;
font-display: swap;
}
@font-face {
font-family: "open_sans";
src: url(/assets/opensans-regular-webfont-94187a29f3fdac4419e0827ad22ff7cd138535a2c34b1e6102588791ffb1eebf.woff2) format("woff2"), url(/assets/opensans-regular-webfont-01f0b76f60974fa14cdb9843142527df72d7200ec4b3d443bc845beb762e7d8a.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "stardos_stencil";
src: url(/assets/stardosstencil-bold-webfont-9a6cb3f95a2c0c1243fc1cac60ab59c708e8444ff1edd5598a62cfc6371c84d3.woff2) format("woff2"), url(/assets/stardosstencil-bold-webfont-5d65453f50e1e0f5c04f8a5b4fda38e5616104c3270abf13b6b2e24680e0672c.woff) format("woff");
font-weight: 700;
font-style: bold;
font-display: swap;
}
@font-face {
font-family: "M PLUS Rounded 1c";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/m-plus-rounded-1c-v15-latin-regular-b9118a0aca7fd14487db7e2dfb88465a8c7581152672e47b11a7a1a14386a932.woff2) format("woff2"), url(/assets/m-plus-rounded-1c-v15-latin-regular-95c672bc8e70e2f011e5fe0f2a4399770d0025dbe87362831ff73be366b199a0.woff) format("woff");
}
@font-face {
font-family: "M PLUS Rounded 1c";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/assets/m-plus-rounded-1c-v15-latin-800-cca071c2e168bf741e8d4653ec8a6eee485eefdf2aae90ee82b98b8c3ae37dc7.woff2) format("woff2"), url(/assets/m-plus-rounded-1c-v15-latin-800-9e6704df82d212f64d16730e7facc722f9915f01cc48a2fad133b16b3df91be8.woff) format("woff");
}
html {
font-size: 100%;
}
body {
font-weight: 400;
line-height: 1.65;
color: #222;
font-family: "open_sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
}
p {
margin-bottom: 1.15rem;
}
a {
font-family: "M PLUS Rounded 1c", sans-serif;
color: #FA5837;
}
h1, h2, h3, h4, h5 {
letter-spacing: 0.02em;
font-family: "stardos_stencil";
}
h1, h2, h3, h4, h5 {
margin: 2.75rem 0 1.05rem;
font-weight: bold;
line-height: 1.15;
}
h1, .h1 {
font-size: 2.488em;
}
h2, .h2 {
font-size: 2.074em;
}
h3, .h3 {
font-size: 1.728em;
}
h4, .h4 {
font-size: 1.44em;
}
h5, .h5 {
font-size: 1.1em;
}
small, .text_small {
font-size: 0.8em;
}
.btn {
font-family: "M PLUS Rounded 1c", sans-serif;
line-height: 1;
font-size: 0.9em;
letter-spacing: 0.04em;
}
.roundedfont {
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: smaller;
}
.open-sans {
font-family: "open_sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
}
@media (max-width: 30em) {
html {
font-size: 18px;
}
}
@media (pointer: fine) {
.hovertext {
color: #e0e0e0;
}
.hovertext:hover {
color: #222;
}
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
[disabled] {
pointer-events: none;
opacity: 0.3;
}
.horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.inline-block {
display: inline-block;
}
.vertical {
display: flex;
flex-direction: column;
}
.center {
justify-content: center;
align-items: center;
}
.flex {
flex: 1;
}
.m-0 {
margin: 0;
}
html {
--spacing-xs: 8px;
--spacing: 24px;
--spacing-s: 12px;
--spacing-m: 36px;
}
table {
border-collapse: collapse;
width: 100%;
margin: 0;
padding: 0;
}
table th {
text-transform: uppercase;
text-align: left;
background-color: #ecb390;
color: #F7F7F7;
font-size: 1.1em;
}
table td {
padding: 5px 40px 5px 0;
}
table tr:nth-child(even) {
background-color: #E1E1E1;
}
table tr:hover {
background-color: #ecb390;
transition: all 300ms ease-in-out;
}
.table-btn {
border: none;
border-radius: 5px;
background: #ecb390;
color: #F7F7F7;
transition: all 500ms ease-in-out;
}
.table-btn:hover {
background-color: #921111;
cursor: pointer;
}
.inProgress {
color: #C89C2D;
font-weight: 600;
}
.completed {
color: #ecb390;
font-weight: 600;
}
.notStarted {
font-weight: 600;
}
.btn {
min-width: 20px;
min-height: 45px;
display: inline-block;
padding: 10px 20px;
text-transform: uppercase;
color: #ffffff;
background-color: #F65E40;
border: solid 2px #F65E40;
border-radius: 10px;
transition: ease-in-out 0.3s;
cursor: pointer;
margin: 7px 0;
text-decoration: none;
outline: none !important;
}
.btn[disabled] {
background-color: #7B8291;
color: white;
cursor: not-allowed;
opacity: 0.6;
border: solid 2px #7B8291;
}
.btn:hover {
background-color: transparent;
color: #F65E40;
}
.btn.white {
background-color: #fff;
border: 2px solid transparent;
color: #F65E40;
}
.btn.white:hover {
background-color: #F65E40;
border: 2px solid #fff;
color: #ffffff;
}
.btn.alert {
background-color: #d64933;
border: solid 2px #d64933;
}
.btn.alert:hover {
background-color: transparent;
color: #d64933;
}
.btn.alert.lined {
background-color: transparent;
color: #d64933;
}
.btn.alert.lined:hover {
background-color: #d64933;
color: #ffffff;
}
.btn.success {
background-color: #0c7c59;
border: solid 2px #0c7c59;
}
.btn.success:hover {
background-color: transparent;
color: #0c7c59;
}
.btn.success.lined {
background-color: transparent;
color: #0c7c59;
}
.btn.success.lined:hover {
background-color: #0c7c59;
color: #ffffff;
}
.btn.info {
background-color: #58a4b0;
border: solid 2px #58a4b0;
}
.btn.info:hover {
background-color: transparent;
color: #58a4b0;
}
.btn.info.lined {
background-color: transparent;
color: #58a4b0;
}
.btn.info.lined:hover {
background-color: #58a4b0;
color: #ffffff;
}
.btn.dark {
background-color: #252525;
border: solid 2px #252525;
}
.btn.dark:hover {
background-color: transparent;
color: #252525;
}
.btn.dark.lined {
background-color: transparent;
color: #252525;
}
.btn.dark.lined:hover {
background-color: #252525;
color: #ffffff;
}
.btn.warning {
background-color: #ff7733;
border: solid 2px #ff7733;
}
.btn.warning:hover {
background-color: transparent;
color: #ff7733;
}
.btn.warning.lined {
background-color: transparent;
}
.btn.warning.lined:hover {
background-color: #ff7733;
color: #ffffff;
}
.btn.rounded {
border-radius: 100px;
}
.btn.lg {
padding: 20px 45px;
}
.btn.hg {
padding: 40px 65px;
}
.btn.grows:hover {
transform: scale(1.1);
}
.btn.shrinks:hover {
transform: scale(0.9);
}
.btn.justify {
display: block;
}
.btn.disable-mr {
margin-right: 0;
}
.btn-remove {
min-width: 10px;
min-height: 20px;
display: inline-block;
color: #ffffff;
background-color: #F65E40;
border: solid 2px #F65E40;
border-radius: 2px;
transition: ease-in-out 0.3s;
cursor: pointer;
text-decoration: none;
outline: none !important;
}
.btn-remove.right_upper {
padding: 5px 10px;
position: absolute;
top: -5px;
right: -5px;
z-index: 1;
}
.btn-remove.right_upper:hover {
background-color: transparent;
color: #F65E40;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 10rem;
background-color: #d64933;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
margin-top: -4rem;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
textarea {
resize: vertical;
}
.input-field input[type=text],
.input-field input[type=email],
.input-field input[type=search],
.input-field input[type=number],
.input-field input[type=color],
.input-field input[type=password],
.input-field input[type=date],
.input-field textarea,
input[type=text].input-field,
input[type=email].input-field,
input[type=search].input-field,
input[type=number].input-field,
input[type=color].input-field,
input[type=password].input-field,
input[type=date].input-field,
.dropbtn,
textarea.input-field, select {
padding: 0.3em;
font: inherit;
color: black;
background-color: white;
height: 45px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px solid #ecb390;
/*** STATES ***/
}
.input-field input[type=text].correct,
.input-field input[type=email].correct,
.input-field input[type=search].correct,
.input-field input[type=number].correct,
.input-field input[type=color].correct,
.input-field input[type=password].correct,
.input-field input[type=date].correct,
.input-field textarea.correct,
input[type=text].input-field.correct,
input[type=email].input-field.correct,
input[type=search].input-field.correct,
input[type=number].input-field.correct,
input[type=color].input-field.correct,
input[type=password].input-field.correct,
input[type=date].input-field.correct,
.dropbtn.correct,
textarea.input-field.correct, select.correct {
border: 2px solid #0c7c59;
}
.input-field input[type=text].incorrect,
.input-field input[type=email].incorrect,
.input-field input[type=search].incorrect,
.input-field input[type=number].incorrect,
.input-field input[type=color].incorrect,
.input-field input[type=password].incorrect,
.input-field input[type=date].incorrect,
.input-field textarea.incorrect,
input[type=text].input-field.incorrect,
input[type=email].input-field.incorrect,
input[type=search].input-field.incorrect,
input[type=number].input-field.incorrect,
input[type=color].input-field.incorrect,
input[type=password].input-field.incorrect,
input[type=date].input-field.incorrect,
.dropbtn.incorrect,
textarea.input-field.incorrect, select.incorrect {
border: 2px solid #ff7733;
border-bottom: 5px double #ff7733;
}
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field input[type=search]:focus,
.input-field input[type=number]:focus,
.input-field input[type=color]:focus,
.input-field input[type=password]:focus,
.input-field input[type=date]:focus,
.input-field textarea:focus,
input[type=text].input-field:focus,
input[type=email].input-field:focus,
input[type=search].input-field:focus,
input[type=number].input-field:focus,
input[type=color].input-field:focus,
input[type=password].input-field:focus,
input[type=date].input-field:focus,
.dropbtn:focus,
textarea.input-field:focus, select:focus {
box-shadow: 0px 0px 10px 0px #0c7c59;
border: 2px solid #0c7c59;
}
.input-field input[type=text].incorrect:focus,
.input-field input[type=email].incorrect:focus,
.input-field input[type=search].incorrect:focus,
.input-field input[type=number].incorrect:focus,
.input-field input[type=color].incorrect:focus,
.input-field input[type=password].incorrect:focus,
.input-field input[type=date].incorrect:focus,
.input-field textarea.incorrect:focus,
input[type=text].input-field.incorrect:focus,
input[type=email].input-field.incorrect:focus,
input[type=search].input-field.incorrect:focus,
input[type=number].input-field.incorrect:focus,
input[type=color].input-field.incorrect:focus,
input[type=password].input-field.incorrect:focus,
input[type=date].input-field.incorrect:focus,
.dropbtn.incorrect:focus,
textarea.input-field.incorrect:focus, select.incorrect:focus {
box-shadow: 0px 0px 10px 0px #ff7733;
border: 2px solid #ff7733;
border-bottom: 5px double #ff7733;
}
.input-field input[type=text].correct:focus,
.input-field input[type=email].correct:focus,
.input-field input[type=search].correct:focus,
.input-field input[type=number].correct:focus,
.input-field input[type=color].correct:focus,
.input-field input[type=password].correct:focus,
.input-field input[type=date].correct:focus,
.input-field textarea.correct:focus,
input[type=text].input-field.correct:focus,
input[type=email].input-field.correct:focus,
input[type=search].input-field.correct:focus,
input[type=number].input-field.correct:focus,
input[type=color].input-field.correct:focus,
input[type=password].input-field.correct:focus,
input[type=date].input-field.correct:focus,
.dropbtn.correct:focus,
textarea.input-field.correct:focus, select.correct:focus {
box-shadow: 0px 0px 10px 0px #0c7c59;
border: 2px solid #0c7c59;
}
.input-field input[type=text]:not(:disabled):hover,
.input-field input[type=email]:not(:disabled):hover,
.input-field input[type=search]:not(:disabled):hover,
.input-field input[type=number]:not(:disabled):hover,
.input-field input[type=color]:not(:disabled):hover,
.input-field input[type=password]:not(:disabled):hover,
.input-field input[type=date]:not(:disabled):hover,
.input-field textarea:not(:disabled):hover,
input[type=text].input-field:not(:disabled):hover,
input[type=email].input-field:not(:disabled):hover,
input[type=search].input-field:not(:disabled):hover,
input[type=number].input-field:not(:disabled):hover,
input[type=color].input-field:not(:disabled):hover,
input[type=password].input-field:not(:disabled):hover,
input[type=date].input-field:not(:disabled):hover,
.dropbtn:not(:disabled):hover,
textarea.input-field:not(:disabled):hover, select:not(:disabled):hover {
border: 2px solid #0c7c59;
}
.input-field input[type=text].incorrect:not(:disabled):hover,
.input-field input[type=email].incorrect:not(:disabled):hover,
.input-field input[type=search].incorrect:not(:disabled):hover,
.input-field input[type=number].incorrect:not(:disabled):hover,
.input-field input[type=color].incorrect:not(:disabled):hover,
.input-field input[type=password].incorrect:not(:disabled):hover,
.input-field input[type=date].incorrect:not(:disabled):hover,
.input-field textarea.incorrect:not(:disabled):hover,
input[type=text].input-field.incorrect:not(:disabled):hover,
input[type=email].input-field.incorrect:not(:disabled):hover,
input[type=search].input-field.incorrect:not(:disabled):hover,
input[type=number].input-field.incorrect:not(:disabled):hover,
input[type=color].input-field.incorrect:not(:disabled):hover,
input[type=password].input-field.incorrect:not(:disabled):hover,
input[type=date].input-field.incorrect:not(:disabled):hover,
.dropbtn.incorrect:not(:disabled):hover,
textarea.input-field.incorrect:not(:disabled):hover, select.incorrect:not(:disabled):hover {
border: 2px solid #ff7733;
border-bottom: 5px double #ff7733;
}
.input-field input[type=text]:disabled,
.input-field input[type=email]:disabled,
.input-field input[type=search]:disabled,
.input-field input[type=number]:disabled,
.input-field input[type=color]:disabled,
.input-field input[type=password]:disabled,
.input-field input[type=date]:disabled,
.input-field textarea:disabled,
input[type=text].input-field:disabled,
input[type=email].input-field:disabled,
input[type=search].input-field:disabled,
input[type=number].input-field:disabled,
input[type=color].input-field:disabled,
input[type=password].input-field:disabled,
input[type=date].input-field:disabled,
.dropbtn:disabled,
textarea.input-field:disabled, select:disabled {
opacity: 0.8;
cursor: not-allowed;
}
.input-field input[type=text].correct:disabled, .input-field input[type=text].incorrect:disabled,
.input-field input[type=email].correct:disabled,
.input-field input[type=email].incorrect:disabled,
.input-field input[type=search].correct:disabled,
.input-field input[type=search].incorrect:disabled,
.input-field input[type=number].correct:disabled,
.input-field input[type=number].incorrect:disabled,
.input-field input[type=color].correct:disabled,
.input-field input[type=color].incorrect:disabled,
.input-field input[type=password].correct:disabled,
.input-field input[type=password].incorrect:disabled,
.input-field input[type=date].correct:disabled,
.input-field input[type=date].incorrect:disabled,
.input-field textarea.correct:disabled,
.input-field textarea.incorrect:disabled,
input[type=text].input-field.correct:disabled,
input[type=text].input-field.incorrect:disabled,
input[type=email].input-field.correct:disabled,
input[type=email].input-field.incorrect:disabled,
input[type=search].input-field.correct:disabled,
input[type=search].input-field.incorrect:disabled,
input[type=number].input-field.correct:disabled,
input[type=number].input-field.incorrect:disabled,
input[type=color].input-field.correct:disabled,
input[type=color].input-field.incorrect:disabled,
input[type=password].input-field.correct:disabled,
input[type=password].input-field.incorrect:disabled,
input[type=date].input-field.correct:disabled,
input[type=date].input-field.incorrect:disabled,
.dropbtn.correct:disabled,
.dropbtn.incorrect:disabled,
textarea.input-field.correct:disabled,
textarea.input-field.incorrect:disabled, select.correct:disabled, select.incorrect:disabled {
opacity: 1;
cursor: not-allowed;
}
.description-section {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
}
.description-section p {
margin: 0;
}
.search-bar {
max-height: 60px;
display: flex;
gap: 10px;
}
.search-bar #search-field {
width: 80%;
}
.search-bar .btn {
margin: 0;
width: 200px;
}
.filter-bar {
max-height: 45px;
display: flex;
gap: 15px;
margin-top: 15px;
right: 0;
margin-bottom: 15px;
}
.filter-bar .dropdown-menus {
display: flex;
flex-direction: row;
gap: 10px;
}
.filter-bar .dropdown-menus label[for=stempel] {
min-width: 20ch;
align-self: center;
}
.filter-bar .dropbtn {
flex: 1;
width: auto;
min-width: 100px;
box-sizing: border-box;
}
.dropdown select,
.dropdown .dropbtn,
.dropdown .form-control {
width: 30%;
box-sizing: border-box;
margin-bottom: 15px;
border-radius: 10px;
}
.filter-button {
max-height: 60px;
display: block;
flex-direction: row;
gap: 15px;
margin-bottom: 30px;
}
.filter-button #reset_filter_button {
border-radius: 10px;
background-color: #8B0000;
width: auto;
min-width: 100px;
}
.filter-button .stamp {
display: flex;
align-items: center;
}
footer {
margin-top: 40px;
}
footer nav ul.horizontal {
width: 100%;
list-style-type: none;
justify-content: space-between;
}
.copy_url_area {
display: flex;
flex-direction: row;
flex-warp: wrap;
justify-content: space-between;
gap: 5px;
}
.copy_url_area input {
flex-grow: 1;
flex-basis: auto;
color: gray;
}
details .detail-content {
margin-left: 1rem;
}
details .detail-content .ics_instructions {
width: 100%;
}
details .detail-content h5 {
margin-top: 1rem;
margin-bottom: 0;
}
.events {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-auto-rows: minmax(200px, auto);
grid-gap: 30px;
justify-items: center;
}
.card {
justify-content: space-between;
width: 100%;
height: 100%;
padding-bottom: 1em;
max-width: 30em;
border-radius: 50px;
border-radius: 1.4em;
background: linear-gradient(145deg, #fffffd, #e5dcd4);
box-shadow: 10px 10px 30px #d8cfc9, -10px -10px 30px #ffffff;
word-break: break-word;
}
.card__header {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 150px;
}
.card__header .event__category {
margin-top: 0;
margin-bottom: 0;
}
.card__header .event__category svg.stamp {
width: 148px;
height: 100px;
margin-right: -40px;
}
.card__action {
padding: 0 1em;
}
.card__bachelor {
background: linear-gradient(145deg, #c8c8c8, #b5afa9);
}
.card__heading {
margin: 0;
line-height: 1.4;
}
.card__info {
padding: 0 1em;
opacity: 0.8;
line-height: 1.2;
}
.card__stamp {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
}
.card__btn:hover, .card__btn:focus {
text-decoration: none !important;
}
.event__header {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.event__header .event__name {
width: 75vw;
}
.event__header .event__stamps {
width: min-content;
display: flex;
}
.event__header .event__stamps svg {
width: 140px;
height: 100px;
}
.event__header .event__stamps p {
font-size: 2rem;
}
.card.with_cover .card__image {
width: 100%;
aspect-ratio: 1/1;
margin-bottom: -155px;
}
.card.with_cover .card__image img {
width: 100%;
height: auto;
}
.card.with_cover .card__header a {
background-color: #f8f5f1;
}
.show_event_cover_image .show-geopattern {
width: 100%;
height: 100px;
}
.cover_image_thumbnails {
display: flex;
flex-wrap: wrap;
}
.cover_image_thumbnails img.image_thumbnail {
width: 100px;
height: 100px;
}
.content-block-text-image {
display: flex;
flex-direction: row;
gap: 1em;
}
.content-block-text-image figure {
flex: 1;
margin: 0;
}
.content-block-text-image figure img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.content-block-text-image figure figcaption {
text-align: center;
font-size: 0.8em;
color: gray;
font-style: italic;
}
.content-block-text-image div.lecturer_description {
flex: 3;
margin: 0;
}
@media (max-width: 30em) {
.event__header {
flex-direction: column;
align-items: start;
}
.event__name {
font-size: 2rem;
}
}
#qrcode {
display: block;
width: 256;
height: 256;
}
#stamper-checkbox-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 10px;
}
.full-width {
width: 100%;
height: auto;
}
/* https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
div.blockquote {
background: #f9f9f9;
border-left: 20px solid #ccc;
margin: 1.5em 0px;
padding: 0.5em 10px;
}
div.blockquote:before {
color: #ccc;
content: "”";
font-size: 4em;
line-height: 0.1em;
margin-right: 0em;
vertical-align: -0.4em;
}
.dropbtn {
background-color: #282828;
color: white;
padding: 10px;
font-size: 16px;
min-width: 120px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #FA5837;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 5px;
border-radius: 5px;
}
.dropdown-content p {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.dropdown-content p {
margin: 0;
padding: 6px;
}
/*styles of the personal stamp overview*/
.list_personal_stamps {
margin-top: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 32px;
}
.list_personal_stamps .card_personal {
justify-content: space-between;
width: 300px;
height: auto;
border-radius: 0px;
outline: 3px dashed white;
padding: 10px;
background: #fffffd;
word-break: break-word;
}
.list_personal_stamps .card_personal .card__header {
justify-content: flex-end;
height: auto;
}
.list_personal_stamps .card_personal .card__header .empty_stamp, .list_personal_stamps .card_personal .card__header .rejected_stamp {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
outline: 2px dashed #F65E40;
width: 142px;
height: 110px;
}
.list_personal_stamps .card_personal .card__header .rejected_stamp {
outline: 2px dashed #F65E40;
background-color: rgba(246, 94, 64, 0.7);
}
.list_personal_stamps .card_personal .card__header .date {
flex: 1;
position: absolute;
font-size: 14px;
text-align: center;
color: black;
top: 54px;
left: 40px;
}
.list_personal_stamps .event__category {
position: relative;
}
.list_personal_stamps .date {
flex: 1;
text-align: center;
color: black;
top: 54px;
left: 40px;
}
.list_personal_stamps .card_personal.with_cover .card__image {
width: 100%;
aspect-ratio: 1/1;
margin-bottom: -155px;
}
.list_personal_stamps .card_personal.with_cover .card__image img {
width: 100%;
height: auto;
border: 1px solid #D0D0D0;
}
.list_personal_stamps .card_personal.with_cover .card__header a {
background-color: #f8f5f1;
color: black;
}
@media (max-width: 30em) {
.list_personal_stamps {
flex-direction: column;
align-content: center;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #282828;
}
.content {
background: #BFB8B2;
border: 4px dashed #282828;
}
a {
color: #234DED;
}
#logo {
color: #234DA8;
}
.overlay .a_stamp .event_name > a {
color: black;
font-weight: 500;
}
.overlay .a_stamp .event_name > a:hover {
color: #234DED;
}
.insider {
background-color: #d4dff6;
}
.notice {
background-color: #2c60d2;
}
.alert {
background-color: #1a3a7e;
}
.attendance_grid > span {
border-bottom: 1px solid #234DA8;
}
h1 > small {
color: #234DA8;
}
th {
background-color: #2768F5;
color: #F7F7F7;
}
td {
padding: 5px 40px 5px 0;
}
tr:nth-child(even) {
background-color: #E1E1E1;
}
tr:hover {
background-color: #2768F5;
}
.table-btn {
background: #2768F5;
color: #F7F7F7;
}
.table-btn:hover {
background-color: #DE1B1B;
}
.inProgress {
color: #DEB931;
}
.completed {
color: #2768F5;
}
.btn {
color: #ffffff;
background-color: #234DA8;
border: solid 2px #234DA8;
}
.btn:hover {
color: #234DA8;
}
.btn.white {
background-color: #fff;
color: #234DA8;
}
.btn.white:hover {
background-color: #234DA8;
border: 2px solid #fff;
color: #ffffff;
}
.btn.alert {
background-color: #FF3838;
border: solid 2px #FF3838;
}
.btn.alert:hover {
color: #FF3838;
}
.btn.alert.lined {
color: #FF3838;
}
.btn.alert.lined:hover {
background-color: #FF3838;
color: #ffffff;
}
.btn.success {
background-color: #52B78F;
border: solid 2px #52B78F;
}
.btn.success:hover {
color: #52B78F;
}
.btn.success.lined {
color: #52B78F;
}
.btn.success.lined:hover {
background-color: #52B78F;
color: #ffffff;
}
.btn.info {
background-color: #B8F5DC;
border: solid 2px #B8F5DC;
}
.btn.info:hover {
color: #B8F5DC;
}
.btn.info.lined {
color: #B8F5DC;
}
.btn.info.lined:hover {
background-color: #B8F5DC;
color: #ffffff;
}
.btn.dark {
background-color: #282828;
border: solid 2px #282828;
}
.btn.dark:hover {
color: #282828;
}
.btn.dark.lined {
color: #282828;
}
.btn.dark.lined:hover {
background-color: #282828;
color: #ffffff;
}
.btn.warning {
background-color: #DEB931;
border: solid 2px #DEB931;
}
.btn.warning:hover {
color: #DEB931;
}
.btn.warning.lined:hover {
background-color: #DEB931;
color: #ffffff;
}
.input-field input[type=text],
.input-field input[type=email],
.input-field input[type=search],
.input-field input[type=number],
.input-field input[type=color],
.input-field input[type=password],
.input-field input[type=date],
.input-field textarea,
input[type=text].input-field,
input[type=email].input-field,
input[type=search].input-field,
input[type=number].input-field,
input[type=color].input-field,
input[type=password].input-field,
input[type=date].input-field,
textarea.input-field,
select {
outline: none;
padding: 0.3em;
font: inherit;
color: inherit;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 10px;
border: 2px solid #2768F5;
/*** STATES ***/
}
.input-field input[type=text].correct,
.input-field input[type=email].correct,
.input-field input[type=search].correct,
.input-field input[type=number].correct,
.input-field input[type=color].correct,
.input-field input[type=password].correct,
.input-field input[type=date].correct,
.input-field textarea.correct,
input[type=text].input-field.correct,
input[type=email].input-field.correct,
input[type=search].input-field.correct,
input[type=number].input-field.correct,
input[type=color].input-field.correct,
input[type=password].input-field.correct,
input[type=date].input-field.correct,
textarea.input-field.correct,
select.correct {
border: 2px solid #52B78F;
}
.input-field input[type=text].incorrect,
.input-field input[type=email].incorrect,
.input-field input[type=search].incorrect,
.input-field input[type=number].incorrect,
.input-field input[type=color].incorrect,
.input-field input[type=password].incorrect,
.input-field input[type=date].incorrect,
.input-field textarea.incorrect,
input[type=text].input-field.incorrect,
input[type=email].input-field.incorrect,
input[type=search].input-field.incorrect,
input[type=number].input-field.incorrect,
input[type=color].input-field.incorrect,
input[type=password].input-field.incorrect,
input[type=date].input-field.incorrect,
textarea.input-field.incorrect,
select.incorrect {
border: 2px solid #DEB931;
border-bottom: 5px double #DEB931;
}
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field input[type=search]:focus,
.input-field input[type=number]:focus,
.input-field input[type=color]:focus,
.input-field input[type=password]:focus,
.input-field input[type=date]:focus,
.input-field textarea:focus,
input[type=text].input-field:focus,
input[type=email].input-field:focus,
input[type=search].input-field:focus,
input[type=number].input-field:focus,
input[type=color].input-field:focus,
input[type=password].input-field:focus,
input[type=date].input-field:focus,
textarea.input-field:focus,
select:focus {
box-shadow: 0px 0px 10px 0px #52B78F;
border: 2px solid #52B78F;
}
.input-field input[type=text].incorrect:focus,
.input-field input[type=email].incorrect:focus,
.input-field input[type=search].incorrect:focus,
.input-field input[type=number].incorrect:focus,
.input-field input[type=color].incorrect:focus,
.input-field input[type=password].incorrect:focus,
.input-field input[type=date].incorrect:focus,
.input-field textarea.incorrect:focus,
input[type=text].input-field.incorrect:focus,
input[type=email].input-field.incorrect:focus,
input[type=search].input-field.incorrect:focus,
input[type=number].input-field.incorrect:focus,
input[type=color].input-field.incorrect:focus,
input[type=password].input-field.incorrect:focus,
input[type=date].input-field.incorrect:focus,
textarea.input-field.incorrect:focus,
select.incorrect:focus {
box-shadow: 0px 0px 10px 0px #DEB931;
border: 2px solid #DEB931;
border-bottom: 5px double #DEB931;
}
.input-field input[type=text].correct:focus,
.input-field input[type=email].correct:focus,
.input-field input[type=search].correct:focus,
.input-field input[type=number].correct:focus,
.input-field input[type=color].correct:focus,
.input-field input[type=password].correct:focus,
.input-field input[type=date].correct:focus,
.input-field textarea.correct:focus,
input[type=text].input-field.correct:focus,
input[type=email].input-field.correct:focus,
input[type=search].input-field.correct:focus,
input[type=number].input-field.correct:focus,
input[type=color].input-field.correct:focus,
input[type=password].input-field.correct:focus,
input[type=date].input-field.correct:focus,
textarea.input-field.correct:focus,
select.correct:focus {
box-shadow: 0px 0px 10px 0px #52B78F;
border: 2px solid #52B78F;
}
.input-field input[type=text]:not(:disabled):hover,
.input-field input[type=email]:not(:disabled):hover,
.input-field input[type=search]:not(:disabled):hover,
.input-field input[type=number]:not(:disabled):hover,
.input-field input[type=color]:not(:disabled):hover,
.input-field input[type=password]:not(:disabled):hover,
.input-field input[type=date]:not(:disabled):hover,
.input-field textarea:not(:disabled):hover,
input[type=text].input-field:not(:disabled):hover,
input[type=email].input-field:not(:disabled):hover,
input[type=search].input-field:not(:disabled):hover,
input[type=number].input-field:not(:disabled):hover,
input[type=color].input-field:not(:disabled):hover,
input[type=password].input-field:not(:disabled):hover,
input[type=date].input-field:not(:disabled):hover,
textarea.input-field:not(:disabled):hover,
select:not(:disabled):hover {
border: 2px solid #52B78F;
}
.input-field input[type=text].incorrect:not(:disabled):hover,
.input-field input[type=email].incorrect:not(:disabled):hover,
.input-field input[type=search].incorrect:not(:disabled):hover,
.input-field input[type=number].incorrect:not(:disabled):hover,
.input-field input[type=color].incorrect:not(:disabled):hover,
.input-field input[type=password].incorrect:not(:disabled):hover,
.input-field input[type=date].incorrect:not(:disabled):hover,
.input-field textarea.incorrect:not(:disabled):hover,
input[type=text].input-field.incorrect:not(:disabled):hover,
input[type=email].input-field.incorrect:not(:disabled):hover,
input[type=search].input-field.incorrect:not(:disabled):hover,
input[type=number].input-field.incorrect:not(:disabled):hover,
input[type=color].input-field.incorrect:not(:disabled):hover,
input[type=password].input-field.incorrect:not(:disabled):hover,
input[type=date].input-field.incorrect:not(:disabled):hover,
textarea.input-field.incorrect:not(:disabled):hover,
select.incorrect:not(:disabled):hover {
border: 2px solid #DEB931;
border-bottom: 5px double #DEB931;
}
.input-field input[type=text]:disabled,
.input-field input[type=email]:disabled,
.input-field input[type=search]:disabled,
.input-field input[type=number]:disabled,
.input-field input[type=color]:disabled,
.input-field input[type=password]:disabled,
.input-field input[type=date]:disabled,
.input-field textarea:disabled,
input[type=text].input-field:disabled,
input[type=email].input-field:disabled,
input[type=search].input-field:disabled,
input[type=number].input-field:disabled,
input[type=color].input-field:disabled,
input[type=password].input-field:disabled,
input[type=date].input-field:disabled,
textarea.input-field:disabled,
select:disabled {
opacity: 0.8;
cursor: not-allowed;
}
.input-field input[type=text].correct:disabled, .input-field input[type=text].incorrect:disabled,
.input-field input[type=email].correct:disabled,
.input-field input[type=email].incorrect:disabled,
.input-field input[type=search].correct:disabled,
.input-field input[type=search].incorrect:disabled,
.input-field input[type=number].correct:disabled,
.input-field input[type=number].incorrect:disabled,
.input-field input[type=color].correct:disabled,
.input-field input[type=color].incorrect:disabled,
.input-field input[type=password].correct:disabled,
.input-field input[type=password].incorrect:disabled,
.input-field input[type=date].correct:disabled,
.input-field input[type=date].incorrect:disabled,
.input-field textarea.correct:disabled,
.input-field textarea.incorrect:disabled,
input[type=text].input-field.correct:disabled,
input[type=text].input-field.incorrect:disabled,
input[type=email].input-field.correct:disabled,
input[type=email].input-field.incorrect:disabled,
input[type=search].input-field.correct:disabled,
input[type=search].input-field.incorrect:disabled,
input[type=number].input-field.correct:disabled,
input[type=number].input-field.incorrect:disabled,
input[type=color].input-field.correct:disabled,
input[type=color].input-field.incorrect:disabled,
input[type=password].input-field.correct:disabled,
input[type=password].input-field.incorrect:disabled,
input[type=date].input-field.correct:disabled,
input[type=date].input-field.incorrect:disabled,
textarea.input-field.correct:disabled,
textarea.input-field.incorrect:disabled,
select.correct:disabled,
select.incorrect:disabled {
opacity: 1;
cursor: not-allowed;
}
}
html {
width: 100%;
word-break: normal;
}
body {
width: 100%;
margin: 0;
min-height: 100vh;
background-color: #F65E40;
}
.content {
position: relative;
min-height: 500px;
max-width: 1100px;
width: 100%;
margin: 3em auto;
padding: 3vh 3vw;
overflow-x: auto;
background: #FEF4EC;
border: 4px dashed #F65E40;
}
@media (max-width: 30em) {
.content {
border: none;
overflow-x: hidden;
}
}
html {
font-size: 100%;
}
body {
font-weight: 400;
line-height: 1.65;
color: #222;
font-family: "open_sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
}
p {
margin-bottom: 1.15rem;
}
a {
font-family: "M PLUS Rounded 1c", sans-serif;
color: #FA5837;
}
h1, h2, h3, h4, h5 {
letter-spacing: 0.02em;
font-family: "stardos_stencil";
}
h1, h2, h3, h4, h5 {
margin: 2.75rem 0 1.05rem;
font-weight: bold;
line-height: 1.15;
}
h1, .h1 {
font-size: 2.488em;
}
h2, .h2 {
font-size: 2.074em;
}
h3, .h3 {
font-size: 1.728em;
}
h4, .h4 {
font-size: 1.44em;
}
h5, .h5 {
font-size: 1.1em;
}
small, .text_small {
font-size: 0.8em;
}
.btn {
font-family: "M PLUS Rounded 1c", sans-serif;
line-height: 1;
font-size: 0.9em;
letter-spacing: 0.04em;
}
.roundedfont {
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: smaller;
}
.open-sans {
font-family: "open_sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
}
@media (max-width: 30em) {
html {
font-size: 18px;
}
}
@media (pointer: fine) {
.hovertext {
color: #e0e0e0;
}
.hovertext:hover {
color: #222;
}
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
[disabled] {
pointer-events: none;
opacity: 0.3;
}
.horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.inline-block {
display: inline-block;
}
.vertical {
display: flex;
flex-direction: column;
}
.center {
justify-content: center;
align-items: center;
}
.flex {
flex: 1;
}
.m-0 {
margin: 0;
}
html {
--spacing-xs: 8px;
--spacing: 24px;
--spacing-s: 12px;
--spacing-m: 36px;
}
table {
border-collapse: collapse;
width: 100%;
margin: 0;
padding: 0;
}
table th {
text-transform: uppercase;
text-align: left;
background-color: #ecb390;
color: #F7F7F7;
font-size: 1.1em;
}
table td {
padding: 5px 40px 5px 0;
}
table tr:nth-child(even) {
background-color: #E1E1E1;
}
table tr:hover {
background-color: #ecb390;
transition: all 300ms ease-in-out;
}
.table-btn {
border: none;
border-radius: 5px;
background: #ecb390;
color: #F7F7F7;
transition: all 500ms ease-in-out;
}
.table-btn:hover {
background-color: #921111;
cursor: pointer;
}
.inProgress {
color: #C89C2D;
font-weight: 600;
}
.completed {
color: #ecb390;
font-weight: 600;
}
.notStarted {
font-weight: 600;
}
.btn {
min-width: 20px;
min-height: 45px;
display: inline-block;
padding: 10px 20px;
text-transform: uppercase;
color: #ffffff;
background-color: #F65E40;
border: solid 2px #F65E40;
border-radius: 10px;
transition: ease-in-out 0.3s;
cursor: pointer;
margin: 7px 0;
text-decoration: none;
outline: none !important;
}
.btn[disabled] {
background-color: #7B8291;
color: white;
cursor: not-allowed;
opacity: 0.6;
border: solid 2px #7B8291;
}
.btn:hover {
background-color: transparent;
color: #F65E40;
}
.btn.white {
background-color: #fff;
border: 2px solid transparent;
color: #F65E40;
}
.btn.white:hover {
background-color: #F65E40;
border: 2px solid #fff;
color: #ffffff;
}
.btn.alert {
background-color: #d64933;
border: solid 2px #d64933;
}
.btn.alert:hover {
background-color: transparent;
color: #d64933;
}
.btn.alert.lined {
background-color: transparent;
color: #d64933;
}
.btn.alert.lined:hover {
background-color: #d64933;
color: #ffffff;
}
.btn.success {
background-color: #0c7c59;
border: solid 2px #0c7c59;
}
.btn.success:hover {
background-color: transparent;
color: #0c7c59;
}
.btn.success.lined {
background-color: transparent;
color: #0c7c59;
}
.btn.success.lined:hover {
background-color: #0c7c59;
color: #ffffff;
}
.btn.info {
background-color: #58a4b0;
border: solid 2px #58a4b0;
}
.btn.info:hover {
background-color: transparent;
color: #58a4b0;
}
.btn.info.lined {
background-color: transparent;
color: #58a4b0;
}
.btn.info.lined:hover {
background-color: #58a4b0;
color: #ffffff;
}
.btn.dark {
background-color: #252525;
border: solid 2px #252525;
}
.btn.dark:hover {
background-color: transparent;
color: #252525;
}
.btn.dark.lined {
background-color: transparent;
color: #252525;
}
.btn.dark.lined:hover {
background-color: #252525;
color: #ffffff;
}
.btn.warning {
background-color: #ff7733;
border: solid 2px #ff7733;
}
.btn.warning:hover {
background-color: transparent;
color: #ff7733;
}
.btn.warning.lined {
background-color: transparent;
}
.btn.warning.lined:hover {
background-color: #ff7733;
color: #ffffff;
}
.btn.rounded {
border-radius: 100px;
}
.btn.lg {
padding: 20px 45px;
}
.btn.hg {
padding: 40px 65px;
}
.btn.grows:hover {
transform: scale(1.1);
}
.btn.shrinks:hover {
transform: scale(0.9);
}
.btn.justify {
display: block;
}
.btn.disable-mr {
margin-right: 0;
}
.btn-remove {
min-width: 10px;
min-height: 20px;
display: inline-block;
color: #ffffff;
background-color: #F65E40;
border: solid 2px #F65E40;
border-radius: 2px;
transition: ease-in-out 0.3s;
cursor: pointer;
text-decoration: none;
outline: none !important;
}
.btn-remove.right_upper {
padding: 5px 10px;
position: absolute;
top: -5px;
right: -5px;
z-index: 1;
}
.btn-remove.right_upper:hover {
background-color: transparent;
color: #F65E40;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 10rem;
background-color: #d64933;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
margin-top: -4rem;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
textarea {
resize: vertical;
}
.input-field input[type=text],
.input-field input[type=email],
.input-field input[type=search],
.input-field input[type=number],
.input-field input[type=color],
.input-field input[type=password],
.input-field input[type=date],
.input-field textarea,
input[type=text].input-field,
input[type=email].input-field,
input[type=search].input-field,
input[type=number].input-field,
input[type=color].input-field,
input[type=password].input-field,
input[type=date].input-field,
.dropbtn,
textarea.input-field, select {
padding: 0.3em;
font: inherit;
color: black;
background-color: white;
height: 45px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px solid #ecb390;
/*** STATES ***/
}
.input-field input[type=text].correct,
.input-field input[type=email].correct,
.input-field input[type=search].correct,
.input-field input[type=number].correct,
.input-field input[type=color].correct,
.input-field input[type=password].correct,
.input-field input[type=date].correct,
.input-field textarea.correct,
input[type=text].input-field.correct,
input[type=email].input-field.correct,
input[type=search].input-field.correct,
input[type=number].input-field.correct,
input[type=color].input-field.correct,
input[type=password].input-field.correct,
input[type=date].input-field.correct,
.dropbtn.correct,
textarea.input-field.correct, select.correct {
border: 2px solid #0c7c59;
}
.input-field input[type=text].incorrect,
.input-field input[type=email].incorrect,
.input-field input[type=search].incorrect,
.input-field input[type=number].incorrect,
.input-field input[type=color].incorrect,
.input-field input[type=password].incorrect,
.input-field input[type=date].incorrect,
.input-field textarea.incorrect,
input[type=text].input-field.incorrect,
input[type=email].input-field.incorrect,
input[type=search].input-field.incorrect,
input[type=number].input-field.incorrect,
input[type=color].input-field.incorrect,
input[type=password].input-field.incorrect,
input[type=date].input-field.incorrect,
.dropbtn.incorrect,
textarea.input-field.incorrect, select.incorrect {
border: 2px solid #ff7733;
border-bottom: 5px double #ff7733;
}
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field input[type=search]:focus,
.input-field input[type=number]:focus,
.input-field input[type=color]:focus,
.input-field input[type=password]:focus,
.input-field input[type=date]:focus,
.input-field textarea:focus,
input[type=text].input-field:focus,
input[type=email].input-field:focus,
input[type=search].input-field:focus,
input[type=number].input-field:focus,
input[type=color].input-field:focus,
input[type=password].input-field:focus,
input[type=date].input-field:focus,
.dropbtn:focus,
textarea.input-field:focus, select:focus {
box-shadow: 0px 0px 10px 0px #0c7c59;
border: 2px solid #0c7c59;
}
.input-field input[type=text].incorrect:focus,
.input-field input[type=email].incorrect:focus,
.input-field input[type=search].incorrect:focus,
.input-field input[type=number].incorrect:focus,
.input-field input[type=color].incorrect:focus,
.input-field input[type=password].incorrect:focus,
.input-field input[type=date].incorrect:focus,
.input-field textarea.incorrect:focus,
input[type=text].input-field.incorrect:focus,
input[type=email].input-field.incorrect:focus,
input[type=search].input-field.incorrect:focus,
input[type=number].input-field.incorrect:focus,
input[type=color].input-field.incorrect:focus,
input[type=password].input-field.incorrect:focus,
input[type=date].input-field.incorrect:focus,
.dropbtn.incorrect:focus,
textarea.input-field.incorrect:focus, select.incorrect:focus {
box-shadow: 0px 0px 10px 0px #ff7733;
border: 2px solid #ff7733;
border-bottom: 5px double #ff7733;
}
.input-field input[type=text].correct:focus,
.input-field input[type=email].correct:focus,
.input-field input[type=search].correct:focus,
.input-field input[type=number].correct:focus,
.input-field input[type=color].correct:focus,
.input-field input[type=password].correct:focus,
.input-field input[type=date].correct:focus,
.input-field textarea.correct:focus,
input[type=text].input-field.correct:focus,
input[type=email].input-field.correct:focus,
input[type=search].input-field.correct:focus,
input[type=number].input-field.correct:focus,
input[type=color].input-field.correct:focus,
input[type=password].input-field.correct:focus,
input[type=date].input-field.correct:focus,
.dropbtn.correct:focus,
textarea.input-field.correct:focus, select.correct:focus {
box-shadow: 0px 0px 10px 0px #0c7c59;
border: 2px solid #0c7c59;
}
.input-field input[type=text]:not(:disabled):hover,
.input-field input[type=email]:not(:disabled):hover,
.input-field input[type=search]:not(:disabled):hover,
.input-field input[type=number]:not(:disabled):hover,
.input-field input[type=color]:not(:disabled):hover,
.input-field input[type=password]:not(:disabled):hover,
.input-field input[type=date]:not(:disabled):hover,
.input-field textarea:not(:disabled):hover,
input[type=text].input-field:not(:disabled):hover,
input[type=email].input-field:not(:disabled):hover,
input[type=search].input-field:not(:disabled):hover,
input[type=number].input-field:not(:disabled):hover,
input[type=color].input-field:not(:disabled):hover,
input[type=password].input-field:not(:disabled):hover,
input[type=date].input-field:not(:disabled):hover,
.dropbtn:not(:disabled):hover,
textarea.input-field:not(:disabled):hover, select:not(:disabled):hover {
border: 2px solid #0c7c59;
}
.input-field input[type=text].incorrect:not(:disabled):hover,
.input-field input[type=email].incorrect:not(:disabled):hover,
.input-field input[type=search].incorrect:not(:disabled):hover,
.input-field input[type=number].incorrect:not(:disabled):hover,
.input-field input[type=color].incorrect:not(:disabled):hover,
.input-field input[type=password].incorrect:not(:disabled):hover,
.input-field input[type=date].incorrect:not(:disabled):hover,
.input-field textarea.incorrect:not(:disabled):hover,
input[type=text].input-field.incorrect:not(:disabled):hover,
input[type=email].input-field.incorrect:not(:disabled):hover,
input[type=search].input-field.incorrect:not(:disabled):hover,
input[type=number].input-field.incorrect:not(:disabled):hover,
input[type=color].input-field.incorrect:not(:disabled):hover,
input[type=password].input-field.incorrect:not(:disabled):hover,
input[type=date].input-field.incorrect:not(:disabled):hover,
.dropbtn.incorrect:not(:disabled):hover,
textarea.input-field.incorrect:not(:disabled):hover, select.incorrect:not(:disabled):hover {
border: 2px solid #ff7733;
border-bottom: 5px double #ff7733;
}
.input-field input[type=text]:disabled,
.input-field input[type=email]:disabled,
.input-field input[type=search]:disabled,
.input-field input[type=number]:disabled,
.input-field input[type=color]:disabled,
.input-field input[type=password]:disabled,
.input-field input[type=date]:disabled,
.input-field textarea:disabled,
input[type=text].input-field:disabled,
input[type=email].input-field:disabled,
input[type=search].input-field:disabled,
input[type=number].input-field:disabled,
input[type=color].input-field:disabled,
input[type=password].input-field:disabled,
input[type=date].input-field:disabled,
.dropbtn:disabled,
textarea.input-field:disabled, select:disabled {
opacity: 0.8;
cursor: not-allowed;
}
.input-field input[type=text].correct:disabled, .input-field input[type=text].incorrect:disabled,
.input-field input[type=email].correct:disabled,
.input-field input[type=email].incorrect:disabled,
.input-field input[type=search].correct:disabled,
.input-field input[type=search].incorrect:disabled,
.input-field input[type=number].correct:disabled,
.input-field input[type=number].incorrect:disabled,
.input-field input[type=color].correct:disabled,
.input-field input[type=color].incorrect:disabled,
.input-field input[type=password].correct:disabled,
.input-field input[type=password].incorrect:disabled,
.input-field input[type=date].correct:disabled,
.input-field input[type=date].incorrect:disabled,
.input-field textarea.correct:disabled,
.input-field textarea.incorrect:disabled,
input[type=text].input-field.correct:disabled,
input[type=text].input-field.incorrect:disabled,
input[type=email].input-field.correct:disabled,
input[type=email].input-field.incorrect:disabled,
input[type=search].input-field.correct:disabled,
input[type=search].input-field.incorrect:disabled,
input[type=number].input-field.correct:disabled,
input[type=number].input-field.incorrect:disabled,
input[type=color].input-field.correct:disabled,
input[type=color].input-field.incorrect:disabled,
input[type=password].input-field.correct:disabled,
input[type=password].input-field.incorrect:disabled,
input[type=date].input-field.correct:disabled,
input[type=date].input-field.incorrect:disabled,
.dropbtn.correct:disabled,
.dropbtn.incorrect:disabled,
textarea.input-field.correct:disabled,
textarea.input-field.incorrect:disabled, select.correct:disabled, select.incorrect:disabled {
opacity: 1;
cursor: not-allowed;
}
.description-section {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
}
.description-section p {
margin: 0;
}
.search-bar {
max-height: 60px;
display: flex;
gap: 10px;
}
.search-bar #search-field {
width: 80%;
}
.search-bar .btn {
margin: 0;
width: 200px;
}
.filter-bar {
max-height: 45px;
display: flex;
gap: 15px;
margin-top: 15px;
right: 0;
margin-bottom: 15px;
}
.filter-bar .dropdown-menus {
display: flex;
flex-direction: row;
gap: 10px;
}
.filter-bar .dropdown-menus label[for=stempel] {
min-width: 20ch;
align-self: center;
}
.filter-bar .dropbtn {
flex: 1;
width: auto;
min-width: 100px;
box-sizing: border-box;
}
.dropdown select,
.dropdown .dropbtn,
.dropdown .form-control {
width: 30%;
box-sizing: border-box;
margin-bottom: 15px;
border-radius: 10px;
}
.filter-button {
max-height: 60px;
display: block;
flex-direction: row;
gap: 15px;
margin-bottom: 30px;
}
.filter-button #reset_filter_button {
border-radius: 10px;
background-color: #8B0000;
width: auto;
min-width: 100px;
}
.filter-button .stamp {
display: flex;
align-items: center;
}
.copy_url_area {
display: flex;
flex-direction: row;
flex-warp: wrap;
justify-content: space-between;
gap: 5px;
}
.copy_url_area input {
flex-grow: 1;
flex-basis: auto;
color: gray;
}
details .detail-content {
margin-left: 1rem;
}
details .detail-content .ics_instructions {
width: 100%;
}
details .detail-content h5 {
margin-top: 1rem;
margin-bottom: 0;
}
.events {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-auto-rows: minmax(200px, auto);
grid-gap: 30px;
justify-items: center;
}
.card {
justify-content: space-between;
width: 100%;
height: 100%;
padding-bottom: 1em;
max-width: 30em;
border-radius: 50px;
border-radius: 1.4em;
background: linear-gradient(145deg, #fffffd, #e5dcd4);
box-shadow: 10px 10px 30px #d8cfc9, -10px -10px 30px #ffffff;
word-break: break-word;
}
.card__header {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 150px;
}
.card__header .event__category {
margin-top: 0;
margin-bottom: 0;
}
.card__header .event__category svg.stamp {
width: 148px;
height: 100px;
margin-right: -40px;
}
.card__action {
padding: 0 1em;
}
.card__bachelor {
background: linear-gradient(145deg, #c8c8c8, #b5afa9);
}
.card__heading {
margin: 0;
line-height: 1.4;
}
.card__info {
padding: 0 1em;
opacity: 0.8;
line-height: 1.2;
}
.card__stamp {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
}
.card__btn:hover, .card__btn:focus {
text-decoration: none !important;
}
.event__header {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.event__header .event__name {
width: 75vw;
}
.event__header .event__stamps {
width: min-content;
display: flex;
}
.event__header .event__stamps svg {
width: 140px;
height: 100px;
}
.event__header .event__stamps p {
font-size: 2rem;
}
.card.with_cover .card__image {
width: 100%;
aspect-ratio: 1/1;
margin-bottom: -155px;
}
.card.with_cover .card__image img {
width: 100%;
height: auto;
}
.card.with_cover .card__header a {
background-color: #f8f5f1;
}
.show_event_cover_image .show-geopattern {
width: 100%;
height: 100px;
}
.cover_image_thumbnails {
display: flex;
flex-wrap: wrap;
}
.cover_image_thumbnails img.image_thumbnail {
width: 100px;
height: 100px;
}
.content-block-text-image {
display: flex;
flex-direction: row;
gap: 1em;
}
.content-block-text-image figure {
flex: 1;
margin: 0;
}
.content-block-text-image figure img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.content-block-text-image figure figcaption {
text-align: center;
font-size: 0.8em;
color: gray;
font-style: italic;
}
.content-block-text-image div.lecturer_description {
flex: 3;
margin: 0;
}
@media (max-width: 30em) {
.event__header {
flex-direction: column;
align-items: start;
}
.event__name {
font-size: 2rem;
}
}
#qrcode {
display: block;
width: 256;
height: 256;
}
#stamper-checkbox-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 10px;
}
.full-width {
width: 100%;
height: auto;
}
/* https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
div.blockquote {
background: #f9f9f9;
border-left: 20px solid #ccc;
margin: 1.5em 0px;
padding: 0.5em 10px;
}
div.blockquote:before {
color: #ccc;
content: "”";
font-size: 4em;
line-height: 0.1em;
margin-right: 0em;
vertical-align: -0.4em;
}
.dropbtn {
background-color: #282828;
color: white;
padding: 10px;
font-size: 16px;
min-width: 120px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #FA5837;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 5px;
border-radius: 5px;
}
.dropdown-content p {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.dropdown-content p {
margin: 0;
padding: 6px;
}
/*styles of the personal stamp overview*/
.list_personal_stamps {
margin-top: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 32px;
}
.list_personal_stamps .card_personal {
justify-content: space-between;
width: 300px;
height: auto;
border-radius: 0px;
outline: 3px dashed white;
padding: 10px;
background: #fffffd;
word-break: break-word;
}
.list_personal_stamps .card_personal .card__header {
justify-content: flex-end;
height: auto;
}
.list_personal_stamps .card_personal .card__header .empty_stamp, .list_personal_stamps .card_personal .card__header .rejected_stamp {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
outline: 2px dashed #F65E40;
width: 142px;
height: 110px;
}
.list_personal_stamps .card_personal .card__header .rejected_stamp {
outline: 2px dashed #F65E40;
background-color: rgba(246, 94, 64, 0.7);
}
.list_personal_stamps .card_personal .card__header .date {
flex: 1;
position: absolute;
font-size: 14px;
text-align: center;
color: black;
top: 54px;
left: 40px;
}
.list_personal_stamps .event__category {
position: relative;
}
.list_personal_stamps .date {
flex: 1;
text-align: center;
color: black;
top: 54px;
left: 40px;
}
.list_personal_stamps .card_personal.with_cover .card__image {
width: 100%;
aspect-ratio: 1/1;
margin-bottom: -155px;
}
.list_personal_stamps .card_personal.with_cover .card__image img {
width: 100%;
height: auto;
border: 1px solid #D0D0D0;
}
.list_personal_stamps .card_personal.with_cover .card__header a {
background-color: #f8f5f1;
color: black;
}
@media (max-width: 30em) {
.list_personal_stamps {
flex-direction: column;
align-content: center;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #282828;
}
.content {
background: #BFB8B2;
border: 4px dashed #282828;
}
a {
color: #234DED;
}
#logo {
color: #234DA8;
}
.overlay .a_stamp .event_name > a {
color: black;
font-weight: 500;
}
.overlay .a_stamp .event_name > a:hover {
color: #234DED;
}
.insider {
background-color: #d4dff6;
}
.notice {
background-color: #2c60d2;
}
.alert {
background-color: #1a3a7e;
}
.attendance_grid > span {
border-bottom: 1px solid #234DA8;
}
h1 > small {
color: #234DA8;
}
th {
background-color: #2768F5;
color: #F7F7F7;
}
td {
padding: 5px 40px 5px 0;
}
tr:nth-child(even) {
background-color: #E1E1E1;
}
tr:hover {
background-color: #2768F5;
}
.table-btn {
background: #2768F5;
color: #F7F7F7;
}
.table-btn:hover {
background-color: #DE1B1B;
}
.inProgress {
color: #DEB931;
}
.completed {
color: #2768F5;
}
.btn {
color: #ffffff;
background-color: #234DA8;
border: solid 2px #234DA8;
}
.btn:hover {
color: #234DA8;
}
.btn.white {
background-color: #fff;
color: #234DA8;
}
.btn.white:hover {
background-color: #234DA8;
border: 2px solid #fff;
color: #ffffff;
}
.btn.alert {
background-color: #FF3838;
border: solid 2px #FF3838;
}
.btn.alert:hover {
color: #FF3838;
}
.btn.alert.lined {
color: #FF3838;
}
.btn.alert.lined:hover {
background-color: #FF3838;
color: #ffffff;
}
.btn.success {
background-color: #52B78F;
border: solid 2px #52B78F;
}
.btn.success:hover {
color: #52B78F;
}
.btn.success.lined {
color: #52B78F;
}
.btn.success.lined:hover {
background-color: #52B78F;
color: #ffffff;
}
.btn.info {
background-color: #B8F5DC;
border: solid 2px #B8F5DC;
}
.btn.info:hover {
color: #B8F5DC;
}
.btn.info.lined {
color: #B8F5DC;
}
.btn.info.lined:hover {
background-color: #B8F5DC;
color: #ffffff;
}
.btn.dark {
background-color: #282828;
border: solid 2px #282828;
}
.btn.dark:hover {
color: #282828;
}
.btn.dark.lined {
color: #282828;
}
.btn.dark.lined:hover {
background-color: #282828;
color: #ffffff;
}
.btn.warning {
background-color: #DEB931;
border: solid 2px #DEB931;
}
.btn.warning:hover {
color: #DEB931;
}
.btn.warning.lined:hover {
background-color: #DEB931;
color: #ffffff;
}
.input-field input[type=text],
.input-field input[type=email],
.input-field input[type=search],
.input-field input[type=number],
.input-field input[type=color],
.input-field input[type=password],
.input-field input[type=date],
.input-field textarea,
input[type=text].input-field,
input[type=email].input-field,
input[type=search].input-field,
input[type=number].input-field,
input[type=color].input-field,
input[type=password].input-field,
input[type=date].input-field,
textarea.input-field,
select {
outline: none;
padding: 0.3em;
font: inherit;
color: inherit;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 10px;
border: 2px solid #2768F5;
/*** STATES ***/
}
.input-field input[type=text].correct,
.input-field input[type=email].correct,
.input-field input[type=search].correct,
.input-field input[type=number].correct,
.input-field input[type=color].correct,
.input-field input[type=password].correct,
.input-field input[type=date].correct,
.input-field textarea.correct,
input[type=text].input-field.correct,
input[type=email].input-field.correct,
input[type=search].input-field.correct,
input[type=number].input-field.correct,
input[type=color].input-field.correct,
input[type=password].input-field.correct,
input[type=date].input-field.correct,
textarea.input-field.correct,
select.correct {
border: 2px solid #52B78F;
}
.input-field input[type=text].incorrect,
.input-field input[type=email].incorrect,
.input-field input[type=search].incorrect,
.input-field input[type=number].incorrect,
.input-field input[type=color].incorrect,
.input-field input[type=password].incorrect,
.input-field input[type=date].incorrect,
.input-field textarea.incorrect,
input[type=text].input-field.incorrect,
input[type=email].input-field.incorrect,
input[type=search].input-field.incorrect,
input[type=number].input-field.incorrect,
input[type=color].input-field.incorrect,
input[type=password].input-field.incorrect,
input[type=date].input-field.incorrect,
textarea.input-field.incorrect,
select.incorrect {
border: 2px solid #DEB931;
border-bottom: 5px double #DEB931;
}
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field input[type=search]:focus,
.input-field input[type=number]:focus,
.input-field input[type=color]:focus,
.input-field input[type=password]:focus,
.input-field input[type=date]:focus,
.input-field textarea:focus,
input[type=text].input-field:focus,
input[type=email].input-field:focus,
input[type=search].input-field:focus,
input[type=number].input-field:focus,
input[type=color].input-field:focus,
input[type=password].input-field:focus,
input[type=date].input-field:focus,
textarea.input-field:focus,
select:focus {
box-shadow: 0px 0px 10px 0px #52B78F;
border: 2px solid #52B78F;
}
.input-field input[type=text].incorrect:focus,
.input-field input[type=email].incorrect:focus,
.input-field input[type=search].incorrect:focus,
.input-field input[type=number].incorrect:focus,
.input-field input[type=color].incorrect:focus,
.input-field input[type=password].incorrect:focus,
.input-field input[type=date].incorrect:focus,
.input-field textarea.incorrect:focus,
input[type=text].input-field.incorrect:focus,
input[type=email].input-field.incorrect:focus,
input[type=search].input-field.incorrect:focus,
input[type=number].input-field.incorrect:focus,
input[type=color].input-field.incorrect:focus,
input[type=password].input-field.incorrect:focus,
input[type=date].input-field.incorrect:focus,
textarea.input-field.incorrect:focus,
select.incorrect:focus {
box-shadow: 0px 0px 10px 0px #DEB931;
border: 2px solid #DEB931;
border-bottom: 5px double #DEB931;
}
.input-field input[type=text].correct:focus,
.input-field input[type=email].correct:focus,
.input-field input[type=search].correct:focus,
.input-field input[type=number].correct:focus,
.input-field input[type=color].correct:focus,
.input-field input[type=password].correct:focus,
.input-field input[type=date].correct:focus,
.input-field textarea.correct:focus,
input[type=text].input-field.correct:focus,
input[type=email].input-field.correct:focus,
input[type=search].input-field.correct:focus,
input[type=number].input-field.correct:focus,
input[type=color].input-field.correct:focus,
input[type=password].input-field.correct:focus,
input[type=date].input-field.correct:focus,
textarea.input-field.correct:focus,
select.correct:focus {
box-shadow: 0px 0px 10px 0px #52B78F;
border: 2px solid #52B78F;
}
.input-field input[type=text]:not(:disabled):hover,
.input-field input[type=email]:not(:disabled):hover,
.input-field input[type=search]:not(:disabled):hover,
.input-field input[type=number]:not(:disabled):hover,
.input-field input[type=color]:not(:disabled):hover,
.input-field input[type=password]:not(:disabled):hover,
.input-field input[type=date]:not(:disabled):hover,
.input-field textarea:not(:disabled):hover,
input[type=text].input-field:not(:disabled):hover,
input[type=email].input-field:not(:disabled):hover,
input[type=search].input-field:not(:disabled):hover,
input[type=number].input-field:not(:disabled):hover,
input[type=color].input-field:not(:disabled):hover,
input[type=password].input-field:not(:disabled):hover,
input[type=date].input-field:not(:disabled):hover,
textarea.input-field:not(:disabled):hover,
select:not(:disabled):hover {
border: 2px solid #52B78F;
}
.input-field input[type=text].incorrect:not(:disabled):hover,
.input-field input[type=email].incorrect:not(:disabled):hover,
.input-field input[type=search].incorrect:not(:disabled):hover,
.input-field input[type=number].incorrect:not(:disabled):hover,
.input-field input[type=color].incorrect:not(:disabled):hover,
.input-field input[type=password].incorrect:not(:disabled):hover,
.input-field input[type=date].incorrect:not(:disabled):hover,
.input-field textarea.incorrect:not(:disabled):hover,
input[type=text].input-field.incorrect:not(:disabled):hover,
input[type=email].input-field.incorrect:not(:disabled):hover,
input[type=search].input-field.incorrect:not(:disabled):hover,
input[type=number].input-field.incorrect:not(:disabled):hover,
input[type=color].input-field.incorrect:not(:disabled):hover,
input[type=password].input-field.incorrect:not(:disabled):hover,
input[type=date].input-field.incorrect:not(:disabled):hover,
textarea.input-field.incorrect:not(:disabled):hover,
select.incorrect:not(:disabled):hover {
border: 2px solid #DEB931;
border-bottom: 5px double #DEB931;
}
.input-field input[type=text]:disabled,
.input-field input[type=email]:disabled,
.input-field input[type=search]:disabled,
.input-field input[type=number]:disabled,
.input-field input[type=color]:disabled,
.input-field input[type=password]:disabled,
.input-field input[type=date]:disabled,
.input-field textarea:disabled,
input[type=text].input-field:disabled,
input[type=email].input-field:disabled,
input[type=search].input-field:disabled,
input[type=number].input-field:disabled,
input[type=color].input-field:disabled,
input[type=password].input-field:disabled,
input[type=date].input-field:disabled,
textarea.input-field:disabled,
select:disabled {
opacity: 0.8;
cursor: not-allowed;
}
.input-field input[type=text].correct:disabled, .input-field input[type=text].incorrect:disabled,
.input-field input[type=email].correct:disabled,
.input-field input[type=email].incorrect:disabled,
.input-field input[type=search].correct:disabled,
.input-field input[type=search].incorrect:disabled,
.input-field input[type=number].correct:disabled,
.input-field input[type=number].incorrect:disabled,
.input-field input[type=color].correct:disabled,
.input-field input[type=color].incorrect:disabled,
.input-field input[type=password].correct:disabled,
.input-field input[type=password].incorrect:disabled,
.input-field input[type=date].correct:disabled,
.input-field input[type=date].incorrect:disabled,
.input-field textarea.correct:disabled,
.input-field textarea.incorrect:disabled,
input[type=text].input-field.correct:disabled,
input[type=text].input-field.incorrect:disabled,
input[type=email].input-field.correct:disabled,
input[type=email].input-field.incorrect:disabled,
input[type=search].input-field.correct:disabled,
input[type=search].input-field.incorrect:disabled,
input[type=number].input-field.correct:disabled,
input[type=number].input-field.incorrect:disabled,
input[type=color].input-field.correct:disabled,
input[type=color].input-field.incorrect:disabled,
input[type=password].input-field.correct:disabled,
input[type=password].input-field.incorrect:disabled,
input[type=date].input-field.correct:disabled,
input[type=date].input-field.incorrect:disabled,
textarea.input-field.correct:disabled,
textarea.input-field.incorrect:disabled,
select.correct:disabled,
select.incorrect:disabled {
opacity: 1;
cursor: not-allowed;
}
}
body.staging {
background-color: green;
}
#logo {
color: #FA5837;
width: 100px;
vertical-align: middle;
}
.logo-text {
display: inline-block;
text-decoration: none;
margin: 0;
line-height: 1;
font-size: 1.488em;
}
.logo-user {
margin: 0;
padding: 0;
}
nav {
text-transform: uppercase;
font-size: 1.2em;
line-height: 80%;
}
nav ul {
width: 50%;
list-style: none;
margin: 0;
padding: 0;
}
nav ul.horizontal {
justify-content: flex-end;
}
nav li {
margin: 0 0 0 0.8em;
}
nav > a:hover {
text-decoration: none !important;
}
nav select#locale {
border-radius: 18px;
}
.field {
display: flex;
flex-direction: column;
margin: 10px 0 20px 0;
}
.flexrow {
flex-direction: row;
}
.spacebetween {
justify-content: space-between;
}
.field label {
text-align: left;
margin: 2px 0 4px 0;
}
.field input {
margin: 0;
max-width: 30em;
}
.field select {
margin: 0;
max-width: 30em;
}
form.button_to {
display: inline;
}
a:any-link {
text-decoration: none;
}
a:any-link:hover {
text-decoration: underline;
}
.icons {
background-color: blue;
text-align: right;
padding: 10px;
color: white;
}
.tagPeopleIcons {
background-color: blue;
text-align: right;
padding: 10px;
color: white;
}
.tagPeopleOverlay {
position: relative;
width: 920px;
height: 656px;
}
.tagPeopleOverlay .tagPersonPage {
background-color: #e7cb9d;
}
.tagPeopleOverlay .current_person_square {
position: absolute;
filter: brightness(2);
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
border: 3px solid #FA5837;
border-radius: 0;
display: flex;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tagPeopleOverlay .current_person_square form {
display: block;
align-self: flex-end;
margin-right: 5px;
}
.tagPeopleOverlay .current_person_square p {
text-align: center;
height: 1.5em;
width: 100%;
color: #FA5837;
background-color: #f8f5f1;
font-family: "M PLUS Rounded 1c", sans-serif;
margin: 0 1px 0 0;
padding: 0;
font-size: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@supports (-webkit-hyphens: none) {
.tagPeopleOverlay .current_person_square p {
font-size: 1em;
}
}
.tagPeopleOverlay .current_person_square p a {
color: #FA5837;
}
.tagPeopleOverlay .current_person_circle {
position: absolute;
filter: brightness(2);
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
border: 3px solid #FA5837;
border-radius: 50%;
display: flex;
align-items: center;
z-index: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
.tagPeopleOverlay .current_person_circle p {
text-align: center;
color: #FA5837;
background-color: #f8f5f1;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: bold;
margin: 0 1px 0 0;
padding: 0;
}
.tagPeopleOverlay .current_person_circle p a {
color: #FA5837;
}
.tagPeopleOverlay .event_name {
max-width: 260px;
font-family: "M PLUS Rounded 1c", sans-serif;
flex: 1;
font-size: 18px;
line-height: 20px;
overflow: hidden;
min-width: 50%;
margin: 0;
}
.tagPeopleOverlay .event_name > a {
color: black;
font-weight: 500;
}
.tagPeopleOverlay .event_name > a:hover {
color: #FA5837;
text-decoration: none;
}
.tagPeopleOverlay .category_stamp {
z-index: 1;
}
.overlay {
position: relative;
}
.overlay .page {
background-color: #e7cb9d;
width: 920px;
height: 656px;
}
.overlay .event_name {
max-width: 260px;
font-family: "M PLUS Rounded 1c", sans-serif;
flex: 1;
font-size: 18px;
line-height: 20px;
overflow: hidden;
min-width: 50%;
margin: 0;
}
.overlay .event_name > a {
color: black;
font-weight: 500;
}
.overlay .event_name > a:hover {
color: #FA5837;
text-decoration: none;
}
.overlay .not_a_stamp {
position: absolute;
background-color: rgba(30, 30, 30, 0.2);
border: 3px #ddd solid;
display: flex;
align-items: center;
}
.overlay .a_stamp {
position: absolute;
display: flex;
align-items: center;
}
.overlay .a_stamp .category_stamp {
z-index: 1;
}
.overlay .a_stamp .category_stamp .date {
flex: 1;
position: absolute;
font-size: 14px;
text-align: center;
color: black;
top: 54px;
left: 40px;
}
.overlay .a_stamp .category_stamp svg {
max-width: 250px;
max-height: 140px;
}
@media (max-width: 30em) {
nav {
font-size: 1em;
}
.logo-text {
font-size: 0.7em;
}
#logo {
width: 60px;
}
}
.insider {
background-color: white;
}
.droppable {
background-color: white;
outline: 2px dashed black;
outline-offset: -10px;
widht: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.droppable span {
font-style: italic;
font-size: bigger;
color: #ddd;
}
.notice {
background-color: #f88771;
padding: 10px;
margin-top: 20px;
}
.info {
background-color: #f8f871;
padding: 10px;
margin-top: 20px;
}
.alert {
background-color: #f4350f;
padding: 10px;
margin-top: 20px;
}
.attendance_grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 3fr;
grid-auto-rows: 30px;
}
.attendance_grid > span {
border-bottom: 1px solid #f65e40;
}
.attendance_grid .text-align-right {
text-align: right;
}
.inline-link {
display: flex;
align-items: center;
white-space: nowrap;
}
.inline-link img {
margin-left: 5px;
}
h1 > small {
color: green;
}
form.button_to {
display: inline;
}
nav .button_as_link {
font-size: 19.2px;
text-transform: uppercase;
}
.button_as_link {
border: 0px;
background-color: transparent;
color: #FA5837;
font-size: 16px;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.button_as_link:hover {
text-decoration: underline;
}
.further_image_container {
display: flex;
flex-direction: row;
width: 100%;
}
.further_image_container .further_image_edit_links {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
img.framed_image {
border: 3px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}
@keyframes appear-then-fade {
0%, 100% {
opacity: 0;
}
5%, 60% {
opacity: 1;
}
}
.flash {
position: fixed;
top: 5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
width: max-content;
z-index: 9999;
}
.flash__message {
animation: appear-then-fade 4s both;
border-radius: 999px;
}
.layout_boxes .stamp-placement-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 35px;
position: absolute;
top: 0;
left: 0;
padding: 34px;
}
.layout_boxes .first-page div {
grid-column: 1;
width: 405px;
height: 112px;
}
.layout_boxes .first-page {
gap: 10px 35px;
}
.layout_boxes .stamp-placement-box {
border: 3px dotted black;
width: 405px;
height: 110px;
background-color: rgba(245, 245, 245, 0.5);
}
.layout_boxes .stamp-placement-box:hover {
background-color: rgb(245, 245, 245);
}
.burger-menu-toggle {
display: none;
margin-bottom: 1rem;
}
.hamburger_line1 {
width: 2rem;
height: 0.0625rem;
background-color: red;
}
.hamburger_line2 {
width: 2rem;
height: 0.0625rem;
background-color: red;
}
@media screen and (max-width: 825px) {
.horizontal {
display: flex;
flex-direction: column;
}
.horizontal ul {
display: none;
}
.horizontal ul.active {
display: flex;
flex-direction: column;
}
.horizontal li {
margin-bottom: 1rem;
}
.burger-menu-toggle {
display: block;
width: 1.875rem;
height: 1.875rem;
margin: 1.2rem 0rem 2rem;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.burger-menu-toggle.open {
margin: 1.2rem 0rem 1rem;
}
.hamburger_line {
display: block;
width: 100%;
height: 0.125rem;
background-color: #F65E40;
margin: 0.5rem 0;
z-index: 1000;
transform: rotate(0deg);
transition: 0.2s all ease-in-out;
}
.burger-menu-toggle.open .hamburger_line:nth-child(1) {
transform: rotate(-45deg) translate(0rem, 0.4375rem);
-ms-transform-origin-x: 0.8125rem;
-ms-transform-origin-y: 0.5rem;
transform-origin: 0.8125rem 0.5rem;
transition: 0.2s all ease-in-out;
}
.burger-menu-toggle.open .hamburger_line:nth-child(2) {
display: none;
transition: 0.2s all ease-in-out;
}
.burger-menu-toggle.open .hamburger_line:nth-child(3) {
transform: rotate(45deg) translate(0rem, -0.4375rem);
-ms-transform-origin-x: 0.75rem;
-ms-transform-origin-y: -0.3125rem;
transform-origin: 0.75rem -0.3125rem;
transition: 0.2s all ease-in-out;
}
nav li.nav-mobile {
margin: 0.5rem 0;
}
nav li.nav-mobile:last-child {
margin: 1rem 0 2rem;
}
#nav-mobile-login {
margin: 0.6rem 0 2rem;
}
}
.tag {
display: inline-block;
padding: 0.3em 0.6em;
margin-left: 0.5em;
font-size: 0.9em;
color: black;
background-color: white;
border-radius: 0.5em;
text-transform: capitalize;
}
.tag b {
font-weight: inherit;
}
.no-events-message {
text-align: center;
margin-top: 20px;
padding: 10px;
color: black;
border-radius: 5px;
}
#reset_filter_button {
border-radius: 10px;
background-color: #8B0000;
width: auto;
min-width: 100px;
}
.page_actions {
margin-bottom: 16px;
}
.list-columns-300, .list-columns-200, .list-columns-100 {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.list-columns-300 li {
width: 300px;
}
.list-columns-200 li {
width: 200px;
}
.list-columns-100 li {
width: 100px;
}
/*!
* Cropper.js v1.6.2
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2024-04-21T07:43:02.731Z
*/
.cropper-container {
-webkit-touch-callout: none;
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cropper-container img {
backface-visibility: hidden;
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%;
}
.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.cropper-canvas, .cropper-wrap-box {
overflow: hidden;
}
.cropper-drag-box {
background-color: #fff;
opacity: 0;
}
.cropper-modal {
background-color: #000;
opacity: 0.5;
}
.cropper-view-box {
display: block;
height: 100%;
outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75);
overflow: hidden;
width: 100%;
}
.cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: 0.5;
position: absolute;
}
.cropper-dashed.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: 33.33333%;
left: 0;
top: 33.33333%;
width: 100%;
}
.cropper-dashed.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: 33.33333%;
top: 0;
width: 33.33333%;
}
.cropper-center {
display: block;
height: 0;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
width: 0;
}
.cropper-center:after, .cropper-center:before {
background-color: #eee;
content: " ";
display: block;
position: absolute;
}
.cropper-center:before {
height: 1px;
left: -3px;
top: 0;
width: 7px;
}
.cropper-center:after {
height: 7px;
left: 0;
top: -3px;
width: 1px;
}
.cropper-face, .cropper-line, .cropper-point {
display: block;
height: 100%;
opacity: 0.1;
position: absolute;
width: 100%;
}
.cropper-face {
background-color: #fff;
left: 0;
top: 0;
}
.cropper-line {
background-color: #39f;
}
.cropper-line.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px;
}
.cropper-line.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0;
}
.cropper-point {
background-color: #39f;
height: 5px;
opacity: 0.75;
width: 5px;
}
.cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
.cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
}
@media (min-width: 768px) {
.cropper-point.point-se {
height: 15px;
width: 15px;
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
height: 10px;
width: 10px;
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
height: 5px;
opacity: 0.75;
width: 5px;
}
}
.cropper-point.point-se:before {
background-color: #39f;
bottom: -50%;
content: " ";
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
width: 200%;
}
.cropper-invisible {
opacity: 0;
}
.cropper-bg {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.cropper-hide {
display: block;
height: 0;
position: absolute;
width: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
cursor: not-allowed;
}
.autocomplete {
background: #fff;
z-index: 1000;
font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow: auto;
box-sizing: border-box;
border: 1px solid rgba(50, 50, 50, 0.6);
}
.autocomplete * {
font: inherit;
}
.autocomplete > div {
padding: 0 4px;
}
.autocomplete .group {
background: #eee;
}
.autocomplete > div.selected, .autocomplete > div:hover:not(.group) {
background: #81ca91;
cursor: pointer;
}
.flatpickr-calendar {
background: transparent;
opacity: 0;
display: none;
text-align: center;
visibility: hidden;
padding: 0;
-webkit-animation: none;
animation: none;
direction: ltr;
border: 0;
font-size: 14px;
line-height: 24px;
border-radius: 5px;
position: absolute;
width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08);
--theme-color: #F65E40;
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
opacity: 1;
max-height: 640px;
visibility: visible;
}
.flatpickr-calendar.open {
display: inline-block;
z-index: 99999;
}
.flatpickr-calendar.animate.open {
-webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
display: block;
position: relative;
top: 2px;
}
.flatpickr-calendar.static {
position: absolute;
top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
z-index: 999;
display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
height: 40px;
border-top: 1px solid rgba(72, 72, 72, 0.2);
}
.flatpickr-calendar.hasTime .flatpickr-innerContainer {
border-bottom: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
border: 1px solid rgba(72, 72, 72, 0.2);
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
position: absolute;
display: block;
pointer-events: none;
border: solid transparent;
content: "";
height: 0;
width: 0;
left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
left: auto;
right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
left: 50%;
right: 50%;
}
.flatpickr-calendar:before {
border-width: 5px;
margin: 0 -5px;
}
.flatpickr-calendar:after {
border-width: 4px;
margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
border-bottom-color: rgba(72, 72, 72, 0.2);
}
.flatpickr-calendar.arrowTop:after {
border-bottom-color: var(--theme-color);
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
border-top-color: rgba(72, 72, 72, 0.2);
}
.flatpickr-calendar.arrowBottom:after {
border-top-color: var(--theme-color);
}
.flatpickr-calendar:focus {
outline: 0;
}
.flatpickr-wrapper {
position: relative;
display: inline-block;
}
.flatpickr-months {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flatpickr-months .flatpickr-month {
border-radius: 5px 5px 0 0;
background: var(--theme-color);
color: #fff;
fill: #fff;
height: 34px;
line-height: 1;
text-align: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
cursor: pointer;
position: absolute;
top: 0;
height: 34px;
padding: 10px;
z-index: 3;
color: #fff;
fill: #fff;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
/*rtl:begin:ignore*/
/*
*/
left: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
/*rtl:begin:ignore*/
/*
*/
right: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
color: #bbb;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
width: 14px;
height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
-webkit-transition: fill 0.1s;
transition: fill 0.1s;
fill: inherit;
}
.numInputWrapper {
position: relative;
height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
display: inline-block;
}
.numInputWrapper input {
width: 100%;
}
.numInputWrapper input::-ms-clear {
display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.numInputWrapper span {
position: absolute;
right: 0;
width: 14px;
padding: 0 4px 0 2px;
height: 50%;
line-height: 50%;
opacity: 0;
cursor: pointer;
border: 1px solid rgba(72, 72, 72, 0.15);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.numInputWrapper span:hover {
background: rgba(0, 0, 0, 0.1);
}
.numInputWrapper span:active {
background: rgba(0, 0, 0, 0.2);
}
.numInputWrapper span:after {
display: block;
content: "";
position: absolute;
}
.numInputWrapper span.arrowUp {
top: 0;
border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid rgba(72, 72, 72, 0.6);
top: 26%;
}
.numInputWrapper span.arrowDown {
top: 50%;
}
.numInputWrapper span.arrowDown:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(72, 72, 72, 0.6);
top: 40%;
}
.numInputWrapper span svg {
width: inherit;
height: auto;
}
.numInputWrapper span svg path {
fill: rgba(255, 255, 255, 0.5);
}
.numInputWrapper:hover {
background: rgba(0, 0, 0, 0.05);
}
.numInputWrapper:hover span {
opacity: 1;
}
.flatpickr-current-month {
font-size: 135%;
line-height: inherit;
font-weight: 300;
color: inherit;
position: absolute;
width: 75%;
left: 12.5%;
padding: 7.48px 0 0 0;
line-height: 1;
height: 34px;
display: inline-block;
text-align: center;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
font-family: inherit;
font-weight: 700;
color: inherit;
display: inline-block;
margin-left: 0.5ch;
padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .numInputWrapper {
width: 6ch;
width: 7ch\0 ;
display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: #fff;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: #fff;
}
.flatpickr-current-month input.cur-year {
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
cursor: text;
padding: 0 0 0 0.5ch;
margin: 0;
display: inline-block;
font-size: inherit;
font-family: inherit;
font-weight: 300;
line-height: inherit;
height: auto;
border: 0;
border-radius: 0;
vertical-align: initial;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
font-size: 100%;
color: rgba(255, 255, 255, 0.5);
background: transparent;
pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: menulist;
background: var(--theme-color);
border: none;
border-radius: 0;
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
font-weight: 300;
height: auto;
line-height: inherit;
margin: -1px 0 0 0;
outline: none;
padding: 0 0 0 0.5ch;
position: relative;
vertical-align: initial;
-webkit-box-sizing: border-box;
-webkit-appearance: menulist;
-moz-appearance: menulist;
width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
background-color: var(--theme-color);
outline: none;
padding: 0;
}
.flatpickr-weekdays {
background: var(--theme-color);
text-align: center;
overflow: hidden;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
span.flatpickr-weekday {
cursor: default;
font-size: 90%;
background: var(--theme-color);
color: rgba(0, 0, 0, 0.54);
line-height: 1;
margin: 0;
text-align: center;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
padding: 1px 0 0 0;
}
.flatpickr-days {
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
width: 307.875px;
border-left: 1px solid rgba(72, 72, 72, 0.2);
border-right: 1px solid rgba(72, 72, 72, 0.2);
}
.flatpickr-days:focus {
outline: 0;
}
.dayContainer {
padding: 0;
outline: 0;
text-align: left;
width: 307.875px;
min-width: 307.875px;
max-width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
opacity: 1;
}
.dayContainer + .dayContainer {
-webkit-box-shadow: -1px 0 0 rgba(72, 72, 72, 0.2);
box-shadow: -1px 0 0 rgba(72, 72, 72, 0.2);
}
.flatpickr-day {
background: none;
border: 1px solid transparent;
border-radius: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #484848;
cursor: pointer;
font-weight: 400;
width: 14.2857143%;
-webkit-flex-basis: 14.2857143%;
-ms-flex-preferred-size: 14.2857143%;
flex-basis: 14.2857143%;
max-width: 39px;
height: 39px;
line-height: 39px;
margin: 0;
display: inline-block;
position: relative;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
cursor: pointer;
outline: 0;
background: #e2e2e2;
border-color: #e2e2e2;
}
.flatpickr-day.today {
border-color: #bbb;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
border-color: #bbb;
background: #bbb;
color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: var(--theme-color);
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
border-color: var(--theme-color);
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-webkit-box-shadow: -10px 0 0 var(--theme-color);
box-shadow: -10px 0 0 var(--theme-color);
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
border-radius: 50px;
}
.flatpickr-day.inRange {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2;
box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
color: rgba(72, 72, 72, 0.3);
background: transparent;
border-color: transparent;
cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
cursor: not-allowed;
color: rgba(72, 72, 72, 0.1);
}
.flatpickr-day.week.selected {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 var(--theme-color), 5px 0 0 var(--theme-color);
box-shadow: -5px 0 0 var(--theme-color), 5px 0 0 var(--theme-color);
}
.flatpickr-day.hidden {
visibility: hidden;
}
.rangeMode .flatpickr-day {
margin-top: 1px;
}
.flatpickr-weekwrapper {
float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
padding: 0 12px;
border-left: 1px solid rgba(72, 72, 72, 0.2);
}
.flatpickr-weekwrapper .flatpickr-weekday {
float: none;
width: 100%;
line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
display: block;
width: 100%;
max-width: none;
color: rgba(72, 72, 72, 0.3);
background: transparent;
cursor: default;
border: none;
}
.flatpickr-innerContainer {
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background: #fff;
border-bottom: 1px solid rgba(72, 72, 72, 0.2);
}
.flatpickr-rContainer {
display: inline-block;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flatpickr-time {
text-align: center;
outline: 0;
display: block;
height: 0;
line-height: 40px;
max-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #fff;
border-radius: 0 0 5px 5px;
}
.flatpickr-time:after {
content: "";
display: table;
clear: both;
}
.flatpickr-time .numInputWrapper {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 40%;
height: 40px;
float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: #484848;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: #484848;
}
.flatpickr-time.hasSeconds .numInputWrapper {
width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
width: 49%;
}
.flatpickr-time input {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
border-radius: 0;
text-align: center;
margin: 0;
padding: 0;
height: inherit;
line-height: inherit;
color: #484848;
font-size: 14px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
font-weight: 400;
}
.flatpickr-time input:focus {
outline: 0;
border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
height: inherit;
float: left;
line-height: inherit;
color: #484848;
font-weight: bold;
width: 2%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
outline: 0;
width: 18%;
cursor: pointer;
text-align: center;
font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
background: #eaeaea;
}
.flatpickr-input[readonly] {
cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}