/* Begin - sprite.css */
#map-container.gotland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/gotland.png?v=240325-1') 0 0 ;   
    background-repeat: no-repeat;            
}

#map-container.stockholm{
    width: 400px;
    height: 500px;    
    background: url('/static/images/stockholm.png?v=240325-1') 0 0;      
    background-repeat: no-repeat;            
}

#map-container.kalmar{
    width: 400px;
    height: 500px;    
    background: url('/static/images/kalmar.png?v=240325-1') 0 0;    
    background-repeat: no-repeat;         
}

#map-container.blekinge{
    width: 400px;
    height: 500px;    
    background: url('/static/images/blekinge.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.ostergotland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/ostergotland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
    /* border:  1px solid #f00; */
    /* box-sizing: border-box;*/
}

#map-container.sodermanland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/sodermanland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
    /* border:  1px solid #f00; */
    /* box-sizing: border-box;*/
}

#map-container.skane{
    width: 400px;
    height: 500px;    
    background: url('/static/images/skane.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
    /* border:  1px solid #f00; */
    /* box-sizing: border-box;*/
}

#map-container.kronoberg{
    width: 400px;
    height: 500px;    
    background: url('/static/images/kronoberg.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.halland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/halland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.jonkoping{
    width: 400px;
    height: 500px;    
    background: url('/static/images/jonkoping.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.vastragotaland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/vastragotaland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.varmland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/varmland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.orebro{
    width: 400px;
    height: 500px;    
    background: url('/static/images/orebro.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.vastmanland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/vastmanland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.uppsala{
    width: 400px;
    height: 500px;    
    background: url('/static/images/uppsala.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.dalarna{
    width: 400px;
    height: 500px;    
    background: url('/static/images/dalarna.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.gavleborg{
    width: 400px;
    height: 500px;    
    background: url('/static/images/gavleborg.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.jamtland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/jamtland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.vasternorrland{
    width: 400px;
    height: 500px;    
    background: url('/static/images/vasternorrland.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.vasterbotten{
    width: 400px;
    height: 500px;    
    background: url('/static/images/vasterbotten.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}

#map-container.norrbotten{
    width: 400px;
    height: 500px;    
    background: url('/static/images/norrbotten.png?v=240325-1') 0 0;
    background-repeat: no-repeat;           
}
#home-icon{
    position: absolute;
    background: url('/static/images/sprite.png?v=240325-1') 0px 0px; 
}

#m-menu-icon{
    position: absolute;    
    width: 50px;    /* Rescaled */
    height: 37px;   /* Rescaled */
    background: url('/static/images/sprite.png?v=240325-1') 0px 0px;    
}

.left-arrow-sprite{ /* arrow-left.png */  
    width: 40px;
    height: 40px;
    background: url('/static/images/sprite.png?v=240325-1') 0px -300px;      
    border-radius: 50%;        
    border: 2px solid #32aae2;    
}

.left-arrow-sprite.disabled{
    background: url('/static/images/sprite.png?v=240325-1') 0px -400px;    /* arrow-left-disabled.png*/
    /* background-color: #000;   */
    border: 2px solid rgb(220, 220, 220);    
}

.right-arrow-sprite{
    width: 40px;
    height: 40px;
    background: url('/static/images/sprite.png?v=240325-1') 0px -500px;    /* arrow-right.png*/    
    border-radius: 50%;
    border: 2px solid #32aae2;        
}

.right-arrow-sprite.disabled{
    background: url('/static/images/sprite.png?v=240325-1') 0px -600px;    /* arrow-right-disabled.png*/
    border: 2px solid rgb(220, 220, 220);       
}

.m-arrow-sprite{
    width: 40px;
    height: 40px;
    background: url('/static/images/sprite.png?v=240325-1') 0px -100px;    /* arrow-down.png*/    
}

.m-arrow-sprite.active{
    background: url('/static/images/sprite.png?v=240325-1') 0px -200px;    /* arrow-up.png*/
}


#bling-bling.bling5{
    opacity: 0.0;
    width: 100px;
    height: 100px;
    background: url('/static/images/sprite.png?v=240325-1') 0px -700px;    /* bling5.png*/ 
}
/* End - sprite.css */



/* Begin - html.css */
html{
    user-select: none;
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: absolute;
}


#map-container {
    position: absolute;
    display: block;
    top: 70px;
    left: 0px;
    background-repeat: no-repeat;     
    /* border: 1px solid #0f0;   */
    /* box-sizing: border-box;       */
}

#plotting-canvas {
    position: absolute;
    top: 70px;
    left: 0px;
}


#test-100-button{
    background-color: #000;
    position: absolute;
    color: white;  
    border: none;
    
    /* Below properties are rescaled */
    left: 10px;
    top: 10px;
    width: 100px;
    padding: 5px 5px;
    border-radius: 5px;               
}
/* End - html.css */



/* Begin - main.css */
#paging-icon-container{
    position: absolute;
    left: 165px;
    top: 570px;    
    height: 40px;
    display: flex;
    align-items: center;
    width: 170px;
}


#paging-icon-container-prev {
    display: flex; 
    flex-grow: 1;
    justify-content: center; /* flex-start; flex-end; */
}


#paging-icon-container-spacer {
    width: 20%;
    height: 40px;
    /* border: 1px solid #0f0;   */
    /* box-sizing: border-box;         */
}


#paging-icon-container-next {
    display: flex;
    flex-grow: 1;            
    justify-content: center;            
}

/* ================================================= */

#main{
    position: absolute;
    top: 0px;
    left: 0px;   
}

.main-faded-out{
    opacity: 0;
}

.main-fade-in{
    opacity: 1;  /* Final opacity after transition */       
    transition: opacity 1000ms ease;    
}


.main-fade-out{
    opacity: 0;    
    transition: opacity 500ms ease;       
}

.map-fade-out{
    opacity: 0.25;  /* Final opacity after transition */       
    transition: opacity 1500ms ease;    
}

.plotting-canvas-faded-out{
    opacity: 0;
}

.plotting-canvas-fade-in{
    opacity: 1;  /* Final opacity after transition */       
    transition: opacity 1500ms ease;    
}

#caption-1 {
    position: absolute;    
    top: 0px;
    left: 0px;
    /* padding-top: 10px;             */
    /* padding-left: 10px; */
    font-family: Arial, Helvetica, sans-serif;            
        
    font-weight: bold;
    /* color: #fff; */
    color: #32aae2;        
    
    /* text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;*/

    font-size: 25px;      
    width: 200px;         
}

#caption-2 {
    position: absolute;    
    top: 40px;
    left: 0px;    
    /* padding-left: 10px;             */
    font-family: Arial, Helvetica, sans-serif;            
    font-size: 25px;                 
    font-weight: bold;  
    /* color: #fff;      */
    color: #32aae2;        
    width: 200px;            
    /* text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;                           */
}


#show-station-names-button{
    background: transparent;    
    position: absolute;
    font-weight: bold;
    /* left: 160px; */
    left: 10px;    
    top: 600px;
    color: #32aae2;   
    width: 130px;
    padding: 5px 5px;
    border: none;
    border-radius: 5px;   
    border: 2px solid #32aae2;                 
}

#bling-bling{
    position: absolute;
    left: 15px;
    top: 70px; 
    width: 100px;     
    height: 100px;  
}

#f-area{ /* Fårö - rename as second-click area */
    position: absolute;
    left: 0px;
    top: 0px; 
    width: 100px;     
    height: 50px;      
}

#county-caption{
    position: absolute;
    left: 3px;
    top: 250px; /* Scaled */
    writing-mode: vertical-rl;       
    transform: rotate(-180deg);
    color: #32aae2;    
    font-weight: bold;    
}
/* End - main.css */



/* Begin - menu.css */
/* Child elements of menu are prefixed with: 'm-' */

#menu{
    display: flex;
    flex-direction: column;    
    justify-content: center;
    position: absolute;    
    top: 60px;
}

.menu-closed{
    left: -350px; /* Start the menu off-screen */
    transition: left 0.3s ease; /* Add a transition effect to the left property */    
}

.menu-open {
    /* Properties below are rescaled */
    left: 15px;
}


.m-menu-entry {
    padding: 10px;
}

.m-entry-header {
    font-weight: bold;
    border: 2px ridge #32aae2; 
    height: 40px;
    display: flex;
    align-items: center;    
    justify-content: space-between;    
    background-color: #fefefe;    
}


#m-menu-entry-log{
    display: none;    
}

#m-menu-entry-log.show{
    display: block;    
}

.m-text {
    flex-grow: 1;
    text-align: left;
}

.m-arrow {
    order: -1; /* Leftmost??? */
}


.m-entry-content {  
    max-height: 0px;
    height: 0px;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;  
    background-color: #fefefe;       
    border: 2px ridge #32aae2;
     

    border-top: none;  
    border-bottom: none;  
    box-sizing: border-box;       
}


  

.m-entry-content.active {
    display: block;
    border-bottom: 2px ridge #32aae2;
}


#m-entry-content-datepicker{
    position: relative; 
    /* Below properties are rescaled */      
    width: 270px;
}

#m-entry-content-datepicker.active {
    display: block;
    max-height:  480px;   
 
}

#m-entry-content-monthpicker{
    position: relative; 
}

#m-entry-content-monthpicker.active {
    display: block;
    max-height: 500px;  
}

#m-entry-content-yearpicker{
    position: relative; 
    height: 500px; 
}

#m-entry-content-yearpicker.active {
    display: block;
    max-height: 500px;  
}

#m-entry-content-log{
    position: relative; 
    height: 500px;
}

#m-entry-content-log.active {
    display: block;
    max-height: 500px;  
}

#m-log-area{
    position: absolute;
    top: 40px;
    left: 10px;
    user-select: text;
}

#m-entry-content-about{
    position: relative; 
    padding-left: 5px;
    padding-right: 5px;    
    user-select: text;    
}

#m-entry-content-about.active {
    display: block;
    max-height: 600px;  
}

#m-entry-content-donate{
    position: relative; 
    padding-left: 5px;
    padding-right: 5px;    
    user-select: text;    
}

#m-entry-content-donate.active {
    display: block;
    max-height: 200px;  
}
/* End - menu.css */



/* Begin - datepicker.css */
/* Child elements of datepicker are prefixed with: 'dp-' */


#datepicker-container{
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);    
    width: 282px;
    height: 480px;
}


#dp-selected-date-container{
    position: absolute;
    font-weight: bold;    
    top: 10px;      /* rescaled */
    width: 170px;   /* rescaled */
    height: 40px;   /* rescaled */
}



#dp-divider {
    position: absolute;
    left: 0px;
    top: 65px;                          /* rescaled */
    width: 280px;                       /* rescaled */
    border-top: 2px solid #32aae2;       /* rescaled */
    border-bottom:  2px solid #32aae2;    /* rescaled */
    box-sizing: border-box;    
    height: 6px;                        /* rescaled */
}

#dp-inner-selected-date{
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);   
    font-size: 25px;    /* rescaled */
}


/*===    Year Selection   ===*/
#dp-year-container{
    position: absolute;
    width: 100%;

    /* Below properties are rescaled */
    top: 360px;    
    height: 40px;
}

#dp-year-display{ /* dp-year-container/dp-year-display */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    left: 0px;  

    /* Below properties are rescaled */    
    width: 100px;
    height: 30px;
}

#dp-inner-year-display{ /* dp-year-container/dp-year-display/dp-inner-year-display */ 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);  

    /* Below properties are rescaled */        
    font-size: 25px;    
}

#dp-prev-year-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Below properties are rescaled */       
    left: 180px;      
}

#dp-next-year-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Below properties are rescaled */       
    left: 242px;      
}

/*===    Month Selection   ===*/
#dp-month-container{
    position: absolute;
    width: 100%;
    
    /* Below properties are rescaled */      
    top: 410px;    
    height: 40px;
}

#dp-month-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    left: 0px;  

    /* Below properties are rescaled */      
    width: 100px;
    height: 30px;
}

#dp-inner-month-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);  
    
    /* Below properties are rescaled */    
    font-size: 25px;    
}

#dp-prev-month-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Below properties are rescaled */        
    left: 180px;      
}

#dp-next-month-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Below properties are rescaled */      
    left: 242px;      
}

/*===    Day Selection   ===*/


#dp-daypicker-container {
    position: absolute;
    top: 110px; /* rescaled */
    width: 290px; /* rescaled */
    height: 200px; /* rescaled */
    font-size: 20px; /* rescaled */
}


#dp-daypicker-weekday-names{
    position: absolute;
    top: 90px; /* rescaled */
    width: 280px; /* rescaled */
}

.dp-daypicker-weekday-name{
    position: absolute;
    width: 40px; /* rescaled */
}

.dp-daypicker-weekday-name-inner{
    text-align: center;
    color: black;
    font-weight: bold;
    font-size: 16px; /* rescaled */
}

.dp-day-item{
    position: absolute;   
    width: 40px;    /* rescaled */       
    height: 40px;   /* rescaled */     
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     
    border: 1px solid #aaa;     
    box-sizing: border-box;      
}

.dp-filler-day-item{
    color: #00000074;  /* Ever used? */
}  


.dp-selectable-day-item{     
    color: #000;      
}        

.dp-selected {
    border-radius: 50%;
    /* background-color: black; */
    /* background-color: #000;     */

    border: 2px solid #32aae2;      
    color: #32aae2;      
    /* color: #fff; */
    font-weight: bold;
    width: 36px; /* circle diameter */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

#dp-selected-day{
    position: absolute;
    top: 200px;
    left: 100px;         
}


#dp-show-selected-date-button{
    position: absolute;
    /* border: none; */
    font-weight: bold;
    /* background-color: #000;     */
    background: transparent;        
    /* color: #0f0;     */
    color: #32aae2;         
    border: 2px solid #32aae2;  
    /* #32aae2; */

    /* Below properties are rescaled */
    left: 200px;
    top: 10px;
    font-size: 16px;
    width: 80px;
    height: 40px;
    border-radius: 5px;    
}
  

#dp-show-selected-date-button:disabled {
    /* background-color: #ccc !important; */
    /* color: #999 !important; */
    /* background-color: #ccc !important;     */
    background: transparent;      
    color: rgb(220, 220, 220) !important;    
    border-color: rgb(220, 220, 220);
    cursor: not-allowed !important;
}
/* End - datepicker.css */



/* Begin - monthpicker.css */
/* Child elements of monthpicker-container are prefixed with: 'mp-' */

#monthpicker-container{
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);    
    width: 282px;
    height: 200px;
}

#mp-selected-year-month-container{
    position: absolute;
    top: 10px;    
    width: 170px;
    height: 40px;
}

#mp-divider { /* Should be a class  */
    position: absolute;
    left: 0px;
    top: 65px;    
    width: 280px;
    border-top: 2px solid #bbb;
    border-bottom:  2px solid #bbb;
    box-sizing: border-box;    
    height: 6px;
}

#mp-inner-selected-year-month{ /* dp-selected-date-container/dp-inner-selected-date */ 
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);   
    font-size: 25px;   
    font-weight: bold; 
}


#mp-show-selected-year-month-button{
    position: absolute;
    /* border: none;	 */
    /* background-color: #000;     */
    /* color: #0f0;	 */

    background: transparent;        
    color: #32aae2;         
    font-weight: bold;    
    border: 2px solid #32aae2;      

	
    /* Below properties are rescaled */	
    left: 200px;
    top: 10px;
    font-size: 16px;
    width: 80px;
    height: 40px;
    border-radius: 5px;    
}


/*===    Year Selection   ===*/
#mp-year-container{
    position: absolute;
    width: 100%;

    /* Below properties are rescaled */	    
    top: 80px;    
    height: 40px;
}

#mp-year-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    left: 0px;  
    width: 100px;
    height: 30px;
}

#mp-inner-year-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);   
    font-size: 25px;    
}

#mp-prev-year-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 180px;      
}

#mp-next-year-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 242px;      
}

/*===    Month Selection   ===*/
#mp-month-container{
    position: absolute;
    width: 100%;
    
    /* Below properties are rescaled */	    
    top: 140px;    
    height: 40px;
}

#mp-month-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    left: 0px;  
    width: 100px;
    height: 30px;
}

#mp-inner-month-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);   
    font-size: 25px;    
}

#mp-prev-month-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 180px;      
}

#mp-next-month-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 242px;      
}
/* End - monthpicker.css */



/* Begin - yearpicker.css */
/* Child elements of yearpicker-container are prefixed with: 'yp-' */


#yearpicker-container{  
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);    
    width: 282px;
    height: 140px;
}


#yp-selected-year-container{
    position: absolute;
    font-weight: bold;

    /* Below properties are rescaled */		    
    top: 10px;    
    width: 170px;
    height: 40px;
}

#yp-inner-selected-year{
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);   
    font-weight: bold;      

    /* Below properties are rescaled */		       
    font-size: 25px;       
}

#yp-divider {
    position: absolute;

    /* Below properties are rescaled */		          
    left: 0px;
    top: 65px;    
    width: 280px;
    border-top: 2px solid #bbb;
    border-bottom:  2px solid #bbb;
    box-sizing: border-box;    
    height: 6px;
}

#yp-year-container{
    position: absolute;
    width: 100%;

    /* Below properties are rescaled */		    
    top: 90px;    
    height: 40px;
}

#yp-year-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    left: 0px;  

    /* Below properties are rescaled */		    
    width: 100px;
    height: 30px;
}

#yp-inner-year-display{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);   
    font-size: 25px;    
}

#yp-prev-year-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Below properties are rescaled */		    
    left: 180px;      
}

#yp-next-year-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Below properties are rescaled */		    
    left: 242px;      
}

#yp-show-selected-year-button{
    position: absolute;
    /* border: none;	 */
    /* background-color: #000;     */
    /* color: #0f0;	 */

    background: transparent;        
    color: #32aae2;         
    font-weight: bold;    
    border: 2px solid #32aae2;        
	
    /* Below properties are rescaled */		
    left: 200px;
    top: 10px;
    font-size: 16px;
    width: 80px;
    height: 40px;
    border-radius: 5px;    
}
/* End - yearpicker.css */



/* Begin - plotter.css */
.precipitation-text {
    position: absolute;
    color: #000000;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline; 
    /* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;        */
}

.precipitation-text.not-complete{
    color: #ff0000 !important;     
}

.precipitation-text-missing-source {
    position: absolute;
    color: #ff0000;
    width: 200px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    display: inline;      
}

.precipitation-text-null-value {
    position: absolute;
    color: #ff0000;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline;  
    text-align: right;
    width: 30px;
}


.station-name{
    position: absolute;
    color: #000;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    /* display: inline;       */
    /* display: flex; */
    /* align-items: center; */
    text-align: center;  
    /* text-align: left; */
}
/* End - plotter.css */