:root{
	 --color-c1:#cfcfcf;
	 --color-c2:#565656;
	 
	 --color-c3:#ebebeb;
	 --color-c4:#fafafa;
	 --color-c5:#f4f4f4;
     --color-c6:#002d58;
     --color-c7:#07918B;
     --color-c8:#ff0000;
   
	 
	 --color-white:#ffffff;
	 --color-highlight: #2669BF;
	 --color-highlight-2nd:#021F59;
	 
	 --color-border:#0F3BBF;
}
 
body{
	font-family: Arial;
	color: #565656;
	letter-spacing: 0.01em;
	font-size: 0.9em;
	background-color:var(--color-c4);
	hyphens: auto;
}
*, :after, :before {
	box-sizing: border-box;
}

.ts-tooltip {
  --bs-tooltip-bg: var(--color-c7);
  --bs-tooltip-color: var(--color-c5);
}


a {
  text-decoration: none;
  color: var(--color-c2);
}

a.hover_1:hover > i
{
  color: var(--color-c7);

}

a.hover_2:hover > i
{
  color: var(--color-c8);

}

a.hover_3:hover > i
{
  color: var(--color-c7);

}




  label{
   display: block;
 } 

.ts-menu-holder  a:hover {
  text-decoration: none;
  color: var(--color-c2);
  font-weight: bold;
}




.spacer-em-0_5{height: 0.5em; clear: both; display: block; width: 100%;}
.spacer-em-0_5{height: 0.75em; clear: both; display: block; width: 100%;}
.spacer-em-1{height: 1em; clear: both; display: block; width: 100%;}
.spacer-em-2{height: 2em; clear: both; display: block; width: 100%;}
.spacer-em-4{height: 4em; clear: both; display: block; width: 100%;}
.spacer-em-6{height: 6em; clear: both; display: block; width: 100%;}
.spacer-em-8{height: 8em; clear: both; display: block; width: 100%;}


strong{color: var(--color-c5);}

.c-1{color: var(--color-c1);}
.c-2{color: var(--color-c2);}
.c-3{color: var(--color-c3);}
.c-4{color: var(--color-c4);}
.c-5{color: var(--color-c5);}
.c-6{color: var(--color-c6);}
.c-7{color: var(--color-c7);}
.c-higlight{color: var(--color-higlight);}
.c-higlight_2nd{color: var(--color-highlight-2nd);}

.c-white{color: var(--color-white);}
.c-black{color: #000000;}
.c-red{color: red;}
.c-green{color: green;}
.c-blue{color: blue;}
.c-brown{color: brown;}

.c-hihlight-bg-black{color:#A6A6A6;}

.bg-c-1{background-color: var(--color-c1) !important;}
.bg-c-2{background-color: var(--color-c2) !important;}
.bg-c-3{background-color: var(--color-c3) !important;}
.bg-c-4{background-color: var(--color-c4) !important;}
.bg-c-5{background-color: var(--color-c5) !important;}
.bg-c-6{background-color: var(--color-c6) !important;}
.bg-c-7{background-color: var(--color-c7) !important;}
.bg-c-highlight{background-color: var(--color-highlight)}

.bg-c-red{background-color: #EC5051 !important;}
.bg-c-green{background-color: green  !important;}
.bg-c-white{background-color: #ffffff  !important;}
.bg-c-black{background-color: #000000  !important;}


.border-c-3
{
  border: 1px solid var(--color-c3);
}

.ts-container-login
{
  height: 100vh;
}


.ts-form-label-edit
{
  font-size: .75em;
}

.ts-form-label-links-edit
{
  font-size: .75em;
  width: 33%;
  display: inline-block;
}

.ts-form-input-edit {
  position: relative;
  padding: 10px;
  width: 100%;
  outline: 0;
  border: 4px solid #3d88e9;
  background-color: var(--color-c4);
  border-radius: 5px;
  font-size: 0.9em;
  margin: 10px 0 20px 0;
  
  
  &:focus {
    color: var(--color-white);
    background-color: var(--color-c6);
  }
}

.ts-form-input-links {
  position: relative;
  padding: 10px;
  width: 33%;
  outline: 0;
  border: 0;
  background-color: var(--color-c4);
  border-radius: 5px;
  font-size: 0.9em;
  margin: 0 0 20px 0;
  
  &:focus {
    color: var(--color-white);
    background-color: var(--color-c6);
  }
}

.ts-form-select-edit {
  position: relative;
  padding: 10px;
  width: 100%;
  outline: 0;
  border: 4px solid #3d88e9;
  background-color: var(--color-c4);
  border-radius: 5px;
  font-size: 0.9em;
  margin: 0 0 20px 0;
  
  &:focus {
    color: var(--color-white);
    background-color: var(--color-c6);
  }
}

.ts-form-textarea-edit{
  position: relative;
  padding: 10px;
  width: 100%;
  outline: 0;
  border: 4px solid #3d88e9;
  margin: 10px 0 20px 0;
  background-color: var(--color-c4);
  border-radius: 5px;
  font-size: 0.9em;
  &:focus {
    color: var(--color-white);
    background-color: var(--color-c6);
  }
}

.ts-form-submit-edit
{
  padding: 10px 20px;
  color: var(--color-white);
  background-color: var(--color-c7);
  text-transform: uppercase;
  font-size: 0.9em;
  border-radius: 5px;
  margin: 0 0 20px 0;
  display:inline;
  border: 0;
}

.ts-form-submit-edit:hover
{
  background-color: var(--color-c6);
  border-radius: 20px;
}

.ts-form-wrapper {
  max-width: 50%;
  min-width: 500px;
  padding: 50px 30px 50px 30px;
  margin: 50px auto;   
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
}

.ts-form-group {
  position:relative;  

  & + .ts-form-group {
    margin-top: 30px;
  }
}

.ts-form-label {
  position: absolute;
  left: 0;
  top: 10px;
  color: #999;
  background-color: #fff;
  z-index: 10;
  transition: transform 150ms ease-out, font-size 150ms ease-out;
}

.ts-focused .ts-form-label {
  transform: translateY(-125%);
  font-size: .75em;
}

.ts-form-input {
  position: relative;
  padding: 12px 0px 5px 0;
  width: 100%;
  outline: 0;
  border: 0;
  box-shadow: 0 1px 0 0 #e5e5e5;
  transition: box-shadow 150ms ease-out;
  
  &:focus {
    box-shadow: 0 2px 0 0 blue;
  }
}

.ts-form-input.filled {
  box-shadow: 0 2px 0 0 lightgreen;
}




.ts-container-menu
{
  height: 100vh;
}

.ts-set-to-end {
 margin-left: auto;
 order: 2;
}

.ts-top-nav
{
  list-style: none;
}

.ts-top-nav li
{
  display: inline-block;
  padding: 5px 10px;
}

ul.ts-menu
{
  padding: 0;
  
}
ul.ts-menu li {
  list-style: none;
  padding: 5px 10px;

  cursor: grab;
  transition: all 0.2s ease;
  
}










ul.ts-menu li:hover,ul.ts-menu li.ts-li-active
{
  background-color:var(--color-c3);
  font-weight: bold;
}



.ts-li-cta-hidden
{
  display: none;
}

ul.ts-menu li:hover > div > a.ts-li-cta-hidden
{
  display: inline;
}



input[type="search"] {
  border: none;
  background: transparent;
  margin: 0;
  padding: 7px 8px;
  font-size: 14px;
  color: inherit;
  border: 1px solid transparent;
  border-radius: inherit;
}

input[type="search"]::placeholder {
  color: #bbb;
}





input.nosubmit {

  width: 100%;
  padding: 9px 4px 9px 40px;
   background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}


.ts-todo-holder
{
  min-height:200px;
  max-height:200px;
}

h1
{

}
.ts-fs-1
{
  font-size: 2em;
}

.ts-fs-2
{
  font-size: 1.5em;
}

.ts-fs-5
{
  font-size: 1em;
}


.ts-fs-6
{
  font-size: 0.8em;
}




.ts-button-clear
{
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  color: var(--color-c7);
}

.ts-button-clear:hover
{
  color: var(--color-c2);
}





















#ddArea {
        height: 200px;
        border: 2px dashed #ccc;
        line-height: 200px;
        text-align: center;
        font-size: 20px;
        background: #f9f9f9;
        margin-bottom: 15px;
      }
      
  .dd_upload {
    height: 100px;
    border: 2px dashed #ccc;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    background: #f9f9f9;
    margin-bottom: 15px;
  }    

      .drag_over {
        color: #000;
        border-color: #000;
      }

      .thumbnail {
        width: 50px;
        height: 50px;
        padding: 2px;
        margin: 2px;
        border: 2px solid lightgray;
        border-radius: 3px;
        float: left;
      }

      .d-none {
        display: none;
      }
      
      
      
   
   
   
   
   
   
   
   
   /*
    *
    *
    */
   .pie {
     --p:20;
     --b:22px;
     --c:darkred;
     --w:150px;
     
     width:var(--w);
     aspect-ratio:1;
     position:relative;
     display:inline-grid;
     margin:5px;
     place-content:center;
     font-size:25px;
     font-weight:bold;
     font-family:sans-serif;
   }
   .pie:before,
   .pie:after {
     content:"";
     position:absolute;
     border-radius:50%;
   }
   .pie:before {
     inset:0;
     background:
       radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
       conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
     -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
             mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
   }
   .pie:after {
     inset:calc(50% - var(--b)/2);
     background:var(--c);
     transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
   }
   .animate {
     animation:p 1s .5s both;
   }
   .no-round:before {
     background-size:0 0,auto;
   }
   .no-round:after {
     content:none;
   }
   @keyframes p {
     from{--p:0}
   } 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   #context-menu {
     background-color: #fffbf0;
     border: thin solid #e7c157;
     border-radius: 0 .5em .5em;
     position: absolute;
     z-index: 999;
     padding: 10px;
   }
   
   #context-menu button {
     cursor: pointer;
     background: transparent;
     border: 0;
   }
   
   img {
     background: white;
     border-radius: 1em;
   }
   
   aside {
     float: right;
     max-width: 20em;
     border: thin solid #337599;
     padding: 1em;
   }
   
   kbd {
     background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
     border: thin solid #aaa;
     border-radius: 2px;
     box-shadow: 1px 2px 2px #ddd;
     font-family: inherit;
     font-size: 0.9em;
     padding: 0 0.5em;
   }
   
   [hidden] {
     display: none;
   }
   
   
   
   
   .visuell-view{
     width: 100%;
     height: 600px;
   }
   
    
   .test123456
   {
     color: red;
   }
   
   .ts-ul-files
   {
     list-style: none;
     margin: 0;
     padding: 0;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   [draggable=true] {
     cursor: move;
   }
   
   [draggable=false] {
     cursor: not-allowed;
   }
   
   .start {
     background: transparent;
     color: transparent;
     animation: farbe 1s;
   }
   
   @keyframes farbe {
     from {
       background: #ffebe6;
       color: red;
     }
     to {
       background: transparent;
       color: transparent;
     }
   }
   
   .aktion {
     background: transparent;
     color: black;
   }
   
   .dropziel {
     color: var(--color-c4);
     height: 10px;
   }
   
   .dropziel.erreicht {
     background:var(--color-c6);
   }
   
   .wiederweg {
     background: #ffebe6;
     color: red;
   }
   
 
 
 
 
 
 
 
 
 
 .dropdown-menu::before, 
  .dropdown-menu::after {
      border: none;
      content: none;
  }
  
  .dropdown-toggle::after{
      display: none;
  }
  
  
  .ts-dropdown-actions
  {
    padding: 10px;
  }
  
  .ts-dropdown-actions li
  {
    
  }
  
  .ts-dropdown-actions a
  {
    padding: 4px 8px;
    display: block;
  }
  
  .ts-dropdown-actions a:hover
 {
     background-color: var(--color-c3);
     color: var(--color-c6);
     
  }
  
  .ts-tooltip-toggle
  {
    position: relative;
  }
  
  .ts-tooltip
  {
    display: none;
    position: absolute;
    background-color: var(--color-c3);
    padding: 20px;
    border-radius: 5px;
    width: 240px;
    text-transform: lowercase; !important;
  }
  
  .ts-tooltip-toggle:hover > .ts-tooltip
  {
    display: block;
    z-index: 100;
  }
  
  
  .ts-font-big{font-size: 4em;}
  .ts-font-1{font-size: 3em;}
  .ts-font-2{font-size: 2.5em;}
  .ts-font-3{font-size: 2em;}
  .ts-font-4{font-size: 1.5em;}
  .ts-font-5{font-size: 1em;}
  .ts-font-6{font-size: 0.8em;}
  

.drag_target
  {
    background-color: #002d58;
    opacity: 0.2;
  }

.drag_target:hover
{
  opacity: 1;
}




input[type="date"],
input[type="datetime-local"] {
  width: 100%;
  padding: 10px;
  border: 2px solid #20c4cb;
  border-radius: 8px;
  font-size: 16px;
  background-color: #f9f9f9;
  color: #333;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus {
  border-color: #0d8b91;
  box-shadow: 0 0 5px rgba(32,196,203,0.5);
  outline: none;
}