/* default theme */

:root {
    /* colors */
    --default-blue: #00A5D5;
    --default-red: #d53000;
    --default-green: #00d530;
    --default-orange: #d59b00;    
    --default-white: #ffffff;
    --default-yellow: #ffe823;
    --default-graytone-0: #f5f5f5;
    --default-graytone-1: #eee;
    --default-graytone-2: #ddd; 
    --default-graytone-3: #ccc;
	--default-graytone-3-blueish-transparant: rgba(93,110,115,.3);
	--default-graytone-4: #aaa;
    --default-graytone-5: #4f5e68; 
    --default-graytone-6: #39444b;
    --default-graytone-7: #333;
    --default-graytone-7-transparant: rgba(51, 51, 51, 0.6);
	--default-graytone-8: #262626;
	--default-box-shadow:  0 3px 5px 0 rgba(0,0,0,.045);

    /* font sizes */
    --default-font-size-small: 0.8rem;
    --default-font-size-medium: 1rem;
	--default-font-size-large: 2rem;
	
	/* border radius */
	--default-pane-border-radius: 8px;
	--default-button-border-radius: 24px;

	--default-title-font-family: "Graphik Web","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
	--default-read-font-family: "Domine", serif;
}

/* built-in elements */
body, html {
    height: 100vh;
	font-family: var(--title-font-family, var(--default-title-font-family));
	font-size: 1rem;
}
label, input, button, textarea {
    font-size: inherit;
    
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
label{
	padding: 1vh 0vw;
}
input, button, textarea, select{
	padding: 1vh 1vw;
}
textarea{
	resize: none;
	overflow: hidden;
}
input[type=text], 
input[type=number], 
input[type=password], 
textarea{
	border:1px solid var(--graytone-2, var(--default-graytone-2)); 
	-webkit-appearance:none;
}
input:disabled, textarea:disabled, select:disabled{
    background-color: var(--graytone-1, var(--default-graytone-1));
    color: var(--graytone-2, var(--default-graytone-2));
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
    color: var(--graytone-3, var(--default-graytone-3));
}

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

/* app homepage */

.container
{
	height: 100vh;
	display: table;
}

.fullscreenimage { 
    /* Full height */
    height: 100vh;
    width: 100vw;
    margin: 0 auto;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fullscreenbackgroundcolor { 
    /* Full height */
    min-height: 100vh;
    margin: 0 auto;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	background-color: var(--blue, var(--default-blue));
}
@media (min-width:769px){
	.fullscreenbackgroundcolor { 
		width: 100%;
		display: flex;
		align-items: stretch;
	}			
}

.explainer{
	min-height: 100vh;  
	width: 30vw;	display: flex;
	align-items: stretch;
}
@media (max-width: 768px) {
    .explainer{
        width: 100%;
    }
}

.explainer h1{
	margin: 0px;
	font-size: var(--font-size-large, var(--default-font-size-large));
}
.explainer-background{
	min-height: 100vh; 
	padding: 8vw;
	background-color: var(--white, var(--default-white));
	text-align: center;

	display: flex;
	flex-direction: column;
    align-items: center;
}
.explainer-form {			
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;			
}

/* billboard */

.billboard
{
	background-color: var(--white, var(--default-white));
	margin: auto;
	padding: 4vh 4vw;
}

@media (min-width:769px){
	.billboard
	{
		border-radius: var(--button-border-radius, var(--default-button-border-radius));
		margin: auto ;
		width: 40vw;
		
	}
}

.billboard h2{
	text-align: center;
	padding: 1vh 1vw;
}

.billboard .screenshot 
{
	border-radius: var(--button-border-radius, var(--default-button-border-radius));
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;			
	height: 30vh;
}	

.billboard .cta 
{
	margin: 4vh 0 2vh 0; 
	display: flex;		
	justify-content: space-between;	 
}

.billboard .cta .app-logo 
{
	display: inline-block;
	border-radius: 50%;
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 4vh;
	width: 4vh;
	/* object-fit: contain; */
}
.billboard .cta .app-description
{
	display: flex;
}
.billboard .cta .app-title
{
	margin-left: 1vw;
}
.billboard .cta .app-description h3
{
	margin: 0;
}

.billboard .cta login-button
{
	display: inline-block;
}

.billboard .description 
{
	margin: 2vh 0 2vh 0; 
}

.billboard .features 
{
	margin: 2vh 0 4vh 0;
}

.billboard .features ul
{
	padding: 0 0 0 2vw; 
	list-style-type: disc;
}


/* app console page */

/* console header */
.navbar{
	border-radius: 0;
	margin-bottom: 0;
}
.navbar-inverse{
	background-color: var(--graytone-7, var(--default-graytone-7));
	border-color: var(--graytone-7, var(--default-graytone-7));
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: var(--graytone-7, var(--default-graytone-7));
}
.navbar-brand>img{
	display: inline;
}
.navbar-right img {
	border-radius: 50%;
	margin: 0 0.2vw;
	width: 30px;
	height: 30px;
}

/* console section */

.console{
	position: relative;
	background-color: var(--graytone-1, var(--default-graytone-1));
	display: none;
	flex-direction: row;	
	flex-grow: 1;
	flex-shrink: 1;
	align-items: stretch;
}

.console_header{
	height: 5vh;
	padding: 1vh 2vw;
	border-bottom: 1px solid var(--graytone-2, var(--default-graytone-2));
	font-size: var(--font-size-medium, var(--default-font-size-medium));
	color: var(--graytone-5, var(--default-graytone-5));
}

.console_content{
	flex-basis: 100%;
	min-height: calc(100vh - 62px);
}

/* side navigation */

.side_navigation{
	background-color: var(--graytone-5, var(--default-graytone-5)); 
	background-image: linear-gradient(90deg,var(--graytone-5, var(--default-graytone-5)) 0,var(--graytone-6, var(--default-graytone-6)) 100%);	
	min-height: 100%;
}

.side_navigation div{
	text-align: center;
	padding: 2vh 2vw;
}
.side_navigation .picture-container{
	margin: auto;
	border-radius: 50% !important;	
}
@media (max-width:768px){
	.side_navigation{
		line-height: var(--font-size-medium, var(--default-font-size-medium));
	}
	.side_navigation .picture-container{
		width: 32px;
		height: 32px;
	}
}
@media (min-width:769px){
	.side_navigation .picture-container{
		margin-bottom: 1vh;
		width: 6vw;
		height: 6vw;
	}
}

.side_navigation .dropdown > span , .side_navigation a{	
	color:	var(--white, var(--default-white));
	text-decoration: none;
	font-size: var(--font-size-medium, var(--default-font-size-medium));
	white-space: nowrap;	
}

/* shell-menu */

shell-menu{
	padding: 0;
	margin: 0;
}
shell-menu shell-menu-item{
	display: block;
	padding: 2vh 1vw;
	color: var(--graytone-2, var(--default-graytone-2));
}
shell-menu shell-menu-item.active{
	background-color: var(--graytone-3-blueish-transparant, var(--default-graytone-3-blueish-transparant));	
}
@media (max-width:768px){
	shell-menu shell-menu-item.active{
		border-top: 6px solid var(--blue, var(--default-blue));
		margin-top: -6px;
	}
}
@media (min-width:769px){
	shell-menu shell-menu-item.active{
		border-left: 6px solid var(--blue, var(--default-blue));	
	}	
}
shell-menu shell-menu-item a{
	padding: 0;
	color: var(--white, var(--default-white));
	text-decoration: none;
	font-size: var(--font-size-medium, var(--default-font-size-medium));
	height: 32px;
	display: block;	
	white-space: nowrap;
}
shell-menu shell-menu-item a:hover{
	color: var(--blue, var(--default-blue));
	text-decoration: none;
}
shell-menu shell-menu-item.active a {
	margin-left: -6px; /* offset the border on active menu item */
}
shell-menu shell-menu-item .menu-item-text{
	line-height: 32px;
}
@media (max-width:1024px){
	shell-menu shell-menu-item .menu-item-text
	{
		display: block;
		text-align: center;
	}
}
/* horizontal navigation on small screens */

@media (max-width:768px){	
	.console{
		flex-direction: column;
	}
	.side_navigation{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
	}
	shell-menu{
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;	
		align-items: stretch;
		height: 100%;
	}
	shell-menu shell-menu-item{
		flex-grow: 1;
	}	

	shell-menu shell-menu-item .menu-item-text{
		display: none;
	}
}

/* icons on the menu items */
shell-menu .icon:before{
	content: '';
    background-size:cover;
    width: 32px;
    height: 32px;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	margin-right: 0.2vw;
}
@media (max-width:1024px){
	shell-menu .icon{
		margin: 0 auto;
		width: 32px;
		display: block;
	}
}

/* dropdowns */

.list-actions .dropdown-menu, .list-item-actions .dropdown-menu, .table-actions .dropdown-menu, .pane-actions .dropdown-menu{
	margin-top: 1.6vh;
}
.dropdown-menu li{	
	display: block;
}
.dropdown-menu li:not(:first-child){
	border-top: 1px solid var(--graytone-2, var(--default-graytone-2));
}
.dropdown-menu li a{
	padding: 1vh 1vw;
    display: block;
    clear: both;
    font-weight: 400;
    line-height: var(--font-size-medium, var(--default-font-size-medium));
	color:var(--graytone-7, var(--default-graytone-7));
	background-color:var(--white, var(--default-white));
    white-space: nowrap;
}
.dropdown-menu li a:focus, .dropdown-menu li a:hover{
	color: var(--graytone-8, var(--default-graytone-8));
    text-decoration: none;
    background-color: var(--graytone-0, var(--default-graytone-0));
}	

.dropdown-menu li a{
	background-color: var(--white, var(--default-white));
}

/* panes */

.panes{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start space-around;
	box-sizing: border-box;
	width: 100%;
}
.panes .vertical{
    flex-direction: column;
    padding: 0vh 0vw
}

.pane-spacer{
    padding: 1vh 1vw;
    box-sizing: border-box;   
	display:flex;
	flex-grow: 1;
	flex-shrink: 1;
	max-width: 100vw;
}

.pane{
	display: inline-block;
	box-shadow: var(--box-shadow, var(--default-box-shadow));
	background-color: var(--white, var(--default-white));
	position: relative;
	flex: 1 1 auto;
}
.pane.rounded{
	border-radius: var(--pane-border-radius, var(--default-pane-border-radius));
	padding: 2vh 2vw;
}
.panes .pane-spacer.full{
	flex-basis: 100%;
}
.panes .pane-spacer.half{
	flex-basis: 50%;
}
@media (min-width:769px){
	.panes .pane-spacer.half-max{
		max-width: 50%;
	}
}
.panes .pane-spacer.quarter{
	flex-basis: 25%;
}
@media (min-width:769px){
	.panes .pane-spacer.quarter-max{
		max-width: 25%;
	}
}
.panes .pane-spacer.one-third{
	flex-basis: 33.33%;
}
@media (min-width:769px){
	.panes .pane-spacer.one-third-max{
		max-width: 33.33%;
	}
}
.panes .pane-spacer.two-thirds{
	flex-basis: 66.66%;
}
@media (min-width:769px){
	.panes .pane-spacer.two-thirds-max{
		max-width: 66.66%;
	}
}
@media (max-width:768px){
	.panes .pane-spacer.two-thirds{
		flex-basis: 100%;
	}
	.panes .pane-spacer.quarter, 
	.panes .pane-spacer.one-third{
		flex-basis: 50%;
	}
}
@media (max-width:480px){
	.panes .pane-spacer.two-thirds, 
	.panes .pane-spacer.half,
	.panes .pane-spacer.quarter, 
	.panes .pane-spacer.one-third{
		flex-basis: 100%;
	}
}
.pane-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pane-header h2, .pane-header h3, .pane-header h4{
	margin: auto 0;
	padding: 2vh 0;
}
.pane-header .list-actions, .pane-header .pane-actions{
	display: inline-block;
}

/* lists */
.overflow-scroll .responsive-list-results{
	max-height: 30vh;
	overflow-y: auto;
}
.responsive-list ul, .pane-actions ul{
	padding: 0;
	margin: 0;
}
.responsive-list li{
	padding: 2vh 0vw 2vh 1vw;
	margin: 0;
	list-style: none;
	border-top: 1px solid var(--graytone-2, var(--default-graytone-2));

	display: flex;
    justify-content: space-between;
	align-items: center;
	
}
.responsive-list li.no-border{
	border-top: 0;
}
.responsive-list .list-actions{
	text-align: right;
	display: inline-block;
}
.responsive-list .list-item-content{
	width: 70%;
}
.responsive-list  .list-item-actions{
	width: 40%;
	text-align: right;
}
.list-actions, .list-item-actions{
	padding:  1vh 0vw 1vh 1vw;
}
.list-actions li, .list-item-actions li, .pane-actions li{
	display: inline;
	border: none;
	padding: 0;
}
.responsive-list a
{
	color: var(--blue, var(--default-blue));
	font-size: var(--font-size-medium, var(--default-font-size-medium));
}
.list-actions, .list-item-actions, .pane-actions{	
	white-space: nowrap;
}

/* disabled actions */
pane-actions[disabled], list-actions[disabled], list-item-actions[disabled]{
	display: none !important;
}

/* form */
.inline-form, .inline-form table, .inline-form table tr{
	background-color: var(--white, var(--default-white)) !important;
}
.pane .inline-form{
	margin-top: 1vh;
	padding-top: 1vh;
	border-top : 1px solid var(--graytone-2, var(--default-graytone-2));
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
	.inline-form td{
		padding: 1vh 1vw;
	}
	.responsive-table td.default-padding-on-mobile{
		padding: 1vh 1vw;
	}
}

.responsive-form{
	margin: 0 auto;
}
.responsive-form fieldset{
	width: 100%;
}
.responsive-form legend:not(:first-child){
	padding: 2vh 0 0 0;
}
.responsive-form label{
	display: block;
	box-sizing: border-box;
}
.responsive-form input[type="text"], 
.responsive-form input[type="password"], 
.responsive-form input[type="email"],
.responsive-form input[type="number"] {
	display: block;
	box-sizing: border-box;
	margin: 0;
	width:100%;
}
.responsive-form textarea{
	display: block;
	box-sizing: border-box;
	min-height: 10vh;
	margin: 0;
	width:100%;
}

.responsive-form td, .responsive-form th{
	padding: 1vh;
	border: none;
}

.responsive-form table { 
	width: 100%; 
	border-collapse: collapse;
	border: none;
}
  
.responsive-form button{
	padding: 1vh 1vw;
	color: var(--graytone-7, var(--default-graytone-7));
	border: 0;
	border-radius: 34px;
	background-color: var(--graytone-2, var(--default-graytone-2));
	display: inline-block;
	cursor: pointer;
	height: auto;
	width: auto;
}


/* regular buttons */

a.button {
    padding: 1vh 1vw;
    color: var(--graytone-7, var(--default-graytone-7));
    border: 0;
    border-radius: var(--button-border-radius, var(--default-button-border-radius));
    background-color: var(--graytone-2, var(--default-graytone-2));
    display: block;
    cursor: pointer;
    height: auto;   
	text-decoration: none;	
}
a.button.primary {
    background-color: var(--blue, var(--default-blue));
    color: var(--white, var(--default-white));
}
a.button .spinner{
    width: 20px;
    height: 20px;
    display: none;
}

.spin{
	animation:spin 4s linear infinite;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/* action buttons */
a.action{
	margin: 0;
	padding: 1vh 1vw;
	color: var(--graytone-7, var(--default-graytone-7));	
	background-color: var(--graytone-2, var(--default-graytone-2));
	display: inline-block;
	cursor: pointer;
	height: auto;
	width: auto;
}
.dropdown-menu li a{
	background-color: var(--white, var(--default-white));
}
a.action:hover{
	text-decoration: none;
}
a.action.disabled{
	color: var(--graytone-4, var(--default-graytone-4));;
	cursor: default;
}
a.action.rounded{
	border-radius: var(--button-border-radius, var(--default-button-border-radius));
}
a.action.rounded-left{
	border-radius: var(--button-border-radius, var(--default-button-border-radius)) 0px 0px var(--button-border-radius, var(--default-button-border-radius));
	padding: 1vh 0.6vw 1vh 0.6vw;
}
a.action.rounded-right{
	border-radius: 0px var(--button-border-radius, var(--default-button-border-radius)) var(--button-border-radius, var(--default-button-border-radius)) 0px;
	padding: 1vh 0.4vw 1vh 0.4vw;
}

/* no style links */
a.no-style{
	color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
}

/* slider */

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	padding: 0;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  /* The slider */
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--graytone-3, var(--default-graytone-3));
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: var(--white, var(--default-white));
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }

  input:checked:not([disabled]) + .slider {
	background-color: var(--blue, var(--default-blue));
  }
  
  input:focus:not([disabled]) + .slider {
	box-shadow: 0 0 1px var(--blue, var(--default-blue));
  }

/* non-slider checkbox */
  .checkbox {
	display: block;
	position: relative;
	margin: 0vh 1vw;
	cursor: pointer;
	font-size: 22px;
	line-height: 24px;
	height: 24px;
	width: 24px;
	clear: both;
 }

.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkbox .checkbox-visual {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 24px;
	width: 24px;
	background-color: transparent;
	border-radius: 5px;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	border: 2px solid var(--default-graytone-1);
}


.checkbox input:checked ~ .checkbox-visual {
	background-color: var(--white, var(--default-white));
	border-radius: 5px;
	-webkit-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	opacity:1;
	border: 2px solid var(--white, var(--default-white));
}


.checkbox .checkbox-visual::after {
	position: absolute;
	content: "";
	left: 12px;
	top: 12px;
	height: 0px;
	width: 0px;
	border-radius: 5px;
	border: solid var(--blue, var(--default-blue));
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(0deg) scale(0);
	-ms-transform: rotate(0deg) scale(0);
	transform: rotate(0deg) scale(0);
	opacity:1;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
}


.checkbox input:checked ~ .checkbox-visual::after {
	-webkit-transform: rotate(45deg) scale(1);
	-ms-transform: rotate(45deg) scale(1);
	transform: rotate(45deg) scale(1);
	opacity:1;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid var(--blue, var(--default-blue));
	border-width: 0 2px 2px 0;
	background-color: transparent;
	border-radius: 0;
}



/* non-slider checkbox ripple effect */
.checkbox .checkbox-visual::before {
	position: absolute;
	content: "";
	left: 10px;
	top: 10px;
	width: 0px;
	height: 0px;
	border-radius: 5px;
	border: 2px solidvar(--blue, var(--default-blue));
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);  
}

.checkbox input:checked ~ .checkbox-visual::before {
	left: -3px;
	top: -3px;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	-webkit-transform: scale(3);
	-ms-transform: scale(3);
	transform: scale(3);
	opacity:0;
	z-index: 999;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
}


/* non-slider circular checkbox */
.checkbox .checkbox-visual.circular {
	border-radius: 50%;
	border: 2px solid var(--default-graytone-1); 
}

.checkbox input:checked ~ .checkbox-visual.circular {
	background-color: var(--blue, var(--default-blue));
	border-radius: 50%;
	border: 2px solid var(--blue, var(--default-blue));
}
.checkbox input:checked ~ .checkbox-visual.circular::after {
	border: solid var(--white, var(--default-white));
	border-width: 0 2px 2px 0;
}
.checkbox .checkbox-visual.circular::after {
	border-radius: 50%;
}

.checkbox .checkbox-visual.circular::before {
	border-radius: 50%;
	border: 2px solid var(--default-graytone-1);
}

.checkbox input:checked ~ .checkbox-visual.circular::before {
	border-radius: 50%;
}

/* statistic views */

.statistic{
	height: 80%;
	display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
}

.statistic span{
	font-size: 6rem;
}

.mini-statistic span{
	font-size: 1rem;
}
.mini-statistic .counter{
	display: inline-block;
	padding: .5vmax;
	margin-right: .5vw;
	border-radius: 8px;
	text-align: center;
}

/* loading */

.loading{
	width: 100%;
	height: 80%;
	min-height: 18vh;

	display: flex;
	flex-direction: column;
	justify-content: center;
}
.loading img{
	content:url("/img/loading-black.png");
}

.gray .loading img, .blue .loading img{
	content:url("/img/loading-white.png");
}

/* positioning */

.centered{
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.middle{
	display: block;
    margin-top: auto;
    margin-bottom: auto;
}

.content-centered-screen
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.rounded{
	border-radius: var(--button-border-radius, var(--default-button-border-radius));
}

.left{
	float: left;
}

.noshow { display: none !important; }
.showaftersearch { display: none; }

/* background - text color combinations */

.blue{
	background-color: var(--blue, var(--default-blue)) !important;
	color: var(--white, var(--default-white)) !important;
}
.red{
	background-color: var(--red, var(--default-red)) !important;
	color:var(--white, var(--default-white)) !important;
}
.green{
	background-color: var(--green, var(--default-green)) !important;
	color:var(--white, var(--default-white)) !important;
}
.orange{
	background-color: var(--orange, var(--default-orange)) !important;
	color: var(--white, var(--default-white)) !important;
}
.gray{
	background-color: var(--gray, var(--default-gray)) !important;
	color:var(--white, var(--default-white)) !important;
}
.darkgray{
	background-color: var(--graytone-5, var(--default-graytone-5)) !important;
	color:var(--white, var(--default-white)) !important;
}
.white{
	background-color:var(--white, var(--default-white)) !important;
	color: var(--graytone-7, var(--default-graytone-7)) !important;
}
.yellow{
	background-color: var(--yellow, var(--default-yellow)) !important;
	color: var(--graytone-7, var(--default-graytone-7)) !important;
}


.clearfix {
	overflow: auto;
}
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.search-results{
	border: solid 1px var(--graytone-1, var(--default-graytone-1));
	background-color: var(--white, var(--default-white));
	position: absolute;
	min-width: 200px;
	z-index: 1000;
}
.search-results li{
	padding: 2vh 1vw 2vh 1vw;
	margin: 0;
	list-style: none;
	border-top: 1px solid var(--graytone-2, var(--default-graytone-2));
	display: block;	
	cursor: pointer;
}


/* authority profile top left */
.authority-profile{
	text-align: center;
	padding: 2vh 2vw;
}
.org-picture{
	margin: auto;
	border-radius: 50%;	
}
@media (max-width:768px){
	authority-selector, #org-name{
		line-height: 32px;
	}
	.org-picture{
		width: 32px;
		height: 32px;
	}
}
@media (min-width:769px){
	authority-selector, #org-name, #org-picture-container{
		display: block;
	}
	.org-picture{
		margin-bottom: 1vh;
		width: 6vw;
		height: 6vw;
	}
}
authority-selector > span, .authority-profile a{	
	color: #fff;
	text-decoration: none;
	font-size: 1.2vmin;
	white-space: nowrap;	
}
@media (max-width:480px){
	authority-selector > span, .authority-profile a{
		font-size: 1.2vmax;
	}
}
authority-selector > ul{
	padding: 0;
	margin: 0;
	list-style: none;
}