/*
z-indexes:
10000: Interaction blocker in a diaporama widget
	Configurable page options button
	Chart tooltip
10001:  Basic sections above each other (must be above the indicator-input's relative positioning)
    Options filter content
    Action creation modal
10002:  Bin
    Indicator input overlay
    Dashboard info popup
    Camera switcher button
10003: Comment modal on doughnuts
    Filters zone
10005:  Close button
    Login overlay
    Actions plans drop zone
    Slider dots (vue-slider-component)
10006:  Left drawer panel
    Meeting setup
10007: dark-overlay
10008: Comments-modal (must be above dark-overlay for actions in action-per-cause-btn)
	Translation panel
10009: 5W stickers
10010: 5W causes selector overlay
    Picture taker
10015: Five whys overlay
    Ishikawa overlay
    Action items dragged
    PDCA editor
10016: Assistant overlay, Help overlay, IA hints
    Refresh prompt
    Action sheet modal in five whys and ishikawa
10017: Pictures editor
	Minimal left menu
10018: Search results
    Notification
10019: Full menu
    Header
10020: GW audited team's data popup
    Top screen editor
10025: calert
11000: Screensaver
12000: Request loading screen
12001: loading screen
12002: Quick title
13001: Widget overlay
13002: Widget resizable handles
13004: Widget draggable


Text colors
Basic text: #58595B
Highlight (titles, legend): #2A5A91
Something wrong: rgb(192, 15, 21) #C00F15 (dark) or rgb(236, 28, 36) (light)


Background colors
Header & menu: #000000
Basic page: #c9c9c9
Basic sections: #f4f4f4 or #ffffff

*/

.search-category {
	padding: 6px 4px;
}
@keyframes rotation {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}
@-webkit-keyframes rotation {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); }
}
[v-cloak] {
	display: none;
}
.greyed-out {
	opacity: 0.55;
	cursor: default !important;
}
.greyed-out > div {
	cursor: default;
}


/* °°°°°°°°°°°°°°°°° */
/* Assistant overlay */
/* _________________ */
#assistant-overlay .top, #assistant-overlay .bottom {
	width: 100%;
}
#assistant-overlay .top {
	height: 60%;
	white-space: nowrap;
}
#assistant-overlay .bottom {
	height: 40%;
}
#assistant-overlay .top .left, #assistant-overlay .top .right {
	display: inline-block;
	width: 50%;
	vertical-align: top;
	height: 100%;
}
#assistant-overlay .top .left, #assistant-overlay .top .right, #assistant-overlay .bottom {
	padding: 20px 30px;
	box-sizing: border-box;
}
.ia-box-wrapper {
	position: relative;
	height: 100%;
}
.ia-box-wrapper.half {
	width: 50%;
	margin: auto;
}
.ia-box-wrapper .ia-box-head {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 60px;
	z-index: 10002;
}
.ia-box-wrapper .ia-box-head img {
	display: block;
	height: 100%;
	width: auto;
	background: #ffffff;
	border-radius: 2000px;
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.ia-box-wrapper .ia-box {
	position: absolute;
	top: 30px;
	bottom: 0px; left: 0px; right: 0px;
	background: rgb(255,255,255);
	border-radius: 20px;
	box-shadow: 0px 0px 5px #888888;
	padding: 25px 0px;
	display: flex;
	align-items: center;
}
.content-gradient::after, .content-gradient::before {
	content: "";
	width: 100%;
	height: 20px;
	top: 25px;
	left: 0px;
	position: absolute;
	background: url("/images/white-gradient.png");
	background-size: contain;
}
.content-gradient::after {
	transform: rotate(180deg);
	top: auto;
	bottom: 24px;
}
.ia-box-wrapper .ia-box > div {
	width: 100%;
	text-align: center;
	white-space: normal;
	overflow: auto;
	max-height: 100%;
	padding: 25px 0px;
	box-sizing: border-box;
	line-height: 1.5em;
}
.ia-box-wrapper .ia-box .sensei-wrapper {
	display: none;
}
.ia-box-wrapper .ia-box button, .ia-box-wrapper .ia-box a.ia-box__button {
	background: #00A7E1;
	padding: 5px 15px;
	border-radius: 100px;
	border: none;
	color: #ffffff;
	margin-top: 15px;
	box-shadow: none;
	display: inline-block;
}
.ia-modal {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background: rgba(0, 0, 0, 0);
	z-index: -1;
	opacity: 0;
	padding-left: var(--nav-width, 220px);
	padding-top: 60px;
	box-sizing: border-box;
}
.ia-question {
	font-style: italic;
	color: #486498;
}
.ia-highlight {
	box-shadow: 0px 0px 4px 3px #b0cae8;
	border-radius: 10px;
}
.ia-modal .ia-box-content {
	display: flex;
	align-items: center;
}
.ia-modal .content-wrapper {
	width: 70%;
}
.ia-box-text, .ia-modal-text {
	padding: 0px 10px;
}
.ia-modal .ia-modal-btns {
	margin-top: 25px;
}
.ia-box-wrapper .ia-box .ia-modal-btns button {
	margin-bottom: 15px;
	margin-top: 0px;
}
.ia-li-title {
	font-weight: 600;
}
ul ul {
	margin-left: 30px;
}
.option-link span {
	color: #2A5A91;
	cursor: pointer;
}
.option-link span:hover {
	background-color: #dce9f8;
	box-shadow: 0px 0px 4px #dce9f8;
}
.small-card-item {
	background: white;
	box-shadow: 0px 0px 3px #bbbbbb;
	padding: 10px;
	margin-bottom: 7px;
	cursor: pointer;
	width: 100%;
	position: relative;
}
.small-card-item:hover {
	background-color: #c0daf8;
}
.small-card-item.selected {
	background-color: #a0bad8;
}
/* °°°°°°°°°°°°°°°°° */
/* Problem reporting */
/* _________________ */
.voice-reco {
	margin-left: 20px;
	height: 1.4em;
}
.bordered-field {
	border: 2px gray dashed;
}

.drag-handle {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 9px;
	width: 40px;
	cursor: grab;
	box-sizing: border-box;
}
.drag-handle img, .drag-handle svg.icon {
	background: #DEDEDE;
	padding: 2px;
	box-sizing: border-box;
	border-radius: 100px;
	box-shadow: 0px 0px 3px #585858;
}
#edit-pdca {
	position: fixed;
	opacity: 0;
	z-index: -1;
}
/* °°°°°°°°°°°°°° */
/* Meeting Safety */
/* ______________ */
.custom-page .top-left-btns {
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
	text-align:center;
}
.custom-page .top-left-btns img {
	width: 1.8em;
}
.custom-page > .picts-section {
	height: 50%;
	overflow: auto;
}
.custom-page > .picts-section img {
	max-height: 100%;
	margin-left: 30px;
}
.custom-page .pictures {
	width: 80%;
	margin: 0px 10%;
	padding: 20px;
	box-sizing: border-box;
	height: 100%;
	overflow: auto;
}
.custom-page .pictures .edit-img-wrapper {
	height: 70%;
	margin: 15px auto;
	text-align: center;
}
.custom-page .pictures .edit-img-wrapper img {
	max-height: 100%;
	margin: auto;
}
.custom-page .edit-pictures-container > div {
	display:inline-block;
	height:100%;
	text-align:center;
	width: 30%;
	vertical-align: top;
}
.custom-page .edit-pictures-container > div .content-wrapper {
	overflow:auto;
	height:100%;
	padding: 10px;
	box-sizing: border-box;
}
.custom-page .edit-pictures-container .current {
	width: 40%;
	padding: 0px 10px;
	white-space: normal;
}
.custom-page .edit-pictures-container .current .legend button {
	margin-left: 20px;
}
.custom-page .edit-pictures-container .current .edit-img-wrapper {
	max-width: 50%;
	display: inline-block;
	vertical-align: top;
	padding: 10px;
	position: relative;
	box-sizing: border-box;
}
.custom-page .edit-pictures-container .current .edit-img-wrapper .remove {
	position: absolute;
	width: 20px;
	background: red;
	padding: 5px;
	border-radius: 200px;
	box-shadow: 0px 0px 3px #888888;
	top: -5px;
	right: -5px;
	cursor: pointer;
}
.custom-page .edit-pictures-container .current .edit-img-wrapper img {
	width: 100%;
}
.custom-page .safety-texts-wrapper {
	text-align:center;
	padding: 10px 10%;
	box-sizing: border-box;
	height: 100%;
	font-size: 2.2em;
	white-space: pre-line;
	overflow: auto;
}
.custom-page .safety-texts-wrapper .legend {
	float: unset;
}
.custom-page .safety-texts-wrapper textarea {
	font-size: 1em;
	color: #58595B;
	max-height: calc(100% - 1em);
	min-width: 70%;
	border: 1px solid #58595B;
	padding: 0px 10px;
}
.custom-page h1 .editable-label > div {
	line-height: unset;
}
.problem-image-item {
	max-width: 90%;
	margin: 0px 5%;
}
.problem-image-item img {
	display: block;
	border:4px #999 solid;
	margin: 5px 0px;
	cursor: pointer;
	width:100%;
	height:auto;
}
/* °°°°°°°°°° */
/* GW ongoing */
/* __________ */
.cl-ratio {
	font-weight: 700;
}
.ok-green {
	color: rgb(4, 142, 43);
}
.nok-red {
	color: rgb(183, 21, 40);
}
.gw-comments-wrapper .add-button {
	padding-bottom: 8px;
}
.gw-steps-wrapper .gw-step-data .expander {
	padding-bottom: 0px;
}
/* °°°°°°°°°°°°°° */
/* Vue components */
/* ______________ */
/* Problem reporting field */
.problem-field {
	overflow: auto;
	box-sizing: border-box;
}
.textarea-wrapper { position: relative; }

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: opacity, left .2s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
/* PDCA component */
.pdca {
	width: 70px;
	padding: 10px;
	box-sizing: border-box;
}
.pdca-editor {
	position: fixed;
	opacity: 0;
	z-index: -1;
}
/* Action item */
.a-from-support {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 40px;
	height: 40px;
}
.a-from-support .triangle {
	width: 0px;
	height: 0px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	border-left: 20px solid #6e06a3;
	border-bottom: 20px solid #6e06a3;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
}
.from-gw .triangle {
	border-left-color: #f59842;
	border-bottom-color: #f59842;
}
.a-from-support .text {
	color: #ffffff;
	font-weight: 800;
	transform: rotate(45deg) translateY(10px);
}
.a-from-support .icon {
	color: #ffffff;
	width: 45%;
	height: auto;
	transform: translateY(47%) translateX(-47%);
}
/* Visual calendar */
.ui-datepicker .ui-datepicker-prev span { background-image: url("/images/prev.png"); }
.ui-datepicker .ui-datepicker-next span { background-image: url("/images/next.png"); }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
	background-size: contain;
	background-position: 50% 0px;
}
/* °°°°°°°°°°°°° */
/* Generic items */
/* _____________ */
.clear-float { clear: both; }
.add-button {
	background: none;
	border: none;
	display: flex;
	align-items: center;
	color: #001549;
	padding-right: 20px;
	cursor: pointer;
	transition: font-weight 0.3s ease, background 0.3s ease;
}
.add-button.reverse img, .add-button.reverse .icon {
	margin-right: 0px;
	margin-left: 0.6em;
}
.add-button.blue { color: #2a5a91 }
.add-button.cyan { color: #44a0d9 }
.add-button img, .add-button .icon {
	margin-right: 0.6em;
	width: 1.3em;
	height: auto;
}
.add-button.small-icon img, .add-button.small-icon .icon {
	margin-right: 8px;
	width: 0.7em;
}
.italic {
	font-style: italic;
}
.padding10 {
	padding: 10px;
}
.half-width {	width: 50%; }
.invisible-field {
	position: fixed;
	right: 1000%;
	top: 0px;
}

#deadline-dp {
	resize: none;
	font-family: 'Work Sans';
	color: #58595B;
}
.align-top > * {
  vertical-align: top;
}

/* °°°°°°°° */
/* Settings */
/* ________ */
.settings-head-title img {
	width: 10px;
	margin: 0px 5px;
}
.meeting-planning .editable-label div.textarea {
	min-width: 100px;
}
.container {
	padding: 0px 15px;
	box-sizing: border-box;
}
#toast-container > div {
	background-position-x: -100px !important;
	padding-left: 25px !important;
}

/**
 * List
 */
.list {
	background: #fff;
	color: rgba(0,0,0,0.87);
	list-style-type: none;
	padding: 8px 0;
}
.list__tile {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 32px;
	margin: 0;
	padding: 0 16px;
	position: relative;
}
.list__tile--link {
	cursor: pointer;
}
.list__tile--link:hover {
	background: rgba(0,0,0,.12);
}
.list__tile__title {
	position: relative;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.error--glow {
	box-shadow: 0 0 6px #ff5252 !important;
}
/**
 * ==================================
 *      SMALL SCREENS PROPERTIES
 * ==================================
 */
/* Tablets */
@media (max-width: 1280px) {
	span.time-picker, span.time-picker input.display-time {
		width: 80px;
	}
	span.time-picker input.display-time {
		height: 2em;
	}
}
/* Smartphone landscape */
@media (max-width: 960px) {
	.checkbox {
		padding: 3px 0px;
	}
	.checkbox > img {
		margin-right: 5px;
		width: 12px;
	}
	.pdca {
		padding: 5px;
	}
	.drag-handle {
		padding: 5px;
		width: 30px;
	}
	.a-from-support {
		width: 30px;
		height: 30px;
	}
	.a-from-support .triangle {
		border-width: 15px;
	}
	.a-from-support .text {
		transform: rotate(45deg) translateY(15px);
	}
	.bordered-field {
		border-width: 1px;
	}
	.causes-seeking .basic-blue-title {
		font-size: 1em;
		line-height: 1.4em;
	}
	.cs-btn img {
		width: 20px;
	}
	.cs-btn {
		font-size: 0.7em;
	}
	.nocause-msg {
		margin-top: 2px;
	}
	.five-whys {
		padding: 0px;
	}
	.vue-slider .vue-slider-tooltip {
		margin-bottom: -10px !important;
		font-size: 12px;
	}
	#assistant-overlay .top .left, #assistant-overlay .top .right, #assistant-overlay .bottom {
		padding: 3px 7px;
	}
	.ia-box-wrapper .ia-box-head {
		height: 30px;
	}
	.ia-box-wrapper .ia-box {
		top: 15px;
		padding: 10px 0px;
		border-radius: 10px;
	}
	.content-gradient::after, .content-gradient::before {
		top: 10px;
	}
	.content-gradient::after {
		top: auto;
		bottom: 10px;
	}
	.ia-box-wrapper .ia-box > div {
		padding: 15px 0px;
	}
	.ia-box-wrapper .ia-box button {
		margin-top: 7px;
		padding: 3px 12px;
	}
	.ia-modal {
		padding-left: 40px;
		padding-top: 40px;
	}
	.mgt-indic-header {
		padding: 5px;
		height: 50px;
	}
	.below-mgt-indics-header {
		height: calc(100% - 80px);
	}
}