/**
 *
 * Sidebar settings
 * and addentums to other styles
 */
 
/* hide normal help center */ 
#_help {
	display: none;
}

/* slide menu open left */
div.header-wrapper .header-map-button > .navbar-toggle {
	margin-right:15px;
}

/* slide quit left */
button.fp-btn.quit {
	margin-right:25px;
}


.btn.help {
	 
	background-color: #00ade6;
	color: white;
	
	border: none;
	width: 164px;
	height: 55px;
 	span.fp-icon
	font-size: 1.2em
}


.btn.help.open {
	position: absolute;
	top:   0px;
	right: 0px;
	transform: rotate(-90deg) translate(-54px,54px);
}


.btn.help.close {
	margin-top:  0px;
	margin-left: -164px;
	transform: rotate(-90deg) translate(-54px,54px);
}


@media (max-width: 991px) {
	
	.btn.help {
	}

	.btn.help.open {
		top:   0px;
		right: 0px;
		width: 143px;
		height: 45px;
		transform: rotate(-90deg) translate(-49px,49px);
	}
	
	.btn.help.close {
		margin-top:  0px;
		margin-left: -143px;
		width: 143px;
		height: 45px;
		transform: rotate(-90deg) translate(-49px,49px);
	}
	
	button.fp-btn.quit {
		margin-right: 40px;
	}
	
	div.header-wrapper .header-map-button > .navbar-toggle {
    	margin-right: 35px;
	}
}







.btn.help:hover, 
.btn.help:focus, 
.btn.help:active, 
.btn.help.active, 
.open>.dropdown-toggle.btn.help, 
.btn.help:active:focus {
    outline-style:none;
	box-shadow:none;
	/*border-color:transparent;*/
}

.btn.help:hover,  .open>.dropdown-toggle.btn.help, .btn.help:active:focus {
    background-color: #f8f8f8;
    color: #00ade6;
}


.btn.help > .fp-icon::before {
	padding-right: 5px;
    font-family: "Ionicons";
    content: '\f11c';
}

@media (max-width: 991px) {
	.btn.help {
		font-size: 0.95em
	}
}


#sidebar {
	width: 340px;
	position: fixed;
	top:    0px;
	bottom: 0px;
	right: -504px;
	z-index: 999;
	/*background: #f8f8f8;*/
	transition: all 0.3s;
	/*overflow-y: scroll;*/
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}


@media (max-width: 991px) {
	#sidebar {
		width: 275px;
		right: -483px;
	}
}


#sidebariFrame{
	margin-top :-5px;
	margin-left: 0px;
	padding-top: 0px;
	background: #FFF;
	width:100%;
	height:90%;
	border-left: 1px #dcf3ff solid;
	border-bottom: 1px #dcf3ff solid;
}

#sidebar.active {
	right: 0;
}

#sideQuit {
	display: block;
	margin-top: -55px;
	margin-left: 300px;
	
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;	
    background-color: transparent;
    border: 0;
}

#sideQuit:focus, #sideQuit:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

@media (max-width: 991px) {
	#sideQuit  {
		margin-top: -50px;
		margin-left: 237px;	
	}
}



/* bouton to close sidebar */
#dismiss {
	/*width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #269abc;*/
	position: absolute;
	top:  0px;
	left: 0px;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}


/* gray page content */
.overlay {
	top:0px;
	left:0px;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 998;
	display: none;
}

/*
div.footer_right{
	position: absolute;
	right: 10px;
	display: inline;
	text-align:right;
}


div.footer_mentions {
	display: inline;
}

span.version {
	display:block;
}

span.version::after {
	content: " ";
}
*/

/* -- -- -- eWBS special cases -- -- -- */

/* ++ map features ++ */

/* hide play ionicicon */
.map-entry-button.selected > button > span.fp-icon:before {
    font-family: "Ionicons";
    content: "\f363";
    color: #00ade6;
}

/*
 * keep the open button visible instead of play
 */
.map-entry-button.selected > .map-entry-open.collapsed > .fp-icon:before {
    font-family: "Ionicons";
    content: "\f3d3";
} 


.map-entry-button.s_error {
	border-right-width: 3px;
	border-right-style: solid;
	border-left-style: none;
	
    border-right-color: #cc0033;
}

.map-entry-button.valid.s_error > button > span.fp-icon {
    color: #cc0033;
}

/* ++ status features ++ */
.fieldBox.unvisited.required .field > .fp-icon.status:before {
    color: #00ade6;
}

/*
.fieldBox.error.required .field > .fp-icon.status:before {
    color: #cc0033;
}
*/


/* ++ selected features ++ */
div.map-entry-button.selected {
	background-color: #00ade6;
	color: white;
}

/* add border and padding to content w AB */
.Content.withAttachmentBox {
    border: 1px solid #00ade6;
    border-left: 4px solid #00ade6;
    background-color: #f8f8f8;
    padding-left: 1em;
    margin-bottom: 2px;
    border-radius: 3px;
}

.exit.interview button.fp-btn.save {
    margin-right: 30px;
}

@media (max-width: 991px) {
	.exit.interview button.fp-btn.save {
	    margin-right: 50px;
	}
}

/* specific map behaviour */
.map-entry-button.valid.s_error > button > span.fp-icon::before {
    font-family: "Ionicons";
    content: "\f101";
    color: #cc0033;
	padding-left: 5px;
}

.map-entry-button.error.s_unvisited  > button > span.fp-icon-empty::before {
    font-family: "Ionicons";
    content: "\f101";
    color: #cc0033;
	padding-left: 5px;
}

.map-entry-button.noContent.visited > button > span.fp-icon-empty::before {
    font-family: "Ionicons";
    content: "\f122";
    color: #00cc33;
}

.map-entry-button.noContent.visited.s_error > button > span.fp-icon-empty::before {
    font-family: "Ionicons";
    content: "\f101";
    color: #cc0033;
	padding-left: 5px;
}

.map-entry-button.noContent.visited.s_unvisited > button > span.fp-icon-empty::before {
    font-family: "Ionicons";
    content: " ";
}

span.fp-icon-empty:nth-child(2) {
    position: absolute;
    right: 0px;
    top: 10px;
}

/* 
 * Grid with iterations and bottom border
 * L5 
 */

.Grid.Iteration1rows .GridRow,
.Grid.Iteration2rows .GridRow,
.Grid.Iteration3rows .GridRow {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.Grid.Iteration1rows .GridRow .GridCell,
.Grid.Iteration2rows .GridRow .GridCell,
.Grid.Iteration3rows .GridRow .GridCell {
	float: none;
	width: unset;
}

.Grid.Iteration1rows .GridRow:nth-of-type(1n), 
.Grid.Iteration2rows .GridRow:nth-of-type(2n), 
.Grid.Iteration3rows .GridRow:nth-of-type(3n){
    border-bottom: 1px solid rgb(51,51,51);
    margin-bottom: 5px;
}

/*
 * Check option, radio button
 * alignment
 *
 */
label.check-button, label.radio-button {
    display: inline-table;
}


label.check-button span.check-text, label.radio-button span.radio-text {
    display: table-cell;
}

/*
 * More marge between status and choice/list box
 *
 */
.fieldBox.ListBox .field > .fp-icon.status,
.fieldBox.Choice .field > .fp-icon.status
{
  position: absolute;
  right: -5px;
  left: auto;
  top: 1px;
  min-width: 10px;
}

/* 
 * update position of note mark inside title
 */
h3 .callNote {
	margin: 0px 3px 0px;
}

h3 .fp-btn.Note {
	padding-top : unset;
}

span.NoteParagraph {
	display:block;
}

span.fp-icon.edit {
    text-align: left;
}