:root {
    --mun-primary-color: 47,125,125;
    --mun-secondary-color: 250,181,54;
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

*:not(i) {
    font-family: Roboto, sans-serif !important;
}

html {
    font-size: 14px;
}

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

html {
    position: relative;
    min-height: 100%;
}

body {
    /* margin-bottom: 60px;*/
}

.custom-form {
    min-height: 500px;
    position: relative;
}

.container {
    padding: 1.5rem 2rem;
    box-shadow: 0 0 5px #0000002b;
}

.form-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.btn-app {
    border-color: rgb(var(--mun-primary-color)) !important;
    background-color: rgb(var(--mun-primary-color)) !important;
    color: white !important;
}

.btn-margin {
    margin-left: 2px;
    margin-right: 2px;
}

.btn-app:hover {
    border-color: rgb(var(--mun-secondary-color), .7) !important;
    background-color: rgb(var(--mun-secondary-color), .7) !important;
    color: black !important;
}

.btn-secondary-app {
    border-color: rgb(var(--mun-secondary-color), 1) !important;
    color: rgb(var(--mun-secondary-color)) !important;
}

    .btn-secondary-app:hover {
        border-color: rgb(var(--mun-secondary-color), 1) !important;
        background-color: rgb(var(--mun-secondary-color), 1) !important;
        color: black !important;
    }

#logo-img {
    max-height: 67px;
}

.nowrap {
    white-space: nowrap;
    overflow: auto
}



/* Number input fields increase decrease toggle disable */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/*---------------> Header Login <---------------*/
.header-buttons:hover {
    color: white !important;
}
/*--------------->End Here <---------------*/

/*---------------> Services href <---------------*/
.right-button {
    float: right;
}
/*--------------->End Here <---------------*/
.addServiceDoc, .addServiceOutDoc, .addServicePrice, .addServiceAdditioalField {
    cursor: pointer;
    text-decoration: none;
    max-width: 100px;
    font-size: 15px
}

.hidden {
    display: none;
}

.templateArea {
    height: 500px;
}


/*-----------------> ScrollBar View <-----------------*/
/* width */
::-webkit-scrollbar {
    width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 1px 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: silver;
    border-radius: 10px;
}
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: gray;
    }

.navIconStyle {
    float: right;
}

.nav-link {
    color: black
}
/*-----------------> End Here <-----------------*/

/*-----------------> Sidebar <-----------------*/
/*.CustomLeftnavbar {
    border-right-style: solid;
    border-width: thin;
    border-color: #dee2e6;
}*/

.nav-item-sidebar {
    /*margin-top: 10px;*/
    color: black;
}

.nav-link {
    color: black;
    padding: 15px;
}

.navbar-nav {
    /*margin-top: 10px !important;*/
    /*padding-left: 10px !important;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-link {
    color: black;
    height: 50px;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.nav-link:hover {
    color: rgb(var(--mun-secondary-color), 1) !important;
}

.nav-item-icon {
    visibility: hidden;
    float: right;
    width: 15px;
}

.nav-item-sidebar:hover {
    background-color: #ededed;
}

.ongoingProcessInstance {
    color: dodgerblue;
}

.finishedProcessInstance {
    color: limegreen;
}

.taskIconStyle {
    color: dodgerblue;
}

.mg-auto {
    margin: auto;
}

/*-----------------> End Here <-----------------*/
/* Home page service search bar and cards */
.serviceSearch {
    height: 40px;
    border-radius: 15px;
    background-color: darkgray;
    color: white;
    margin: auto !important;
    text-align: center;
    cursor: pointer;
    overflow: auto;
}

.service {
    border-radius: 6px;
    background-color: rgb(var(--mun-primary-color),1);
    color: white;
}

    .service:hover {
        background-color: rgb(var(--mun-secondary-color),.7);
        color: black;
    }

    .service a {
        color: inherit;
    }

    .service i {
        display: flex;
        align-items: center;
        align-content: center;
    }
/*-------------------------------------------*/

/* Request forms */
#request-form .nav-tabs .nav-item .nav-link, #user-profile .nav-tabs .nav-item .nav-link {
    /*   background-color: #f5f7fa;
    border: 0.5px solid #0000002b;*/
    border: none;
    background: white;
    min-height: 3rem;
    font-weight: 300
}

    #request-form .nav-tabs .nav-item .nav-link.active, #user-profile .nav-tabs .nav-item .nav-link.active {
        color: rgb(var(--mun-primary-color), 1);
        border-bottom: 3px solid rgb(var(--mun-primary-color), 1);
        font-weight: 500
        /*  background-color: rgb(var(--mun-primary-color), 1);
        border-color: rgb(var(--mun-primary-color), 1);*/
    }

.container {
    padding: 1.5rem 2rem;
    box-shadow: 0 0 5px #0000002b;
}

/*-----------------> End Here <-----------------*/

/*-----------------> Dropdown <-----------------*/

.dropbtn {
    /* background-color: white;*/
    color: white;
    /*  padding: 16px;*/
    font-size: 16px;
    border: none;
    border-radius: 8px;
    /*  min-width: 160px;*/
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    /*    background-color: #f1f1f1;*/
    background-color: white;
    min-width: 160px;
    box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.2);
    z-index: 1;
    right: 0;
    border-radius: 5px;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover, .dropdown-content button:hover {
            background-color: #ddd;
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
/*.dropdown:hover .dropbtn {
    background-color: gray;
}*/

/*-----------------> End Here <-----------------*/
/*---------------------> Navbar Icons <-----------------------*/
.navIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #347f7d;
}

.navLi:hover {
    cursor: pointer;
}

    .navLi:hover > .navIcon {
        color: rgb(var(--mun-secondary-color), 1)
    }

.navbarIcons {
    padding: 0px !important;
}

.navLi {
    background-color: lightgray;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    margin-right: 8px
}
/*.navIcon:hover {
    animation: glow 1s ease-in-out infinite alternate;
    color: #347f7d;
}

@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #347f7d, 0 0 40px #347f7d, 0 0 50px #347f7d;
    }


}*/
/*-----------------> End Here <-----------------*/

/*-------------------------------------------------mojot multiple dropdown dole---------------------------------------------------------------------------------*/
.dropdown-check-list {
    display: inline-block;
    border: 1px solid lightgray;
    position: relative;
}

    .dropdown-check-list .anchor {
        cursor: pointer;
        display: inline-block;
        /*  padding: 6px 0;*/
        width: 100%;
        text-align: left;
    }

        .dropdown-check-list .anchor:after {
            position: absolute;
            content: "";
            border-left: 2px solid black;
            border-top: 2px solid black;
            padding: 2.5px;
            right: 6px;
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }

    .dropdown-check-list ul.items, .dropdown-check-list ul.items2 {
        padding: 5px 15px;
        display: none;
        margin: 0;
        border-top: none;
        position: absolute;
        background: white;
        z-index: 100;
        left: 0;
        border: lightgray 1px solid;
        width: 100%;
        border-radius: 0 0 10px 10px;
    }

        .dropdown-check-list ul.items li, .dropdown-check-list ul.items2 li {
            list-style: none;
            margin-top: 2px;
            display: flex;
            align-items: center
        }

            .dropdown-check-list ul.items li > span {
                text-align: left;
                margin-left: 5px;
            }

            .dropdown-check-list ul.items li:hover, .dropdown-check-list ul.items2 li:hover {
                cursor: pointer;
                background: lightgrey;
            }

.lightgrey {
    background-color: #f0f0f0;
}

.items span, .items2 span {
    width: 100%;
}

.dropdown-check-list.visible .items, .dropdown-check-list.visible .items2 {
    display: block;
}

.EmpLoanPurposeItems {
    position: absolute;
    z-index: 100;
    width: inherit;
    left: 0;
    background-color: white;
    padding: 6px;
    border: 1px solid gray;
    border-top: none;
}
/*---------------------------------------------------mojot multiple dropdown gore-------------------------------------------------------------------------------*/


/*--------------------------------------------------- Default Browser form Municipality ---------------------------------------------------*/
.textDesigne {
    font-size: 25px;
    text-decoration: none;
    color: #76B0AF;
    /*    text-align: center;*/
    margin: auto;
    background-color: silver;
    border: 1px solid green;
    border-radius: 25px;
}

    .textDesigne:hover {
        background-color: seashell;
        color: #206638;
    }
/*--------------------------------------------------- End Here ---------------------------------------------------*/

.dataTables_paginate .pagination {
    justify-content: center !important;
}

    .dataTables_paginate .pagination .paginate_button .page-link {
        color: rgb(var(--mun-primary-color)) !important;
    }

    .dataTables_paginate .pagination .paginate_button.active .page-link {
        border-color: rgb(var(--mun-primary-color)) !important;
        background-color: rgb(var(--mun-primary-color)) !important;
        color: white !important;
    }

.dataTables_length {
    margin-top: 10px;
}

.dt-buttons button {
    margin-right: 5px !important;
    border-radius: 6px !important;
}

.select2-selection {
    height: 38px !important;
    border-color: #ced4da !important;
}

.dateRangePicker {
    cursor: pointer;
}

.comments-btn {
    position: fixed;
    margin-right: 10px;
    right: 0;
    bottom: 5%;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}


#acceptTask {
    margin-right: 10px;
    background-color: #347f7d;
    color: white;
}

    #acceptTask:hover {
        background-color: #2c6f6e;
    }

#taskButtons {
    margin-right: 1px;
}

/*.comments-btn span {
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: rgb(var(--mun-secondary-color));
        right: 0%;
        top: 0%;
        border-radius: 50%;
    }*/
/*.select2-selection__rendered {
    padding-top: 5px !important
}
*/
/*.select2-selection__arrow {
    margin-top: 5px !important;
}*/
.project-green-b {
    background-color: #76B0AF
}

.project-yellow {
    color: #ffc107
}

.municipalityLink {
    color: white;
    text-decoration: none;
    font-size: 30px;
}

    .municipalityLink:hover {
        color: black;
        text-decoration: none;
    }

    .municipalityLink > div {
        background-color: rgb(var(--mun-primary-color),1);
        border-radius: 6px;
    }

    .municipalityLink:hover > div {
        background-color: rgb(var(--mun-secondary-color),.7);
    }
/*-----------------------------------------------------------------------*/
.myGoldenBackground {
    background-color: rgb(250,181,54) !important;
}

.nav-item-active-color {
    color: rgb(250,181,54) !important;
    border-bottom: 3px solid rgb(250,181,54);
}

.primaryColor {
    color: #347f7d !important
}
/*----------------------------------------------------------------------*/
.commentModal-dialog {
    position: absolute;
    bottom: 5vh;
    right: 50px;
    max-width: 30vw;
    min-width: 25vw;
}

.form-control:focus, .form-select:focus {
    border-color: rgb(var(--mun-primary-color));
    box-shadow: 0 0 0 0.25rem rgba(var(--mun-primary-color), 0.25);
}

.disableField {
    pointer-events: none;
    color: black;
    background: #F5F5F5;
}

.rightPanel {
    display: none;
    position: absolute;
    top: 10%;
    left: 85%;
    width: 270px;
    text-align: center;
}

.footerHomePanel {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    bottom: 0;
    margin-bottom: 5%;
}

/*@media (max-width: 950px) {
    .rightPanel, .footerHomePanel {
        display: none;
    }

    .required-label:after {
        content: " *";
    }
}*/

@media (max-width: 900px) {
    .rightPanel {
        order: 3; /* Change the order of rightPanel to appear below RenderBody() and footer */
        margin-top: 20px; /* Add some top margin to separate from the main content */
        background: green;
    }

    .footerHomePanel {
        order: 2; /* Change the order of footer to appear above rightPanel */
    }
}

.ulTestVersion {
    display: flex;
    align-items: center;
}

/*.mobileVersion {
    display: none;
}*/


@media (max-width: 575px) {
    .dekstopVersion {
        text-align: center;
        margin: 15px 0 !important;
    }

    .ulTestVersion {
        display: block;
    }

    /*    .mobileVersion {
        display: block;
    }*/

    .hamburgerMenu {
        border-bottom: 1px solid black;
    }

    .margineForSearch{
        margin:0;
    }
    .offsetForButton {
        margin-left: 0em;
    }
}

@media (min-width: 576px) {
    .service {
        margin: auto !important;
        margin-top: 5px !important;
    }

    .margineForSearch {
        margin: auto;
    }

    .offsetForButton {
        margin-left: 23em;
    }
}