/*New Klynke Styles start*/

:root {
    --KBanner-color: #355274;/*#066ab7;*/
    --KTextPri-color: #40444f;
    --KTextSec-color: #898f9f;
    --KLinkButtonPri-color: #2d77aa;
    --KBackPri-color: #ebecef;
    --KBackSec-color: #f1f2f4;
    --KBackSel-color: #d5d7de;
    --KBackBorder-color: #cacdd5;
    --KActCreative-color: #60aa1b;
    --KActDelete-color: #d82c20;
    --KNavSelect-color: #b7c9de;
    --KNavHover-color: #dfe7f0;
    --KWorkNormal-color: #e4e8e0;
    --KWorkTask-color: #f7c27d;
    --KWorkLunch-color: #faf0e6;
    --KWork8Hours-color: #afd48d;
    --KLineBetween: #cacdd5;
    --KNormal: 400;
    --KSemiBold: 600;
    --KBold: 700;
    --KRed:#d82c20;
    --KInfoBG:#c4d3e4;
    --KInfoBR:#aavfd8;
    --KProgressBG:#9cb5d2;
    --KProgressDone:#81a1c5;
}

/*#BigProgressBar {
    background-color: var(--KProgressBG, #dc3545);*/ /* Fallback to Bootstrap danger red */
/*}*/
/*.partial-header {
    min-height: 31px;*/ /* Bootstrap 4.6 form-control-sm height */
/*}*/


.Klynke_Dropdown {
    font-size: 0.85rem;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

    .Klynke_Dropdown:focus {
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
    }

.Klynke-tableHead .Klynke_Dropdown {
    background-color: #f8f9fa; /* light gray to blend with header */
    border: 1px solid #dee2e6;
}


.header-row {
    display: flex;
    align-items: center; /* vertical alignment */
    min-height: 38px; /* adjust to match input height */
}

/*    .header-row input {
        height: 100%;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        box-sizing: border-box;
    }

    .header-row span.Klynke_h7 {
        display: flex;
        align-items: center;
        height: 100%;
    }*/


.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Makes it circular */
    background-color: #ccc; /* Fallback if image fails */
    object-fit: cover;
}

.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.spinner-green {
    color: #28a745 !important;
}
.table-row-selected {
    background-color: #898f9f !important; /* #d1ecf1 Light info background */
    color: #ffffff !important; /* White text color for better contrast */
    transition: background-color 0.3s ease-in-out;
}

.hover-bg-action {
    transition: background-color 0.2s ease-in-out;
}

    .hover-bg-action:hover {
        background-color: var(--KNavSelect-color); /* Light blue background */
        text-decoration: none; /* Ensure no underline */
        cursor: pointer;
    }



.badge-in-progress {
    background-color: #FFA500;
}

.badge-registered {
    background-color: transparent;
}


.description-column {
    white-space: normal;
    max-width: 30%;
    width: 100%;
    /*max-width: 500px;*/ /* or any appropriate max */
}

th:not(.description-column),
td:not(.description-column) {
    white-space: nowrap;
}
.ms-Icon.small {
    font-size: 8px;
}


.hover-highlight:hover {
    /* color:white;  #007bff;Optional: change text color */
    transition: background-color 0.2s ease-in-out;
    box-shadow: inset 0 -2px 0 #898f9f;
    background-color: #f1f2f4; /*Keep it the same to avoid clashing */
    cursor: pointer;
}

.chart-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 1rem; /* optional for spacing */
    box-sizing: border-box;
}


.filter-icon {
    filter: grayscale(100%) brightness(70%);
    transition: filter 0.3s ease;
}

    .filter-icon.active {
        filter: invert(35%) sepia(92%) saturate(472%) hue-rotate(88deg) brightness(95%) contrast(90%);
    }


.filtered {
    color: green !important;
}

.icon-black {
    color: black !important;
}

.hidden {
    display: none;
}

.visible {
    display: flex;
}

/* Remove blue border when clicking the button */
#toggleBtn {
    outline: none;
    text-decoration: none;
    color: black; /* Start with black text color */
}

/* Optional: Remove link styling from the Bootstrap button */
#toggleBtn:focus {
    outline: none; /* Prevent focus outline */
    box-shadow: none; /* Remove any additional box shadow */
}


.btn[aria-pressed="false"] {
    background-color: #ffffff;
    color: #495057;
    border-color: #ced4da;
    box-shadow: none;
}
.btn[aria-pressed="false"]:hover {
    background-color: #f8f9fa; /* Set background color on hover */
    color: #495057; /* Set text color on hover */
    border-color: #ced4da; /* Set border color on hover */
    box-shadow: none;
}
.btn[aria-pressed="true"] {
    background-color: #ffffff;
    color: #495057;
    outline: none; /* Remove outline */
    box-shadow: none; /* Remove box shadow */
}


.Approval-link {
    background-color: white;/* transparent;  Set the initial background color */
    transition: background-color 0.3s ease; /* Add transition for smooth effect */
}

.Approval-link:hover {
    color:white;
    background-color: darkblue; /* Set the background color on hover */
}

/* Example CSS for custom checkbox */
.custom-checkbox {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: 2px solid #ccc;
}

    .custom-checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
    }

    .custom-checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: green;
        display: none;
    }

    .custom-checkbox input[type="checkbox"]:checked + .checkmark {
        display: block;
    }


input[type='checkbox'] {
    accent-color:grey;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.scrollable-menu {
    height: auto;
    max-height: 100px;
    overflow-x: hidden;
}
/*
.table-responsive {
    overflow-y: visible !important;
}*/

body, html {
    color: var(--KTextPri-color);
   /* font-size: 16px;*/
    font-family: 'Segoe UI';
}

.Action {
    color: var(--KWork8Hours-color);
}
.navbar-brand {
    font-size: 1rem;
}
.navbar-brand img {
    height:25px;
    float: left;
    margin-right: 7px;
    /* put value of image height as your need */
}

div.dataTables_paginate {
    float: left !important;
    margin: 0;
}


.SignIn-image {
    background-image: url('../images/klynke_sign_in.png'); /* The image used */
    background-color: #cccccc; /* Used if the image is unavailable */
    height: 500px; /* You must set a specified height */
    width:400px;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

/*
 Til þess að taka sort örvarnar út þá er þetta notað    
.dataTable > thead > tr > th[class*="sort"]:after {
  content: "" !important;
}

.dataTable > thead > tr > th[class*="sort"]:before {
  content: "" !important;
}*/

/*table {
    border: none;
    font-variant-numeric: lining-nums tabular-nums;
    border-collapse: collapse;
}

.table thead th {
    border-bottom: 1px solid;
    border-top: none;
    font-size: 0.75rem; large;
    font-weight: normal;
}

td > a {
    display: block;
    width: 100%;
}
*/

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

.Klynke_h2{
 font-family:'Segoe UI';
 font-size:1.3rem;
 font-weight:var(--KSemiBold);
}
.Klynke_h3 {
    font-family:'Segoe UI';
    font-size: 1.125rem;
    font-weight: var(--KSemiBold);
}
.Klynke_h4 {
    font-family:'Segoe UI';
    font-size: 1.125rem;
    font-weight: var(--KNormal);
}
.Klynke_h5 {
    font-family: 'Segoe UI';
    font-size: 1rem;
    font-weight: var(--KNormal);
}
.Klynke_h6 {
    color:var(--KTextPri-color);
    font-family:'Segoe UI';
    font-size: 0.875rem; /*1rem;*/
    font-weight: var(--KSemiBold);
}
.Klynke_h7 {
    font-family: 'Segoe UI';
    font-size: 1.15rem;
    font-weight: var(--KSemiBold);
}
.Klynke_numeric {
    color:var(--KTextPri-color);
    font-size: 0.68rem;
    font-weight: var(--KNormal);
}
.Klynke_body_Normal {
    font-size: 0.87rem;
    font-weight: var(--KNormal);
}
.Klynke_body_Semibold {
    font-size: 0.87rem;
    font-weight: var(--KSemiBold);
}

.Klynke_Button {
    color: #ffffff;
    background-color: #6fb651; /*#5bb450;*/ /*#a8d67e;*/
    font-size: 0.87rem; /* 1rem;*/
    font-weight: var(--KNormal);
    /*border-color: #a8d67e;*/
    /* border: none;*/
    /* outline-color:*/
    /*outline: none !important;*/
    /*box-shadow: none !important;*/
}
    .Klynke_Button.disabled, .Klynke_Button:disabled {
        opacity: 0.65;
        box-shadow: none;
        background-color: #ddedd6; /*d9e2d5; ;*//* #edf8e8;*/ /*#def0dc;*/
        color: white;
    }

        .Klynke_Button:disabled:hover {
            background-color: #ddedd6; /*#d9e2d5;*/ /*#edf8e8;*/ /*#def0dc;*/
            color: white;
        }

.Klynke_Button:hover {
    background-color: #81d060;/* #7bc372;*/ /*#d4e8ac;*/
    color: white;
    /*   border-color: #d4e8ac;*/
    /*   outline: 2px red;*/
    /*border: none;*/
    /*  color: var(--KTextPri-color);*/
}

.Klynke_Button:focus {
    background-color: #3b9317; /* #489040;*/ /*#afd48d;*/
    color: white;
    /*outline-width: 1px;*/
    /*outline-style: dotted;*/
    /* outline-color: red;*/
    /* border: none;*/
    /*  color: var(--KTextPri-color);*/
    /*box-shadow: none !important;*/
    box-shadow: 0 0 0 0.12rem #447131;/* #366c30;*/
}


.Klynke_Button_Verify {
    color: white;
    background-color: #cacdd5;
    font-size: 0.87rem; /* 1rem;*/
    font-weight: var(--KNormal);
    border-color: #d4e8ac;
}

.Klynke_Button_verify:hover, Klynke_Button_verify-:focus {
    background-color: #afd48d;
    color: var(--KTextPri-color);
}




.Klynke_OutlineBox_MSG_L {
    border-color: #4b8ed1;
    border-style: solid;
    border-width: 2px;
}

.Klynke_Button_MSG_GR {
    color: white;
    font-size: 0.87rem;
    font-weight: var(--KNormal);
    background-color:#cacdd5; /* #898f9f;*/
    /*background: -webkit-linear-gradient(to bottom,#2b5aa7,#193664);*/ /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to bottom,#2b5aa7,#193664);*/ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 5px;
}

.Klynke_Button_MSG_GR:hover, Klynke_Button_MSG:focus {
    background-color: #d5d7de;
    color: white;
    /* color: var(--KTextPri-color);*/
}


.Klynke_Button_MSG_L {
    color: white;
    font-size: 0.87rem;
    font-weight: var(--KNormal);
    background-color: #4b8ed1;
    /*background: -webkit-linear-gradient(to bottom,#2b5aa7,#193664);*/ /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to bottom,#2b5aa7,#193664);*/ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 5px;
}

.Klynke_Button_MSG_L:hover, Klynke_Button_MSG:focus {
    background-color: #d5d7de;/* #cacdd5;*/
    color: white;
    /* color: var(--KTextPri-color);*/
}

.Klynke_OutlineBox_MSG {
    border-color: #4472c4;
    border-style: solid;
    border-width: 2px;
}

.Klynke_Button_MSG {
    color: white;
    font-size: 0.87rem;
    font-weight: var(--KNormal);
    background-color: #4472c4; /* #3a72bf;*/
    /*background: -webkit-linear-gradient(to bottom,#2b5aa7,#193664);*/ /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to bottom,#2b5aa7,#193664);*/ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 5px;
}

.Klynke_Button_MSG:hover, Klynke_Button_MSG:focus {
    background-color: #d5d7de;  /*#5385ca;*/
    color: white;
    /* color: var(--KTextPri-color);*/
}

.Klynke_SignInButton {
    color: #ffffff;
    background-color: #898f9f;
    font-size: 1rem;
    font-weight: var(--KNormal);
}

.Klynke_ExcelButton {
    color: #ffffff;
    background-color: #60aa1b;
    font-size: 0.87rem;
    font-weight: var(--KNormal);
}
.Klynke_ExcelButton:hover, .Klynke_ExcelButton:focus {
    background-color: #afd48d; /*#dfe7f0;*/
    color: var(--KTextPri-color); /*#0b121a;*/
}
/*
.Klynke_GreenIkon {
    color: #60aa1b;
    background-color:transparent; 
    font-size: 0.87rem;
    font-weight: var(--KNormal);
}
*/
/*.Klynke_RedIkon {
    color: var(--KActDelete-color);
    background-color: transparent;
    font-size: 0.87rem;
    font-weight: var(--KNormal);
}*/

.Klynke_ActiveArrow {
    color: #2d77aa;
}

.Klynke-MainBanner {
    background-color: var(--KBanner-color);
    height: 2.5rem;  /*3 rem 48px  2.5rem 40*/
}

.navbar-text {
    display: inline-block;
    padding-top: 0.125rem; /*0.5rem;*/
    padding-bottom: 0.125rem; /*0.5rem;*/
}

/*sidebar nav*/
#sidebarcontainer {
    padding: 0;
    background-color: white;
}


.Klynke_NavLight {
    color: var(--KTextPri-color);
    font-size: 0.87rem;
    font-weight: var(--KNormal);
}

.Klynke_NavLight:hover, Klynke_NavLight:focus {
    background-color: var(--KNavHover-color); /*#dfe7f0;*/
    color: var(--KTextPri-color); /*#0b121a;*/
}

.Klynke_NavLight.active {
    /*virkt val*/
    background-color: var(--KNavSelect-color); /*#b7c9de;*/
}


.Klynke_Nav {
    color: var(--KTextPri-color);
    font-size: 0.87rem;
    font-weight: var(--KSemiBold);
}

.Klynke_Nav:hover, .Klynke_Nav:focus {
        background-color: var(--KNavHover-color); /*#dfe7f0;*/
        color: var(--KTextPri-color); /*#0b121a;*/
    }
.Klynke_Nav.active{
        /*virkt val*/
        background-color: var(--KNavSelect-color); /*#b7c9de;*/
    }

.Klynke-InputGroupText {
    color: var(--KTextPri-color);
    background-color: var(--KBackSec-color); /*#f3f4f6;*/
}


.Klynke-WorkTime {
    color:var(--KTextPri-color);
    background-color: var(--KBackPri-color);  /*#dce0e5;*/
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
}

.Klynke-WorkTime:hover {
  opacity: 0.4;
  /*border: solid;
    border-color: red;    
    color:white;*/
}

.Klynke-DaySelection {
    background-color: var(--KBackSel-color); /* #dfe7f0;*/
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
}


.Klynke-Add {
    color: var(--KActCreative-color); /*#60AA1B; *//*#337d54;*/
    font-weight: var(--KBold); /*bold;*/
}

.Klynke-Delete {
    color: var(--KActDelete-color); /*#337d54;*/
    font-weight: var(--KBold); /*bold;*/
}

.Klynke_TotalTime {
    font-size: 0.75rem;
    font-weight: 400;
}

.klynke-tableHead {
   /* color: var(--KTextPri-color);*/
    background-color: var(--KBackSec-color); /*#e8eaee;*/
   /* border-bottom-color:#c5ccd4;*/
   /*border:none;*/
}

/*New Klynke Styles end*/


/*.sidenav-link.active {*/
/*virkt val*/
/*background-color: var(--KNavSelect-color);*/ /*#b7c9de;*/
/*}*/

/*.sidenav-link {
    color: var(--KTextPri-color);*/ /*#0b121a; */
/*font-size: 1rem;
    font-weight: var(--KNormal);
}*/

/*.sidenav-link:hover, .sidenav-link:focus {
    background-color: var(--KNavHover-color);*/ /*#dfe7f0;*/
    /*color: var(--KTextPri-color);*/ /*#0b121a;*/
/*}*/
/*.nav li a {
    color: white;
    background-color:antiquewhite;
}*/
/*.nav li a:hover {
    color: #0056b3;
    background-color:red;*/ /*#b2c5db*/
/*}*/
/*.nav > .active > a {
    color:#ffffff;
    background-color:aqua;
}*/
/*.nav li a:focus {
    color: #0056b3;
    background-color: coral;
}*/
/*.navbar .navbar-brand img {*/
/* width: 1.5em;
    height: 1.5em;*/
/*}*/
.klynkePicture {
    width: 0.75em;
    height: 0.75em;
}

/*.navbar-fixed-top {
    height: 40px;
}

.navbar-brand img {
    height: 40px;
}*/


.Klynke-SideBanner {
    background-color: #355274; /*#19527b;*/ /*#003f6d;*/
}


.Klynke-Header {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
    color: #4c4a4a;
  /*  background-color: #DADADA;*/
   /* padding: 0.75rem 1.25rem;*/
}
.Klynke-HeaderLight {
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 1.2;
    color: #4c4a4a;
    /*  background-color: #DADADA;*/
    /*padding: 0.75rem 1.25rem;*/

}

.Klynke-subHeader {
    font-size: 1.15rem;
    font-family:inherit;
    color: #4c4a4a;
    font-weight: 200;
}
.Klynke-normalBody {
 /*   font-family: Roboto,"Segoe UI";*/
}
.Klynke-small {
    font-family: inherit;
    font-size: 0.68rem;
}

.Klynke-totalTime {
    font-family: inherit;
    font-size: 0.75rem;
}


.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    /* background-color: rgba(0, 0, 0, 0.03);*/
    font-size: 1.3rem;
    font-weight: 300;
    background-color: #DADADA;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-link {
    color: #007bff;
}
.card-link:hover {
    color: #0056b3;
    /* font-weight: 500;*/
}

/*
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}*/



.col-form-label {
   
}
.form-group{

}

/*.card {
    border: none;
}*/

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

.customClassForDropDown {
  /* max-height: 800px;
    overflow-y: auto;*/
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

/*#tabs {
    background: #007b5e;
    color: #eee;
}

    #tabs h6.section-title {
        color: #eee;
    }

    #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #f3f3f3;
        background-color: transparent;
        border-color: transparent transparent #f3f3f3;
        border-bottom: 4px solid !important;
        font-size: 20px;
        font-weight: bold;
    }

    #tabs .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        color: #eee;
        font-size: 20px;
    }*/

.not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
}



main {
    padding-top: 1rem;
}

.modal-header {
    color: #5D7B9D;
}



.FullWidth {
    flex-grow: 1;
}

.wrapper {
    min-height: 100vh;
    max-height: 100%;
}

.belowtop {
    margin-top: 48px;
}

.nopadding {
    padding: 0;
}

.pagination {
    padding-bottom: 0.25rem;
}

main {
    max-height: 100%;
    overflow-y: auto;
}


/*.nav-tabs .nav-item.show .nav-link {
    color: #495057;
    background-color: #000;
    border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #495057;
    background-color: #000;
    border-color: #dee2e6 #dee2e6 #fff;
}*/
/*hover color on sidebar*/

/*Main menu*/

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 48px; /* Height of navbar */
    overflow-x: hidden;
    overflow-y: auto;
}

/*.sidebar-sticky li a {
    color: #19527b;
    background-color: white;
}


.sidebar-sticky li a:hover {
    color: #19527b; 
    background-color: #b2c5db
}*/

/*.nav > .active > a {*/
/* color:#ffffff;*/
/*}*/
/*
.sidebar-sticky > .active > a:active {
    color: white;
}*/
/*.sidebar-sticky li a:focus {*/
    /*color: white;*/
/*}*/
/*
.sidenavColor {
    color: white;
}*/
/*
.nav-link.active,
.nav-item.show {
    color: white;
    background-color: #5e85a2;
}
*/
/*.sidenav-active {
    background-color: #5e85a2;*/ /*#dcecf9*/
/*}*/

.info-loading {
    padding: 6px 10px;
    margin-bottom: 6px;
    background: #fffbe6;
    border-left: 4px solid #f0c36d;
    font-size: 0.9em;
}


.nav.is-loading {
    pointer-events: none;
}



.dropdown-Klynkmenu {
    width: 300px !important;
   /* height: 400px !important;*/
}

/*Mobile menu nav-link sidenav-link*/


.SidebarMobileContainer{
    background-color:white;
}

#navPic {
  padding: 0;
  margin: 0;
}

#ProjectListData{
    padding-bottom: 0.5rem;
}

#CaseListData {
    padding-bottom: 0.5rem;
}



.card {
    border: none;
}

#collapseOne > .card-body {
    padding-left: 0;
    padding-right: 0;
}

#collapseTwo > .card-body {
    padding-left: 0;
    padding-right: 0;
}

#collapseThree > .card-body {
    padding-left: 0;
    padding-right: 0;
}

#collapse4 > .card-body {
    padding-left: 0;
    padding-right: 0;
}



/*To make bootstrap spinner work properly*/
@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.hero-image {
    background-image: url("../Images/bustadur-panorama-small.jpg"); /* The image used */
    background-color: #ffffff; /* Used if the image is unavailable */
    height: 400px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

.tooltip > .tooltip-inner {
    background-color: var(--KBackSec-color); /*white;*/ /*lightgray;*/
    color: var(--KTextPri-color); /*#97a3b2;*/
    border-color: var(--KBanner-color); /*#aeb7c3;*/
    border: outset;
    font-weight: var(--KNormal);
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--KBanner-color);
    /*#aeb7c3;*/
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--KBanner-color);
   /* #aeb7c3;*/
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--KBanner-color);
 /*   #aeb7c3;*/
}

.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--KBanner-color);
   /* #aeb7c3;*/
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .tooltip {
        display: none !important;
    }
}
/*
@media(hover: none) {
    .tooltip {
        display: none !important;
    }
}
*/