#container {
			width: 1210px;
			border: solid gray 2px;
			border-radius: 10px;
			padding: 10px;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
		}

		.matrix > tr > .title {
			width: 140px;
			padding-left: 5px;
			border: solid gray 1px;
			background: pink;
		}

		.matrix2 > tr > .title {
			width: 140px;
			padding-left: 5px;
			border: solid gray 1px;
			background: pink;
		}

		.bold {
			font-weight: bold;
		}

		#defult {
			background: yellow;
		}

		 .option {
			background: pink;
		 }

		.chord {
			color: red;
			border-right: solid gray 1px;
		}

		.chordfunction {
			width: 100px;
			border-right: solid gray 1px;
		}

		.chorddegree {
			width: 100px;
			border-right: solid gray 1px;
		}

		.matrix > tr > .title2 {
			width: 120px;
		}

		thead.matrix > tr > .data {
			background: pink;
			text-align: center;
			font-weight: bold;
		}

		.matrix > tr > .data {
			width: 150px;
			border: solid gray 1px;
			padding-left: 5px;
		}

		.matrix2 > tr > #secoundaryDominant {
			width: 1050px;
			border: solid gray 1px;
			padding-left: 5px;
		}

		.data:hover {
			background-color: orange;
		}

		.chordchange {
			background-color: orange;
		}