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

:root {
    --stat-font-family: 'Helvetica Neue LT W1G', Helvetica, Arial, sans-serif;
    --bs-body-font-size: 12pt;
    --font-medium: 14pt;
    --font-small: 12pt;
    --font-tiny: 9pt;
    /*Bootstrap spacing variables ;*/
    --bs-p-1: 0.25rem;
    --bs-p-2: 0.5rem;
    --bs-p-3: 1rem;
    --bs-p-4: 1.5rem;
    --bs-p-5: 2rem;
    --bs-p-6: 3rem;
    /*Spaceing variables*/
    --s-xs: 4px;
    --s-sm: 8px;
    --s-md: 12px;
    --s-lg: 16px;
    --s-xl: 18px;
    /*Border radius variables*/
    --r-sm: 3px;
    --r-md: 6px;
    --r-lg: 12px;
}

body {
    font-family: var(--stat-font-family);
    line-height: 1.42857143;
    font-weight: 100;
}

.wrapper {
    position: relative;
    min-height: 100vh;
}

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

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

.sticky {
    position: sticky;
    top: 120px;
    align-self: start;
}

/*************** BUTTONS ***************/
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 *************/

/* 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;
}

/***************** ERROR **************/
#errorModal .modal-header {
    background-color: var(--bs-danger);
    color: white;
}

/***************** Bootstrap Custom Styles **************/
.btn-stat-round {
    font-size: 1rem;
    border-radius: 40px;
    padding: var(--bs-p-3) var(--bs-p-6) var(--bs-p-3) var(--bs-p-6);
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}