.salk_logga_container {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.salk_logga {
    position: absolute;
}

.blink {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.disp_inline {
    display: inline-block;
}

.settings_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*align-items: center;*/
}


.health_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*align-items: center;*/
}

.settings_column {
    margin: 0 1em;
}

.health_column {
    margin: 0 1em;
}

.green { background-color:  #80ff80; }
.red { background-color:  #ff9980; }
.yellow { background-color: #ffff80; }

.type_dog_a {
    cursor: default;    
    font-weight: 700;
    color: #ff0066;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.2);
}

.type_dog_v {
    cursor: default;    
    font-weight: 700;
    color: #ff8000;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.2);
}

.type_dog_s {
    cursor: default;    
    font-weight: 700;
    color: #3366ff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.2);
}

.selected_blue { background: #0248b1 !important; }
.selected_green { background: #1f7a1f !important; }
.selected_yellow { background: #995c00 !important; }

.fiktiv {
    display:inline-block;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    width: fit-content;
    text-align: center;
    padding: 0 .5em; 
    background: #0D6EFD !important;    
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6), -1px -1px 5px rgba(255, 255, 255, 0.5);        
}

.color_white { background: #FFFFFF; }
.color_0 { background: #00ffcc; }
.color_1 { background: #ffff66; }
.color_2 { background: #ffcc66; }
.color_3 { background: #ccff66; }
.color_4 { background: #33cccc; }
.color_5 { background: #ff66ff; }
.color_6 { background: #00ccff; }
.color_7 { background: #cc66ff; }
.color_8 { background: #ff6666; }
.color_9 { background: #9999ff; }
.color_10 { background: #00ff00; }
.color_11 { background: #ff9966; }
.color_12 { background: #6699ff; }
.color_13 { background: #00ff99; }
.color_14 { background: #99ff66; }
.color_15 { background: #0099ff; }

.page-link:hover { text-decoration: none; }

.hidden_mobile {}

.clean_table td {
    padding: 0 .2em  0 .2em;
    vertical-align: top;    
}

.readonly-select {
    pointer-events: none;
    background: #e9ecef;
  }

.accordion-button:hover {background-color: #298983;}
    
.accordion-button:not(.collapsed) {
    color: inherit;
    background: #2E6CE7;
    color: white;
}

.accordion-button {
    color: inherit;
    background: #21706B;
    color: white;
    font-size: inherit;
    font-weight: 700;
}

.accordion-button::after {
    filter: brightness(0%) invert(100%);
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0%) invert(100%);
}

.accordion-button:focus {
    box-shadow: inherit;
}

.accordion-item {background: #f2f2f2;}

.submenu_button:hover {
    text-decoration: none;
    background: #3585fd;
    color: white;    
}

.submenu_button_red {
    background: #e62e00 !important;    
}

.submenu_button_yellow {
    background: #e68a00 !important;
}

.submenu_button_yellow:hover {
    text-decoration: none;
    background: #ffa31a !important;    
    color: white;        
}

.submenu_button_green {
    background: #2eb82e !important;
}

.submenu_button_green:hover {
    text-decoration: none;
    background: #47d147 !important;    
    color: white;        
}

.submenu_button_red:hover {
    text-decoration: none;
    background: #ff5c33 !important;
    color: white;        
}

.submenu_button a { color: white;}
.submenu_button {
    display:inline-block;
    text-decoration: none;
    color: white;
    border-radius: 15px;
    width: 6.7em;
    text-align: center;
    padding: .5em 1em; 
    background-color: #0D6EFD;
    transition: background .2s;    
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6), -1px -1px 5px rgba(255, 255, 255, 0.5);    
}

.minibutton:hover {
    text-decoration: none;
    background: #ff5c33 !important;
    color: white;        
}

.minibutton {
    display:inline-block;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    width: fit-content;
    text-align: center;
    padding: 0 1em; 
    background: #e62e00 !important;    
    transition: background .2s;    
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6), -1px -1px 5px rgba(255, 255, 255, 0.5);    
}

.submenu_container {  
    color: white;    
    display: flex;
    flex-wrap: wrap;    
    justify-content: flex-start; /*space-between;*/
    align-items: flex-start; /* center */
    padding: .8em .0 .5em 0;
    gap: 6px;    
}

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

.log_green { background-color:  #80ff80; }
.log_red { background-color:  #ff9980; }
.log_yellow { background-color: #ffff80; }
.log_blue { background-color: #80b3ff; }


.health {
    background-color: #ffd699;
    padding: .5em;
    margin: 1em 0;
    border-radius: 10px;
}

.search_border_breeders {
    background-color: #adebad;
    padding: .5em;
    margin: 1em 0;
    border-radius: 10px;
}

.search_border_far {
    background-color: #99c2ff;
    padding: .5em;
    margin: 1em 0;
    border-radius: 10px;
}

.search_border_mor {
    background-color: #ff9999;
    padding: .5em;
    margin: 1em 0;
    border-radius: 10px;
}

.dog_container {
    display: flex;
    justify-content: space-between;
    align-items: center;    
    background-color: #ffebcc;
    /* border: 2px solid black; */
    padding: 1em;
    border-radius: 10px;
    /*box-shadow: 3px 3px 4px 4px grey;*/
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6), -1px -1px 5px rgba(255, 255, 255, 0.5);    
}

.display_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.display_container_left {
    display: flex;
    justify-content:flex-start;
    align-items: center;
}

.display_info {
    border-radius: 15px;
    background-color: #0D6EFD;
    text-align: center;
    width: fit-content;    
    padding: 0 1.5em;
    color: white;
}

.button {
    border-radius: 15px;
    background-color: #0D6EFD;
    text-align: center;
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    cursor: pointer;
}

h1,h2 {
    font-size: 120%;
    margin: .5em 0;
    font-weight: 700;
/*    color: rgb(208, 133, 4);*/
    color: #ff0066;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.2);
}

.logga {
    margin: .8em;
    border-radius: 10px;    
}

.datum_saknas {
    margin: 0;
    border-radius: 10px;    
}

.logotyp {
    /* margin: .1em 0 .1em .3em; */
    margin: 0 .3em;
    color: white;
    font-family: Edwardian, sans-serif;
    font-size: 300%;
    /*text-shadow: -2px -2px 8px black;*/
    display: inline-block;
    font-weight: 100;
}

.login_row {text-align: right;}

.clickable {}
.clickable:hover {
    background: #ff0066 !important;
    color: white;
    cursor: pointer;
}

.anim_message, .anim_message_down {
        margin-top: 1.5em; margin-left: 1.5em; margin-right: 1.5em;
        margin-bottom: 0;
	/*padding: .5em;*/
	display: none;
        border-style: solid;
        text-align: center;
}

.tbCenter2 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.tbCenter2 td, .tbCenter2 th {
    padding: .2em .5em .2em .5em;
    vertical-align: top;
}

.tbCenter2 th { background-color: #21706B; color: white; }

.tbCenter2 tbody tr:nth-child(odd) {    
    background-color: #e6e6e6;
}

/**********************************************/

.tbCenter {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    width: 100%;
    overflow: hidden;
}

.tbCenter td, .tbCenter th {
    padding: .2em .5em .2em .5em;
    vertical-align: top;
}

.tbCenter th { background-color: #21706B; color: white; }

.tbCenter tbody tr:nth-child(odd) {    
    background-color: #e6e6e6;
}

.tbCenter {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    width: 100%;
    overflow: hidden;
}

.tbCenter td, .tbCenter th {
    padding: .2em .5em .2em .5em;
    vertical-align: top;
}

.tbCenter th { background-color: #21706B; color: white; }

.tbCenter tbody tr:nth-child(odd) {    
    background-color: #e6e6e6;
}

/*********************************/

 
.tbCenter a {
      text-decoration: none;
      color: black;
  }

.tbCenter tr:hover a {
    background-color: #0000ff !important; /*#ff0066 !important;*/
    color: white;
    text-decoration: none;
  }
  
.tbCenter tr:hover {
    background-color: #0000ff !important; /*#ff0066 !important;*/
    color: white;
  }

.tbCenter tr td:first-child {
    position:relative;
  }

.tbCenter a:before {
    content: '';
    position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: 1000px;
  }

  /*********************************/

  .tree_print {
    margin-top: 1.5em;
    margin-bottom: 1.5em;   
    width: 100%; 
  }

.tree_print td, .tree_print th { 
    border: 1px solid black; /* Definierar ramen runt celler */
    padding: 1px; /* Lägger till lite mellanrum i cellerna */
}

.tree_print th { background-color: #b96254; color: white; }

  .tree {
    margin-top: 1.5em;
    margin-bottom: 1.5em;   
    width: 100%; 
}

.tree td, .tree th { 
    border: 1px solid lightgrey; /* Definierar ramen runt celler */
    padding: 1px; /* Lägger till lite mellanrum i cellerna */
}

.tree th { background-color: #b96254; color: white; }


/* .red { background-color: #ff4d4d; color: white; } */

.hidden { display: none; }

.form_size {
    padding: 1.5em;
    max-width: 500px;
    border-radius: 15px;
    background-color: #e6e6e6;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6), -1px -1px 5px rgba(255, 255, 255, 0.5);     
}

label {
    font-weight: 700;
}

#page-container {
    position: relative;
    min-height: 100vh;
  }
  
/* #content-wrap {
    padding-bottom: 5rem;  
  
*/
/* the styles for the HTML elements */
html {
    background-color: rgb(192, 192, 192);
    height: 100%;
    height: 100vh;
}
body {
    height: auto;
    min-height: 100%;
    min-height: 100vh;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto; 
    /*padding: 0 2em;*/
    border: 1px solid black;
    font-size: 100%;
    width: 99%;                     /* changed from 800 pixels */
    max-width: 1025px; /* 960 */
    background-color: white;
    box-shadow: -10px 0 20px rgba(0, 0, 0, 0.35),
                 10px 0 20px rgba(0, 0, 0, 0.35);
    
}
@font-face {
    font-family: Edwardian;
    src: url("../font/ITCEDSCR.TTF");
}

header {
    padding: .5em;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    padding: 0 0;
	background-image: linear-gradient(
	    30deg, #21706B 0%, #21706B 40%, #FFFFFF 99%);
}

section {
    margin: 1.5em 4em 1.5em 4em;
    color: black;
    font-size: 1em;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

  footer {
    clear: both;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.5rem;            /* Footer height */
    clear: both;
    background-color: #21706B;
    text-align: right;
    padding: 2px 2px 30px 2px;
    margin: 0;
    color: white;    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

footer p {
    text-align: right;
    font-size: 80%;
    color: white;
    margin: .5em 0 .5em 0; 

}
/*
h2 {
    color: rgb(208, 133, 4);
    font-size: 120%;
    margin: .5em 0 .3em 0;
}
*/
p {    margin: 0 0 .5em 0; }

a { 
    color: #009900;
    text-decoration: none;
}
a:hover {
    color: #004d99;
    text-decoration: underline;
}

.login_link {
    color: #004d99;    
}

footer a {
    color: white;
}
footer a:hover {
    color: white;
    text-decoration: underline;
}



@media only screen and (max-width: 1000px) {
    .health_container { flex-direction: column; align-items: center; }
    .health_column {margin: 0; }   
}

@media only screen and (max-width: 767px) {
    section { margin: 1em; padding: 0;}
    .hidden_large_mobile { display: none; }
}

@media only screen and (max-width: 479px) {
    .clean_table { display: none; }    
    .hidden_mobile { display: none; }
    /* header { justify-content: center; align-items: center;  text-align: center; } */    
 }
 
@media print {
    html {
        background-color: white;
    }
    body {
        border: none;
        box-shadow: none;
    }
    .exempel, .tbCenter2 {
        break-inside: avoid;
    }
    
    .hide_print {
        display: none;
    }

    section {
        margin: 0;
    }
    
}