@font-face {
	font-family: "BAHNSCHRIFT"; /*글꼴*/
	src: url("./font/BAHNSCHRIFT\ 3.TTF") format("truetype");
}

.timer-body {
	display: flex;
	/*background-color: #2d3436;*/
	min-height: 100vh;
	max-height: 100vh;
	font-family: "BAHNSCHRIFT", sans-serif;
}

/** side bar **/

.timer-sidebar {
	height: 100%;
	width: 100px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.5);
	overflow-x: hidden;
	padding-top: 20px;
	align-items: center;
	text-align: center;
}

.menu-button {
	flex-direction: column;
	display: inline-flex;
	margin: 25px 25px;
	background: none;
	border: none;
}

.image-size {
	width: 50px;
	height: 50px;
	font-size: 50px;
	text-align: center;
	vertical-align: middle;
	color: black;
}

.image-size:hover {
	color: #36373b;
}

.image-selected {
	color: #1a66da;
}

.image-selected:hover {
	color: #17529e;
}

/** timer-list **/

.timer-typeOne {
	background: linear-gradient(to right, #43cea2, #185a9d);
}

.timer-typeTwo {
	background-color: black;
}

.timer-typeThree {
	background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}

.timer-typeFour {
	background: linear-gradient(to right, #dc2424, #4a569d);
}

.timer-typeFive {
	background: linear-gradient(to right, #2c3e50, #fd746c);
}
.timer-typeSix {
	background: linear-gradient(to right, #529bff, #b193f7);
}
.timer-typeSeven {
	background: linear-gradient(to right, #4568dc, #b06ab3);
}
.timer-typeEight {
	background: linear-gradient(to right, #5614b0, #dbd65c);
}
.timer-typeNine {
	background: linear-gradient(to right, #cc95c0, #dbd4b4, #7aa1d2);
}
.timer-typeTen {
	background: linear-gradient(to right, #77a1d3, #79cbca, #e684ae);
}

.timer-list-wrapper {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	max-height: 100vh;
	padding-left: 100px;
}

.timer {
	height: 180px;
	width: 100%;
	color: white;
	padding: 0rem 1rem;
}

.timer-focused {
	background-color: #1f2044;
}

.timer-header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
}

.timer-Close {
	color: white;
	fill: white;
}

.timer-title {
	border: none;
	background: none;
	color: white;
}

.timer-title:focus {
	outline: none;
}

.timer-title.get-input {
	border-bottom: 1px solid white;
}

.progress {
	margin-bottom: 10px;
	height: 8px !important;
	background-color: rgba(255, 255, 255, 0) !important;
}

.progress-bar {
	background-color: rgba(255, 255, 255, 1) !important;
	opacity: 1;
}

.btn-info {
	background-color: #353535 !important;
	color: white !important;
	border-color: #353535 !important;
}

.btn-info:hover {
	background-color: #252525 !important;
	border-color: #252525 !important;
}

.btn-warning:hover {
	background-color: #494949 !important;
	border-color: #494949 !important;
}

.btn-warning {
	color: white !important;
	background-color: #595959 !important;
	border-color: #595959 !important;
}

.btn-link {
	color: white !important;
	background-color: #7d7d7d !important;
	border-color: #7d7d7d !important;
	text-decoration: none !important;
}

.btn-link:hover {
	background-color: #6d6d6d !important;
	border-color: #6d6d6d !important;
}
.timer-empty {
	border: 2px dashed #ffda79;
	background-color: none;
}

.timer-create {
	width: 100%;
	height: 200px;
}

.timer-create button {
	width: 100%;
	height: 200px;
	background: none;
	color: azure;
	font-size: xx-large;
	border: none;
}

.modal {
	color: black;
}