﻿@charset "UTF-8";
/* STYLES FOR FINAL IMPORT - OVERRIDES INITIAL STYLES */
/*#f8f7dc;*/
/* PURE COLOR STYLES 
------------------------------------------------------------ */
.gray {
    color: #bababa;
}

.red {
    color: #e63128;
}

.blue {
    color: #0559a2;
}

.green {
    color: #30a808;
}

.orange {
    color: #EF9D07;
}

.yellow {
    color: #f8ed70;
}

/* MISC TEXT STYLES 
------------------------------------------------------------ */
.text-bolder {
    font-weight: 900;
}

/* CUSTOM TABLE LAYOUTS
------------------------------------------------------------ */
.nss-table {
    table-layout: fixed;
    word-break: keep-all;
}

.col-auto {
    width: auto !important;
}

.col-xs {
    width: 24px;
}

.col-sm {
    width: 48px;
}

.col-md {
    width: 96px;
}

.col-lg {
    width: 192px;
}

/* VISUALIZATION STYLES
------------------------------------------------------------ */
/* Custom Display Classes to show/hide content */
.hide-xxs {
    display: inline;
}

tr.hide-xxs {
    display: table-row;
}

td.hide-xxs {
    display: table-cell;
}

th.hide-xxs {
    display: table-cell;
}

table.hide-xxs {
    display: table;
}

@media (max-width: 373px) {
    .hide-xxs {
        display: none !important;
    }
}

.display-xxs:not(.visible-xs):not(.visible-sm):not(.visible-md):not(.visible-lg) {
    display: none;
    /* for å ikke rote til bootstrap */
}

@media (max-width: 373px) {
    .display-xxs {
        display: inline;
    }

    tr.display-xxs {
        display: table-row !important;
    }

    td.display-xxs {
        display: table-cell !important;
    }

    th.display-xxs {
        display: table-cell !important;
    }

    table.display-xxs {
        display: table !important;
    }

    span.display-xxs {
        display: inline-block !important;
    }
}

.gradient-fade {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 75px;
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, white));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%);
}

/* ICON SIZES - VERIFY LATER
------------------------------------------------------------ */
.ico-wrp {
    font-size: 1.5em !important;
    margin: 0 !important;
}

@media (min-width: 360px) {
    .ico-wrp {
        font-size: 2.5em !important;
    }
}

@media screen and (min-width: 512px) {
    .ico-wrp {
        font-size: 3em !important;
    }
}

@media (min-width: 720px) {
    .ico-wrp {
        font-size: 3.5em !important;
    }
}

@media (min-width: 992px) {
    .ico-wrp {
        font-size: 4em !important;
    }
}

@media (min-width: 1220px) {
    .ico-wrp {
        font-size: 5em !important;
    }
}

/* HOVER EFFECTS
------------------------------------------------------------ */
/* oppskalerer knapp ved mouseover for å indikere valgt element */
.button-focus:hover, .page-feature:hover {
    transform: scale(1.3);
    transition: ease-in-out;
}

/* oppskalerer elementer ved mouseover for å indikere valgt element */
.article-frontpage:hover, .article-sidebar:hover, .article-list:hover, .list-group.notifications li:hover, .link-btn-wrp:hover, .document-links li:hover, .list-tags li:hover {
    transform: scale(1.02);
}

.article-frontpage.no-hover-scale:hover, .article-sidebar.no-hover-scale:hover, .article-list.no-hover-scale:hover, .list-group.notifications.no-hover-scale li:hover, .link-btn-wrp.no-hover-scale:hover, .document-links li.no-hover-scale:hover, .list-tags li.no-hover-scale:hover {
    transform: none;
}

.list-group.notifications li a {
    /* link egenskaper overstyres på notifications-knappen for at teksten skal se lik ut */
    color: unset;
    text-transform: unset;
    font-size: unset;
    line-height: unset;
    font-weight: unset;
}

    .list-group.notifications li a:focus, .list-group.notifications li a:hover {
        color: #afe1ff;
    }

/* MISC OVERRIDES (Vurdere å flytte over i common.scss)
------------------------------------------------------------ */
/* overstyrer linkfarge for description til svart (siden hele div er inkapslet i a) */
a .article-frontpage .descr,
a .article-sidebar .descr,
a .article-list .descr {
    color: black !important;
}
a.hover-underline:hover {text-decoration: underline;}

/* overstyrer marger på li element og legger disse på strong-element i stedet (for å få link på "hele knappen") */
.list-group.notifications li {
    padding: 0px 0px 0px;
}

    /* strong element overstyres for notifications for at link skal dekke hele "knappen" */
    .list-group.notifications li strong {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 0 -1px;
        padding: 20px 13px 20px;
    }
    /* strong element overstyres for notifications for at link skal dekke hele "knappen" */
    .list-group.notifications li span.item-text {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 0 -1px;
        padding: 0px 13px 20px;
        font-weight: normal;
        font-size: 14px;
    }

.popover {
    white-space: nowrap;
}

.popover-content {
    color: #000;
    font-size: 12px;
}

.modal .modal-dialog .modal-content {
    padding: 15px 15px 5px 15px;
}

@media (max-width: 359px) {
    .modal .modal-dialog .modal-content {
        font-size: 16px;
        padding: 5px 5px 5px 5px;
    }
}

.modal .modal-dialog .modal-content h4 {
    font-weight: 800;
}

@media (max-width: 359px) {
    .modal .modal-dialog .modal-content h4 {
        font-size: 16px;
        margin: 5px;
    }
}

.modal .modal-dialog .modal-content h5 {
    font-weight: 700;
}

@media (max-width: 359px) {
    .modal .modal-dialog .modal-content h5 {
        font-size: 14px;
        margin: 5px;
    }
}

.modal .modal-dialog .modal-header {
    padding: 15px 15px 5px 15px;
}

@media (max-width: 359px) {
    .modal .modal-dialog .modal-header {
        font-size: 16px;
        padding: 5px 5px 5px 5px;
    }
}

.modal .modal-dialog .modal-body {
    padding: 15px 15px 5px 15px;
}

@media (max-width: 359px) {
    .modal .modal-dialog .modal-body {
        font-size: 16px;
        padding: 5px 5px 5px 5px;
    }
}

.modal .modal-dialog .modal-body p.footnote {
    padding-top: 4px;
}

.modal .modal-dialog .modal-body#turnoverModal table tbody tr td, .modal .modal-dialog .modal-body#turnoverModal table tbody tr th {
    width: 50%;
}

.modal .modal-dialog .modal-footer {
    padding: 5px 15px 5px 15px;
}

@media (max-width: 719px) {
    .modal .modal-dialog .modal-footer {
        font-size: 16px;
        text-align: center;
    }
}

@media (max-width: 720px) {
    .modal .modal-dialog .modal-footer button {
        margin-left: 0px;
        font-size: 16px;
        width: 80%;
    }
}

@media (max-width: 360px) {
    .modal .modal-dialog .modal-footer button {
        font-size: 12px;
        width: 100%;
    }
}

@media (max-width: 320px) {
    .modal .modal-dialog .modal-footer button {
        font-size: 11.5px;
    }
}

#catchDetailsModalDialog {
    padding-right: 0px !important;
    overflow: hidden !important;
}

    #catchDetailsModalDialog .modal-header {
        padding: 5px;
    }

    #catchDetailsModalDialog .modal-body {
        padding: 15px 0 5px 0;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    #catchDetailsModalDialog .modal-dialog {
        overflow-y: initial !important;
    }

@media (min-width: 721px) {
    .modal-lg {
        width: 95%;
    }
}

@media (max-width: 719px) {
    div.alert {
        font-size: 14px;
        padding: 10px;
    }
}

@media (max-width: 359px) {
    div.alert {
        font-size: 12px;
        padding: 5px;
    }
}

@media (max-width: 991px) {
    div.datepicker {
        padding: 0;
    }
}

@media (min-width: 721px) {
    div.datepicker.dateonly {
        width: 170px;
        max-width: 170px;
    }

        div.datepicker.dateonly.showformat {
            width: 320px;
            max-width: 320px;
        }
}

div.datepicker.dateonly.full-width {
    width: 100%;
    max-width: none;
}

/* Sørger for at placeholder-tekst forsvinner ved fokus (klikk) i tekstbokser */
input:focus::-webkit-input-placeholder {
    color: transparent !important;
}

input:focus:-moz-placeholder {
    color: transparent !important;
}

/* FF 4-18 */
input:focus::-moz-placeholder {
    color: transparent !important;
}

/* FF 19+ */
input:focus:-ms-input-placeholder {
    color: transparent !important;
}

/* IE 10+ */
/* IFRAME STYLES 
------------------------------------------------------------ */
.iframe-holder {
    position: relative;
    height: 0;
    overflow: hidden;
    width: auto;
}

@media (min-width: 360px) {
    .iframe-holder {
        padding-bottom: 85%;
    }
}

@media (min-width: 720px) {
    .iframe-holder {
        padding-bottom: 75%;
    }
}

@media (min-width: 992px) {
    .iframe-holder {
        padding-bottom: 56.25%;
    }
}

@media (min-width: 1220px) {
    .iframe-holder {
        padding-bottom: 82.5%;
    }
}

.iframe-holder iframe {
    background-color: #edf3f8;
    position: absolute;
    align-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-holder.currency {
    padding-bottom: 122.5%;
}

@media (min-width: 360px) {
    .iframe-holder.currency {
        padding-bottom: 117%;
    }
}

@media (min-width: 720px) {
    .iframe-holder.currency {
        padding-bottom: 83.3%;
    }
}

@media (min-width: 992px) {
    .iframe-holder.currency {
        padding-bottom: 84.5%;
    }
}

@media (min-width: 1220px) {
    .iframe-holder.currency {
        padding-bottom: 82.5%;
    }
}

.iframe-holder.species {
    padding-bottom: 85%;
}

@media (min-width: 360px) {
    .iframe-holder.species {
        padding-bottom: 53%;
    }
}

@media (min-width: 720px) {
    .iframe-holder.species {
        padding-bottom: 52.428%;
    }
}

@media (min-width: 992px) {
    .iframe-holder.species {
        padding-bottom: 33%;
    }
}

@media (min-width: 1220px) {
    .iframe-holder.species {
        padding-bottom: 31%;
    }
}

iframe.embedded-article-video {
    width: 300px;
    height: 168px;
}

@media (min-width: 321px) {
    iframe.embedded-article-video {
        width: 320px;
        height: 180px;
    }
}

@media (min-width: 361px) {
    iframe.embedded-article-video {
        width: 340px;
        height: 191px;
    }
}

@media (min-width: 561px) {
    iframe.embedded-article-video {
        width: 500px;
        height: 281px;
    }
}

@media (min-width: 720px) {
    iframe.embedded-article-video {
        width: 680px;
        height: 382px;
    }
}

@media (min-width: 992px) {
    iframe.embedded-article-video {
        width: 620px;
        height: 348px;
    }
}

@media (min-width: 1220px) {
    iframe.embedded-article-video {
        width: 770px;
        height: 443px;
    }
}

/* EMBEDDED PDF VIEWER
------------------------------------------------------------ */
.pdfobject-container {
    height: 700px;
    /* 700px = ca en side */
    width: auto;
}

/*
.pdfobject { border: 1px solid #666; }
*/
@media (min-width: 979px) {
    .pdfobject-container {
        /* Sette begrensning på PDF størelse på vanlig site? */
    }
}

/* MISC STYLES (Må rydde her - sikkert mye som ikke lengre brukes)
------------------------------------------------------------ */
@media (min-width: 1220px) {
    .expandable-description-element {
        max-width: 800px;
    }
}

@media (max-width: 719px) {
    .expandable-description-element {
        text-align: center;
    }
}

.expandable-description-element i {
    color: #1e6aab;
}

.expandable-with-border-look {
    background-color: #fff;
    padding: 5px 10px 5px 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}

    .expandable-with-border-look .expandable-description-header span {
        width: 100%;
        font-size: 22px;
    }

        .expandable-with-border-look .expandable-description-header span > i:last-child {
            float: right;
        }

    .expandable-with-border-look h2 {
        margin-bottom: 8px;
    }

        .expandable-with-border-look h2 span {
            background: #fff;
        }

    .expandable-with-border-look .message-folder {
        margin-bottom: 20px;
        width: 100%;
    }

        .expandable-with-border-look .message-folder:first-child {
            margin-top: 10px;
        }

.expandable-description-header {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.expandable-description-text {
    display: none;
    text-align: left;
}

.expandable-archive-folder > ul {
    margin-left: 4px;
    width: 100%;
}

    .expandable-archive-folder > ul li {
        margin-bottom: 5px;
    }

.expandable-archive-folder-header {
    margin-left: 2px;
    margin-bottom: 4px;
}

    .expandable-archive-folder-header i {
        padding: 2px;
    }

    .expandable-archive-folder-header span {
        font-weight: 700;
    }

/*
.message-folder {

	h2{
		margin: 0 0 14px;
    }
}
*/
.hidden-elements {
    display: none;
}

.forbehold {
    margin-top: 10px;
}

    .forbehold > * {
        padding: 5px;
    }

.forbehold-title {
    font-weight: bolder;
}

.action-row {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}

    .action-row * {
        padding: 2px;
    }

.environment-marker {
    position: absolute;
    top: 20px;
    left: 80px;
    font-size: 20px;
    font-weight: bold;
    color: darkseagreen;
}

@media (min-width: 720px) {
    .environment-marker {
        top: 100%;
        font-size: 30px;
        left: 35%;
        transform: translateX(-35%);
    }
}

@media (min-width: 992px) {
    .environment-marker {
        top: 60px;
        font-size: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (min-width: 1220px) {
    .environment-marker {
        top: 54px;
        font-size: 30px;
        left: 50%;
    }
}

.error-page {
    height: 100%;
    text-align: center;
}

    .error-page body {
        padding-top: 50px;
        min-height: 100%;
        background: #edf3f8 !important;
    }

        .error-page body .error-container {
            height: 50%;
            padding-top: 40px;
        }

        .error-page body i {
            padding-top: 20px;
        }

@media (max-width: 719px) {
    .error-page body h1 {
        font-size: 24px;
    }
}

@media (max-width: 359px) {
    .error-page body h1 {
        font-size: 18px;
    }
}

.error-page body img {
    width: 200px;
}

#main-error {
    position: relative;
}

    #main-error:before {
        position: absolute;
        display: block;
        content: "";
        top: 7px;
        bottom: auto;
        left: 0;
        right: 0;
    }

    #main-error:before {
        background: url(../images/ribbon.svg);
        background-size: 100% 16px;
        background-position: 50% 50%;
        display: block;
        background-repeat: no-repeat;
        height: 16px;
    }

@media (min-width: 720px) {
    #main-error:before {
        height: 24px;
        background-size: 100% 24px;
        top: 17px;
    }
}

@media (min-width: 992px) {
    #main-error:before {
        height: 42px;
        background-size: 100% 42px;
        top: 3px;
    }
}

@media (min-width: 721px) {
    .vessel-quota-form #vesselName {
        min-width: 400px;
    }
}

#bizzbar {
    background: #eb593c;
    width: 100%;
    text-align: center !important;
    color: #fff;
    padding: 2px;
    overflow: hidden;
    z-index: 1000;
    font-size: 14px;
    line-height: 30px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 3px solid white;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
    display: none;
}

    #bizzbar button {
        -webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
        background: #333;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px;
        color: white;
        cursor: pointer;
        font-size: 0.854em;
        margin: 0px 0px 0px 7px;
        outline: none;
        padding: 2px 10px 1px;
        position: relative;
        text-decoration: initial;
    }

        #bizzbar button:hover {
            cursor: pointer;
            background: #444;
        }

        #bizzbar button:active {
            top: 1px;
        }

.biz-close {
    width: 20px;
    height: 19px;
    bottom: 6px;
    right: 20px;
    background: url("/images/sprite-8bit.png") no-repeat 0px -247px;
    position: absolute;
}

    .biz-close:hover {
        background: url("/images/sprite-8bit.png") no-repeat 0px -228px;
        cursor: pointer;
        height: 19px;
    }

.biz-open {
    -webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
    background-image: url("/images/sprite-8bit.png");
    background-position: 0px -8px;
    background-repeat: no-repeat no-repeat;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 3px solid white;
    box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px;
    display: block;
    height: 0px;
    outline: none;
    overflow: hidden;
    padding: 80px 0px 0px;
    margin: 0px;
    position: absolute;
    right: 10px;
    top: -50px;
    width: 41px;
    z-index: 100;
    background-color: #eb593c;
    display: none;
}

    .biz-open:hover {
        background-color: #ff5a3d;
        cursor: pointer;
    }

.no-margin {
    margin: 0 0 0 0 !important;
}

.cert-search-certno {
    width: 60% !important;
    margin: 0px !important;
}

.cert-search-docsecno {
    width: 40% !important;
    margin: 0px !important;
    border-left: 1px dotted #cccccc !important;
}

    .cert-search-docsecno.not-visible {
        border-left: none !important;
    }

@media (min-width: 992px) {
    #login {
        margin-top: -46px;
    }
}

.wrong-entry {
    -moz-animation: wrong-log 1s;
    -webkit-animation: wrong-log 1s;
    animation: wrong-log 1s;
}
    .wrong-entry .form-control {
        border-top-color: #a94442;
        border-right-color: #a94442;
        border-bottom-color: #a94442;
    }
    .wrong-entry .input-group-addon {
        color: #a94442;
        border-top-color: #a94442;
        border-left-color: #a94442;
        border-bottom-color: #a94442;
    }
    
.login-error {margin-top:10px;display:none;}
    .login-error.text-danger, .login-error.text-success {
        display: block;
    }

@-moz-keyframes wrong-log {
    0%, 100% {
        left: 0px;
    }

    20%, 60% {
        left: 15px;
    }

    40%, 80% {
        left: -15px;
    }
}

@-webkit-keyframes wrong-log {
    0%, 100% {
        left: 0px;
    }

    20%, 60% {
        left: 15px;
    }

    40%, 80% {
        left: -15px;
    }
}

@keyframes wrong-log {
    0%, 100% {
        left: 0px;
    }

    20%, 60% {
        left: 15px;
    }

    40%, 80% {
        left: -15px;
    }
}

.g-recaptcha.right > div {
    margin: 15px 0 0 auto;
}

.g-recaptcha.center > div {
    margin: 15px auto 15px auto;
}
