/* =======================================================================================

Variables

======================================================================================= */

:root {
  --red: #d4122e;
  --blue: #11396d;
}

/* =======================================================================================

Backgrounds

======================================================================================= */

.bg-31 {
	background-image: url(../images/backgrounds/bg-01.webp);
}

.bg-32 {
	background-image: url(../images/backgrounds/bg-02.webp);
}

.bg-33,
.theme-dark .card.bg-33 {
	background-color: var(--red);
	background-image: url(../images/backgrounds/bg-33.webp);
	background-size: auto;
}

.bg-34,
.theme-dark .card.bg-34 {
	background-color: var(--blue);
	background-image: url(../images/backgrounds/bg-33.webp);
	background-size: auto;
}

.bg-35 {
	background-image: url(../images/backgrounds/bg-35.webp);
}

.bg-40,
.theme-dark .card.bg-40 {
	background-color: var(--red);
}

.bg-41,
.theme-dark .card.bg-41 {
	background-color: var(--blue);
}

.bg-42 {
	background-color: var(--blue);
	background-image: url(../images/backgrounds/bg-35.webp);
	background-size: auto;
}

/* =======================================================================================

Typo

======================================================================================= */

.ug-color-red {
	color: var(--red);
}

.ug-color-blue {
	color: var(--blue);
}

.ug-font-80 {
	font-size: 80px !important;
	line-height: 1em;
}

.theme-light .ug-title-bordered {
	text-shadow: -0.8px -0.8px 0 #fff, 0.8px -0.8px 0 #fff, -0.8px 0.8px 0 #fff, 0.8px 0.8px 0 #fff;
}

/* =======================================================================================

Header

======================================================================================= */

.header > a {
	max-height: 100%;
}

.header > a > img {
	max-height: 90%;
}

/* =======================================================================================

Forms

======================================================================================= */

.list-custom-large a em {
	font-size: 10px;
    position: absolute;
    margin-top: 10px;
    color: #adb5bd;
}

.list-custom-large a span:not(.badge) {
	font-size: 12px;
	font-weight: 400;
}

.ios-input:checked ~ .custom-control-label::before {
	background-color: var(--red) !important;
}



/* =======================================================================================

Other

======================================================================================= */

.page-content {
	min-height: 100vh;
}

.bg-gradient {
	background: linear-gradient(to bottom, rgba(17, 57, 109, 0) 0%, rgba(17, 57, 109, 0) 20%, rgba(17, 57, 109, 0.1) 30%, rgba(17, 57, 109, 0.8) 70%, rgb(17, 57, 109) 100%) !important;
}

.alert strong {
	display: block;
}

.ug-color-success,
.theme-dark p.ug-color-success {
	color: green;
}

/* =======================================================================================

Color changer

======================================================================================= */

.body-gassales-red-stripes,
.body-gassales-red-write {
	background-color: var(--red);
}

.body-gassales-blue-stripes,
.body-gassales-blue-fur {
	background-color: var(--blue);
}

[data-gradient=body-gassales-pattern-1] #page {
	background-color: var(--red);
	background-image: url(../images/backgrounds/bg-33.webp);
	background-size: auto;
}

[data-gradient=body-gassales-pattern-2] #page {
	background-color: var(--blue);
	background-image: url(../images/backgrounds/bg-33.webp);
	background-size: auto;
}

[data-gradient=body-gassales-pattern-3] #page {
	background-image: url(../images/backgrounds/bg-02.webp);
}

[data-gradient=body-gassales-pattern-4] #page {
	background-image: url(../images/backgrounds/bg-01.webp);
}

/* =======================================================================================

Roster

======================================================================================= */

.ug-roster-card {
	border-radius: 0;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
	gap: 10px;
}

.ug-roster-card > div {
	flex: 0 0 calc(50% - 10px);
}

.ug-roster-card-vote {
	border-radius: 0;
	border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 30px;
}

/* =======================================================================================

Buttons

======================================================================================= */

.btn.bg-secondary {
	background-color: var(--blue) !important;
	color: #ffffff;
}

.btn.bg-third {
	background-color: green !important;
}