@import "./bootstrap/bootstrap.css";

:root {
    --dark-grey: #36393f;
    --light-grey: #36393f;
    --bg-grey: #212529;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--light-grey);
    --bs-nav-tabs-link-hover-border-color: var(--light-grey) var(--light-grey) var(--dark-grey);
    --bs-nav-tabs-link-active-color: white;
    --bs-nav-tabs-link-active-bg: #212529;
    --bs-nav-tabs-link-active-border-color: var(--light-grey) var(--light-grey) var(--bs-dark);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--light-grey);
}

.nav-link, a {
    color: #3dd5f3 !important;
}
.nav-link:hover, .nav-link:focus {
    color: #0aa2c0 !important;
}

.accordion {
    --bs-accordion-color: red;
    --bs-accordion-bg: #212529;
    --bs-accordion-border-color: var(--light-grey);
    --bs-accordion-btn-color: white;
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233dd5f3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-border-color: var(--light-grey);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(85, 72, 72, 0.25);
    --bs-accordion-active-color: #3dd5f3;
    --bs-accordion-active-bg: var(--light-grey);
}

.accordion-item {
    color: white;
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--light-grey);
  }

body {
    /*background-color: #2c3035;*/
    background-color: #36393f;
}

#dreisatzBox {
    display: grid;
    place-items: center;
    align-content: center;
}

#dreisatzBox input, select{
    background-color: var(--bg-grey);
    color: white;
	border: 1px solid var(--light-grey);
	border-radius: var(--bs-accordion-inner-border-radius);
}

var {
    color: rgba(255, 255, 255, 0.63) !important;
}

#mainContainer {
    padding: 2rem;
    background-color: var(--bs-dark);
}

#mainContainer img {
	height: 100%;
	max-height: 50vh;
	min-height: 50vh;
}

footer {
	margin-top: 1rem;
	margin-bottom: -1rem;
	bottom: 0;
}