/*
------------------
MDUI-Effekte
-------------------- */
 
/* -----
  flow-Effekte
  ----- */
 
.mdui-flow {
 outline:1px solid transparent;
}
.mdui-flow:after    {
 border-radius:inherit;
 left:0;
 top:0;
 content:"";
 position:absolute;
 width:100%;
 height:100%;
 background-color:transparent;
 background-position: 0px 0px;
 background-repeat: repeat-x;
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(0,0,0,.2) 100%,transparent 100%);
 background-size: 16px 100%;
 animation: keyframe-flow 2s linear infinite;
 opacity:1;
}
 
.mdui-dark .mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(255,255,255,.2) 100%,transparent 100%);
}
 
@keyframes keyframe-flow {
   0%  { background-position: 0px 0px; background-size: 16px 100%;}
   100%  { background-position: 32px 0px; background-size: 16px 100%;}
}
 
.mdui-slowest.mdui-flow:after {animation-duration: 6.75s;}
.mdui-slower.mdui-flow:after  {animation-duration: 4.50s;}
.mdui-slow.mdui-flow:after    {animation-duration: 3.00s;}
.mdui-normal.mdui-flow:after  {animation-duration: 2.00s;}
.mdui-fast.mdui-flow:after    {animation-duration: 1.33s;}
.mdui-faster.mdui-flow:after  {animation-duration: 0.89s;}
.mdui-fastest.mdui-flow:after {animation-duration: 0.59s;}
 
.mdui-red-acc.mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(244,67,54,.7) 100%,transparent 100%);
}
.mdui-yellow-acc.mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(255,253,59,.7) 100%,transparent 100%);
}
.mdui-blue-acc.mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(40,149,243,.7) 100%,transparent 100%);
}
.mdui-green-acc.mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(76,175,80,.7) 100%,transparent 100%);
}
.mdui-white-acc.mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(255,255,255,.7) 100%,transparent 100%);
}
.mdui-black-acc.mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -50% 50%, transparent 60%, rgba(0,0,0,.7) 100%,transparent 100%);
}
.mdui-black2-acc.mdui-flow:after {
 background: radial-gradient(ellipse 100% 40% at -20% 50%, transparent 50%, rgba(0,0,0,.7) 100%,transparent 100%);
}
 
/* ----- Rotationen ----- */
 
.mdui-rotate-000{ transform:rotate(0deg); transform-origin: center left; }
.mdui-rotate-015{ transform:rotate(15deg); transform-origin: center left; }
.mdui-rotate-030{ transform:rotate(30deg); transform-origin: center left;}
.mdui-rotate-045{ transform:rotate(45deg); transform-origin: center left;}
.mdui-rotate-060{ transform:rotate(60deg); transform-origin: center left;}
.mdui-rotate-075{ transform:rotate(75deg); transform-origin: center left;}
.mdui-rotate-090{ transform:rotate(90deg); transform-origin: center left;}
.mdui-rotate-105{ transform:rotate(105deg); transform-origin: center left;}
.mdui-rotate-120{ transform:rotate(120deg); transform-origin: center left;}
.mdui-rotate-135{ transform:rotate(135deg); transform-origin: center left;}
.mdui-rotate-150{ transform:rotate(150deg); transform-origin: center left;}
.mdui-rotate-165{ transform:rotate(165deg); transform-origin: center left;}
.mdui-rotate-180{ transform:rotate(180deg); transform-origin: center left;}
.mdui-rotate-195{ transform:rotate(195deg); transform-origin: center left;}
.mdui-rotate-210{ transform:rotate(210deg); transform-origin: center left;}
.mdui-rotate-225{ transform:rotate(225deg); transform-origin: center left;}
.mdui-rotate-240{ transform:rotate(240deg); transform-origin: center left;}
.mdui-rotate-255{ transform:rotate(255deg); transform-origin: center left;}
.mdui-rotate-270{ transform:rotate(270deg); transform-origin: center left;}
.mdui-rotate-285{ transform:rotate(285deg); transform-origin: center left;}
.mdui-rotate-300{ transform:rotate(300deg); transform-origin: center left;}
.mdui-rotate-315{ transform:rotate(315deg); transform-origin: center left;}
.mdui-rotate-330{ transform:rotate(330deg); transform-origin: center left;}
.mdui-rotate-345{ transform:rotate(345deg); transform-origin: center left;}
.mdui-rotate-360{ transform:rotate(360deg); transform-origin: center left;}
 
/* -----
  pulse
  ----- */
.mdui-red-pulse {
 animation: mdui-red-pulse-ani 3s linear infinite;
}
@keyframes mdui-red-pulse-ani  {
 50% {filter: drop-shadow(0px 0px 8px #F44336) drop-shadow(0px 0px 8px #F44336) drop-shadow(0px 0px 8px #F44336); }
 0%,100% {filter: drop-shadow(0px 0px 8px #F44336) ; }
 
}
.mdui-yellow-pulse {
 animation: mdui-yellow-pulse-ani 3s linear infinite;
}
@keyframes mdui-yellow-pulse-ani  {
 50% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); }
 0%,100% {filter: drop-shadow(0px 0px 4px #FFDB3B) }
 
}
.mdui-blue-pulse {
 animation: mdui-blue-pulse-ani 3s linear infinite;
}
@keyframes mdui-blue-pulse-ani  {
 50% {filter: drop-shadow(0px 0px 8px #2B95F3) drop-shadow(0px 0px 8px #2B95F3) drop-shadow(0px 0px 8px #2B95F3); }
 0%,100% {filter: drop-shadow(0px 0px 8px #2B95F3); }
 
}
.mdui-green-pulse {
 animation: mdui-green-pulse-ani 3s linear infinite;
}
@keyframes mdui-green-pulse-ani  {
 50% {filter: drop-shadow(0px 0px 8px #4CAF50) drop-shadow(0px 0px 8px #4CAF50) drop-shadow(0px 0px 8px #4CAF50); }
 0%,100% {filter: drop-shadow(0px 0px 8px #4CAF50) ; }
}
 
/* ---------- button-outlined ----------*/
 
.mdui-button-outlined {
 border:1px solid rgba(0,0,0,0.33);
 border-radius:4px;
}
.mdui-button-outlined * {
 border:none !important;
}
 
.mdui-button-outlined,
.mdui-button-outlined * {
 background:none !important;
 color:var(--design-font-color) !important;
 font-weight:normal !important;
}
.mdui-dark .mdui-button-outlined,
.mdui-dark .mdui-button-outlined * {
 color:#ffffff !important;
 border-color: rgba(255,255,255,.33);
}
 
 
.mdui-button-outlined .vis-widget-body,
.mdui-button-outlined .vis-widget-body * {
 display:flex;
 justify-content: center;
 align-items: center;
}
 
 
.mdui-button-outlined.mdui-red *,
.mdui-dark .mdui-button-outlined.mdui-red * { color:#f44336 !important; }
.mdui-button-outlined.mdui-pink *,
.mdui-dark .mdui-button-outlined.mdui-pink * { color:#e91e63 !important; }
.mdui-button-outlined.mdui-purple *,
.mdui-dark .mdui-button-outlined.mdui-purple * { color:#9c27b0 !important; }
.mdui-button-outlined.mdui-deeppurple *,
.mdui-dark .mdui-button-outlined.mdui-deeppurple * { color:#673ab7 !important; }
.mdui-button-outlined.mdui-indigo *,
.mdui-dark .mdui-button-outlined.mdui-indigo * { color:#3f51b5 !important; }
.mdui-button-outlined.mdui-blue *,
.mdui-dark .mdui-button-outlined.mdui-blue * { color:#2196f3 !important; }
.mdui-button-outlined.mdui-lightblue *,
.mdui-dark .mdui-button-outlined.mdui-lightblue * { color:#03a9f4 !important; }
.mdui-button-outlined.mdui-cyan *,
.mdui-dark .mdui-button-outlined.mdui-cyan * { color:#00bcd4 !important; }
.mdui-button-outlined.mdui-teal *,
.mdui-dark .mdui-button-outlined.mdui-teal * { color:#009688 !important; }
.mdui-button-outlined.mdui-green *,
.mdui-dark .mdui-button-outlined.mdui-green * { color:#4caf50 !important; }
.mdui-button-outlined.mdui-lightgreen *,
.mdui-dark .mdui-button-outlined.mdui-lightgreen * { color:#8bc34a !important; }
.mdui-button-outlined.mdui-lime *,
.mdui-dark .mdui-button-outlined.mdui-lime * { color:#cddc39 !important; }
.mdui-button-outlined.mdui-yellow *,
.mdui-dark .mdui-button-outlined.mdui-yellow * { color:#ffeb3b !important; }
.mdui-button-outlined.mdui-amber *,
.mdui-dark .mdui-button-outlined.mdui-amber * { color:#ffc107 !important; }
.mdui-button-outlined.mdui-orange *,
.mdui-dark .mdui-button-outlined.mdui-orange * { color:#ff9800 !important; }
.mdui-button-outlined.mdui-deeporange *,
.mdui-dark .mdui-button-outlined.mdui-deeporange * { color:#ff5722 !important; }
.mdui-button-outlined.mdui-brown *,
.mdui-dark .mdui-button-outlined.mdui-brown * { color:#795548 !important; }
.mdui-button-outlined.mdui-grey *,
.mdui-dark .mdui-button-outlined.mdui-grey * { color:#9e9e9e !important; }
.mdui-button-outlined.mdui-darkgrey *,
.mdui-dark .mdui-button-outlined.mdui-darkgrey * { color:#303030 !important; }
.mdui-button-outlined.mdui-bluegrey *,
.mdui-dark .mdui-button-outlined.mdui-bluegrey * { color:#607d8b !important; }
.mdui-button-outlined.mdui-white *,
.mdui-dark .mdui-button-outlined.mdui-white * { color:#f8f8f8 !important; }
.mdui-button-outlined.mdui-black *,
.mdui-dark .mdui-button-outlined.mdui-black * { color:#212121 !important; }
 
.mdui-button-outlined.mdui-color1 * { color:var(--color1) !important; }
.mdui-dark .mdui-button-outlined.mdui-color1 * { color:var(--color1-dark) !important; }
.mdui-button-outlined.mdui-color2 * { color:var(--color2) !important; }
.mdui-dark .mdui-button-outlined.mdui-color2 * { color:var(--color2-dark) !important; }
.mdui-button-outlined.mdui-color3 * { color:var(--color3) !important; }
.mdui-dark .mdui-button-outlined.mdui-color3 * { color:var(--color3-dark) !important; }
 
.mdui-button-outlined.mdui-red-ol,
.mdui-dark .mdui-button-outlined.mdui-red-ol { border-color:#f44336; }
.mdui-button-outlined.mdui-pink-ol,
.mdui-dark .mdui-button-outlined.mdui-pink-ol { border-color:#e91e63; }
.mdui-button-outlined.mdui-purple-ol,
.mdui-dark .mdui-button-outlined.mdui-purple-ol { border-color:#9c27b0; }
.mdui-button-outlined.mdui-deeppurple-ol,
.mdui-dark .mdui-button-outlined.mdui-deeppurple-ol { border-color:#673ab7; }
.mdui-button-outlined.mdui-indigo-ol,
.mdui-dark .mdui-button-outlined.mdui-indigo-ol { border-color:#3f51b5; }
.mdui-button-outlined.mdui-blue-ol,
.mdui-dark .mdui-button-outlined.mdui-blue-ol { border-color:#2196f3; }
.mdui-button-outlined.mdui-lightblue-ol,
.mdui-dark .mdui-button-outlined.mdui-lightblue-ol { border-color:#03a9f4; }
.mdui-button-outlined.mdui-cyan-ol,
.mdui-dark .mdui-button-outlined.mdui-cyan-ol { border-color:#00bcd4; }
.mdui-button-outlined.mdui-teal-ol,
.mdui-dark .mdui-button-outlined.mdui-teal-ol { border-color:#009688; }
.mdui-button-outlined.mdui-green-ol,
.mdui-dark .mdui-button-outlined.mdui-green-ol { border-color:#4caf50; }
.mdui-button-outlined.mdui-lightgreen-ol,
.mdui-dark .mdui-button-outlined.mdui-lightgreen-ol { border-color:#8bc34a; }
.mdui-button-outlined.mdui-lime-ol,
.mdui-dark .mdui-button-outlined.mdui-lime-ol { border-color:#cddc39; }
.mdui-button-outlined.mdui-yellow-ol,
.mdui-dark .mdui-button-outlined.mdui-yellow-ol { border-color:#ffeb3b; }
.mdui-button-outlined.mdui-amber-ol,
.mdui-dark .mdui-button-outlined.mdui-amber-ol { border-color:#ffc107; }
.mdui-button-outlined.mdui-orange-ol,
.mdui-dark .mdui-button-outlined.mdui-orange-ol { border-color:#ff9800; }
.mdui-button-outlined.mdui-deeporange-ol,
.mdui-dark .mdui-button-outlined.mdui-deeporange-ol { border-color:#ff5722; }
.mdui-button-outlined.mdui-brown-ol,
.mdui-dark .mdui-button-outlined.mdui-brown-ol { border-color:#795548; }
.mdui-button-outlined.mdui-grey-ol,
.mdui-dark .mdui-button-outlined.mdui-grey-ol { border-color:#9e9e9e; }
.mdui-button-outlined.mdui-darkgrey-ol,
.mdui-dark .mdui-button-outlined.mdui-darkgrey-ol { border-color:#303030; }
.mdui-button-outlined.mdui-bluegrey-ol,
.mdui-dark .mdui-button-outlined.mdui-bluegrey-ol { border-color:#607d8b; }
.mdui-button-outlined.mdui-white-ol,
.mdui-dark .mdui-button-outlined.mdui-white-ol { border-color:#f8f8f8; }
.mdui-button-outlined.mdui-black-ol,
.mdui-dark .mdui-button-outlined.mdui-black-ol { border-color:#212121; }
 
.mdui-button-outlined.mdui-color1-ol,
.mdui-dark .mdui-button-outlined.mdui-color1-ol * { border-color:var(--color1); }
.mdui-button-outlined.mdui-color2-ol,
.mdui-dark .mdui-button-outlined.mdui-color2-ol * { border-color:var(--color2); }
.mdui-button-outlined.mdui-color3-ol,
.mdui-dark .mdui-button-outlined.mdui-color3-ol * { border-color:var(--color3); }
 
/* border für -outlined (-ol) */
.mdui-red-ol { border-color:#f44336 !important; }
.mdui-pink-ol { border-color:#e91e63 !important; }
.mdui-purple-ol { border-color:#9c27b0 !important; }
.mdui-deeppurple-ol { border-color:#673ab7 !important; }
.mdui-indigo-ol { border-color:#3f51b5 !important; }
.mdui-blue-ol { border-color:#2196f3 !important; }
.mdui-lightblue-ol { border-color:#03a9f4 !important; }
.mdui-cyan-ol { border-color:#00bcd4 !important; }
.mdui-teal-ol { border-color:#009688 !important; }
.mdui-green-ol { border-color:#4caf50 !important; }
.mdui-lightgreen-ol { border-color:#8bc34a !important; }
.mdui-lime-ol { border-color:#cddc39 !important; }
.mdui-yellow-ol { border-color:#ffeb3b !important; }
.mdui-amber-ol { border-color:#ffc107 !important; }
.mdui-orange-ol { border-color:#ff9800 !important; }
.mdui-deeporange-ol { border-color:#ff5722 !important; }
.mdui-brown-ol { border-color:#795548 !important; }
.mdui-grey-ol { border-color:#9e9e9e !important; }
.mdui-darkgrey-ol { border-color:#303030 !important; }
.mdui-bluegrey-ol { border-color:#607d8b !important; }
.mdui-white-ol { border-color:#f8f8f8 !important; }
.mdui-black-ol { border-color:#212121 !important; }
 
.mdui-black10-ol { border-color:rgba(0,0,0,.1) !important; }
.mdui-black20-ol { border-color:rgba(0,0,0,.2) !important; }
.mdui-black30-ol { border-color:rgba(0,0,0,.3) !important; }
.mdui-black40-ol { border-color:rgba(0,0,0,.4) !important; }
.mdui-black50-ol { border-color:rgba(0,0,0,.5) !important; }
.mdui-black60-ol { border-color:rgba(0,0,0,.6) !important; }
.mdui-black70-ol { border-color:rgba(0,0,0,.7) !important; }
.mdui-black80-ol { border-color:rgba(0,0,0,.8) !important; }
.mdui-black90-ol { border-color:rgba(0,0,0,.9) !important; }
 
.mdui-white10-ol { border-color:rgba(255,255,255,.1) !important; }
.mdui-white20-ol { border-color:rgba(255,255,255,.2) !important; }
.mdui-white30-ol { border-color:rgba(255,255,255,.3) !important; }
.mdui-white40-ol { border-color:rgba(255,255,255,.4) !important; }
.mdui-white50-ol { border-color:rgba(255,255,255,.5) !important; }
.mdui-white60-ol { border-color:rgba(255,255,255,.6) !important; }
.mdui-white70-ol { border-color:rgba(255,255,255,.7) !important; }
.mdui-white80-ol { border-color:rgba(255,255,255,.8) !important; }
.mdui-white90-ol { border-color:rgba(255,255,255,.9) !important; }
 
.mdui-color1-ol { border-color:var(-color1) !important; }
.mdui-color2-ol { border-color:var(-color2) !important; }
.mdui-color3-ol { border-color:var(-color3) !important; }