@import './breakpoints';

$light-grey : rgb(221, 221, 221);
$dark-grey : #A7A7A7;
$bg-color: #f7f7f7;
$red:#CE1C00;
$grey:#777;
$text:#474747;
$detail-bg:#fbfbfb;// #fffffb; //#fffee4;
$blue:#026eb1;

body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
	font-weight: 300;
	background-color: #fff;
	font-size:16px;
}

.cvc-table {
	overflow:hidden;
}

.vaccine-concept-title,.concept-title {
	display: flex;
	align-items: center;

	.abbrevicon {
		width: 70px;
	  	height: 70px;
		flex: 0 0 auto;
		border-radius: 200px;
		display:flex;
		margin-right: 20px;

		.abbrevicon-label {
			text-align: center;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			display:flex;
			color:white;
			width:100%;
			font-size:12px;
			font-weight:bold;
		}
	}

	.title {
		flex: 1 1 auto;
	}
}

.base-detail-header {
	display:flex;
	align-items:center;
	margin-bottom: 15px;

	.spacer {
		flex: 1 1 auto;
	}
	.subset-label {
		flex: 0 0 auto;
		// margin-left: 40px;
		font-size: 14px;
		font-weight: bold;
		color: #b5b5b5;
	}

	.close-btn-div {
		flex: 0 0 auto;

		button {
			width: 70px;
			color: darkgray;
			border-radius: 50px;
		}
	}
}

.responsive-tab-controller {
	.responsive-tabs-dropdown {
		position: sticky;
		-webkit-position: sticky;
		top:60px;
		z-index: 500;
		margin-top:26px;
		padding: 15px;
		margin-left: -15px;
		margin-right: -15px;
		background-color:white;
		
		.dropdown-prompt {
			font-weight: bold;
		}

		.btn-group {

			width:100%;
			max-width:360px;

			.dropdown-button {
				font-weight:bold;
				width:100%;
			}
		}
		
	}
}

.cvc-explorer {

	// Tabs
	ul.nav.nav-tabs {
		position: sticky;
		-webkit-position: sticky;
		top:60px;
		background-color:white;
		padding-top: 10px;
		z-index: 1;

		>li>a {
			font-weight: 600;
		}

		@media(max-width:$md){
			display:none;
		}
	}

	
	

	// Concept table header
	.header {

		margin-top: 40px;

		h3 {
			margin-top:5px;
		}
		
		.table-search-form-group {

			margin-bottom:0px;
			
			.table-search-field {
				// margin-top:10px;
				max-width:280px;
				border-radius:50px;
				float:left;

				@media(min-width: $sm) {
					float: right;
				}
			}
		}

		.developer {
			color:$dark-grey;
		}

		.instructions {
			color:$red;
			margin-top: 20px;

			.click {
				height:34px;
				padding-top:5px;
			}
		}
	}

	// Override default webflow row styles
	.row {
		-webkit-justify-content: left;
		justify-content: left;
		display: block;
		-webkit-display:block;
	}

	.subset-table {
		margin-bottom: 0px;
		margin-top: 20px;
		margin-left: -15px;
		margin-right: -15px;

		@media(min-width: $sm) {
			margin-left:0px;
			margin-right:0px;
		}


		// Sticky Table header row
		.table-header {
			position: sticky;
			-webkit-position: sticky;
			top: 140px; 
			background-color:#ececec;
			z-index: 1;
			padding-top:4px;
			
			@media(min-width:$md) {
				top:113px;
			}

			.mobile-hidden {
				@media(max-width:767px){
					display:none;
				}
			}
		}

		// Default table row
		.table-row {

			border-top: 1px solid #ddd;
			padding: 8px 8px 8px 8px;
			background-color:white;
			cursor:pointer;

			&:hover {
				background-color:$bg-color;
				color:$text;
			}

			.mobile-hidden {
				@media(max-width:767px){
					display:none;
				}
			}

		}

		.table-row.selected {
			background-color: $blue;
			color: white;

			* {
				//text-decoration:underline;
			}
		}

		.row {
			margin-left:0px;
			margin-right:0px;
		}

		// Detail view
		.table-row-detail {
			background-color:$detail-bg;
			padding: 10px 20px 10px 20px;

			.detail-title {
				.col-md-12 {
					padding-left:0px;
				}
			}

			h3 {
				margin-top:10px;
			}



			ul {
				padding-left: 0px;

				li {
					list-style-type: none;
				}
			}

			.card {
				box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
			  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
				background-color: white;
				border-radius: 4px;
				padding: 20px;
				margin-top:10px;
				margin-bottom:10px;
			}

			.section-title {
				margin-top: 20px;
				margin-bottom:5px;
				color: $blue;
    			font-size: 20px;
			}

			.title {
				font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
			}

			.field-row {
 
				>* {
					padding-left: 0px;
					padding-right: 5px;
					margin-bottom: 5px;
				}

				.title {
					padding-left:0px;
				}

			}

			.lang-field {

				margin-bottom:15px;
				display:inline-block;

				.lang-field-row {
					>* {
						padding-left:0px;
					}
					.lang-indicator {
						color: $red;
						font-weight: bold;
						font-size:12px;
					}
	
					.value {
	
					}
				}
			}

			.link-list {

				padding-bottom: 10px;
				margin-bottom:10px;

				ul {
					margin-bottom: 0px;
				}
				.collapse-control {
					a {
						font-weight:bold;
						font-size:12px;
						color:$dark-grey;
						cursor: pointer;
					}
				}
				.no-items {
					color:$dark-grey;
				}
			}
		}
	}

	.lang-field-row{

		.col-md-6{
			width: 100%;
		}

		.lang-indicator{
			display: inline; 
		}
		.value{
			display: inline;
			margin-left: 5px;
		}

	}

	.title{
		color: $blue;
	}

	.vaccine-concept-title, .concept-title{
		
		.title{
			color: black;
		}
		
	}

	.card-section{

		.col-md-6{

			.title{
				width:100%;
			}

			.col-xs-7{
				padding-left:0px;
			}

		}

		.col-sm-6{
			padding-left:0px;

			.title{
				width:100%
			}
			.col-xs-7{
				padding-left:0px;
			}

		}
	}

	.concept-detail{

		.col-xs-5{
			width:100%;
		}

		.col-xs-7{
			padding-left:0px;
		}

		.field-row{
			margin-bottom:20px;
		}


	}

	.table-row-detail{

		.field-row{
			margin-bottom:20px;
		}
	}

	.top-buffer { margin-top:10px; }

	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid #ccc;
		margin-top:0px;
		margin-bottom:20px;
		padding: 0;
	}


}