.link {
    color: white;
    text-decoration:none;
    text-align: center;
    white-space: nowrap;
    display: inline-flex;
    line-height: 2;
  }
  .link_animated {
    animation: backAndForth 10s linear infinite;
  }
  @keyframes backAndForth {
    0% { transform: translateX(0); }
    10% { transform: translateX(0); }
    45% { transform: translateX(calc(-100% + 330px)); }
    55% { transform: translateX(calc(-100% + 330px)); }
    90% { transform: translateX(0); }
    100% { transform: translateX(0); }
  }

.marquee {
    height: 25px;
    /* width: 420px; */
  
    overflow: hidden;
    position: relative;
  }
  
  .marquee div {
    display: block;
    width: 200%;
    height: 30px;
  
    position: absolute;
    overflow: hidden;
  
    animation: marquee 8s linear infinite;
  }
  
  .marquee span {
    float: left;
    width: 50%;
  }
  
  @keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
  }

.image-gallery {
    width: 800px;
    height: 600px;
    max-width: 800px;
    max-height: 600px;
}

.image-gallery-slide img {
    width: 800px;
    height: 600px;
    max-width: 800px;
    max-height: 600px;
    object-fit: cover;
    overflow: hidden;
    object-position: center center;
}


.tree_view{
    margin: 0;
    padding: 0;
}

.tree_view_root{
    font-weight: bold;
}

.fontFamilyName{
    font-family: SiemensSans !important;
    user-select: text;
    /* font-size: 60 !important; */
    /* font-weight: 600 !important; */
    
}

 @font-face {
font-family: 'SiemensSans';
src: url('../fonts/siemens/SiemensSans_Prof_Black.ttf') format('truetype');
font-weight: normal;
font-style: normal;    
} 


@font-face {
font-family: 'SiemensSans';
src: url('../fonts/siemens/SiemensSans_Prof_BlackItalic.ttf') format('truetype');
font-weight: BlackItalic;
font-style: normal;    
} 

@font-face {
font-family: 'SiemensSans';
src: url('../fonts/siemens/SiemensSans_Prof_Bold.ttf') format('truetype');
font-weight: Bold;
font-style: normal;    
}

@font-face {
font-family: 'SiemensSans';
src: url('../fonts/siemens/SiemensSans_Prof_BoldItalic.ttf') format('truetype');
font-weight: BoldItalic;
font-style: italic;    
}

@font-face {
font-family: 'SiemensSans';
src: url('../fonts/siemens/SiemensSans_Prof_Italic.ttf') format('truetype');
font-weight: Italic;
font-style: normal;    
}

@font-face {
font-family: 'SiemensSans';
src: url('../fonts/siemens/SiemensSans_Prof_Roman.ttf') format('truetype');
font-weight: normal;
font-style: normal;    
} 








.pulseAnim {
    
    -webkit-animation: shadow-pulse 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: shadow-pulse 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: shadow-pulse 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: shadow-pulse 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
  }

  @keyframes shadow-pulse
  {
       0% {
            box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
       }
       100% {
            box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
       }
  }

/* Styling of operation text shown at the top of the screen during training */
.operation-text {
    padding: 0.7em;
    padding-top: 0;
    font-weight: 500;
    /* font-size: 42pt; */
    margin-top: 1.15em;
    margin-bottom: 0.15em;
    color: white;
    line-height: auto;
}

.operation-text > div {
    font-weight: 500;
    font-size: 12pt;
    margin-top: 0.15em;
    margin-bottom: 0.15em;
    color: white;
    line-height: 0.8em;
}
/*------------------------------*/
/* Styling of operation error text shown at the top of the screen during training */
.vi_operation_warning_text
{
    padding: 0.7em;
    padding-top: 0;
    font-weight: 500;
    font-size: 42pt;
    margin-top: 1.15em;
    margin-bottom: 0.15em;
    background-color: white;
    /* color: red; */
    line-height: auto;
}

.vi_operation_warning_text > div {
    font-weight: 500;
    font-size: 12pt;
    margin-top: 0.15em;
    margin-bottom: 0.15em;
    color: red;
    background-color: white;
    line-height: 0.8em;
}
/*------------------------------*/
.flash-once {
    border-radius: 4px;
    opacity: 0.0;
    background: rgb(0, 63, 235);
    animation: flash 0.2s ease-in-out 2;
    -webkit-animation: flash 0.2s ease-in-out 2;
    /*filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
    /*-webkit-filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
}

.flash-once-red {
    border-radius: 4px;
    opacity: 0.0;
    background: rgb(235, 0, 0);
    animation: flash 0.2s ease-in-out 2;
    -webkit-animation: flash 0.2s ease-in-out 2;
    /*filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
    /*-webkit-filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
}

.blink-transparency {
    animation: blink 0.9s ease-in-out infinite;
    -webkit-animation: blink 0.9s ease-in-out infinite;
    /*filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
    /*-webkit-filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
}


.pulse-blink-ctc {
    animation: blink 2.0s ease-in-out infinite;
    -webkit-animation: blink 2.0s ease-in-out infinite;
    /* filter: drop-shadow(0 0 1.5px rgba(189, 199, 254, 0.5));
    -webkit-filter: drop-shadow(0 0 1.5px rgba(189, 199, 254, 0.5)); */
    /*filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
    /*-webkit-filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
}


.green_tint_image { filter: invert(59%) sepia(51%) saturate(2366%) hue-rotate(72deg) brightness(107%) contrast(127%) opacity(0.6)}

.blue-blink {
    animation: blink 1.5s ease-in-out infinite;
    -webkit-animation: blink 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 1.5px rgba(189, 199, 254, 0.5));
    -webkit-filter: drop-shadow(0 0 1.5px rgba(189, 199, 254, 0.5));
    /*filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
    /*-webkit-filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
}

.color-blue-blink {
    background: rgb(93, 188, 210);
    animation: blink 0.8s ease-in-out infinite;
    -webkit-animation: blink 0.8s ease-in-out infinite;
    /*filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
    /*-webkit-filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
}

.orange-blue-blink {
    background: rgba(255, 94, 0, 0.85);
    animation: blink 0.8s ease-in-out infinite;
    -webkit-animation: blink 0.8s ease-in-out infinite;
    /*filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
    /*-webkit-filter: contrast(0) sepia(100%) hue-rotate(198deg) saturate(10.0) brightness(1.52);*/
}

.indicate-miss-blur {
    animation: blur 0.15s ease-in-out 2;
    -webkit-animation: blur 0.15s ease-in-out 2;
}

.indicate-miss {

    animation: pulse 0.2s infinite;
    -webkit-animation:pulse 0.2s infinite;
    z-index: 10;
}

.indicate-miss-text  {
    display: block !important ;
    -webkit-animation: fadeinout 1.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeinout 1.5s; /* Firefox < 16 */
        -ms-animation: fadeinout 1.5s; /* Internet Explorer */
         -o-animation: fadeinout 1.5s; /* Opera < 12.1 */
            animation: fadeinout 1.5s;
}

@keyframes fadeinout {
    0% { opacity: 0; display: none; }
    50%   { opacity: 1;display: block; }
    0%   { opacity: 0; display: none; }
}


.button {
    transform-origin: 50% 50%;
}

.button:active {
    animation: click 0.15s 2 ease-out;
    -webkit-animation: click 0.15s 2 ease-out;
}

.button_help{
    overflow: hidden; 
    -webkit-transform:scale(1,1);   
}

.button_help:active {
    animation: blink 0.8s ease-in-out infinite;
    -webkit-animation: blink 0.8s ease-in-out infinite;
}

@keyframes pulse {
    0% {
      background-color: rgba(255, 64, 54, 0.096);
    }
    100% {
      background-color: rgba(255, 64, 54, 0.493);
    }
}



@keyframes click {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1.0);
    }
}

@-webkit-keyframes click {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1.0);
    }
}

@keyframes blur {
    0%, 100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }

    50% {
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
}

@-webkit-keyframes blur {
    0%, 100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }

    50% {
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
}

@keyframes flash {
    0%, 100% {
        opacity: 0.0;
    }

    50% {
        opacity: 0.8;
    }
}


@-webkit-keyframes flash {
    0%, 100% {
        opacity: 0.0;
    }

    50% {
        opacity: 0.8;
    }
}


@keyframes blink {
    0%, 100% {
        opacity: 0.3;
    }

    25% {
        opacity: 1.0;
    }

    75% {
        opacity: 1.0;
    }
}


@-webkit-keyframes blink {
    0%, 100% {
        opacity: 0.3;
    }

    25% {
        opacity: 1.0;
    }

    75% {
        opacity: 1.0;
    }
}

.transition-width {
  -webkit-transition: width 1s;
  transition: width 1s;
}

.ball{
    -webkit-transition:all .3s ease-in-out;    
    -webkit-transform:scale(1,1);    
}

.ball:hover{

    -webkit-transition:all .3s ease-in-out;    
 /* -webkit-transform:scale(1.25,1.25);   */
}

.ball:active {
    animation: blink 0.8s ease-in-out infinite;
    -webkit-animation: blink 0.8s ease-in-out infinite;
}

.box {
 height: 50px;
 top:0;
 left:0;
 width: 50px;
 background-color: red
}


.toop_in {
    width: 130px !important;
    height: 156px !important;
    z-index: 1;
    transition: 0.2s !important;
    overflow: hidden;
}
.toop_out {
    /* width: 338px !important; */
    /* height: 154px !important; */
    z-index: 999;
    transition: 0.2s !important;
    overflow: hidden;
}

.toop_out_extra {
    /* width: 338px !important; */
    /* height: 474px !important; */
    z-index: 999;
    transition: 0.1s !important;
    bottom:0 !important;
    overflow: hidden;
}

.toop_minimize {
    width: 35px !important;
    height: 35px !important;
    z-index: 999 ;
    transition: 0.2s !important;
    overflow: hidden;
}

.optext_minimize {
    width: 50px !important;
    height: 50px !important;
     /* transition: 0.2s !important;  */
}


.toop_in_part {
    z-index: -1;
    z-index: 0;
    display: none;
    margin: -100px 0 0 2px;
    opacity: 0; 
}

.toop_out_part {
 z-index: 999;
 opacity: 1; 
 display: block;
 margin: -100px 0 0 2px;
}

.hide_button {
    opacity: 0;
    transition: 1s; 
    display: none !important;
}

.show_button {
    opacity: 1;
    display: block !important;
    /* transition: 1.6s; */
}

#seconddiv {
 max-width: 0%;
 transition: 0.5s;
 overflow: hidden;
}
.App {
  height: 100%;
}
#root {
  height: 1200px;
}

.borderradius_component{
    border-radius: 4px  
}

.borderradius_component_scale_1_5{
    border-radius: 5px  
}
.background_component_feedback{
    background-color: #007082!important;
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23); */
    /* background-color: red; */
}

.background_component{
    background-color: rgba(0, 0, 0, 0.85)!important;
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23); */
    /* background-color: red; */
}

.transition_0_2{ 
    transition: 0.2s!important;
    
}


.sql_data_expand{
    width: 300px!important;
    transition: 0.2s!important;
    
}

.sql_data_in{
    width: 15px!important;
    transition: 0.2s!important;
    
}
.edit_box_expand{
    height: 115px!important;
    transition: 0.2s!important;    
}
.edit_box_expand_stored{
    height: 45px!important;
    transition: 0.2s!important;
    
}

.edit_box_in{
    height: 15px!important;
    transition: 0.2s!important;
    
}

.remark_expand{
    width: 230px!important;
    transition: 0.2s!important;
    
}

.remark_in{
    width: 15px!important;
    transition: 0.2s!important;
}

.button_edit_box_show{
    margin-top: 100px!important;
    transition: 0.2s !important;
}

.button_edit_box_hide{
    margin-top: 5px!important;
    transition: 0.2s !important;
}

.button_edit_box:hover{ 
    background-color: rgba(0, 0, 0, 0.65)!important;
    border-radius: 5px 
}

.button_feedback_tool{
    background-color: rgba(0, 0, 0, 0.65)!important;
    border-radius: 5px 
}

.button_component{    
    width: 50px;
    height: 50px;
}
.button_component:hover{ 
    background-color: rgba(0, 0, 0, 0.65)!important;
    border-radius: 5px 
}




.button_component_extra{    
    width: 50px;
    height: 50px;
}
.button_component_extra:hover{ 
    background-color: rgba(0, 0, 0, 0.20)!important;
    border-radius: 7px 
}

.button_component_optext{    
    width: 50px;
    height: 50px;
}

.button_component_optext:hover{    
    background-color: rgba(0, 0, 0, 0.20)!important;
    border-radius: 5px 
}


.bhover:hover{
    background-color: rgb(255, 255, 255, 0.2)!important;
    color: #FFF;
    /* border-radius: 7px */
}

.showlist{    
    -webkit-animation: fadein 0.2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.2s; /* Firefox < 16 */
        -ms-animation: fadein 0.2s; /* Internet Explorer */
         -o-animation: fadein 0.2s; /* Opera < 12.1 */
            animation: fadein 0.2s;
}

.hidelist{   
    opacity: 0;
    display: none;
    -webkit-animation: fadeout 0.2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 0.2s; /* Firefox < 16 */
        -ms-animation: fadeout 0.2s; /* Internet Explorer */
         -o-animation: fadeout 0.2s; /* Opera < 12.1 */
            animation: fadeout 0.2s;
}

.hidehelp{   
    opacity: 0;
    -webkit-animation: fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 0.5s; /* Firefox < 16 */
        -ms-animation: fadeout 0.5s; /* Internet Explorer */
         -o-animation: fadeout 0.5s; /* Opera < 12.1 */
            animation: fadeout 0.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}


.fadeinpage{    
    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
}

.fade-in {
    animation: fadeIn ease 2s;
    -webkit-animation: fadeIn ease 2s;
    -moz-animation: fadeIn ease 2s;
    -o-animation: fadeIn ease 2s;
    -ms-animation: fadeIn ease 2s;
  }
  
  @keyframes fadeIn {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    
    @-moz-keyframes fadeIn {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    
    @-webkit-keyframes fadeIn {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    
    @-o-keyframes fadeIn {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    
    @-ms-keyframes fadeIn {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
    }
}


.fade-out {
    animation: fadeOut ease 1s;
    -webkit-animation: fadeOut ease 1s;
    -moz-animation: fadeOut ease 1s;
    -o-animation: fadeOut ease 1s;
    -ms-animation: fadeOut ease 1s;
  }
  
  @keyframes fadeOut {
      100% {
        opacity:1;
      }
      0% {
        opacity:0;
      }
    }
    
    @-moz-keyframes fadeOut {
      100% {
        opacity:1;
      }
      0% {
        opacity:0;
      }
    }
    
    @-webkit-keyframes fadeOut {
      100% {
        opacity:1;
      }
      0% {
        opacity:0;
      }
    }
    
    @-o-keyframes fadeOut {
      100% {
        opacity:1;
      }
      0% {
        opacity:0;
      }
    }
    
    @-ms-keyframes fadeOut {
      100% {
        opacity:1;
      }
      0% {
        opacity:0;
    }
}