* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

:root {
    /* Theme colors */
    --rz-primary: #003C5B;
    --rz-primary-light: #b9d5ee;
    --rz-primary-lighter: #DCECF4;
    --rz-primary-dark: #052739;
    --rz-primary-darker: #00111A;
    --rz-on-primary: var(--rz-white);
    --rz-on-primary-light: var(--rz-primary-dark);
    --rz-on-primary-lighter: var(--rz-primary);
    --rz-on-primary-dark: var(--rz-white);
    --rz-on-primary-darker: var(--rz-white);
    --rz-secondary: #00ADBB;
    --rz-secondary-light: #cfeff2;
    --rz-secondary-lighter: #E1F9FA;
    --rz-secondary-dark: #096A7B;
    --rz-secondary-darker: #033A44;
    --rz-on-secondary: var(--rz-white);
    --rz-on-secondary-light: var(--rz-secondary-dark);
    --rz-on-secondary-lighter: var(--rz-secondary-dark);
    --rz-on-secondary-dark: var(--rz-white);
    --rz-on-secondary-darker: var(--rz-white);
    /* Base colors */
    --rz-base: var(--rz-base-300);
    --rz-base-50: #F9FAFB;
    --rz-base-100: #F3F6F7;
    --rz-base-150: #F1F2F4;
    --rz-base-200: #ECEEF0;
    --rz-base-250: #E5E8EB;
    --rz-base-300: #DCE0E4;
    --rz-base-400: #bfc8cf;
    --rz-base-500: #949EA8;
    --rz-base-600: #6A7580;
    --rz-base-700: #58616A;
    --rz-base-800: #3B4249;
    --rz-base-900: #1D2125;
    --rz-base-light: var(--rz-base-200);
    --rz-base-lighter: var(--rz-base-100);
    --rz-base-dark: var(--rz-base-600);
    --rz-base-darker: var(--rz-base-800);
    --rz-on-base: var(--rz-base-900);
    --rz-on-base-light: var(--rz-base-700);
    --rz-on-base-lighter: var(--rz-base-600);
    --rz-on-base-dark: var(--rz-white);
    --rz-on-base-darker: var(--rz-white);
    /* Badge colors */
    --pts-highlight: none;
    --pts-locked-color: none;
    /* Status colors */
    --pts-working: #0BB783;
    --pts-working-dark: #08825D;
    --pts-working-light: #F3FBF9;
    --pts-working-lock: #CEF0E6;
    --pts-anchor: #3C7795;
    --pts-anchor-lock: #CCE0ED;
    --pts-anchor-light: #ECF5FB;
    --pts-inbound: #F68E14;
    --pts-inbound-lock: #FEE7CB;
    --pts-inbound-light: #FFF9F3;
    --pts-inbound-dark: #E58616;
    --pts-created: #798896;
    --pts-created-dark: #6C7B89;
    --pts-created-light: #F8F9FA;
    --pts-created-lock: #E0E4E7;
    --pts-departed: #F64E60;
    --pts-departed-light: #FFF6F7;
    --pts-departed-lock: #FDD8DB;
    --pts-closed: #434C56;
    --pts-closed-light: #F6F6F7;
    --pts-closed-lock: #D2D4D7;
    /* Theme Constants */
    --rz-root-font-size: 14px;
    --rz-body-background-color: var(--rz-white);
    /* Semantic Text */
    /* Text */
    --rz-text-h1-font-size: 2.25rem;
    --rz-text-h1-font-weight: 500;
    --rz-text-h1-letter-spacing: 0.03em;
    --rz-text-h1-margin-block-end: 0;
    --rz-text-h2-font-size: 1.875rem;
    --rz-text-h2-font-weight: 500;
    --rz-text-h2-letter-spacing: 0.03em;
    --rz-text-h2-margin-block-end: 0;
    --rz-text-h3-font-size: 1.5rem;
    --rz-text-h3-font-weight: 500;
    --rz-text-h3-letter-spacing: 0.03em;
    --rz-text-h3-margin-block-end: 0;
    --rz-text-h4-font-size: 1.25rem;
    --rz-text-h4-font-weight: 500;
    --rz-text-h4-letter-spacing: 0.03em;
    --rz-text-h4-margin-block-end: 0;
    --rz-text-h5-font-size: 1rem;
    --rz-text-h5-font-weight: 500;
    --rz-text-h5-letter-spacing: 0.03em;
    --rz-text-h5-margin-block-end: 0;
    --rz-text-h6-font-size: 0.875rem;
    --rz-text-h6-font-weight: 500;
    --rz-text-h6-letter-spacing: 0.03em;
    --rz-text-h6-margin-block-end: 0;
    --rz-text-subtitle1-font-size: 0.875rem;
    --rz-text-subtitle1-color: var(--rz-text-secondary-color);
    --rz-text-subtitle1-margin-block-end: 0;
    --rz-text-subtitle2-font-size: 0.75rem;
    --rz-text-subtitle2-color: var(--rz-text-secondary-color);
    --rz-text-subtitle2-margin-block-end: 0;
    --rz-text-body1-margin-block-end: 0;
    --rz-text-body2-margin-block-end: 0;
    --rz-text-button-text-transform: capitalize;
    --rz-text-caption-font-size: 0.625rem;
    --rz-text-caption-color: var(--rz-text-secondary-color);
    --rz-text-caption-margin-block-end: 0rem;
    /* Sizing */
    --pts-size-0: 0; /*0*/
    --pts-size-05: 0.125rem; /*1.75*/
    --pts-size-1: 0.25rem; /*3.5*/
    --pts-size-2: 0.5rem; /*7*/
    --pts-size-3: 0.75rem; /*10.5*/
    --pts-size-4: 1rem; /*14*/
    --pts-size-5: 1.5rem; /*21*/
    --pts-size-6: 2.25rem; /*31.5*/
    --pts-size-7: 3rem; /*42*/
    --pts-size-8: 3.75rem; /*52.5*/
    --pts-size-9: 4.5rem; /*63*/
    --pts-size-10: 6rem; /*84*/
    --pts-size-11: 7.5rem; /*105*/
    --pts-size-full: 100%;
    /* Progress bar */
    --rz-progressbar-background-color: var(--rz-base-300);

    /* Dialog */
    --rz-dialog-content-padding: 0;
    --rz-dialog-title-font-size: 1rem;
    --rz-dialog-title-padding-block: var(--pts-size-4) var(--pts-size-0);


    --pts-vessel-page-padding: var(--pts-size-0) var(--pts-vessel-page-x-padding) var(--pts-size-3);
    --pts-vessel-page-x-padding: var(--pts-size-7);
    --pts-vessel-page-top-padding: var(--pts-size-7);
    --pts-header-padding: var(--pts-size-0);
    --pts-sticky-header-height: 50px;
    --pts-sticky-filter-height: 56px;
}

.rz-button * {
    text-transform: capitalize !important;
    letter-spacing: 0.03em !important;
}

/* All mobile friendly sizes */
@media (1280px > width) {
    :root {
        --pts-vessel-page-padding: var(--pts-size-0) !important;
        --pts-vessel-page-top-padding: var(--pts-size-4);
    }
}

/* Phone size only */
@media (768px > width) {
    :root {
        --pts-vessel-page-x-padding: var(--pts-size-5);
        --pts-header-padding: var(--pts-size-4) var(--pts-vessel-page-x-padding) var(--pts-size-0);
    }
}

/* Tablet sizes only */
@media (1280px > width >= 768px) {
    :root {
        --pts-vessel-page-x-padding: var(--pts-size-5);
        --pts-header-padding: var(--pts-size-4) var(--pts-vessel-page-x-padding) var(--pts-size-0);
    }
}