﻿/* CSS fil for isvarsler på Varsom
   Ånund Kvambekk
   Siste oppdatering: 6. juni 2021
*/

.ingress_isvarsel {
    width: 100%;
    border: 1px solid #e2e2e2;
    padding: 5px;
    min-height: 110px;
}

    .ingress_isvarsel img {
        float: left;
        width: 100px;
        height: 98px;
    }

.forklaring_isvarsel {
    width: 100%;
    padding: 0px;
    margin: 0px 0px 10px 0px;
}

    .forklaring_isvarsel .knapp_tabell {
        display: inline-block;
        width: 220px;
        padding: 0px;
        margin: 10px 20px 0px 0px;
    }

    .forklaring_isvarsel .tillegg_nve_link {
        color: #1173B8;
        background-color: #f2f2f2;
        height: 35px;
        padding: 8px 0px 0px 15px;
    }

.text_heading_isvarsel {
    width: 100%;
    margin: 20px 0px 0px 0px;
    padding: 0px;
    background: #f2f2f2;
    vertical-align: middle;
    border-left: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

    .text_heading_isvarsel p {
        margin: 0px;
        padding: 5px;
        font-size: medium;
        color: #1173B8;
    }

.text_region_isvarsel {
    width: 100%;
    border: 1px solid #e2e2e2;
    padding: 5px;
    min-height: 100px;
}

    .text_region_isvarsel img {
        width: 100%;
        margin: 10px 0px 5px 0px;
    }

.kontakt_isvarsel {
    width: 100%;
    border: 1px solid #e2e2e2;
    padding: 5px;
    margin: 20px 0px 0px 0px;
}

/*-------------------------------------------------------------------------------------
    Vindu for istabell/isvarsler.
  -------------------------------------------------------------------------------------*/
.iceforecast {
    --iceforecast_background_color: white;
    --iceforecast_dato_color: #00729c;
    --iceforecast_dato_background_color: #F2F2F2;
    --iceforecast_dato_font_size: medium;
    --iceforecast_text_color: #1173B8;
    --iceforecast_table_heading_color: #7C6B6A;
    --iceforecast_table_text_color: #767676;
    --iceforecast_table_background_color: white;
    --iceforecast_table_heading_background_color: #F2F2F2;
    --iceforecast_table_border_color: #E2E2E2;
    --iceforecast_font_size_small: 0.7em;
    --iceforecast_font_size_medium: 0.8em;
    --iceforecast_font_size_large: 1.0em;
    display: block;
    width: 100%;
    background-color: var(--iceforecast_background_color);
    border: none;
    color: var(--iceforecast_text_color);
    font-size: var(--iceforecast_font_size_small);
    text-align: left;
    vertical-align: bottom;
    padding: 0px;
    margin: 20px 0px 0px 0px;
    overflow: auto;
}

.iceforecast table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--iceforecast_table_background_color);
    text-align: left;
}

    .iceforecast td {
        border: 1px solid var(--iceforecast_table_border_color);
        font-size: var(--iceforecast_table_font_size);
        padding: 0px;
        margin: 0px;
    }

        .iceforecast td img {
            max-width: 40px;
        }

    .iceforecast .dato {
        color: var(--iceforecast_dato_color);
        font-weight: normal;
        font-size: var(--iceforecast_dato_font_size);
        background-color: var(--iceforecast_dato_background_color);
        padding: 5px 5px 5px 5px;
    }

    .iceforecast .luft {
        border: none;
        background-color: var(--iceforecast_background_color);
        font-size: 4px;
        max-height: 6px;
        min-height: 6px;
    }

    .iceforecast .overskrift {
        color: var(--iceforecast_table_heading_color);
        font-weight: 600;
        background-color: var(--iceforecast_table_heading_background_color);
        vertical-align: top;
        padding: 5px 5px 5px 5px;
    }

    .iceforecast .symbol_celle {
        text-align: center;
        vertical-align: middle;
        padding-top: 5px;
        padding-right: 3px;
        padding-bottom: 5px;
        padding-left: 3px;
    }

    .iceforecast .kol1 {
        text-align: left;
        min-width: 38px;
        max-width: 38px;
        width: 38px;
        vertical-align: middle;
    }

    .iceforecast .kol2 {
        text-align: center;
        width: auto;
    }

    .iceforecast .icecondition_symbol {
        width: 60px;
        vertical-align: middle;
    }

    .iceforecast .ingen {
        text-align: center;
        vertical-align: middle;
        background-color: var(--iceforecast_background_color);
    }

@media only screen and (min-width: 400px) {
    .iceforecast {
        font-size: var(--iceforecast_font_size_medium);
    }

    .iceforecast .kol1 {
        min-width: 48px;
        max-width: 48px;
        width: 48px;
    }

    .iceforecast .symbol_celle {
        padding-right: 5px;
        padding-left: 5px;
    }

    .iceforecast td img {
        max-width: 50px;
    }
}

@media only screen and (min-width: 509px) {
    .iceforecast td img {
        max-width: 60px;
    }
}

@media only screen and (min-width: 640px) {
    .iceforecast {
        font-size: var(--iceforecast_font_size_large);
    }

    .iceforecast .kol1 {
        min-width: 67px;
        max-width: 67px;
        width: 67px;
    }

    .iceforecast .symbol_celle {
        padding-right: 15px;
        padding-left: 15px;
    }
}
