@import url('https://fonts.googleapis.com/css2?family=Armata&display=swap');
input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}
html{
	font-size: 13px;
	overflow-x: hidden;
}

body{
	font-family: 'Armata', sans-serif; !important;
	font-size: 1rem;
	overflow-x: hidden;
}

@keyframes spin{
  0% {
      transform: rotate(0);
  }
  to {
      transform: rotate(1turn);
  }
}
#spinner-layout{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffffd1;
	border-radius: 5px;
}

#login-form, 
#exit-form{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0px 27px 44px -45px #000;
}
#exit-form{
	border: none;
	box-shadow: none;
}

#spinner-layout {
  transition: opacity .5s ease-out;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

#spinner-layout.active {
  opacity: 1;
  height: 100%;
}

.alert i.bi{
	font-size: 2rem;
	vertical-align: middle;
}

@media(min-width: 969px){
	#account-menu {
	    transition: all .3s ease-in-out;
	    transform: translateX(80px);
	    cursor: pointer;
	    border-left: 1px solid #c8c9ca;

	}
	#account-menu:hover {
	    transform: translateX(0px);
	    transition-delay: 250ms;
	}
}