/*________________________________________*/
/* -----------UNIVERSAL STUFF------------ */

/* Work Sans, Amiko, */
.ui-txt{
    font-family: 'Amiko', sans-serif;
    color: #ffffff;
    font-size: 11px;
}
.ui-txt-dark{
    font-family: 'Amiko', sans-serif;
    color: #fff;
    font-size: 11px;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: #000;
}





/*________________________________________*/
/* -----------PROMPT--------------- */
.prompt-container {
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background-color: #404040;

    width: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.prompt-button-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.prompt-button{
    width: 80px;
    height: 36px;
    
}

.prompt-button-left{
}

.prompt-button-left{
}



/*________________________________________*/
/* -----------TOOL MENU--------------- */
.nav-tool-container{
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    background-color: #303030;

    display: flex;
    flex-direction: column;
    width: 40px;
    height: calc(99.5vh + 1px - 72px);
    
}

.nav-tool-button-container{
    height: 37px;
}
.nav-tool-button-container:hover{
    background-color: #404040;
}

.nav-tool-button{
    width: 31px;
    height: 31px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    background-color: #303030; 
    border-style: none;
    background-size: contain;
}
.nav-tool-button:hover{
    background-color: #404040;
}

.nav-tool-button:focus{
    outline: none;
    border: none;
}

.nav-tool-button.active{
    
}

#tool-btn-1 {background-image: url(icons/tm_i_01.svg);}
#tool-btn-2 {background-image: url(icons/tm_i_02.svg);}
#tool-btn-3 {background-image: url(icons/tm_i_03.svg);}
#tool-btn-4 {background-image: url(icons/tm_i_04.svg);}
#tool-btn-5 {background-image: url(icons/tm_i_05.svg);}
#tool-btn-6 {background-image: url(icons/tm_i_06.svg);}
#tool-btn-7 {background-image: url(icons/tm_i_07.svg);}
#tool-btn-8 {background-image: url(icons/tm_i_08.svg);}
#tool-btn-9 {background-image: url(icons/tm_i_09.svg);}
#tool-btn-10{background-image: url(icons/tm_i_10.svg);}
#tool-btn-11{background-image: url(icons/tm_i_11.svg);}
#tool-btn-12{background-image: url(icons/tm_i_12.svg);}
#tool-btn-13{background-image: url(icons/tm_i_13.svg);}
#tool-btn-14{background-image: url(icons/tm_i_14.svg);}
#tool-btn-15{background-image: url(icons/tm_i_15.svg);}
#tool-btn-16{background-image: url(icons/tm_i_16.svg);}
#tool-btn-17{background-image: url(icons/tm_i_17.svg);}

#tool-btn-1:active {background-image: url(icons/tm_a_01.svg);}
#tool-btn-2:active {background-image: url(icons/tm_a_02.svg);}
#tool-btn-3:active {background-image: url(icons/tm_a_03.svg);}
#tool-btn-4.active {background-image: url(icons/tm_a_04.svg);}
#tool-btn-5:active {background-image: url(icons/tm_a_05.svg);}
#tool-btn-6:active {background-image: url(icons/tm_a_06.svg);}
#tool-btn-7.active {background-image: url(icons/tm_a_07.svg);}
#tool-btn-8.active {background-image: url(icons/tm_a_08.svg);}
#tool-btn-9.active {background-image: url(icons/tm_a_09.svg);}
#tool-btn-10.active{background-image: url(icons/tm_a_10.svg);}
#tool-btn-11.active{background-image: url(icons/tm_a_11.svg);}
#tool-btn-12.active{background-image: url(icons/tm_a_12.svg);}
#tool-btn-13.active{background-image: url(icons/tm_a_13.svg);}
#tool-btn-14.active{background-image: url(icons/tm_a_14.svg);}
#tool-btn-15.active{background-image: url(icons/tm_a_15.svg);}
#tool-btn-16.active{background-image: url(icons/tm_a_16.svg);}
#tool-btn-17.active{background-image: url(icons/tm_a_17.svg);}

#tool-btn-1-container {order: 14; margin-top: 25px;}
#tool-btn-2-container {order: 15;}
#tool-btn-3-container {order: 16;}
#tool-btn-4-container {order: 12; margin-top: 25px;}
#tool-btn-5-container {order: 13;}
#tool-btn-6-container {order: 11;}
#tool-btn-7-container {order: 9; margin-top: 25px;}
#tool-btn-8-container {order: 10;}
#tool-btn-9-container {order: 20; visibility: hidden;}
#tool-btn-10-container{order: 1; margin-top: 5px;}
#tool-btn-11-container{order: 2;}
#tool-btn-12-container{order: 3;}
#tool-btn-13-container{order: 4;}
#tool-btn-14-container{order: 5;}
#tool-btn-15-container{order: 6;}
#tool-btn-16-container{order: 7;}
#tool-btn-17-container{order: 8;}



/*________________________________________*/
/* -------------TOOLTIP------------------ */
.tooltip-container {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip-container .tooltip-text {
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 25%;
    left: 50%;
    margin-left: 25px;

    /* Fade in tooltip */
    visibility: hidden;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-delay: 0.75s;
}

.tooltip-container .tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/*________________________________________*/
/* -----------BUTTONSLIDER--------------- */
.buttonslider-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    /*
    border-color: black;
    border-width: 1px;
    border-style: solid;
    */
    background-color: #303030;
}
.buttonslider-button{
    height: 20px;
    line-height: 19px;
    background-color: #171717;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
}
.buttonslider-text{
    background-color: #171717;
    height: 20px;
}
.buttonslider-title{
    height: 20px;
}
.buttonslider-button:hover{
    background-color: #888888;
    cursor: e-resize;
}


/* --------------------------Short Buttonslider */
.buttonslider-container.short{
    width: 160px;
    height: 36px;
}
.buttonslider-title.short{
    margin-left: auto;
    margin-right: 8px;
    height: 15px;
    margin-top: auto;
    margin-bottom: auto;
}
.buttonslider-button.short{
    width:54px;
    margin-right: 0px;
}
.buttonslider-text.short{
    width:66px;
    margin-right: 10px;
}

/* --------------------------Long Buttonslider */
.buttonslider-container.long{
    width: 240px;
    height: 24px;
}
.buttonslider-title.long{
    margin-left: 10px;
    margin-right: auto;
}
.buttonslider-button.long{
    width:100px;
    margin-left: 0px;
    margin-right: 0px;
}
.buttonslider-text.long{
    width:95px;
    margin-left: auto;
    margin-right: 10px;
}

/* --------------------------Side Buttons */
.buttonslider-sidebutton{
    padding: 0px;
    width: 8px;
    height: 20px;
    background-color: #505050;
    border-style: solid;
    border-width: 1px;
    border-color: #000;  
    background-size: 5px;
    background-repeat: no-repeat;
    background-position: center;
}
.buttonslider-sidebutton:hover{
    background-color: #888888;
    border-color: #888888; 
}
.buttonslider-button-increase{
    margin-right: 10px;
    margin-left: 0px;
    border-radius: 0px 2px 2px 0px;
    background-image: url(icons/triangle1.svg);
}
.buttonslider-button-decrease{
    margin-right: 0px;
    margin-left: 0px;
    border-radius: 2px 0px 0px 2px;
    background-image: url(icons/triangle2.svg);
}







/*________________________________________*/
/* -------------CHEDCKBOX----------------- */

.checkbox-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #303030;
}
.checkbox-title{

}
.checkbox-button{
    background-color: #CDCDCD;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 2px;
}


/* --------------------------Short Checkbox */
.checkbox-container.short{
    width: 160px;
    height: 36px;
}
.checkbox-title.short{
    margin-left: auto;
    margin-right: 10px;
    height: 15px;
    margin-top: auto;
    margin-bottom: auto;
}
.checkbox-button.short{
    margin-right: 66px;
}


/* --------------------------Long Checkbox */
.checkbox-container.long{
    width: 240px;
}
.checkbox-title.long{
    margin-left: 10px;
    margin-right: auto;
}
.checkbox-button.long{
    margin-right: 100px;
}



/*________________________________________*/
/* -----------STANDARD BUTTON------------ */

.stndbutton-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #303030;
}
.stndbutton-title{

}
.stndbutton-button{
    color: #000;
    text-align: center;
    vertical-align:middle;
    line-height: 10px;
    border-style: none;
    background-size: cover;
    background-color: #303030;
}

#btn1{
    background-image: url(icons/icon_presetButton.svg);
}


/* --------------------------Text Standard Button */
.stndbutton-container.text{
    width: 160px;
    height: 36px;
}
.stndbutton-title.text{
    
}
.stndbutton-button.text{
    margin-left: auto;
    margin-right: 10px;
    height: 15px;
    margin-top: auto;
    margin-bottom: auto;
}


/* --------------------------Icon Standard Button */
.stndbutton-container.icon{
    width: 240px;
}
.stndbutton-title.icon{
    
}
.stndbutton-button.icon{
    margin-left: 2px;
    margin-right: auto;
}

#btn1{
    width:  40px;
    height: 72px;
}


/*________________________________________*/
/* -----------MENU HEADLINE-------------- */

.menutitle-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #404040;
    
    width: 240px;
    height: 20px;
    
}
.menutitle-text{
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}

.menusubtitle-container{
    width: 240px;
    height: 20px;
    background-color: #303030;
    padding: 0px;
    
}
.menusubtitle-text{
    margin-left: 10px;
    margin-right: auto;
    padding-top: 10px;
    padding-top: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
}



/*________________________________________*/
/* -------------COLORFIELD--------------- */
.colorfield-container{
    width:  30px;
    height: 108px;
}








/*________________________________________*/
/* -----------CONTEXT MENU--------------- */
.contextmenu-container{
    width: 640px;
    height: 72px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;

    background-color: #303030;
}
.contextmenu-item-container{

}


/*________________________________________*/
/* -----------PRESET MENU--------------- */
.presetmenu-container{
    width: 240px;
    height: calc(99.5vh - 72px);
    position: absolute;
    left: 40px;
    top: 72px;
    background-color: #303030;
    font-family: 'Amiko', sans-serif;
    font-size: 11px;
    border-width: 1px;
    border-color: #000;
    border-style: solid;
    opacity: 85%;
    overflow-x: hidden;
    overflow-y: auto;

}
.presetmenu-buttons-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.presetmenu-input{
    height:25px;
    width: 120px;
    margin-left: 10px;
    margin-top: 8px;
    margin-bottom: 5px;
    font-family: 'Amiko', sans-serif;
    color: #fff;
    font-size: 11px;
    background-color:  #303030;
}
.presetmenu-buttons-input-container:after{}
.presetmenu-buttons-input-container{
    display: flex;
}
.presetmenu-button{
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-right: 35px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-style: none;
    background-size: cover;
    background-color: #303030;
}
.presetmenu-item-container{
    display: flex;
    height: 30px;
    margin: 0px;
}
.presetmenu-button-select{
    display: flex;
    border-width: 1px;
    border-color: #000;
    border-style: solid;
    border-radius: 5px;
    
}
.presetmenu-button-select:hover{
    cursor: pointer;
}
.presetmenu-button-select.active{
    background-color: #912444;
}
.presetmenu-button-select.selected{
    background-color: #663D49;
}
.presetmenu-title{
    width: 130px;
    color: #fff;
    margin-left: 10px;
}
.presetmenu-type{
    width: 60px;
    color: #000;
}
.presetmenu-button-apply{
    width:25px;
    height:25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.button-add-preset      {background-image:  url(icons/preset_add_i.svg);}
.button-del-preset      {background-image:  url(icons/preset_delete_i.svg);}
.presetmenu-button-apply{
    border-style: none;
    background-size: cover;
    background-color: #303030;
    background-image:  url(icons/preset_apply_i.svg);
}


/*________________________________________*/
/* -----------POLYGONSLIDER-------------- */

#svg-container-01{
    margin-left: 18px;
    margin-right: auto;
    background-color: #303030;
}
.cls-1 {
    fill: none;
  }

.cls-1, .cls-2, .cls-3 {
    stroke: #fff;
    stroke-miterlimit: 10;
}

.cls-2 {
    fill: #868686;
}

.cls-3, .cls-8 {
    fill: #303030;
}

.cls-4, .cls-6 {
    font-size: 11px;
    font-family: Amiko-Regular, Amiko;
}

.cls-4 {
    fill: #fff;
}

.cls-5 {
letter-spacing: -0.02em;
}

.cls-6 {
    fill: #868686;
}

.cls-7 {
    fill: #be1647;
}




/*________________________________________*/
/* -----------MENUS-------------- */

#side-menu-container{
    height: 100vh;
    background-color: #303030;
    overflow-x: hidden;
    overflow-y: auto;
}

.color-container{
    width: 240px;
    height: 420px;
    
    
    background-color: #303030;

    border-style: solid;
    border-color: #000;
    border-width: 1px;

    transition-property: height;
    transition-duration: 0.3s;
}
.color-container.active{
    height: 640px;
    transition-property: height;
    transition-duration: 0.3s;
}
.strokeFill-button-container{
    margin-left: 10px;
}
.colorpicker-button-container{
    height:0px;
}
.colorpicker-button-container.false{
    height:44px;
}
.colorpicker-button-switch-background{
    width:38px;
    height:38px;
    position: relative;
    top: -40px;
    left: 186px;

    border-style: none;
    background-color: #303030;
}


.colorpicker-button-switch-background.false{
    top: 4px;
    background-image: url(icons/color_strokeFill.svg);
}
.colorpicker-button-switch-background.true{
    background-image: url(icons/color_background.svg);
}



.movementmenu-container{
    width: 240px;
    min-height: 280px;


    background-color: #303030;

    border-style: solid;
    border-color: #000;
    border-width: 1px;
}

.forcesmenu-container{
    width: 240px;
    min-height: 140px;

    background-color: #303030;

    border-style: solid;
    border-color: #000;
    border-width: 1px;
}


div.vc-chrome{
    width: 180px;
    margin-left: auto;
    margin-right: auto;
}

.scrollable::-webkit-scrollbar {
    width: 10px;
  }
   
  .scrollable::-webkit-scrollbar-track {
    background: #404040;
    border-style: solid;
    border-color: #000;
    border-width: 1px;
  }
   
  .scrollable::-webkit-scrollbar-thumb {
    background: #CDCDCD; 
    border-radius: 5px;
  }

  .scrollable::-webkit-scrollbar-thumb:hover {
    background: #dedede; 
  }




  #top-menu-container{
    display: flex;
    flex-direction: row;

  }

  #bottom-menu-container{
    display: flex;
    flex-direction: row;

  }

  #context-tool-paint-container{
    display: flex;
    flex-direction: column;

  }

  #app{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }


#preview-canvas-container{
    flex-basis: auto;
    width: calc(99.9vw + 4px - 40px - 640px - 240px - 4px);
    height: 72px;
    background-color: #162cbe;
}
#paint-container{
    width: calc(99.99vw + 2px - 40px - 240px - 4px);
    height: calc(99.5vh + 3px - 72px);
    background-color: #000;
}
.contextmenu-container{
    width: 640px;
}









.sfb-1 {
  fill: none;
}

.sfb-2 {
  clip-path: url(#clip-path-fill);
}

.sfb-3 {
  fill: #f0f0f1;
}

.sfb-4 {
  fill: #dbdbdb;
}
.sfb-5 {
  fill: url(#Unbenannter_Verlauf_10);
}

.sfb-6 {
  fill: url(#Unbenannter_Verlauf_15);
}


.sfb-7 {
    fill: none;
}

.sfb-8 {
clip-path: url(#clip-path-stroke);
}

.sfb-9 {
fill: #f0f0f1;
}

.sfb-10 {
fill: #dbdbdb;
}

.sfb-11 {
fill: url(#Unbenannter_Verlauf_20);
}

.sfb-12 {
fill: url(#Unbenannter_Verlauf_25);
}