﻿.nav {
    width: 1030px;
    height: 142px;
    margin: auto;
}

    .nav:after {
        clear: both;
    }

.nav-btn-dark {
    /*width: 175px;*/
    position: relative;
    white-space: nowrap;
    padding: 0 28px 0 11px;
    background-color: rgb(40, 40, 40);
}

    .nav-btn-dark a,
    .nav-btn-dark span {
        color: rgb(255, 255, 255);
        padding: 10px;
    }

    .nav-btn-dark > .options-wrapper {
        padding-bottom: 5px;
        margin-left: -11px;
        background-color: rgb(40, 40, 40) !important;
    }

        .nav-btn-dark > .options-wrapper > .option {
            padding: 10px 0 3px 30px;
        }

.nav-btn-white {
    /*height: 28px;*/
    width: 275px;
    margin-top: -5px;
    padding-left: 15px;
    line-height: 28px;
    position: relative;
    white-space: nowrap;
    background-color: rgba(232, 229, 217, 0.3);
}

    .nav-btn-white > .options-wrapper {
        padding-bottom: 7px;
        margin-left: -16px;
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(40, 40, 40);
    }

        .nav-btn-white > .options-wrapper > .option {
            padding: 5px 12px 0 15px!important;
            color: rgb(40, 40, 40);
        }

.nav-btn-dark-arrow,
.nav-btn-white-arrow {
    top: 12px;
    right: 11px;
    width: 0;
    height: 0;
    margin-left: 11px;
    position: absolute;
    pointer-events: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.nav-btn-dark-arrow {
    border-top: 6px solid rgb(255, 255, 255);
}

.color-black .nav-btn-white-arrow {
    border-top: 6px solid rgb(40, 40, 40);
}

.color-white .nav-btn-white-arrow {
    border-top: 6px solid rgb(255, 255, 255);
}

.nav-btn-cancel,
.nav-btn-cancel:after {
    content: "";
    width: 11px;
    height: 2px;
    display: inline-block;
    margin-left: -12px;
    background-color: rgb(40, 40, 40);
}

.nav-btn-cancel {
    width: 64px;
    background: transparent;
}

    .nav-btn-cancel:after {
        width: 9px;
        height: 9px;
        position: absolute;
        margin: 3px 0 0 7px;
        background: url('../Img/cancel.png') 0 0 no-repeat;
    }

.nav-row {
    width: 924px;
    height: 59px;
}

.nav-session {
    margin-top: 10px;
    height: 25px;
    z-index: 1;
    position: relative;
}

.nav-links {
    padding: 17px 0 0 0;
}

.nav-links-large {
    text-align: right;
    width: 74%;
    /*padding: 27px 0 0 0;*/
    line-height: 90px;
}

    .nav-links li,
    .nav-links-large li {
        display: inline;
        list-style-type: none;
    }

    .nav-links-large li {
        padding: 15px;
        text-align: right;
    }

        .nav-links-large li:last-child {
            padding-right: 0;
        }

        .nav-links-large li a {
            text-decoration: none;
            color: inherit;
        }

.nav-list-hr {
    margin: 0 10px;
}

    .nav-list-hr:after {
        content: "";
        width: 1px;
        height: 13px;
        margin: 0 auto;
        display: inline-block;
        background-color: #949494;
    }

.nav-row-right {
    width: 57px;
    height: 124px;
    text-align: center;
    position: absolute;
    margin: 13px 0 0 967px;
}

    .nav-row-right > div {
        padding-top: 5px;
        padding-bottom: 9px;
    }

.nav-btn-lang {
    text-align: left;
    position: relative;
}

    .nav-btn-lang > .option-placeholder {
        margin-left: 2px;
    }
#rik-nav-dd > .option-placeholder {
    overflow: hidden;
}

.nav-btn-lang > .options-wrapper {
    width: 72px !important;
    line-height: 20px;
    padding: 0 0 6px 0;
    margin-left: -10px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(40, 40, 40);
    z-index: 100;
}

        .nav-btn-lang > .options-wrapper > .option {
            color: rgb(40, 40, 40);
        }

.glasses {
    width: 57px;
    height: 27px;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    background-position: 7px 11px;
    border-bottom: 1px solid #949494;
    border-top: 1px solid #949494;
    background-image: url(../Img/Prillid_Must.png);
}

.color-white .glasses {
    background-image: url(../Img/Prillid.png);
}

.nav-btn-help {
    position: absolute;
}

.color-white a {
    color: rgb(255, 255, 255);
}

.color-black a {
    color: rgb(40, 40, 40);
}
    .color-black a.color-blue {
        color: rgb(0,90,200);
    }

.rik-logo,
.rik-logo-dark {
    /*width: 238px;*/
    height: 51px;
    background-repeat: no-repeat;
    /*background-image: url(../Img/RIK_Logo_Varviline.png);*/
}
.kr-logo,
.kr-logo-dark {
    width: 26%
}
.kr-logo-eng,
.kr-logo-dark-eng {
    height: 55px
}

.menu-lang-arrow {
    top: 5px;
    right: 6px;
    height: 20px;
    width: 19px;
    margin-top: -2px;
    position: absolute;
    pointer-events: auto;
    background-image: url(../Img/lang_arrow_black.PNG);
    background-repeat: no-repeat;
}

.color-white .menu-lang-arrow {
    background-image: url(../Img/lang_arrow_white.PNG);
    background-repeat: no-repeat;
}

.nav #rik-nav-dd a {
    color: white;
}

.text-black {
    color: black;
}

    .text-black :hover {
        text-decoration: none;
    }

/* modal help popups */
.logout_modal_popup {
    width: 800px;
    position: fixed;
    float: right;
    top: 10%;
    z-index: 999;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #dee3e2;
    border-top: 1px solid #e6eae8;
    border-bottom: 1px solid #bbbdbd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ffffff;
    padding-bottom: 15px;
}

    .logout_modal_popup h1 {
        text-align: center;
        padding-bottom: -10px;
    }

.logout_modal_popup__info-sisu {
    margin-left: 15px;
    margin-right: 15px;
    text-align: justify;
    line-height: 17px;
}

.logout_modal_popup__info-header {
    height: 50px;
    background-color: #c5c5c5;
    margin-top: -1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-box-shadow: 0px 1px 1px #000;
    -moz-box-shadow: 0px 1px 1px #000;
    box-shadow: 0px 1px 1px #000;
}

.logout_modal_popup__close {
    color: #fff;
    font-size: 1.5625rem;
    font-weight: normal;
    height: 20px;
    line-height: 20px;
    padding: 0;
    margin-right: -1px;
    text-align: center;
}

.logout_modal_popup__close-outline {
    border-radius: 20px;
    background: #000;
    width: 20px;
    height: 20px;
    margin-top: 15px;
    margin-right: 30px;
    float: right;
    text-decoration: none !important;
}

.skip-content {
    padding: 4px;
    position: absolute;
    z-index: 1;
    transform: translateY(-100%);
}

.skip-content:focus {
    position:relative;
    transform: translateY(0%);
}

/* small screens TODO */
@media screen and (max-width: 40em) {
    /*body { margin: 0.0em 0; }

    .nav {
        width: .45em;
        height: .25em;
        margin: auto;
        float: left;
    }
    .nav-row .font-size-17 .font-book {
        float: left;
        width: .45em;
        height: .25em;
    }

    .nav-links-large li {
        float: left;

    }

    .nav-row-right {
        width: 57px;
        height: 124px;
        text-align: center;
        position: absolute;
        margin: 13px 0 0 367px;
        float: none;
    }

    .nav-row .float-right .nav-links {
        float: left;
    }

    .nav-row a.float-left {
   
        padding: .45em .25em;
    
    }

    .nav-links-large li {
        padding: .45em .25em;
        text-align: left;
    }*/
}


