/* Docs 2.1 */

:root {
  /* text and background */
  --text: #5f6a7c;   /* default text */
  --light: #b0bacc; /* light text*/
  --semi-dark: #c7cace; /* borders of box */
  --dark: #003049;   /* font & top bar bg */
  --link:#0089ff;  
  --highlight:#0089ff; /* buttons, links */
  --highlight-semi:rgba(0, 137, 255, .2);
  --dark-blue:#004b8d; /* buttons, links */
  
  --highlight-green:#78cd00; /* buttons, links */
  
  
  /* content background */
  /* #49cbfc */
  --master: rgb(227, 221, 193);
  --drivers-bg: rgb(227, 221, 193);
  --main-bg: #EBECED;
  
  /* ctx */
  --ctx-bg: #2b3943;
	--ctx-text: #ececec;	
  --ctx-hover: #3d8df5;
  
}

app-logo h1 a { color: #fff; text-decoration: none}





/* TAGS */
h2 { font-size: 18px; line-height: 24px; font-weight: 300; margin: 0; padding: 0 }


/* custom styling */
/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . */
.shadow { box-shadow: 0 5px 20px 0 rgba(0,50,100,0.05) }
.border-rad { border-radius:5px; overflow: hidden } 

.light-color { color: var(--light) }
.dark-color { color: var(--dark)  }


/* search */
input.virtual-search-box { background: #fff; border-radius: 50px; width:100%; min-width: 250px }

search-box {		
	display: none;			
	position: fixed;
	width:100vw;
	height: 100vh;
	background: rgba(191, 191, 191, 0.6);
	z-index: 9999999;
	padding: 25px;				
	transition: all .35s ease-in-out;
}	
search-box .search {
	background: #fff;				
	width: 100%; max-width: 800px;
	padding: 15px;					
	border-radius: 5px;
	box-shadow: 0 5px 10px 0 rgba(68, 68, 68, 0.15),0 1px 3px 0 rgba(68, 68, 68, 0.15);
}

search-box .search .search-input {								
	padding: 10px;
	width: 100%; max-width: 800px;
	padding: 15px 0	
}
search-box .search .search-input span {
	min-width: 50px;
	text-align: center
}			
search-box .search .search-input span i.mic {
	font-size: 25px
}		

search-box .search .search-input span[component="close"] {
	cursor: pointer;
	transition: all .4 ease-out;	
}
search-box .search .search-input span[component="close"]:hover {
	transform: scale(1.1)
}
	
search-box input[name="q"] {
	background: rgba(191, 191, 191, 0.1);
	border-radius: 50px;
	font-size: 20px; 
	line-height: 40px;
	padding: 0 25px;				
}

div.search-results {
	width: calc( 100% - 115px );				
	margin: 0 30px;
}

div.search-results div.result {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 5px 0;
	margin-bottom: 1px;
	border-bottom: 1px solid rgb(233, 233, 233);				
	cursor: pointer;
	border-radius: 3px
}			
div.search-results div.result:last-child{
	border-bottom: none
}

div.search-results div.result:hover {
	background: #3d8df5
}
div.search-results div.result:hover * {
	color:#fff !important;
}			

div.search-results div.result i.mic {
	width: 50px;
	text-align: center;
	font-size: 18px;
	padding-top: 2px;		
}
div.search-results div.result b {
	font-size: 15px; line-height: 22px;
	font-weight: 500;
	color:#000;
}
div.search-results div.result small {
	font-size: 11px; 
	text-transform: uppercase;
}
div.search-results div.result small i.mic {
	padding: 0 1px 2px 0;
	width: auto;
	font-size: 14px;								
}



/* Books and Index */
.book-grid.grid-2 { grid-template-columns: repeat(auto-fill,minmax(48.5%, 1fr)); grid-gap: 3px 3% }
.book-preview { cursor: pointer; min-height: 150px; margin-bottom: 0;  }
.book-preview content-box { background: none !important; cursor: pointer }
.book-preview .book-image img { width: 25px; margin: 15px 10px 0 0 }
.book-preview .book-info h2 { font-size: 18px; font-weight: 500; color: #000; padding: 10px 25px 12px 10px; margin: 0 } 
.book-preview .book-info p { font-size: 15px; line-height: 24px; padding: 0 25px 10px 10px } 


/* Editor */
.editor > .content-box { padding: 0 !important }



/* BOXES */

.fl-right { float: right !important; display: block }

.transparent { background: none; border:none !important; box-shadow: none !important }

.box { border-radius: 5px; overflow: hidden; border: 1px solid #e1e3e7; }
.box:hover { border: 1px solid #e1e3e7;  box-shadow: 0px 2px 5px 2px rgba(0,50,100,0.05) }
.box > content-box.header { color:var(--dark); font-weight: 600; font-size:var(--px10); padding: 16px 16px 16px 16px}
.box > content-box.content { padding: 16px 16px }
.box > content-box.footer { padding: 10px 16px; background: #f4f4f4; border-top:1px solid rgb(234, 234, 234) }
.box > content-box.footer button.inline { background: 0; padding: 0; color:var(--highlight) !important; border: 0}

.box > content-box h2 { font-size: var(--px10); font-weight: 400; padding: 0 0 8px 0; margin: 0 }
.box > content-box h2 { font-size: var(--px8); font-weight: 400; padding: 0 0 8px 0; margin: 0 }

/* dialogs, integrations */
.app-form {}
.app-form input[type="text"], .app-form input[type="email"], .app-form select { margin-bottom: 10px }
.app-form label { margin-bottom: 5px; padding-bottom:0  }
.app-form input[type="text"]+small, .app-form input[type="email"]+small, .app-form select+small { margin-top:-8px; display:block; padding-left: 10px }


modal-window > header { background:#f4f4f4; border-bottom: 1px solid rgb(234, 234, 234) }
modal-window > header > div > h2 { font-size: 16px; font-weight: 600 }
modal-window > header > div > h2:has(cpg-name) { line-height: 16px; padding: 6px 0 12px 25px }
modal-window > header > div > h2 > cpg-name { color: rgba(43, 57, 67, 0.8); font-size: 13px; line-height: 16px; font-weight: 300; display: inline-block; margin:0px 0 3px 0 }

modal-window > footer {background:#f4f4f4; border-top: 1px solid rgb(234, 234, 234) }


/* Editor */
.editor-content { background: #fff; border-radius: 3px; padding: 15px; font-family: monospace; font-size: 14px; line-height: 22px }

.zoom-in-out-test { opacity: .5 }


/* animations */
.zoom-in-out {
  animation: zoomInOut 1s 1 ease-in-out 500ms;
}

@keyframes zoomInOut {
  0% {
	transform: scale(1.3);
  }
  15% {
	transform: scale(.7);
  }
  30% {
	  transform: scale(1.1);
  }
  50% {
	  transform: scale(.8);
  }
  75% {
		transform: scale(1);
  }  
}