/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 0px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 800px; /*280px; /*800px*/
}

.centertitle {
    margin-top: 30px;
}

.centrerad {
    display: table;
    margin: auto;
    align-content: center;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

.artikeltable {
    width: 100%;
    border: none; /* Tar bort ramen runt hela tabellen */
    row-gap: 20px;
}

    .artikeltable tr {
        display: block; /* Gör raderna till blockelement */
        margin-bottom: 10px; /* Lägger till mellanrum mellan raderna */
    }

    .artikeltable td {
        padding: 15px;
        text-align: left;
        vertical-align: middle;
        border: none; /* Tar bort ramen runt cellerna */
        background-color: #F7F3EA; /* Bakgrundsfärg för celler */
        color: #421112; /* Textfärg för celler */
    }

    .artikeltable tr:hover {
        background-color: #E52325; /* Bakgrundsfärg vid hover */
        color: #FFFFFF; /* Textfärg vid hover */
        transform: scale(1.03); /* Förstorar raden lite vid hover */
        box-shadow: 0 0 10px 0 rgba(229, 35, 37, 0.6); /* Skugga runt raden vid hover */
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

        .artikeltable tr:hover td {
            border-color: #E52325; /* Gränsfärg för celler vid hover */
            color: white;
            background-color: #E52325;
        }


    /* Applicera rundade hörn för första och sista td i varje rad */
    .artikeltable td:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        width: auto;
    }

    .artikeltable td:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        width: auto;
    }

    .artikeltable td:not(:last-child:first-child) {
        width: auto;
    }

.card-deck {
    margin-bottom: 60px;
    margin-top: 30px;
}

.card-body {
}

    .card-body:hover {
    }

.txtHjalp {
    /*position:relative;
    align-self:left;
    wdidth:90%;*/
}

.card {
    border: none;
    vertical-align: top;
    border-radius: 10px;
    margin: 10px;
}

    .card:hover {
        box-shadow: 0px 0px 8px rgba(66, 17, 18, 0.5); /* Horizontal offset, Vertical offset, Blur radius, Color */
    }

.sokrutawrapper {
    display: flex;
    margin: 40px auto;
}

.form-control {
    position: relative;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    /*padding: .375rem .75rem;*/
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 1px solid #ced4da; /* Tar bort standardborder */
    border-bottom: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-right: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-radius: 10px 0 0 10px; /* Rundar bara vänstra hörnen */
}

    .form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: #E52325;
        /*outline: 0;*/
        outline-color: #421112;
        box-shadow: 0 4px 8px rgba(66, 17, 18, 0.5);
        /*padding-right: 30px;*/
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #CCC;
        height: 40px;
        /*input {
    padding-right: 30px;*/ /* Ger plats för pilen/knappen */
        /*width: 100%;*/ /* Säkerställer att input tar upp hela bredden av wrapper */
        /*box-sizing: border-box;*/ /* Inkluderar padding och border i breddberäkningen */
        /*border: 1px solid #;*/
    }

.input-button {
    display: flex; /* Aktiverar flexbox */
    justify-content: center; /* Centrerar innehåll horisontellt */
    align-items: center; /* Centrerar innehåll vertikalt */
    position: relative;
    border-top: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-left: none;
    border-radius: 0 10px 10px 0; /* Rundar bara högra hörnen */
    background: transparent;
    cursor: pointer;
    outline: none;
    padding: 0 10px;
    z-index: 2;
    height: calc(1.5em + .75rem + 2px); /* Beräknar höjden baserat på textens storlek */
    text-align: center; /* Extra säkerhet för horisontell centrering */
}

    .input-button:hover {
        background-color: #E52325;/* #123456;  Lätt bakgrundsfärg när muspekaren är över */
        color: #FFFFFF; /* Sätter textfärgen till vit */
        border-color: #E52325;
        outline-color: #E52325;
    }