@charset "UTF-8";
@import '../libs/bulma/css/bulma.min.css';
@import '../fonts/fontawesome-free-6.7.2-web/css/all.min.css';

@font-face {
  font-family: 'Nunito';
  src: url('/public/fonts/Nunito/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

.is-link {
    cursor: pointer;
}

.navbar-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.navbar-center input {
    width: 600px !important;
    padding: 10px;
}

.swal2-shown {
	overflow: unset !important;
	padding-right: 0px !important;
}

.image-container {
    height: 600px;               /* Fixed height */
    width: 100%;                 /* Fill available width */
    display: flex;
    align-items: center;         /* Vertical center */
    justify-content: center;     /* Horizontal center */
    overflow: hidden;
}

.image-container img {
    max-height: 100%;            /* Limit height to container */
    width: auto;                 /* Maintain aspect ratio */
    height: auto;
    display: block;
}

/* Hide scrollbars */
/*body {
	overflow: hidden;
	overflow-y: scroll;
	overflow-x: hidden;
}
body::-webkit-scrollbar {
	display: none;
}
html::-webkit-scrollbar {
	display: none;
}*/

#content{
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	min-height: 100vh;
	min-height: calc(100vh - 2.5em);
}

.navbar-link, .is-selected {
/*	color: #9C9C9C;*/
	background-color:rgb(192 192 192 / 0.2) !important;
}

.htmx-indicator{
	display:none;
	z-index: -999;
}
.htmx-request .htmx-indicator{
	display:inline;
	z-index: 999;
}
.htmx-request.htmx-indicator{
	display:inline;
	z-index: 999;
}

#indicatorLoader {
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

  --spinnerHeight: 12px;
  --spinnerWidth: 64px;
}

#indicatorLoader .spinner {
	top: calc(50% - var(--spinnerHeight)) !important;
}

#indicatorCancelRequestBtn {
	--messageWidth: 300px;
	word-wrap: break-word;
	text-align: center;
	z-index: 999;
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	top: calc(50% + 50px);
	left: calc(50% - (var(--messageWidth) / 2));
}

#indicatorCancelRequestBtn button {
	color: #aa0000;
}

#indicatorCancelRequestBtn button:hover {
	color: #ff0000;
}

.spinner {
  width: var(--spinnerWidth);
  height: var(--spinnerHeight);
  background:
	radial-gradient(circle 6px, #FFF 100%, transparent 0),
	radial-gradient(circle 6px, #FFF 100%, transparent 0);
  background-size:12px 12px;
  background-position: left center , right center ;
  background-repeat: no-repeat;
  position: relative;
}
.spinner:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF3D00;
  inset:0;
  margin: auto;
  animation: mvX 0.6s, mvY 0.3s;
  animation-timing-function:cubic-bezier(.5,-300,.5, 300);
  animation-iteration-count:infinite;
}

@keyframes mvX {
	100% { left: 0.85px }
}
@keyframes mvY {
	100% { top : 0.5px }
}

@font-face {
	font-family: "Paskowy";
		src: url('../fonts/Paskowy.ttf');
}
@font-face {
	font-family: "dogicapixel";
		src: url('../fonts/dogicapixel.ttf');
}
@font-face {
	font-family: "PressStart2P";
		src: url('../fonts/PressStart2P.ttf');
}
@font-face {
	font-family: "dogica";
		src: url('../fonts/dogica.ttf');
}
.pixelFont {
	font-family: "dogicapixel";
	font-size: 12px;
	font-weight: 200;
}

#toggleColorScheme {
	pointer-events: all;
	width: 20px;
}