/* Mobile */

@media screen and (max-width: 959px) {

	:root {
	  --grid-gutter: 60px;
	}



	h1 {
		font-weight: 400;
	}





	/* Input */

	label {
		font-size: 14px;
	}

	input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=time], textarea, select {
		padding: 8px 10px;
		font-size: 16px;
	}

	input[type=submit] {
		margin-bottom: 30px;
		padding: 2px 10px;
		font-size: 16px;
	}





	/* Global classes */

	a.delete {
		position: absolute;
		top: -13px;
		right: -13px;
		display: block;
		width: 26px;
		height: 26px;
		background: #9d0021;
		color: #fff;
		font-weight: 100;
		font-size: 34px;
		line-height: 15px;
		text-align: center;
		border-radius: 13px;
	}

	a.add {
		display: inline-block;
		width: 50px;
		height: 50px;
		margin-bottom: 30px;
		background: #68c2c4;
		color: #fff;
		font-weight: 100;
		font-size: 54px;
		line-height: 50px;
		text-align: center;
		border-radius: 25px;
	}





	/* Header */

	#header {
		height: 74px;
		background: #a20024;
		color: #fff;
		line-height: 74px;
	}

	#header img {
		vertical-align: middle;
	}

	#header .col-4 {
		-ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter))!important;
		flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter))!important;
		max-width: calc((100% / (12/4)) - var(--grid-gutter))!important;
	}





	/* Top */

	#title {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	#filter {
		margin-top: -15px;
		padding-bottom: 20px;
	}





	/* Main */

	#main {
		width: 100%;
	}

	#main table td {
		background: #f0f0f0;
	}



	#main table.hours th, #main table.hours td {}

	#main table.hours th {}

	#main table.hours td {
		padding-top: 8px;
		padding-bottom: 8px;
		vertical-align: top;
		font-size: 16px;
		line-height: 24px;
	}

	#main table td span.break {
		color: #a7a7a7;
		font-size: 14px;
	}





	/* Pages */

	/* --- Login */

	#login {
		width: 100%;
	}

	#login-form {
		max-width: 375px;
		margin: 0 auto;
	}



	/* --- Welcome */

	#buttons {
		max-width: 315px;
		margin: 0 auto;
		padding-top: 20px;
	}

	#buttons a {
		display: block;
		margin-bottom: 20px;
		padding: 20px;
		background: #68c2c4;
		color: #fff;
		font-size: 20px;
		border-radius: 4px;
	}

	#buttons a img {
		margin-top: -4px;
		margin-right: 8px;
		vertical-align: middle;
	}



	/* --- Time registration */

	.day {
		position: relative;
		margin-bottom: 30px;
		padding: 4px 4px 2px;
		border: 1px solid #bebebe;
		border-radius: 4px;
		--grid-gutter: 20px;
	}

	.day .row {
		padding: 9px 5px;
	}
	.day .row.start, .day .row.end {
		margin-bottom: 2px;
		background: rgba(190, 190, 190, 0.2);
	}
	.day .row.start {
		border-radius: 3px 3px 0 0;
	}
	.day .row.end {
		border-radius: 0 0 3px 3px;
	}

	.day .row.break {
		color: #0e5da0;
		font-size: 14px;
	}
	.day .row.break.no-break {
		color: #a20024;
	}

	.day .row.break a.button {
		width: 100%;
		margin: 9px 0;
		background: #0e5da0;
		font-size: 14px;
		border-color: #0e5da0;
		border-radius: 16px;
	}



	.day .row .col-6 {
		-ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter))!important;
		flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter))!important;
		max-width: calc((100% / (12/6)) - var(--grid-gutter))!important;
	}

	.day .row .col-6 input {
		background: #fff;
	}



	.day.active {
		border-color: #68c2c4;
	}

	.day.active .row.start, .day.active .row.end {
		background: rgba(84, 188, 188, 0.15);
	}

	.day.active .row .col-6 input {
		border-color: #68c2c4;
	}



	/* --- Success */

	#title img {
		margin: 30px 0 15px;
	}
	
}