/*************************************************
******  Från StatisticonShared projektet        ******
******  Kopieras automatiskt in i projekten ******
******  Ändringar görs i StatisticonShared      ******
**************************************************/

/*************** BUTTONS ***************/
.btn-primary-inverted {
    background-color: var(--studios-blue);
    border-color: var(--studios-blue);
    color: white;
}

    .btn-primary-inverted:hover{
        background-color: var(--STAT-lightblue);
        border-color: var(--STAT-lightblue);
        color: white;
    }

.btn-primary {
    background-color: var(--STAT-lightblue);
    border-color: var(--STAT-lightblue);
    color: white;
}

    .btn-primary:hover {
        background-color: var(--studios-blue);
        border-color: var(--studios-blue);
        color: white;
    }

.btn-success {
    background-color: var(--STAT-green);
    border-color: var(--STAT-green);
    color: white;
}

    .btn-success:hover {
        background-color: var(--STAT-lightgreen);
        border-color: var(--STAT-lightgreen);
        color: white;
    }

.btn-success-inverted {
    background-color: var(--STAT-lightgreen);
    border-color: var(--STAT-lightgreen);
    color: white;
}

    .btn-success-inverted:hover {
        background-color: var(--STAT-green);
        border-color: var(--STAT-green);
        color: white;
    }

button.multiselect {
    max-height: 180px;
    overflow: auto;
    font-size: 14px;
    text-align: left;
    border-radius: 0;
}

.stat-dropdown {
    font-family: var(--stat-font-family);
    font-size: 14px !important;
    height: 34px;
    -webkit-appearance: menulist !important;
    border-radius: 0 !important;
    cursor: pointer;
    border: none !important;
}

.btn-sekom-info {
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 0;
    font-size: 12px;
    border-radius: 50%;
    margin: 3px;
    line-height: normal;
}

/*************** Statistics circles ***************/
.circle-sm, .circle-lg, .circle-sm-vit {
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.circle-sm {
    position: relative;
    height: 150px;
    width: 150px;
}

    .circle-sm img {
        height: 100%;
        width: 100%;
    }

.circle-sm-vit {
    height: 100px;
    width: 100px;
    padding-bottom: .8rem
}

/* Rounded Bootstrap Buttons */
.btn-round {
    font-size: 1rem;
    padding: .8rem 4rem .8rem 4rem;
    max-width: 20rem;
    border-radius: 40px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: white;
}

/************** Bootstrap Breakpoints Reference *************
    --bs-xs: 0;
    --bs-sm: 576px;
    --bs-md: 768px;
    --bs-lg: 992px;
    --bs-xl: 1200px;
    --bs-xxl: 1400px

*/

/* Small devices (landscape phones, 576px and down)*/
/*@media (min-width: 576px) {    

}*/

/* Medium devices (tablets, 768px and down)*/
@media (min-width: 768px) {
    .navbar-brand img {
        width: 200px ;
    }
}

/* Large devices (desktops, 992px and up)*/
/*@media (min-width: 992px) {

}*/

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    #navbarCollapseContent {
        overflow-y: unset !important;
        max-height: unset !important;
    }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
/*@media (min-width: 1400px) {

}*/

/***************** LINKS **************/
.link-first {
    text-decoration: none;
    color: var(--darkgrey);
}

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

.link-decoration-simple {
    text-decoration: none;
    color: var(--darkgrey);
}

    .link-decoration-simple:hover {
        text-decoration: underline !important;
        color: var(--darkgrey);
    }

.link-decoration-underline {
    text-decoration: underline;
    color: var(--darkgrey);
}

    .link-decoration-underline:hover {
        text-decoration: none !important;
        color: var(--darkgrey);
    }

/*********** LOGIN INPUT LABEL *********/
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
    background-color: transparent;
}

.form-floating > .form-control:not(:-ms-input-placeholder) ~ label::after {
    background-color: transparent;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}