body {
            display: flex;
            flex-wrap: wrap;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

     #mocha-container {
	   /* background: #fbf7bb; */
	    overflow-y: auto; 
	    max-height: 100%;
	    background: #000000;
	}

	#editor-container, #app-container {
	    width: 50%;
	    height: 70%;
	    box-sizing: border-box;
	    overflow-y: auto; /* Asegura que los contenedores puedan hacer scroll si el contenido es grande */
	}
	#console-container, #mocha-container{
	    width: 50%;
	    height: 30%;
	    box-sizing: border-box;
	    overflow-y: auto; /* Asegura que los contenedores puedan hacer scroll si el contenido es grande */
	}
        #editor-container, #console-container {
            display: flex;
            flex-direction: column;           
        }
        #code-editor {
            flex: 1;
        }
        #app-container, #console-container {
            display: flex;
            flex-direction: column;
            border: none !important;
        }

        #app {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
	    margin-left:  -15px;	
	    margin-top: -26px;
        }

#app-footer {
  height: 20px;
  color: #007bff;
  font-size: 12px;
  line-height: 20px;
  position: relative;
  bottom: 0;
  width: 100%;
  margin-top: 18px;
  font-weight: bold;
}
        #console {
            flex: 1;
            padding: 10px;
            background-color: #000000;
            color: white;
            overflow-y: auto;
        }
 
	#ai-assistance{
  	   background: #7bae47;
  	   color: #fff;
           font-size: 15px;
           padding: 6px;
           border-radius: 11px;
        }
        #mocha {
            padding: 10px;
            box-sizing: border-box;
        }
        @media (max-width: 768px) {
            #editor-container, #mocha-container, #app-container, #console-container {
                width: 100%;
                height: auto;
            }
			#mocha .test a.replay {
			  background: #1ddf32 !important;
			  width: 81px;
			}
        }
        #run-button {
            padding: 8px;
            font-size: 16px;
            font-family: helvetica;
            font-weight: bold;
            color: white;
	    margin-top: 0%;
	    background: #007bff;
        }
        #app-container {
            padding: 25px;
            background: #ececee;
	    color: #212529
        }
		#mocha-stats {
			font-size: 15px !important;
		}
        #mocha .test a.replay {
            background: #1ddf32 !important;
            width: 34px !important;
            font-size: 20px !important;
        }
        #mocha-report {
            margin-top: -69px !important;
  	    margin-left: -62px !important;
        }
        #mocha .test h2 {
            position: relative;
            font-size: 15px !important;
        }
        /* Custom styles for the check mark */
        .pass .checkmark {
            font-size: 2em; /* Increase the size */
            color: #00FF00; /* Bright green color */
        }
	#app-container{
            color: #0f0e17;
	}
        .black {
            color: black;
        }
	.correct {
            color: green;
            font-weight: bold;
        }
        .incorrect {
            color: red;
        }
	ul {
	    margin-left: 38px;
	}
	h3{
	   margin-top: 40px;
	}
       /*#modify-message{
	   margin-top:20px;
	   display: block;
	   background: #d7ecd3;
	   z-index: 0;
	   color: #fff;
	   padding: 15px;
	   border-radius: 8px;
	} */
	h4{
	  margin-bottom: -13px !important;
	}
        h5{
	  font-weight: bold !important;
	}
	/*#send-response-button{
	  background: green;
	  align-content: right;
	  border-radius: 3px;
	  padding: 7px;
	  color: #ffffff;
	  margin-top: 15px	
	} */

        #modify-message {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
	    margin-top:20px;
	    padding: 10px;
	    border-radius: 8px;
        }

 .CodeMirror {
    white-space: pre-wrap;
    overflow-x: hidden;   
    background: #f8f9fa;
    height:100% !important; 
    padding-top: 22px;
    padding-bottom: 22px;
} 

/* Opcional: Ajusta el ancho del editor */
.CodeMirror-scroll {
    overflow-x: hidden;    /* Oculta el scroll horizontal */
}

#editor-container {
   position: relative;
}
#logo {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 131px;
   height: 27px;
}

#challenge {
  background: white;
  padding: 10px;
  border-radius: 15px;
}

.cm-s-seti .CodeMirror {
    font-family: "Fira Code", "Consolas", monospace !important; /* Fuente personalizada */
    line-height: 1.5 !important; /* Espaciado entre líneas */
}

CodeMirror cm-s-seti CodeMirror-wrap{
	font-size: 21px 
}

/* Ajusta los colores de sintaxis si es necesario */
.cm-s-seti .cm-keyword { color: #ff6188; } /* Palabras clave */
.cm-s-seti .cm-string { color: #a9dc76; } /* Strings */
.cm-s-seti .cm-variable { color: #78dce8; } /* Variables */
.cm-s-seti .cm-comment { color: #727072; font-style: italic; } /* Comentarios */
.cm-s-seti .cm-number { color: #fc9867; } /* Números */