/**** styles for ERM-CH23 course ****/

:root {
    --red:#ca3333;
    --blue:#0066ca;
	--green:#d1e0e1;
	--green-dark: #578385;
    --gray:#e0e0e0;
    --color-body:#000;
    --color-bckg:#fff;

}

.container-fluid {
	padding:0px
}

/* headers*/

#header-block {
	height:90px;
	background-color:var(--red);
	padding:0px 15px;
	margin:0px 0px 10px;
	position:relative
}

#logos{
	width:70%
}

#service {
	width:180px;
	color:#ffffff !Important;
	margin-top:38px
}

.language-block a, a#menubutton  {
	
	color:#ffffff !important
}

.language-block a.active {
	background-color:#fff !important;
	color:#000 !important
}

[id$=switch] {
	font-size:18px;
	padding:0.3rem !important
}

#menu-start  {
	position:relative
}

#menu-start  #gl-glmenu {
	right:0px;
	top:55px
}

#menu-start  #gl-glmenu .triangle {
	right:12px
}

/*
.green {
	background-color: var(--green)
}

.green-dark {
	background-color: var(--green-dark)
}

.bold h2{
	font-weight: 600
}*/

[id^=header-sub]  {
	position:relative;
	margin:20px 0px 10px;
	height:80px;
	background-color:#d1e0e1
}


#header-sub-nomodule, .col3-descr {
	margin-bottom:20px
}

#header-sub .col-3,  #header-sub-nomodule .col-8 {
	padding-right:0px
}

#header-sub .col-4,  #header-sub-nomodule .col-4{
	padding-left:0px
} 

#header-sub .col-5 {
	padding-left:0px;
	padding-right:0px;
}

.header-sub-icon-txt {
	color:#000;
	font-size:1rem
}

.headline {
	border-top:none
}

#gl-glmenu {
	position: absolute;
  top: 65px;
  z-index: 1000;
  right: 15px;
}



/*nav left */
.mod-sub-title {
	color:var(--red);
	font-size:20px
}



[id^=module] {
	padding:0.3rem 0.3rem 0.3rem 20px
}

[id^=nav-mod] {
	margin-top:0px
}



.pict-mod1 img {
  width: 75%;
  display: block;
  margin: 60px auto 0px;
}

.pict-mod2 img{
	margin-top:50px
}

.pict-mod4 img{
	display:block;
	width: 55%;
	margin:0px auto
}

.nav-img {
	padding:0px 15px 35px
}

	
#red-bar {
	background-color:var(--red);
	width:12px
}

.red-bar-s {
	width:8px;
	height:16px
}

.mod-sub {
	border-left: 8px solid transparent;
  	padding-left: 10px;
  	margin-bottom: 20px;
}

.mod-sub-selected {
	border-left-color:var(--red)
}

#modtitle {
	background-color:var(--green-dark);
	color:#fff;
	width:100%;
	line-height:80px;
	font-weight:500;
	font-size:30px;
}



#moddescr {
	font-weight:600;
	font-size:18px;
	padding-left: 20px;
	color:#000;	
	width:100%;
}




/* module nav top bar */
#local-bar, #global-bar {
	background-color:var(--green);
	width:100%;
	padding:0px;
	height:80px
}

.gl-icon {
	width:36px;
	height:36px;
	display:inline-block
}

[id^=gl-] {
	position:absolute;
	top:65px;
	z-index:1000;
	right:-10px
}


[id$=-menu] {
	position:absolute;
	top:10px;
	border:4px solid var(--green-dark);
	border-radius:10px;
	background-color:#fff;
	width:11rem;
	line-height:2rem;
	padding:10px;
	right:-5px
}

#menu-menu a {
	border-bottom:1px solid #578385;
	font-size:1rem
}

.menu-item {
	font-size: 18px;
  	padding: 0.6rem !important;
}

.control-sub {
	position:relative
}

.triangle {
	position:absolute;
	width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 7px solid transparent;  
  border-bottom: 10px solid var(--green-dark);
  right:38px
}


#global-bar span{
	display:inline-block;
	width:50px;
	line-height:65px;
}



.bi-house-door-fill {
	color:#ca3333 !important;
	padding-right:5px
}




/*** footer***/

#footer {

	border-top:4px solid #578385;
	padding-top:15px;
	margin:50px 0px 20px;
	font-size:16px;
}

#footer a, #footer p, #footer span {
	
	border-bottom:none
}

#sponsor{
	width: 430px;
}

.sponsor-logos {
	background-color: #ffffff;
	padding:15px
}


.sponsor-logos img {
	width:100%
}




/*** imagewithtext tile ***/

.d-flex {
	display:flex !important
}

.d-flex div.iwt.tile {
  width: 100%;
  margin-bottom: 1.875rem;
  padding: 25px 10px;
  border: 1px solid #ccc;
  font-size:1.2rem  
}

.d-flex div.iwt.tile.icon {
	 padding: 15px 10px 10px;
	 }

.d-flex div.iwt.tile p {
	hyphens:auto
}

.iwt.tile.icon {
	box-shadow: .313rem .313rem .313rem #ccc;
}

.iwt.tile .w-100 {
  margin-bottom: 1rem;
}

.iwt.tile.icon.green {
	background-color: var(--green) !important
}

/* bs-text */


.d-flex div.iwt.tile.module-icon {
	padding:30px 
}

.bs-text-language.letter .headline {
	border-top: 1px solid #000 !important;
	margin-top:20px
}

.bs-text-language.letter h1, .bs-text-language.letter h2, .bs-text-language.letter h3, .bs-text-language.letter h4 {
	font-weight:600
}

/* collapsible titles */
.arrow-down {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  fill='currentColor'  viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1'/></svg>");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
  margin-left: 5px;
  width: 20px;
  height: 30px;
}


 a.iwt-toggle.headline, a.text-toggle {
  display: block;
  position: relative;
  border-top: 1px solid #000;
  padding-right: 2rem;
}

a.iwt-toggle .sed-arrow-down, .bs-text a.text-toggle .sed-arrow-down {
  position: absolute;
  background: 100% 100% no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/%3e%3c/svg%3e");
}

a.h2 .sed-arrow-down {
  top: 0px;
  right: -6px;
  width: 2.4rem;
  height: 2.4rem;
}

a.h3 .sed-arrow-down {
  top: 0px;
  right: -3px;
  width: 2rem;
  height: 2rem;
}

a.h4 .sed-arrow-down {
  top: 0px;
  right: 0px;
  width: 1.6rem;
  height: 1.6rem;
}

/*** imagewithtext .exercise***/

.iwt.exercise {
	margin-bottom: 60px !important
}

.iwt.exercise .add-content h2, .iwt.exercise .add-content h3, .iwt.exercise .add-content h4 {
	font-size:1rem !important;
	margin-bottom:0px
	}
	

 .iwt.exercise .add-content a.iwt-toggle.headline {
 	background-color:#d1e0e0;
	padding:0.5rem;
	border:none !important
 }
 
 .iwt.exercise .add-content a.h2 .sed-arrow-down,  
 .iwt.exercise .add-content a.h3 .sed-arrow-down,  
 .iwt.exercise .add-content a.h4 .sed-arrow-down {
  top: 5px;
  right:0px;
  width:1.6rem;
  height:1.6rem
  }