body
{
/**/
}

.ff-mainNav {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1440px;
}


.basePage {
    margin: auto;
    padding: 0;
    width: 100%;
    max-width: 1440px;
    background-color: #fff;
}

.fboAlignVertMiddle {
    vertical-align: middle;
}


.top {
    vertical-align: top;
}

.fboSponsor{
    padding: 10px;
    margin: 10px;
}

.fboFlexCol{
/*    background-color: #b8daff; */
    padding-right  : 3px;
    padding-left   : 3px;
    padding-bottom : 5px;
    margin-left    : 5px;
    margin-right   : 5px;
    margin-bottom  : 5px;
}


.fboPhotoHomeBottom{
    padding-right  : 2px;
    padding-bottom : 5px;

}

.fboMain {
    max-width: 500px;
}

.tight {
// background-color: #4CAF50;
    padding-top: 2px;
    margin-top: 2px;
}

.std {
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}




.taxa-table {
    padding-left: 20px;
    padding-right: 20px;
    width: 90%;
    /* background-color: #8db6cd; */
}

.table-cell-padding {
    border-collapse: separate!important;
    border-spacing: 0;
}


.std-right {
    padding-left: 10px;
    max-width: 350px;
}


img-5 {
    padding-left:  5px;
    padding-right: 5px;
}


.two-col-left {
    padding-right: 5px;
    max-width: 50%;
}

.two-col-right {
    padding-left: 5px;
    max-width: 50%;
}

.three-col {
    max-width: 33%;
}

.three-col-px {
    max-width: 450px;
    min-width: 450px;
}

.info{
    font-size: 10px; color: red;
}

.header-container{
    display: flex;
    background-color: #FFFFFF;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #5981D2;
}

.art-list-nav {
    width: 350px;
    background-color: #E6EBF9;
}

div.rast-nav {
    width: 400px;
    background-color: #E6EBF9;
}


.cal-nav {
    width: 220px;
    background-color: #E6EBF9;
}


.cal-nav-wide {
    width: 300px;
    background-color: #E6EBF9;
}

.control-panel {
    background-color: #E6EBF9;
    width: 100%;
}

.center {
    text-align: center;
}

.news-left{
    width: 130px;
    padding-left: 10px;
    padding-right: 10px;
    /* background-color: #8b3a62; */
}

.artlista-nav{
    width: 300px;
    background-color: #FFFF00;
}

.news-center{
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
}

.top {
    vertical-align: top;
}

.std-center{
    padding-left: 10px;
    padding-right: 10px;
}

.news-right{
    padding-left: 10px;
    padding-right: 10px;
    width: 150px;
    /* background-color: #CCCCCC; */
}

.two-right {
    padding-left: 10px;
    padding-right: 10px;
    /*    background-color: antiquewhite; */

}

.two-left {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 400px;
    /* background-color: #73AD21; */
    /* background-color: blanchedalmond; */
}

.icon {
    display: block;
    margin-top: 2px;
    margin-left: auto;
    margin-right: auto;
}

.lopande {
    display: block;
    padding-left: 10px;
    margin-right: 10px;
}

p.publication {
    padding-top: 3px;
    padding-bottom: 5px;
}


/* Create three equal columns that floats next to each other */
.header_column_leftside {
    padding: 5px;
    /*   background-color: #8b3a62; */
    width: 80px;
}

.header_column_middle {
    background-color: #FFFF00;
}

.header_column_rightside {
    margin-top: 0;
    padding: 0;
    width: 25%;
    /*   background-color: #8b0a50; */

}





table.normal {
    font-family: Verdana, sans-serif;
    font-size: 1rem;
    color: navy;
    background-color: #FFFFFF;
    width: 100%;
}

table.small {
    width: 200px;
}

.publications {
    border-collapse: collapse;
    border-spacing: 0;
}


.publications-pdf-cell {
    padding-right: 5px;
    padding-left: 3px;
}



.hover tr:hover {
    background-color: #ffff99;
}

.table_small
{
    background-color: #FFFFFF;
    border: 2px solid #BECCEE;
    border-left: #315EBB;
    border-top: #315EBB;

}

/*TABELL UTAN GRäNSLINJER*/
/*
.table_none
{
    background-color: #F2F5FF;
    border: 0;
    border-collapse: collapse;
}

.table-invisible {
    border: 0;
    border-collapse: collapse;
    margin-inside: 5px;
}

.tableplain {
    background-color: #BECCEE;
    border: 0;
    border-collapse: collapse;
}

.table_none_small {
    background-color: #DAE2FD;
    border: 0;
    border-collapse: collapse;
}

.gron {
    background-color:  #387811;
}

.white {
    color: whitesmoke;
}

.reallyWhite {
    background-color: white;
}

*/


/* A {text-decoration: underline; color:blue} */
/*
A:link {color:blue; text-decoration: none}
A:hover {color:#0099FF; text-decoration: underline }
A:active {color:navy; text-decoration: none}

A.menylink {text-decoration: none; color:white}
A.menlink:link {color:white; text-decoration: none}
A.menylink:hover {color:blue}
A.menylink:active {color:blue}


.fakeLink {
    color:blue;
    text-decoration: none;
    cursor:pointer;
}
.fakeLink:hover {
    color:#0099FF;
    text-decoration: underline

}
*/

.lastweek
{
    background-color: white;
    color: navy;
    font-weight: bold
}

.restweek
{
    background-color: #E1E8F7;
    font-weight: normal;
    font-style: normal
}

.alt_tab_bg
{background-color: #F2F5FF}


.tablehead
{
    font-family: Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    background-color: #5981D2;
    color: #FFFFFF}


/* Navigation calendar section */
.cal_text{
    font-size:        10px;
    font-style:       normal;
    font-weight:      normal;
}


.cal_table {
    border: 2px; color: #BECCEE;
    width: 180px;
    margin-left:auto;
    margin-right:auto;
}

.cal_table a {
    text-decoration: none;
}

a.cal_head:hover
{
    text-decoration: none;
}

.cal_head
{
    background-color:   #BECCEE;
    color:              navy;
    font-size:          11px;
    font-style:         normal;
}

.cal_sub_head
{
    background-color:   #BECCEE;
    color:              navy;
}

.cal_head_side
{
    background-color: #BECCEE;
    font-size:        8px;
    font-weight:      normal;
    font-style:       normal;
}

.cal_days
{
    text-align: center;
    background-color: #BECCEE;
}

.cal_content
{
    text-align: center;
    background-color: #EEEEEE;
}

.cal_today
{
    text-align: center;
    background-color: #FFEA00;
    color: #626364;
}


.cal_vald_dag
{
    text-align: center;
    background-color: #D6DFF3;
    color: #626364;
    font-weight: bold;

}


.boldText {
    font-weight: bold;
    background-color: navy;
}

.cal_event, a.cal_event
{
    text-align: center;
    background-color: #D6DFF3;
    text-decoration: none;
}



hr.footer {
    width: 80%;
    margin-top: 20px;
}

hr.index {
    width: 90%;
    margin-top: 10px;
}

/* ------------------------------ menus -------------------------------------------*/

/* Add a blue background color to the top navigation */
.topnav {
    position: relative;
    display: flex;
    margin: 0 auto;
    background-color: #5981D2;

    /* background-color: greenyellow; */
    overflow: hidden;
    width: 100%;
}

.fboColor-1 {
    background-color: #8b3a62;
}

/* Style the links inside the navigation bar  */
.topnav a {
    float: left;
    color: #f2f2f2; /* Gr  text */
    /* color: #f2f;  V LDIGT ROSA text */
    text-align: center;

    padding: 8px 5px;
    text-decoration: none;

}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;  /* Gr  f rg */
    /* background-color: palevioletred; */
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #FFEA00; /* gul - typ*/
    /*background-color: blueviolet; */
    color: #626364;
}

span:first-of-type {
    flex: 1;
}

div.inner {
    display: inline-block;
    margin: 0 auto;
    padding: 3px;
}


div .navigator
{
    background-color:  #E6EBF9;
    width: 180px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    border: 1px outset #BECCEE;
}


.center-child {
    text-align: center;
}


.centered-child {
    display: inline-block
}


div.debug{
    background-color: #5981D2;
}

img.at-right{
    float: right;
    display: block;
    margin: 10px;
}

div.news-item{
    margin-bottom: 25px;
}


.foto {
    position:absolute;         /* Ensure that it does not take space on the web page */
visibility:hidden;         /* Normally it is invisible */
background-color:#BECCEE;  /* Something that contrasts with the rest of the web page */
border: 1px solid #315EBB; /* blue border, 1px wide */
z-index:12;                /* Ensure that it hides anything that it where it pops up */
padding: 5px 5px 10px;
width: 180px;
}

img {
    max-width: 100%; /* This rule is very important, please do not ignore this! */
}


img.hoger {
    text-align: right;
}


img:hover + .foto {   /* Select for the item (span) that follow a link (<a>) */
    /* that the mouse is hovering over */
    visibility:visible;       /* Make the text in class tooltip_demo visible */
}


img:hover + .title {   /* Select for the item (span) that follow a link (<a>) */
    /* that the mouse is hovering over */
    visibility:visible;       /* Make the text in class tooltip_demo visible */
}

.sales {
    float:left;
    margin-right:10px;
    border:none;
    display: block;
}

.div-show {
    /* background-color: #FFFF00;*/
    width: 40%;
    margin-right: 120px;
}

.div-left {
    /* background-color: #d18200; */
    width: 80%;
    padding-right: 20px;
}

.art-vinjettt-bild {
    display: block;
    /* margin-left: auto; */
    /* margin-right: 10px; */
}


.flagga {
    margin-top: 0;
    padding: 0;
    background-color: #FFFF00;
}

table.tbl_small {
    width: 550px;
}

td.centered {
    text-align: center;
}

td.right-with-margin {
    text-align: right;
    padding-right: 25px;
}

td.legend-symbol{
    width: 20px;
}

td.no-f {
    text-align: right;
    padding-right: 5px;
}

td.no-s {
    text-align: right;
    padding-right: 25px;
    padding-left: 10px;
}

td.border-right {
    border-right: 1px #575757 solid;
}

td.rr-sum{
    width: 45px;
}

td.species-name{
    width: 150px;
}

td.dagsum {
    text-align: right;
    padding-right: 3px;
}


td.tbl-no {
    width: 37px;
    text-align: right;
    padding-right: 3px;
}

td.tbl-text-col {
    width: 80px;
    text-align: left;
    padding-left: 5px;
}


td.art {
    width: 220px;
}

td.summa {
    width: 90px;
}


td.top {
    vertical-align: text-top;

}

td.sumdagsum {
    width: 50px;
    text-align: right;
    padding-right: 3px;
}

td.no-wider {
    width: 20px;
    text-align: right;
    padding-right: 5px;
}

tr.summa{
    font-weight:bold;
    font-style: italic;
}

td.summa{

    font-weight:bold;
    font-style: italic;

    padding-top: 3px;
    padding-bottom: 5px;
    border-top: 1px solid #0000ff;
}

td.day-no {
    width: 15px;
    text-align: right;
}

td.to, th.to{
    width: 25px;
}

td.lokal, th.lokal{
    width: 80px;
}

.ringing-table {
    width: 280px;
    /* background-color: #d18200; */
    margin-right: 40px;
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 8px;
}

.frame {
    border: 1px solid #315EBB;
}

.shadownarrow {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.19);
    margin: 6px;
}


span.shd{
    padding-left: 8px;
}

div.gallery-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

div.paginator {
    margin-top: 10px;
    text-align: center;
}

p.artsummary {
    margin-top: 10px;
    text-align: right;
}

span.lang {
    align-self: end;

}

tr.italics{
    font-style: italic;
}

td.fet-stil{
    font-weight: bold;
}

table.one-hundred{
    width: 150px;
}

div.intro-image{
    padding-left: 50px;

}

div.test{
    background-color: #CC3300;
    width: 100%;

}


h3.alarm {
    color: red;
}


h3.green {
    color: green;
}


span.language-select {
    align-self: self-end;
}


div.dagsum-table {
    width: 100px;
    margin-right: 10px;
}

td.date{
    width: 80px;
    text-align: center;
}

td.date120{
    width: 120px;
    text-align: center;
}

td.year{
    width: 60px;
    text-align: center;
}


div.tio-i-topp-table {
    width: 250px;
    padding-right: 30px;
}

.div600{
    max-width: 600px;
}

.div-max-100-pct{
    max-width: 100%;
}

div.space-below{
    height: 100px;
}

img.skof{
    margin-right: 10px;
    margin-top: 5px;
    height: 100px;
}

img.rimgm{
    margin-right: 10px;
    margin-top: 5px;
    height: 440px;
}

img.tmp{
    width: 94px;
    height: 123px;
}

table.smhi{
    max-width: 700px;
}

.smhi-blue-row{
    background-color: #dbe9f8;
}

td.smhi-data-50{
    width: 50px;
    text-align: center;
}

td.smhi-data{
    width: 90px;
    text-align: center;
}

td.smhi-info{
    text-align: center;
    background-color: #dbe9f8;
    width: 90px;
}
td.smhi-header-50{
    text-align: center;
    background-color: #dbe9f8;
    width: 50px;
}

td.strack-antal{
    text-align: right;
    width: 100px;
    padding-right: 5px;
}


th.header-art{
    width: 150px;
}



table.smhi-dagbok{
    max-width: 350px;
    margin-top: 5px;
}

th td.smhi-tid{
    width: 26px;
}

th td.smhi-moln{
    width: 30px;
}

th td.smhi-vind{
    width: 26px;
}

th td.smhi-ms{
    width: 20px;
}

th td.smhi-temp{
    width: 30px;
}

th td.smhi-sikt{
    width: 30px;
}

th.smhi-sikt-data{
    text-align: right;
}

th td.smhi-tryck{
    width: 44px;
}

th.smhi-vader-header{
    text-align: left;
}

th .smhi-vader-icon{
    width: 10px;
    text-align: center;
}

div .smhi-info-box{
    width: 350px;
    text-align: left;
}

td .smhi-vader-data{
    text-align: left;
}

div.webshoppen {
    margin-top: 10px;
    margin-bottom: 20px;
}

div.webshopitem{
    margin-top: 5px;
    margin-bottom: 10px;
}

div.legend {
    padding: 5px;
    background-color: #FFFFFF;
}

iframe.dagbok {
    width: 100%;
    height: 1180px;
    border: none;
}


#maptest{
    height: 600Px;
    width: 850px;
}

.mgFull{
    width: 100%;
}

#rmap{
    height : 360px;
}


.topBorder {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
}

.mgpt-2 {
    padding-top : 2px;
}


.minipic-ul{
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.minipic-li {
    /*height: 20vh;*/
    flex-grow: 1;
}

.mg-black {
    background-color: #0a0a0a;
    opacity: 0.5;
}

.mg-green {
    background-color: #c3e6cb;

}

.mg-noBorder {
    border: #cd00cd;
}

.ringing-day {
    background: #FFEA00 !important;
}

.ui-datepicker-calendar a.ui-state-default {
    background: #5981D2;
    color : white;
}

.ui-datepicker-calendar td.ui-datepicker-today a { background: red; } /* Today */
.ui-datepicker-calendar a.ui-state-hover { background: blue; } /* Hovered date */
.ui-datepicker-calendar a.ui-state-active {
    background: #FFEA00;
    color: black;
} /* Selected date */

kalle {
    background : yellowgreen !important;
}

.mg-hide-element {
    display: none;
}

.ff-hide-only-element {
    visibility:hidden;
}

.mg-logo {
    width: 75px;
    flex: 0 0 75px;
    /* background: gray;*/
}

#pageBanner {
    display: flex;
    width: 100%;
    justify-content: space-between;

    /*background-color: red;*/
    gap: 10px;
}

#vinjett-bild {
    flex: 0 0 330px;
    width: 330px;
}
#home-right-col {
    flex: 0 0 200px;
    width: 200px;
}

.div-border-bottom {
    border-bottom: lightgrey;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

.blogPage {
    background-color: whitesmoke;
}

h1 {
    size: 2rem;
    /* color: dimgrey; */
}

h2 {
    size: 1.75rem;
   /* color: dimgrey;*/
    color: black;
}

h3 {
    size: 1.5rem;
    color: dimgrey;
}


h4 {
    size: 1.25rem;
    color: dimgrey;
}


h5 {
    size: 1.2rem;
}
h5.grey {
    color: dimgrey;
}

h6 {
    size: 1.1rem;
}

h6.grey {
    color: dimgrey;
}

.mg-grey {
    background-color: #aaaaaa;
}

.mg-menu-blue {
    background: #5981D2
}

hr.dotted {
    border-top: 1px dotted lightgrey;
}

.inputWarning {
    border-color: red;
}

input.number {
    text-align: right;
}


.label-left-margin-5 {
    margin-left:5px;
    display:inline-block;
}

.mg-no-border:focus{
    outline: none;
}

span.mg-strike-through {
    text-decoration: line-through;
}

span.align-right-p-10 {
    padding-right: 10px;
    display:inline-block;

}

li.mg-selected-sub-record {
    background-color: #99c6f1;
}

li.selectedMenu {
    background-color: dodgerblue;
    color: red !important;
    font-weight: bold !important;
}


.selectedRow {
    background-color: rgba(0, 0, 0, 0.075);
}

.changedInPut {
    background-color: rgba(0, 0, 0, 0.075);
}


.mg-modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}


.mg-modal-sub-header {
    border-bottom: 1px solid #dee2e6;
}

.mg-card-header {
    padding: 0.75rem 1.25rem;
    xbackground-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.input-warning-text {
    color : red;
}

div.controlPanelSticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
//    border: 2px solid #4CAF50;
}

div.underlined {
    border-bottom-style: solid;
    border-color: grey;
    border-width: 1px;
}

.bookingRecordSelected {
    background-color: #b8daff;
}

.floatRight {
    float: right;
}

.flexGap {
    display: flex;
    /* gap: 20px; /* Sets both row-gap and column-gap */
    /* Or individually */
    row-gap: 10px; /* Vertical spacing */
    /* column-gap: 15px; /* Horizontal spacing */
}

.homeBox {
    margin: 10px;
}

.ff-blue {
    background-color: #dbe9f8;
}

.ff-taxaDayTable {
    max-width: 400px;
}

.ff-phoneColumn {
    max-width: 400px;
}

ff-taxaTrendTableColumn {
    margin-right: 20px;
}


.ff-radioBoxDiv {
    min-width: 250px;
}

.ff-phoneColumnNarrow {
    max-width: 350px;
}

.legend {
    min-width: 250px;
    margin-left: 20px;
}

.trend-chart {
    min-width: 400px;
    max-width: 450px;
}

.ff-flexContainer {
    gap: 20px;
}

.ff-dayHeader {
    max-width: 350px;
}


@media screen and (max-width:990px) {
    #controlPanelRadioButtons { flex-wrap: wrap;  }
    .ff-radioBoxDiv {padding-bottom: 10px}
    .legend {margin-left: 0px; padding-left: 0px}
    .ff-annAverage {padding-left : 30px}
}

.ff-wrap-reverse {
    flex-wrap: wrap-reverse
}

.ff-text-alert {
    color: #c69500;
}

.ff-text-alert-blue {
    color: dodgerblue;
}

.ff-legend-text-blue {
    color: dodgerblue;
}

.ff-legend-text-red {
    color: mediumvioletred;
}

.ff-text-yellow {
    color: #ffc107;
}

.writtenToDB {
    color: #548b54;
}

.input-group>input.yearInput {
    background-color: yellow;
    flex: 0 1 25px;
}

/* override bootstrap5's default, otherwise buttons do not show focused. */
.btn:focus {
   // background: #1ACC8D;
}


.ff-footer-color {
    background-color : #66b3ff;
}

.main-menu {
    font-size: 17px;
}

.person-card {
    min-width: 230px;
    max-width: 240px;
}

.sticky-header {
    position: sticky;
    top: 0;
}

.sticky-below-header {
    position: sticky;
    top: 85px;
}