:root {
  --blue: #0005ff;
  --white: #ffffff;
  --black: #000000;
  --dark-blue: #42739e;
  /*--dark-blue-hover: #2c5070;*/
  --space-gray: #343d46;
  --hey-orange: #ff9500;
}

* {
	font-family: 'Fira Code', monospace;
}

body{
	background-color: #f4f4f4;
}

input:focus {
    outline:none!important;
    box-shadow: none!important;
	border-color: #e0e0e0!important;
}

code {
	margin-bottom: 10px;
    margin-top: 10px;
    display: block;
    border: 1px solid #e1e1e1;
    background-color: #f1f1f1;
    color: #55008e!important;
    padding: 10px;
    border-radius: 4px;
    white-space: pre;
    tab-size: 4;
	font-size: 15px!important;
}

.leftBoxLogo{
	right: 0px;
	top: -62px;
	position: absolute;
	width: 120px;
}

.rightBoxLogo{
	right: -10px;
	top: -69px;
	position: absolute;
	width: 140px;
}

.card{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.card-header{
	background: linear-gradient(45deg, #ffffff, #ffedef);
}

input::placeholder{
	font-size: 13px;
}

.input-group button{
	width: 80px;
	text-transform: uppercase;
}

/*
.input-group button:hover{
	background: linear-gradient(45deg, #00b642, #00d807);
}
 */

.btn-danger{
	background: linear-gradient(45deg, #ff0000, #ff5e00);
	border-color: #ff0000;
}

.btn-danger:hover{
	background: linear-gradient(45deg, #ff5e00, #ff0000);
	border-color: #ff5e00;
}

.btn-success{
	background: linear-gradient(45deg, #00b642, #00d807);
	border-color: #00b642;
}

.btn-success:hover{
	background: linear-gradient(45deg, #00d807, #00b642);
	border-color: #00d807;
}

.btn-primary{
	background: linear-gradient(45deg, #2b4d6e, #6b6eba);
	border-color: #2b4d6e;
}

.btn-primary:hover{
	background: linear-gradient(45deg, #6b6eba, #2b4d6e);
	border-color: #6b6eba;
}

.btn-warning{
	background: linear-gradient(45deg, #ff9500, #ffcc00);
	border-color: #ff9500;
}

.btn-warning:hover{
	background: linear-gradient(45deg, #ffcc00, #ff9500);
	border-color: #ffcc00;
}

.text-bg-primary{
	background: linear-gradient(45deg, #2b4d6e, #6b6eba);
	color: #ffffff;
}

.text-bg-primary:hover{
	background: linear-gradient(45deg, #6b6eba, #2b4d6e);
	color: #ffffff;
}

.text-bg-danger{
	background: linear-gradient(45deg, #ff0000, #ff5e00);
	color: #ffffff;
}

.text-bg-danger:hover{
	background: linear-gradient(45deg, #ff5e00, #ff0000);
	color: #ffffff;
}

.text-bg-success{
	background: linear-gradient(45deg, #00b642, #00d807);
	color: #ffffff;
}

.text-bg-success:hover{
	background: linear-gradient(45deg, #00d807, #00b642);
	color: #ffffff;
}

.text-bg-warning{
	background: linear-gradient(45deg, #ff9500, #ffcc00);
	color: #ffffff;
}

.text-bg-warning:hover{
	background: linear-gradient(45deg, #ffcc00, #ff9500);
	color: #ffffff;
}

.text-bg-info{
	background: linear-gradient(45deg, #00a9bc, #00e1ff);
	color: #ffffff;
}

.text-bg-info:hover{
	background: linear-gradient(45deg, #00e1ff, #00a9bc);
	color: #ffffff;
}

.text-bg-light{
	background: linear-gradient(45deg, #b7b7b7, #d8d8d8);
	color: #000000;
}

.text-bg-light:hover{
	background: linear-gradient(45deg, #d8d8d8, #b7b7b7);
	color: #000000;
}

.text-bg-dark{
	background: linear-gradient(45deg, #343d46, #2b4d6e);
	color: #ffffff;
}

.text-bg-dark:hover{
	background: linear-gradient(45deg, #2b4d6e, #343d46);
	color: #ffffff;
}

.text-bg-secondary{
	background: linear-gradient(45deg, #323232, #7e7e7e);
	color: #000000;
}


.text-bg-secondary:hover{
	background: linear-gradient(45deg, #7e7e7e, #323232);
	color: #000000;
}

.list-group-item:hover, .list-group-item.active{
	background: linear-gradient(45deg, #2b4d6e, #6b6eba);
	cursor: pointer;
}

.list-group-item.active{
	border-color: #2b4d6e;
}

.mainResults{
	margin-top: 10px;
	font-size: 13px;
	font-weight: 500;
	display: none;
}



.la-spinner {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.modal-body{
	font-size: 14px;
}

.form-floating>.form-control, .form-floating>.form-control-plaintext{
	padding: 10px!important;
}

.modal-header{
	background: linear-gradient(45deg, #ffffff, #ffedef);
}

.robo{
	z-index: 999;
	bottom: -30px;
	position: absolute;
	width: 100px;
	right: -15px;
}


.command-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #2f3031;
	color: #86ff00;
	padding: 10px;
	border-radius: 5px;
	font-family: monospace;
	margin: 10px 0;
	position: relative;
}
.command {
	flex-grow: 1;
	overflow-x: auto;
	white-space: nowrap;
}
.copy-btn {
	background: #c2ff00;;
	color: black;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 4px;
	margin-left: 10px;
}
.answer {
	background: white;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	margin-top: 15px;
}
.answer p{
	margin-top: 20px;
	margin-bottom: 5px;
	font-size: 15px;
}
.shutdown{
	font-weight: 500;
	float: right;
	font-size: 10px;
	padding: 4px;
	text-transform: uppercase;
}

.copy-btn:hover {
	background: #08ba00;
}
.description {
	font-size: 13px;
	color: #555;
	margin-top: 20px;
	margin-bottom: 5px;
}

.knowledge{
	display: none;
	margin-top: 15px;
	font-size: 14px;
}

.badge {
	margin-top: 10px;
	padding: 8px;
	cursor: pointer;
	margin-right: 5px;
}

.icon_type:hover{
	background-color: #8e8e8e!important;
}

.icon_type.active{
	background-color: #2c2c2c!important;
	color: #ffffff!important;
}

.icon_box{
	border-radius: 15px;
	border: 1px solid gray;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	cursor: pointer;
	margin-bottom: 15px;
}

.icon_box:hover{
	background-color: #f1f1f1;
}

.icon_name{
	font-size: 8px;
}

.second-backdrop {
	background-color: rgba(0, 0, 0, 0.85) !important; /* Black backdrop for second modal */
	z-index: 1055 !important; /* Higher than first backdrop */
}

.editor-container {
	display: flex;
	font-family: monospace;
	border: 1px solid #ddd;
	min-height: 100vh;
}
.line-numbers {
	width: 40px;
	background: #f5f5f5;
	padding: 10px;
	text-align: right;
	color: #666;
	user-select: none;
}
textarea {
	flex: 1;
	padding: 10px;
	border: none;
	outline: none;
	resize: none;
	font-size: 14px;
}

.jsonButtons{
	margin-top: 60px;
}

#svgContainer {
	width: 80px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

#svgContainer svg {
	width: 64px;  /* Change to the desired size */
	height: 64px;
}

#PasteStringLength{
	font-size: 13px;
	font-weight: 900;
	z-index: 9999;
	position: relative;

	/*background opacity*/
	background: rgba(255, 255, 255, 0.8);
}

.strLen{
	font-size: 16px;
	font-weight: 800;
}