/*
	Table of Contents:

	0. fonts
	1. element defaults (apply to all elements of a type)
	2. helper classes (reusable for multiple elements)
	3. global styles (for components that appear on multiple pages)
		1. header
		2. nav
		3. .page-main
	4. element-specific styles
	5. media-specific styles (print, screen width)
	6. colours

*/


/* 0. fonts */

@font-face {
	font-family: "Roboto";
	src: local("Roboto Regular"),
		 local("Roboto-Regular"),
		 url(/fonts/Roboto-Regular.woff) format('woff'),
         url(/fonts/Roboto-Regular.ttf) format('truetype'),
         url(/fonts/Roboto-Regular.svg#robotoregular) format('svg');
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Light"),
		 local("Roboto-Light"),
         url(/fonts/Roboto-Light.woff) format('woff'),
		 url(/fonts/Roboto-Light.ttf) format('truetype'),
		 url(/fonts/Roboto-Light.svg#robotolight) format('svg');
	font-weight: 300;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Medium"),
		 local("Roboto-Medium"),
         url(/fonts/Roboto-Medium.woff) format('woff'),
		 url(/fonts/Roboto-Medium.ttf) format('truetype'),
		 url(/fonts/Roboto-Medium.svg#robotomedium) format('svg');
	font-weight: 500;
}

@font-face {
    font-family: "Noto Sans Hebrew";
    src: local("NotoSansHebrew Regular"), 
         local("NotoSansHebrew-Regular"), 
         url(/fonts/NotoSansHebrew-Regular.ttf) format('truetype');
}


/*
	1. element defaults
*/
* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	font-family: "Roboto",  "Noto Sans Hebrew", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #212121;
	background-color: #ffffff;
  	-ms-user-select: none;  
  	-webkit-user-select: none; 
  	-moz-user-select: -moz-none;
}

[contenteditable] {
	-webkit-user-select: text;
	user-select: text;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

label {
	margin: 0; /* 6px 0 1px; */
	display: block;
	vertical-align: top;
	color: #767676;
}

img, span {
	vertical-align: middle;
}

img[src=""] {
    display: none;
}

hr {
	opacity: 0.3;
}

section {
	padding: 16px;
}

h1, h2, h3, b {
	font-weight: 500;
}

.fab {
	position: fixed;
	bottom: 20px;
	right: 16px;
	background-color: #5b62b3;
	width: 56px;
	height: 56px;
	border-radius: 100%;
	border: none;
	outline: none;
	color: #FFF;
	font-weight: normal;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	transition: all 0.2s ease-in-out;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	z-index: 2;
}

.fab:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px
		rgba(0, 0, 0, 0.23);
}

select, input, textarea, button {
	padding: 4px 6px;
	font-family: inherit;
	margin: 0 0 6px 0;
}

a, button, input[type=button] {
	cursor: pointer;
}

.flat-button {
	height: 36px;
	min-width: 88px;
	color: #6778c8;
	border: 0 none;
	border-radius: 2px;
	background: none;
	font-weight: 500;
    font-size: 15px;
}

.dropdown {
	padding: 0;
  	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
   	background: #ffffff;
	z-index: 14;
	/* transition */
	max-height: 70vh;
	overflow-y: auto;
	transition-property: margin-bottom, max-height;
	transition-duration: 0.4s;
}

.actions > a:hover,
.dropdown a.selected {
	background-color: rgba(153, 153, 153, 0.2);
}

.flat-button:hover {
	background-color: rgba(153, 153, 153, 0.2);
}

.actions > a:active,
.dropdown a:active,
.flat-button:active {
	background-color: rgba(153, 153, 153, 0.4);
} 


input[type="checkbox"] {
	/*display:none;*/
	position: absolute;
	left: -9999px;
}

input[type="checkbox"] ~ label {
	display: inline;
	vertical-align: middle;
	cursor: pointer;
	margin-right: 8px;
}

input[type="checkbox"] ~ label svg path {
	transition: stroke-dashoffset .2s linear;
}

input[type="checkbox"]:checked ~ label svg path {
	stroke-dashoffset: 0;
}

input[type="checkbox"] ~ label svg {
	height: 20px;
	width: 20px;
	vertical-align: middle;
	border: solid 2px #767676;
	border-radius: 2px;
}

input[type="checkbox"]:checked ~ label svg {
	border: solid 2px #6778c8;
}



#templates {
    display: none;
}





/*
	2. helper classes
*/

.hidden {
	display: none;
}

.inline-block {
	display: inline-block;
}

.full-width {
	width: 100%;
}

.no-wrap {
	white-space: nowrap;
}

form .horizontal {
	display: inline-block;
	margin-right: 8px;
}

.field-row {
	margin: 8px 0;
}

/* remove top margin on first child and bottom margin on last */
.first {
	margin-top: 0 !important;
}

.last {
	margin-bottom: 0 !important;
}

/* block-level centering */
.center {
	display: block;
	margin-left: auto;
	margin-right: auto
}

.error_message {
	padding: 10px;
	background-color: #FEE;
	border: 1px solid red;
}

/*
	3. global styles
*/

/* screen blockers */

#splash-screen,
#modal-layer,
#modal-layer-top,
#flashcard-frame {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#splash-screen {
    background-color: #CD7690;
    z-index: 100;
}

#splash-screen>img, iframedialog>img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#modal-layer, #flashcard-frame {
	z-index: 10;	
}

#modal-layer-top {
	z-index: 20;
	background-color: rgba(0, 0, 0, 0.54);
}

#flashcard-frame {
	background-color: rgba(0, 0, 0, 0.87);
}



/* dialogs */

.snackbar {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 24px;
	width: 90%;
	max-width: 568px;
	border-radius: 2px;
	color: #fff;
	background-color: #37474F;
	z-index: 13;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.checkdialog {
    position: fixed;
    top: 48px;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
}

.check-item {
    display: block;
    height: 48px;
    padding: 0 16px;
}

.check-item > h3 {
    display: inline-block;
    min-width: 100px;
    font-size: 15px;
    font-weight: 400;
    vertical-align: middle;
}

.check-item > h3[contenteditable=true] {
    min-height: 15px;
}

.iframedialog {
    display: none;
    position: fixed;
    padding: 0;
    background-color: #ffffff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    z-index: 21;
}

.iframedialog iframe {
	width: 100%;
	height: 100%;
	background: url(/images/loading.gif) no-repeat center;
}

.iframedialog footer {
	position: absolute;
	bottom: 0;
	background: rgba(19, 22, 25, 0.87); /* blue-grey 950 87% */
	height: 48px;
	width: 100%;
	padding-left: 16px;
	color: #eba118;   /* amber */
	font-weight: bold;
	font-size: 20px;
}

#menu-paste {
	position: absolute;
}



/* context menu */

.context-menu img {
	opacity: 0.54;
}



/* top bar */
body>header {
	height: 56px;
	margin-bottom: -56px;
	width: 100%;
	position: fixed;
	z-index: 6;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
	color: #FFF;
}

body>header.tall {
	height: 104px;
	margin-bottom: -104px;
}

body>header>.header-right {
	position: absolute;
	top: 0;
	right: 0;
	padding-right: 8px;
}

body>header>.header-left {
	padding-left: 8px;
}

body>header a {
	margin: 0;
	display: inline-block;
	padding: 0 8px;
	color: #FFF;
	text-decoration: none;
	height: 56px;
	line-height: 56px;
	font-size: 18px;
	font-weight: normal;
}

a#app-name {
	padding: 0 0 0 8px;
}

.learn-verse > header h1, .learn-verse > header h2, 
body>header h1, body>header h2 {
	margin: 0;
	display: inline-block;
	line-height: 28px;
	font-size: 20px;
	font-weight: normal;
}

a#app-name h1 {
	border-right: solid 1px rgba(255, 255, 255, .3);
	padding-right: 8px;
}

.learn-verse > header h2,
body>header h2 {
	font-size: 18px;
	font-weight: 500;
	padding-left: 8px;
}

body>header a:hover, body>header li:hover {
	cursor: pointer;
}

#btn-menu {
	display: none;
}

/* tab bar */
#tab-bar {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

#tab-bar a {
	height: 48px;
	width: 120px;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 20px;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.7;
	overflow: hidden;
}

#tab-bar a.selected {
	opacity: 1.0;
	border-bottom: solid white 2px;
}

/* below header */
#drawer, main {
	position: absolute;
	top: 56px;
	bottom: 0px;
	overflow-y: auto;
	height: auto;
}

#drawer.tall, main.tall {
	top: 104px;
}

.no-partial-scroll {
	overflow-y: visible;
}


/* main */
main a {
	color: #212121;
}

#sets {
	padding-top: 20px;
}

.message {
	padding: 10px;
	background: #ECEFF1;
	border: solid #6778c8 1px; /* indigo flat */
}

main {
	vertical-align: top;
	width: 100%;
	padding-left: 240px; /* nav width + main padding */
	display: inline-block;
}

/*
	4. element-specific styles
*/



/* page: decks list */
p.top {
	margin-bottom: 0;
}

.collection-list li {
	border-top: 1px solid #eeeeee;
	overflow: auto;
}

.collection-list header>* {
	vertical-align: middle;
	margin: 0;
}

.collection-list header {
	padding: 8px 8px 0 8px;
	margin-bottom: 4px;
}

.collection-list .passage, .collection-list .descr {
	margin: 0;
	padding: 0 8px 0 8px;
	max-width: 42em;
	line-height: 1.2;
	/* transition */
	margin-bottom: 8px;
	max-height: 1000px;
	overflow: hidden;
	transition-property: margin-bottom, max-height;
	transition-duration: 0.4s;
}

.collection-list li.collapsed .passage {
	margin-bottom: 0;
	max-height: 0;
}

.collection-list .collapse-toggle {
	border: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url(/images/ic_expand_less_24px.svg) no-repeat center;
}

.collection-list li.collapsed .collapse-toggle {
	background-image: url(/images/ic_expand_more_24px.svg);
}

.collection-list h3 {
	font-weight: normal;
	margin: 0;
	display: inline;
}

.collection-list h3>a {
	color: #5b62b3; /* indigo flat dark */
	text-decoration: none;
}

.collection-list .edit {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.3s;
}

.collection-list li:hover .edit {
	opacity: 1;
}

.collection-list img {
	width: 18px;
	height: 18px;
}

.collection-list .source {
	float: right;
}

.collection-list cite {
	color: #282;
	font-style: normal;
}

.collection-list i, .collection-list .topic {
	color: #777;
}

.collection-list footer span {
	float: right;
	background-color: #ECEFF1;
	padding: 0 8px;
	margin-left: 8px;
}

.collection-list li > header img, 
section > header img {
	display: inline-block;
	vertical-align: middle;
	opacity: 0.7;
	margin-right: 4px;
	z-index: -1;
}

.collection-list li > header span, section > header span {
	white-space: nowrap;
	margin-right: 8px;
}

.collection-list li.featured h3 {
	font-weight: 500;
}

.collection-list section>header button {
	width: 28px;
	height: 28px;
}

#more a {
	margin-left: 8px;
	font-weight: 400;
	text-decoration: none;
	background-color: #6778c8;
	color: #FFFFFF;
	padding: 4px 8px;
	border-radius: 4px;
}

#more a:hover {
	text-decoration: none;
}

.downloads {
	color: #777;
}

header .descr {
	color: #777;
}


/* page: view deck */
#share {
	position: absolute;
	right: 16px;
	top: 8px;
	height: 20px;
}

#share > * {
	float: right;
}


/* page: add / edit verse */
#symbols button {
	border: 0;
	background: none;
}

/* page: login */
main>header {
	padding: 16px;
	background: #ECEFF1;
}

/*
	5. media-specific styles
*/
@media ( max-width : 473px) {
	/*)body > header h2 {
		display : none
	}*/
	#app-name {
		display: none
	}
}

@media print {
	body>header, nav, .controls, .verse-list input, .verse-list button {
		display: none;
	}
	.below-nav-bar {
		padding-top: 0;
	}
	main {
		padding-left: 0;
	}
	.verse-list li:first-child {
		border-top: 0;
	}
}

/*
	6. colours
*/

[data-color="-1"] {
	background-color: #ffffff;
	border-color: #ffffff;	
}
[data-color="0"] {
	background-color: #6778c8;
	border-color: #6778c8;
}
[data-color="1"] {
	background-color: #9B59B6;
	border-color: #9B59B6;
}
[data-color="2"] {
	background-color: #c15279;
	border-color: #c15279;
}
[data-color="3"] {
	background-color: #E74C3C;
	border-color: #E74C3C;
}
[data-color="4"] {
	background-color: #e6652f;
	border-color: #e6652f;
}
[data-color="5"] {
	background-color: #E67E22;
	border-color: #E67E22;
}
[data-color="6"] {
	background-color: #eba118;
	border-color: #eba118;
}
[data-color="7"] {
	background-color: #8fc840;
	border-color: #8fc840;
}
[data-color="8"] {
	background-color: #2ECC71;
	border-color: #2ECC71;
}
[data-color="9"] {
	background-color: #24c486;
	border-color: #24c486;
}
[data-color="10"] {
	background-color: #1ABC9C;
	border-color: #1ABC9C;
}
[data-color="11"] {
	background-color: #27aabb;
	border-color: #27aabb;
}
[data-color="12"] {
	background-color: #3498DB;
	border-color: #3498DB;
}