:root {
	--main-accent-color: rgba(102, 204, 153, 0.8);
	--main-accent-color-light: rgba(102, 204, 153, 0.12);
	--main-accent-color-dark: rgba(102, 204, 153, 1);
	--main-accent-color-dark-hover: rgba(78, 166, 122, 1);

	--secondary-accent-color-border: rgba(14, 133, 245, 1);
	--secondary-accent-color-fill: rgba(14, 133, 245, 0.2);
}

.header-loading-bar {
	background: var(--main-accent-color) !important;
}

.main-container {
	min-height: calc(100% - 140px);
	padding-bottom: 60px;
}

	.main-container h1 {
		margin: 5px;
		/* margin-bottom: 10px; */
		font-size: 20px;
		font-weight: 600;
	}

.main-container--no-margin {
	/* width: calc(100% - 20px) !important; */
	max-width: 1000px !important;
	/* margin-left: 0 !important; */
	margin: auto !important;
}

.footer {
	position: absolute !important;
	width: calc(100% - 40px) !important;
	bottom: 0 !important;
}

input {
	max-width: calc(100%);
}

.button {
	background-color: var(--main-accent-color-dark) !important;
	border-radius: 10px;
}

	.button:hover {
		background-color: var(--main-accent-color-dark-hover) !important;
	}
	
.home {
		width: 800px;
		max-width: calc(100% - 20px);
    margin: auto;
    margin-top: 50px;
    border: solid 1px var(--main-accent-color);
    border-radius: 10px;
    background-color: var(--main-accent-color-light);
}

.main-container--contained {
	margin-left: 0 !important;
	width: calc(100% - 20px) !important;
	text-align: center;
}

	.main-container--contained .not-found-text h1 {
		font-size: 45px;
		font-weight: 400;
	}

	.main-container--contained .not-found-text h2 {
		font-size: 25px;
		font-weight: 300;
	}

	.main-container--contained .not-found-text h3 {
		font-size: 15px;
		font-weight: 200;
		margin-top: 50px;
	}

	.main-container--contained .not-found-text h4 {
		font-size: 150px;
		margin: 20px 0;		
	}

    .main-container--contained .accent-color {
        color: var(--main-accent-color);
    }

.title-box {
	overflow: auto;
}

	.title-box h1 {
		float: left;
		margin-left: 0;
	}

	.title-box h2 {
		margin: 0;
	}

	.title-box .title-button-box {
		float: right;
	}

.workspace-box {
	width: calc(100% - 20px);
	margin: auto;
	margin-top: 20px;
	/* margin-top: 50px; */
	padding: 10px;
	border: solid 1px var(--main-accent-color);
	border-radius: 10px;
	background-color: var(--main-accent-color-light);
	overflow: auto;
}

	.workspace-box .workspace-name {
		position: relative;
		float: left;
		overflow: auto;
		width: 250px;
	}

		.workspace-box .workspace-name h1 {
			margin: 0;
			margin-bottom: 10px;
			/* margin-bottom: 10px; */
			font-size: 14px;
			font-weight: 600;
		}

	.workspace-box .repository-info-box {
		position: relative;
		float: left;
		overflow: auto;
		width: calc(100% - 500px);
		min-width: 500px;
		/* width: 300px; */
	}

		.workspace-box .repository-info-box a {
			font-weight: 300;
		}

		.workspace-box .repository-info-box h2 {
			margin: 5px 0;
			font-size: 14px;
			font-weight: 400;
		}

	.workspace-box .workspace-control-button-box {
		position: relative;
		float: right;
		overflow: auto;
		width: 100px;
	}

		.workspace-box .workspace-control-button-box .button {
			margin: 5px;
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 14px;
			font-weight: 400;
			background-color: rgba(34, 167, 240, 1) !important;
		}

		.workspace-box .workspace-control-button-box .button:hover {
			background-color: rgba(52, 152, 219, 1) !important;
		}

		.workspace-box .workspace-control-button-box .button--delete {
			background-color: rgba(214, 69, 65, 1) !important;
		}

			.workspace-box .workspace-control-button-box .button--delete:hover {
				background-color: rgba(192, 57, 43, 1) !important;
			}

/* commit changes page */

.commit-changes-page .repository-info-box {
	margin: 20px 0;
	padding-bottom: 10px;
}

	.commit-changes-page .check-input {
		margin: 5px 10px;
	}

	.commit-changes-page .repository-info-box a {
		font-weight: 300;
	}

	.commit-changes-page .repository-info-box h2 {
		margin: 5px 0;
		font-size: 16px;
		font-weight: 400;
	}

.commit-changes-page .workspace-box {}

	.commit-changes-page .workspace-box h1 {
		margin: 0;
		margin-bottom: 10px;
		/* margin-bottom: 10px; */
		font-size: 14px;
		font-weight: 600;
	}

	.commit-changes-page .workspace-box a {
		font-size: 13px;
		font-weight: 300;
		padding-left: 10px;
	}

	.commit-changes-page .workspace-box .file-name {
		width: 200px;
	}

	.commit-changes-page .workspace-box .changes-info {
		padding-left: 20px;
	}

.commit-changes-page .set-title-box {
	position: relative;
	overflow: auto;
	margin: 20px 0;
}

	.commit-changes-page .set-title-box .set-title-input-box {
		/* float: left; */
	}

		.commit-changes-page .set-title-box .set-title-input-box input {
			width: 500px;
			border-radius: 10px;
			border: solid 1px var(--main-accent-color);
			font-size: 14px;
			padding: 5px 10px;
		}

		.commit-changes-page .set-title-box .set-message-input-box input::selection {
			border-color: var(--main-accent-color-dark);
		}

		.commit-changes-page .set-title-box .set-message-input-box {
			margin-top: 10px;
		}

			.commit-changes-page .set-title-box .set-message-input-box textarea {
				width: 500px;
				height: 200px;
				border-radius: 10px;
				border: solid 1px var(--main-accent-color);
				font-size: 14px;
				padding: 5px 10px;
			}

.commit-changes-page .workspace-control-button-box {
	position: relative;
	/* float: right; */
	overflow: auto;
	width: 100%;
}

	.commit-changes-page .workspace-control-button-box .button {
		margin: 0;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 400;
		background-color: rgba(34, 167, 240, 1) !important;
		float: left;
	}

	.commit-changes-page .workspace-control-button-box .button:hover {
		background-color: rgba(52, 152, 219, 1) !important;
	}

	.commit-changes-page .workspace-control-button-box .button--delete {
		background-color: rgba(214, 69, 65, 1) !important;
		float: right;
	}

		.commit-changes-page .workspace-control-button-box .button--delete:hover {
			background-color: rgba(192, 57, 43, 1) !important;
		}

/* create workspace page */

.create-workspace-page .repository-info-box {
	margin: 20px 0;
}

	.create-workspace-page .repository-info-box h2 {
		margin: 0;
		margin-bottom: 10px;
		/* margin-bottom: 10px; */
		font-size: 14px;
		font-weight: 600;
	}

	.create-workspace-page .repository-info-box input {
		width: 500px;
		border-radius: 10px;
		border: solid 1px var(--main-accent-color);
		font-size: 14px;
		padding: 5px 10px;
	}

	.create-workspace-page .repository-info-box select {
		padding: 5px;
	}

.create-workspace-page .workspace-control-button-box {
	position: relative;
	/* float: right; */
	overflow: auto;
	width: 100%;
}

	.create-workspace-page .workspace-control-button-box .button {
		margin: 0;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 400;
		background-color: rgba(34, 167, 240, 1) !important;
		float: left;
	}

	.create-workspace-page .workspace-control-button-box .button:hover {
		background-color: rgba(52, 152, 219, 1) !important;
	}

	.create-workspace-page .workspace-control-button-box .button--delete {
		background-color: rgba(214, 69, 65, 1) !important;
		float: right;
	}

		.create-workspace-page .workspace-control-button-box .button--delete:hover {
			background-color: rgba(192, 57, 43, 1) !important;
		}