:root {
	--gold: #cfa75c;
	--primary: #0bc6e3;
	--dark-blue: #010a13;
	--middle-blue: #101722;
	--deep-blue: rgba(22,34,57,1);
	--rust: #463714;
	--lol-dark-text: #1E282D;
	--lol-dark: #938f82;
	--lol-regular: #cdbe91;
	--lol-light: #f0e6d2;
}

body {
	cursor: url('/public/images/league_cursor.cur'), auto;
}

.hovered {
	cursor: url('/public/images/league_cursor_hover.cur'), auto !important;
}

@font-face {
	font-family: beaufort;
	src: url(../font/beaufort.ttf);
}

@font-face
{
	font-family: ptsans;
	src: url(../font/ptsans.ttf);
}

@font-face {
	font-family: montserrat;
	src: url(../font/montserrat.ttf);
}

@font-face
{
	font-family: poppins;
	src: url(../font/poppins.ttf);
}

@font-face
{
	font-family: noto;
	src: url(../font/noto.otf);
}

@media (max-width: 768px) {
	.mt-mobile-5 {
	  	margin-top: 5em !important; /* Defina a margem superior desejada para dispositivos móveis aqui */
	}

	.mt-mobile-20 {
		margin-top: 20em !important; /* Defina a margem superior desejada para dispositivos móveis aqui */
  }
}

.dark-mode {
	background-color: var(--dark-blue) !important;
}

img {
	-webkit-user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.title
{
	font-family: poppins;
	text-transform: uppercase;
}

.btn-polygon-gold {
	transition: 0.5s;
	background-color: #cfa75c;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	padding: 9px 12px 9px 12px;
	display: inline-block;
	outline: none;
	border:none;
	cursor: pointer;
	clip-path: 
	polygon(
	0% 10px,                 /* top left */
	10px 0%,                 /* top left */
	100% 0%,                 /* top right */
	100% 20px,               /* top right */
	100% calc(100% - 10px),  /* bottom right */
	calc(100% - 10px) 100%,  /* bottom right */
	20px 100%,               /* bottom left */
	0 100%                    /* bottom left */
	);
		width: fit-content !important;
			height: fit-content !important;
}

.btn-polygon-gold:hover{
	clip-path: 
	polygon(
	0% 0px,                 /* top left */
	10px 0%,                 /* top left */
	100% 0%,                 /* top right */
	100% 20px,               /* top right */
	100% calc(100% - 0px),  /* bottom right */
	calc(100% - 10px) 100%,  /* bottom right */
	20px 100%,               /* bottom left */
	0 100%                    /* bottom left */
	);
	background-color: rgba(207, 167, 92, 0.8);
}

.btn-polygon-gold:disabled {
	background-color: rgba(207, 167, 92, 0.8);
	cursor: not-allowed !important;
}

.btn-polygon-primary {
	transition: 0.5s;
	background-color: #0bc6e3;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	padding: 9px 12px 9px 12px;
	display: inline-block;
	outline: none;
	border:none;
	cursor: pointer;
	clip-path: 
	polygon(
	0% 10px,                 /* top left */
	10px 0%,                 /* top left */
	100% 0%,                 /* top right */
	100% 20px,               /* top right */
	100% calc(100% - 10px),  /* bottom right */
	calc(100% - 10px) 100%,  /* bottom right */
	20px 100%,               /* bottom left */
	0 100%                    /* bottom left */
	);
		width: fit-content !important;
			height: fit-content !important;
}

.btn-polygon-primary:hover{
	clip-path: 
	polygon(
	0% 0px,                 /* top left */
	10px 0%,                 /* top left */
	100% 0%,                 /* top right */
	100% 20px,               /* top right */
	100% calc(100% - 0px),  /* bottom right */
	calc(100% - 10px) 100%,  /* bottom right */
	20px 100%,               /* bottom left */
	0 100%                    /* bottom left */
	);
	background-color: rgba(11, 198, 227, 0.8);
}

.btn-polygon-red {
	transition: 0.5s;
	background-color: #a23333;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	padding: 9px 12px 9px 12px;
	display: inline-block;
	outline: none;
	border:none;
	cursor: pointer;
	clip-path: 
	polygon(
	0% 10px,                 /* top left */
	10px 0%,                 /* top left */
	100% 0%,                 /* top right */
	100% 20px,               /* top right */
	100% calc(100% - 10px),  /* bottom right */
	calc(100% - 10px) 100%,  /* bottom right */
	20px 100%,               /* bottom left */
	0 100%                    /* bottom left */
	);
		width: fit-content !important;
			height: fit-content !important;
}

.btn-polygon-red:hover{
	clip-path: 
	polygon(
	0% 0px,                 /* top left */
	10px 0%,                 /* top left */
	100% 0%,                 /* top right */
	100% 20px,               /* top right */
	100% calc(100% - 0px),  /* bottom right */
	calc(100% - 10px) 100%,  /* bottom right */
	20px 100%,               /* bottom left */
	0 100%                    /* bottom left */
	);
	background-color: rgba(162, 51, 51, 0.8);
}


/*BUTTONS RETANGULARES*/

.btn-recta-primary {
	background-color: #0bc6e3;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	padding: 9px 12px 9px 12px;
	outline: none;
	border:none;
	cursor: pointer;
	width: fit-content !important;
		height: fit-content !important;
}

.btn-recta-primary:hover {
	transition: 1s;
	filter: brightness(85%);
}	

.btn-recta-gold {
	background-color: #cfa75c;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	padding: 9px 12px 9px 12px;
	outline: none;
	border:none;
	cursor: pointer;
	width: fit-content !important;
		height: fit-content !important;
}

.btn-recta-gold:hover {
	transition: 1s;
	filter: brightness(85%);
}

.btn-recta-red {
	background-color: #a23333;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	padding: 9px 12px 9px 12px;
	outline: none;
	border:none;
	cursor: pointer;
	width: fit-content !important;
	height: fit-content !important;
}

.btn-recta-gold:hover {
	transition: 1s;
	filter: brightness(85%);
}


/* RETANGULARES FIM */

/* BORDAS DIVS */

.cut-border-gold {
	position: relative;
	padding: 1.5rem 1.5rem 1.5rem 5rem !important;
}

.cut-border-gold:before {
	content: "";
	position: absolute;
	inset: 0;
	background: #cfa75c;
	clip-path: polygon(0 80px,80px 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%,0 80px,5px  calc(80px + 2.07px),5px calc(100% - 5px),calc(100% - 80px - 2.07px) calc(100% - 5px),calc(100% - 5px) calc(100% - 80px - 2.07px),calc(100% - 5px) 5px,calc(80px + 2.07px) 5px,5px calc(80px + 2.07px));
}

.cut-border-blue {
	position: relative;
	padding: 1rem!important;
}

.cut-border-blue:before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(6, 169, 198, 1);
	clip-path: polygon(0 80px,80px 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%,0 80px,5px  calc(80px + 2.07px),5px calc(100% - 5px),calc(100% - 80px - 2.07px) calc(100% - 5px),calc(100% - 5px) calc(100% - 80px - 2.07px),calc(100% - 5px) 5px,calc(80px + 2.07px) 5px,5px calc(80px + 2.07px));
}
/* FIM BORDAS DIVS */

a {
	cursor: pointer !important;
	text-decoration: none !important;
}

em
{
	color: #cfa75c;
	font-style: normal;
}

.montserrat
{
	font-family: montserrat;
}

.beaufort
{
	font-family: beaufort !important;
	font-weight: 500 !important;
}

.ptsans {
	font-family: ptsans !important;
}

.noto {
	font-family: noto !important;
}

.poppins {
	font-family: poppins !important;
}

.font-upper-bold
{
	text-transform: uppercase !important;
	font-weight: bold !important;
	letter-spacing: 1px;
	color: white !important;
}

.font-size-16 {
	font-size: 1.6rem !important;
}

.font-size-14 {
	font-size: 1.4rem !important;
}

.font-size-12 {
	font-size: 1.2rem !important;
}

.font-size-10 {
	font-size: 1rem !important;
}

.font-size-8 {
	font-size: 0.8rem !important;
}

.font-size-6 {
	font-size: 0.6rem !important;
}

.mt-30 {
	margin-top: 3rem !important;
}

.mt-40 {
	margin-top: 4rem !important;
}

.mt-70 {
	margin-top: 7rem !important;
}

.mb-70
{
	margin-bottom: 7rem !important;
}

.p-10 {
	padding: 6rem !important;
}

.pt-40 {
	padding-top: 4rem !important;
}

.text-lol {
	color: var(--lol-regular) !important;
}

.text-lol-light {
	color: var(--lol-light) !important;
}

.text-lol-dark {
	color: var(--lol-dark) !important;
}

.text-lol-gold {
	color: var(--gold) !important;
}

.text-lol-blue {
	color: var(--primary) !important;
}

.text-black {
	color: black !important;
}

.text-link {
	color: #1890ff !important;
	text-decoration: underline !important;
}

.material-icons, .material-icons-outlined {
	margin-top: 0.1em;
}

hr {
	background-color: rgba(207, 167, 92, 0.7) !important;
	height: 1px; 
	border: 0;
}

.separator {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 0.5em;
	color: rgba(207, 167, 92, 0.7);
	font-style: italic;
	font-weight: bold;
}

.separator::before,
.separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid rgba(207, 167, 92, 0.7);
}

.separator:not(:empty)::before {
	margin-right: .25em;
}

.separator:not(:empty)::after {
	margin-left: .25em;
}

.border-input:focus {
	border: 1px solid #cfa75c !important;
	border-radius: 0px !important;
	outline: none !important;
	box-shadow: none !important;
	transition: 0.5s all;
}
.pointer {
	cursor: pointer !important;
}

.modal {
	border: none !important;
}

.alert-danger {
	border-radius: 0px !important;
	background-color: #a23333 !important;
	font-size: 1.2rem;
	color: white !important;
}

.alert-success {
	border-radius: 0px !important;
	background-color: #13ac64 !important;
	font-size: 1.2rem;
	color: white !important;
}

.alert-heading {
	font-family: poppins;
}

.bootstrap-select>.dropdown-toggle {
	background-color: rgb(245, 245, 245) !important;
}

.dropdown-item.active {
	background-color: rgb(245, 245, 245) !important;
}

.bootstrap-select .dropdown-menu li a {
	color: black !important;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 25px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	-webkit-transition: .4s;
	transition: .4s;
	border: 2px solid #cfa75c;
}

.slider:before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #cfa75c;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

[data-toggle="tooltip"]:not([data-placement])::after, [data-toggle="tooltip"]::after {
	background-color: var(--dark-blue) !important;
	font-family: beaufort !important;
	border: 2px solid var(--rust) !important;
	border-radius: 0px !important;
	color: var(--lol-dark) !important;
	min-width: fit-content;
	max-width: 400px;
}

[data-toggle="tooltip"]:not([data-placement])::before, [data-toggle="tooltip"]::before {
	border: 2px solid var(--rust) !important;
	background-color: var(--dark-blue) !important;
}

.underline-gold::after {
	content: "";
	left: 0;
	margin-top: 2em;
	position: absolute;
	width: 40px;
	height: 2px;
	background: #cfa75c;
}

.password-toggle {
	vertical-align: text-bottom;
}

.span-tier {
	background-color: #c7c2ae;
	border-radius: 3px;
	color: black;
	padding: 0px 4px 0px 4px !important;
	font-family: beaufort !important;
	text-transform: uppercase !important;
}

.row-box {
	background-color: rgba(22,34,57, 0.4) !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: rgba(0,0,0,.125) !important;
}

.navbar-nav > .nav-item > .nav-link {
	color: white !important;
}

.popover{
    max-width: 100% !important; /* Max Width of the popover (depending on the container!) */
}