/*

OpenCC Main CSS Code
Date of publish: 24.03.2021

(CC) CC BY-NC-SA 4.0


definition of all global content related site settings

*/

/*
libary settings
*/
.v_liste{
	position: relative;
	width: 100%;
	padding: 2em 0.5em 2em 0.5em;
	display: grid;
	grid-template-columns: repeat(auto-fill, 22em);
	grid-template-rows: auto;
	gap: 2em 1em;
    align-items: start;
	justify-items: center;
	justify-content: space-around; 
}

/* libary header */
p.lib_nav{
	position: relative;
	grid-row: 1;
	padding: 0.25em 0.75em;
	font-size: var(--occ_caption_font_size);
	font-weight: 300;
	text-transform: uppercase;
    display: grid;
	grid-template-columns: 1fr;
	align-items: center;
    background: #fff;
}

select#library_settings{
	-moz-appearance: none;
  	-webkit-appearance: none;
  	appearance: none;
  	border: none;
	-moz-padding-start: calc(10px - 3px);
	padding:3px 0 2px 2em;
	margin: 0px;
	font-size: var(--occ_caption_font_size);
	font-weight: 300;
	text-transform: uppercase;
	cursor: pointer;
	background: var(--occ_white);
	color: var(--occ_active);
}

#lib_navigation::before {
	font-family: fontello;
	content: '\f0c9';
	font-size: 16px;
	position: absolute;
	left: 1.5em;
	top: calc(50% - 8px);
	color: #aaa;
	pointer-events: none;
	z-index: 1;
  }

select#library_settings option{
	padding: 5px 0 5px 0;
	text-transform: initial;
	font-size: var(--occ_text_font_size);
	line-height: 1.5em;
}

p.lib_nav span:first-child{
	flex-grow: 1;
	margin: 0.25em 0;
	color: var(--occ_active);
}

button{
	position: relative;
	color: var(--occ_white);
	background: var(--occ_complementary);
	border: none;
	outline: none;
	border-radius: 0.3em;
	overflow: hidden;
	margin: 0.25em 0;
	display: flex;
	height: 3em;
	cursor: pointer;
	z-index: 0;
}

button::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	background: #7ec2c8;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 300ms ease-in-out;
}

button:hover::before{
	transform: scaleX(1);
	transform-origin: left;
	box-shadow: inset 2px 2px 10px 0px rgba(0,0,0,0.2);
}

button span:first-child{
	align-self: center;
	flex: none;
	padding: 0.5em 1em;
	background: rgba(0, 0, 0, 0.1);
	height: 100%;
	z-index:2;
}
button span:last-child{
	align-self: center;
	width: 100%;
	text-align: center;
	padding: 0 1em;
	text-transform: uppercase;
	z-index:2;
}

button img{
	height: 2em;
}

/* libary content */
.alpha_list{
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.10);
	min-width: 20.5em;
}

.alpha_list h3{
	position: relative;
	padding: 0.5em;
	border-radius: 0.2em 0.2em 0 0;
	text-align:center;
}
.alpha_list h3 span:first-child{flex-grow: 1;}

.alpha_list ul{
	list-style-type:none;
	background: rgba(255,255,255,0.9);
	border-radius: 0 0 0.2em 0.2em;
}
.alpha_list li{
	padding: 0 0.25em 0 0.25em;
	height: 2.5em;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: right;
	gap: 0.25em;
}

.lib_content{
	display: block;
	width: 100%;
}

.cat_kind{
	height: 60%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	justify-self: end;
	background: var(--occ_highlight_bg);
}
.P{
	background: var(--occ_highlight_bg);
	color: var(--occ_complementary);
	border: 1px solid var(--occ_complementary);
}
.B{
	background: var(--occ_highlight_bg);
	color:#e74c3c;
	border: 1px solid #e74c3c;
}
.S{
	background: var(--occ_complementary);
	color: var(--occ_highlight_bg);
	border: 1px solid var(--occ_highlight_bg);
}

.alpha_list li:nth-child(even) {background: rgba(31, 162, 186, 0.05);}
.alpha_list li:hover{background: rgba(31, 162, 186, 0.1);}

.tpd-tooltip .pic_preview{
	width: 150px;
	height: 150px;
}

span.lib_content{
	display: inline-block;
	width: 15em;
}

span.lib_nr{
	display: inline-block;
	width: 5em;
}

span.alpha-color{
	display: inline-block;
	width:0.3em;
}

.pre_picture{
	position: absolute;
	width: 15em;
	height: 15em;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.10);
	backdrop-filter: blur(8px);
	background: rgba(10,82,110,0.2);
	border-top: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--occ_corner);
	z-index: 1;

	display: none;
}

.norm_h3color{background: var(--occ_active); color: var(--occ_white);}

/*
editor
*/

/* editor header */
.dividing_line{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1em;
	align-items: center;
	width: 100%;
	margin: 3em 0 1em 0;
}

.dividing_line span:first-child{
	color:#555555;
	text-transform: uppercase;
	font-size: var(--occ_text_font_size);
	font-weight: 300;
}

.dividing_line span:last-child{
	content: "";
	display: block;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #111111;
}
.editor_bg{
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 0;
}

.edit_nav{
	position: relative;
	width: 100%;
	padding: 0.25em 1em;
    background: var(--occ_active);
	color: var(--occ_white);
}
	
.editor_bg nav h2{
	font-weight: 700;
	font-size: 2.5rem;
	color: var(--occ_white);
	margin-bottom:1em;
	margin-top: 1em;
	text-align: center;;
}

.editor_bg nav h2 span:last-child{
	font-weight: 300;
	color: rgba(76,207,225,1);
	font-size: var(--occ_caption_font_size);
}

.select-box{
	position:relative;
	margin: 2em 0 2em 0;
}
.select-box:first-child{margin-top: 3em;}

.form-item{
	position: relative;
	width: 100%;
	padding-top: 2em;
}

#picker{
	display: grid;
	position:relative;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	row-gap: 1em;
	align-items: center;
	width: 100%;
}
.div_overlay, .div_overlay_two, .div_overlay_three{
	content: "";
	position: absolute;
	display: block;
	width:100%;
	height: 100%;
	background: rgba(51,51,51,0.7);
	z-index: 2;
	backdrop-filter: grayscale(100%);
	cursor: default;
	z-index: 2;
}

.dl_btn_two{
	width: 100%;
	pointer-events: none;
}

.dl_btn_two span:nth-child(2){
	align-self: center;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	z-index: 1;
}

label.color-label{
	display: inline-block;
	width: 8em;
	font-size: var(--occ_text_font_size);
}

input.color-picker{
	border-bottom: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-radius: 5px 0 5px 0;
	padding: .43em .8em;
	max-width: 13em;
	background-color: white;
}

input.color-picker:focus{
	border: 1px solid  rgba(0,0,0,0.7);
}

form{
	width: 100%;
	color: var(--occ_white);
}
	
form h3{margin: 1em 0 0.25em 0;}
#get_svg_data{display:none;}
.dl_btn{width: 100%;}
	
.edit_bg{
	position: relative;
	width: calc(100% - 2em);
	aspect-ratio: 1/1;
	padding: 1em;
	margin: 1em;
	text-align:center;
	background-image:url('../graphic/editor_bg.svg')
}
	
.svg_container{
	position: relative;
	height:100%;
	text-align: left;
	margin: 0 auto;
	aspect-ratio: 1/1;
}

/* switch */
input#cat_switch{
	display: none;
}
#button_bg{
	position: absolute;
	display: block;
	background:#555555;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 #333333;
	width: calc(100% - 1.6em - 2px);
	height: 35px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	color: #ffffff;
	margin-left: 1px;
}
label#button_bg::before{
	display: block;
	content: "";
	height: 34px;
	width: calc(50% - 1px);
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background:#98dde3;
	margin-left: -1px;
	margin-top: -1px;
	cursor: default;
	transition: margin-left 0.2s ease-in-out;
}
label#button_bg:hover{
	background: #444444;
	box-shadow: inset 0 0 10px #333333;
}
#cat_switch:checked + #button_bg::before{
	margin-left: calc(50%);
}
#switch_content{
	position: relative;
	height: 35px;
	width: calc(100% - 2px);
	display: grid;
	grid-template-columns: 35px 1fr 1fr 35px;
	pointer-events: none;
	color: #ffffff;
	gap: 5px;
	left: 1px;
	text-transform: uppercase;
}
#switch_content::before{
	position: absolute;
	display: inline-block;
	content: "";
	background: rgba(0,0,0,0.2);
	height: calc(100% - 2px);
	aspect-ratio: 1 / 1;
	left: 0;
	border-radius: 4px;
	margin: 1px;
}
#switch_content::after{
	position: absolute;
	display: inline-block;
	content: "";
	background: rgba(0,0,0,0.3);
	height: calc(100% - 2px);
	aspect-ratio: 1 / 1;
	right: 0px;
	border-radius: 4px;
	margin: 1px;
}
#switch_content span{
	place-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	z-index: 1;
	font-weight: 300;
}
#switch_content span:first-child{
	border: solid 2px var(--occ_white);
	color: var(--occ_white);
	font-weight: 500;
}
#switch_content span:nth-child(2){
	justify-self: start;
}
#switch_content span:nth-child(3){
	justify-self: end;
}
#switch_content span:last-child{
	border: solid 2px #98dde3;
	color: #98dde3;
	font-weight: 500;
}

.info_text{
	font-weight:300;
}

/* toggle */

#options{
	position: relative;
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid  rgba(0,0,0,0.1);
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: center; 
}

.toggle-btn{
	width: 43px;
	height: 23px;
	border-radius: 17px;
	display: inline-block;
	position: relative;
	background : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVQ4T42TaxHCQAyENw5wAhLACVUAUkABOCkSwEkdhNmbpHNckzv689L98toIAKjqGcAFwElEFr5ln6ruAMwA7iLyFBM/TPDuQSrxwf6fCKBoX2UMIYGYkg8BLOnVg2RiAEexGaQQq4w9e9klcxGLLAUwgDAcihlYAR1IvZA1sz/+AAaQjXhTQQVoe2Yo3E7UQiT2ijeQdojRtClOfVKvMVyVpU594kZK9zzySWTlcNqZY9tjCsUds00+A57z1e35xzlzJjee8xf0HYp+cOZQUQAAAABJRU5ErkJggg==') no-repeat 26px center;
	background-color:#e74c3c;
	background-size: 25%;
	cursor: pointer;
	-webkit-transition: background-color .40s ease-in-out;
	-moz-transition: background-color .40s ease-in-out;
	-o-transition: background-color .40s ease-in-out;
	transition: background-color .40s ease-in-out;
	pointer-events: none;
	&.active{
	  background : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmUlEQVQ4T6WT0RWDMAhFeZs4ipu0mawZpaO4yevBc6hUIWLNd+4NeQDk5sE/PMkZwFvZywKSTxF5iUgH0C4JHGyF97IggFVSqyCFga0CvQSg70Mdwd8QSSr4sGBMcgavAgdvwQCtApvA2uKr1x7Pu++06ItrF5LXPB/CP4M0kKTwYRIDyRAOR9lJTuF0F0hOAJbKopVHOZN9ACS0UgowIx8ZAAAAAElFTkSuQmCC') no-repeat 5px center;
	  background-color: #2ecc71;
	  background-size: 30%;
	  .round-btn{
		left: 23px;
	  }
	}
	.round-btn{
	  width: 16px;
	  height: 16px;
	  background-color: #fff;
	  border-radius: 50%;
	  display: inline-block;
	  position: absolute;
	  left: 3px;
	  top: 50%;
	  margin-top: -8px;
	  -webkit-transition: all .30s ease-in-out;
	-moz-transition: all .30s ease-in-out;
	-o-transition: all .30s ease-in-out;
	transition: all .30s ease-in-out;
	}
	.cb-value{
	  position: absolute;
	  left:0;
	  right:0;
	  width: 100%;
	  height: 100%;
	  opacity: 0;
	  z-index: 9;
	  cursor:pointer;
	}
  }

/* Download & Impressum */

section.dl_prime{
	margin: 1em;
	padding: 2.5em 1em;
	background: var(--occ_active);
	color: var(--occ_white);
    display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	column-gap: 1em;
	row-gap: 2em;
	border-radius: var(--occ_corner);
	line-height: 1.3em;
	transition: background 250ms ease-in-out;
}

section.dl_prime:hover{
	background:#444444;
}

section.dl_prime button{
	background: var(--occ_white);
	color: var(--occ_active);
}

section.dl_prime button::before{
	background: #98DDE3;
}

section.dl_prime button span:first-child{
	background: rgba(31, 162, 186, 0.3);
}

section.dl_prime h3{
	margin-bottom: 0.75em;
}

section.dl_prime p{
	color: #98dde3;
	margin: 0.25em 0;
}

section.dl_main{
	margin: 1em;
	padding: 0 1em;
	background: var(--occ_white);
	color: var(--occ_black);
	border-radius: var(--occ_corner);
}

section.dl_main h3{
	padding: 0.75em 0;
}

section.dl_main ul{
	position: relative;
	width: 100%;
}

section.dl_main ul li{
    display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 1em;
	padding: 1em 0.5em;
	border-bottom: 1px solid #ddd;
	transition: background 250ms ease-in-out;
}

section.dl_main ul li:hover{
	background: rgba(31, 162, 186, 0.05);
}

section.dl_main ul li:last-child{
	border-bottom: none;
}

span.dlb a{
	position: relative;
	color:#0b5d7e;
	font-weight: 300;
	text-transform: uppercase;
	text-decoration: none;
}
	
span.dlb  a::before{
	position: absolute;
	content: '';
	display: block;
	height: 1px;
	width: 100%;
	bottom: -2px;
	background: #0b5d7e;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 300ms ease-in-out;
}

span.dlb  a:hover::before{
	transform: scaleX(1);
	transform-origin: left;
}

i.license::before{
	content: "\A";
    white-space: pre;
}

i.license{
	line-height: var(--occ_caption_font_size);
}

i.license a{
	color: var(--occ_active);
}

/* 
participate 
*/

.close_btn{
	position: absolute;
	display: block;
	right: calc(12.5% + 1em);
	top: calc(50% - 12.5rem - 2em);
	height: 2em;
	width: 2em;
	background: var(--occ_complementary);
	border-radius: 0.4em 0.4em 0 0;
		
	display: flex;
	align-items: center;
	justify-content : center;
		
	cursor: pointer;

	z-index: 2;
}

input#close {
	display:none;
	z-index: 1000;
}

.close_btn span::before,
.close_btn span::after{
	content: '';
	position: relative;
	display: block;
	background: #eee;
	height: 3px;
	width: 1.25em;		
	border-radius: 2px;
}	 

.close_btn span::before{
	bottom: 0.5em;
	transform: translateY(0.6em) rotate(-45deg);
}
.close_btn span::after{
	top: 0.5em;
	transform: translateY(-0.6em) rotate(45deg);
}

#close:checked ~ .user_response_bg{
	display: none;
}

#close:checked + .close_btn{
	display: none;
}

.user_response_bg{
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75);
	z-index: 1;
	backdrop-filter: blur(8px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.response_container{
	position: absolute;
	width: 75%;
	height: 25rem;
    background: rgb(221,221,221);
    background: linear-gradient(180deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
	border-radius: 0.4em;
	padding: 2em;
	font-size: var(--occ_text_font_size);
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.6;
}

.response_container::after {
	content: "";
	position: absolute;
	padding: 0.5em;
	right: 0;
	top: 0;
	width: calc(100% - 1em);
	background: var(--occ_complementary);
	border-radius: 0.4em 0.4em 0 0;
}

#mail_text{
	background: rgba(0,0,0,0);
	color: var(--occ_active);
}

@media (min-width: 770px) {
	.response_container{
		width: 50%;
	}
	.close_btn{
		right: calc(25% + 1em);
	}
}

form#participate{
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 4em;
	height: 100%;
}

#participate ul{
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	top: 0;
}

#participate li{
	position: relative;
	margin-top: 2em;
	list-style: none;
	align-self: end;
}

#participate li:nth-child(4){
	margin-bottom:2.8em;
}

.upload_btn{
	display: none;
}

#participate li:last-child{ 	
	height: 100%;
	margin-bottom: 2em;
	align-self: stretch;
}

#participate div{
	position: relative;
	margin: 2.5em 1em 1em 1em ;
}

.edit_nav ul{
	margin-top: 3em;
}

/*
about occ settings
*/


section.dl_main_occ{
	margin: 1em;
	padding: 0 1em 1em 1em;
	background: var(--occ_white);
	color: var(--occ_black);
	border-radius: var(--occ_corner);
	line-height: 1.6em;
}

section.dl_main_occ h3{
	display: inline-block;
	padding: 0.75em 2em;
	color: var(--occ_white);
	background-color: var(--occ_active);
	margin: 2em 0 1em 0;
}

section.dl_main_occ h3:first-child{margin-top: 1em;}
section.dl_main_occ h3:last-child{margin: 2em 0 0 0;}

section.dl_main_occ h4{
	font-weight: normal;
	font-size: var(--occ_caption_font_size);
	color: var(--occ_active);
	margin-top: 1em;
	text-transform: uppercase;
}

section.dl_main_occ p{
	padding: 0.5em 0;
}

section.dl_main_occ p.list{
	margin-left: 2.5em;
}
section.dl_main_occ p.list{
	margin-left: 2.5em;
}
section.dl_main_occ p.list:last-child{margin-bottom: 1em;}