/* $Header:   P:/VCS/Studio53/JSCLIENT/html/css/OMNIS.CSV   1.23   Jun 20 2012 08:50:02   bmitchel  $ */

/* Add your own CSS classes to this file and reference them using the $cssclassname property */

/**
    ROUNDED SUBFORM DIALOGS - START
    The following classes will create subform dialogs with rounded corners, and extra padding to accommodate that.

    Change the variable values below to tweak appearance.

    NOTE: If these dialogs are maximized, they will be slightly too big to fit the window (due to the extra padding).
 */
.omnis-wf.omnis-subform-frame:not(.omnis-wf-auto-layout) {
    /* These variables can be tweaked to change the border radius of dialogs, and the top padding of the dialog title */
    --dialog-border-radius: 20px;
    --dialog-title-top-padding: 10px;

    --dialog-extra-padding: calc(var(--dialog-border-radius) / 2); /* We'll offset the content by half the border radius */
    /* The title area is 40px high so we need to offset the top padding additionally by that: */
    padding: calc(var(--dialog-extra-padding) + 40px + var(--dialog-title-top-padding)) var(--dialog-extra-padding) var(--dialog-extra-padding) var(--dialog-extra-padding) !important;
    border-radius: var(--dialog-border-radius);
}

.no-top-border {
	border-top: none !important;
}

.tabstrip .ctrl-tabs-li {
    border-width: 0 0 0 0 !important;
    /*box-sizing: border-box;*/
    /*border-radius: 8px 8px 0 0;*/
}

.tabstrip .omnis-tabs__indicator {
    /*transform: translateX(1px);*/
    /* Set transition-duration to 0 below to disable the animation of the 'spacer' */
    /*transition-duration: 0s !important;*/
}

.tabstrip .ctrl-tabs-li-active {
    border-width: 1px 1px 0 1px !important;
}

.tabstrip svg {
    padding: 7px !important;
}

/* Set the color of thee ripple effect when clicking tabs: */
.tabstrip .ctrl-tabs-li .omnis-ripple {
    background-color: rgba(var(--secondary-color-light),0.5) !important;
}

.omnis-wf-resize {
    padding: 0 var(--dialog-extra-padding) var(--dialog-extra-padding) var(--dialog-extra-padding) !important;
}

.omnis-wf-title {
    width: 100% !important;
    height: auto;
    padding: var(--dialog-title-top-padding) var(--dialog-extra-padding) 0 var(--dialog-extra-padding);
    border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
}
/** ROUNDED SUBFORM DIALOGS - END */

.rounded-border {
   border-radius: 15px !important;
}

.omnis-toast {
   font-family: Verdana,Arial,Helvetica,sans-serif;
   background-color: rgb(97,174,236);
   padding: 20px 20px 8px 20px !important
}

a .jstree-icon {
margin-right: 25px !important; /* Besser "rem" als "px" um eine relationale Einheit zu verwenden */
}

.noripple .omnis-ripple {
	background-color: rgba(0,0,0,0) !important;
}

.narrow-spacing {
  letter-spacing: -1px;
}

.left-round {
  border-radius: 10px 0px 0px 10px !important;
}

.right-round {
  border-radius: 0px 10px 10px 0px !important;
}


/*kJSThemeColorPrimaryLight*/

.ctrl-dgrd-header {
    background-color: rgb(var(--primary-color-dark)) !important;
    color: rgb(var(--primary-color-dark-text)) !important;
}


.mytabs.omnis-notactive a {
    color: rgb(var(--background-color-text)) !important;
}

.myprogressbar div {
	border-radius: 15px !important;
}

/*
.slick-header {
  background: rgb(210,219,219);
  font-weight: bold !important;
  height: 40px;
}
*/

/* Datagrid Column Headers 
.slick-header-column {
  background: rgb(210,219,219);
  padding: 10px !important;
}

.datagrid .slick-cell {
    padding-left: 10px;
}

.datagrid .slick-footerrow-column{
    padding-left: 10px;
}
*/

.shadow  {
	box-shadow: 5px 5px 5px lightgrey
}

.maxwidth {
	max-width: 400px;
}

.helpcursor {
	cursor: help !important;
}

.rotate {
	transform: rotate(-10deg)
}

.diagonal{
	transform: rotate(45deg)
}


.picker-picked {
	color: blue !important;
	font-weight: bolder
}

.tilt:hover {
	transform: rotate(-10deg)
}

.glass::before  {
 content: " ";
 background: inherit; 
 position: absolute;
 border-radius: inherit;
 left: 0px;  /* giving minus -25px left position*/
 right: 0;
 top: 0px;   /* giving minus -25px top position */
 bottom: 0;
 /*box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.05);*/
 box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.1);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}




/* CSS talk bubble */
.talk-bubble-left {
	margin: 40px;
  display: inline-block;
  position: relative;
  float: left;
	width: 200px !important;
	height: auto !important;
	background-color: white;
}

.talk-bubble-right {
	margin: 40px;
  display: inline-block;
  position: relative;
  float: right;
	width: 200px !important;
	height: auto !important;
	background-color: lightyellow;
}

.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

}

.letter-spacing{
	letter-spacing: 5px;
}

.line-height {
  line-height: 1.6;
}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 0px;
	bottom: auto;
	border: 22px solid;
	border-color: white transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 38px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}
/*
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -8px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 0px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
  padding: 1em;
	text-align: left;
  line-height: 1.5em;
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}