@import "./keyframes.css";

:root
{
	--jbg-atomic-tangerine: 255, 145, 77;
	--jbg-carolina-blue-rgb: 134, 187, 216;
	--jbg-dejavu-rgb: 46, 82, 131;
	--jbg-raisin-black-rgb: 51, 46, 60;
	--jbg-light-green-rgb: 113, 247, 159;
	--jbg-white-smoke: 242, 244, 243;
	--jbg-hookers-green: 90, 125, 124;
	--jbg-moonstone: 66, 158, 166;
	--jbg-container-width-1 : min(500px, 100%);
	--jbg-black-rgb : 26, 26, 26;
	--jbg-charcoal-rgb : 74, 74, 74;
	--jbg-gold-rgb : 239, 191, 4;
	--jbg-white-rgb : 242, 242, 242;
	--jbg-brown-rgb : 133, 106, 0;
	--jbg-lightbrown-rgb : 194, 176, 103;
	--jbg-navbar-height: 72px;
	--jbg-main-aside-1-width: 250px;
	--jbg-input-color : rgb(var(--jbg-black-rgb));
	--jbg-input-bg-color : rgb(var(--jbg-white-rgb));
	--jbg-input-border-color : rgb(var(--jbg-black-rgb));
	--jbg-input-focus-bg-color : rgb(var(--jbg-white-rgb));
	--jbg-input-focus-shadow-thickness : 0.15rem;
	--jbg-input-focus-shadow-color : transparent;
	--jbg-progress-bar-bg : rgb(var(--jbg-gold-rgb));
}

body
{
	overflow-x: hidden;
}

.jbg-login-background
{
	/*background-image: radial-gradient(rgb(var(--jbg-white-smoke)) 0%, rgb(var(--jbg-white-smoke)) 60%, rgb(var(--jbg-atomic-tangerine)) 100%);
	background-position: right top;
	background-size: 200% 200%;*/
}

.jbg-timeio-background
{
	position: fixed;
	background-image: url('/images/jbg-logo-transparent-bg.png');
	background-position: 20px calc(100% - 20px);
	background-repeat: no-repeat;
	background-size: 20rem 20rem;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.jbg-login-logo
{
	width: 20rem;
}

.jbg-navbar-logo
{
	display: inline-block;
	height: 2rem;
}

.jbg-main-aside-1
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--jbg-navbar-height);
	height: calc(100% - var(--jbg-navbar-height));
	background-color: rgba(var(--jbg-raisin-black-rgb), .9);
	z-index: 100;
}

.jbg-main-aside-1 .jbg-button-1
{
	display: block;
	width: 100%;
	height: var(--jbg-navbar-height);
	background-color: transparent;
	color: rgb(var(--jbg-carolina-blue-rgb));
	border: none;
	border-bottom: 2px solid rgb(var(--jbg-raisin-black-rgb));
	text-align: center;
	padding: 0 1rem;
}

.jbg-aside-button-label
{
	display: none;
}

.jbg-main-aside-1 .jbg-button-1:disabled
{
	color: rgb(var(--jbg-raisin-black-rgb));
}

.jbg-main-aside-1 .jbg-button-1:hover:not(:disabled)
{
	background-color: rgb(var(--jbg-hookers-green));
	color: rgb(var(--jbg-light-green-rgb));
	border-bottom: 2px solid rgb(var(--jbg-hookers-green));
}

.jbg-card-1
{
	padding: 0;
	background-color: rgba(var(--bs-dark-rgb), .9);
	border: 1px solid rgb(var(--jbg-lightbrown-rgb));
}

.jbg-card-1 .card-header
{
	border-bottom: 1px solid rgb(var(--jbg-lightbrown-rgb));
	color: rgb(var(--jbg-lightbrown-rgb));
}

.jbg-main-aside-1 ~ .jbg-main-section-content-1
{
	width: calc(100% - var(--jbg-navbar-height));
}

.jbg-main-section-content-1
{
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 3rem;
	width: 100%;
	height: calc(100% - var(--jbg-navbar-height));
	overflow-y: auto;
}

[jbg-breadcrumb-item]
{
	color: rgb(var(--jbg-light-green-rgb));
	text-underline-offset: 5px;
}

.jbg-tooltip-container
{
	position: relative;
}

.jbg-tooltip-container > .jbg-tooltip
{
	display: none;
	position: absolute;
	left: 50%;
	bottom: calc(100% + 5px);
	transform: translateX(-50%);
	border-radius: 3px;
	border: none;
	padding: 6px;
	background-color: #fff;
	color: rgb(var(--jbg-black-rgb));
	opacity: 0;
	transition: .5s opacity;
	white-space: nowrap;
	z-index: 100;
}

.jbg-tooltip-container:hover > .jbg-tooltip
{
	display: inline-block;
	opacity: 1;
}

.jbg-background-color-transparent-black-9
{
	background-color: rgba(var(--jbg-charcoal-rgb), .9);
}

/*End of new style*/

[jbg-input="1"]
{
	--jbg-input-color : rgb(var(--jbg-gold-rgb));
	--jbg-input-bg-color : transparent;
	--jbg-input-border-color : rgb(var(--jbg-gold-rgb));
	--jbg-input-focus-bg-color : rgb(var(--jbg-white-rgb));
	--jbg-input-focus-shadow-thickness : 0.15rem;
	--jbg-input-focus-shadow-color : rgb(var(--jbg-gold-rgb));	
}

.jbg-menu-content-container-1
{
	height: 100%;
	display: flex;
	justify-content: space-between;
	padding: 1rem;
}

.jbg-menu-content-container-1 > .jbg-control-panel,
.jbg-menu-content-container-1 > .jbg-file-explorer
{
	border: 1px solid rgb(var(--jbg-gold-rgb));
	border-radius: 6px;
	background-color: rgba(var(--jbg-black-rgb), .8);
}

.loader {
  	width: 10px;
  	height: 10px;
  	border-radius: 50%;
  	display: block;
  	margin:15px auto;
  	position: relative;
  	color: rgb(var(--jbg-gold-rgb));
  	left: -100px;
  	box-sizing: border-box;
  	animation: shadowRolling 2s linear infinite;
}


[step-indicator-container=oaf]
{
	padding: 20px;
}

.jbg-text-1
{
	color : rgba(var(--jbg-gold-rgb), 1.0);
}

.jbg-text-2
{
	color : rgba(var(--jbg-lightbrown-rgb), 1.0);
}

.jbg-text-info
{
	color: rgb(var(--jbg-dejavu-rgb)) !important;
}

.jbg-main-0,
.jbg-main-1
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.jbg-main-3
{
	position: relative;
	padding-top: var(--jbg-navbar-height);
	width: 100%;
	height: 100%;
}

.jbg-main-0,
.jbg-main-3,
.jbg-bg-0-9
{	
	background-color: rgb(var(--jbg-white-smoke));
}

.jbg-main-1
{
	background-image: url('/images/accounting_bg1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.jbg-container-1
{
	background-image: inherit;
	background-repeat: no-repeat;
	background-position: center center;
	box-shadow: 0 0 5px var(--bs-black);
	position: relative;
	width: var(--jbg-container-width-1);
	height: auto;
	z-index: 0;
}

.jbg-container-1::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: inherit;
	background-repeat: no-repeat;
	background-position: center center;
	filter: blur(8px);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.jbg-container-2
{
	border: 1px outset rgb(var(--jbg-gold-rgb));
	width: min(calc(100% - 30px), 500px);
	height: auto;
}

.jbg-form-1
{
	background-color: rgba(90, 90, 90, .5);
	width: var(--jbg-container-width-1);
	height: 100%;
}

[jbg-main-app]
{
	position: relative;
	width: 100%;
	height: 100%;
}

[jbg-display-container-expand]
{
	transition: all .5s ease-in-out;
}

[jbg-display-container-expand = "0"]
{
	width: var(--jbg-container-width-1);
}

[jbg-display-container-expand = "1"]
{
	width: calc(var(--jbg-container-width-1) * 2);
}

[jbg-display-1]
{
	position: absolute;
	top: 0;
	right: 0;
	width: 500px;
	height: 100%;
	z-index: -1;
	transition: all .5s ease-in-out;
}

[jbg-display-1-transition-delay = "p5"]
{
	transition-delay: .5s;
}

[jbg-display-1 = "0"]
{
	opacity: 0;
}

[jbg-display-1 = "1"]
{
	opacity: 1;
}

/*JBG Elements Animation*/
.jbg-fade-in
{
	animation-name: fade-in-1;
	animation-duration: .5s;
	animation-fill-mode: both;
}


[jbg-login-container-animation='1']
{
	animation-name: wide-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
}

[jbg-login-form-animation='1']
{
	animation-name: fade-in-1;
	animation-duration: .5s;
	animation-delay: .5s;
	animation-fill-mode: both;
}

[jbg-login-container-animation='0']
{
	animation-name: shrink-1;
	animation-duration: .5s;
	animation-delay: .5s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}

[jbg-login-form-animation='0']
{
	animation-name: fade-out-1;
	animation-duration: .5s;
	animation-fill-mode: both;
}

[jbg-navbar-animation]
{
	animation-name: navbar-down;
	animation-duration: .5s;
	animation-timing-function: ease-out;
}

@media (min-width: 992px)
{
	.jbg-main-aside-1
	{
		position: absolute;
		left: 0;
		bottom: 0;
		width: var(--jbg-main-aside-1-width);
		height: calc(100% - var(--jbg-navbar-height));
		background-color: rgba(var(--jbg-raisin-black-rgb), .9);
		z-index: 100;
	}

	.jbg-main-aside-1 .jbg-button-1
	{
		text-align: left;
	}

	.jbg-aside-button-label
	{
		display: inline;
	}

	.jbg-main-aside-1 ~ .jbg-main-section-content-1
	{
		width: calc(100% - var(--jbg-main-aside-1-width));
	}	
}