@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
	padding: 0;
	padding-top: 56px;
}

.bg-body-tertiary {
    --bs-bg-opacity: 1;
    /*background-color: #090419 !important;*/
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.navbar-brand {
}

h1, h2, h3, h4, h5, h6, h7 {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
}

a.nav-link {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
}

ol.breadcrumb a {
   text-underline-offset: 0.25em !important;
}

.card-header, .card-footer {
	font-family: "Roboto", sans-serif;
  	padding: 1rem !important;
}

a.card.bg-body-tertiary:hover {
	border-color: #ffffff99;
	background: linear-gradient(45deg, #ffffff0f, transparent);
}

.w-25px {
	width: 25px;
}

.w-50px {
	width: 50px;
}

.w-70px {
	width: 70px;
}

.w-100px {
	width: 100px !important;
}

.w-150px {
	width: 150px !important;
}

.w-200px {
	width: 200px !important;
}

.w-250px {
	width: 250px !important;
}

.w-300px {
	width: 300px !important;
}

.w-350px {
	width: 350px !important;
}

.w-400px {
	width: 400px !important;
}

.h-38 {
	height: 38px;
}

.mh-38 {
	min-height: 38px;
}

.btn-link {
	text-underline-offset: 0.25em !important;
}

.telegram-bg {
	background-color: #0088cc;
}
.discord-bg {
	background-color: #748adb;
}

.community-bg {
	background-position: center;
	background-size: cover;
	background-image: url(/<%= community.settings?.background %>);
	aspect-ratio: 1680 / 435;
}

.content {
    box-shadow: inset 20px 0 20px -30px black;
}

.img-block {
	max-width: 100%;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
}
.img-block > a {
	position: absolute;
	right: -5px;
	top: -5px;
	z-index: 1;
	width: 20px;
	height: 20px;
	line-height: 19px;
	padding: 0;
	box-shadow: 0px 0px 10px #00000091;
	border-radius: 50%;
	border: 1px solid #961421;
	color: #ffdede;
	font-size: 14px;
	text-align: center;
}
.img-block:hover:after {
    border-radius: 6px;
    content: 'Select';
    position: absolute;
    background: #000000aa;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 100px;
    text-align: center;
}

.text-telegram {
	color: #0088cc;
}

.bg-telegram {
	background-color: #0088cc;
}

.btn-telegram {
	--bs-btn-color: #fff;
	--bs-btn-bg: #0088cc;
	--bs-btn-border-color: #0088cc;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #067db8;
	--bs-btn-hover-border-color: #067db8;
	--bs-btn-focus-shadow-rgb: 255, 0, 254;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0772a7;
	--bs-btn-active-border-color: #0772a7;
	--bs-btn-disabled-bg: #0088cc;
	--bs-btn-disabled-border-color: #0088cc;
}

.btn-outline-telegram {
	--bs-btn-color: #0088cc;
	--bs-btn-border-color: #0088cc;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #0088cc;
	--bs-btn-hover-border-color: #0088cc;
	--bs-btn-focus-shadow-rgb: 255, 0, 254;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0772a7;
	--bs-btn-active-border-color: #0772a7;
	--bs-btn-disabled-color: #0088cc;
	--bs-btn-disabled-border-color: #0088cc;
}

.text-blurple {
	color: #5865F2;
}

.bg-blurple {
	background-color: #5865F2;
}

.btn-blurple {
	--bs-btn-color: #fff;
	--bs-btn-bg: #5865F2;
	--bs-btn-border-color: #5865F2;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #4752c4;
	--bs-btn-hover-border-color: #4752c4;
	--bs-btn-focus-shadow-rgb: 88, 101, 242;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #3c45a5;
	--bs-btn-active-border-color: #3c45a5;
	--bs-btn-disabled-bg: #5865F2;
	--bs-btn-disabled-border-color: #5865F2;
}

.btn-outline-blurple {
	--bs-btn-color: #5865F2;
	--bs-btn-border-color: #5865F2;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #5865F2;
	--bs-btn-hover-border-color: #5865F2;
	--bs-btn-focus-shadow-rgb: 88, 101, 242;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #3c45a5;
	--bs-btn-active-border-color: #3c45a5;
	--bs-btn-disabled-color: #5865F2;
	--bs-btn-disabled-border-color: #5865F2;
}