﻿[v-cloak] {
	display: none
}

.text-brand {
	color: #aa1994 !important
}

.text-primary {
	color: #0f416f !important
}

.text-primary-light {
	color: #e7ecf0 !important
}

.text-secondary {
	color: #71b3e3 !important
}

.text-secondary-light {
	color: #f1f7fc !important
}
/* 10% of secondary */

.text-danger {
	color: #ef7673 !important
}

.text-warning {
	color: #f4a100 !important
}

.text-success {
	color: #5cb85c !important
}

.text-success-light {
	color: #def1de !important
}
/* 20% of success */

.text-gray900 {
	color: #3f4448 !important
}

.text-gray600 {
	color: #aaa !important
}

.text-gray500 {
	color: #b9bec3 !important
}

.text-gray100 {
	color: #f2f2f2 !important
}

.text-light {
	color: #f6f9fb !important
}




.bg-brand {
	background-color: #aa1994 !important
}

.bg-primary {
	background-color: #0f416f !important
}

.bg-primary-light {
	background-color: #e7ecf0 !important
}
/* 10% of primary */

.bg-secondary {
	background-color: #71b3e3 !important
}

.bg-secondary-light {
	background-color: #f1f7fc !important
}
/* 10% of secondary */

.bg-danger {
	background-color: #ef7673 !important
}

.bg-warning {
	background-color: #f4a100 !important
}

.bg-success {
	background-color: #5cb85c !important
}

.bg-success-light {
	background-color: #def1de !important
}
/* 20% of success */

.bg-gray900 {
	background-color: #3f4448 !important
}

.bg-gray600 {
	background-color: #8b9095 !important
}

.bg-gray500 {
	background-color: #b9bec3 !important
}

.bg-gray100 {
	background-color: #f2f2f2 !important
}

.bg-light {
	background-color: #f6f9fb !important
}


.status {
	font-weight: bold;
}

	.status.status-delivered {
		color: #5cb85c;
	}

	.status.status-saved {
		color: #f4a100;
	}

	.status.status-in-review {
		color: #f4a100;
	}



body {
	margin: 0;
	padding-bottom: 50px;
	background: #8c939c;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	/*background-image:linear-gradient(#f3f3f3,#fceaf9 65%);*/
	height: 100%;
	font-weight: 500;
	color: #444;
}


* {
	box-sizing: border-box;
}


.wrapper {
	min-width: 1000px;
	max-width: 1200px;
	border: solid 1px #f2f2f2;
	margin: 20px auto;
	border-radius: 5px;
}

.page-footer {
	text-align: center;
	color: #ddd;
	margin-top: 30px;
}


	.page-footer span {
		font-size: 15px;
	}



input, select, textarea {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 500;
}


h1 {
	color: #0f416f;
	font-size: 30px;
	font-weight: 600;
	margin: 0;
	letter-spacing: -0.2px;
}

h2 {
	color: #0f416f;
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

	h1 span,
	h2 span {
		color: #999;
		font-weight: 400;
		margin-left: 5px;
	}

/* Small all caps headlines */
h6 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color: #aaa;
	font-size: 12px;
	font-weight: 600;
}

/* Content padding */
main {
	padding: 30px;
	background-color: #f6f9fb
}


/* Top ***************************************/
nav {
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	align-content: center;
	background: #fff;
	border-bottom: solid 1px #f2f2f2;
}

	/* Brand */
	nav .logo {
		margin: 0 30px;
		display: flex;
		align-items: center;
	}

		nav .logo img {
			height: 40px;
		}

	/* Page Navigation */
	nav .navigation {
		flex-grow: 2;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0 0 0 30px;
		border-left: solid 1px #f2f2f2;
		border-right: solid 1px #f2f2f2;
	}

		nav .navigation li {
			display: inline-block;
		}

			nav .navigation li a {
				display: inline-block;
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
				border-radius: 20px;
				color: #0f416f;
				font-weight: 600;
				font-size: 18px;
				margin-right: 10px;
			}

				nav .navigation li a:hover {
					background: #f6f9fb;
				}

			nav .navigation li.active a {
				background: #0f416f;
				color: #fff;
			}

	/* Signout button */
	nav .sign-out {
		background: transparent;
		border: none;
		padding: 20px;
		color: #b9bec3;
		cursor: pointer;
		font-size: 14px;
		text-align: center;
	}



/* Page header *******************************/
header {
	padding: 35px 30px 20px 30px;
	background: #fff;
	border-bottom: solid 1px #f2f2f2;
	display: flex;
	justify-content: flex-start;
	align-content: center;
}

	header h1 {
		/*padding: 0 30px 0 0;
        border-right: solid 2px #87a0b7;*/
	}

	/* Choose date */
	header .date-picker {
		overflow: hidden;
		margin-left: 30px;
	}

		header .date-picker select, select.form-control {
			outline: none;
			padding: 0 10px;
			min-width: 120px;
			height: 42px;
			line-height: 42px;
			border: solid 1px #b7c6d4;
			border-radius: 3px;
			font-size: 14px;
			font-weight: 600;
			color: #6f8da9;
		}

			header .date-picker select:focus {
				border-color: #0f416f;
				color: #0f416f;
				background: #f6f9fb;
			}


	/* Extra details */
	header .details {
		display: flex;
	}

		header .details .stat {
			margin-left: 30px;
			padding: 0px 15px;
			height: 34px;
			line-height: 34px;
			color: #0f416f;
			font-size: 16px;
			background-color: #f6f9fb;
			border-radius: 100px;
		}

			header .details .stat.text-danger {
				margin-left: 10px;
				background-color: #fdeeee;
			}

			header .details .stat.text-success {
				margin-left: 10px;
				background-color: #dbf9db;
			}



	/* Page actions */
	header .actions {
		text-align: right;
		flex-grow: 2;
	}

	header .info {
		text-align: right;
		flex-grow: 2;
		line-height: 34px;
		font-weight: 600;
		color: #666;
	}


/* Sections **********************************/
section {
	background: #fff;
	border: solid 2px #dbe3ea;
	border-radius: 4px;
	margin-bottom: 10px;
}

	section .header {
		padding: 0px 20px;
		line-height: 60px;
	}

		section .header button {
			height: auto
		}


	section.prize-group {
		margin-bottom: 35px;
	}


/* Tables ***********************************/
table {
	text-align: left;
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
	color: #b9bec3;
}

section table {
	border-top: solid 2px #dbe3ea;
}

table th,
table td {
	padding: 5px 2px;
	font-size: 16px;
	height: 46px;
}

table tr th:first-child,
table tr td:first-child {
	padding-left: 20px;
}

table tr th:last-child,
table tr td:last-child {
	padding-right: 20px;
}

table tr td {
	color: #555;
}

/* Table head */
table thead th {
	padding-top: 30px;
}

/* Table body */
table tbody tr {
	border-top: solid 1px #f2f2f2;
}


	table tbody tr:hover td {
		background: #f1f7fc;
	}

table tbody i {
	margin-right: 5px;
}

/*Table foot */
table tfoot tr {
	border-top: solid 1px #f2f2f2
}

table tfoot td {
	padding: 15px 20px;
}


/* Preview & Build column links  */
.preview {
}

	.preview a:nth-child(1) {
		margin-right: 10px;
	}

	/*.build a:link,
    .build a:visited,*/
	.preview a:link,
	.preview a:visited {
		color: #777;
	}

		.preview a:link:hover {
			color: #3f84b6;
		}

/*table tr:hover .build a,*/
table tr:hover .preview a {
	color: #71b3e3;
}



/* Links ***********************************/
a:link,
a:visited {
	color: #71b3e3;
	text-decoration: none;
}

a:hover,
a:active {
	color: #3f84b6;
}

a.text-danger:link,
a.text-danger:visited {
	color: #ef7673;
	text-decoration: none;
}

a.text-danger:hover,
a.text-danger:active {
	color: #dd4844 !important;
}



/* Buttons ********************************/
.button {
	outline: none;
	display: inline-block;
	padding: 0 20px;
	line-height: 38px;
	border: solid 2px #71b3e3;
	border-radius: 20px;
	font-size: 16px;
	font-weight: 600;
	color: #71b3e3;
	background: transparent;
	cursor: pointer;
}

	.button:hover {
		border-color: #3f84b6;
		color: #3f84b6;
	}


.button-success {
	border: solid 2px #5cb85c;
	color: #5cb85c;
}

	.button-success:hover {
		border-color: #3c983c;
		color: #3c983c;
		/*background-color: rgba(92,194,92,0.2);*/
	}

.button-danger {
	border: solid 2px #ef7673;
	color: #ef7673;
}

	.button-danger:hover {
		border-color: #dd4844;
		color: #dd4844;
	}

.style-borderless {
	border: 0;
	padding: 0 10px;
	line-height: 19px;
}



/* Utilites ********************************/

.p-0 {
	padding: 0;
}

.right {
	float: right;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}


/* Edit solution */
.user-solutions {
	border-left: 2px solid #dbe3ea;
}

	.user-solutions .game {
		padding: 0;
	}

	.user-solutions .game .grid {
		width: 309px;
		height: 278px;
	}

		.user-solutions .game .grid li.dark {
			width: 31px;
			height: 31px;
		}

		.user-solutions .game .grid li, .user-solutions .game .grid li div.chr {
			width: 30px;
			height: 30px;
		}

			.user-solutions .game .grid li p {
				font-size: 18px;
			}

table.layout {
	border-top: none;
}

	table.layout tbody tr:hover td {
		background: inherit;
	}

	table.layout tr td:last-child {
		padding: 0;
	}

