/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/

html, body {
    font-family: 'Lato',sans-serif;
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("fontawesome/webfonts/fa-light-300.eot");
    src: url("fontawesome/webfonts/fa-light-300.woff2") format("woff2"), url("fontawesome/webfonts/fa-light-300.woff") format("woff"), url("fontawesome/webfonts/fa-light-300.ttf") format("truetype"), url("fontawesome/webfonts/fa-light-300.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("fontawesome/webfonts/fa-regular-400.eot");
    src: url("fontawesome/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("fontawesome/webfonts/fa-regular-400.woff") format("woff"), url("fontawesome/webfonts/fa-regular-400.ttf") format("truetype"), url("fontawesome/webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("fontawesome/webfonts/fa-solid-900.eot");
    src: url("fontawesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("fontawesome/webfonts/fa-solid-900.woff") format("woff"), url("fontawesome/webfonts/fa-solid-900.ttf") format("truetype"), url("fontawesome/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    align-items: center;
    z-index: 1;
}

.sidebar .top-row {
    margin: 0;
}

.main {
    flex: 1;
}

    .main .top-row {
        /*background-color: #f7f7f7;*/
        border-bottom: 1px solid #d6d5d5;
        margin: 0;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.

.navbar-toggler .icon-bar {
    background-color: #888;
}

.navbar-toggler .icon-bar {
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 3px;
    margin: 5px 5px;
}

.navbar-static-top.navbar .navbar-nav > .divider-vertical {
    height: 21px;
    margin: 0 4px;
    margin-top: 14.5px;
    border-right: 1px solid #fff;
}


.nav-border {
    border-bottom: 1px solid rgba(229, 229, 229, 0.54);
}

.sidebar {
    background-color: #002739;
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
    }

        /*        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }*/

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                color: white;
            }

            .sidebar .nav-item a:hover {
                color: white;
            }

a.nav-link.text-dark.active {
    background-color: rgba(0,0,0,0.25) !important;
    color: black;
}

a.nav-link.text-dark:hover {
    background-color: rgba(0,0,0,0.1) !important;
    color: black;
}

.content {
    padding-top: 1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #c1646c;
}

.validation-message {
    color: #c1646c;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}


.dropdown-link a {
    position: relative;
    cursor: pointer;
}

    .dropdown-link a:before {
        content: "\f077";
        font-family: "Font Awesome 6 Pro";
        font-weight: 400;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .7s ease;
    }

.dropdown-link.collapsed a:before {
    transform: translateY(-50%) rotate(180deg);
}

.navbar-collapse > div + div {
    display: none;
}

@media screen and ( max-width: 798px) {
    #NavMenu .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

        #NavMenu .navbar-collapse > div {
            width: 225px;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }

            #NavMenu .navbar-collapse > div + div {
                width: 100%;
                display: block;
                background: transparent;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }

        #NavMenu .navbar-collapse.collapsing {
            left: -200px;
            transition: height 0s ease;
        }

        #NavMenu .navbar-collapse.show {
            left: 0;
            transition: all 300ms ease;
        }

    #NavMenu .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: all 300ms ease;
    }
}

.requirements-badge,
.status-badge-right,
.status-badge {
    position: absolute;
    top: 0;
    left: -10px;
    transform: translateY(-50%);
    z-index: 1;
}

.status-badge-right {
    right: -10px;
    left: auto;
}

.icon-badge-left,
.icon-badge-right {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%) translateX(-50%);
    font-size: 1em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    padding: .25em .25em;
}

.icon-badge-right {
    left: unset;
    right: 0;
    transform: translateY(-50%) translateX(50%);
}

.requirements-badge {
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(50%);
    font-size: 1em;
    padding: .25em .4em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

.nav-item .requirements-badge {
    top: 0;
    transform: translateY(-33%) translateX(33%);
}

.card.text-link-card-hover:hover .text-link {
    text-decoration: underline;
}

.blazored-modal {
    background-color: #F9FAFB !important;
}

    .blazored-modal.alert-danger {
        background-color: #eac9c7;
    }

    .blazored-modal.p-0 .blazored-modal-content {
        padding: 0;
        margin: -1px;
    }

.blazor-model-header {
    /*margin: -29px -29px 15px -29px;*/
    position: relative;
    padding: 15px 44px 15px 29px;
}

    .blazor-model-header button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        border: none;
        background-color: transparent;
    }

.blazor-model-footer {
    /*margin: 15px -29px -29px -29px;*/
    position: relative;
    padding: 10px;
    text-align: right;
}

    .blazor-model-footer p {
        margin: 0;
        padding-left: 19px;
        top: 50%;
        position: absolute;
        transform: translateY(-50%);
    }

.blazored-modal {
    min-width: 90%;
}

    .blazored-modal table tbody.overflow-auto {
        max-height: calc(100vh - 400px);
    }


@media screen and ( min-width: 640px) {
    .blazored-modal {
        min-width: 500px;
    }
}


.blazored-modal-header {
    padding-bottom: 0 !important;
    margin-bottom: .75rem;
    position: relative;
}

    .blazored-modal-header .blazored-modal-close {
        position: absolute;
        padding: 0;
        margin: 0;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
    }

.modal-fullscreen {
    height: 100%;
    width: 100%;
}

.nav-tabs .nav-link.rounded-top-lg,
.rounded-top-lg.nav-link {
    border-top-left-radius: .50rem !important;
    border-top-right-radius: .50rem !important;
}

.card .card-header.alert-secondary .nav-tabs .nav-link {
    border-bottom: 1px solid rgba(0,0,0,.125)
}

    .card .card-header.alert-secondary .nav-tabs .nav-link.active {
        border-bottom: 1px solid #fff;
    }

        .card .card-header.alert-secondary .nav-tabs .nav-link.active.bg-light {
            border-bottom: 1px solid #E9ECEF;
        }


.card .card-header {
    position: relative;
}

    .card .card-header .btn-refresh {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
    }

.card-header-tabs .nav-link .tab-label {
    display: inline-flex;
}

@media screen and ( max-width: 1000px) {
    .card-header-tabs .nav-link .tab-label {
        max-width: 0;
        height: 24px;
        overflow: hidden;
        transition: ease all .3s;
    }
}

@media screen and ( min-width: 500px) and ( max-width: 1000px) {
    .card-header-tabs .nav-link.active .tab-label,
    .card-header-tabs .nav-link:hover .tab-label {
        max-width: 200px;
        transition: ease all 1s;
    }
}

@media screen and ( max-width: 500px) and ( min-width: 400px) {

    .card-header-tabs .nav-link:hover .tab-label {
        max-width: 200px;
        transition: ease all 1s;
    }
}


.form-control::-webkit-input-placeholder {
    color: #C3C9CF;
}

.form-control:-moz-placeholder {
    color: #C3C9CF;
}

.form-control::-moz-placeholder {
    color: #C3C9CF;
}

.form-control::placeholder {
    color: #C3C9CF;
}

.form-control:-ms-input-placeholder {
    color: #C3C9CF;
}


.form-control.readonly {
    background-color: #e9ecef;
    opacity: 1;
    min-height: calc(1.5em + 0.75rem + 2px);
    height: auto;
}

div.collapsed[data-toggle="collapse"] .svg-inline--fa[class*="fa-chevron-"] {
    transform: rotate(-180deg);
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-default {
    cursor: default;
}

body .rz-tabview-nav .rz-tabview-selected {
    border-top-color: #1d508f;
}

body .rz-state-active a[role='tab'] {
    color: #1d508f;
}

body .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    border-top-color: #1d508f;
}

    body .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) a {
        color: #1d508f;
    }

body .rz-datatable-thead th {
    background-color: #C0CEE0;
}

    body .rz-datatable-thead th .rz-column-title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
    }

body .rz-datatable-thead .rzi, body .rz-datatable-thead .rz-datatable-loading-content .rzi-circle-o-notch, body .rz-datatable-loading-content .rz-datatable-thead .rzi-circle-o-notch, body .rz-datatable-thead .rz-datatable-header .rzi-plus, body .rz-datatable-header .rz-datatable-thead .rzi-plus, body .rz-datatable-thead .rz-sortable-column .rzi-grid-sort, body .rz-sortable-column .rz-datatable-thead .rzi-grid-sort, body .rz-datatable-thead .rz-menuitem .rz-menuitem-icon, body .rz-menuitem .rz-datatable-thead .rz-menuitem-icon, body .rz-datatable-thead .rz-fileupload-row .rz-button .rzi-close, body .rz-datatable-thead .rz-fileupload-row .rz-paginator-element .rzi-close, body .rz-fileupload-row .rz-button .rz-datatable-thead .rzi-close, body .rz-fileupload-row .rz-paginator-element .rz-datatable-thead .rzi-close, body .rz-datatable-thead .rz-fileupload-row .rz-button .rzi-times, body .rz-datatable-thead .rz-fileupload-row .rz-paginator-element .rzi-times, body .rz-fileupload-row .rz-button .rz-datatable-thead .rzi-times, body .rz-fileupload-row .rz-paginator-element .rz-datatable-thead .rzi-times, body .rz-datatable-thead .rz-fileupload-row .rz-button .rz-icon-trash, body .rz-datatable-thead .rz-fileupload-row .rz-paginator-element .rz-icon-trash, body .rz-fileupload-row .rz-button .rz-datatable-thead .rz-icon-trash, body .rz-fileupload-row .rz-paginator-element .rz-datatable-thead .rz-icon-trash, body .rz-datatable-thead .rz-datatable .rzi-chevron-circle-right, body .rz-datatable .rz-datatable-thead .rzi-chevron-circle-right, body .rz-datatable-thead .rz-datatable .rzi-chevron-circle-down, body .rz-datatable .rz-datatable-thead .rzi-chevron-circle-down {
    color: #333;
}

body .rz-sortable-column .rzi-sort {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 700;
    margin-left: 10px;
}

    body .rz-sortable-column .rzi-sort:before {
        content: "\f0dc";
    }

body .rz-sortable-column .rzi-sort-asc:before {
    content: "\f0de";
}

body .rz-sortable-column .rzi-sort-desc:before {
    content: "\f0dd";
}

body .rz-datatable-data td .rz-cell-data {
    color: #333;
    font-size: 1rem;
}

div.rz-datatable-scrollable-body > div > table > tbody > tr {
    transform: rotate(0);
}

body .rz-datatable-odd > td {
    background-color: #DDE5EF;
    border: 1px solid #DDE5EF;
}

@media (max-width: 798px) {
    body .rz-datatable-data tr td.no-header-column-left .rz-column-title,
    body .rz-datatable-data tr td.no-header-column .rz-column-title {
        display: none !important;
    }

    body .rz-datatable-data .img-avatar {
        width: 45px;
        height: 45px;
    }

    body .rz-datatable-data tr td.no-header-column .rz-cell-data {
        text-align: center;
    }

    body .rz-datatable-data tr td.no-header-column-left .rz-cell-data {
        text-align: left;
    }

    body .rz-datatable-reflow td:not(:first-child):not(:last-child) {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    body .rz-datatable-reflow td:last-child {
        padding-top: 2px;
    }

    body .rz-datatable-reflow .rz-datatable-odd > td .rz-column-title,
    body .rz-datatable-reflow .rz-datatable-even > td .rz-column-title {
        float: left;
        margin-right: 10px;
    }

    body .rz-datatable-data td:not(.no-header-column):not(.no-header-column-left) .rz-cell-data {
        margin-left: 110px;
        font-weight: 700;
    }

    div.rz-datatable-scrollable-body > div > table > tbody > tr {
        margin-bottom: 10px;
    }

    body rz-datatable table {
        width: calc(100vw - 3.75em)
    }

    .boat-public-info {
        max-height: 150px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .main .rz-tabview-panels .rz-tabview-panel {
        padding: 4px;
    }
}

body .rz-dialog-wrapper {
    left: 0;
}

    body .rz-dialog-wrapper .rz-dialog {
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }

.blazored-modal {
    position: relative;
}

.modal-close {
    position: absolute;
    top: -12px;
    right: -12px;
    height: 36px;
    width: 36px;
    color: #333;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    transition: all .3s ease;
}

    .modal-close:hover {
        border-color: #333;
        box-shadow: 0 0 5px #fff;
    }

    .modal-close:after {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        content: "\f00d";
        font-family: "Font Awesome 6 Pro";
        font-weight: 400;
        color: #333;
        font-size: 21px;
        line-height: 21px;
    }

/* Upgrading borders so I can add depending on the view*/
@media (min-width: 640px) {
    .border-sm {
        border: 1px solid #dee2e6 !important;
    }

    .border-sm-top {
        border-top: 1px solid #dee2e6 !important;
    }

    .border-sm-right {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-sm-bottom {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .border-sm-left {
        border-left: 1px solid #dee2e6 !important;
    }

    .border-sm-0 {
        border: 0 !important;
    }

    .border-sm-top-0 {
        border-top: 0 !important;
    }

    .border-sm-right-0 {
        border-right: 0 !important;
    }

    .border-sm-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-sm-left-0 {
        border-left: 0 !important;
    }
}

@media (min-width: 798px) {
    .border-md {
        border: 1px solid #dee2e6 !important;
    }

    .border-md-top {
        border-top: 1px solid #dee2e6 !important;
    }

    .border-md-right {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-md-bottom {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .border-md-left {
        border-left: 1px solid #dee2e6 !important;
    }

    .border-md-0 {
        border: 0 !important;
    }

    .border-md-top-0 {
        border-top: 0 !important;
    }

    .border-md-right-0 {
        border-right: 0 !important;
    }

    .border-md-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-md-left-0 {
        border-left: 0 !important;
    }
}

@media (min-width: 1000px) {
    .border-lg {
        border: 1px solid #dee2e6 !important;
    }

    .border-lg-top {
        border-top: 1px solid #dee2e6 !important;
    }

    .border-lg-right {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-lg-bottom {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .border-lg-left {
        border-left: 1px solid #dee2e6 !important;
    }

    .border-lg-0 {
        border: 0 !important;
    }

    .border-lg-top-0 {
        border-top: 0 !important;
    }

    .border-lg-right-0 {
        border-right: 0 !important;
    }

    .border-lg-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-lg-left-0 {
        border-left: 0 !important;
    }
}

@media (min-width: 1200px) {
    .border-xl {
        border: 1px solid #dee2e6 !important;
    }

    .border-xl-top {
        border-top: 1px solid #dee2e6 !important;
    }

    .border-xl-right {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-xl-bottom {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .border-xl-left {
        border-left: 1px solid #dee2e6 !important;
    }

    .border-xl-0 {
        border: 0 !important;
    }

    .border-xl-top-0 {
        border-top: 0 !important;
    }

    .border-xl-right-0 {
        border-right: 0 !important;
    }

    .border-xl-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-xl-left-0 {
        border-left: 0 !important;
    }
}