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


:root {
    --main-color: #00204E;
    --main-color2: #3376B6;
    --main-color-buttons: #00204E;
    --main-color-buttons-2: #3376B6;
    --main-color-buttons-hover: #284D70;
}


html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    /*jf 230822 bytt till Lato, tydligen the shit enl. grafikern Cecilia*/
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    /*color: #00204E;*/
    /*color: var(--main-color);*/
    padding: 5px;
    /*height: 100vh;*/
    /*max-height: 100vh;*/
}


h1:focus {
    outline: none;
}
h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--main-color);
}

.icon-history:before {
    content: url('https://api.iconify.design/material-symbols/manage-history.svg?color=#00204E');
 
}
.icon-service:before {
    content: url('https://api.iconify.design/mdi/account-wrench.svg?width=48&height=48');

}

.icon-linjett:before {
    content: url('https://www.linjett.se/uploads/2019/11/linjett-logotyp-pos.svg');
    height:50px;
    width:50px;
}


.block-first-page {
    flex: 1; /* Make each block take up equal width within the container */
    padding: 0px;
    /*margin: 20px;*/
    
    /* Add space between the blocks */
}
.container-first-page {
    display: flex; /* Use flexbox to arrange items horizontally */
    justify-content: space-between; /* Add space between the blocks */
    margin-right: 0px;
    column-gap: 50px;
}

/*.picture-dyvik {*/
    /* The image used */
    /*background-image: url("media/dyvik.png");*/
    /* Set a specific height */
    /*min-height: 400px;
    max-height: 400px;
    min-width: 50px;*/
    /* Create the parallax scrolling effect */
/*    background-attachment: fixed;*/
    /*background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.picture-rosattra {*/
    /* The image used */
    /*background-image: url("media/rosattra.png");*/
    /* Set a specific height */
    /*min-height: 400px;
    max-height: 400px;
    min-width: 50px;*/
    /* Create the parallax scrolling effect */
    /*    background-attachment: fixed;*/
    /*background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}*/

.picture-frontpage {
    /* The image used */
   
    /* Set a specific height */
    min-height: 400px;
    max-height: 400px;
    min-width: 50px;
    /* Create the parallax scrolling effect */
    /*    background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.picture-contact{
    /* The image used */
    /* Set a specific height */
    min-height: 1000px;
    max-height: 400px;
    min-width: 50px;
    /* Create the parallax scrolling effect */
    /*    background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size:auto;
}

.picture-login {
    background-image: url("media/login.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


a, .btn-link {
    /*color: #0071c1;*/
    color: var(--main-color-buttons);
    text-decoration: none;
}


.btn-primary {
    color: #fff;
    /*background-color: #1b6ec2;*/
    background-color: var(--main-color-buttons);
    border-color: #1861ac;
}

    .btn-service 
    {
        width: 100px;
    }

    .btn-service-fit-text 
    {
        width: fit-content;
        padding: 5px 15px;
    }



    .square-service-red 
    {
        background-color: #EF5350;
        width: 4cm;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .square-service-green 
    {
        background-color: #66BB6A;
        width: 4cm;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .square-service-orange 
    {
        background-color: #FFA726;
        width: 4cm;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }


    .padding-table-columns 
    {
        /*font-size: 12px;*/
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

        .padding-table-columns td
        {
            padding: 20px 20px 0 0; /* Only right padding*/
            float: left;
            align-items: center;
            max-width: 100%;
        }


    /*.table td:first-child {
    width: 50px; 
    border-bottom:none;    
    border-right-width: 2px;        
    border-color: black;
}*/

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
        /*box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;*/
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.1rem;
        background-color: rgb(5, 39, 103);
    }

    .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.1rem;
        /*background-color: rgb(5, 39, 103);*/
        background-color: transparent;
    }

    .form-check-input:checked {
        background-color: rgb(5, 39, 103);
    }

    .color-site-green {
    }

    /*.form-select option {
    background-color: rgb(5, 39, 103)
}

.form-select option:hover {*/
    /*optional rendered */
    /*background-color: green;
}

.form-select option:checked {*/
    /*background-color: red;*/
    /*}
.form-select:focus>option:checked {
    background-color: red;
}*/
    /*.form-select:focus {*/
    /*background-color: rgb(5, 39, 103);*/
    /*}*/
    /*.form-select:where(:hover) {*/
    /*background-color: rgb(5, 39, 103);*/
    /*}*/
    /*.form-select:hover {*/
    /*background-color: rgb(5, 39, 103);*/
    /*}*/

.btn:hover {
    /*background-color: rgb(5, 39, 103);*/
    background-color: var(--main-color-buttons-hover);
}

    .content {
        padding-top: 1.1rem;
    }

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

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }

    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255,255,255);
    }



    #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;
        }

   .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."
    }

/* Divs */
.boatvalheadling {
    position: fixed;
    /*bottom: 65px;*/
    
    max-width: 1200px;
    background-color: #FFF;
}

.boatvalbuttons {
    position: fixed;
    bottom: 65px;
    /*top: 72px;*/
    /*z-index: 999;*/ /*So that it is not under the other elements */
    max-width: 1200px;
    background-color: #FFF;
}

    .service {
        /*top: 120px;*/
        /*padding: 30px 0px 0px 0px;*/        
        max-height: 70vh;
        /*overflow:scroll;*/
    }

    .boat {
        /*max-width: 600px;*/
    }

        .boat.servicehuv {
            /*border-radius: 5px;*/
            border: 0px solid;
            border-color: gray;
            margin: 4px 2px 4px 2px;
            background-color: ghostwhite;
            padding: 40px;
            /* padding: 10px 10px 2px 10px;*/
            max-width: 600px;
            box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
        }

        .boat.boathuv {
            /*border-radius: 5px;*/
            border: 0px solid;
            border-color: gray;
            margin: 4px 2px 4px 2px;
            background-color: ghostwhite;
            /*padding: 10px 10px 2px 10px;*/
            padding: 40px;
            max-width: 600px;
            box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
        }

        .boat.boatval {
            /*border-radius: 5px;*/
            border: 0px solid;
            border-color: gray;
            margin: 4px 2px 4px 2px;
            background-color: ghostwhite;
            /*padding: 10px 10px 2px 10px;*/
            padding: 40px;
            box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
        }

    .container.boatjob {
        border-radius: 5px !important;
        margin: 4px 0px 4px 0px;
    }


@media (max-width: 768px) {
    .container-first-page {
        flex-direction: column; /* Stack blocks vertically */
        align-items: stretch; /* Stretch blocks to fill container width */
      
    }

    .block-first-page {
        flex: none; /* Disable equal width; blocks will take full container width */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 10px; /* Add space below each block */
        
    }


}

@media (max-width:640px) {
    :root {
        --main-color-buttons-hover: var(--main-color-buttons);
    }
}

    /*.boatvalbuttons {
    left: 0;
    right: 0;
    position: fixed;
    bottom: 35px;
    z-index: 300;
    box-shadow: 9px 1px 10px 0px #242424;
    padding-bottom: 5px;
    background-color: #ffffff;
}*/