/*** Copyright 2016 Johannes Kessler 2016 Johannes Kessler
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@font-face {
	font-family: 'FreeSansMinimal';
	src: url('../../../resources/font/FreeSansMinimal.otf') format('opentype');
}

body {
	font-family: Open Sans Light, DejaVu Sans, sans-serif;
}

.row {
	margin: 0px;
	padding: 0px;
	margin-bottom: 16px;
	width: 100% !important;
}



.CodeMirror.readonly .CodeMirror-scroll {
	background-color: #DFDFDF;
}


#input {
	/*padding-top: 10px;*/
}

.history-code {
	white-space: pre;
}

.ct {
	text-align: center;
}

@-webkit-keyframes wiggle {
	from {
		-webkit-transform: rotateZ(0deg);
		-webkit-transform-origin: 0% 0%;
	}
	50% {
		-webkit-transform: rotateZ(-1deg);
		-webkit-transform-origin: 0% 0%;
	}
	to {
		-webkit-transform: rotateZ(1deg);
		-webkit-transform-origin: 0% 0%;
	}
}



#execution-error div {
	-webkit-animation-name: wiggle;
	-webkit-animation-duration: .2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
}


#groups-tmp:empty {
	display: none;

	transition: display 0.5s;
	-webkit-transition: display 0.5s;
	-moz-transition: display 0.5s;
}

/*ul#groups {
	padding-left: 0em;
}

ul#groups li {
	list-style-type: none;
}

ul#groups > li {
	padding-bottom: 4px;
}

#groups ul {
	padding-left: 30px;
}*/

#execution-error {
	padding-bottom: 1em;
}

.hint-keyword {
	color: #708;
}

.hint-table, .hint-column {
	color: #000;
}

.cm-math, .math, .formula {
	font-family: FreeSansMinimal;
}

.highlight {
	padding: 9px 14px;
	margin-bottom: 14px;
	background-color: #f7f7f9;
	border: 1px solid #e1e1e8;
	border-radius: 4px;
}

#lang-tabs {
	border-bottom-style: none;
}

body.lang-ra *.lang-sql:not(.lang-ra), body.lang-ra *.lang-trc:not(.lang-ra),
body.lang-sql *.lang-ra:not(.lang-sql), body.lang-sql *.lang-trc:not(.lang-sql) {
	display: none;
}

.replace:not(.btn), .replace-all:not(.btn) {
	cursor: pointer;
}

.replace:not(.btn):hover, .replace-all:not(.btn):hover {
	border-bottom: silver dashed 1px;
}

.popover {
	max-width: 450px;
}

#groups-selector2 {
	background-color: transparent;
}

/*ul.table-list li {
	list-style-type: none;
	display: inline-block;
	margin-right: 16px;
	margin-bottom: 16px;
}*/


@media print {
	.navbar button, .navbar .navbar-collapse, .nav, #result-pag, #input-buttons, .toolbar, #groups-container {
		display: none !important;
	}

	#workspace {
		border-style: none;
	}

	.navbar-brand {
		margin-bottom: 32px;
		font-size: 1.2em
	}

	.tree-container {
		float: none;
	}

	.result-pag {
		display: none;
	}
}



html, body, #root, .view-max {
	width: 100%;
	height: 100%;
	margin: 0px !important;
	padding: 0px !important;
	overflow: hidden;
}

.view-min {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
}


$NAV_BAR_HEIGHT: 64px;

.navbar {
	height: $NAV_BAR_HEIGHT;
	margin: 0px;
	padding: 0px;
	-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
	background-color: rgb(238, 238, 238) !important;
}

.desktopNavbar {
	padding-left: 64px;
	padding-right: 64px;
}

.mobileNavbar {
	> .dropdown > a:focus{
		outline: none;
	}
	> .dropdown > a {
		padding-right: 32px;
	}
}

.navItemSpace {
	padding-right: 16px;
	padding-left: 16px;
}

.view-content{
	width: 100% !important;
	height: calc(100% - #{$NAV_BAR_HEIGHT});
	margin: 0px;
	padding: 32px 0px 0px 0px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.calculator {
	overflow-y: auto;
	height: calc(100% - #{$NAV_BAR_HEIGHT});
}

.download-button{
	margin-right: 16px;
}

@media only screen and (max-width: 991px) {
	/*.navbar {
		display: none;
	}*/
	/*.view-max{
		height: 100% !important;
	}*/
	.desktopNavbar {
		display: none;
	}
	.mobileNavbar {
		display: flex;
	}
	.groups-container{
		display: none !important;
	}
	.calculator{
		height: 100%;
	}
	
	$NAV_TABS_HEIGHT: 42px;
	$INPUT_BUTTONS_ROW: 55px;
	
	
	
	.calculator-container{
		height: calc(100% - #{$NAV_TABS_HEIGHT});
		margin: 0px !important;
		padding: 0px !important;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	
	
	.tab-content, .tab-pane, .editor-base{
		height: 100% !important;
		margin: 0px !important;
		padding: 0px !important;
	}
	
	.tab-pane > div {
		height: 100%;
	}
	
	.input-buttons{
		height: INPUT_BUTTONS_ROW;
		margin: 5px;
	}
	
	.editor-base {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.CodeMirror{
		//height: calc(100% - #{$NAV_TABS_HEIGHT} - 82px - 43px) !important;
		flex-grow: 1;
		margin: 0px !important;
		padding: 0px !important;
	}
	
	.codemirror-toolbar{

	}

	.exec-errors{
		display: none;
	}
	
	.exec-result{
		display: none;
	}
	
	
	.hideOnSM{
		display: none !important;
	}
	
	
	.modal {
		padding: 0 !important; // override inline padding-right added from js
	}
	.modal .modal-dialog {
		width: calc(100% - 32px);
		height: calc(100% - 32px);
		max-width: none;
		margin: 16px 16px 16px 16px;
	}
	.modal .modal-content {
		height: 100%;
		border: 0;
		border-radius: 0;
	}
	.modal .modal-body {
	overflow-y: auto;
	}
	
	.scroll-x {
		text-align: center;
	}
	
}


@media only screen and (min-width: 992px) {
	
	.showOnSM{
		display: none !important;
	}
	
	.calculator{
		padding-top: 32px;
	}
	
	.modal .modal-dialog {
		min-width: 950px;
	}
	
	.desktopNavbar {
		display: flex;
	}
	.mobileNavbar {
		display: none;
	}
	
	.scroll-x {
		display: inline;
	}
	
	table.table-inline {
		width: auto !important;
		display: inline-block;
		vertical-align: middle;
		margin-right: 42px;
	}

}

@media only screen and (min-width: 1200px) {
	.modal .modal-dialog {
		min-width: 1100px;
	}

}

.toolbar__popover {
	min-width: 30px;
	text-align: center;
	margin: 0px !important;
	>span {
		min-width: 28px;
	}
}

.dropdownToolbarButton > .dropdown > button {
	all:unset;
	min-width: 30px;
}

.fancyToastWarning{
	background-color: rgb(255, 157, 0.5);
	backdrop-filter: blur(5px);
}

.fancyToastError{
	background-color: rgba(255, 0, 0, 0.5);
	backdrop-filter: blur(5px);
}

h4 {
	margin-top: 0px !important;
}

.fullWidthBtn {
	width: 100%;
	margin-top: 8px;
}

.maxSize{
	width: 100%;
	height: 100%;
}


.sk-fading-circle {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: relative;
  }
  
.sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
			animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
			transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
			transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
			transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
		-ms-transform: rotate(120deg);
			transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
		-ms-transform: rotate(150deg);
			transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
			transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
		-ms-transform: rotate(210deg);
			transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
		-ms-transform: rotate(240deg);
			transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
			transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
		-ms-transform: rotate(300deg);
			transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
		-ms-transform: rotate(330deg);
			transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
			animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
			animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
			animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
			animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
			animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
			animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
			animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
			animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; } 
}


.flexSpan{
	flex-grow: 1;
}

.input-buttons {
	margin: 8px 16px 8px 16px;
}

.exec-errors{
	margin: 16px;
	padding: 0px;
	>.alert{
		margin: 0px;
	}
}

.scroll-x {
	overflow-x: auto;
}

.resultCountLabel {
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	margin-top: 16px;
}

.result {
	margin-top: 32px;
}

.theme-mode-toggle {
	outline: none;
	background: transparent;
	border: none;
	margin: auto;
	
	svg {
			color: rgba(0, 0, 0, 0.5);
	}
	
	
	
}
.theme-mode-toggle:focus {
	outline: none;
}


.theme-mode-wrapper {
	display: flex;
	height: 100%;
}


/** transition styles when switching to light mode **/
body {
	transition: all .2s linear;
}
.CodeMirror.readonly .CodeMirror-scroll {
	transition: all .2s linear;
}
.navbar, .jumbotron, .example,.modal-content {
	transition: all .2s linear;
}
.table {
	transition: all .2s linear;
}
.view-content, .calculator, .view-max {
	transition: all .2s linear;
}
.nav-link, .navbar-brand, .theme-mode-toggle {
	transition: all .2s linear;
}
.nav-link:hover, .theme-mode-toggle:hover {
	transition: all .2s linear;
}
.theme-mode-toggle {
	transition: all .2s linear;
	svg {
		transition: all .2s linear;
	}
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	transition: all .2s linear;
}
.toolbar {
	transition: all .2s linear;
}
.calculator .tab-content-border {
	transition: all .2s linear;
}
.nav-tabs, .nav-tabs .nav-link {
	transition: all .2s linear;
}

.toolbar > div > *:hover {
	transition: all .2s linear;
}
.toolbar {
	transition: all .2s linear;
}
.CodeMirror-gutter, .CodeMirror-scroll, .CodeMirror-gutters {
	transition: all .2s linear;
}

.CodeMirror-cursor,
.CodeMirror div.CodeMirror-secondarycursor {
	transition: all .2s linear;
}

.calculator .CodeMirror {
	transition: all .2s linear;
}
.CodeMirror {
	transition: all .2s linear;
}
.CodeMirror-gutters {
	transition: all .2s linear;
}

.cm-s-eclipse span.cm-keyword {
	transition: all .2s linear;
}
.cm-s-eclipse span.cm-operator {
	transition: all .2s linear;
}
.cm-s-eclipse span.cm-variable-2 {
	transition: all .2s linear;
}
.dropdown button {
	transition: all .2s linear;
}

.dropdown-menu {
	transition: all .2s linear;
}

.dropdown-item:hover {
	transition: all .2s linear;
}
/** DARK MODE **/
body.dark-theme {
	background-color: black;
	transition: all .2s linear;
}


.dark-theme {

	transition: all .2s linear;
	
	.CodeMirror.readonly .CodeMirror-scroll {
		transition: all .2s linear;
		background-color: rgba(31, 31, 31);
	}

	.hint-keyword {
		color: #708;
	}

	.hint-table, .hint-column {
		color: rgba(31, 31, 31);
	}


	.highlight {
		padding: 9px 14px;
		margin-bottom: 14px;
		background-color: rgba(31, 31, 31);
		border: 1px solid #e1e1e8;
		border-radius: 4px;
	}


	.replace:not(.btn):hover, .replace-all:not(.btn):hover {
		border-bottom: silver dashed 1px;
	}

	

	$NAV_BAR_HEIGHT: 64px;

	.navbar, .jumbotron, .example,.modal-content {
	
		background-color: rgba(31, 31, 31) !important;
		transition: all .2s linear;
		color: #656161;
	}
	.table {
		transition: all .2s linear;
		color: #656161;
	}

	.view-content, .calculator, .view-max {
		transition: all .2s linear;
		background: #000;
		color: #656161;
	}
	 
	
	
	.sk-fading-circle .sk-circle:before {
		transition: all .2s linear;
		content: '';
		display: block;
		margin: 0 auto;
		width: 15%;
		height: 15%;
		background-color: #b4acac;
		border-radius: 100%;
		-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
		animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	}

	.nav-link, .navbar-brand, .theme-mode-toggle {
		color: #656161 !important;
		transition: all .2s linear;
	}
	.nav-link:hover, .theme-mode-toggle:hover {
		filter: brightness(1.2);
		transition: all .2s linear;
	}


	.theme-mode-toggle {
		outline: none;
		background: transparent;
		border: none;
		margin: auto;
		transition: all .2s linear;
		svg {
			transition: all .2s linear;
			color: #656161 !important;
		}
	}
	.theme-mode-wrapper {
		display: flex;
		height: 100%;
	}
	
	
	.desktopNavbar {
		padding-left: 64px;
		padding-right: 64px;
	}
	
	.dropdown-toggle {
		transition: all .2s linear;
		color: #656161 !important;
	}

	.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
		transition: all .2s linear;
		background-color: rgb(31, 31, 31);
		border-color: rgb(31, 31, 31) rgb(31, 31, 31) #fff;
	}
	.toolbar {
		transition: all .2s linear;
		background-color: rgb(31, 31, 31);
	}
	.calculator .tab-content-border {
		transition: all .2s linear;
		border: 1px solid rgb(31, 31, 31);
		//border-top-style: none;
		margin-bottom: 16px;
		border-radius: 2px;
	}
	
	.nav-tabs, .nav-tabs .nav-link {
		transition: all .2s linear;
		border-bottom: none;
	}

	.toolbar > div > *:hover {
		transition: all .2s linear;
		background-color: rgb(61, 61, 61);
		border-style: none !important;
	}
	.toolbar {
		transition: all .2s linear;
		border-color: rgb(31, 31, 31);
	}
	
	.CodeMirror-gutter, .CodeMirror-scroll, .CodeMirror-gutters {
		transition: all .2s linear;
		background-color: black;
	}

	.CodeMirror-cursor,
	.CodeMirror div.CodeMirror-secondarycursor {
		transition: all .2s linear;
		border-color: #9b9494;
	}
	
	.calculator .CodeMirror {
		transition: all .2s linear;
		border: 1px solid rgb(61, 61, 61);
	}
	.CodeMirror {
		transition: all .2s linear;
		background: rgb(61, 61, 61);
		color: #9b9494;
	}
	.CodeMirror-gutters {
		transition: all .2s linear;
		border-right: 1px solid rgb(31, 31, 31);
	}
	.alert {
		transition: all .2s linear;
		background-color: rgb(31, 31, 31);
		border: 1px solid rgb(31, 31, 31);
	}
	.alert-danger {
		color: #dc3545;
	}

	.cm-s-eclipse span.cm-keyword {
		transition: all .2s linear;
		color: #b6629a;
	}
	.cm-s-eclipse span.cm-operator {
		transition: all .2s linear;
		color: #9b9494;
	}
	.cm-s-eclipse span.cm-variable-2 {
		transition: all .2s linear;
		color: #7272f4;
	}
	.dropdown button {
		transition: all .2s linear;
		color: #656161;
	}
	
	.dropdown-menu {
		transition: all .2s linear;
		color: #656161;
		background-color: rgb(31, 31, 31);
		
		.dropdown-item {
			color: #656161;
		}
		
	}
	
	.dropdown-item:hover {
		transition: all .2s linear;
		background-color: rgb(61, 61, 61);
		//color: rgb(31, 31, 31);
	}
	
	
	.form-control {
		color: #656161;
		background-color: rgb(31, 31, 31);
	}
	.popover__inside .popover .popover-header{
		background-color: rgb(31, 31, 31);
		color: #656161;
		border-bottom: 1px solid #656161;
		
	}
	.popover__inside .popover .popover-inner .popover-body {
		background-color: rgb(61, 61, 61) ;
		color: #9b9494;
	}
	
	.popover__inside .popover[x-placement^=bottom] .arrow::after {
		border-bottom-color: rgb(31, 31, 31);
	}
	.popover__inside .popover[x-placement^=top] .arrow::after {
		border-top-color: rgb(61, 61, 61) ;
	}
	
	.popover__inside .popover .popover-inner {
		border: 1px solid rgb(31, 31, 31);
	}
	.popover__inside .popover {
		background-color: transparent;
		-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
		box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
	}
	.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^=bottom] .popover-header::before {
		border-bottom: 0;
	}
	
	.page-item .page-link {
		transition: all .2s linear;
		background-color: rgb(61, 61, 61);
		color: #9b9494;
		border-color: rgb(31, 31, 31);
	}

	.page-item.disabled .page-link {
		transition: all .2s linear;
		background-color: rgb(61, 61, 61);
		color: #656161;
		border-color: rgb(31, 31, 31);
	}

	.page-item .page-link:focus, .page-item .page-link:active {
		background-color: rgb(61, 61, 61);
		color: #9b9494;
		
	}
	button.close {
		color: #9b9494;
		text-shadow: none;
	}
	
	
	
	
}
