#redlinediv
{
    position: absolute;
    left: 0px;    
    bottom: 0px;
    top: 0px;
    width: 85px;
    background-color: #444;    
    color: white;
    /*box-shadow: 0px -4px 10px 0px #333;*/
    padding-top: 20px;
    transition: all 0.2s ease-out;
    opacity: 1;
    z-index: 10;
    backdrop-filter: blur(6px);
    overflow-y: auto !important;
    overflow-x: hidden;
    /*-webkit-backdrop-filter: blur(6px);*/
}

#submenudiv_content
{    
    position: absolute;
    padding-top: 20px;
}

#submenudiv_collapse
{
    display: none; /*hide for now*/
    position: absolute;
    right: 0px;
    width: 11px;
    height: 100%;
    opacity: 0.8;
    background-color: #3e7593;
    /*background-image: linear-gradient(to left, #3e7593 , #555);*/
    background-image: linear-gradient(to left, #3e7593 , #4680a0);                    
}

#submenudiv_collapse img
{
    position: absolute;
    top: 48%;        
}

#submenudiv_collapse:hover
{
    cursor: pointer;    
    background-color: #427a98;
    background-image: linear-gradient(to left, #427a98 , #4c87a8);
    
}

#submenudiv {    
    padding-top: 20px;
    position: absolute;
    left: 80px;
    bottom: 0px;
    top: 0px;
    width: 0px;
    background-color: #555;
    color: white;
    box-shadow: 0px -4px 10px 0px #333;    
    transition: all 0.2s ease-out;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
    backdrop-filter: blur(6px);
    /*-webkit-backdrop-filter: blur(6px);*/
    font-size: 13px;    
}

#redlinediv, #submenudiv {
    z-index: 5001;
}

#svg_drawing_print {
    z-index: 5000;
}


#submenudiv hr {
    background-color: #777;
    height: 2px;
    border: 0;
}

.viewerbutton
{
     padding-top: 3px;    
}

.viewerbutton img
{
    box-shadow: 2px 2px 5px 0px #333;
    transition: all 0.2s ease-out;
    /*pointer-events: none;*/  
}

.viewerbutton img:hover
{   
    box-shadow: 0px 0px 10px 0px #bccbd1; 
    transition: all 0.2s ease-out;
}

.viewerbutton:hover
{
    cursor: pointer;
}

.viewer_mobile_tools_bottomcontainer {
    display: flex; /* Align icons in a row */
    gap: 10px;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 51000;
}

.viewer_mobile_tools_container {
    display: flex; /* Align icons in a row */
    gap: 10px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50000;    
}

.viewer_mobile_savebutton {
    color: #dd9999;
    font-weight: bold;
    display: flex;
    align-items: center;
    line-height: 100%;
    padding-bottom: 2px;
}

.viewer_mobile_savebutton[disabled]
{
    display: block;
}

    /*.viewer_mobile_bottomtools:has(.viewer_mobile_savebutton[disabled="true"]) {
    background-color: red;
}*/
    .viewer_mobile_bottomtools {
        width: auto; /* Dynamic width based on content */
        height: 15px; /* Fixed height */
        display: flex; /* Align icons in a row */
        justify-content: center;
        align-items: center;
        background-color: #333; /* Light background for visibility */
        padding: 10px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); /* Optional shadow */
        border-radius: 10px;
    }

.viewer_mobile_tools {
    width: auto; /* Dynamic width based on content */
    height: 30px; /* Fixed height */
    display: flex; /* Align icons in a row */
    justify-content: center;
    align-items: center;
    background-color: #333; /* Light background for visibility */
    padding: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); /* Optional shadow */
    border-radius: 10px;
}

.viewer_mobile_tools img {
    width: 24px;
    height: 24px;
    margin: 0 10px; /* Space between icons */
    opacity: 0.7;
    border-bottom: 3px solid transparent;
    transition: all ease-in 0.15s;
    padding-bottom: 2px;
}

    .viewer_mobile_tools img.selected {
        opacity: 1;
        border-bottom: 3px solid #3e7593;
        border-radius: 3px;            
    }

.viewer_mobile_tools img:hover {
    opacity: 1;
}

    .redlinebtn {
        /*position: absolute;    
    right: 0px;
    left: 0px;
    text-align: center;*/
        padding-top: 3px;
        position: relative;
    }

.redline_menu_header {
    border-top: 2px solid #aaaaaa44;
    font-size: 11px;
    color: #aaa;
}

.redline_menu_header:only-child {
    display: none;
}

#redline_menu_layers_div li {
    font-size: 11px;
}

#redline_menu_areasum
{
    width: 100%;
}

#redline_menu_areasum .switch
{    
    margin-left: 28px;
    margin-bottom: 8px;
}

.redline_menu_select {
    padding: 2px;
    font-size: 11px;
    width: 73px;
    margin-bottom: 9px;
    margin-top: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    padding-left: 1px;
    padding-right: 1px;
    background-color: #e1e1e1;
    margin-left: 4px;
}


.redline_menu, .redline_menu_edit
{
    position: relative;
    top: 0px;    
    margin: 0px;
    padding: 0px;
    z-index: 20;
    padding-bottom: 2px;
}

.redline_menu li, .redline_menu_edit li
{
    list-style: none;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;       
}

.redline_menu li a, .redline_menu_edit li a
{    
    font-size: 11px;
    text-decoration: none;    
    color: white;
}
 
.redline_menu li a:hover, .redline_menu_edit li a:hover
{
    color: #aaa;
    font-size: 11px;
    text-decoration: none;
}

.redline_menu_edit input[type="button"]:disabled {
  opacity: 0.5;
  color: #444;
}

.redlinebtnActive
{    
    color: #aaa !important;
    font-weight: bold;    
}

.redlinebtn img
{    
    /*box-shadow: 2px 2px 5px 0px #333;*/
    transition: all 0.2s ease-out;
    width: 16px;
    position:relative;
    top: 3px;    
    /*pointer-events: none;*/  
}

.redlinebtn img:hover
{   
    /*box-shadow: 0px 0px 10px 0px steelblue; */
    transition: all 0.2s ease-out;
    opacity: 0.8;
}

.redlinebtn.selected img
{
    /*box-shadow: 0px 0px 4px 2px #adc5dc;*/
    /*margin-left: 7px;*/    
}

.redlinebtn:hover
{
    cursor: pointer;
}




.areabutton:hover  
{
    cursor: pointer;
}

.areabutton_selected
{
    font-weight: bold;  
    color: #8eb0bd !important;     
    white-space: nowrap;
}

.areabutton_selected::before {
  content: "";
  font-size: 8px;
}

.areabutton_selected::after {
  content: "";
  font-size: 8px;
}

.funcbtn img
{
    box-shadow: 2px 2px 5px 0px #333;
    transition: all 0.2s ease-out;
}

.funcbtn img:hover
{   
    box-shadow: 0px 0px 10px 0px #bccbd1; 
    transition: all 0.2s ease-out;
}

.funcbtn:hover
{
    cursor: pointer;
}

.funcbtn
{
    color: white;
    text-decoration: none;
}
 
.slider
{
    margin: 12px;
    border-radius: 5px;
}

#custom-handle, .tool-slider-handle
{
    background-color: #777 !important;    
    border-radius: 4px !important;
    box-shadow: 1px 0px 5px 0px #333 !important;
    outline: 0 !important;
}


.submenu_label
{
    margin-bottom: 5px;
    font-size: 12px;
    color: #ccc;
}

#slider_font_size_value
{
    color: white;
    font-weight: bold;
}

.text_color_picker 
{
    
}

.text_color_picker div
{
    width: 20px;
    height: 20px;
    float: left;    
    margin-left: 5px;
    border-radius: 4px;
    border: 2px solid transparent;
}

.text_color_picker div.selected
{
    border: 2px solid white;
}

.text_color_picker .cp_red
{
    background-color: red;    
}

.text_color_picker .cp_green
{
    background-color: green;    
}

.text_color_picker .cp_blue
{
    background-color: blue;    
}

/*.funcbtn a:link, a:visited, a:active, a:hover { }*/

.svgareazone
{    
    isolation: isolate;     
    mix-blend-mode: multiply;
}

.svgarea
{
    isolation: isolate;     
    mix-blend-mode: multiply;
    opacity: 0.05;
}

.svgarea_updates
{
    /*fill: url(#diagonalHatch) !important;*/
    /*opacity: 0.2 !important;*/
    stroke: red;
    stroke-width: 100px;
    stroke-linecap:square;
}

.svgarea_Base
{
    opacity: 0.5;    
    fill: #555555;
}

.svgarea_BRA
{
    opacity: 0.5;    
    fill: #158b5a;
}

.svgarea_NTA
{
    opacity: 0.5;    
    fill: #a3bb09;
}

.svgarea_BTA
{
    opacity: 0.5;    
    fill: #f65e04;
}

.svgarea_ZoneBoundary
{
    opacity: 1;    
    fill: white;
}

.svgarea_Apartment
{
    opacity: 0.3;     
    fill: green;
}

.svgarea_P-Platser
{
    opacity: 0.3;    
    fill: #976f00;
}
.symbolicon
{
    background-color: #ccc;
    width: 40px;
    height: 40px;
    border: 5px solid #ccc;
    border-radius: 8px;
}

.symbolitem
{
    font-size: 12px; 
    padding-bottom: 10px;
    text-align: left;
    padding-left: 20px;    
}

.symbolitem img
{
    margin-left: -5px;    
    /*pointer-events: none;*/  
}

.rotationbuttons input {
    width: 35px;
    background-color: #777;
    border: 1px solid #7f7f7f;
    margin-bottom: 3px;
}

.rotationbuttons input:hover {
    background-color: #858585;
    box-shadow: none !important;        
}



.flex-container {
    display: flex;
    clear: both;
    flex-wrap: wrap;
    margin-left: 12px;
}

.flex-child {
    /*flex: 1;*/
    flex: 0;
}  

.flex-child:first-child {
    /*margin-right: 10px;*/
} 

.flex-child-left
{
    text-align: right;    
}

.flex-child-right {
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
}

.flex-child input {
    font-family: "Segoe UI",Arial,sans-serif !important;
    font-size: 11px !important;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.areali
{
    list-style: none;
}

/*.svgarea_class_LOA
{
    opacity: 0.5;    
    fill: purple;
}

.svgarea_class_BOA
{
    opacity: 0.5;    
    fill: #c2962e;
}

.svgarea_class_BIA
{
    opacity: 0.5;    
    fill: purple;
}

.svgarea_class_OVA
{
    opacity: 0.5;    
    fill: purple;
}

*/

.svgarea_class_ATEMP
{
    opacity: 0.5;    
    fill: #a82518;
}

.svgarea_class_NotATEMP
{
    opacity: 0.5;    
    fill: #7b9bd5;
}

.legenddata svg
{
    /*background-color: white !important;*/
    border-radius: 5px;
    margin-left: 3px
}

.area01
{
    opacity: 0.5;   
    background-color: hsl(200, 100%, 83%);
    fill: hsl(200, 100%, 83%);
}

.area02
{    
    opacity: 0.5;  
    background-color: hsl(68, 100%, 68%);
    fill: hsl(68, 100%, 68%);
}

.area03
{
    opacity: 0.5;   
    background-color: hsl(22, 100%, 84%);    
    fill: hsl(22, 100%, 84%);    
}

.area04
{
    opacity: 0.5;   
    background-color: hsl(46, 100%, 82%);    
    fill: hsl(46, 100%, 82%);    
}

.area05
{
    opacity: 0.5;   
    background-color: hsl(164, 100%, 89%);    
    fill: hsl(164, 100%, 89%);    
}

.area06
{
    opacity: 0.5;   
    background-color: hsl(286, 44%, 61%);    
    fill: hsl(286, 44%, 61%);    
}

.area07
{
    opacity: 0.5;   
    background-color: hsl(7, 91%, 49%);    
    fill: hsl(7, 91%, 49%);    
}

.area08
{
    opacity: 0.5;   
    background-color: hsl(102, 93%, 59%);    
    fill: hsl(102, 93%, 59%);    
}

.area09
{
    opacity: 0.5;   
    background-color: hsl(219, 100%, 65%);    
    fill: hsl(219, 100%, 65%);    
}

.area10
{
    opacity: 0.5;   
    background-color: hsl(40, 100%, 38%);    
    fill: hsl(40, 100%, 38%);    
}

.area11
{
    opacity: 0.5;   
    background-color: hsl(120, 14%, 45%);    
    fill: hsl(120, 14%, 45%);   
}

.area12
{
    opacity: 0.5;   
    background-color: hsl(71, 100%, 45%);    
    fill: hsl(71, 100%, 45%);    
}

.area13
{
    opacity: 0.5;   
    background-color: hsl(223, 35%, 36%);    
    fill: hsl(223, 35%, 36%);    
}

.area14
{
    opacity: 0.5;   
    background-color: hsl(47, 100%, 45%);    
    fill: hsl(47, 100%, 45%);    
}

.area15
{
    opacity: 0.5;   
    background-color: hsl(171, 100%, 23%);    
    fill: hsl(171, 100%, 23%);    
}

.area16
{
    opacity: 0.5;   
    background-color: hsl(51, 28%, 62%);    
    fill: hsl(51, 28%, 62%);    
}

.area17
{
    opacity: 0.5;   
    background-color: hsl(223, 100%, 32%);    
    fill: hsl(223, 100%, 32%);    
}

.area18
{
    opacity: 0.5;   
    background-color: hsl(200, 100%, 37%);    
    fill: hsl(200, 100%, 37%);    
}

.area19
{
    opacity: 0.5;   
    background-color: hsl(80, 100%, 24%);    
    fill: hsl(80, 100%, 24%);    
}

.area20
{
    opacity: 0.5;   
    background-color: hsl(267, 100%, 16%);    
    fill: hsl(267, 100%, 16%);    
}

.area_cg001_skotsel_001_g1 /* GRÄS */
{
    opacity: 0.65;   
    background-color: rgb(203,247,181);    
    fill: rgb(203,247,181);    
}

.area_cg001_skotsel_001_b /* BUSKAR OCH HÄCKAR */
{
    opacity: 0.65;   
    background-color: rgb(96,166,89);    
    fill: rgb(96,166,89);     
}

.area_cg001_skotsel_001_b5 /* KLIPPT HÄCK */
{
    opacity: 0.65;    
    background-color: rgb(214,55,41);    
    fill: rgb(214,55,41);     
}

.area_cg001_skotsel_001_r /* RABATTER */
{
    opacity: 0.65;     
    background-color: rgb(220,122,172);    
    fill: rgb(220,122,172);     
}

.area_cg001_skotsel_001_v /* VATTENANLÄGGNINGAR */
{
    opacity: 0.65;    
    background-color: rgb(23,162,232);    
    fill: rgb(23,162,232);   
}

.area_cg001_skotsel_001_n /* NATUR */
{
    opacity: 0.65;   
    background-color: rgb(172,198,139);    
    fill: rgb(172,198,139);        
}

.area_cg001_skotsel_001_m /* MARKBELÄGGNING */
{
    opacity: 0.65;     
    background-color: rgb(76,38,0);    
    fill: rgb(76,38,0);      
}

.area_cg001_skotsel_001_m1 /* ASFALT */
{
    opacity: 0.65;
    background-color: rgb(148,148,148);    
    fill: rgb(148,148,148);
}

.area_cg001_skotsel_001_m2 /* STEN OCH PLATTYTOR */
{
    opacity: 0.65;
    background-color: rgb(227,227,227);    
    fill: rgb(227,227,227);    
}

.area_cg001_skotsel_001_m3 /* GRUS- OCH SINGELYTOR */
{
    opacity: 0.65;   
    background-color: rgb(184,176,137);    
    fill: rgb(184,176,137);   
}

.area_cg001_skotsel_001_l1 /* LEKPLATS */
{
    opacity: 0.65;
    background-color: rgb(251,245,203);    
    fill: rgb(251,245,203);   
}

.area_cg001_skotsel_nbab_001_g /* GRÄSMATTA */
{
    opacity: 1;
    background-color: rgb(207,230,181);    
    fill: rgb(207,230,181);  
}

.area_cg001_skotsel_nbab_001_ma1 /* TRÄDÄCK */ {
    opacity: 1;
    background-color: rgb(255,184,112);
    fill: rgb(255,184,112);
}

.area_cg001_skotsel_nbab_001_b /* BUSKAR OCH HÄCKAR */
{
    opacity: 1;
    background-color: rgb(0,105,75);    
    fill: rgb(0,105,75);  
}

.area_cg001_skotsel_nbab_001_b1 /* PRYDNADSBUSKAGE */
{
    opacity: 1;
    background-color: rgb(106,164,64);    
    fill: rgb(106,164,64);  
}

.area_cg001_skotsel_nbab_001_b5 /* KLIPPT HÄCK */
{
    opacity: 1;
    background-color: rgb(204,64,69);    
    fill: rgb(204,64,69);   
    
}

.area_cg001_skotsel_nbab_001_r /* RABATTER */
{
    opacity: 1;
    background-color: rgb(220,122,172);    
    fill: rgb(220,122,172);    
}

.area_cg001_skotsel_nbab_001_m /* MARKBELÄGGNING */
{
    opacity: 1;
    background-color: rgb(173,87,0);    
    fill: rgb(173,87,0);    
}

.area_cg001_skotsel_nbab_001_m1 /* ASFALT */
{
    opacity: 1;
    background-color: rgb(173,173,173);    
    fill: rgb(173,173,173);
}

.area_cg001_skotsel_nbab_001_m2 /* PLATTYTOR */
{
    opacity: 1;
    background-color: rgb(219,219,219);    
    fill: rgb(219,219,219);   
}

.area_cg001_skotsel_nbab_001_m3 /* GRUS- OCH SINGELYTOR */
{
    opacity: 1;
    background-color: rgb(191,178,125);    
    fill: rgb(191,178,125);    
}

.area_cg001_skotsel_nbab_001_l /* LEKPLATS */
{
    opacity: 1;
    background-color: rgb(252,241,198);    
    fill: rgb(252,241,198);  
}

.area_cg001_skotsel_nbab_001_n /* NATURMARK */
{
    opacity: 1;
    background-color: rgb(190,190,80);    
    fill: rgb(190,190,80);    
}

.area_cg001_vinsterskotsel_001_snorojning
{
    opacity: 0.65;
    background-color: rgb(175,218,243);    
    fill: rgb(175,218,243);    
}

.area_cg001_vinsterskotsel_001_nej
{
    opacity: 0.0;
    background-color: rgb(175,218,243);    
    fill: rgb(175,218,243);    
}

.area_cg001_vinsterskotsel_001_na
{
    opacity: 0.35;
    background-color: #222;    
    fill: #222;   
}

.area_va000_003_005_bia {
    opacity: 0.6;
    fill: #a6a5ac;
}
.area_va000_003_005_boa {
    opacity: 0.6;
    fill: #8cab86;
}
.area_va000_003_005_loa {
    opacity: 0.6;
    fill: #38757d;
}
.area_va000_003_005_loa\.b {
    opacity: 0.6;
    fill: #74a0a7;
}
.area_va000_003_005_loa\.k {
    opacity: 0.6;
    fill: #9acabc;
}
.area_va000_003_005_loa\.p {
    opacity: 0.6; 
    fill: #467088;
}
.area_va000_003_005_loa\.v {
    opacity: 0.6;
    fill: #489ea6;
}
.area_va000_003_005_ova {
    opacity: 0.6;
    fill: #b46831;
}
.area_va000_003_005_ova\.d {
    opacity: 0.6;
    fill: #d89a6f;
}
.area_va000_003_005_ova\.k {
    opacity: 0.6;
    fill: #e0b18f;
}

.area01HSL {
    background-color: hsl(200, 100%, 91%);
    fill: hsl(200, 100%, 91%);
}

.area02HSL {    
    background-color: hsl(68, 100%, 80%);
    fill: hsl(68, 100%, 80%);
}

.area03HSL {
    background-color: hsl(22, 100%, 92%);
    fill: hsl(22, 100%, 92%);
}

.area04HSL {
    background-color: hsl(46, 100%, 91%);
    fill: hsl(46, 100%, 91%);
}

.area05HSL {
    background-color: hsl(164, 100%, 95%);
    fill: hsl(164, 100%, 95%);
}

.area06HSL {
    background-color: hsl(286, 44%, 81%);
    fill: hsl(286, 44%, 81%);
}

.area07HSL {
    background-color: hsl(7, 91%, 74%);
    fill: hsl(7, 91%, 74%);
}

.area08HSL {
    background-color: hsl(102, 93%, 78%);
    fill: hsl(102, 93%, 78%);
}

.area09HSL {
    background-color: hsl(219, 100%, 82%);
    fill: hsl(219, 100%, 82%);
}

.area10HSL {
    background-color: hsl(40, 83%, 58%);
    fill: hsl(40, 83%, 58%);
}

.area11HSL {
    background-color: hsl(120, 14%, 72%);
    fill: hsl(120, 14%, 72%);
}

.area12HSL {
    background-color: hsl(71, 92%, 62%);
    fill: hsl(71, 92%, 62%);
}

.area13HSL {
    background-color: hsl(223, 25%, 70%);
    fill: hsl(223, 25%, 70%);
}

.area14HSL {
    background-color: hsl(47, 96%, 70%);
    fill: hsl(47, 96%, 70%);
}

.area15HSL {
    background-color: hsl(171, 38%, 59%);
    fill: hsl(171, 38%, 59%);
}

.area16HSL {
    background-color: hsl(51, 28%, 82%);
    fill: hsl(51, 28%, 82%);
}

.area17HSL {
    background-color: hsl(213, 46%, 53%);
    fill: hsl(213, 46%, 53%);
}

.area18HSL {
    background-color: hsl(196, 100%, 47%);
    fill: hsl(196, 100%, 47%);
}

.area19HSL {
    background-color: hsl(80, 42%, 54%);
    fill: hsl(80, 42%, 54%);
}

.area20HSL {
    background-color: hsl(267, 25%, 51%);
    fill: hsl(267, 25%, 51%);
}

.svgarea:hover
{
    /*opacity: 0.7;*/
    cursor: pointer;       
}

.svgareahover
{    
    cursor: pointer;        
}

#redlineinfodiv
{
    position: absolute;
    right: 0px;    
    bottom: 0px;
    top: 0px;
    width: 0px;
    background-color: #555;    
    color: white;
    box-shadow: 0px -4px 10px 0px #333;
    padding-top: 30px;        
    transition: all 0.2s ease-out;
    color: white;
    opacity: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /*backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);*/
}

#redlineinfo 
{
    font-size: 12px;
    color: white;    
    padding-bottom: 30px;
    width: 100%;    
}

#redlineinfo ul
{
    margin-left: 0px;
    padding-left: 0px;
}

#redlineinfo h1, #redlineinfo li 
{
    font-size: 12px;
    color: white;
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
    width: 100%;
}

#redlineinfodiv h0
{
    color: #ccc;
    font-size: 110%;
    font-weight: bold;
    text-transform: uppercase;    
}

#redlineinfodiv hr
{
        
}

#redlineinfo_space
{
    padding-top: 0px;
}

#redlineinfo header
{
    font-size: 20px;
    padding-bottom: 5px;
}

.editinfo
{
    font-size: 12px;
    color: white;
    padding-bottom: 30px;
    width: 100%;   
    padding-top: 10px; 
}

.editinfo ul
{
    margin-left: 0px;
    padding-left: 0px;
}

.editinfo li
{
    font-size: 12px;
    color: white;
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
    width: 100%;
}

.editinfo h1
{
    margin-bottom: 5px;
    font-size: 12px;
    color: #ccc;
}

.editinfo input[type=button],input[type=submit]
{
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

.editinfo .ui-igcombo-fieldholder
{
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

.editinfo .ui-igcombo
{
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}


.editinfo .ui-corner-right
{
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;    
}

.editinfo .ui-igcombo
{
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;    
}

.selectedredline:not(line):not(path):not(text):not(polyline)
{    
    /*fill: url(#diagonalHatchSelected) !important;*/    
    /*fill: blue !important;*/
    stroke-opacity: 0.6;
    stroke: black !important;
    stroke-width: 120 !important;
    /*stroke-dasharray: 100;
    stroke-dashoffset: 1;*/
    /*stroke-linecap: round;*/       
    /*animation: dash 2s linear forwards;*/
}

image.selectedredline
{
    stroke-dasharray: 0 !important;
    stroke-linecap: round;        
    outline: 50px dashed #444; 
}

line.selectedredline
{
    fill: none !important;    
    /*stroke: black !important;*/
    stroke-dasharray: 0 !important;
    stroke-linecap: round;   
    /*outline: 3px solid green;*/ 
    outline: 50px dashed #444;     
}

path.selectedredline
{
    fill: none !important;
    /*stroke-opacity: 0.6;*/
    /*stroke: black !important;*/
    stroke-dasharray: 0 !important;
    stroke-linecap: round;   
    /*outline: 3px solid green;*/     
    outline: 50px dashed #444; 
}

polyline.selectedredline
{
    fill: none !important;
    /*stroke-opacity: 0.6;*/
    /*stroke: black !important;*/
    stroke-dasharray: 0 !important;
    stroke-linecap: round;   
    /*outline: 3px solid green;*/     
    outline: 50px dashed #444; 
}

text.selectedredline
{
    outline: 50px dashed #444;    
}

.helptext::before { 
  /*content: "Instruktioner \A";*/
  white-space: pre;  
  color: #888;
  font-size: 14px;
  font-weight: bold;    
}

.helptext
{
    text-align: left;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    border-bottom: 2px solid #777;
}

.helptext ul
{
    
    padding-left: 10px;
}
.helptext li
{    
    padding-bottom: 13px;
}


.redlinehover
{
    cursor: pointer;
    opacity: 0.85;
}

/*@keyframes dash {
  to {
    fill: blue !important;
  }
}*/

@-webkit-keyframes ANIMATIONNAME {
  0%   { opacity: 1; }
  50% { opacity: 0.5; }
  100%   { opacity: 1; }
}
@-moz-keyframes ANIMATIONNAME {
  0%   { opacity: 1; }
  50% { opacity: 0.5; }
  100%   { opacity: 1; }
}
@-o-keyframes ANIMATIONNAME {
  0%   { opacity: 1; }
  50% { opacity: 0.5; }
  100%   { opacity: 1; }
}
@keyframes ANIMATIONNAME {
  0%   { opacity: 1; }
  50% { opacity: 0.5; }
  100%   { opacity: 1; }
}

.redlineobject
{
    fill-opacity: 0.4;
    fill: red;    
    stroke: black;    
    isolation: isolate;     
    mix-blend-mode: multiply; 

    /*-webkit-animation: ANIMATIONNAME 2s infinite;*/ /* Safari 4+ */
    /*-moz-animation:    ANIMATIONNAME 2s infinite;*/ /* Fx 5+ */
    /*-o-animation:      ANIMATIONNAME 2s infinite;*/ /* Opera 12+ */
    /*animation:         ANIMATIONNAME 2s infinite;*/ /* IE 10+, Fx 29+ */
}

.systemgroup
{
    margin-bottom: 5px;
}
 
.systemgroup:hover
{
    cursor: pointer;
    opacity: 0.7;
}

.systemitem
{
    
}

.system_item
{

}
.system_item:hover
{
    cursor: pointer !important;
    opacity: 0.7;
}

.system_subitem
{
    margin-bottom: 0px;
    margin-left: 20px;
    font-size: 11px;
    color: #aaa;
}

div[hide="true"]
{
    opacity: 0.2;    
}
div[hide="true"] rect
{
    fill: gray !important;
}

.elementsystemstool_items
{    
    margin-top: 15px;
}

.elementsystemstool_items div
{
    text-align: left;
    padding-left: 8px;
}


#redline_menu_selector {
    position: absolute;
    left: 7px;
    top: -50px;
    height: 32px;
    width: 82px;
    /*background-color: #555;*/
    background-image: linear-gradient(to right, #3e7593, #555);
    z-index: 15;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    display: none;
    transition: none all 1.2s ease-out;
}

.nosubmenu
{
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;     
    width: 70px !important;
}

.tools_disabled {
    opacity: 0.4;
    transition: opacity 0.5s;
}

.tools_disabled .redlinebtn:hover
{
    cursor: default;
}

.tools_disabled .redlinebtn img:hover
{
    box-shadow: 0px 0px 0px 0px transparent !important;
    transition: none all 0.2s ease-out;
    color: white !important;
    cursor: default;
}


.toolsettingscontainer
{
    clear: both;      
    padding-bottom: 22px;
    padding-left: 15px;
}

.toolsettingscontainer .toolsetting 
{
    clear: both;    
}

.toolsettingscontainer .toolsetting div
{
    float: left;
    margin-bottom: 2px;
}

.toolsettingscontainer .toolsetting div:nth-child(2)
{
    padding-left: 6px;    
}

/*.toolsettingscontainer .toolsetting
{
    clear: both;    
    padding-left: 30px;
}

.toolsettingscontainer .toolsetting div
{
    float: left;    
    width: 100px;
    margin: auto;        
}*/

.systemitem
{
    display: block !important;
} 

.systemitem input.cmn-toggle-round + label
{
    float: left;
    margin-top: 11px;
    margin-left: -25px;
    clear:both; 
}

#ElementSystemsTool path
{
    stroke-linecap: round !important;
}

#ElementSystemsTool path:hover
{
    cursor: pointer;
    opacity: 0.7;
}

#ElementSystemsTool g[systemclass="-"] path
{
    stroke: #91ce6d !important;
    stroke-width: 275px !important;   
}
rect[systemclass="-"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: #91ce6d;    
}

#ElementSystemsTool g[systemclass="Säker"] path
{
    stroke: green !important;
    stroke-width: 275px !important;   
}
rect[systemclass="Säker"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: green;    
}

#ElementSystemsTool g[systemclass="Osäker"] path
{
    stroke: red !important;
    stroke-width: 275px !important;   
}
rect[systemclass="Osäker"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: red;    
}

#ElementSystemsTool g[systemclass="Standard"] path
{
    stroke: red !important;
    stroke-width: 275px !important;   
}
rect[systemclass="Standard"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: red;    
}

#ElementSystemsTool g[systemclass="Dagvattensystem"] path
{
    stroke: darkcyan !important;
    stroke-width: 275px !important;   
}
rect[systemclass="Dagvattensystem"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkcyan;    
}

#ElementSystemsTool g[systemclass="Tappvattensystem"] path
{
    stroke: purple !important;
}
rect[systemclass="Tappvattensystem"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: purple;    
}

#ElementSystemsTool g[systemclass="Spillvattensystem"] path
{
    stroke: blue !important;
}
rect[systemclass="Spillvattensystem"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: blue;    
}

#ElementSystemsTool g[systemclass="Värmesystem"] path
{
    stroke: orange !important;
}
rect[systemclass="Värmesystem"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: orange;    
}

#ElementSystemsTool g[systemclass="Telekommunikationssystem [E64E]"] path
{
    stroke: deeppink !important;
}
rect[systemclass="Telekommunikationssystem [E64E]"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: deeppink;    
}

#ElementSystemsTool g[systemclass="Belysningssystem och ljussystem [E63F]"] path
{
    stroke: brown !important;
}
rect[systemclass="Belysningssystem och ljussystem [E63F]"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: brown;    
}

#ElementSystemsTool g[systemclass="Elkraftsystem [E63]"] path
{
    stroke: darkgreen !important;   
}
rect[systemclass="Elkraftsystem [E63]"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkgreen;    
}

#ElementSystemsTool g[systemclass="El- och telesystem [E6]"] path
{
    stroke: steelblue !important;
}
rect[systemclass="El- och telesystem [E6]"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: steelblue;    
}

#ElementSystemsTool g[systemclass="El- och telekanalisationssystem [E61]"] path
{
    stroke: darkkhaki !important;
}
rect[systemclass="El- och telekanalisationssystem [E61]"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkkhaki;    
}

#ElementSystemsTool g[systemclass="Teletekniska larmsystem [E64CB]"] path
{
    stroke: darkgrey !important;
}
rect[systemclass="Teletekniska larmsystem [E64CB]"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkgrey;    
}

#ElementSystemsTool g[systemclass="Wire"] path
{
    stroke: brown !important;
}
rect[systemclass="Wire"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: brown;    
}

#ElementSystemsTool g[systemclass="Pipe"] path
{
    stroke: darkcyan !important;
    stroke-width: 275px !important;   
}
rect[systemclass="Pipe"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkcyan;    
}

#ElementSystemsTool g[systemclass="Pipe Fitting"] path
{
    stroke: darkgreen !important;   
}
rect[systemclass="Pipe Fitting"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkgreen;    
}

#ElementSystemsTool g[systemclass="Plumbing Line"] path
{
    stroke: steelblue !important;
}
rect[systemclass="Plumbing Line"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: steelblue;    
}

#ElementSystemsTool g[systemclass="Relationshandling"] path
{
    stroke: darkgreen !important;
}
rect[systemclass="Relationshandling"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkgreen;    
}

#ElementSystemsTool g[systemclass="Förfrågningsunderlag"] path
{
    stroke: steelblue !important;
}
rect[systemclass="Förfrågningsunderlag"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: steelblue;    
}



#ElementSystemsTool g[systemclass="2018-10-25"] path
{
    stroke: darkcyan !important;
    stroke-width: 275px !important;   
}
rect[systemclass="2018-10-25"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: darkcyan;    
}

#ElementSystemsTool g[systemclass="1978-12-01"] path
{
    stroke: purple !important;
}
rect[systemclass="1978-12-01"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: purple;    
}

#ElementSystemsTool g[systemclass="1997-10-15"] path
{
    stroke: blue !important;
}
rect[systemclass="1997-10-15"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: blue;    
}

#ElementSystemsTool g[systemclass="1995-10-09"] path
{
    stroke: orange !important;
}
rect[systemclass="1995-10-09"]
{
    stroke: #444;
    stroke-width: 2px;
    fill: orange;    
}



#ElementSystemsTool path
{
    /*fill-opacity: 0.4;*/    
    /*stroke: red;*/    
    isolation: isolate;     
    /*mix-blend-mode: multiply;*/ 

    fill: none;
    stroke-linejoin: round;  
    stroke: red;
    
    opacity: 1; 
}

#svg_redline_user rect, 
#svg_redline_user polygon,
#svg_redline_user path,
#svg_redline_user line,
#svg_redline_user text,
#svg_redline_user circle,
#svg_redline_user_temp rect, 
#svg_redline_user_temp polygon,
#svg_redline_user_temp path,
#svg_redline_user_temp line,
#svg_redline_user_temp text,
#svg_redline_user_temp circle,
#svg_redline_layers rect, 
#svg_redline_layers polygon,
#svg_redline_layers path,
#svg_redline_layers line,
#svg_redline_layers text,
#svg_redline_layers circle
{
    fill-opacity: 0.4;
    fill: red;    
    /*stroke: red;*/    
    isolation: isolate;     
    mix-blend-mode: multiply; 
}

#svg_redline_user polyline, #svg_redline_readonly polyline
{
    fill: none !important;
    stroke-width: 200;
    stroke: red;
}

#svg_redline_user_temp polyline
{
    fill: none !important;
}


#svg_redline_user text, #svg_redline_readonly text
{
    opacity: 1 !important;    
    fill-opacity: 1 !important;    
}

#svg_redline_user line, #svg_redline_readonly line
{
    stroke-width: 90px;  
}

#svg_redline_user_temp line
{
    stroke-width: 90px;   
    stroke: #777; 
}

#svg_redline_user path, #svg_redline_readonly path
{
    fill: none;
    stroke-linejoin: round;  
    stroke: red;
    stroke-width: 45px;
    opacity: 1; 
}

#svg_redline_user_temp path
{
    fill: none;
    stroke-linejoin: round;  
    stroke: red;
    stroke-width: 45px;
    opacity: 1; 
}

#svg_redline_user polygon, #svg_redline_readonly polygon
{    
    /*stroke: red;
    stroke-width: 45px;*/
    /*stroke-linejoin: round;  
    stroke: red;
    stroke-width: 45px;
    opacity: 1;*/ 
}

#temp_space
{
    fill: #14518d;
    opacity: 0.3;
}

#svg_redline_user polygon[redlinetype="space"], #svg_redline_readonly polygon[redlinetype="space"]
{
    fill: #14518d;
    stroke: #14518d;
    stroke-width: 45px;
}

#svg_redline_user rect[mask], #svg_redline_readonly rect[mask]
{
    opacity: 1 !important;
    fill-opacity: 1 !important;
    mix-blend-mode: multiply;
}

#svg_area_legend
{
    /*transform-origin: 50% 50%;*/      
}

#svg_area_legend_right
{
    /*transform: translate(1000px, 20px);*/
    /*transform: translate(841pt, 0pt) translate(-80pt, 30pt);*/
}

#svg_area_legend .redlineobject {    
    fill: black;
    stroke: none;
    font-weight: 500;
}

.svg_area_legend_bg
{
    stroke:none; 
    /*fill:#f4f4f4;*/
    fill: white;
}

/*.svg_area_legend_container
{
    display: flex;
    flex-direction: column;
    gap: 250px;        
    padding-top: 3000px;
}

.svg_area_legend_container div
{
    width: 1500px;
    height: 1500px;
    border-radius: 200px;
}*/


.redlineobject_selectionrect {
    opacity: 1;
    fill-opacity: 0.1 !important;
    fill: #7979ad !important;
    stroke: #333 !important;
    /*stroke-dasharray: 200 300;
stroke-opacity: 0.4;*/
    stroke-width: 15px;
}

.redlineobject_hover
{
    opacity: 0.6 !important;
    fill: blue;
}

.fastapi_equipment
{
    font-size: 11px;
    text-align: left;
    padding: 10px;
    padding-top: 0px;
    color: #ddd
    
}

.fastapi_equipment h1
{
    font-size: 14px;
    color: #bccbd1;  
    border-bottom: 3px solid #777777;  
    margin-left: -5px;
    margin-bottom: 10px;
}

.fastapitool_submenu_content
{
    font-size: 12px;
    color: white;
}

.fastapitool_header
{
    font-weight: bold;
    font-size: 15px;
}

.fastapi_equipment_group
{
    padding-left: 15px;    
}

.fastapi_equipment_group h2
{
    color: #bccbd1;
    font-size: 13px;
    border-bottom: 3px solid #77777777;
    margin-bottom: 10px;    
    margin-left: -5px;
}

.btnEquipment[fastapi=false]
{    
    cursor:pointer;        
    color: #d5adad;    
}

.btnEquipment[circleid]:hover
{    
    cursor:pointer;        
    color: white;    
}

.btnEquipment:not([circleid])
{    
    opacity: 0.6;
}

#svg_redline polygon, #svg_redline circle
{
    
}

#svg_redline polygon[fastapi], #svg_redline circle[fastapi]
{
    fill: #14518d;
    stroke-width: 15;
    stroke: #14518d;
    opacity: 0.6;    
    /*transition: all 0.2s ease-out;*/    
}

#svg_redline polygon[fastapi=false], #svg_redline circle[fastapi=false]
{
    fill: #c75d5d !important;
    stroke-width: 15;
    stroke: #14518d;
    opacity: 0.6;
}

#svg_redline polygon[fastapi]:hover, #svg_redline circle[fastapi]:hover
{
    opacity: 0.8;
    cursor: pointer;
}

#redline_save_btn_status{
    padding-left: 9px;
}

#metadata_save_btn_status 
{
    font-size: 11px;
    color: #63d71c;     
    display: none;   
}

#metadata_save_btn_status img
{
    padding-left: 5px;
    padding-top: 6px;
    padding-right: 3px;
    width: 12px;    
}


.submenu_content
{
    /*position: absolute;*/  
    /*padding-left: 10px;          
    padding-right: 5px;*/    
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}

.submenu_content_edit
{
    border-top: 2px solid #777;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;   
    text-align: center;     
}

#dialogRedlineOrder_chkbox_redline:disabled
{
    opacity: 0.3;
}

.Meta_input
{
    width: auto !important;
    margin: -10px !important;
    margin-top: 4px !important;
}

.SelectedSpace
{
    opacity: 0.6;  
    fill-opacity: 0.8;
    stroke: black;
    stroke-width: 250;
    stroke-linejoin: round;
    stroke-opacity: 0.7;
}

.submenu_legend {
    right: 0px;
    top: 0px;
    width: 100%;
    font-size: 11px;
    margin: 0px;    
    z-index: 9000;
    -webkit-print-color-adjust: exact;
    padding-top: 10px;
    padding-left: 0px;
    border-top: 0px solid #888;
}

.submenu_legend_print {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
    font-size: 8px;
    font-weight: bold;
    border: 1px solid transparent;
    margin: 30px;
    background-color: white;
}

.submenu_legend_print .arealegendtext
{
    color: black;
}

.arealegend {    
    color: white;
    padding-bottom: 2px;
    overflow: hidden;
    text-align: center;
    clear: both;
    float: left;
    width: 200px;
    margin-bottom: 8px;
    height: auto;    
    position: relative;
}

.arealegend:hover {
    cursor: pointer;
    opacity: 0.8;   
    color: #ccc;
}

.arealegend svg
{
    float: left;  
    width: 20%;    
    padding-left: 5px;
}

.arealegendtext {
    position: absolute;
    padding-right: 5px;
    float: right;
    word-wrap: break-word;
    width: 75%;
    right: 0px;
    top: 45%;
    transform: translateY(-50%);
    text-align: left;
    white-space: nowrap;
    /*line-height: 25px;*/
}

#showdocumentlegend {
    position: absolute;
    background-color: rgba(250, 252, 255, 0.95);
    margin: 50px;
    z-index: 100000;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border: 2px solid #ccc;
    padding-bottom: 7px;    
}

#legenddata {
    padding-left: 20px;
    margin-top: 10px;  
    padding-right: 20px;
}

#showdocumentlegend .arealegend
{
    color: black;
}

#legendmenu
{
    width: 100%;
}

#legendmenu td {
    font-size: 12px;
    color: #92abc6;
    cursor: pointer;
    padding: 5px;    
    margin-bottom: 10px;
    background-color: #275d97;
    border-bottom: 5px solid #c7d3e5;
    font-weight: bold;
    opacity: 0.4;
}

#legendmenu td:hover {
    opacity: 0.6;  
    color: white;
}

.legendmenu_left {
    border-radius: 5px 0px 0px 0px;
    padding-right: 10px;
}

.legendmenu_mid {
    border-radius: 0px 0px 0px 0px;    
}

.legendmenu_right {
    border-radius: 0px 5px 0px 0px;
    opacity: 0.5 !important;
    width: 20px !important;
}

.legendmenu_right:hover {
    opacity: 0.6 !important;
}


.legendmenu_right img 
{
    height: 10px;
    vertical-align: middle;
    text-align: center;
    padding-left: 4px;
}


.legendmenu_active {
    background-color: #e7ecf2 !important;
    color: #6780a1 !important;
    font-weight: bold;
    border-bottom: 5px solid transparent !important;
    opacity: 1 !important;
}


/**** tool menus ****/

.ui-menu 
{ 
    width: 150px;             
}

#menuPolygontool
{
    display: none;
}

.contextmenu
{
    border-radius: 8px;
    display: none;
}

.submenuswitch {
    padding-left: 7px;
}

.submenuswitch > * {
    font-size: 11px !important;
}


/**** common viewer classes ****/
.item-card {
    /*background-image: linear-gradient(to right, #3e759355, #36597655);*/
    background-color: #ffffff11;
    border-radius: 8px;    
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    padding: 5px;
    max-width: 320px;
    margin: 0px;
    color: white;
}

.item-title {
    color: #fff;
    margin-bottom: 25px;
    margin-top: 10px;
}

.item-property {
    color: #eee;
    /*line-height: 1.6;*/
}

.item-property strong {
    color: #eee;
}


/**** specific tool css ****/
#btn_edittool_reset {
    background-color: #444444;
    border: none;
    color: #ddd;
}

#btn_edittool_reset:hover {
    background-color: #444444aa;
    color:#eee;
}

#btn_edittool_rotateleft {
    background-image: url('/Images/svg/rotate_90_degrees_ccw_white_24dp.svg');    
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    border: none;
    width: 79px !important; 
    height: 27px; 
}

#btn_edittool_rotateleft:disabled, #btn_edittool_rotateright:disabled {
    opacity: 0.3 !important;
}

#btn_edittool_rotateright {
    background-image: url('/Images/svg/rotate_90_degrees_cw_white_24dp.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    border: none;
    width: 79px !important;
    height: 27px;
}

.redlinebtn .edittool_nofitication {
    height: 14px;
    background-image: linear-gradient(to right, #d8bb81, #d8bb81);
    /*background-image: linear-gradient(to right, #57a573, #74b576);*/
    /*background: #d8bb81;*/
    display: inline-block;
    width: 16px;
    margin-left: 5px;
    border-radius: 3px;
    color: #81601b !important;
    font-weight: bold;
    padding-bottom: 2px;
}

.redlinebtn .edittool_nofitication.edittool_nofitication_approved {
    background-image: linear-gradient(to right, #6ec333, #5ddb4e) !important;
}

.redlinebtn.selected 
{
    background-color: transparent;
}