:root {
    --gris: rgb(51, 51, 51);
    --bleu: rgb(0, 123, 255);
	--orange: rgb(255, 123, 0);
	--blanc:#ccc;
}

body {
    background-color: var(--gris);
    color: var(--blanc);
    text-align: center;
}

h1 {
    color: var(--bleu);
}

h1>span.etat {
    color: rgb(0, 123, 0);
}

h2 {
    color: var(--bleu);
    border-bottom: 2px solid #777;
}


.tableauPeriodique, .spectre {
    text-align: center;
}

.tableauPeriodique>table {
    margin: auto;
}

.spectre>div
{
	margin: auto;
}

.case {
    float: left;
}

td {
    width: 90px;
    border: 1px solid transparent;
    cursor: pointer;
}

td .symbole {
    font-size: 20px;
    text-align: center;
}

td .numAtom {
    font-size: 10px;
}

td .nom {
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
}

td .masse {
    font-size: 8px;
    text-align: center;
}

table {
    width: 80%;
    border-collapse: collapse;
}

table>tbody>tr>td {
    border: 1px solid var(--orange);
}

.modal
{
	background: var(--gris);
}

.boutonEnregistre {
	border:none;
	border-radius:8px;
	background:var(--orange);
	/* color:#fff; */
	cursor:pointer;
	padding-left:15px;
	padding-right:15px;
	padding-top:6px;
	padding-bottom:6px;
}

.boutonFermer {
	border:none;
	border-radius:8px;
	background:var(--bleu);
	color:#fff;
	cursor:pointer;
	padding-left:15px;
	padding-right:15px;
	padding-top:6px;
	padding-bottom:6px;
}


.input {

	border:none;
	background:var(--blanc);
	border-radius:8px;
	padding:6px;
}