/* Version: v1.1 */
::-webkit-scrollbar {
    height: 0px;
    width: 0px;
}

html {
    height: 100%;
    width: 100%;
}

body {
    background-color: #009747;
    background-size: cover;
    color: #ffffff;
}

h1 {
    margin-top: -50px;
}

h3 {
    color: rgb(163, 0, 0); 
    margin-top: -50px;
}

/* Colors */
.text-green { color: #009747 !important; }
.text-light { color: #e3f2fd !important; }
.text-black { color: #000000 !important; }
.text-white { color: #ffffff; }

.bg-green { background-color: #009747; }
.bg-light { background-color: #e3f2fd; }

.valid-feedback { color: rgb(0, 255, 0); }
.invalid-feedback { color: rgb(163, 0, 0); }


/* Easy Elements */
.table {
    --bs-table-bg: none;
    table-layout: fixed;
}

.textlink {
    color: inherit;
    text-decoration: none; 
}


/* Bigger Elements */
.navbar { background-color: #e3f2fd; }
.navitem { display: inline; }
.navbar-brand-text {
    display: inline;
    color: #000000;
}


.toast-header {
    background-color: #ffffff;
    color: #009747;
}
.toast-body {
    background-color: #e3f2fd;
    color: #000000;
}


.modal-body p { color: #000000; }
.modal-header h5 { color: #000000; }


/* div elements */
.green-card {
    background-color: #009747 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.watermark {
    opacity: 0.5;
    color: BLACK;
    position: fixed;
    bottom: 5px;
    right: 5px;
}

.watermark-card {
    opacity: 0.5;
    color: BLACK;
    position: absolute;
    top: 5px;
    right: 10px;
}

#drop_zone {
    position: relative;

    border: 2px dashed #bbb;
    border-radius: 5px;
    font: 20pt bold 'Vollkorn';
    color: #bbb;
    
    display: flex;
    padding: 20px;
    justify-content: center;
    text-align: center;
}


.dropped_icon {
    position: absolute;
    color: #bbb;
    width: 10%;
    height: 30%;
    padding: 0;
}

/* 3 10 2 10 2 10 2 10 2 10 2 10 2 10 2 10 3 */

.dropped_icon i { font-size: x-large; }
.dropped_icon p { 
    font-size: small;
    margin: 0;
    padding: 0;
    width: 100%;
    position: absolute;
    top: 0px;
    left: -20px;
}

.dropped_icon_1 { top: 10px; left: 3%; }
.dropped_icon_2 { top: 10px; left: 15%; }
.dropped_icon_3 { top: 10px; left: 27%; } 
.dropped_icon_4 { top: 10px; left: 39%; }
.dropped_icon_5 { top: 10px; left: 51%; }
.dropped_icon_6 { top: 10px; left: 63%; }
.dropped_icon_7 { top: 10px; left: 75%; }
.dropped_icon_8 { top: 10px; left: 87%; }

.dropped_icon_9 { bottom: 10px; left: 3%; }
.dropped_icon_10 { bottom: 10px; left: 15%; }
.dropped_icon_11 { bottom: 10px; left: 27%; }
.dropped_icon_12 { bottom: 10px; left: 39%; }
.dropped_icon_13 { bottom: 10px; left: 51%; }
.dropped_icon_14 { bottom: 10px; left: 63%; }
.dropped_icon_15 { bottom: 10px; left: 75%; }
.dropped_icon_16 { bottom: 10px; left: 87%; }


.greycard {
    border-radius: 5px;
    background-color: #e9ecef;
    
    display: flex;
    padding: 20px;
    justify-content: center;
    text-align: center;
}



/* Other */
.form-check-input:valid~.form-check-label.white { color: #ffffff !important; }
.form-check-input:valid~.form-check-label.black { color: #000000 !important; }
.form-check-input:invalid~.form-check-label.white { color: #ffffff !important; }
.form-check-input:invalid~.form-check-label.black { color: #000000 !important; }

.form-check .lowbadge{
    padding-top: 3px;
    padding-bottom: 3px;
    float: right;
}


/* Landing Page */
.landing-card {
    background-color: #e3f2fd;
    color: #000000;
}


/* Deprecated */
/* .btn-accept {
    background-color: #e3f2fd;
    color: #009747;
    border: 1px solid #009747;
}

.btn-accept:active {
    background-color: #009747;
    color: #e3f2fd;
    border: 1px solid #e3f2fd;
}

.btn-accept:hover {
    background-color: #009747;
    color: #e3f2fd;
    border: 1px solid #e3f2fd;
}

.btn-accept:focus {
    background-color: #e3f2fd;
    color: #009747;
    border: 1px solid #009747;
}

.btn-leave {
    background-color: #e3f2fd;
    color: rgb(163, 0, 0);
    border: 1px solid rgb(163, 0, 0);
}

.btn-leave:active {
    background-color: rgb(163, 0, 0);
    color: #e3f2fd;
    border: 1px solid #e3f2fd;
}

.btn-leave:hover {
    background-color: rgb(163, 0, 0);
    color: #e3f2fd;
    border: 1px solid #e3f2fd;
}

.btn-leave:focus {
    background-color: #e3f2fd;
    color: rgb(163, 0, 0);
    border: 1px solid rgb(163, 0, 0);
}

.btn-accept-inverted {
    background-color: #009747;
    color: #e3f2fd;
    border: 1px solid #e3f2fd;
}

.btn-accept-inverted:active {
    background-color: #e3f2fd;
    color: #009747;
    border: 1px solid #009747;
}

.btn-accept-inverted:hover {
    background-color: #e3f2fd;
    color: #009747;
    border: 1px solid #009747;
}

.btn-accept-inverted:focus {
    background-color: #009747;
    color: #e3f2fd;
    border: 1px solid #e3f2fd;
} */