/**
 * @version     CVS: 4.2.0 
 * @package     com_istalearningbase
 * @copyright   2022 byteKultur GmbH
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author      Terry Harker <terry.harker@bytekultur.net>
 */

 /* COMMON STYLE FOR ALL TMPL */
 
@import url('https://fonts.googleapis.com/css?family=Cuprum|Farro:400,500|Mukta+Mahee:500|Voces|Vollkorn+SC:400,600&display=swap');
body #tm-main {
	transition:margin-left 0.5s ease;
}
body.uk-flyout-mode #tm-main { position: relative; }

div#ista-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*
	display: flex;
    align-items: center;
    justify-content: center;
	*/
	background:#fff;
	background:rgba(255,255,255,0.9);
	text-align:center;
	text-transform:uppercase;
	font-size:90%;
	font-weight:bold;
    z-index: 29;
}
div#ista-overlay>div {
    margin-top: 20vh;
    padding-top: 50px;
}

#ista-template div {
	font-size:14px;
	line-height:18px;
}
/*
#ista-template {
	font-family: 'Oxygen', sans-serif!important;
	text-align:center;
}
*/

#ista-template h1, 
#ista-template h2, 
#ista-template h3, 
#ista-template h4 {
	font-family: 'Mukta Mahee', sans-serif!important;
	text-transform:uppercase;
	letter-spacing:0;
	color:inherit;
	font-weight:500;
	margin-top:20px;
}
@media (max-width:767px){
	#ista-template h1 { font-size:24px !important; line-height:20px; }
	#ista-template h2 { font-size:16px !important; line-height:20px; }
	#ista-template h3 { font-size:14px !important; line-height:18px; font-weight:normal; }
	#ista-template h4 { font-size:12px !important; line-height:18px; font-weight:normal; }
}

@media (min-width:768px) and (max-width:1023px) {
	#ista-template h1 { font-size:26px !important; line-height:22px; }
	#ista-template h2 { font-size:20px !important; line-height:22px; }
	#ista-template h3 { font-size:15px !important; line-height:18px; font-weight:normal; }
	#ista-template h4 { font-size:13px !important; line-height:18px; font-weight:normal; }
}

@media (min-width:1024px) {
	#ista-template h1 { font-size:32px !important; line-height:22px; }
	#ista-template h2 { font-size:22px !important; line-height:22px; }
	#ista-template h3 { font-size:16px !important; line-height:18px; font-weight:normal; }
	#ista-template h4 { font-size:14px !important; line-height:18px; font-weight:normal; }
}

#ista-template .stamp-left {
    max-height: 100px;
    position: relative;
    height: 100%;
}
#ista-template .stamp-left svg {
    height: 100%;
    position: relative;
}

#ista-template select option[data-static="true"] {
    font-style: italic;
}
#ista-template select option[data-static="false"] {
    font-weight: bold;
}

.template { border:3px solid; }
.bordered { border:1px solid; }
.framed { border:2px solid; }
.border-left { border-left:1px solid; }
.border-right { border-right:1px solid; }
.border-top { border-top:1px solid; }
.border-bottom { border-bottom:1px solid; }

.remove-border-top { border-top:0 !important; }
.remove-border-right { border-right:0 !important; }
.remove-border-bottom { border-bottom:0 !important; }
.remove-border-left { border-left:0 !important; }

/* children width-1-1 */
.child-bordered>* { border: 1px solid; }

.child-bordered.uk-child-width-1-1>*:not(:last-child) { border-bottom: 0; }
.child-bordered.uk-child-width-1-2>*,
.child-bordered.uk-child-width-1-3>*,
.child-bordered.uk-child-width-1-4>*,
.child-bordered.uk-child-width-1-5>* { border-top: 0; border-left:0; }

.child-bordered.uk-child-width-1-2>*:nth-child(2n+1),
.child-bordered.uk-child-width-1-2>*:first-child,
.child-bordered.uk-child-width-1-3>*:nth-child(3n+1),
.child-bordered.uk-child-width-1-3>*:first-child,
.child-bordered.uk-child-width-1-4>*:nth-child(4n+1),
.child-bordered.uk-child-width-1-4>*:first-child,
.child-bordered.uk-child-width-1-5>*:nth-child(5n+1),
.child-bordered.uk-child-width-1-5>*:first-child { border-left:1px solid; }
.child-bordered.uk-child-width-expand>*:not(:first-child) { border-left:0px; }

.child-bordered.uk-child-width-1-2,
.child-bordered.uk-child-width-1-3,
.child-bordered.uk-child-width-1-4,
.child-bordered.uk-child-width-1-5 { border-top:1px solid; } 



/* element styles */
.element {}
.element span>p{
    float: left;
    clear: both;
}
.element span>p,
.element div>p {
    display: block;
    margin: 0 0 2px 0;
}
.element+label.lbl-bottom {
    align-self: flex-end;
}

.element .child { font-size:16px; font-weight:bold; }
.element .root-element { padding:0 5px; }
.element .infoBtn {
    cursor: pointer;
    font-size: 20px;
    padding: 0 5px;
    color: #ffffff;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    text-align: center;
    line-height: 16px;
    margin: 0 8px;
}
.infoBtn::before {
    font-size: 15px;
}
/*
.element .infoBtn:hover,
.element .infoBtn:active,
.element .infoBtn:focus { color: rgba(149, 58, 31, 1);}
*/
.element.hidden-container .child { display:none; }
.element select.show { display:inline-block !important; }
.element span.show { display:inline-block !important; }
.element>span,
.element .resultfield div,
.element .val,
.element .staticval {
    font-size: 14px !important;
    font-weight: bold;
    font-style: italic;
    color: #111111;
}
.flyout .element>span, .flyout .element>span>div {
    font-size: 12px !important;
    font-weight: normal !important;
    color: inherit;
}
span#val_reference-ista-rules>div {
    color: #111111;
}

#ista-template .element div.rule-text {
    font-weight: normal;
}
#ista-template .element h4.rule-title {
    font-weight: bold !important;
    margin-top: 10px;
    margin-bottom: 0px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
    text-transform: none;
}

#ista-template .element.select-container {
    white-space: nowrap;
}
#ista-template * select { 
	width:auto;
	max-width:80%;
}
#ista-template .element.select-container>span {
    white-space: normal;
}

.element.multitree-container {
    position: relative;
}
.element .tree-selection {
    min-height: 22px;
    background: #ffffff;
    margin-bottom: 10px;
    padding: 15px;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.1);
    border: 1px solid #eeeeee;
}
.element .tree-selection>span {
    margin: 0 2px 2px 0;
}

.element .tree-view li {
	cursor:pointer;
}
.element .tree-view li.leaf .active {
    font-weight: bold;
}
.element .tree-view, .element .tree-view ul {
    margin: 0;
    padding: 0 0 0 15px;
}
.element .tree-view li{ list-style:none; }

.element .tree-view li.parent>.value:before {
    content: "+";
    display: inline-block;
    background: #222;
    color: #fff;
    width: 15px;
    border-radius: 20px;
    text-align: center;
    height: 15px;
    margin: 0 5px 0 0;
}

.element .tree-view li.parent.open>.value:before {
	content: "-";
}
ul.sub-tree {
	display:none;
}
.element .tree-view span.value {
    display: inline-block;
    line-height: 15px;
    padding: 2px 5px;
}
.element .tree-view .leaf span.value {
	margin-left:20px;
}
/*
.element .tree-view .leaf span.value:before {
    content: " ";
    display: inline-block;
    width: 15px;
    margin-right: 5px;
}
*/
.element .tree-view span.value.active {
    border: 1px solid;
}


.element.hidden-container .resultfield>span {
    padding-right: 5px;
}



.flyout.uk-background-color {
	background:#fff;
	background:rgba( 255,255,255,0.95 );
} 
.flyout.toptobottom {
    top: 0px !important;
    bottom: 0px !important;
    padding-top: 70px;
}

.flyout#config-menu {z-index: 129; }
.flyout#ista-rules-box {z-index: 128; }
.flyout {
	max-height:100%;
	overflow:visible;
}
.flyout .inner {
	height:100%;
	overflow-y:auto !important;
    -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    -o-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}
.flyout.uk-open .inner {
}
.flyout.uk-open .uk-button {
    /*
	-webkit-box-shadow: 2px 1px 3px 1px rgba(0,0,0,0.15);
    -o-box-shadow: 2px 1px 3px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 2px 1px 3px 1px rgba(0,0,0,0.15);
    box-shadow: 2px 1px 3px 1px rgba(0,0,0,0.15);
    */
	z-index: 5;
}

.flyout.uk-position-left,
.flyout.uk-position-right {
	bottom:unset;
} 
.flyout .inner:before {
	content:" ";
	display:block;
	background:#000;
    position: absolute;
}

.flyout .uk-button {
	margin-bottom: 10px;
}

.flyout.uk-position-bottom .inner {
    max-height:0px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    position: relative;
}
.flyout.uk-position-left .inner,
.flyout.uk-position-right .inner {
    max-width:0px;
    overflow: hidden;
    transition: max-width 0.5s ease;
    position: relative;
}

.flyout.uk-position-bottom.uk-open .inner{
    max-height:500px;
}

body.uk-flyout-mode #tm-main, 
body.uk-flyout-mode #ista-overlay{ transition:max-width 0.5s ease; }
body.uk-flyout-mode #ista-overlay>div { width: 100%; float:right; }
@media (min-width:1200px) {
	body.uk-flyout-mode #tm-main, body.uk-flyout-mode #ista-overlay { margin-left:460px; }
	body.uk-flyout-mode #ista-overlay { max-width: calc( 100% - 460px ); }
}
@media (min-width:530px) and (max-width:1199px) {
	body.uk-flyout-mode #ista-overlay>div {  max-width: calc( 100% - 460px ); float:right; }
}
/*
@media (min-width:768px)  {
	.flyout.uk-position-right.uk-open .inner,
	.flyout.uk-position-left.uk-open .inner { max-width:600px; }
	.flyout.uk-position-right .inner>div,
	.flyout.uk-position-left .inner>div { width:520px; } /* 600px - 2*40 padding 
}
	*/
@media (min-width:530px) { /*  and (max-width:767px) */
	.flyout.uk-position-left.uk-open .inner, 
	.flyout.uk-position-right.uk-open .inner { max-width:450px; }
	.flyout.uk-position-right .inner>div,
	.flyout.uk-position-left .inner>div { width:370px; }
	/* 
	body.uk-flyout-mode #ista-overlay>div { width: calc( 100% - 450px ); }
	body.uk-flyout-mode #tm-main { margin-left:470px; } 
	*/
}
@media (min-width:430px) and (max-width:529px){
	.flyout.uk-position-left.uk-open .inner,
	.flyout.uk-position-right.uk-open .inner{ max-width:300px; }
	.flyout.uk-position-right .inner>div,
	.flyout.uk-position-left .inner>div { width:auto; }
	body.uk-flyout-mode #ista-overlay>div { width: calc( 100% - 270px ); }
	/* body.uk-flyout-mode #tm-main { margin-left:370px; } */
}
@media (min-width:330px) and (max-width:429px){
	.flyout.uk-position-left.uk-open .inner,
	.flyout.uk-position-right.uk-open .inner{ max-width:250px; }
	.flyout.uk-position-right .inner>div,
	.flyout.uk-position-left .inner>div { width:auto; }
	/* body.uk-flyout-mode #tm-main { margin-left:270px; } */
}

.flyout>.tm-flyout-button {
    max-width: none;
}
.flyout>.tm-flyout-button.uk-button-secondary {
    top: unset;
    bottom: unset;
    padding: 0 5px;
}
.flyout>.tm-flyout-button.uk-position-right span.rotate-90 {
    transform: rotate(-90deg);
    display: block;
    transform-origin: center;
    top: 35px;
    position: relative;
    line-height: 35px;
}
.flyout>.tm-flyout-button.uk-position-left span.rotate-90 {
    transform: rotate(-90deg);
    display: block;
    transform-origin: center;
    top: 40px;
    position: relative;
    line-height: 35px;
	white-space:nowrap; 
}
.flyout>.tm-flyout-button i.fas {
    display: block;
    margin: 10px 0;
	font-size: 150%;
}

.flyout>.tm-flyout-button.uk-button-secondary:focus {
	border:1px solid transparent;
	color:#ffffff;
}
.flyout>.tm-flyout-button.uk-button-secondary:hover,
.flyout>.tm-flyout-button.uk-button-secondary:active{
	background:#ffffff;
	border-color:#ffffff;
	color:inherit;
}
.flyout.uk-position-bottom>.tm-flyout-button {
    margin-top: -34px;
    height: auto;
}
.flyout.uk-position-left>.tm-flyout-button,
.flyout.uk-position-right>.tm-flyout-button { 	
    top: calc( 10vh + 30px );
    width: 80px;
}
div#ista-rules-box .tm-flyout-button {
    /*height: 210px;*/
}

div#ista-rules-box .tm-flyout-button>span {
    top: 80px;
}
.flyout>.tm-flyout-button.uk-button-secondary>span {
    line-height: 13px !important;
    display: inline-block;
}

.flyout.uk-position-right>.tm-flyout-button { 
	margin-left: -80px; 
	border-top-left-radius: 5px; 
	border-bottom-left-radius: 5px; 
	left: 0; 
    font-size: 80%;
}
.flyout.uk-position-left>.tm-flyout-button { 
	margin-right: -80px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 80%;
}

.tm-flyout-button:after {
}
.uk-position-left.tm-flyout-button:after {
    background: white;
    position: absolute;
    width: 5px;
    height: 125%;
    content: " ";
    top: -5px;
    right: -6px;
}
.uk-position-right.tm-flyout-button:after {
    left: -6px;
}

.blocks-container .resultfield>div,
.blocks-container .resultfield>span { display:block; border-bottom:1px solid #dedede; padding: 5px 5px 20px 5px; /* margin-bottom:20px; */ }
.inline-container .resultfield>div,
.inline-container .resultfield>span { display:inline; margin-right:5px; }


body.loading .tm-flyout-button span {
	animation: blinker 1.5s linear infinite;
}

.flyout.has-changed>button {
    animation: flasher 0.5s linear 1;
}
.flyout.has-changed>button>* {
    animation: blinker 1.5s linear 2;
}

@keyframes blinker {
  50% { opacity: 0; }
}

@keyframes flasher {
  50% { background-color: #ffffff; }
}


.size-alert {
    top: 280px;
    box-shadow: 2px 1px 3px 1px rgba(0,0,0,0.15);
    left: 25%;
    width: 50%;
}
@media (min-width:600px){
	.size-alert { display:none; }
}
@media (max-width:599px){
	.size-alert { 
		display:block; 
		z-index: 999999;
	}
}


.resultfield .result-container {
    display: block;
    margin-bottom: 10px;
}

#val_other-determinations-text.resultfield .result-container>div {
    display: inline;
    margin-right: 5px;
}