/* styles.css /*
/* Simon Rüfenacht /*

/* Importe */
/* ------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.min.css");

:root{
	--bs-body-font-family: "Rubik",sans-serif;
	--bs-font-sans-serif: 'Rubik';
    --bs-body-font-size: 15px;
    --bs-border-radius: 0.5rem;
	--bs-body-bg: #F9F9F9;
	--svs-primary-color: #dd3c44;
	--svs-primary-color-rgb: 221, 60, 68;
	--svs-light-bg-color: #F7F7F5;	
	--svs-light-card-color: #ECF1F7;
	--svs-text-muted: #6c757d;
}
body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}
/* Anpassungen */
.form-select:focus,
.form-control:focus,
.form-check-input:focus,
.form-select.active{
    border-color: var(--bs-gray-300);
    outline: 0;
    box-shadow: 0 0 0 0.125rem var(--bs-success-border-subtle);
}
a, a:active, a:visited{
	text-decoration:none;
	color: var(--svs-primary-color);
}
a:hover{
	color: var(--bs-secondary);
}
.w60{
	width:60px;
}
.w90{
	width:90px;
}
.w100{
	width:100px;
}

/* Layout */
/* ------------------------------------------------------------------*/
.wrapper{
	max-width:1240px;
	margin:2rem auto;
}
.container-inside{
	padding-left:30px;
	padding-right:30px;
}
header.header{
	background-color: var(--svs-primary-color);
	border-top-left-radius: var(--bs-border-radius-xl);
	border-top-right-radius: var(--bs-border-radius-xl);
}
.header .logo img{
	width:75px;
}
.header .slogan{
	font-weight:600;
	font-size:2rem;
	color: #fff;
}
main.content{
	background-color: #fff;
	border-bottom-left-radius: var(--bs-border-radius-xl);
	border-bottom-right-radius: var(--bs-border-radius-xl);
}
.inside{
	padding:1.5rem 1.25rem;
}


/* Headings */
/* ------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6{
	padding:0;
	margin:0;
}
h2{
	font-size:1.75rem;
}
h3{
	font-size:1.5rem;
}
h4{
	font-size:1.375rem;
}

/* Forms */
/* ------------------------------------------------------------------*/

.form-label{
	font-size:0.875rem;
	color: var(--svs-text-muted);
}
.form-text{
	font-style: italic;
}
.btn-svs{
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--svs-light-bg-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: rgba(var(--svs-primary-color-rgb),0.8);
    --bs-btn-hover-border-color: rgba(var(--svs-primary-color-rgb),1);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: rgba(var(--svs-primary-color-rgb),1);
    --bs-btn-active-border-color: rgba(var(--svs-primary-color-rgb),1);
    --bs-btn-font-family: var(--bs-body-font-family);
	--bs-btn-border-radius: var(--bs-border-radius);
}

/* Boxen */
/* ------------------------------------------------------------------*/
.table {
    --bs-table-bg: var(--bs-white);
	
}

/* Boxen */
/* ------------------------------------------------------------------*/
.svs-info-box{
	padding:0.5rem 0.75rem;
	border-left:4px solid transparent;
	background-color: var(--svs-light-bg-color);
	display:flex;
	align-items: center;
    gap: 0.5rem !important;
	margin-bottom:0.25rem;
}
.svs-info-box .bi{
	font-size:1.25rem;
}

/* Tipps */
/* ------------------------------------------------------------------*/
.svs-tipps .svs-tipps-ntry{
	padding:0.75rem 0.75rem;
	margin-bottom:0.5rem;

	background: var(--svs-light-bg-color);
	border-left:4px solid var(--bs-gray-200);
}
.svs-tipps .svs-tipps-ntry:hover{
	background-color: rgba(0,0,0,0.04);
}
.svs-tipps .results{
	padding:0.25rem;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius: var(--bs-border-radius);
	font-weight:bold;
	height:38px;
	background-color: var(--bs-white);
}
.svs-tipps .tipps{
	display:flex;
	align-items:center;
}
.svs-tipps .date{
	width: 80px;
}
.svs-tipps .form-control{
	background-color: var(--bs-white);
}
.form-control:disabled {
    background-color: var(--bs-secondary-bg);
}
.svs-tipps .input-group-text{
	padding: .375rem .25rem;
}
.svs-tipps .punkte{
	padding:0.25rem;
	text-align:center;
	border-radius: var(--bs-border-radius);
	height:38px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.tipps-header{
	padding-right:0.75rem;
}
.svs-tipps .bg-tipps{
	background-color: rgba(var(--svs-primary-color-rgb),0.25);
}

@media only screen and (max-width : 991px) {
	body{
		background-color: #fff;
	}
	.svs-tipps-wrapper{
		flex-direction: column !important;
		gap: 0.25rem !important;
	}
	.svs-tipps-right{
		margin-left:0 !important;
		margin-top:0.25rem;
		gap: 0.5rem !important;
	}
	.svs-tipps-wrapper .teams{
		text-align:center;
	}
	.svs-tipps-wrapper .blind{
		display:none;
	}
	.tipps-header{
		display:none !important;
	}
	.wrapper{
		max-width:1240px;
		margin:0 !important;
	}
	.header{
		border-radius:0 !important;
	}
	.container-inside{
		padding:0 !important;
	}
}