@import url('/css/keyframes.css');

:root
{
	--jbg-orange-rgb: 255, 145, 77;
	--jbg-wenge-rgb: 86, 73, 76;
	--jbg-mindaro-rgb: 212, 231, 158;
	--jbg-white-rgb: 247, 240, 212;
	--jbg-black-rgb: 49, 58, 70;
	--jbg-navbar-height : 5rem;
	--jbg-announcement-bar-height: 2.5rem;
	--jbg-right-toolbar-width: 250px;
	--jbg-right-toolbar-z-index : 1000;
	--jbg-right-tool-margin : 1rem;
	--midnight-sea: rgba(var(--jbg-black-rgb), 1);
	--midnight-sea-transparent: rgba(var(--jbg-black-rgb), .5);
	--byzantium: #702963;
	--dirty-white: #F7F0D4;
	--dirty-white-transparent: rgba(247, 240, 212, .5);
	--glow-green: #B2D732;
	--glow-green-rgb: 178, 215, 50;
	--glow-green-transparent: rgba(178, 215, 50, .7);
	--gold: #FDDC22;
	--gold-rgb: 253, 220, 34;
	--gold-transparent: rgba(253, 220, 34, .5);
	--jbg-border-radius-1: 1.375rem;
	--jbg-border-radius-2: .688rem;
	--jbg-button-border-radius : 1.1875rem;
	--jbg-controls-container-height: 58px;
}

::selection
{
	background-color: none;
	color: none;
	cursor: context-menu;
}

*
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body
{
	width: 100%;
	height: 100%;
}

body
{
	overflow-y: auto;
}

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

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

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

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

.jbg-white-bg
{
	background-color: rgb(var(--jbg-white-rgb)) !important; 
}

.jbg-black-bg
{
	background-color: rgb(var(--jbg-black-rgb)) !important;
}

.jbg-orange-bg
{
	background-color: rgb(var(--jbg-orange-rgb)) !important;
}

.jbg-wenge-bg
{
	background-color: rgb(var(--jbg-wenge-rgb)) !important;
}

.jbg-navbar,
.jbg-navbar-brand
{
	height: var(--jbg-navbar-height) !important;
}

.jbg-navbar-brand
{
	width: var(--jbg-navbar-height) !important;
	text-align: center;
	vertical-align: middle;
}

.jbg-brand-logo,
.jbg-navbar-collapse,
.jbg-navbar-nav,
.jbg-nav-item,
.jbg-nav-link
{
	height: 100% !important;
}

.jbg-nav-link
{
	line-height: var(--jbg-navbar-height) !important;
}

.jbg-main-menu
{
	position: relative !important;
}

.jbg-main-menu.active::after
{

	content: ' ';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: rgb(var(--bs-secondary-rgb));
}

.jbg-main-menu:not(.active)::after
{
	content: ' ';
	position: absolute;
	bottom: 0;
	left: 50%;
	right: auto;
	width: 0;
	height: 4px;
	background-color: rgb(var(--bs-secondary-rgb));
	transition: .5s all ease-in-out;
}

.jbg-main-menu:hover
{
	color: rgb(var(--bs-secondary-rgb)) !important;
}

.jbg-main-menu:hover::after
{
	left: 0;
	width: 100%;
	background-color: rgb(var(--bs-black-rgb));
}

.jbg-main
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: calc(100% - var(--jbg-navbar-height));
	margin-top: var(--jbg-navbar-height);
/*	padding-left: var(--jbg-right-toolbar-width);*/
	transition: .5s all ease-in-out;
}

.jbg-right-toolbar
{
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: rgb(var(--bs-white-rgb));
	width: var(--jbg-right-toolbar-width);
	height: calc(100% - var(--jbg-navbar-height));
	z-index: var(--jbg-right-toolbar-z-index);
	box-shadow: -10px 0 20px rgb(var(--jbg-black-rgb));
	overflow-y: auto;
	scrollbar-color: rgb(var(--jbg-orange-rgb)) rgb(var(--jbg-black-rgb));
  	scrollbar-width: thin;
  	transition: .5s all ease-in-out;
}

.jbg-announcements-bar
{
	position: relative;
	width: 100%;
	height: var(--jbg-announcement-bar-height);
	line-height: var(--jbg-announcement-bar-height);
	overflow: hidden;
	background-color: rgb(var(--bs-dark-rgb));
	color: rgb(var(--bs-info-rgb));
	border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

button.jbg-right-tool:disabled
{
	color: rgba(var(--bs-primary-rgb), .5);
}

.jbg-right-tool
{
	display: inline-block;
	width: calc(100% - (var(--jbg-right-tool-margin) * 2));
	height:  calc(var(--jbg-navbar-height) - (var(--jbg-right-tool-margin) * 2));
	margin: var(--jbg-right-tool-margin);
	color: rgb(var(--bs-primary-rgb));
	background-color: rgb(var(--bs-dark-rgb));
	border: 1px solid rgb(var(--bs-dark-rgb));
	border-radius: calc((var(--jbg-navbar-height) - (var(--jbg-right-tool-margin) * 2))/2);
}

.jbg-right-tool:not(:disabled):hover
{
	border: 1px solid rgb(var(--bs-primary-rgb));
}

.jbg-menu-content-section
{
	padding: 2rem;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	scrollbar-color: rgb(var(--jbg-orange-rgb)) rgb(var(--jbg-black-rgb));
  	scrollbar-width: thin;
}

.jbg-main > .jbg-right-toolbar ~ .jbg-menu-content-section
{
	width: calc(100% - var(--jbg-right-toolbar-width));
	margin-left: var(--jbg-right-toolbar-width);
}

/* JBG Checkbox style */
.jbg-checkbox-container-1
{
	display: inline-block;
	width: initial;
	height: 100%;
	padding: 0 1rem;
	vertical-align: middle;
}

.jbg-checkbox-1
{
	display: none;
}

.jbg-checkbox-toggle-1
{
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	background-color: rgb(var(--bs-dark-rgb));
	border: 2px solid rgb(var(--bs-secondary-rgb));
	border-radius: 12px;
}

.jbg-checkbox-toggle-1::before
{
	content: '';
	display: inline-block;
	position: absolute;
	top: 2px;
	left: 2px;
	background-color: rgb(var(--bs-secondary-rgb));
	border: 4px solid #111;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	z-index: 2;
	transition: left .5s ease-in-out;
}

.jbg-checkbox-1:checked ~ .jbg-checkbox-toggle-1::before
{
	left: calc(100% - 17px);
}

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

.jbg-tooltip-container > .jbg-tooltip
{
	display: none;
	position: absolute;
	top: 50%;
	left: calc(100% + 3px);
	transform: translateY(-50%);
	background-color: rgb(var(--bs-tertiary-bg-rgb));
	padding: 0 3px;
	border: 1px solid rgb(var(--bs-dark-rgb));
	border-radius: 3px;
	color: rgb(var(--bs-dark-rgb));
	z-index: 100;
}

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

/*for loading screen*/

.lds-ellipsis
{
	color : rgb(var(--jbg-orange-rgb));
}

.lds-ellipsis,
.lds-ellipsis div
{
  	box-sizing: border-box;
}
.lds-ellipsis
{
  	display: inline-block;
  	position: relative;
  	width: 80px;
  	height: 80px;
}
.lds-ellipsis div
{
  	position: absolute;
  	top: 33.33333px;
  	width: 13.33333px;
  	height: 13.33333px;
  	border-radius: 50%;
  	background: currentColor;
  	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1)
{
  	left: 8px;
  	animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2)
{
  	left: 8px;
  	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3)
{
  	left: 32px;
  	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4)
{
  	left: 56px;
  	animation: lds-ellipsis3 0.6s infinite;
}

@media screen and (max-width: 992px)
{
	.jbg-navbar,
	.jbg-navbar-collapse,
	.jbg-nav-item
	{
		height: auto !important;
	}

	.jbg-nav-link
	{
		padding: 0 1rem;
	}

	.jbg-controller-container,
	.jbg-main-contents
	{
		height: auto;
	}

	.jbg-navbar-toggler
	{
		width: var(--jbg-navbar-height);
		height: var(--jbg-navbar-height);
		border: none !important;
		border-radius: unset;
	}

	.jbg-navbar-toggler:focus
	{
		box-shadow: unset !important;
	}

	.jbg-right-toolbar
	{
		width: var(--jbg-navbar-height);
	}

	.jbg-main > .jbg-right-toolbar ~ .jbg-menu-content-section
	{
		width: calc(100% - var(--jbg-navbar-height));
		margin-left: var(--jbg-navbar-height);
	}

	.jbg-file-explorer-container
	{
		min-height: 500px;
	}

	.jbg-main-contents > div.jbg-list-container
	{
		width: 100%;
	}

	.jbg-main-contents > div.jbg-details-container
	{
		display: none;
	}
}