@import url('https://fonts.googleapis.com/css?family=Roboto');
html {
  font-family: 'Roboto', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView ==> careful, this is reset back to defaults for input[type='text'] bellow */
}

body {
    padding: 0 ;
    margin: 0 ;
    /*font-size:12pt;*/
    font-family: "Helvetica Neue", Arial, sans-serif ;
    /*font-weight: 100 ;*/
    -webkit-font-smoothing: antialiased ;

    background-color: #333333;

    min-height: 100%;
    height:100%;
}

button {
    height: 25px ;
    border: 1px solid #000000 ;
    background-color: #ffffff ;
}
button:focus {
    outline: 0 ;
}

input[type='radio'] {
    /*transform: scale( 1.5 ) ;*/
}
input[type='text'], input[type='email'], input[type='password'] {
    background-color: #ffffff ;
    -webkit-user-select: auto ;
}
input[type='number'] {
    background-color: #ffffff ;
}
input:focus {
    outline: 0 ;
}

progress {
  border: none;
  width: 100%;
  height: 30px;
}
progress::-webkit-progress-value { background: lightblue; }
progress::-moz-progress-bar { background: lightblue; }
progress { color: lightblue; }

table {
    font-size: small ;
}

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

.button_in_text {
    border: 1px solid black ;
    background-color: white ;
    height: 30px ;
    width: 30px ;
}

.checkered_background {
    background-image: url( "transparent_background.png" ) ;
    background-repeat: repeat ;
} 

.clickable {
    cursor: pointer ;
}

.collaboration_canvas {
    position: absolute ;
    top: 0px ;
    left: 0px ;
}


.color_button {
    width: 83px ;
    height: 40px ;
    padding-left: 30px ; /* to make room for the radio button */
    outline: none ;
    border: 1px solid #000000 ;
    -webkit-border-radius: 0px ;
    -webkit-appearance:none ;
    border-radius: 0 ;
    -moz-border-radius: 0px ;
    border-radius: 0px ;
    font-size: x-small;
}
.color_button_right {
    width: 84px ;
    margin-left: -1px ;
}


.cp-color-picker {
    z-index: 10011 ;
}

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.hidden {
    display: none ;
}

.menu_title {
    width: 100% ;
    text-align: center ;
    float:center;
}

.move_arrows {
    width: 20px ;
    height: 20px ;
    cursor: pointer ;
}

.no_border {
    border: 0px ;
}

.outlined {
    -webkit-filter: drop-shadow( 10px 10px 2px rgba(0, 0, 0, .7) ) ;
    filter: drop-shadow( 10px 10px 2px rgba(0, 0, 0, .7) ) ;
    /*color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 ;*/
}


.plant_wizard_button {
    width: 32px ;
    height: 32px ;
    border: 1px solid #000000;
}


.plus_or_minus_button {
    height: 30px ;
    min-width: 30px ;
    cursor: pointer ;
}

.slider_textbox {
    height: 30px ;
    min-width: 30px ;
    text-align: center ;
}


.menu_mandala_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_mandala_slider {
    width: 112px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_mandala_slider {
        height: 30px ;
        min-height: 30px ;
    }
}

.menu_plant_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
    border: 1px solid #000000;
}
.menu_plant_slider {
    width: 112px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_plant_slider {
        height: 30px ;
        min-height: 30px ;
    }
}

.menu_pro_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_pro_slider {
    width: 112px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_pro_slider {
        height: 30px ;
        min-height: 30px ;
    }
}

.menu_replay_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}

.menu_session_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_snowflake_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_snowflake_slider {
    width: 70px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_snowflake_slider {
        height: 30px ;
        min-height: 30px ;
    }
}

.menu_tessellation_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_tessellation_slider {
    width: 112px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_tessellation_slider {
        height: 30px ;
        min-height: 30px ;
    }
}

.menu_thayer_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_thayer_slider {
    width: 112px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_thayer_slider {
        height: 30px ;
        min-height: 30px ;
    }
}

.snowflake_color {
    width: 42px ;
    height: 32px ;
}
.snowflake_color_selected {
    -webkit-box-shadow:inset 0px 0px 0px 4px #fbff76;
    -moz-box-shadow:inset 0px 0px 0px 4px #fbff76;
    box-shadow:inset 0px 0px 0px 4px #fbff76;
}

.textbox {
    height: 30px ;
    min-width: 30px ;
    border: 1px solid #000000 ;
    text-align: center ;
}

.td_no_border {
    border: 0px ;
}
.td_top {
    border-top: 1px solid black ;
}
.td_top_left {
    border-left: 1px solid black ;
    border-top: 1px solid black ;
}
.td_top_middle {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
}
.td_top_middle_no_top_border {
    border-left: 1px solid black ;
}
.td_top_right {
    border-right: 1px solid black ;
    border-top: 1px solid black ;
    border-left: 1px solid black ;
}
.td_top_right_no_separator {
    border-right: 1px solid black ;
    border-top: 1px solid black ;
}
.td_left {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
    border-bottom: 1px solid black ;
}
.td_middle {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
    border-bottom: 1px solid black ;
}
.td_right {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
    border-right: 1px solid black ;
    border-bottom: 1px solid black ;
}
.td_right_no_separator {
    border-top: 1px solid black ;
    /*border-left: 1px solid black ;*/
    border-right: 1px solid black ;
    border-bottom: 1px solid black ;
}
.td_middle_left {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
}
.td_middle_middle {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
}
.td_middle_right {
    border-top: 1px solid black ;
    border-right: 1px solid black ;
    border-left: 1px solid black ;
}
.td_middle_right_no_separator {
    border-top: 1px solid black ;
    border-right: 1px solid black ;
}
.td_bottom {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
    border-right: 1px solid black ;
    border-bottom: 1px solid black ;
}
.td_bottom_left {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
    border-bottom: 1px solid black ;
}
.td_bottom_middle {
    border-top: 1px solid black ;
    border-bottom: 1px solid black ;
    border-left: 1px solid black ;
}
.td_bottom_middle_nothing {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
}
.td_bottom_right {
    border-top: 1px solid black ;
    border-right: 1px solid black ;
    border-bottom: 1px solid black ;
    border-left: 1px solid black ;
}
.td_bottom_right_nothing {
    border-top: 1px solid black ;
}
.td_bottom_right_no_separator {
    border-top: 1px solid black ;
    border-right: 1px solid black ;
    border-bottom: 1px solid black ;
}
/*.td_snowflake_color_bottom_left {
    border-bottom: 1px solid black ;
    border-left: 1px solid black ;
}
.td_snowflake_color_bottom_middle {
    border-bottom: 1px solid black ;
}
.td_snowflake_color_bottom_right {
    border-bottom: 1px solid black ;
    border-right: 1px solid black ;
}
.td_snowflake_color_top_left {
    border-top: 1px solid black ;
    border-left: 1px solid black ;
}
.td_snowflake_color_top_middle {
    border-top: 1px solid black ;
}
.td_snowflake_color_top_right {
    border-top: 1px solid black ;
    border-right: 1px solid black ;
}*/

.tr_vertical_separator {
    height: 10px ;
    max-height: 10px ;
}

.tool_button {
    width: 120px ;
    height: 30px ;
    padding-left: 30px ;
    cursor: pointer ;
    vertical-align: middle; 
    outline: none ;
}
.tool_button_axial_symmetry {
    width: 120px ;
    height: 30px ;
    cursor: pointer ;
}
.tool_button_loose_width {
    height: 30px ;
    min-width: 30px ;
    padding-left: 30px ;
    cursor: pointer ;
}
.tool_button_just_the_icon {
    background-repeat: no-repeat ;
    background-size: 30px 30px ;
    background-position: 3px ;
}
.tool_button_tessellation_shape {
    width: 120px ;
    height: 30px ;
    padding-left: 30px ;
    cursor: pointer ;
    vertical-align: middle; 
}
.tool_button_selected {
    background-color: #FBFF76 ;
}

.white_background {
    background-color: white ;
}


#add_color_button_pro {
    width: 83px ;
    height: 40px ;
    outline: none ;
    border: 1px solid #000000 ;
    -webkit-border-radius: 0px ;
     -webkit-appearance:none ;
    -moz-border-radius: 0px ;
    border-radius: 0px ;
    font-size: x-small;
}


#adjust_centers {
    display: none ;
    position: absolute ;
    top: 0px ;
    left: 0px ;
    width: 0px ;
    height: 0px ;

    z-index: 10002 ;
}


#axis_canvas {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    /*filter: alpha(opacity=80) ;
    -moz-opacity: 0.8 ;
    -khtml-opacity:0.8 ;
    opacity:0.8 ;*/

    z-index: 10000 ;
}

#at-image-sharing-tool {
    position: fixed ;
}

#background_color_canvas {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    width: 0px ;
    height: 0px ;
    z-index: 0 ;
}


#current_tool {
    position: fixed;
    top: 10px ;
    left: 187px;

    border: 1px solid black ;
    background-color: white ;

    display: none ;

    z-index: 10009 ;
}
#current_tool_text {
    float: right ;
    vertical-align: middle ;
    line-height: 30px ;
    padding-right: 6px ;
}
#current_tool_image {
    float: left ;
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-repeat: no-repeat ;
    background-size: 30px 30px ;
    background-position: 3px ;
}


#draw_canvas {
    position: absolute ;
    top: 0px ;
    left: 0px ;

    z-index: 10001 ;
}


#embedded_messages {
    position: absolute ;
    top: 20% ;
    left: 30% ;
    right: 30% ;
    font-size: x-large ;
    text-shadow: 0 0 10px #FFFFFF ;
    text-align: center ;
    display: none ;
    z-index: 10000 ;
}
#embedded_messages_plant {
    position: absolute ;
    top: 10% ;
    left: 20% ;
    right: 20% ;
    font-size: x-large ;
    text-shadow: 0 0 10px #FFFFFF ;
    text-align: center ;
    display: none ;
    z-index: 10000 ;
}

#fb-holder {
    z-index: 10010 ;
    display: none ;
    position: fixed ;
    top: 50px ;
    right: 10px ;
}

#fill_canvas {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    width: 0px ;
    height: 0px ;
    z-index: 1 ;
}


#match {
    display: none ;

    background-color: #7fd8be ;

    position: fixed ;
    top: 0px ;
    left: 0px ;
    width: 100% ;
    height: 100% ;

    z-index: 20001 ;
}


#main_canvas {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    width: 0px ;
    height: 0px ;

    z-index: 2 ;
}


#menu_about {
    width: 300px ;
    position: fixed ;
    right: 10px ;
    bottom: 10px ;
    display: none ;
    background-color: #ffffff ;
    border: 1px black solid ;
    padding: 5px;
    z-index:10300 ;
    font-size: small;
}


#menu_account {
    display: none ;
    position: fixed ;
    top: 75px ;
    right: 10px ;

    background-color: #ffffff ;

    z-index:10011 ;

    touch-action: manipulation ;

    text-align: -webkit-right;

    border: 1px black solid ;
    padding: 5px ;
    font-size: small;

    max-height: 150px ;

    overflow-y: auto ;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}


#menu_chat {
    padding: 5px ;

    display: none ;

    position: fixed ;
    top: 92px ;
    right: 10px ;

    background-color: #ffffff ;
    border: 1px black solid ;
    padding: 5px;
    z-index:10297 ;

    touch-action: manipulation ;

    font-size: small;
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace ;
}
#menu_chat_content {
    max-height: 400px ;
    width: 200px ;
    max-width: 200px ;

    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    word-wrap: break-word ;
    display:inline-block ;

    padding-bottom: 10px ;
}
#menu_chat_text_input {
    border: 1px solid black ;
    width: 200px ;
    max-width: 200px ;
}


#menu_chat_text_input {
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace ;
}


#menu_keyboard_shortcuts {
    max-width: 300px ;
    position: fixed ;
    right: 10px ;
    bottom: 10px ;
    display: none ;
    background-color: #ffffff ;
    border: 1px black solid ;
    padding: 5px;
    z-index:10299 ;
    font-size: small;
}


#menu_mandala {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}
#menu_mandala_about {
    display: none ;

    position: fixed ;
    bottom: 10px ;
    right: 10px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}
#menu_mandala_content {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    pointer-events: all ;
}
#menu_mandala_show_hide {
    position: absolute ;
    top: 0px ;
    left: 10px ;

    color: blue ;
    cursor: pointer ;

    z-index: 10012 ;
    pointer-events: all ;
}

#menu_flowstir {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    
    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}
#menu_flowstir_content {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    pointer-events: all ;
}
#menu_flowstir_show_hide {
    position: absolute ;
    top: 0px ;
    left: 10px ;

    color: blue ;
    cursor: pointer ;

    z-index: 10012 ;
    pointer-events: all ;
}
#menu_flowstir_about {
    display: none ;

    position: fixed ;
    bottom: 10px ;
    right: 10px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}
#menu_flowstir_icon {
    display: none ;

    position: fixed ;
    bottom: 40px ;
    right: 15px ;

    width: 30px ;
    height: 30px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}
.menu_flowstir_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_flowstir_slider {
    width: 112px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_flowstir_slider {
        height: 30px ;
        min-height: 30px ;
    }
}

#menu_ism {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    
    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}

#menu_plant {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}
#menu_plant_about {
    display: none ;

    position: fixed ;
    bottom: 10px ;
    right: 10px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}

#menu_plottybot_about {
    display: none ;

    position: fixed ;
    bottom: 10px ;
    right: 10px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}


#menu_pro {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}
#menu_pro_content {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    
    pointer-events: all ;
}
#menu_pro_show_hide {
    position: absolute ;
    top: 0px ;
    left: 10px ;

    color: blue ;
    cursor: pointer ;

    z-index: 10012 ;
    pointer-events: all ;
}


#menu_recursion {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}
#menu_recursion_about {
    display: none ;

    position: fixed ;
    bottom: 10px ;
    right: 10px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}
#menu_recursion_content {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    
    pointer-events: all ;
}
#menu_recursion_show_hide {
    position: absolute ;
    top: 0px ;
    left: 10px ;

    color: blue ;
    cursor: pointer ;

    z-index: 10012 ;
    
    pointer-events: all ;
}
.menu_recursion_item {
    width: 40px ;
    min-width: 40px ;
    height: 30px ;
    min-height: 30px ;
    background-position: 5px ;
    background-size: 30px 30px ;
    background-repeat: no-repeat ;
}
.menu_recursion_slider {
    width: 112px ;
}
@supports not (-ms-ime-align: auto) {
    .menu_recursion_slider {
        height: 30px ;
        min-height: 30px ;
    }
}


#menu_replay {
    padding: 10px ;

    display: none ;

    position: fixed ;
    top: 10px ;
    right: 10px ;

    z-index:10010 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}


#menu_session {
    /*padding: 10px ;*/

    display: none ;

    position: fixed ;
    top: 10px ;
    right: 10px ;

    z-index:10010 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}

#menu_session_show_hide {
    position: absolute ;
    top: 0px ;
    right: 10px ;

    color: blue ;
    cursor: pointer ;

    z-index: 10012 ;
}

#menu_snowflake {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached => not really needed, small menu */
    /*overflow-y: scroll ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;*/
}
#menu_snowflake_about {
    display: none ;

    position: fixed ;
    bottom: 10px ;
    right: 10px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}

#menu_stats {
    padding: 5px ;

    display: none ;

    position: fixed ;
    top: 75px ;
    right: 10px ;

    background-color: #ffffff ;
    border: 1px black solid ;
    padding: 5px;
    z-index:10298 ;

    touch-action: manipulation ;

    font-size: small;
}

#menu_session_show_hide {
    color: blue ;
    cursor: pointer ;
}


#menu_tessellation {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}
#menu_tessellation_about {
    display: none ;

    position: fixed ;
    bottom: 10px ;
    right: 10px ;

    z-index:10301 ;

    touch-action: manipulation ;

    text-align: -webkit-right;
}
#menu_tessellation_content {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    
    pointer-events: all ;
}
#menu_tessellation_show_hide {
    position: absolute ;
    top: 0px ;
    left: 10px ;

    color: blue ;
    cursor: pointer ;

    z-index: 10012 ;

    pointer-events: all ;
}

#menu_thayer {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;

    /* make scrollable if window height reached */
    overflow-y: auto ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    height: calc(100vh - 40px) ;
    max-height: calc(100vh - 40px) ;
    width: 166px ;
}
#menu_thayer_content {
    position: absolute ;
    top: 0px ;
    left: 0px ;

    pointer-events: all ;
}

#menu_www {
    position: fixed ;
    top: 10px ;
    left: 10px ;

    display: none ;

    z-index:10011 ;

    touch-action: manipulation ;
}


#menu_tools {
    padding: 10px ;

    display: none ;

    position:fixed ;
    top: 10px ;
    left: 10px ;
    width: 400px ;
    min-width: 400px ;

    background-color: #ffffff ;
    filter: alpha(opacity=80) ;
    -moz-opacity: 0.8 ;
    -khtml-opacity: 0.8 ;
    opacity: 0.8 ;
    border: 1px #DDDDDD dashed ;

    z-index:10011 ;

    touch-action: manipulation ;
}

#messages {
    display: none ;
    position: fixed ;
    background-color: #ffffff ;
    top: 42px ;
    left: 50% ;
    margin-left: -150px ;
    width: 300px ;
    border: 1px black solid ;
    padding: 5px ;
    font-size: small;

    z-index: 10020 ;
}

#floating_menu_tools {
    padding: 10px ;

    position:fixed ;
    top: 10px ;
    left: 10px ;

    /*background-color: #ffffff ;
    filter: alpha(opacity=80) ;
    -moz-opacity: 0.8 ;
    -khtml-opacity: 0.8 ;
    opacity: 0.8 ;
    border: 1px #DDDDDD dashed ;*/

    z-index:10011 ;

    touch-action: manipulation ;
}

#menu_www_show_hide {
    color: blue ;
    cursor: pointer ;

    position: absolute ;
    top: 1px ;
    left: 1px ;
}

#save_and_print_button {
    display: none ;
}

#save_image {
    /*background-image: url( "transparent_background.png" ) ;*/
    background-repeat: repeat ;
    display: none ;
    position: fixed ;

    border: 10px solid black ;

    z-index: 10101 ;
}
#save_image_wrapper {
    background-color: black ;
    display: none ;

    position: fixed ;
    top: 0px ;
    left: 0px ;

    width: 100% ;
    height: 100% ;

    filter: alpha(opacity=70) ;
    -moz-opacity: 0.70 ;
    -khtml-opacity:0.70 ;
    opacity:0.70 ;

    z-index: 10101 ;
}
#save_image_close_button {
    background-color: black ;
    color: gray ;
    display: none ;
    position: fixed ;

    border: 10px solid black ;
    cursor: pointer ;

    z-index: 10102 ;
}
#save_image_url {
    background-color: black ;
    color: gray ;
    display: none ;
    position: fixed ;

    border: 10px solid black ;

    z-index: 10101 ;
}
#save_image_use_permission {
    background-color: black ;
    color: gray ;
    display: none ;
    position: fixed ;

    border: 10px solid black ;
    cursor: pointer ;

    text-align: right ;

    z-index: 10102 ;
}
#save_image_contact {
    background-color: black ;
    color: gray ;
    display: none ;
    position: fixed ;

    border: 10px solid black ;
    cursor: pointer ;

    z-index: 10102 ;
}
#at-image-sharing-tool {
    z-index: 10102 ;
}

#save_progress_wrapper {
    background-color: black ;
    display: none ;

    position: fixed ;
    top: 0px ;
    left: 0px ;

    width: 100% ;
    height: 100% ;

    filter: alpha(opacity=70) ;
    -moz-opacity: 0.70 ;
    -khtml-opacity:0.70 ;
    opacity:0.70 ;

    z-index: 101201 ;
}
#save_progress {
    position: fixed ;
    top: 49% ;
    left: 50% ;
    margin-left: -100px ;
    width: 200px ;

    display: none ;
    z-index: 101201 ;
}
#save_progress_bar {
    background-color: white ;
}
#save_progress_console {
    color: white ;
    text-align: center ;
    padding: 5px ;
}

#scroll_canvas {
    position: absolute ;
    top: 0px ;
    left: 0px ;

    z-index: 10002 ;
}
#small_device_menu_container {
    position: absolute ;
    display: none ;
    left: 0px ;
    top: 0px ;
    width: 100% ;
    max-width: 100% ;
    z-index: 10010 ;
    overflow-y: scroll ;
    overflow-x: hidden ;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}



/*****************************************
 *                                       *
 *         rounded switch start          *
 *                                       *
 *****************************************/
 /* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;

    filter: alpha(opacity=75) ;
    -moz-opacity: 0.75 ;
    -khtml-opacity:0.75 ;
    opacity:0.75 ;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;

    filter: alpha(opacity=75) ;
    -moz-opacity: 0.75 ;
    -khtml-opacity:0.75 ;
    opacity:0.75 ;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;

    filter: alpha(opacity=75) ;
    -moz-opacity: 0.75 ;
    -khtml-opacity:0.75 ;
    opacity:0.75 ;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
input:range {
    padding: 0px ;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 
/*****************************************
 *                                       *
 *         rounded switch end            *
 *                                       *
 *****************************************/

 .st-custom-button[data-network] {
    display: none;
    cursor: pointer;
    position:absolute;
    z-index:999999999;

    width: 32px ;
    min-width: 32px ;
    height: 32px ;
    min-height: 32px ;
    background-position: 0px ;
    background-size: 32px 32px ;
    background-repeat: no-repeat ; 
   
   /*&:hover, &:focus {
      text-decoration: underline;
      background-color: #00c7ff;
   }*/
}


/*****************************************
 *                                       *
 *         range slider                  *
 * CSS generated with: https://www.cssportal.com/style-input-range/ *
 *****************************************/
input[type=range] {
  height: 24px;
  -webkit-appearance: none;
  /*margin: 10px 0;
  width: 100%;*/
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 1px #000000;
  background: #E5E5E5;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #000000;
  height: 17px;
  width: 10px;
  border-radius: 2px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #E5E5E5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 1px #000000;
  background: #E5E5E5;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #000000;
  height: 17px;
  width: 10px;
  border-radius: 2px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #E5E5E5;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #E5E5E5;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 1px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #000000;
  height: 17px;
  width: 10px;
  border-radius: 2px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #E5E5E5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #E5E5E5;
}
/* added by hand */
input[type=range]:disabled {
    background-color: #ffffff ;
}
input[type=range]:disabled::-webkit-slider-thumb {
    border: 1px solid #bdbdbd;
}
input[type=range]:disabled::-moz-range-thumb {
    border: 1px solid #bdbdbd;
}
input[type=range]:disabled::-ms-thumb {
    border: 1px solid #bdbdbd;
}