:root {
	--border-color: #dee2e6;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
	background: #f0f2f5;
}

a {
	color: MediumBlue;
}

h1 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.3px;
	margin: 0;
	margin-left: 4px;
	margin-right: auto;
	color: #212529;
}

.container-fluid {
	display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content {
	flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-pane {
	background: #fff;
	border: 1px solid var(--border-color);
	border-top: none;
	flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
	border-radius: 12px;
	border-top-left-radius: 0px;
}

#blocklyDiv {
    /*height: 600px;*/
    flex-grow: 1;
    /*height: calc(100% - 60px);*/
    height: calc(100vh - 340px);
    min-height: 400px; /* Définit une hauteur minimale */
    width: 100%;
}

#jsonOutputDiv {
    /*height: 600px;*/
    flex-grow: 1;
    /*height: calc(100% - 60px);*/
    height: calc(100vh - 356px);
    width: 100%;
    overflow-y: auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px;
    border-radius: 5px;
}

#metadataOutputDiv {
    /*height: 600px;*/
    flex-grow: 1;
    /*height: calc(100% - 60px);*/
    height: calc(100vh - 496px);
    width: 100%;
    overflow-y: auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px;
    border-radius: 5px;
}

#metadata {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.metadata-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metadata-input-container label {
	width: 50px;
}

#metadataUrlInput {
    width: 600px; /* Remplacez 300px par la largeur souhaitée (par exemple : 50%, 80%, 400px, etc.) */
}